Class Session: Wednesday Jan 30, 2019

HTML: The Structural Layer of Web Design

Preparation for this Session

Sections from Mozilla Developer Network (MDN) will serve as our primary reference material: Check out this link if you like, but don't start reading here. Start reading the sections below.

When you are reading the getting started section, you will read about a lot a different tools. All we need for this class is a browser and a text editor.

Read over as carefully as possible:

If you already have experience with a favorite text editor, you are free to use it instead of Atom, but I will be using Atom, so you might want to at least give it a try.

Atom is an open source cross platform text editor that works on Macs and Windows. That is my tool of choice when I am developing, so I will use it a lot this session. You can get Atom here.

Dreamweaver is also a very good text editor. You will need to have access to the Adobe Creative Suite to try it out: https://software.sites.unc.edu/software/adobe-creative-cloud/

If you have a Windows laptop, you might want to download Notepad ++. It is both useful and free.

You might want to download Brackets. It is cross-platform (it works on Macs and PCs).

I use Firefox when I develop websites mainly because I have been using it for about 20 years. Chrome is good too. When I am demonstrating how to view source code or use developer tools, I will be doing it with Firefox and/or Chrome. Edge and Safari are too specific to the PC and Mac. You should test out your site and see how it looks on Edge and Chrome, but don't depend on them for development purposes.

Read over the class notes and do your best to memorize the bare minimum code for an HTML page.

top/reload prep panel

Here is a link to a directory of files that I will go over during today's lecture

HTML is the acronym for Hypertext Markup Language

Body and Head Tags

The fundamental structure of html is the two-part model of <head> and <body> . Every valid HTML page must include a head and a body.

The head and body can be thought of as "markup" content containers:

<head></head>
<body></body>

The browser display ignores white space and comments, so the block below will render the same as the block above:

<head>
     <!-- Head CONTENT goes here.-->
</head>

<body>
     <!-- Body CONTENT goes here.-->
</body>

The head and body markup must be wrapped in open < and close > brackets.
The markup and the brackets are called tags: <head> <body>
The end tag has a forward slash between the first angle bracket and end tag name. </head> </body>
The vast majority of html tags must have a start and end tag, but there are exceptions which we will cover later.
Everything in brackets is invisible when viewed in a browser.
The comments in the containers are in markup, so they are invisible, as well.
To view the invisible parts of a web page, you can can right click on the browser window and choose "view source".

The HTML tag

Note the definite article "the". There are various html tags all of which can be an html tag. But we are specifically talking about the master every-thing-goes-in-here primary HTML tag.

The head and body tag must be wrapped in the primary html tag container:

<html>
<head></head>
<body></body>
</html>

Doctype Declaration

A Doctype Declaration must be placed at the very beginning. It is one of those exceptions that does not require an end tag. The entire tag is contained in two brackets.

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

The Doctype is necessary for legacy reasons and because there are other types of documents, XML for example, which we will talk about in a later class. The curent html doctype is HTML5. The HTML5 doctype is implied. You do not need to put the 5 in the doctype declaration.

Final Required parts of code

There are just a few more requirements to make this a valid web page. We need to put a title in the head and we should put at least an h1 tag and an p tag in the body.

<!DOCTYPE html>
<html>
  <head>
    <title>Demo Web Page</title>
  </head>
  <body>
    <h1>Demo Web Page</h1>
    <p>
     This is a demo web page. It represents the bare minimum layout for a simple web page.
    </p>
  </body>
</html>

Class Sessions

School Information