Welcome to Web Technologies!
In this chapter, we are going to explore the building blocks of the modern internet. Since this falls under the Exchanging Data section of your OCR H046 course, we are looking at how information is structured, styled, and made interactive so it can be shared across the globe. By the end of these notes, you’ll understand how HTML, CSS, and JavaScript work together, and why compression is the "secret sauce" that makes the web fast.
Don't worry if you’ve never written a line of code before—we’re going to break this down into very simple pieces!
1. The "Big Three" of Web Development
Think of a website like a house. To build a house, you need three different things: the structure (bricks), the decoration (paint), and the functionality (plumbing and electricity). The web works exactly the same way.
A. HTML (The Structure)
HTML stands for Hypertext Markup Language. It is the skeleton of a webpage. It tells the browser what the content is (e.g., "this is a heading," "this is a paragraph," or "this is an image").
How it works: HTML uses tags to wrap around content. For example:
<h1>This is a Title</h1>
<p>This is a paragraph of text.</p>
Quick Review: HTML
- It is a Markup Language, not a programming language.
- It defines the structure and content.
- It uses tags in angle brackets.
B. CSS (The Style)
CSS stands for Cascading Style Sheets. If HTML is the bricks of the house, CSS is the paint, the wallpaper, and the carpet. It tells the browser how the content should look.
Why do we use it? Instead of telling every single paragraph on your website to be "Blue" and "Font Size 12," you can write one CSS rule that changes every paragraph at once. This keeps the code clean and easy to manage.
Did you know? The word "Cascading" means that rules "fall down" from one level to the next. If you set a font for the whole page, every paragraph inside that page will inherit that font unless you give it a specific rule of its own!
C. JavaScript (The Behavior)
JavaScript is a scripting language. It adds interactivity to the page. It’s what makes things happen when you click a button, allows for pop-up alerts, or lets you submit a form without refreshing the whole page.
In our house analogy, JavaScript is the light switch or the doorbell—it handles the behavior.
Key Concept: Client-Side Processing
JavaScript usually runs on the Client-Side. This means the code is sent to your computer and your web browser runs it. This is faster than sending every little click back to a server in another country!
Key Takeaway: The Web Trinity
HTML = Structure (The what)
CSS = Presentation (The look)
JavaScript = Interaction (The behavior)
2. Exchanging Data Efficiently: Compression
When we exchange data over a network, we want it to travel as fast as possible. High-quality images or videos are huge files! To send them quickly, we use Compression to make the files smaller.
There are two main types you need to know for your exam: Lossy and Lossless.
A. Lossy Compression
Lossy compression works by permanently removing some of the data from the file. It looks for information that the human eye or ear probably won't notice and "throws it away."
Example: A JPEG image or an MP3 file. If you compress a photo of a blue sky using lossy compression, the computer might turn 50 slightly different shades of blue into just 5 shades. It looks almost the same, but the file size is much smaller.
The Catch: Once that data is gone, you can never get it back. If you compress it too much, the quality will look "blocky" or "pixelated."
B. Lossless Compression
Lossless compression makes the file smaller without losing any information. When you decompress the file, it is 100% identical to the original.
How does it do that? It uses clever patterns. Instead of storing "Blue, Blue, Blue, Blue, Blue," it stores "5 x Blue." This takes up less space but lets the computer perfectly rebuild the original file.
Example: PNG images, ZIP files, or program code. You must use lossless for things like text or bank records, because losing even one letter would change the meaning!
Memory Aid:
- Lossy = Lose data (but smaller file).
- Lossless = Less space (but keeps all data).
Common Mistakes to Avoid:
- Mistake: Thinking Lossy is always "bad."
- Reality: Lossy is great for the web! Without it, Netflix would buffer forever and websites would take minutes to load images.
- Mistake: Thinking you can turn a Lossy file back into a high-quality original.
- Reality: Once data is "lost" in lossy compression, it is gone forever.
Quick Review: Compression Comparison
1. Lossy: Smaller file size, lower quality, data is lost permanently. Used for: Photos, Video, Audio.
2. Lossless: Larger file size (than lossy), perfect quality, no data lost. Used for: Text, Code, Documents.
Summary Checklist
Before you move on, make sure you can answer these:
1. Can I explain the different roles of HTML, CSS, and JavaScript? (Structure vs. Style vs. Interactivity)
2. Do I know that JavaScript is a client-side language?
3. Can I explain why we need compression when exchanging data?
4. Can I describe the difference between Lossy and Lossless compression and give an example of each?
Great job! You've just mastered the essentials of Web Technologies for your H046 exam. Keep this "Structure, Style, Behavior" model in mind, and you'll find this topic much easier to remember.