Completed Activity (My Homepage) Examples
Please note that these examples will not be posted until the assignment is given.
- HTML Practice (Activity #1)
- More HTML Practice (Activity #2)
- My Home Page (Activity #3)
- FrontPage Practice (Activity #4)
CSS Practice
- Positioning: We discussed using CSS to position items relatively and absolutely on the page. Here is the example we used in class that created two scroll-able boxes for the nav and content boxes. The nav div was positioned to the right of the content div and images were used as links to other locations in the content div. Right-click on the HTML file and the CSS file to save them to your drive.
- Here is the lovely page we created in class. To see the page in the browser, click here. Or, right-click on the link and choose Save Target As... to download the mypage.html file. To download the accompanying style sheet, right-click on style2.css and save to the same location where you have saved mypage.html.
- This is the HTML-Tables layout page that now links to a style sheet. The style sheet specifies background colors and images for the body and for a navigation list in the first column.
Page Layout Examples
To see the layout skeleton in the examples below, download the file, open in Notepad, set the table borders to 1, and view in your browser.
- layout2.html: This is the
example I showed in class that uses a set of nested DIV elements
with a linked file sheet to create the page layout.
Click on the link to view the html file in your browser
or right-click and choose Save Target As... to download it.
Download the accompanying style sheet: layout2.css *Remember: right-click the file on your computer to open it with Notepad to make edits. - layout.html: This is the
example I showed in class that uses a fixed width table
which is centered on the page, and includes a page banner, a navigation
column on the left, a content column on the right, and a page
footer. Click on the link to view the html file in your browser
or right-click and choose Save Target As... to download it.
*Remember: right-click the file on your computer to open it with Notepad to make edits. - table.html: This is the
file we created in class together that uses a flexible with table
which is centered on the page, and includes a page banner, a
fixed width navigation column on the left, a flexible width
column in the center for page content, a fixed with column on
the right for highlighted content, and a page footer. It also
includes a nested table inside the content cell to create layout
for pictures and text. This file also includes examples of images
with text wrapping. Click on the link to view the html file in your
browser or right-click and choose Save Target As... to download it.
*Remember: right-click the file on your computer to open it with Notepad to make edits.
CSS Practice Examples
Right-click and save the files below and open in Notepad to edit