HTML for KS3

HTML

Journey into Web Design: HTML Basics

The foundation of web pages

The internet is full of captivating websites, and learning the basics of web design can be an exciting adventure. In this article, we will explore HTML, the foundation of web pages. Designed specifically for you, we will introduce HTML, explain its purpose, and provide simple examples to help you get started on your web design journey.

Understanding HTML

HTML (Hypertext Markup Language) is a markup language used to structure and present content on the web. It provides a set of tags that define the elements of a web page, such as headings, paragraphs, images, and links. Think of HTML as the building blocks that create the structure and appearance of a web page.

Basic Structure of an HTML Document

An HTML document has a specific structure. Here's a simple template to get you started:
<!DOCTYPE html>
<html>
 <head>
  <title>My First Web Page</title>
 </head>
 <body>
  <h1>Welcome to My Web Page</h1>
  <p>This is my first paragraph.</p>
 </body>
</html>

Let's break down the structure

  1. <!DOCTYPE html>
     This line specifies the version of HTML being used.

  2. <html>
     The opening and closing tags define the HTML document.

  3. <head>
     This section contains meta information about the document, such as the page title.

  4. <title>
     This tag sets the title of the web page, which appears in the browser's title bar.

  5. <body>
     This section contains the visible content of the web page.

  6. <h1>
     The "h1" tag creates a heading, and its closing tagends the heading.

  7. <p>
     The "p" tag defines a paragraph, and its closing tag

    ends the paragraph.

Adding Images and Links

HTML allows us to include images and links to make web pages more engaging. Here's an example:
<!DOCTYPE html>
<html>
 <head>
  <title>My First Web Page</title>
 </head>
 <body>
  <h1>Welcome to My Web Page</h1>
  <img src="image.jpg" alt="A beautiful image">
  <p>Click <a href="https://www.example.com">here</a> to visit Example.com</p<  </body>
</html>
 In this example, we've added an image using the tag. The src attribute specifies the image file ("image.jpg"), and the alt attribute provides alternative text for accessibility. We've also included a link using the tag. The href attribute defines the URL ("https://www.example.com"), and the link text "here" is displayed on the web page.

Continue to learn and practice!

HTML is an essential language for web design and a fantastic starting point for your journey into web development. By mastering the basics of HTML, you can create your own web pages, share your ideas, and express your creativity online. Remember to experiment, explore different tags, and have fun building your first web pages. Enjoy the adventure of web design and watch your skills grow as you continue to learn and practice!