Let's look at a quick word document:
Title: My First Document
Welcome to my Document!
This is a paragraph of text in my document.
It's really quite an interesting paragraph, as paragraphs go.
Here's a link to Google for more interesting content: www.google.com
Here is an image.
[IMAGE INSERTED]
Here is a list of my favorite fruits:
- Apples
- Oranges
- Bananas
Now let's make it onto a website,using HTML
<!DOCTYPE html>
<html>
<head>
<title>My First Document</title>
</head>
<body>
<h1>Welcome to my Document!</h1>
<p>This is a paragraph of text in my document.
It's really quite an interesting paragraph, as paragraphs go.
Here's a link to the <a href="http://www.google.com">Google</a> website for more interesting content.</p>
<img src="your-image-source.jpg" alt="An image in my document" />
<p>Here is a list of my favorite fruits:</p>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
</body>
</html>
Think of HTML tags as the equivalent of different elements in a Word document
Each _tag _serves a specific purpose and has a specific representation on the webpage. Let's dive in using our example:
!DOCTYPE html: This line is necessary to declare the document type and version of HTML. In this case, it's HTML5.
html: This is the root of an HTML document. Every tag that is used to display something on a webpage goes inside this tag.
-
head: This tag includes elements like the title of the document (which appears as the name of the tab in your web browser), links to stylesheets (CSS), character encoding declaration, and more. It's important to note that the content inside the
tag does not appear on the webpage itself when viewed in a browser. -
title: This tag is nested within the
tag, and is used to set the title of the webpage. body: The body tag is where the content of the webpage goes - this is what users see when they visit your webpage.
h1: This tag is used to add a top-level heading, which is usually the title of the webpage or the highest-level section title.
p: This is a paragraph tag, which is used to denote text paragraphs.
GOOGLE: This tag creates a hyperlink. The text between the opening tag and the closing tag is the text that will appear as a clickable link on your webpage. The URL of the page you want to link to is specified in the href attribute.
img: This tag is used to embed images into your webpage. The source of the image (src) points to the location of the image file, while the alt attribute provides alternative text for the image if it cannot be displayed.
ul and li : These tags are used to create unordered (bulleted) lists.
The ul tag denotes the start of the list, and each list item is wrapped in an li tag.
Top comments (0)