19
HTML (continued)
| Date post: | 12-Jan-2016 |
| Category: |
Documents |
| Upload: | edwina-byrd |
| View: | 218 times |
| Download: | 0 times |
HTML (continued)
Assignment 3
Creating a web page with: ImagesHyperlinks to some websitesHyperlinks to your email Information about a company, products, etc.
Post your web page on the pegasus server
Inserting an image
<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” />
<img src = “logo.gif” /> The same
public_html
img home.html
logo.gif building.jpg
<img src=“img/logo.gif” />
Or<img src= “http://pegasus.cc.ucf.edu/~your_nid/img/logo.gif” />
<img src=“img/logo.gif” />
Or<img src= “http://pegasus.cc.ucf.edu/~your_nid/img/logo.gif” />
Inserting an image
Important!
file-location or filename is case sensitive!
img.GIF ≠ img.gif IMg.gif ≠ img.gif Don’t use blank in the filename
Heading
<h1> H1 heading </h1>
<h2> H2 heading </h2>
<h3> H3 heading </h3>
<h4> H4 heading </h4>
<h5> H5 heading </h5>
<h6> H6 heading </h6>
Block quoteExample:
Heading
Block quote
Block quote
Using <h#> and <blockquote> tag:<h1> (or <h2>,...) Heading content </h1><blockquote> Quote content here......</blockquote>
Example:<h1> Grading issue</h1><blockquote> Quote content.</blockquote>
BlockQuote
To make Indented textUse embedded blockquote element<blockquote>
Text …<blockquote>Text …</blockquote>
</blockquote>
Characters formatting
Bold <b> Bold Text </b> result: Bold Text
Italic <i> Italic Text </i> result: Italic Text
Underlined<u> Underlined Text </u> result: Underlined
Text
Characters formatting
Superscripted Text Text <sup> supscript </sup>
result:
Subscripted Text Text <sub> subscript </sub>
result:
Add character tags into webpage
.......<body><h1 >CGS2100 Lab </h1><ol>
<li> <b>Student's name:</b> your name </li> <li> <b>Lab section:</b> 00## </li> <li><b>Lab instructor:</b><i>Yuping Shen</i></li> <li><b>Email:</b><u>[email protected] </u></li></ol><body>....
Horizontal line
<hr />
Special Characters
Special characters like ©, ®, ° HTML supports the use of character
symbols that are identified by a code number or code name.
&code
Example: © or © ©
Special Characters
Decoration of the text
<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 Attribute style of <ol> or <ul>
Order list: style=“list-style-type:lower-alpha”Unordered list: style = “list-style-type:square” Image as marker:
style = “list-style-image:url(Arrow.gif)”
Applying style to a list
E.g. <ul style=“list-style-image:url(Arrow.gif)”> <li>Line 1</li> <li>Line 2</li> </ul>
Other issues
Alignment attribute
<p align=“center”> Title </p>
<p align=“right”> Address:.... </p>
<h1 align=“center”>Heading</h1>
