Introduction to HTML Scripting

Introduction to HTML Scripting
Web Technologies Introduction to HTML Scripting Copyright © Texas Education Agency, All rights reserved. Trade & Industrial Education

Part 1 Basic Tags & Structure
Copyright © Texas Education Agency, All rights reserved.

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. Copyright © Texas Education Agency, All rights reserved.

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. Copyright © Texas Education Agency, All rights reserved.

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. Copyright © Texas Education Agency, All rights reserved.

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. Copyright © Texas Education Agency, All rights reserved.

(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. Copyright © Texas Education Agency, All rights reserved.

Standard web page Structure and sections
*See Handout Standard web page Structure and sections Copyright © Texas Education Agency, All rights reserved.

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> Copyright © Texas Education Agency, All rights reserved.

DOCTYPE Tag <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 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) Copyright © Texas Education Agency, All rights reserved.

<title>World Travel</title> </head> <body>
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. Copyright © Texas Education Agency, All rights reserved.

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. <center>Text to Format</center> Copyright © Texas Education Agency, All rights reserved.

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. Copyright © Texas Education Agency, All rights reserved.

Basic Tags Paragraph Tags are indicated with the opening and the closing . 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” Add paragraph here Copyright © Texas Education Agency, All rights reserved.

Basic Tags Heading Tags are 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. Copyright © Texas Education Agency, All rights reserved.

<h1>World Travel!</h1>
Open index.htm in your text editor and add the following code shown in orange. <body> <h1>World Travel!</h1> 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. </body> NOTE: The blue code should already be typed. You should only be added the code shown in orange. Copyright © Texas Education Agency, All rights reserved.

Preview Your Page World Travel
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. Copyright © Texas Education Agency, All rights reserved.

Basic Tags Line 1 Line 1 Line 2 Line 2
Line Breaks are inserted into your web document using the 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 Line 2 Line 3 Line 4 Line 1 Line 2 Line 3 Line 4 Copyright © Texas Education Agency, All rights reserved.

Basic Tags Horizontal Rule tags 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. Copyright © Texas Education Agency, All rights reserved.

Basic HTML Tags <body> ~ </body> ~ 
Specifies the body content ~ Bolds Text ~ Underlines Text ~ Italicizes Text <center> ~ </center> Centers Text ~ Encloses paragraphs Inserts a line break Section Break Copyright © Texas Education Agency, All rights reserved.

friendly service. <hr />
Open index.htm in your text editor and add the following code in orange after the closing tag. friendly service. <hr /> Our Packages Include: Tour Arrangements Sporting Event Tickets Dinner Reservations </body> Copyright © Texas Education Agency, All rights reserved.

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

<hr width=“50%” align=“right” size=“4” />
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” /> Copyright © Texas Education Agency, All rights reserved.

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> Copyright © Texas Education Agency, All rights reserved.

EX: <body bgcolor=“#6699ff”>
Specifying Colors Colors can be specified by their name (blue) or by their RGB Color Code. RGB Color Code is 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: #000066 #003399 #336699 #3366FF EX: <body bgcolor=“#6699ff”> Copyright © Texas Education Agency, All rights reserved.

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 Copyright © Texas Education Agency, All rights reserved.

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 Copyright © Texas Education Agency, All rights reserved.

<body bgcolor=“#6699ff”>
Open index.htm in your text editor and add the code in orange: <body bgcolor=“#6699ff”> <h1 align=“center”>World Travel</h1> 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. <hr width=“75%” size=“2” /> Copyright © Texas Education Agency, All rights reserved.

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. Copyright © Texas Education Agency, All rights reserved.

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. Copyright © Texas Education Agency, All rights reserved.

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. Copyright © Texas Education Agency, All rights reserved.

Special Characters Space < > © © & & " “
The table below lists some of the common special characters: Space < > & & " “ Copyright © Texas Education Agency, All rights reserved.

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 Lists which are primarily used to set off and define terms. Copyright © Texas Education Agency, All rights reserved.

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. Copyright © Texas Education Agency, All rights reserved.

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. Copyright © Texas Education Agency, All rights reserved.

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 Copyright © Texas Education Agency, All rights reserved.

