Thursday 30 March 2023

HTML Tags, Elements, and Attributes


HTML consists of tags, elements, and attributes.

Tags:
Tags are used to define the structure and content of the web page. They are placed around the content they apply to and indicate what that content is. Tags are enclosed in angle brackets <>. Some examples of tags are:

  • <html>: This tag indicates the start of an HTML document.
  • <h1>: This tag is used to create a top-level heading.
  • <p>: This tag is used to create a paragraph.

Elements:
An element is a combination of one or more tags that work together to create a particular function or feature. An element can be made up of one or more tags and the content between them. Some examples of elements are:

  • <html></html>: This element contains all the HTML content of a webpage.
  • <h1>Welcome to my website</h1>: This element contains a top-level heading with the text "Welcome to my website".
  • <p>Some text here</p>: This element contains a paragraph with the text "Some text here".

Attributes:
Attributes provide additional information about an element, and they are used to modify the behavior or appearance of that element. Attributes are added to the opening tag of an element and are written as name-value pairs separated by an equals sign. Some examples of attributes are:

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

  • This element contains a hyperlink with the text "Example" and the href attribute specifies the URL that the link should go to.

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

  • This element is an image with the src attribute specifying the location of the image file, and the alt attribute providing a description of the image for accessibility purposes.

So, in summary, tags define the type of content while elements are the combination of one or more tags and their content. Attributes provide additional information about an element, modifying its behavior or appearance.

Here's an example of how tags, elements, and attributes can be used together in HTML code:

<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>This is some text on my webpage.</p>
<a href="https://creative-codz-html.blogspot.com/2023/03/
introduction-to-html.html">Click here to go to Blog</a>
<img src="frozen.jpg" alt="Frozen image">
</body>
</html>

output


Here I have given blog link, whenever we click on the link it will navigate to the blog.

Projects

1. Create a webpage about your favorite place
Create a webpage about your favorite place using appropriate HTML tags to structure the content. Include at least one heading, paragraph, image, and link, and use comments to explain your code.

Question: Identify and list all the HTML tags, elements, and attributes used in the webpage you created.

2. Create a webpage about your favorite movie
Create a webpage about your favorite movie using appropriate HTML tags to structure the content. Include at least one heading, paragraph, image, and link, and use comments to explain your code.

Question: Identify and list all the HTML tags, elements, and attributes used in the webpage you created.

3. Create a webpage about a hobby
Create a webpage about a hobby that you enjoy using appropriate HTML tags to structure the content. Include at least one heading, paragraph, image, and link, and use comments to explain your code.

Question: Identify and list all the HTML tags, elements, and attributes used in the webpage you created.

4. Create a webpage about your favorite book
Create a webpage about your favorite book using appropriate HTML tags to structure the content. Include at least one heading, paragraph, image, and link, and use comments to explain your code.

Question: Identify and list all the HTML tags, elements, and attributes used in the webpage you created.

Happy Coding!

No comments:

Post a Comment

HTML Text Formatting

<i> - This tag is used to italicize text, meaning the text enclosed within <i> tags will be rendered in italic font style. How...