Basic HTML5 - Instructor: Nadine Wettlaufer

Topics:

What is HTML?

HTML (HyperText Markup Language) is the code that web pages are written in. A web page is actually just a plain ASCII format text file that contains HTML tags plus text, images, sounds, etc. which the page creator wants people to see together in a web browser (like Firefox, Safari, Chrome, Internet Explorer, etc).

HTML5 - is the newest widespread HTML standard with added functionality compared to other (older) varieties of HTML. The HTML we will teach in this course is HTML5 informed by a history of XHTML 1.0 Transitional (and if that doesn't mean anything to you right now, don't worry about it).

An ASCII text file could also be referred to as a plain text file, a text-only file, or simply as a text file. ASCII text format files can't hold any fancy formatting, fonts, or graphics; just letters, numbers, spaces, punctuation, and certain symbols. HTML tags are usually made up of just these elements.

How to Save your HTML Files    back to top

File naming is restricted on the Web. When you create a web page, you need to save it in a certain kind of format, with a certain kind of name.

The format, or file format, of a web page is ASCII text format. Again, this format is sometimes called text format, text only format, or plain text format.

HTML editors (like BBEdit, for instance) are useful in creating web pages because they automatically choose text format when saving files -- without you having to do a thing to choose that format. If you are using a program that doesn't automatically choose the right format, you need to make sure that you are choosing text format when saving.

But, when saving an HTML page, you also have to save the file using the right kind of name...

What to Name your HTML Files    back to top

So name your files along the lines of "something_simple.html" or "something.html" and you, the web servers, and your audience will be happy.

To Recap:    back to top

A web page is a web page because it has the following:
  1. the file is saved in text-only format
  2. the file is saved with a proper name that ends with .htm or .html
  3. the file has text and HTML tags in it

How to Look at your HTML Files    back to top

To view your HTML file the way it will be seen on the WWW, you must look at it in a browser (Firefox, Safari, Chrome, Internet Explorer, etc.), or in more than one.

In your browser, choose FILE then OPEN FILE and then choose the page you want to see (or or choose something similar to this).

You can keep both the browser and your editor windows open on the screen at the same time. Just click on the one you want to use, or press Command + Tab (on a Mac) or Alt + Tab (on a PC) to switch between the applications.

To change the HTML in your web page, you must look at the HTML code in BBEdit, or whatever HTML editor you are using.

After you have made changes to your HTML file in whatever HTML editor you are using:

If you don't do both these steps, the browser won't show the changes you have just made to the HTML code.



To recap: Write your web pages in an appropriate HTML editor, like BBEdit.
Save pages with a filename with .htm or .html on the end, like thisthing.html
Open the files in a browser to view the web pages.

HTML - The Actual Tags    back to top

HTML is a mixture of plain text and HTML tags - which tell the web browser how to format this text. So you wrote some text about your little sister, for example, and you want it to show up on the web page -- so you use HTML tags around and in the text to make the text show up nicely in the browser.

Tags consist of a few letters enclosed in angle or "pointy" brackets -- < and >, also called the greater-than and less-than symbols. The letters enclosed in the brackets are ususally a short form for words describing what the tag actually does. For instance, the <br /> tag leaves a line break between whatever is before it and whatever is after it.

Most tags are used in pairs, one to start a command, the other to stop it. For example the bold tag is <b> while the end bold tag is </b>. Tags that come in pairs are also called containers, because one is placed before and one is placed after the text they are supposed to modify -- therefore, they contain the text they modify.

Using the bold tags around a word:
In the HTML editor where you are writing the HTML, you write: <b>Example</b>
which will then show up in a web browser like so: Example

HTML "tags" are sometimes also called HTML "elements".

HTML Page Structure    back to top

Explanation:

The code in HTML pages has four major parts -- the DOCTYPE tag, the overall HTML tag, the head, and the body.

1 - The DOCTYPE for HTML5 (which is what you are asked to use in this course) comes first.

