HTML PRIMER

by Jim Gordley
2008-2016

INTRODUCTION

You have most likely seen web pages and have a good idea of what they are and the many different looks web pages have. If you want to create pages for the Internet or perhaps an Intranet you will need to know HTML (Hyper Text Markup Language)

Definition

Hyper Text Markup Language: an authoring language used to create documents that can be interpreted by various web browsing programs.

HTML has been developed from a prototype created by Tim Berners-Lee in 1992. Tim was working at the CERN European Laboratory for Particle Physics in Geneva, Switzerland. The many great minds that meet there needed a way to share complex information in a more timely manner. They also needed a way to link relevant information from many different sources. HTML was the answer.

The World Wide Web had its beginnings in 1969 when the first node was placed at UCLA followed by node two at Stanford Research Institute. An additional two nodes were in place by years end. By 1979, ten years later, growth had brought the number of nodes or hosts to 188.


In October 1994, Tim Berners-Lee founded the World Wide Web Consortium (W3C) at the Massachusetts Institute of Technology, Laboratory for Computer Science.

Technology in the following years made it possible for virtually everyone to own a personal computer. The number of hosts has grown to over one billion in 2014.

 

HOW IT WORKS

Exploring the Internet is done using special software on your computer known as a browser. These browser software programs communicate with an Internet service provider (ISP). The ISP is part of a very large network of computers that you and I know as the Internet. Your ISP's computers process the request throughout the entire network looking for the document that you have requested. Once the document is found it is sent back to your computer in a format that can be read by your browser software and displayed on your computer screen as a web page. The format used is HTML.

 

HTML SYNTAX

You can think of HTML elements as the markup portion of HTML. These elements consist of opening and closing TAGS The opening tag is denoted by the use of the less than symbol (< ) and the greater than symbol (>), angle brackets.  The closing tag is denoted by by the use of the less than symbol  followed by the forward slash (</ ) and the greater than symbol (>).

Example

<p>This text is the content</p>

HTML CONTAINER ELEMENT SYNTAX

  • An HTML element consists of a start tag < > and an end tag < / >.

  • Anything placed between the start and end tags is called the content

  • Other containment tags can be nested within the content.

  • HTML tags should be done in lower case. At this time tags are not case dependent so either upper or lower case can be used. In either case you should choose one or the other and stick with it throughout your HTML document.

<tag>the content under the influence of "tag"</tag>

<tag>content<nested tag>more content</nested tag>other content</tag>

 

The syntax is easy to understand but very strict. Even one missing item can make things messy really quick.

 

ATTRIBUTES

Many in fact most HTML tags can be assigned attributes better defining the way they effect the contained items.

HTML ATTRIBUTES SYNTAX

  • Attributes are declared using a pairing of name="value" or name='value'.
  • Attributes are declared in the opening tag.
  • Values must be quoted double or single quotes.
  • Attributes are required to be lower case.
  Start Name

Value

Content  

End

Example <a href  = "index.htm" > Home Page

 </a>

Example <a href  = "mypic.jpg" >  My Photo   </a>
 

START TAG

CONTENT

END TAG

Examples of attributes:

The HTML

The Resulting Display

The text effected by the span tag on the <span style="color:red;">left will appear red.</span> On the other side of the ended tag, things are back to normal.
 

<p class="center">The content of this paragraph has a centered alignment.</p>

 

Note: Properties of the font tag <font> can also be controlled by adding attributes to the opening tag. All current browsers will support that use, but they have been deprecated.
Presentation attributes in the paragraph tag <p> have been
deprecated. and will not work in future browsers.

Use of CSS is highly encouraged.
 

Use of <font>tag is not recommended.
Presentation attributes in the paragraph tag <p> have been
deprecated.

<font color="red"></font>
or
<p align="center"> </p>

The text effected by the span tag on the left will appear red. On the other side of the ended tag, things are back to normal.

 

The content of this paragraph
has a centered alignment.


 

DEPRECATE
declare obsolescence of something: 
to state that a computational method or computer feature is superseded
 

Deprecated by the W3C
A deprecated element or attribute is one that has been declared by the W3C to be outdated.

Deprecated elements may become obsolete in the future, but for now browsers should continue to support deprecated elements so that they can be displayed properly by older browsers.

 

 

 


Viewing the source code

A context menu can be generated by using the right click button of a mouse. The context will be different for different elements of a web page.

Screen shot of right click drop down menu

 

 

GLOBAL FORMAT
(A BASIC BLANK SHELL)

<!DOCTYPE HTML>
<html lang="en-US">
<!-- NOTE -->
<head>
<title></title>
<link href="file.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>

Copy the HTML above and paste it into a blank Note Pad or open a new text document and type in the text as you see it above.

 

 

 

 

Use Notepad to create a global format shell ready to use for each new html document that you create. Use Save As ... saving the note pad document as a htm or html file type.

File name=blank.html

Open the file you just saved by double clicking on its icon. The default browser software on your computer will open this document and display a blank web page. Congratulations you have created your first HTML document.

 

GIVING YOUR WORK A TITLE & CONTENT

Give some thought to a title for the web page you are creating. A title should be brief but descriptive. Stay away from product codes and item numbers as they are meaningless to most people. For example if I give a page a title that reads "DC-3810" it would not be as descriptive as "Argus 5 mega pixel Digital Camera".

Viewers will see this title not only on the title bar of their respective browser displays but it will also be used as the shortcut name that is added to a favorites list.

  1. Open the blank.htm or blank.html file that you saved in the previous section.
  2. Insert the cursor between the title tag pair. <title>|</title>.
  3. Type Your Name's First Web Page.
  4. Insert the cursor between the body tag pair <body> | </body>.
  5. Type: Hello world ![PRESS THE RETURN KEY]
    Type I am here


    <html>
    <!-- NOTE -->
    <head>


    <title>John Smith's First Web Page</title>
    <link href="file.css" rel="stylesheet" type="text/css" >

    </head>

    <body>
    Hello world!
    I am here.
    </body>


    </html>

     
  6. Use Save As and save this file as helloworld.htm.
  7. Open the newly saved file using your browser.
  8. Note the Title of the page on the Title bar of your browsers display.
  9. Did you notice that there is no line break between Hello World! and I am here?
  10. Add this page to the favorites or bookmarks area note the name of the bookmark.

Formating Text

2008 HomeSpun Internet Enterprises