Elementary Web Authoring: Your First Steps to Building a Website!
Hey there! Ever wondered how your favourite websites are built? It might seem like magic, but it all starts with something called HTML. In this chapter, we're going to pull back the curtain and learn the basics of web authoring.
Think of yourself as an architect, but instead of buildings, you'll be designing the structure for web pages. It's a super useful skill and the foundation of the entire internet! Don't worry if you've never coded before – we'll break everything down into simple, easy-to-understand steps. Let's get started!
Section 1: What is HTML? The Skeleton of the Web
Every website you visit is built using a language called HTML. But what exactly is it?
What HTML Stands For
HTML stands for HyperText Markup Language. Let's break that down:
- HyperText: This refers to text that contains links to other texts. It's the "hyper" that lets you jump from one page to another by clicking on a link. It's what makes the web a "web" of connected pages!
- Markup Language: This means it's a language that uses special markers called tags to describe the structure and content of a page. It "marks up" the text.
Analogy: Think of it like this: If a webpage were a person, HTML would be its skeleton. It gives the body its basic shape and structure. It decides "this is the head," "this is an arm," and "this is a leg." It doesn't handle the cool clothes or hairstyle – that's another language for later. HTML is all about the structure.
Tags: The Building Blocks of HTML
HTML works by using tags. These are keywords surrounded by angle brackets, like <p>. Most tags come in pairs:
- An opening tag: <p> (This says: "a paragraph starts here.")
- A closing tag: </p> (This says: "the paragraph ends here.") The slash (/) is the key difference!
Whatever content you put between the opening and closing tag is what the tag affects.
Example: <b>This text will be bold.</b>
Solving the Cross-Platform Problem
Why is HTML so important? Because it's a universal standard! A webpage written in HTML can be correctly displayed by any web browser (like Chrome, Firefox, or Safari) on any operating system (like Windows, macOS, iOS, or Android). This is what we mean by addressing cross-platform issues. You write the code once, and it works everywhere. This is a huge advantage!
Did you know?
HTML was created by Sir Tim Berners-Lee in 1991. He didn't just invent HTML; he also invented the World Wide Web itself! He wanted a way for scientists to share information easily across the world.
Key Takeaway for Section 1
HTML (HyperText Markup Language) uses tags to give a webpage its structure. It is the standard language for creating web pages and works on all platforms.
Section 2: Recognising Basic HTML Constructs
The good news is, for your exam, you are not required to memorise HTML codes! Instead, you just need to recognise what the basic building blocks do. Let's look at a few common ones.
Headings and Paragraphs: Organising Text
- Headings are like titles and subtitles in a book. They use tags from <h1> (the most important) to <h6> (the least important).
- Paragraphs are for blocks of regular text. They use the <p> tag.
- Bold and Italic text use the <b> and <i> tags to add emphasis.
Links: Connecting the Web
Links, or hyperlinks, are the heart of the web. They are created with the <a> tag, which stands for "anchor". The tag needs an attribute called href (hypertext reference) to know where to link to.
Example: To create a link to the HKEAA website, the code would look like this:
<a href="https://www.hkeaa.edu.hk">Click here to visit the HKEAA</a>
Multimedia Elements: Adding Images, Video, and Sound
A webpage would be boring with just text! We use multimedia tags to add life to it.
- Images: The <img> tag is used to display images. It has a src (source) attribute that tells the browser where to find the image file. Note: `` is a special tag that doesn't need a closing tag!
Example: <img src="my_cat.jpg">
- Audio and Video: Modern HTML has simple tags like <audio> and <video> that let you embed media players right into your page.
Tables: Organising Data
When you need to display data in a grid, like a timetable or a price list, you use a table.
- The whole thing is wrapped in <table> tags.
- Each row is created with a <tr> (table row) tag.
- Each cell inside a row is created with a <td> (table data) tag.
Analogy: Think of building a grid with LEGOs. The `
Sometimes you want to show one webpage inside of another. This is done using a frame. The modern way to do this is with the <iframe> tag.
Real-world example: When you see a YouTube video embedded on a news website, that's an <iframe> at work! It's loading a piece of the YouTube website right inside the news page.
HTML has specific tags for different content types: <h1> for headings, <p> for paragraphs, <a> for links, <img> for images, and <table> for data grids. You should be able to recognise what each one does.
A great website isn't just about having the right code; it's about being easy and pleasant to use for its visitors. This means thinking about your intended audience.
Users should be able to find what they're looking for without getting lost. This is a top priority!
- Logical Placement of Links: Important links should be grouped together in a navigation menu, usually at the top or side of the page.
- Be Consistent: The navigation menu should look the same on every page of your site.
- Clear Labels: Links should be named clearly. Use "Contact Us" instead of something vague like "More Info".
Who are you building this website for? The answer changes everything!
- Example 1: A site for a primary school. You would use a background design with bright, friendly colours. The font size would be large and easy to read. You would use lots of images and simple language.
- Example 2: A site for a university library. The colour combinations would be more professional and serious (e.g., blue, grey, white). The font style would be clean and academic. The focus would be on well-organised tables of data and powerful search functions.
- Colour and Contrast: Make sure your text colour stands out from your background colour (e.g., dark grey text on a white background is great; yellow on white is terrible).
- Font Style and Size: Don't use too many different fonts. Stick to one or two that are easy to read. Ensure the font is large enough for comfortable reading.
- Placement of Multimedia: Use images and videos to support your text, not distract from it. Place them near the relevant information.
- A cluttered layout with too much information at once.
- Annoying background music that autoplays.
- Using colours that clash or make text impossible to read.
- Broken links or images that don't load.
A good website is well-organised, easy to navigate, and thoughtfully designed for its intended audience, considering everything from colours and fonts to the placement of links and images.
Okay, so you've created your HTML files on your computer. How do you get them online for everyone to see? There are three main steps.
1. Get a Domain Name. This is your website's unique address on the internet, like www.google.com. You usually have to register and pay a yearly fee for it.
2. Find a Web Host. A web host is a company that owns powerful computers called servers. These servers are connected to the internet 24/7. You rent a small space on one of these servers to store your website's files.
3. Upload Your Files. Using a special program (often an FTP client), you connect to your web host's server and copy your HTML files, images, and other resources from your computer to the server. Once the files are there, anyone in the world can visit your domain name and see your website!
To publish a website, you need a domain name (address) and web hosting (storage space on a server). Then, you upload your files to the server to make them accessible on the World Wide Web.
` is your baseplate, each `
` is a new row of bricks, and each ` ` is an individual brick in that row.
Frames: A Window to Another Page
Key Takeaway for Section 2
Section 3: Designing a Web Page for an Audience
Ease of Navigation
Thinking About Your Audience
Good Design Practices
Common Mistakes to Avoid
Key Takeaway for Section 3
Section 4: Uploading Your Website to the World Wide Web
Step-by-Step: Going Live
Analogy: A domain name is like your home's postal address. It tells people where to find you.
Analogy: If the domain is your address, web hosting is the piece of land at that address where you'll build your house.
Key Takeaway for Section 4