<ul type=“disc”>
List Attributes Attribute Example of Use Available Values type (Unordered List) <ul type=“disc”> disc | circle | square (Ordered List) <ol type=“I”> I | i | 1 | A | a | start <ol start=“5”> Any numeric value The type attribute, when applied to the unordered list, allows you to change the bullet style. The default first level bullet is the disc. Copyright © Texas Education Agency, All rights reserved.

We will now continue with the sample travel website.
Open index.htm in your text editor. Copyright © Texas Education Agency, All rights reserved.

REPLACE the following code in orange:
Our Packages Include: Tour Arrangements Sporting Event Tickets Dinner Reservations Our Packages Include: <ol> <li>Tour Arrangements</li> <li>Sporting Event Tickets</li> <li>Dinner Reservations</li> </ol> Copyright © Texas Education Agency, All rights reserved.

Refresh the document in your browser.

Our Packages Include: <ul>
Return to your code and change the opening and closing <ol> tags to <ul>. Our Packages Include: <ul> <li>Tour Arrangements</li> <li>Sporting Event Tickets</li> <li>Dinner Reservations</li> </ul> Copyright © Texas Education Agency, All rights reserved.

Resave and preview your document in the browser
Resave and preview your document in the browser. The numbers should have changed to bullets. Copyright © Texas Education Agency, All rights reserved.

Our Packages Include: 
Return to your code and add the attribute shown in orange to the opening <ul> tag. Our Packages Include: <ul type=“circle”> <li>Tour Arrangements</li> <li>Sporting Event Tickets</li> <li>Dinner Reservations</li> </ul> Copyright © Texas Education Agency, All rights reserved.

Resave and preview your document in the browser
Resave and preview your document in the browser. The bullets should change to circles. Copyright © Texas Education Agency, All rights reserved.

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. Copyright © Texas Education Agency, All rights reserved.

Sample definition list code structure.
<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. Copyright © Texas Education Agency, All rights reserved.

Sample definition list browser view.
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. Copyright © Texas Education Agency, All rights reserved.

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. Copyright © Texas Education Agency, All rights reserved.

<li>Planning Your Site</li> <ul>
<ol type=“I”> <li>Planning Your Site</li> <ul> <li>Who will be viewing your site?</li> <li>What information will your site provide?</li> </ul> <li>Designing Your Site</li> <li>What color scheme will be used?</li> <li>Design the template</li> <li>Update and Maintenance of Site</li> <li>Keep site updated with current information</li> <li>Add or remove pages as necessary</li> </ol> Copyright © Texas Education Agency, All rights reserved.

Nested List Output Planning Your Site Who will be viewing your site?
What information will your site provide? Designing Your Site What color scheme will be used? Design the template Update and Maintenance of Site Keep site updated with current information Add or remove pages as necessary Copyright © Texas Education Agency, All rights reserved.

Review of Web Site Structures
Hierarchical Site Structure Random Site Structure Linear Site Structure Diagrams used with permission from Copyright © Texas Education Agency, All rights reserved.

Creating Links Links allow visitors to move from one page of the web site to another. A basic link on a web page will open a new page when clicked. Links are created with the anchor tag which is indicated as <a>. The anchor tag itself does not do anything, you must add the href attribute to the anchor tag for it to create a link. Copyright © Texas Education Agency, All rights reserved.

Creating Links The href attribute should be set equal to the location and file name of the page you want to open. <a href=“menu.htm”>Menu</a> <a href=“pages/menu.htm”>Menu</a> Links must include a corresponding closing anchor tag with the text you want to click on between the opening and closing anchor tags. Copyright © Texas Education Agency, All rights reserved.

Linking to Other Web Sites
To open a page on another web site, you must include in front of the web site address. <a href=“ UNT Copyright © Texas Education Agency, All rights reserved.

Modifying Link Properties
All links are underlined, and unless you specify otherwise, all links will be blue. While you are clicking on the link, the color changes red, and after the link has been visited, its color changes to violet. To change the colors of the links on a web page, add the link, vlink, and alink attributes to the body tag. Copyright © Texas Education Agency, All rights reserved.

