HTML. Hypertext Markup Language. Code used to create web pages

Chapter 4 Web 135

HTML Hypertext Markup Language Code used to create web pages

HTML Tags Two angle brackets For example: <bold>calhoun High</bold> Tells web browser ho to display page contents Enter with notepad or Use Dreamweaver (web development application) Try It

Tag Sets HTML tags come in pairs called tag sets Each pair has a Starting tag called an opening tag <bold> Ending tag called a closing tag (/bold> Tells browser where formatting begins and ends Forward slash indicates an ending tag /bold

Sample Tags It is very important to carefully proofread your HTML code. Try it Very in italics HTML in bold P is for a hard return or paragraph mark

Nested Tags Nesting is the order in which HTML tags appear Nested tag is enclosed inside another set of tags. Sample: It is very important to carefully proofread your HTML code. Above, the italic tag set and the boldface tag are nested within the paragraph tag

Closing Tags Tag must be closed for formatting to stop An end tag closes formatting An end tag looks like follows: Tags close in reverse order of how they were opened so the last tag opened will be the first tag closed

Empty Tags Some HTML Tags are not in pairs Empty tags require only an opening tag Empty tags are sometimes referred to as an orphan tag line break <HR> horizontal line <IMG> insert an image Try It

HTML Guides and Standards World Wide Web Consortium (W3C) Gives recommendations on HTML for the internet There are different versions of html The W3C web site gives specs for most recent Ensures web pages can be displayed by any browser

HTML and Spacing Spaces in code are not seen in web page html code html code HTML Code Must use &nbsp to place spaces in document The spaces above are not seen in the web page. Try it

HTML and Case Sensitivity Tags are not case sensitive Browsers don t care if tags are upper or lower case and are the same thing W3Cs specifications for HTML 4.01: All tags should be uppercase

Source Code All web pages HTML can be viewed in source code Source code is the text and HTML elements used to create a page View/Source from browser menu Try it

XHTML Extensible Hypertext markup language Will soon replace HTML Combination of HTML and XML (extensible markup language) Can be read by many different platforms XHTML similar to HTML Does have some different specifications

Specification Differences XHTML XHTML must start with a DTD (Document Type Definition) XHTML is case sensitive and all tags and attributes must be lowercase. Cannot mix upper and lower case XHTML all attributes must be in quotes and include values XHTML ending tags are required with few exceptions

Quiz Define: HTML XHTML HTML Tag Starting Tag Ending Tag Nested Tag Empty Tag Source Code List Four Tags and their purpose Explain how to view source code Why is basic understanding of HTML important for a web designer?

Files and Folders All web sites have files and folders Example of a folder: HS Example of a file: index.html Dreamweaver can make folders if one does not exist HTML coding requires user to make folders All files and folders must be organized

Practice Create a new root folder named myskills1 below your name in the web design folder within 2006rootfolder/hs Within myskills1 create an images folder Copy the data file p_border.gif into the images folder just created

Creating HTML in Notepad Notepad is word processor Used to create HTML documents HTML document has three parts: 1) DTD (Document Type Definition) 2) Header 3) Body

Document Type Definition-1 st Part <!DOCTYPE HTML PUBLIC - //W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/tr/html4/loose.dtd >

The second part of the HTML document is the header. Before the header, the document must be defined as HTML as follows: <HTML>

This header is the second part of the HTML document Header <HEAD> <TITLE>Document Title</TITLE> </HEAD>

The third part of an HTML document is the BODY which holds the content <Body> At the end of the body place the following </body>

The HTML document ends with an end HTML as follows: </HTML>

ANALYZE HTML DOCUMENT PARTS DTD: version of HTML used on page <HTML>: tells browser to interpret every tag as HTML code until it reaches the </HTML> tag. <HEAD></HEAD> provides info about page such as title or author Does not appear in browser <TITLE></TITLE>Displayed in title bar <BODY></BODY> encloses code for content

Saving HTML in Notepad Naming Files Keep names descriptive but short Use _ to indicate blank spaces i.e. contact_us.html NOT contact us.html Use only lowercase letters File Extensions Tells computer what type of file it is reading Change to.html

Create and Save HTML 1. Open notepad 2. Key text as shown in slide 18 (page 104) 3. Save as skills1.html in myskills folder

Attribute An instruction that further specifies a tags characteristics Allows user to assign colors, styles, alignment Attributes are placed in opening tags Attribute has A name An equal sign A descriptor that must be in quotes and lowercase grass

