Web Publishing | Intro to HTML & CSS
Lesson 2: HTML; the Tags, the Tools and trying them out.
This lesson looks at resources for learning HTML, what sort of tools you use to write html and a chance to make a web page "by hand".
To ensure a web page looks and behaves the same across all browsers, devices, networks and can be developed in a collaborative scenario there needs to be a set of guidelines that determine how the code has to be written.
Learning HTML is getting easier thanks to the code undergoing fewer changes and there's greater quantity and better quality of resources.
W3Schools has evolved to become one of the better resources for learning web coding.
W3Schools lists all the current HTML tags with definitions and offers a sequence of structured tutorials going from basic tasks to more complicated. It also has a browser-based code editing tool (opposite) that provides a split screen showing the results of your coding. You write the code on the left and it shows you the results on the right.
Codepen (opposite) offers a similar scenario for writing testing and experimenting with code but it offers far more utility.
Codecamp is similar again but your coding is deployed in a simulated mobile device and uses an achievement scenario to encoruage you to progress.
Kahn Academy offers a series of video tutorials that cover an intro. HTML & CSS.
Mozilla Foundation has a vast range of learning resources. They're all text-based however so may not appeal to those looking for a more visual delivery.
Jeremy Keith has written a free eBook with an option to buy a printed version: https://html5forwebdesigners.com/
It features a chapter on Semantic HTML which explains how to use the "new" HTML5 tags.
This is best left until you've explored HTML5 a little. It's not an instructional text for beginners but more of a reference for when you've understood basic HTML.
HTML uses "tags" to tell browsers how to display content. To surround or "mark-up" content an opening tag and a companion closing tag is used at the start and end of the content. The closing tag is almost identical except for ther addition of a forward slash.
For example, the following tags...<strong> Mary Jane </strong> ...tell the browser to make Mary Jane bold. This has semantic meaning as well. Search engines can see that Mary Jane has been "tagged" with the strong tag and as a result, is ranked with greater emphasis.
There's around 130 HTML5 tags. New tags are added and superceded tags removed. It's rarely static.
Here they are alphabetically listed. (W3Schools)
Here they are arranged in related categories. (Mozilla Developer)
Here they are listed with each tag linked to it's detailed definition (HTML5 Tutorial.com)
Learning Task | Learn with W3Schools (6-9hrs)
W3Schools offer a sequence of tasks to build your HTML skills. You learn by "tinkering" with the code and instantly seeing results. It's all done using their web-based custom code editor interface.
Work through their tasks in sequence from HTML "Home" to HTML "Summary".
For a demonstration of exactly how to do this, see our Google Drive shared folder for the supporting video; "w3schools.mp4" (70MB).
There is no submission for this task.
Chris Adams 2017
Assessment Task | Make a simple web page (3-6 hrs)
Once you've worked through the W3Schools HTML tasks, you should be ready to make a simple HTML5 web page using your preferred text editor.
Use just HTML5 and no CSS or positioning information. This will be a very simple web page. Aim for 300 words and at least 3 images.
Think of a single topic for your page and use supporting images and hyperlinks to communicate your message.
At a minimum you need to include the following tags:
- h1, h2, h3
- img (for adding images)
- a href (for adding a hyperlink to another web site)
- a href mailto: (for adding an email link)
Download and watch the supporting demonstration videos on how to use a text editor, in this case Notepad ++, to make a basic web page. basichtml1.mp4 (36MB), basichtml2.mp4 (78MB).
Use the Assignment Tool to submit a zip archive of your folder that contains both the code and any images you used.
Chris Adams 2017
In this lesson we had a look at HTML; what it does and how to write your own HTML code to make a basic web page.