Computer Science
Grade 6
20 min
Creating Simple Websites
Creating Simple Websites
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Define what a website is and identify its three core technologies.
Explain the role of HTML for creating a website's structure.
Explain the role of CSS for styling a website's appearance.
Explain the role of JavaScript for adding interactivity to a website.
Differentiate between an HTML tag and an HTML element.
Write a simple, complete HTML element using a text editor.
Save a text file as an HTML document and open it in a web browser.
Ever wondered how your favorite websites are made? 💻 Let's pull back the curtain and see the secret code that builds the internet!
In this lesson, you'll discover the three secret ingredients that make up almost every website: HTML, CSS, and JavaScript. You'll learn what each one does and how the...
2
Key Concepts & Vocabulary
TermDefinitionExample
WebsiteA collection of connected web pages on the internet that share a common theme or purpose.The collection of pages for your school, including the home page, the calendar page, and the contact page, all make up one website.
HTML (HyperText Markup Language)The code that gives a website its structure, like the skeleton of a body. It tells the browser what content to show, like headings, paragraphs, and images.Using the `<p>` tag to create a paragraph of text on a page.
CSS (Cascading Style Sheets)The code that styles a website, like the clothes and hairstyle of a person. It controls colors, fonts, and the layout of the page.Using CSS to make all the headings on a page blue and bold.
JavaScript (JS)The code that makes a website interactive and do things, like...
3
Core Syntax & Patterns
The Three-Layer Cake Analogy
HTML (Structure) + CSS (Style) + JS (Action) = Website
Think of a website like a layer cake. HTML is the cake itself, giving it shape. CSS is the frosting and decorations, making it look good. JavaScript is the magic that makes things happen, like candles lighting up.
HTML Tag Structure
<tagname>Content goes here</tagname>
Most HTML elements start with an opening tag (like `<p>`) and end with a closing tag that has a forward slash (like `</p>`). The content you want to display goes in between them.
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
A website has a navigation menu at the top, a main content section, and a copyright notice at the bottom. Which set of modern HTML5 tags is best for organizing these sections for both browsers and developers?
A.`<div id="top">`, `<div id="middle">`, `<div id="bottom">`
B.`<header>`, `<section>`, `<bottom>`
C.`<menu>`, `<article>`, `<p>`
D.`<nav>`, `<main>`, `<footer>`
Challenging
You have an `index.html` file and a `style.css` file in the same folder. Your `style.css` contains `body { background-color: blue; }`, but the webpage background remains white. Your HTML file has the correct `<html>`, `<head>`, and `<body>` structure. What is the most likely missing piece of code in your `index.html` file?
A.`<style>body { background-color: blue; }</style>` in the body.
B.`<script src="style.css"></script>` in the head.
C.`<meta charset="UTF-8">` in the head.
D.`<link rel="stylesheet" href="style.css">` in the head.
Challenging
A developer writes the following line of code: `<a href="details.html"><img src="info.png" alt="More Details"></a>`. What will be the result of this code on the webpage?
A.An image will appear, and next to it, a link that says "More Details".
B.An image will appear that, when clicked, takes the user to the "details.html" page.
C.It will cause an error because you cannot put an <img> tag inside an <a> tag.
D.link will appear, and when you hover over it, the "info.png" image will pop up.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free