Lesson

Web Development 

Introduction to HTML

Welcome to the world of web development! This lesson will introduce you to the fundamental building blocks of the internet: HTML. HTML stands for HyperText Markup Language, and it's the standard language for creating webpages. Think of it as the skeleton of a website – it provides the structure and content.

Without HTML, web browsers wouldn't know how to display text, images, or links. It's essential for anyone interested in building websites, from simple personal pages to complex web applications. We'll start with the basics and work our way towards creating a simple webpage layout.

HTML Structure: The Basic Template

Every HTML document follows a basic structure. This structure tells the browser that it's reading an HTML file and provides the essential elements for the page. Here's a minimal HTML template:

            
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <!-- Page content goes here -->
</body>
</html>

Let's break down each part:

  • <!DOCTYPE html>: This declaration tells the browser that the document is an HTML5 document. It should always be the first thing in your HTML file.
  • <html>: This is the root element of the page. Everything else goes inside this tag.
  • <head>: This section contains meta-information about the HTML document, such as the title, character set, and links to stylesheets.
  • <title>: Specifies a title for the HTML page (which is shown in the browser's title bar or tab).
  • <body>: This is where all the content of your webpage goes – the text, images, links, and everything else that users see.

HTML Tags: Elements and Attributes

HTML uses tags to define elements. Most tags come in pairs: an opening tag and a closing tag. For example, <p> is the opening tag for a paragraph, and </p> is the closing tag.

Some tags are self-closing, meaning they don't need a separate closing tag. An example is the <br> tag, which creates a line break. Tags can also have attributes, which provide additional information about the element. For example, the <img> tag (for images) uses the src attribute to specify the image source.

Headings: <h1> to <h6>

Headings are used to structure your content and make it easier to read. HTML provides six levels of headings, from <h1> (the most important) to <h6> (the least important). Typically, <h1> is used for the main title of the page.

Here's an example:

            
<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>

Paragraphs: <p>

Paragraphs are used to display blocks of text. The <p> tag defines a paragraph.

Example:

            
<p>This is a paragraph of text.  It can contain multiple sentences and words.</p>
<p>This is another paragraph. Paragraphs are automatically separated by a blank line.</p>

Lists: <ul> and <ol>

HTML provides two types of lists: unordered lists (<ul>) and ordered lists (<ol>). Unordered lists are used for items that don't have a specific order, while ordered lists are used for items that need to be in a particular sequence. List items are defined using the <li> tag.

Here are examples of both:

            
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Links: <a>

Links allow users to navigate between different webpages or sections within the same page. The <a> tag defines a hyperlink. The most important attribute is href, which specifies the URL of the link.

Example:

            
<a href="https://www.example.com">Visit Example.com</a>

The target attribute can be used to specify where to open the linked document. target="_blank" opens the link in a new tab or window.

Images: <img>

The <img> tag is used to embed images in a webpage. The src attribute specifies the path to the image file. The alt attribute provides alternative text for the image, which is displayed if the image cannot be loaded and is important for accessibility.

Example:

            
<img src="image.jpg" alt="Description of the image">

Building a Simple Webpage Layout

Now, let's combine everything we've learned to create a basic webpage layout. We'll include a heading, a paragraph, a list, a link, and an image.

Here's the complete HTML code:

            
<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage!</h1>
    <p>This is a simple webpage created using HTML fundamentals.</p>
    <ul>
        <li>Learn HTML</li>
        <li>Practice coding</li>
        <li>Build awesome websites</li>
    </ul>
    <a href="https://www.google.com" target="_blank">Visit Google</a>
    <img src="placeholder.jpg" alt="A placeholder image">
</body>
</html>

Remember to replace "placeholder.jpg" with the actual path to an image file. Save this code as an HTML file (e.g., "index.html") and open it in your web browser to see the result. You now have a fully functional HTML page!



-/- ✔: 0, ✖: 0