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='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=“path” /> ¨ path: the location of image file

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 Bold Text result: Bold Text Italic Text result: Italic Text Italic Underlined Underlined Text 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> Student's name: your name </li> Lab section: 00## </li> <li>Lab instructor: Yuping Shen</li> <li>Email: nid@pegasus. cc. ucf. edu </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 Text displaying Example: Text

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)”