Web authoring (HTML/CSS basics as required) - ICT IGCSE Study Notes
Overview
Have you ever wondered how all the amazing websites you visit every day are made? From your favorite gaming sites to places where you learn new things, they all start with something called web authoring. It's like being an architect and an interior designer for a house, but for a website! Web authoring is all about creating and designing web pages using special codes. The two main 'languages' we'll talk about are HTML, which builds the structure of the page, and CSS, which makes it look pretty. Learning these basics means you can start building your own corner of the internet, sharing your ideas, or even making cool projects for school. This topic is super important because almost everything we do online involves websites. Understanding how they're put together helps you not just use them better, but also opens up a whole world of possibilities for creating your own digital content.
What Is This? (The Simple Version)
Imagine you're building with LEGOs. HTML (HyperText Markup Language) is like the instruction manual and the basic bricks you use to build the shape of your LEGO house. It tells the computer things like: "This is a heading," "This is a paragraph of text," or "Here's where an image goes." HTML gives the website its structure (its bones).
Now, once you have your LEGO house built, you want to paint it, add curtains, choose furniture, and make it look cool, right? That's where CSS (Cascading Style Sheets) comes in! CSS is like the interior designer and painter for your website. It tells the computer: "Make all headings blue," "Make this text bigger," or "Put a border around this picture." CSS controls the style (how it looks) of your website.
So, in short:
- HTML = The content and structure (the words, pictures, and how they're arranged on the page).
- CSS = The style and design (the colors, fonts, spacing, and overall look).
Real-World Example
Let's think about a simple school notice board. If you were to describe it using web authoring terms:
-
HTML part: The actual pieces of paper pinned to the board. One piece says "Meeting Today!" (that's a heading). Another piece has a long message about a school trip (that's a paragraph). There might be a picture of the school mascot (that's an image). The pins holding them up and their order on the board are part of the HTML structure.
-
CSS part: Now, imagine someone decides to make the "Meeting Today!" notice board stand out. They might:
- Write "Meeting Today!" in big, bold, red letters (CSS for font size, weight, and color).
- Put a wavy border around the school trip message (CSS for borders).
- Make the background of the entire notice board a bright yellow (CSS for background color).
See? The information (HTML) is there, but the way it's presented and made attractive (CSS) makes a big difference!
How It Works (Step by Step)
Creating a basic web page involves a few simple steps, like following a recipe: 1. **Write HTML:** You start by typing your HTML code into a plain text editor (like Notepad or VS Code). This code tells the browser what content to show. You're basically writing the 'ingredients' and 'steps' for you...
Unlock 3 More Sections
Sign up free to access the complete notes, key concepts, and exam tips for this topic.
No credit card required · Free forever
Key Concepts
- HTML (HyperText Markup Language): The basic code used to create the structure and content of web pages, like the bones of a house.
- CSS (Cascading Style Sheets): The code used to control the style and appearance of web pages, like the paint and furniture in a house.
- Tag: A special keyword in HTML, usually enclosed in angle brackets (e.g., `<p>`), that tells the browser how to display content.
- Element: An HTML tag along with its content, like `<p>This is a paragraph.</p>`.
- +6 more (sign up to view)
Exam Tips
- →Practice writing simple HTML and CSS code by hand or in a text editor; hands-on experience helps you remember the tags and properties.
- →Understand the difference between HTML (structure/content) and CSS (style/presentation); this is a common question.
- +4 more tips (sign up)
More ICT Notes