Chapter 4 (through page 110) Fluency with Information Technology 4 th edition by Lawrence Snyder (slides by Deborah Woodall : 1
Web Page Creation We will create a home page and one other page in this course. There are two methods for creating Web pages. 1. Use a Web authoring tool nice GUI, the HTML tags are written for you MS Office Publisher, Dreamweaver, ColdFusion 2.Use a text editor you type the HTML tags WordPad, Notepad++, Text Wrangler (Macs) 2
Steps for Creating a Web Page using WordPad 1.Type 1.Type the Web page into WordPad using HTML tags. 2.Save text document 2.Save the Web page to your flash drive as a text document with a.html file extension. 3.Preview 3.Preview the Web page locally using Internet Explorer or some other browser. 4.Publish 4.Publish the finished page. 3
XHTML Extensible HtML Extensible Hypertext Markup Language Dialect of HTML tags A language of tags 4
XHTML Tags XHTML tags are commands to the browser telling it how to display the content of the Web page Tags are lowercase words or abbreviations enclosed in angle brackets, e.g.<html> 5
XHTML Tags Tags can be paired, e.g. cat cat – These usually control formatting – The second of these tags has a / – Never omit a closing tag Tags can be unpaired, e.g. – These allow the inclusion of non-text items on the page 6
XHTML Tags Remember, XHTML tags should be lower case When using multiple tags – They should not be overlapped – They should be nested Incorrect: cat Correct: cat 7
Web page – General Form preliminary material goes here content of the page goes here This form must be followed. All three sets of XHTML tags are required. 8
Title Tags Title tags – Go between the tags – Determine what shows up in the title bar of the browser window when your page is viewed 9
Heading tags, Paragraph tags Heading tags through Large to small headings Paragraph tags An aid in formatting A blank line is inserted before and after heading and paragraph tags 10
Break tag, Horizontal Rule tag Break tag Go to a new line Horizontal Rule tag Draw a horizontal line 11
List tags Ordered list tags For numbered lists Unordered list tags For bulleted lists for individual list items 12
Center, Bold, Italics tags Center tags Bold tags Italics tags 13
Creating a Hyperlink Anchor tags Two parts: the hyperlink reference and the anchor text Internet Movie Database 14
Image tag – Image file name must have file extension and be spelled correctly (case sensitive) – Both src and alt are required 15
16 Tables Friend Hair Color John Black Mary Red Elise Blond FriendHair Color JohnBlack MaryRed EliseBlond
Attributes Attributes are characteristics of each tag that you may be required to set, or that you can optionally set. (In green below) They go inside of the tag and give you some control over what the browser does with the tag. Internet Movie Database 17
The Style Attribute The most useful attribute is the style attribute It can be used to control a very long list of properties of your page components. The value of the style attribute has two parts separated by a colon… name-of-property : specification Welcome Hello! 18