Web Technologies

Web Technologies Introduction to HTML Scripting

Part 1Basic Tags & Structure

Benefits of Learning HTML • Webmasters with coding ability are in high demand. • HTML is the core language of all websites. • Coding ability provides for better control over website development. • Designers can easily adapt to updates in web design technology.

Before Getting Started • You will need a text editor. Notepad, Notepad 2, or Notepad++ is preferred. • You should have a designated location or web directory to save the examples.

The Text Editor • Web pages are nothing more than text files with formatting instructions. • Quality web pages can be created in simple text editors such as Notepad.

What is HTML? • Stands for Hyper Text Markup Language • Any computer can read the HTML markup • HTML is a formatting language, NOT a programming language.

Web Page Structure (refer to web page structure handout) • The<html>and </html>tags start and end the document. • They tell the browser where the starting point and ending point of your web page is. • The heading and the body are the two main sections of a web page. • The heading of your web page contains tags that work behind the scenes. • The body section contains the actual content on your web page.

*See Handout Standard web page Structure and sections

HTML Grammar • All tags should be written in lower case • <body> • All values, anything after an equal sign, should be enclosed in quotes. • <body bgcolor=“#ff0000”> • All tags must be closed. • </body>

DOCTYPE Tag <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • Specifies the version of HTML or XHTML the document is written in. • Should be placed above the opening HTML tag before a document is published online. • There is no closing tag. • Is written in upper case as shown (unlike other tags)

Open your text editor and type the following code: <html> <head> <title>World Travel</title> </head> <body> </body> </html> Save your file as index.htm to your Student Files folder.

Encapsulation • HTML tags encapsulate (surround) the text that they are formatting. • If more than one tag is formatting the text, then the closing tags should be written in reverse order from how they were opened. <b><i><center>Text to Format</center></i></b>

Tag Specifications • The body tag specifies where the page body begins and ends. • By adding attributes to the body tag, you can make general specifications regarding your documents appearance, such as background color, text color, and your link colors. • Attributes specify additional properties of a particular tag. Attributes are added to tags immediately after the tag name. They only need to be added to the opening HTML tag.

Basic Tags • Paragraph Tagsare indicated with the opening <p> and the closing </p>. • Text in the form of blocks or paragraphs should be enclosed within the paragraph tags. • Various formatting options can be added to the paragraph tag such as: • align=“left” | “right” | “center” | “justify” <p align=“justify”>Add paragraph here</p>

Basic Tags • Heading Tagsare used for various one line headings on your document. • The <h1>tag displays the largest text and the <h6>displays the smallest text. • Text formatted with a heading tag is resized, bolded, and a line break is placed at the end of the line.

Open index.htm in your text editor and add the following code shown in orange. <body> <h1>World Travel!</h1> <p>World Travel is based out of the Dallas/Fort Worth Metroplex. We specialize in making travel arrangements for business travel, groups, and family vacations. We have over 20 years of experience in all areas of travel arrangements and can offer you the best in personal and friendly service.</p> </body> NOTE: The blue code should already be typed. You should only be added the code shown in orange.

Preview Your Page • Open your web browser (Internet Explorer, Firefox, etc) • Click on File • Select Open • Navigate to where you saved index.htm and select the file to open. World Travel World Travel is based out of the Dallas/Fort Worth Metroplex. We specialize in making travel arrangements for business travel, groups, and family vacations. We have over 20 years of experience in all areas of travel arrangements and can offer you the best in personal and friendly service.

Basic Tags • Line Breaksare inserted into your web document using the <br />tag. • The web browser does not recognize white space, or when you press the ENTER key to move to a new line, therefore you must specify when you want to insert a line break in a web page. Line 1 <br /> Line 2 <br /> Line 3 <br /> Line 4 <br /> Line 1 Line 2 Line 3 Line 4

Basic Tags • Horizontal Ruletags draw a horizontal line, or divider, on your web page. • Inserted by using the <hr />tag. • Horizontal Rules do not have a corresponding ending tag because it just inserts a line. • Horizontal rules will automatically apply a break at the end of the line.

Basic HTML Tags

Open index.htm in your text editor and add the following code in orange after the closing </p> tag. friendly service.</p> <hr /> <b>Our Packages Include:</b><br /> Tour Arrangements<br /> Sporting Event Tickets <br /> Dinner Reservations <br /> </body>

Return to your browser and click the Refresh button or press F5.

Tag Attributes • An attribute is a feature that you can add to a tag that will allow you to modify the default features of the tag. • For example: By adding the width attribute to the horizontal rule tag below, we are able to modify the width of the horizontal rule to only 50% of the page. • <hr width=“50%” /> • To modify the thickness of the line, we will can use the size attribute. • <hr width=“50%” align=“right” size=“4” />

Align Attribute • Most attributes are not tag dependent and can be added to other tags. • The align attribute can be applied to any of the Heading tags, the paragraph tags, horizontal rule tag, and many other tags that you will see later. • When possible, its best to use attributes instead of additional tags. <h2>This text will be left aligned</h2> <center><h2>This text will appear centered</h2></center> <h2 align=“center”>This text will appear centered too</h2>

Specifying Colors • Colors can be specified by their name (blue) or by their RGB Color Code. • RGB Color Codeis a combination of 6 codes, the first two representing the intensity of red, the second two specifying the intensity of green, and the third two codes representing the intensity of blue. • Below are some of the various shades of blue using RGB color code: EX: <body bgcolor=“#6699ff”>