grass Specify color Use one of 16 named colors Red, blue, white, green Use one of 216 hexadecimal colors (look up on web) Each color represented by a 6- character number/letter combination HTML: hexadecimal letters are capitalized XHTML: hexadecimal letters are lowercase

<BODY bgcolor= #33CC33 > Page background color Located inside body tag Attribute name: BODY bgcolor

<H1></H1> Heading Tags Break text into short readable sections Six levels of headings H1 (largest) H6 (smallest)

<H1 align= center > Align attribute

Try It Give students copy of pp. 104-122 Activity 4C p. 106

Lists Make text easier to read and add visual interest Help readers identify key points Ordered List: displays items that must appear in a particular sequence <OL></OL> Unordered List: contains items that can appear in any order <UL></UL>

WHEN CREATING A LIST Each item is inside a tag Look at page 107 sample of list Numbers precede each item in an ordered list Bullets precede items in an unordered list Complete Activity 4D p. 107

Viewing Changes Note pad is text editor Internet Explorer is Web Browser When changes are made in notepad they must be viewed in internet explorer by opening web page in internet explorer File/open Activity 4E p. 108

Quiz Define: File name extension Attribute Ordered list Unordered list Explain two guidelines for naming files Why must html be added at end of notepad name Why must folders and files be organized Using notepad create an ordered list of your five favorite songs with favorite book first Open in a browser and print

<IMG> Five common attributes can accompany image tag: 1) src: specifies source location of image 2) Alt: gives alternative text message to display 3) Align: wraps text around image 4) Border: places border around image 5) Width and height: specifies images width and height For Example: <IMG src= images/book.gif alt= books align= center border= 0 width= 40 height= 30 Complete Activity 4F page 110

Hyperlinks External (outside the root folder) Internal (inside root folder) Intrapage (within active page)

<A></A> Anchor Tag Identifies what is clicked on and where the link takes the user

Text Link <A href= http://www.centurypubliclibrary.org > Century Public Library</A> Text link is text a user clicks to activate a link Century Public Library is active link area

Graphic Link Using an image as a hyperlink The image anchor tag is nested within the hyperlink anchor tag. <A href= http://www.centurypubliclibrary.org > <IMG src= images/book.gif alt= books align= left border = 0 width = 40 height = 30 ></A>

Relative vs. Absolute Links When linking to a relative file address, the document being linked to must be in the same web folder as the document which has the link Link is relative because it links one page to another relative to where they both are within the same web site As long as sites file structure does not change the relative links work Use relative links when linking files within a web site

Absolute Link Contains the complete URL or path of file being linked to Requires full path because it absolutely must follow the path to link to the file External links are often absolute Perform activity 4G page 112

Testing a Web Page Debugging Locating and correcting obvious errors in code Do it as site is built HTML validator debugs code Offered in W3C site Testing Checking that the page displays as designed Test in various browsers Check external links Activity 4H page 113-114

Quiz Define Anchor tag Text link Graphic link Relative link Absolute link Debugging Testing Write the tag for inserting a graphic. Write the tag for graphic attributes. Write a link tag. Absolute link is used for: Relative link is used for:

Dreamweaver vs. Notepad Activities pp. 116-122 Dreamweaver is a WYSIWYG editor Do not enter tags computer program does it

Key Terms Hypertext Markup Language HTML Starting tag Ending tag Nested tag Empty tag Source code Anchor tag Text link Graphic link Relative link Absolute link Debugging Testing File name extension Attribute Ordered list Unordered list

Main Ideas HTML tags tell a web browser how to display the content of a web page Tags such as <bold> and can be used to format text. Tags can be nested within one another. Some tags, but not all are used in pairs <body> is a paired tag; <HR> is not World Wide Web Consortium provides specifications for HTML Organizing files is important so that files can be easily located by all users and so that hyperlinks are not broken. Files must be saved as.html so that browsers know they are a HTML document.

Main Ideas IMG tag inserts a graphic into a page Src attribute specifies the graphics file location Alt attribute provides alternative text message to display <A> tag inserts a link Href attribute specifies location of object being linked to A link s anchor can be text or image An absolute link lists the complete URL or path of thelinked file. A relative link is used with local files and contains only a partial URL or folder location. A newly created web page must be tested in several browsers to make certain it displays properly. Two browsers are Internet Explorer and Firefox

Main Ideas A web page created in Notepad can be created or modified in Dreamweaver Dreamweaver is a WYSIWYG editor so the user does not enter HTML tags Styles such as font, size, and color can be applied to text. Careful proofreading and testing are important when creating a web page

HTML Tags Learned

Create a table in HTML p. 127 Web page P128 Page 129 Page 130 project 2 Page 131