Creating Web Pages Using HTML

HTML Commands

Commands are called tags Each tag is surrounded by Some tags need ending tags containing / Tags are not case sensitive, but for future

compatibility, use lower case Indentation and spacing are used to make the

code more readable

Basic Structure

The html tags begin and end the document.

The head tags contain information about the web page and should appear only once.

The body tags contain the visible part of the web page and appear only once.

Creating your HTML file

Notepad++

Save your file by choosing Save As

Give your file a simple name and use

the .html extension

Change the Save As Type to All Files

An HTML 5 Template

Template

Hello World

Be careful when using copy/paste. HTML docs need straight quotes!

Viewing your file in a browser Launch the Browser From the File menu, choose Open Click the Browse button Locate your html file

Be sure to check in different browsers!

Viewing changes As you work on your file in Notepad++, you can simply

Save any changes once your file is named correctly. If the page is loaded in the Browser already, click the

Refresh button to see the changes.

Entering Text Enter text in the body section with the following optional

tags: Line break:
Paragraph tags insert white space:

Heading tags Select heading size: h1 through h6 Use a corresponding ending tag

is the largest or are normal is the smallest

Example

Template

Here is a sample
web page

It uses paragraph tags

and heading tags

Titles The section of an HTML document contains

information about the page The tags are placed in the

section to give the page a name. The text contained between the tags will appear in the title bar of the browser

Formatting has no effect Additional information in the section might

be keywords for searching, meta information or comments, for example.

Some Style Elements Strong: … Italics (emphasis): … Underline: …

Tags may be nested as follows:

CSC455

But don’t allow them to cross:

CSC455 >

Lists Ordered lists are numbered:

OneTwoThree

The li tag stands for list item

The HTML at the leftcreates the following list:

1. One2. Two3. Three

More Lists Unordered lists are bulleted:

OneTwoThree

The HTML at the leftcreates the following list:

• One• Two• Three

Adding Graphics Graphics files typically end in .gif or.jpg Copy and paste doesn’t work The image file must be saved, usually in an images

folder in the same directory as the html file Use the following tag:

where filename.xxx is the name of your image file

If images are in a folder (a common practice):

More about graphics You should include alternative text for users who can’t or

don’t want to load images:

You may also include width and height values in pixels (screens are usually 800x600 and up):

Creating Links To create a link to another URL use the tag: Text You can also link to another local HTML file instead: Text The Text is what the user should click on to go to the

URL (Note: this could be an img src tag instead)

Tables The entire table is contained between the

tags

Rows are indicated with the tags

Cell contents may be contained in either Heading tags or Data tags:

Indentation helps outline the structure of the table

Example

Heading 1 Heading 2

Cell 1 Cell 2

Cell 3 Cell 4

Heading 1 Heading 2

Cell1 Cell2

Cell3 Cell4

Forms: Input Structures

action is the name of the file that will process the data method is "get" or "post"

Form Text Boxes

name assigns the identifier that will store the data when it is processed

Example:

Username:

Radio (Option) Buttons button one
button two

Only ONE may be selected names should all match each other values should be distinct - this is what will be submitted

when the form is processed The text before the
tag will be displayed next to

(after) the button

Check Boxes

Selection List

text1 text2 text3

…

Buttons

where "text" is what you choose to appear on the button

Sample Data Sent to Server (GET) http://www.thelighthouse.org/cgi-

bin/donation?eMail=donations@thelighthouse.org&addressType=business&firstName=Bob&lastName=Jones&phone=9627567&street=601+S.+College+Rd&city=Wilmington&state=NC&zip=28409&amount=%24100&creditCard=MC&cardHolder=Bob+Jones&cardNumber=1111222233334444&expMonth=01&expYear=2011&volunteer=on&comments=Please+send+a+receipt

For additional information The following websites may be useful:

http://www.html-form-guide.com/html-form/html-form-input.html

http://www.w3schools.com/html/html_forms.asp

http://html.about.com/

http://www.html-form-guide.com/html-form/html-form-input.htmlhttp://www.w3schools.com/html/html_forms.asphttp://html.about.com/

Slide Number 1HTML CommandsBasic StructureCreating your HTML fileAn HTML 5 TemplateViewing your file in a browserViewing changesEntering TextExample TitlesSome Style ElementsListsMore ListsAdding GraphicsMore about graphicsCreating Links TablesExampleForms: Input StructuresForm Text BoxesRadio (Option) ButtonsCheck BoxesSelection ListButtonsSample Data Sent to Server (GET)For additional information