Course Content

The Basics

The basic coding structure beneath all Web pages is based on hypertext mark-up language (HTML). It as gone through several changes over the years but the basics are relatively the same. This lesson is simply to introduce you to some of the fundamentals. You are not expected to become experts in this but simply become introduced to the concept. The next lesson on How Browsers work will begin to tie it all together.

To get started, let’s take a look at a video (approx 15 minutes) I created to introduce the basics of the concepts behind HTML and XHTML, which as you will see is an interim step to HTML5 (which we will introduce in a later in this module:
[one_third].[/one_third][one_third] [/one_third][one_third_last]..[/one_third_last]

HTML Syntax Review (In case you simply cannot get enough!)

I could spell out here a step by step guide to HTML coding but w3Schools has done that for us, so no need to reinvent the wheel. Their tutorial is a cookbook approach with a try it activity for each chapter, as well as a self-test. You are sort of on you honor here but there is an activity at the end of this module, so it may behoove you to review these materials:

HTML Basics

In case you are a visual learner, here are a couple of YouTube videos that further review the basics:

(This one is a bit dated but does show much of what is still a part of current html coding)

(This is the second (of four) in the basics videos that began with the above)


In essence, HTML is a markup language. You may or may not know it but ALL formatted text (even a Word document) has underlying coding that creates the bold, italics, indents, etc.

Just as an example, take a look at this seemingly simple letter:

Click to see the letter

Here is what that same letter looks like under the skins:

Click to see the coding behind the letter

So, all HTML does is to tell a browser how to format that text.

Well that is not exactly true. HTML also helps with context of the words a little bit but that is left to another set of coding syntax called xml.

 Formatting/Characteristics (Use this as a Check Sheet)

HTML is standard (ASCII) text with embedded format codes. In other words there is no underlying format.. it is text only. that is why you cannot use Word or other document processor to create HTML code. You must use a text editor like Notepad on the PC or Sublime Text on a Mac.

• HTML uses paired tags (they are set off by opening and closing <> brackets).
• If you have an opening tag (like <h3>) you must also have a closing tag (i.e.</h3>).

Some basic rules:

Sometimes the opening and closing tags are specified as one single tag:

• For example,The <hr/> tag means enter a horizontal rule on the page.
• the <br/> tag means a line break.

Tags can identify elements or format the structure of document.

• <strong> bold </strong> 
  
• <em> italics</em>
• <u> underlining</u> , etc.

Document Structuring

Titles in HTML

Titles appear in the title bar of the page. Ever notice when you open a page on the tab at the top there is a title? The title bar may say “Untitled Document”  that is because no titles were specified.

Headings in HTML

Headings of different weights are used to introduce sections

<h2> </h2> tag

is larger than

<h3> </h3> tag

which is bigger than

<h4> </h4> tag

Nested headings are especially important in HTML as they are used to define sections of the text.  You shouldn’t start a section with an h2 if you have not already used an h1.

Text in HTML

• simple text is enclosed in paragraph <p></p> tags
• break <br> tags help to format lines
• font faces and other attributes may be specified. You can go from the simple to more complex
• font size may be numbered using absolute values between 1 and 7
• font size may be sized relatively using +n or –n (where n is some integer)

Color

•  Simply specifying ‘Red’ is browser’s way of mapping to one of a 256-color indexed Red Green Blue palette of colors. A ‘web-safe’ color is one of a special palette of 256 others (originally designated by Netscape) that are consistently represented, regardless of platform
• You may also get very specific by coding a set in what is called hexadecimal coding. For example to make this red I coded make this red

The hexadecimal numbers represent a reference to a chart that is recognized by all Web Browsers:

To see how this works, click on the image below in various spots to change the color. The notice how the hex reference changes in the dialog box below it.

Lists

1. ordered lists (automatically numbered) Coding is <ol> for an ordered list. The numbered list is generated by the <li> </li> tags surrounding each line item. Then you close it with an </o> tag.  Ordered lists should be used when order of the elements is important.

<ol>
  <li>Wake up</li>
  <li>Eat Breakfast</li>
  <li>Brush Teeth</li>
</ol>

• Unordered lists (bullet points). Coding is <ul> for unordered list. Each bullet is also generated by the the <li> </li> tags surrounding each line item. Then you close the list with a </ul> tag.  Unordered lists should be used when order is not important

<ul>
  <li>Banana</li>
  <li>Orange</li>
  <li>Apple</li>
</ul>

 Inline Graphics

• Images that are placed on the page along with text and other elements. There is a special set of codes you must use to specify the image and where it is located.
• Web pages are restricted to accept only certain image file formats (.gif, .jpg, and .png)
• The html document must be able to reach to image file for it to be embedded in the document.  The image file is really merged with the document like when you add an image to a word document.
• The image tag uses html properties to define when the image is located in relation to the html document.  In the below example, the property is src and it is defined as myImage.jpg.  The double quotes are mandatory.

<img src="myImage.jpg">

Hyperlinks

• Hyperlinks are references to other elements: pages, images, resources, etc.
• They cause an automatic request for linked element. The hyper link for this page is The text you place here is highlighted on the page and made linkable.
• There are of course tons and tons more but this is enough for our purposes. The intent here is to introduce you to the concept and have you do a couple for fun.
• The hyperlink tag is more traditionally refered to as an anchor or <a></a> and uses the href property

<a href="http://google.com">Click here to go to google</a>

Ok.. ok.. One Last review: Dave Raggett’s Intro to HTML Basics

What is HTML 5.0?

HTML 5.0 now the HTML Standard. Again, I could provide a detailed explanation but w3.org has already done that. Note that standards upgrades are often 7-8 year projects. Therefore, when you first hear about them, it may seem like it will never take place. This first link explains the whole process and even provides a chronology with details of every revision of the standards as it progresses along the 7-8 yr cycle.

• HTML 5.0 Differences from HTML 4.0
• HTML 5 and the Future of the Web

When you are done, go to the lesson on How Browsers Work and create a small site using a Visual Line editor (VLE)….

In Tech Ed-6207. Both comments and pings are currently closed.