HTML continued Assignment 3 n Creating a web

HTML (continued)

Assignment 3 n Creating a web page with: ¨ Images ¨ Hyperlinks to some websites ¨ Hyperlinks to your email ¨ Information about a company, products, etc. n Post your web page on the pegasus server

Inserting an image n <img src=“path” /> ¨ path: the location of image file ¨ Absolute path: full path <img src = “http: //www. google. com/images/logo. gif” /> Relative path: relation of file to the current HTML document. <img src = “. /logo. gif” /> The same <img src = “logo. gif” />

public_html img home. html <img src=“img/logo. gif” /> Or logo. gif building. jpg <img src= “http: //pegasus. cc. ucf. edu/ ~your_nid/img/logo. gif” />

Inserting an image Important! file-location or filename is case sensitive! n img. GIF ≠ img. gif n IMg. gif ≠ img. gif n Don’t use blank in the filename n

Heading n <h 1> H 1 heading </h 1> n <h 2> H 2 heading </h 2> n <h 3> H 3 heading </h 3> n <h 4> H 4 heading </h 4> n <h 5> H 5 heading </h 5> n <h 6> H 6 heading </h 6>

Block quote Heading Example: Block quote

Block quote n Using <h#> and <blockquote> tag: <h 1> (or <h 2>, . . . ) Heading content </h 1> <blockquote> Quote content here. . . </blockquote> Example: <h 1> Grading issue</h 1> <blockquote> Quote content. </blockquote>

Block. Quote n To make Indented text ¨ Use embedded blockquote element ¨ <blockquote> Text … </blockquote> ¨ </blockquote>

Characters formatting n n n Bold <b> Bold Text </b> result: Bold Text <i> Italic Text </i> result: Italic Text Italic Underlined <u> Underlined Text </u> result: Underlined Text

Characters formatting n Superscripted Text ^supscript result: n Subscripted Text _subscript result:

Add character tags into webpage. . . . <body> <h 1 >CGS 2100 Lab </h 1> <ol> <li> <b>Student's name: </b> your name </li> <b>Lab section: </b> 00## </li> <li><b>Lab instructor: </b><i>Yuping Shen</i></li> <li><b>Email: </b><u>nid@pegasus. cc. ucf. edu </u></li> </ol> <body>. .

Horizontal line n <hr />

Special Characters Special characters like ©, ®, ° n HTML supports the use of character symbols that are identified by a code number or code name. n &code Example: &copy or &#169 ©

Special Characters

Decoration of the text n <font color=“color” size= number face=“face_name”> Text displaying </font> Example: <font color=“blue” size=10 face=“impact”>Text </font>

Applying style to a list Change the marker of a list n Attribute style of <ol> or <ul> n ¨ Order list: style=“list-style-type: lower-alpha” ¨ Unordered list: style = “list-style-type: square” ¨ Image as marker: n style = “list-style-image: url(Arrow. gif)”

Applying style to a list E. g. n <ul style=“list-style-image: url(Arrow. gif)”> n <li>Line 1</li> n <li>Line 2</li> n </ul> n

Other issues n Alignment attribute <p align=“center”> Title </p> <p align=“right”> Address: . . </p> <h 1 align=“center”>Heading</h 1>