HTML


 * Tuesday, May 20: PLEASE SEE THE CLASS NOTES PAGE FOR YOUR HTML TEST INFO. **

Your **WEB PROJECT** folder (with all needed files in it) MUST BE ON A FLASH DRIVE. So make a new folder on your flash drive and name it **WEB PROJECT**. . This project has two parts - the five page site itself and then your presentation of it. The rubric below gives expectations for the both the building of the pages (their design, functionality, etc.) and of the presentation to your classmates and teacher. . You MUST have a page named index.htm (your HOME page is NOT named home.htm - it is index.htm). .
 * Your rubric for the Web Project & Presentation: **
 * Skeleton Code - re-creating this will be your first test in HTML: **

Introduction to HTML: . []

=HTML Introduction =

HTML Example
My First Heading My first paragraph. < /body> < /html> Try it yourself »

Example Explained

 * The text between and describes the web page
 * The text between and is the visible page content
 * The text between and is displayed as a heading
 * The text between and is displayed as a paragraph

What is HTML?
HTML is a language for describing web pages.
 * HTML stands for **H**yper **T**ext **M**arkup **L**anguage
 * HTML is a **markup** language
 * A markup language is a set of markup **tags**
 * The tags **describe** document content
 * HTML documents contain HTML **tags** and plain **text**
 * HTML documents are also called **web pages**

HTML Tags
HTML markup tags are usually called HTML tags content
 * HTML tags are keywords (tag names) surrounded by **angle brackets** like
 * HTML tags normally **come in pairs** like  and 
 * The first tag in a pair is the **start tag,** the second tag is the **end tag**
 * The end tag is written like the start tag, with a **forward slash** before the tag name
 * Start and end tags are also called **opening tags** and **closing tags**

HTML Elements
"HTML tags" and "HTML elements" are often used to describe the same thing. But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags: HTML Element: This is a paragraph.

Web Browsers
The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented/displayed to the user:

HTML Page Structure
Below is a visualization of an HTML page structure: This a heading This is a paragraph. This is another paragraph.

HTML Versions
Since the early days of the web, there have been many versions of HTML: . ..
 * ~ Version ||~ Year ||
 * HTML || 1991 ||
 * HTML+ || 1993 ||
 * HTML 2.0 || 1995 ||
 * HTML 3.2 || 1997 ||
 * HTML 4.01 || 1999 ||
 * XHTML || 2000 ||
 * HTML5 || 2012 ||
 * Special Characters/Symbols: **
 * [] **
 * DEFAULT WEB LAYOUT (DWL) is below, followed by the code: **

COLOR: ..
 * DWL Table within a Table:**
 * Here is an image of the DWL with a table inside the Logo/Company Name cell .**
 * You will be expected to create this for your test:**




 * Here is the code that creates the DWL - Table within a Table layout**
 * - REMEMBER - TYPE THE SKELETON FIRST!**


 * DO NOT type from top to bottom - you will not understand HTML without properly BUILDING your pages. The skeleton is the foundation. Right after you type an opening tag, copy, paste and create the closing tag by adding the forward slash.**


 * Typing this code top to bottom will not help you learn code. Creating it in a logical order like we do every day in class WILL help you.**




 * Remember, you will have to use your OWN hexidecimal codes for your colors and your own file names for your logos. Below is an example page image and the code is below.**


 * Welcome to HTML (Web Design starts here!)**

The foundation of Web Design begins with HTML: Hypertext Mark-Up Language. YOU CANNOT COPY AND PASTE THE CODE FROM THIS PAGE. You can only re-type it, which will help you LEARN it.

Unlike WYSIWYG (pronounced "wizzy-wig" - stands for **W**hat **Y**ou **S**ee **I**s **W**hat **Y**ou **G**et) editors that limit your creativity, learning Web coding languages and scripts give you freedom to create whatever you wish on the Web.

All Web sites need a skeleton to take shape, thus, we learn the Skeleton Web Page Code first.

Here is the Skeleton Web Page Code that you MUST MEMORIZE (and will be quizzed on repeatedly!) to succeed from now until the end of the school year:

HTML Basic Document, called Skeleton Code because all Web pages contain these basic parts. The text following the NOTE below is to be typed in NOTEPAD and saved as skeleton.html*

 * NOTE: you will actually type skeleton.html in the file name area - without .htm, it will only be a text file. WITH .htm, it is a Web page and your browser will open it when the file is double clicked.

Start typing here:

Title of document goes here Visible text goes here...

=The following image is of the Default Web Layout. The HTML code for it follows. The link is to download the Default Web Layout for your Final Project folder.=



=The following image is of the Default Web Layout with the bgcolor attribute.= =The HTML code for it follows the image.=



[[image:mrstelnock/dwl_with_color.jpg]]
=To align your text or images, you need to know the following attributes:=

align It's values: left, center, right valign It's values: top, middle, bottom

=To insert images, you need to know the following code:=



= = =Your index.htm should look like this by the end of the week (with your bgcolor attributes and values, of course!). Keep in mind, the links are not there yet, just the words that the user will see.=

And here is the code (you may have to zoom!)



=**AN EXAMPLE OF A NAVIGATION CELL - note that you can identify the Navigation Cell of the Default Web Layout by the width="100" in the td tag:**=