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".

Coding Standards
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.

This is the role of the World-Wide-Web Consortium (W3C) and it covers HTML, CSS & Javascript. The process of checking your code against these standards is known as validation. You'll be expected to validate your code in the assessment task.

Learning HTML
wikimedia

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.

For more free texts on web coding.

HTML

HTML dark-blue tshirt with the <body> tag(click for W3Schools definition) is the code that web browsers read to display a web page. Note: it's not the only code that browsers can process. Modern browsers can process PHP, CSS and XML, Javascript (often abbreviated to JS), SVG, Canvas, MP3s/ MP4s, Java & Flash (using plug-ins) as well.

"TAGS"

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).

Submission Guide
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:

  • doctype
  • html
  • head
  • p
  • title
  • body
  • 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)

Which Text Editor?
Download and install either of the free-to-use Notepad++, Brackets, Atom. They're all pretty similar and easy to use.

Supporting Resources
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).

Submission Guide
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

Lesson Summary

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.