|
Getting your Trinity Audio player ready...
|
Hello, my name is Danny and I love tech and coding, today we will explore the world of HTML and coding.
Have you ever wanted to build your own website?
Imagine, a place on the internet you designed yourself, full of all your favourite things! Well, guess what? You can do just that with something called HTML! It might sound fancy, but it’s like learning a secret language that lets you build websites, just like grown-up programmers.
Think of HTML like building a LEGO® castle:
- Bricks are like words: You use them to tell the computer what to put on your website.
- Instructions are like HTML tags: These special words tell the computer how to arrange the “bricks” (words) to make your website look awesome!
Here’s how to get started:
- Grab your tools: You don’t need a fancy toolbox, just a computer and a program called a text editor. It’s like a notebook for writing your secret HTML code. Some popular choices for kids are “Notepad” (for Windows) or “TextEdit” (for Mac).
- Start building! Every website needs a foundation, so let’s lay the first brick:
HTML
<!DOCTYPE html>
<html>
<head>
<title>My Super Website!</title>
</head>
<body>
</body>
</html>
Use code with caution.
content_copy
- Woah, what’s that?! Don’t worry, these are just the special instructions (tags) that tell the computer it’s an HTML page.
- The title is like your website’s name: Change “My Super Website!” to something cool, like “My Amazing Animal Page” if you love animals!
- Time to add some furniture (content)! Let’s write a heading:
HTML
<!DOCTYPE html>
<html>
<head>
<title>My Amazing Animal Page</title>
</head>
<body>
<h1>My Favourite Animals</h1>
</body>
</html>
Use code with caution.
content_copy
- <h1> makes BIG and BOLD text, like a giant banner! You can change it to smaller headings like <h2> or <h3> for different sections.
- Let’s add some pictures of your favourite animals! Use this tag:
HTML
<!DOCTYPE html>
<html>
<head>
<title>My Amazing Animal Page</title>
</head>
<body>
<h1>My Favourite Animals</h1>
<img src="images/cat.jpg" alt="A cute cat">
</body>
</html>
Use code with caution.
content_copy
- “src” tells the computer where to find the picture (replace “cat.jpg” with your image file name).
- “alt” is like a label for your picture, in case it doesn’t load. It helps people who use screen readers understand what the picture is.
Bonus Tip: You can add lists, paragraphs, and even links to other websites using different tags! Explore and experiment, just like playing with LEGO®s.
Note: Learning to code takes time and practice, but it’s like solving a puzzle. With each new tag you learn, you’ll unlock more ways to build your dream website!
Keep exploring, have fun, and who knows, maybe you’ll become the next amazing web developer!