2 - After the DOCTYPE comes the overall HTML tag, which surrounds _all_ other tags on the page.

3 - Then comes the head tag section.
At this stage in your learning, the only thing we will put in the head section is the title tag.
The text in the title tag becomes the title of the browser window.

4 - After the head tag comes the body tag section. The body section will contain all the interesting stuff you create: the text, graphics, sounds, etc., as well as HTML tags.

Example:

All HTML5 files have this structure. USE IT FOR ALL WEB PAGES YOU MAKE FOR THIS COURSE:

<!DOCTYPE html>
<html lang="en">

<head>
<title>
your title goes here
</title>
</head>

<body>


all the rest of your stuff, including text that you want 
people to see, HTML tags, image tags, etc. goes here


</body>
</html>


HTML Tags that go between the two body tags shown in the structure above:    back to top


Word Wrapping and Paragraphs

When seen in the browser window, HTML ignores the carriage returns, enters, and blank lines that you see in your document when you are writing HTML in the HTML editor. This is normal. Your text will all run together and will be wrapped to fit in the browser's window.

To get around this problem of text running together, you have to use HTML tags. To force the start of a new line in HTML, you need to use the <br> (break) tag.

Example 1
The following HTML, which has no break tags:
Hi there.
How are you this morning?
Shows in the browser like this:

Hi there. How are you this morning?
Example 2
This HTML:
Hi there. <br>
How are you this morning?
Shows in the browser like this:

Hi there.
How are you this morning?

Paragraphs are used as a container for text: <p> and </p>.
Paragraph tags around text break the line and leave a blank line before and after that text.

Example 3
This HTML:
<p>Hi there.</p>
<p>How are you this morning?</p>
Shows in the browser like this:

Hi there.

How are you this morning?


If you need more blank lines than you are getting with a paragraph tag, multiple break tags right after one another will push any text below down one line per break tag, giving you extra space.


Text-styling Tags    back to top

Some simple pairs of tags that format text include:

Style Start End This HTML: Shows in the
browser like this:
Bold <b> </b> <b>Bold</b> Bold
Italic <i> </i> <i>Italic</i> Italic
Underline <u> </u> <u>underlined</u> underlined
No Longer Accurate
(stricken through)
<s> </s> <s>Pluto's a planet</s> Pluto's a planet
Marked text
(highlighted text)
<mark> </mark> <mark>marked</mark> marked
Small <small> </small> Average/<small>small</small> Average/small
Subscript <sub> </sub> H<sub>2</sub>O H2O
Superscript <sup> </sup> 23<sup>rd</sup> Street 23rd Street

When combining styles make sure they don't overlap.

This is ok: <b><i>Bold and Italic</i></b>

This is not ok: <b><i>Bold and Italic</b></i>

Remember: the tag you start with should be the tag you end with. The second tag opened should be the second-last tag closed, etc.


Divs and Spans    back to top

Div tags are extremely important for using Cascading Style Sheets (CSS) which give you extensive control over the layout and appearance of web pages. Div tags are all-purpose block-level tags that are extremely flexible and powerful when combined with CSS.

Span tags are also important for CSS, and are all-purpose inline tags that are also flexible and powerful when combined with CSS.

However, when you use div or span tags by themselves, without any CSS, they seem to do almost nothing. Div tags seem like a weaker version of a paragraph tag. But once you start using CSS, divs can be your best friend! And spans become a useful tool you sometimes need.

Plain Div:
This HTML:
<div>Hi there.</div> How are you this morning?

Shows in the browser like this:

Hi there.
How are you this morning?
Plain Span:
This HTML:
<span>Hi there.</span> How are you this morning?

Shows in the browser like this:

Hi there. How are you this morning?
Remember these tags stop being boring when we use CSS (starting next week) to make them do interesting things!

Headings and Text Size    back to top