Specifying Colors • By adding the bgcolor attribute to the body tag, you can change the background color of your web page. • To use the bgcolor attribute, apply it as shown below to the opening body tag: <body bgcolor=“#3366ff”> Your Web Page </body> Your Web Page

Specifying Colors • By adding the text attribute to the body tag, you can change the default text color. • To use the text attribute, apply it as shown below to the opening body tag: <body bgcolor=“#3366ff” text=“ffffff”> Your Web Page </body> Your Web Page

Open index.htm in your text editor and add the code in orange: <body bgcolor=“#6699ff”> <h1 align=“center”><u>World Travel</u></h1> <p>World Travel is based out of the Dallas/Fort Worth Metroplex. We specialize in making travel arrangements for business travel, groups, and family vacations. We have over 20 years of experience in all areas of travel arrangements and can offer you the best in personal and friendly service.</p> <hrwidth=“75%” size=“2” />

Preview index.htm once again in your browser. Notice the following: • The background color has changed • The heading “World Travel” is now underlined • The Horizontal Rule is only 75% of the width and is two pixels in size.

Special Characters • Web browsers will only recognize one space following a word or character, all others are ignored. • For example, if you were to type a word and press the space bar five times, only the first space would be recognized by the browser. • The browser assumes that the other spaces are part of the code layout and not part of the actual document. • To add additional spaces to a web page, HTML includes a set of code called SPECIAL CHARACTERS.

Applying Special Characters • HTML tags are created between the < and > brackets • Special characters are created between the & and ; characters. • Special characters are the characters and symbols that are not on your keyboard, or that the browser would normally interpret as something else, or ignore.

Special Characters The table below lists some of the common special characters:

Complete Lab 1:

Part 2Creating Lists

Creating HTML Lists • Lists are often used to present information in an easy to read format. • There are three types of lists: • Bulleted, called Unordered Lists • Numbered, called Ordered Lists, • Definition Listswhich are primarily used to set off and define terms.

Creating Unordered Lists • An unordered list creates bullets before each item in the list. • To create an unordered list, you should place the <ul> and </ul> tags around the entire list. • Each item in the list should be preceded with the <li> ~ </li> tag.

Unordered List Example Stages of Web Site Management <ul> <li>Planning Stage</li> <li>Site Design Stage</li> <li>Update and maintenance Stage</li> </ul> Stages of Web Site Management • Planning Stage • Site Design Stage • Update and maintenance Stage • Notice that <ul> and </ul> indicates the beginning and end of the list. • The <li> ~ </li> tags encapsulates each item in the list and inserts bullets.

Ordered List Example Stages of Web Site Management <ol> <li>Planning Stage</li> <li>Site Design Stage</li> <li>Update and maintenance Stage</li> </ol> Stages of Web Site Management Planning Stage Site Design Stage Update and maintenance Stage

List Attributes The type attribute, when applied to the unordered list, allows you to change the bullet style. The default first level bullet is the disc.

We will now continue with the sample travel website. Open index.htm in your text editor.

REPLACE the following code in orange: <b>Our Packages Include:</b><br /> Tour Arrangements<br /> Sporting Event Tickets <br /> Dinner Reservations <br /> <b>Our Packages Include:</b><br /> <ol> <li>Tour Arrangements</li> <li>Sporting Event Tickets</li> <li>Dinner Reservations</li> </ol>

Refresh the document in your browser.

Return to your code and change theopening and closing <ol> tags to <ul>. <b>Our Packages Include:</b><br /> <ul> <li>Tour Arrangements</li> <li>Sporting Event Tickets</li> <li>Dinner Reservations</li> </ul>

Resave and preview your document in the browser. The numbers should have changed to bullets.

Return to your code and add the attribute shown in orange to the opening <ul> tag. <b>Our Packages Include:</b><br /> <ul type=“circle”> <li>Tour Arrangements</li> <li>Sporting Event Tickets</li> <li>Dinner Reservations</li> </ul>

Resave and preview your document in the browser. The bullets should change to circles.

Definition List • The definition list does not use bullets or numbers, but uses indentions. • The term, or work being defined, is indicated by the <dt> tag and has no indentions. • The definition, indicated by the <dd> tag is indented under the term. • The entire definition list should be surrounded with the <dl> and the </dl> tags.

<center>Web Site Structures</center> <dl> <dt>Linear</dt> <dd>All pages are organized in a line</dd> <dd>Good for small instructional sites</dd> <dt>Hierarchical</dt> <dd>Resembles a pyramid</dd> <dd>Good for organizing large web sites</dd> <dt>Random</dt> <dd>Pages are randomly linked</dd> <dd>Good for small sites</dd> </dl> Sample definition list code structure.

Web Site Structures Linear All pages are organized in a line Good for small instructional sites Hierarchical Resembles a pyramid Good for organizing large web sites Random Pages are randomly linked Good for small sites Sample definition list browser view.

Nested Lists • A nested list is created when you place a sub-list inside of another list. • An outline could be considered a nested list. • When creating a nested list, the sub-list must be opened and closed below the listed item of the main list. • If the sub-list is not closed, the browser will not know where the nested list ends and the main list continues.

Web Technologies