Welcome to Web Authoring!
Ever wondered how your favorite websites are built? In this chapter, we are going to learn the art of Web Authoring. This isn't just about making things look pretty; it’s about using software tools and a bit of code to create pages that are easy to use and look professional. For your Paper 2 Practical Exam, you will be expected to build or edit web pages using a template, so let's get you ready!
1. Starting with a Plan: The Layout
Before you start typing, you need a structure. Professional websites use a template to make sure every page looks consistent. Think of a template as a "skeleton" for your site.
Tables and Frames
In your exam, you will often use tables to organize your layout. Tables help you keep your images and text exactly where you want them.
• Rows and Columns: Just like in a spreadsheet, you use these to create "cells" for your content.
• Frames: These are older tools used to divide a window into different parts (like a fixed sidebar and a scrolling main area). While less common on the modern web, the syllabus mentions them as a way to structure a page.
Standard Page Features
Most web pages follow a standard pattern so that users don't get lost:
• Banners: A large image or text box at the very top of the page. It usually contains the website name or logo.
• Navigation/Menu: This is a list of links (buttons or text) that lets users move between different pages of the site. It is usually found at the top or down the left side.
2. Adding Life to Your Page: Content
Once your "skeleton" (the layout) is ready, it’s time to add the "muscles" (the content).
Inserting Elements
You need to know how to insert these four main things:
• Text: The actual information on the page.
• Images: Pictures to make the site engaging.
• Buttons: Often used for navigation or "Call to Action" (like a "Click Here" button).
• Animation: Moving elements that grab attention (but don't overdo it!).
Formatting Your Text
To make your page easy to read, you should use different levels of text:
• Headings: Big and bold, used for the main title of the page.
• Subheadings: Slightly smaller, used to break the page into sections.
• Body Text: The main paragraphs of information.
• Alignment: You can align your text to the Left, Center, or Right. Usually, body text is left-aligned for easy reading!
3. Cracking the Code: Essential HTML
Don't worry—you don't need to be a computer programmer! For this course, you only need to know a few specific HTML (HyperText Markup Language) tags. You might use a "What You See Is What You Get" (WYSIWYG) editor, but the exam will require you to use or edit actual code for these tasks:
A. Hyperlinks
A hyperlink connects your page to another page or a website.
The Tag: \(\)
Example: \(Go \ to \ Page \ 2\)
• href stands for "hyperlink reference"—it’s the destination address.
B. Inserting Images
To show a picture, you tell the browser where the file is stored.
The Tag: \(\)
Example: \(
\)
• src stands for "source" (the filename).
• alt is "alternative text" which describes the image if it fails to load.
C. Font Enhancements
Sometimes you need to make words stand out.
• Bold: Use the \(\) or \(\) tags.
• Italics: Use the \(\) or \(\) tags.
• Underline: Use the \(\) tag.
4. House Style and Professionalism
In Topic 5, we mention "House Style." In web authoring, this means making sure your website follows a set of rules so it looks professional.
• Font Choice: Use Serif fonts (with little "feet" on the letters, like Times New Roman) for a traditional look, or Sans Serif fonts (clean and straight, like Arial) for a modern, digital look.
• Color Choice: Ensure there is a high contrast between the background and the text (e.g., black text on a white background). Avoid clashing colors that hurt the eyes!
• Accuracy: Always proofread. A website with spelling mistakes looks untrustworthy.
5. Troubleshooting and Best Practices
Don't worry if things don't look right at first. Here are some common mistakes to avoid:
• Broken Images: This usually happens if you type the filename wrong or forget the file extension (like .jpg or .png).
• Links that don't work: Double-check your \(href\) spelling!
• Save Frequently: As per the "File Management" skills, always save your work regularly so you don't lose your progress.
Did you know?
The first-ever web page was created in \(1991\) and was just plain text with a few blue links. Today, we use the same basic HTML tags you're learning now to build everything from social media sites to online stores!
Summary Checklist
Check your understanding:
• Can I identify the banner and navigation on a page?
• Do I know how to use a table to layout content?
• Can I write the HTML code for a hyperlink and an image?
• Can I explain why "House Style" (consistent fonts and colors) is important?
• Do I know the difference between Serif and Sans Serif fonts?
Top Tip for the Exam: When asked to evaluate your website (AO3), look at your original requirements. If you were asked to make a site for "Elderly Users," check if the font size is large enough and the navigation is simple!