Firefox's standards are somewhat different from Chrome's standards, which are different from Safari's standards, etc. These browsers are also different on Macs and PCs, because Macs and PCs often use different fonts. This means you don't know exactly what your web page's text will actually look like on the viewer's screen, so it is best to stick with common system fonts. Ideally, you'd test your web pages on both Mac and PC in Firefox, and possibly Chrome and Safari.

When you use simple HTML commands to change font size you are not necessarily specifying an exact point size. Often you are specifying a relative size, one that is bigger or smaller than what the viewer has set as the default.

There are two simple ways of changing the text size with HTML. The original and most supported is to use Heading tags.
Headings are designed to be real headings for the content on your pages: a heading tag makes text automatically bold, and causes it to have a blank line above and below it without your using paragraph or break tags.

Example 4
This HTML:
<h1>An h1 Heading</h1>
<h2>An h2 Heading</h2>
<h3>An h3 Heading</h3>
<h4>An h4 Heading</h4>
<h5>An h5 Heading</h5>
<h6>An h6 Heading</h6>
Shows in the browser like this:

An h1 Heading

An h2 Heading

An h3 Heading

An h4 Heading

An h5 Heading
An h6 Heading


Ordered and Unordered Lists    back to top

You can use the <ol> (ordered list) or <ul> (unordered list) tags to create lists. Ordered lists are automatically numbered for you. Unordered lists use dots (bullets).

Each thing in a list is called a list item, and is surrounded by these tags: <li> </li>

Example 5 NOTE: <li> stands for "list item", so the letters in the tag are li (el eye), not l1 (el one)

This HTML:
Shopping List
<ol>
<li>Garlic</li>
<li>Basil</li>
<li>Olive oil</li>
</ol>
Shows in the browser like this:

Shopping List

  1. Garlic
  2. Basil
  3. Olive oil

Lists can also include other lists:

Example 6
This HTML:
To Do Today
<ul>
<li>Create HTML handout</li>
<li>Teach HTML</li>
<li>Shopping List:<br />
<ol>
<li>Garlic</li>
<li>Basil</li>
<li>Olive oil</li>
</ol>
</li>
<li>Pick up sister from school</li>
<li>Go Home</li>
<ul>
Shows in the browser like this:

To Do Today

  • Create HTML handout
  • Teach HTML
  • Shopping List:
    1. Garlic
    2. Basil
    3. Olive oil
  • Pick up sister from school
  • Go Home


Description Lists    back to top

You can use the <dl> (description list) tag to create description lists. Description lists include a description term (dt) and a description description (dd).

Example 7

This HTML:

<dl>
  <dt>The Term Goes Here</dt>		
    <dd>Description of the term goes here.</dd>
</dl> 
Shows in the browser like this:

The Term Goes Here
Description of the term goes here.
Example 8 - multiple description lists inside <dl> </dl>

This HTML:
<dl>
  <dt>Semantic</dt>		
    <dd>Here I could explain semantic tags.</dd>
  <dt>Some text...</dt>		
    <dd>Text indented relative to the above.</dd>
</dl> 
Shows in the browser like this:

Semantic
Here I could explain semantic tags.
Some text...
Text indented relative to the above.

Blockquotes    back to top

An easy way to simply indent text from both sides is to use the <blockquote> </blockquote> tags around the text you want indented.



Horizontal Rules (Lines)    back to top


The simple <hr> tag creates lines like the one immediately above.



Using Links    back to top

Links are the easy way to navigate the web. They allow the user to go from one page to another quickly and without much effort.

Links have 2 parts:

  1. the where to go part
  2. the what to click on part.

The where to go part of a link is a URL (web address) that you, the creator, put in . The what to click on part can be text or graphics or both. You decide which text and/or graphics.

The link tag looks like this: <a href="some URL">words or an image tag to click on</a>

Example 1 - Linking to a site out on the web

For a real example, we'll link to Altavista, which is a search engine. This HTML:

