How to Create Your Phase 3 CAT PAT Website
Basic Structure
- Start by using HTML learned in Grade 11.
- Use
html, head, body, and title tags.
- Save your first page as
home.html.
Creating Navigation
- Add a heading at the top of your homepage.
- Create a table under the heading with one row and three cells.
- Each cell will link to a different web page.
- Example cells: Home, Findings, Research
- Add colors to cells and text for better aesthetics.
- Create placeholder links in cells to other pages (findings.html, research.html).
- Save the file in the correct format as
home.html in your CAT PAT folder.
HTML Tags and Saving
- Open and close HTML tags immediately for better structure.
- Include
title tags within the head section (e.g., <title>Home</title>).
- Add off-page text styling later for aesthetics.
- Use
Notepad++ and save files correctly as HTML.
Validation and Preview
- Open and preview your HTML file in a web browser like Chrome.
- Check that the structure is correct and visible as designed.
- Align and center elements using tags such as
<h1> and attributes like align="center".
Inserting Tables and Links
- Use the
<table> tag to create structured content.
- Add table rows
<tr> and cells <td>.
- Style tables with properties such as
border, width, and bgcolor for cell backgrounds.
- Links should be created using
<a> tags with href attributes pointing to relevant pages (e.g., <a href="home.html">Home</a>).
- Ensure links in table cells are correctly referenced and colored using
<font> tags within <a> tags for styling.
Final Touches
- Consistent width of table cells using
width attribute (e.g., 33% for three cells).
- Optionally, remove borders for a cleaner look.
- Apply a consistent background color scheme using color codes (hex values).
- Multiple colors: Alternate cell colors for effect (e.g., background and text color combinations).
Completing and Copying Pages
- Finalize the perfect design and save the home page.
- Copy the home page HTML and create new pages (e.g.,
findings.html and research.html) for consistency.
- Edit the new pages with relevant content while keeping the design intact.
- Ensure links between pages work by saving files with matching names as referenced in
href attributes.
Additional Tips
- Use valid color codes and palettes from online sources to find suitable color schemes.
- Maintain a consistent navigation and color theme throughout all pages to make browsing smoother.
- For more tips, subscribe to the relevant YouTube channel and click on the playlists for comprehensive help.
"Remember, don’t do it the long way, do it the Mr. Long way!"