Modifying Link Properties
Attribute Description link=“red” Modifies the default color of the link on a document. vlink=“green” Modifies the color of links that have already been visited. alink=“yellow” Modifies the color of the active links currently selected. Copyright © Texas Education Agency, All rights reserved.

<body bgcolor=“#669955” link=“#ffffff” vlink=“#000099” > .
Open index.htm in your text editor and add the following code shown in orange: <body bgcolor=“#669955” link=“#ffffff” vlink=“#000099” > . <li>Dinner Reservations</li> </ul> <ul> <li><a href=“ York City</a></li> <li><a href=“ <li><a href=“ </body> Copyright © Texas Education Agency, All rights reserved.

Refresh your document in the browser.

Opening Links in a New Window
The target attributed can be used to direct links to open in specific locations. Targeting a link to open in top or blank will cause a link to open in a new browser window. <li><a href=“ target=“top”>New York City</a></li> The target attributed will be looked at again in the frames lesson. Copyright © Texas Education Agency, All rights reserved.

Creating an Link An link will open the viewer’s program and place the address that you indicated in the TO section. To create an link, the mailto: statement must immediately follow the href and precede the address. Copyright © Texas Education Agency, All rights reserved.

<a href=“mailto:you@youremail.com”>Email Me</a>
Creating an Link Follow the code sample shown below. The link shown below will open the default program installed on your computer. <a Me</a> Me Copyright © Texas Education Agency, All rights reserved.

<a name=“top”></a>
Creating a Page Jump A page jump is a link that does not open a new page, but moves to another par of the current page. It requires two parts, an anchor tag to be used as a section marker to identify the section name of the page where the link should go, and the link to jump to the named section. To name a section, you place the anchor tag with the NAME attribute in the spot where you want the user to go when they click the page jump link. <a name=“top”></a> Copyright © Texas Education Agency, All rights reserved.

<a href=“#top”>Go to the top of the page</a>
Creating a Page Jump To create the page jump link, you just set the link where you want to add the page jump. Set the href attribute to the name of the section of the page preceded with the # sign. <a href=“#top”>Go to the top of the page</a> Copyright © Texas Education Agency, All rights reserved.

Font Tag Changing the style of the font is accomplished using the tag. You enclose the content you wish to format in between the opening and closing tag. The font attributes include: face, size, color. Copyright © Texas Education Agency, All rights reserved.

Font Face The default font face style for most browsers is "Times New Roman". There are five basic font classifications, Serif Sans Serif Script, Fancy Monospace IMPORTANT POINT: Just because you have a particular font on your computer, that does not mean everyone else who visit your site has that same font. Copyright © Texas Education Agency, All rights reserved.

Font Face An example of basic font faces: Other common font faces:
This is Serif This is Serif This is Sans Serif This is Sans Serif This is Script This is Script This is Monospace This is Monospace Other common font faces: Times New Roman Cosmic Sans MS Impact Courier New Tahoma Broadway Haettenschweiler Stencil Wide Latin Lucida Handwriting Playbill Algerian Arial Britannic Bold Arial Black Bookman Old Style Verdana Colonna MT Copyright © Texas Education Agency, All rights reserved.

Font Size The font tag may also be used to change the font size of text by adding the size attribute There are only 7 font sizes available with 1 being the smallest, and 7 being the largest. Copyright © Texas Education Agency, All rights reserved.

Size 7 Font Size Size 6 An example of font size: Size 5 Size 4
Size 1 Size 1 Size 2 Size 2 Size 3 Size 3 Size 4 Size 4 Size 5 Size 5 Size 6 Size 6 Size 7 Size 7 Copyright © Texas Education Agency, All rights reserved.

Font Color The color attribute is added to the font tag to change the color of a block of text To assign colors, the color name of a basic color, or the RGB color code may be used. This is red! This is red! Copyright © Texas Education Agency, All rights reserved.