<a href="http://www.lethargiclad.com">Lethargic Superheroes</a>
Notice how the full URL of the site I'm linking to is put in the quotation marks.

It shows up in the browser like this:

Lethargic Superheroes


Important things to remember about linking:


Example 2 - Link to your own site (a file in the same folder)

Let's say you have two web pages in a folder; one page is named green.html and the other is named frog.htm. To put a link in/on your green.htm page that will take you to your frog.htm page, all you need is to put this tag in the source code of green.html:

This HTML:

<a href="frog.htm">Frogs, frogs, everywhere</a> and the rest of the sentence.

Shows up in the browser like this:

Frogs, frogs, everywhere and the rest of the sentence .



Link to a point partway down a web page:
So far all these link examples take us automatically to the top of a page. But you can also link to somewhere else on a page by creating an a id tag.

This a id tag serves as a target --put it on the page just above the place on the page you want the viewer to go to:
<a id="atargetword"> </a>  

You make a link take the viewer to the anchor by referring to the target id like so:
<a href="url#atargetword">Go somewhere</a>  

Example 3 - Linking to an id (on the same web page)

At the top of this web page, right before the Topics, I've placed an anchor like this in the source code:

<a id="top">  </a>

To link to it from somewhere else on this page, I would use a link tag that looks like this:

<a href="#top">Topics of this page</a>

Which, in a browser, looks like this:

Topics of this page


To link to a target id on a different web page, the link tag would have the URL of that page before the # in the link tag.

If the target id is on a page that is on a different server, you would use the full http:// URL before the #
BUT if the target id is on a page in the same folder as the current page, you'd just use the name of the web page before the #.

Examples of links taking the user to a target id named "top" in each of the pages specified:

Linking to a target id named "top" on a page in a different site on a different server:

<a href="http://www.webpage.outthere.com/onepage.htm#top">Link to a target id on a web page out on the internet</a>

Linking to a target id named "top" on a different page in your site, in the same folder, on the same server:

<a href="mypage.htm#top">Link to a target id on a different page in the same folder on the same server</a>



Putting Images on Your Page    back to top

Use the image tag: <img src="url" alt="" width="" height="">   to place pictures on your page. Use just the file name of the image if it is in the same folder as your HTML file.
Graphics on the web are in GIF, JPG, or PNG format, and their file names end in   .gif   or .jpg   or .png

Example 4 - Simple picture

This HTML: (assuming the image file has the name used here and is in the same folder)

<img src="advil.gif" alt="advil photo" width="64" height="67"> (take 2 and call me in the morning)

Shows on a web page as:

(take 2 and call me in the morning)



The <img> tag in HTML5 has two mandatory attributes: src and alt
However, one should ALWAYS include the width and height attributes!

Here are all these attributes in context:

<img src="url" alt="text" width="pixels" height="pixels">

The same attributes used as in the above, but with specific settings:
<img src="advil.gif" alt="advil image" width="64" height="67">


The alt attribute is useful for accessibility and useful in case your image doesn't load.
Listing the actual width and height of the image (in pixels) speeds up the display of the web page.

However, once you start using CSS, you ways to set alignment and other attributes for image tags. For example, you could use CSS to set the space left around the image or to give it a border!


How to find out the width and height of an image for the width and height attributes:

Often, if you just drag the image file itself into a browser window, the width and height of the image (in pixels) will be displayed at the top of the browser window, in the title bar. The width will be listed first, then the height.

In general use, do not set the width and height settings of an image to be smaller than the image actually is. This simply wastes download time, because the whole image file still has to download, even though you are displaying the image at a smaller size. The best solution is usually to resize the image to the desired smaller size using PhotoShop and save a smaller file, and then use that smaller file of the image on the page, setting the images tag's width and height to the actual dimensions of the new image.


Images as Links    back to top

Images as links, or clickable images, can be very useful and interesting.

