Basic HTML
Today's objectives
Today, we'll be introducing the class, making sure we have access to the right technology, dealing with any administrative questions, and beginning our work on designing and building for the internet.
- Course overview
- Introductions
- Review course outline
- Technology requirements
- Context: History of the web, basic web technologies
- Getting started: Tools
- Browsers
- Text editors
- FTP clients
- Design tool: Figma
- Web servers
- Basic HTML
- Document skeleton
- Head elements
- Block and inline elements
- Hyperlinks
- Images
Tasks
In-class task: build and upload a simple file
Presentations
Agenda
Tasks for next class
Make sure to prepare for each online lecture. If you have questions about code, have your (non-working) code ready to share in class.
For next class:
- Have all software tools installed and tested.
- Store all logins somewhere secure.
- Review basic HTML handout and template
Samples
Here you will find any sample files you need for class.
Basic HTML
See the Pen by Robert Currie (@rcurrie) on CodePen.
Handouts
Please download the basic HTML handout.
Tutorials
Uploading with Fetch
This is our preferred program in this class. We have a free educational licence - ask me for details. Fetch is Mac-only software.
Uploading with Filezilla
Windows users can upload with Filezilla.
Uploading with Cyberduck
Resources
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- Getting started with HTML on the Mozilla Developers Network
- https://www.w3schools.com/html/default.asp
- Basic HTML from W3Schools
- https://html.com
- Getting started with HTML.com
Tools
- VS Code editor
- A free, open-source, cross-platform editor for HTML and more
- Fetch FTP
- An easy-to-use FTP client for MacOS. We have a free student licence for this you can use on your computer. More info in the class Slack.
- Filezilla
- A free, open-source, ugly, cross-platform FTP client for moving files to your web server.
Tasks
Task 01 - upload a file
Using FTP
Upload a basic HTML page to your class web hosting server using FTP. The content of the page does not matter as long as you created it yourself. Images and styles are not needed.
The file must be called index.html. It will replace the current index.html file which is a placeholder. You can test it using the "URL (link to your web page)" link in the email containing your password, etc.
Objective: demonstrate that you can create a very basic HTML file and upload that file to the server.
Due • Wed, Sep 18, 6:00 PM.
Task 02 - basic Figma task
Complete and share the basic tutorial.
Complete the basic Figma tutorial: Basic wireframe tutorial
Name the Figma project [yourlastname]figma-task-1
When complete, use the share button to invite me to access the file. Use my NSCAD address for the invitation.
Objective: demonstrate that you can use the basic functions of Figma. No original design is needed, but you need to complete the tutorial on your own.
Due Wed, Sep 18, 6:00 PM.
Professional practice
Here you'll find content about the business and profession of interactive design. Look for topics here in future classes.
Need help?
Contact me - Slack is best.