<body bgcolor=“#669955” link=“#ffffff” vlink=“#000099”>
Open index.htm from your Student Files folder and add the code shown in orange: <body bgcolor=“#669955” link=“#ffffff” vlink=“#000099”> <h1 align=“center”>World Travel</h1> : <li><a href=“ </ul> </body> Copyright © Texas Education Agency, All rights reserved.

Preview index.htm once again in your browser.
The page is now much easier to read. It is important to choose your colors carefully so that the viewer can read the text easily. Copyright © Texas Education Agency, All rights reserved.

Image Formats There are many types of image formats. The two you will most likely use are the gif and jpg formats. gif (Graphics Interchange Format) limited to 256 colors, one color can be transparent, gif images can be animated. jpg (Joint Photographic Experts Group) Can display millions of colors. Typically used for photographs. Can not include a transparent color or be animated. Copyright © Texas Education Agency, All rights reserved.

<img src=“pic.gif” />
Inserting Images <img src=“pic.gif” /> The image tag should close itself. The file extension of the image MUST be included after the image name. Copyright © Texas Education Agency, All rights reserved.

<body bgcolor=“#669955” link=“#ffffff” vlink=“#000099”>
Open index.htm from your Student Files folder and make the changes indicated below. <body bgcolor=“#669955” link=“#ffffff” vlink=“#000099”> <h1 align=“center”>World Travel</h1> <center> <img src=“world.jpg” /> </center> Copyright © Texas Education Agency, All rights reserved.

Aligning Images <img src=“pic.jpg” align=“right” />
The image is to the right with text wrapping to its left <img src=“pic.jpg” align=“left” /> The image is to the left with text wrapping to its right Copyright © Texas Education Agency, All rights reserved.

This image has not been aligned so it is applied inline with the text.
This image has been aligned to the left, therefore text will wrap around the image. Copyright © Texas Education Agency, All rights reserved.

in personal and friendly service.
Add the following orange code to index.htm where indicated below the horizontal rule tag. in personal and friendly service. <hr width="75%" size="2" /> <img src=“nyc.jpg” align=“right” /> Copyright © Texas Education Agency, All rights reserved.

 
Section Breaks Section Breaks on a web page are line breaks with the clear="all". A section break on a web page is like a continuous section break in a word processor. Primarily used to STOP text from wrapping around an image. Copyright © Texas Education Agency, All rights reserved.

Image Attributes src – specifies the image file
Now that you know how to work with images, there are other attributes available to help customize their appearance. src – specifies the image file align – defines image alignment hspace – horizontal spacing vspace – vertical spacing width – width of an image height – height of an image alt – text alternative of an image Copyright © Texas Education Agency, All rights reserved.

hspace & vspace <img src=“pic.gif” hspace=“10” />
Will add a margin spacing to the left and right and/or top and bottom of an image. Helps prevent a webpage from appearing cluttered and crowded. <img src=“pic.gif” hspace=“10” /> <img src=“pic.gif” vspace=“10” /> Copyright © Texas Education Agency, All rights reserved.

width & height <img src=“pic.gif” width=“300” />
Can be applied to an image to specify a specific image size. Should be used to make small adjustments only. Use only one to keep the image in proportion. <img src=“pic.gif” width=“300” /> <img src=“pic.gif” height=“300” /> Copyright © Texas Education Agency, All rights reserved.

<img src=“pic.gif” alt=“text or info” >
Text Alternatives A line of text that will appear when your mouse is placed over the image. If the image does not load, the text will appear in place of the image. Applied to the img tag using by the alt attribute. <img src=“pic.gif” alt=“text or info” > Copyright © Texas Education Agency, All rights reserved.

Complete Lab 5: Home Page

Complete Lab 5: Statue of Liberty Page

Complete Lab 5: Empire State Building

Complete Lab 5: Central Park

Introduction to HTML Scripting

Similar presentations

Presentation on theme: "Introduction to HTML Scripting"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Introduction to HTML Scripting

Similar presentations

Presentation on theme: "Introduction to HTML Scripting"— Presentation transcript:

Similar presentations

About project

Feedback