Image as a link (may be surrounded by the default link colour):
<a href="http://www.bat.org"><img src="bat.jpg" alt="Brown Bat" width="717" height="300"></a>

back to top

Document and Text Colours    back to top

For your reference here are the common page colours used by default in browsers:

However, you can change the colour of your web page's background from grey or white to something else. You can change the colour of your non-visited links from blue (never been there) to something else, and visited links from purple (been there done that), and you can change the colour of your text from black to almost any colour you want. In HTML, colours must be designated in a particular way.

It is not required that you understand the following information about hexadecimal colour codes, but some people find it interesting, so it is included here in case of curiosity:

In HTML, each colour is described using a six-digit hexadecimal (base 16) number (we humans tend to count using base 10, potentially because humans usually have 10 fingers -- so we have 10 single-digit symbols for numbers).

Base 10 uses these 10 symbols: 0 1 2 3 4 5 6 7 8 9
Base 16 (hexadecimal) uses these 16 symbols: 0 1 2 3 4 5 6 7 8 9 a b c d e f

In hexadecimal, the number a is one more than 9, and number b is one more than a. Number f is the highest single-digit hexadecimal number.

Hexadecimal codes for colours are set in this pattern: rrggbb
RGB stands for red, green, blue -- these three colours are used when mixing light to get all the colours of the rainbow (yes, I know, in grade school you used red, yellow, and blue to mix colours -- but that is for pigment, reflected light, not mixing light itself with a monitor display).

So the hexidecimal colour code pattern: rrggbb refers to the fact that each colour code uses the 6 digits in the code in a set fashion:
the first 2 digits are used for how much red is in the colour
the second 2 digits are for how much green is in the colour
and the last 2 digits are for how much blue is in the colour

So each component (r, g, or b) of a given web page colour gets 2 out of the 6 digits in the hexadecimal colour code.

00 is the smallest 2-digit hexadecimal number and ff is the largest.
If a colour is described in HTML using a six digit hexadecimal code like this: 00ff00 -- according to the rrggbb pattern, the red is set to 00 (the lowest possible setting), the green is set to ff (the highest possible setting), and the blue is set to 00 (the lowest again). Obviously, therefore, the colour described by 00ff00 is a green.

The best way to see colour examples is to look at codes and colours listed on pages like Webmonkey's colour chart, at http://www.webmonkey.com/2010/02/color_charts/

But, here are a few quick colour codes to start with:

White -- #ffffff
Red -- #ff0000
Green -- #00ff00
Blue -- #0000ff
Magenta -- #ff00ff
Cyan -- #00ffff
Yellow -- #ffff00
Black -- #000000
Dark Grey -- #666666
Light Grey -- #cccccc

You can specify the colour of a page's background, its text, and the colour of its links. Generally, this is something you should use CSS to do at this point in time.

With the power of colour comes responsibility! If you set the page's background colour to be black, the page text (which is black by default) will be invisible. This means you would need to change the colour of the text on the page to make it readable in an ordinary way. Please do not put peach text on a pink background, or light blue text on a red background --at least unless you have a good reason to tease or annoy the audience.

Now that I've talked about all these colours and some common attributes of a page that can have colours set, how do you code these colours?

The contemporary method is to use CSS (cascading style sheets) to set colours. Look at other course notes to find out how to use CSS for colours, as well as how to use CSS for many other powerful and interesting things on web pages.

See other pages' HTML    back to top

If you see a page and want to know how they did it in HTML, use the View menu and choose Page Source or View Source. Sometimes you will find pages that are very complex and too hard for you to understand at your current level of HTML familiarity. Eventually, if you keep working on your HTML, you will understand more and more pages.

You can also save the HTML to your disk. Go to the File menu and choose Save As, and then in the window that opens, choose where you want to save the file. Also note that before you save you may need to set the Type or Format to Source, HTML file, Webpage Complete (will save the html file and a folder of the images), or Webpage HTML Only.