1 / 98

Web Technologies

Web Technologies. Introduction to HTML Scripting. Part 1 Basic 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.

cpotter
Download Presentation

Web Technologies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Technologies Introduction to HTML Scripting

  2. Part 1Basic Tags & Structure IT: Web Technologies - HTML Scripting

  3. 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. IT: Web Technologies - HTML Scripting

  4. 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. IT: Web Technologies - HTML Scripting

  5. 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. Notepad 2 Windows Notepad IT: Web Technologies - HTML Scripting

  6. 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. IT: Web Technologies - HTML Scripting

  7. 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. IT: Web Technologies - HTML Scripting

  8. *See Handout Standard web page Structure and sections IT: Web Technologies - HTML Scripting

  9. 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> IT: Web Technologies - HTML Scripting

  10. 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) IT: Web Technologies - HTML Scripting

  11. 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. IT: Web Technologies - HTML Scripting

  12. 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> IT: Web Technologies - HTML Scripting

  13. 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. IT: Web Technologies - HTML Scripting

  14. 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> IT: Web Technologies - HTML Scripting

  15. 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. IT: Web Technologies - HTML Scripting

  16. 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. IT: Web Technologies - HTML Scripting

  17. 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. IT: Web Technologies - HTML Scripting

  18. 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 IT: Web Technologies - HTML Scripting

  19. 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. IT: Web Technologies - HTML Scripting

  20. Basic HTML Tags

  21. 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> IT: Web Technologies - HTML Scripting

  22. Return to your browser and click the Refresh button or press F5. IT: Web Technologies - HTML Scripting

  23. 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” /> IT: Web Technologies - HTML Scripting

  24. 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> IT: Web Technologies - HTML Scripting

  25. 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”>

  26. 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 IT: Web Technologies - HTML Scripting

  27. 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 IT: Web Technologies - HTML Scripting

  28. 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” /> IT: Web Technologies - HTML Scripting

  29. 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. IT: Web Technologies - HTML Scripting

  30. 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. IT: Web Technologies - HTML Scripting

  31. 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. IT: Web Technologies - HTML Scripting

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

  33. Complete Lab 1: IT: Web Technologies - HTML Scripting

  34. Part 2Creating Lists

  35. 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. IT: Web Technologies - HTML Scripting

  36. 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. IT: Web Technologies - HTML Scripting

  37. 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. IT: Web Technologies - HTML Scripting

  38. 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 IT: Web Technologies - HTML Scripting

  39. 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.

  40. We will now continue with the sample travel website. Open index.htm in your text editor. IT: Web Technologies - HTML Scripting

  41. 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> IT: Web Technologies - HTML Scripting

  42. Refresh the document in your browser. IT: Web Technologies - HTML Scripting

  43. 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> IT: Web Technologies - HTML Scripting

  44. Resave and preview your document in the browser. The numbers should have changed to bullets. IT: Web Technologies - HTML Scripting

  45. 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> IT: Web Technologies - HTML Scripting

  46. Resave and preview your document in the browser. The bullets should change to circles. IT: Web Technologies - HTML Scripting

  47. 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. IT: Web Technologies - HTML Scripting

  48. <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. IT: Web Technologies - HTML Scripting

  49. 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. IT: Web Technologies - HTML Scripting

  50. 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. IT: Web Technologies - HTML Scripting

More Related