HTML/CSS & Data Presentation
Learn to build web pages with HTML and CSS, and present data effectively.
Welcome to HTML/CSS & Data Presentation!
Have you ever wondered how websites are made? Every website you visit is built using two special languages: HTML (for structure) and CSS (for style)!
What You'll Learn:
- 🏗️ How to build web pages with HTML
- 🎨 How to style pages with CSS
- 📊 How to present data clearly
- 💻 How to see your changes in real-time
Get ready to become a web designer! 🚀
HTML: Building the Structure
HTML (HyperText Markup Language) is like the skeleton of a web page. It tells the browser what content to show and how to organize it.
Basic HTML structure:
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first webpage!</p>
</body>
</html>
Common HTML tags:
<h1>- Big heading<p>- Paragraph<div>- Container box<button>- Clickable button
Try typing HTML in the editor and watch it appear in the preview! 🎯
Live Code Editor
CSS: Making It Beautiful
CSS (Cascading Style Sheets) is like the paint and decorations for your web page. It controls colors, sizes, fonts, and layout!
How CSS works:
h1 {
color: blue;
font-size: 32px;
text-align: center;
}
This makes all <h1> headings blue, 32 pixels tall, and centered!
What you can style:
- 🎨 Colors (text, background, borders)
- 📏 Sizes (width, height, font-size)
- 📍 Position (center, left, right)
- ✨ Effects (shadows, animations)
Experiment in the live editor - change colors and sizes and see what happens! 🎨
DOM Visualizer
The Box Model: Understanding Layout
Every element on a web page is like a box with layers. Understanding the box model helps you control spacing and layout!
The layers (from inside to outside):
- 📦 Content - The actual text or image
- 🟦 Padding - Space inside the box (around the content)
- 🟨 Border - The edge of the box
- 🟩 Margin - Space outside the box (between boxes)
Think of it like:
- Content = The gift
- Padding = The wrapping paper
- Border = The ribbon
- Margin = Space between gifts
Use the box model explorer to adjust padding, border, and margin. Watch how each layer affects the spacing! 📐