HTML Basics

Welcome to the lecture on HTML Basics. In this lecture, you'll dive into the core concepts of HTML and learn the fundamental structure and syntax of HTML documents. Starting from scratch, you'll gain hands-on experience in creating well-structured web pages using essential HTML tags and elements.

Desired Outcomes:

By the end of this lecture, you should be able to:

  • Understand the structure and syntax of HTML documents
  • Create a basic HTML template with the necessary elements
  • Apply essential HTML tags to structure and present content on webpages

What is HTML?

HTML, which stands for Hypertext Markup Language, is the standard markup language used in creating web pages. It is the backbone of any website and is used to format the content on the web page. HTML code ensures the proper formatting of text and images so that the internet browser can display them correctly.

Web pages created with HTML can include text, images, links, forms, audio, video, and more. HTML is not a programming language, meaning it doesn't have logic like If...Else statements or loops, it is a markup language and is used to structure content on the web.

Basic HTML Structure

In the world of web development, HTML (Hypertext Markup Language) serves as the foundation for creating web pages. 

We'll start with the essential structure of an HTML document, including the <!DOCTYPE> declaration, the <html> element, and the basic structure of <head> and <body>. You'll learn how to create a new HTML document and set it up correctly.

HTML is the backbone of every webpage, allowing us to structure and present content on the web. Let's begin by understanding the structure of an HTML document.

An HTML document starts with a <!DOCTYPE> declaration, which tells the browser the version of HTML being used. Following that, we have the <html> element, which serves as the root element of the HTML document. Inside the <html> element, we have two main sections: <head> and <body>.

The <head> section contains meta-information about the webpage, such as the title, character encoding, and external CSS or JavaScript files. The <body> section contains the visible content of the webpage that users will see and interact with.

Now that we have a basic understanding of the structure, let's create our first HTML document. Open VS Code, which we installed in the previous section and create a new folder named MyFirstWebsite and add a file named index.html. 

We'll start by setting up the basic structure of an HTML document.

<!DOCTYPE html>
<html>
   <head>
      <title>My First Webpage</title>
   </head>
   <body>
      <h1>Welcome to My First Webpage!</h1>
      <p>This is the content of my webpage.</p>
   </body>
</html>
VS Code Setup
VS Code Setup

The folder which we created (MyFirstWebsite) represents our website and the index.html page is our home page. In order to see the rendered output in the browser, navigate to the folder where index.html is located and double click it. Or right click on it inside VS Code, click Reveal in File Explorer and then double click it.

The rendered result will be as follows:

My First Webpage
My First Webpage

In the above code snippet, we have defined a simple HTML document. The <title> tag inside the <head> section sets the title of the webpage, which is displayed in the browser's title bar or tab. Inside the <body> section, we have an <h1> tag for the main heading and a <p> tag for a paragraph of text.

Now, let's explore some essential HTML tags and their usage.

  • The <h1> to <h6> tags are used for headings, with <h1> being the highest level and <h6> the lowest. They help structure the content and provide visual hierarchy.
  • The <p> tag is used for paragraphs of text. It separates blocks of text and creates readable content.
  • The <img> tag is used to insert images into web pages. It requires the src attribute to specify the image source.

Let's incorporate these tags into our HTML document:

<!DOCTYPE html>
<html>
<head>
   <title>My First Webpage</title>
</head>
<body>
   <h1>Welcome to My First Webpage!</h1>
   <p>This is the content of my webpage.</p>
   <img src="image.jpg" alt="My Image">
</body>
</html>

In the updated code, we have added an <img> tag with the src attribute pointing to an image file named "image.jpg." The alt attribute provides alternative text for the image, which is displayed if the image cannot be loaded or for accessibility purposes.

In order to show an image, make sure to put an image with the name image.jpg inside our website folder, like so:

Added image to folder structure
Added image to folder structure

Once you refresh the browser, or reopen index.html, the output will be rendered like so:

Rendered image
Rendered image

Congratulations! You have successfully created your first HTML document. 

In summary, HTML is the foundation of web development, allowing us to structure and present content on the web. By understanding the basic structure of an HTML document and using essential HTML tags, you can create well-organized and visually appealing web pages.

Take some time to experiment with different HTML tags and explore their capabilities. In the next lecture, we will delve deeper into more advanced HTML elements and their usage.

That concludes our lecture on HTML Basics. Happy coding!