7/6: HTML continued
2-Page HTML website is due at the end of class today.
Open your HTML pages in Text Edit to view/edit your code:
Note: Opening the .html files by double clicking on the file will display it as a webpage in the Browser. You will not be able to edit your code if you do this!
- Open the application Text Edit.
- Bring in the file you wish to edit: >File >Open …point to the HTML page in your root folder (ie: “index.html” or “page2.html”).
- Edit your HTML code while previewing changes in a Browser window. Remember to Save (Apple + S) page after each edit.
-
Preview HTML pages in the Browser :
1. Open a Browser (ie: Firefox -or-Safari) and resize the window to half the monitor.
2. Bring in the file you wish to edit: >File >Open …point to the HTML page in your root folder (ie: “index.html” or “page2.html”).
3. Remember to Refresh (Apple + R) page after each edit. More HTML Tags:<body background=”______.gif/.jpg”>
use an image as a background instead of a color; depending on the image size, the image will tile. 
non-breaking space on same line, this tag is not within brackets < ><p>   </p>
add this tag to space content down on the page.<blockquote>
INSERT CONTENT HERE….creates a left and right margin around text content; works best with short paragraphs; a 3-part tag
</blockquote>Lists: Create numbered/alphabetized lists (ordered lists) or bulleted lists (unordered lists).
See HTML cheatsheet website for more list tags.
Example of an Ordered List:
<ol type=1> Ordered list, type=numbers, ‘a’ letters, ‘I’ roman numerals
INSERT CONTENT HERE
<li> Insert list item one content here
<li> Insert list item two content here
<li> Insert list item three content here
</ol> Close tag
Example of an Unordered List:
<ul type=”circle”> Unordered list, type=circle, square, disk
INSERT CONTENT HERE
<li> Insert list item one content here
<li> Insert list item two content here
<li> Insert list item three content here
</ul> Close tag
Target tag: Opens a relative link in a NEW PAGE
<a href=”http://www.____.___” target=”blank”>Content </a>
Open Lab Today: HTML website
Create a 2-page website using HTML hand coding based on a topic of your choice. If you are stumped, create a website for your class projects.
Requirements for Each Page:
-
2 different .jpg or .gif images (4 total)
-
2 Relative Links (index.html page links to page2.html and back)
-
3 Absolute links (all different; 6 total)
-
Email link
-
Header example
-
Emphasis tag example (ie: bold, itallic, etc.)
-
Ordered/Unordered List example or Blockquote example
2-Page HTML website is due at the end of class today.
Make a COPY of your html folder, rename it: “yourname_html”. Make sure ALL the files used for your 2 pages are within this folder! Remove any additional files that are not being used.
Place onto the class Drop Box when completed.
HTML Classes at CCSF:
CNIT 131 Internet Basics & Begin HTML
Leave a Reply