Hello Friends ………… !
Welcome to our website https://skilltut.blogspot.com in which we are providing various 'tutorials' with the best of our knowldge. And Today from in this Post we will be starting our Complete HTML Tutorial from begining and the method of using the same.
Introduction
'HTML (Hypertext Markup Language)' is a language for publishing text-based and multimedia information on the 'World Wide Web'. It serves as the foundation for creating web pages, which in turn form the basis of websites. Let's dive into the essentials of HTML:
What is HTML?
- 'HTML' stands for 'Hyper Text Markup Language'.
- It combines 'hypertext' (which defines links between web pages) with 'markup language' (used to structure text documents within tags).
- HTML elements label different pieces of content, such as headings, paragraphs, links, and more.
Basic Structure of an HTML Document :
- An HTML document typically starts with a 'DOCTYPE declaration' specifying that it's an 'HTML5 document'.
- The `<html>` element serves as the 'root element' of the page.
- Within the `<html>` element:
- The `<head>` section contains meta information about the page.
- The `<title>` element specifies the title displayed in the browser's title bar or tab.
- The `<body>` element contains all visible content (headings, paragraphs, images, links, etc.).
Example of a Simple HTML Document :
html 🈁 
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Elements :
An HTML element consists of a 'start tag', content, and an 'end tag' :
Syntax ✍️
<tagname> Content goes here... </tagname>
For instance:
html 🈁
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Web Browsers and HTML :
Web browsers (such as Chrome, Edge, Firefox, and Safari) read HTML documents and display them correctly. Browsers use HTML tags to determine how to render the content.
Brief History of HTML :
- In the late 1980s, physicist 'Tim Berners-Lee' proposed an internet-based hypertext system.
- Tim is known as the 'father of HTML'.
- The first available description of HTML was a document called "HTML Tags" proposed by Tim in late 1991.
- The latest version is **HTML5**, which we'll explore later in this tutorial.
History of HTML from 1989 to 2014 :
- 1989 : Tim Berners-Lee invented the World Wide Web.
- 1991 : Tim Berners-Lee introduced HTML.
- 1993 : Dave Raggett drafted HTML+.
- 1995 : HTML Working Group defined HTML 2.0.
- 1997 : W3C Recommendation: HTML 3.2.
- 1999 : W3C Recommendation: HTML 4.01.
- 2000 : W3C Recommendation: XHTML 1.0.
- 2008 : WHATWG HTML5 First Public Draft.
- 2014 : W3C Recommendation: HTML5 (latest standard).
Example html
html 🈁
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text on my website.</p>
</body>
</html>
output 📌
Welcome to My Website
This is a paragraph of text on my website.
Try It....🆓
You are invited to explore our user friendly simple code editor and executor by clicking on the ' 👉 Try It Button ' to access the above code. Subsequently, you can do experiment by the changing the value of the aforementioned HTML codes and observing the corresponding output of the same.
HTML Tags
HTML tags are the building blocks of an HTML document. They are used to create elements such as headings, paragraphs, links, images, and more. Tags are enclosed in angle brackets (< and >), and most tags come in pairs: an opening tag and a closing tag.
Common HTML Tags
- '<h1>' to '<h6> :' Define HTML headings.
- '<p>' : Defines a paragraph.
- '<a>' : Defines a hyperlink.
- '<img>' : Defines an image.
- '<div>' : Defines a division or section.
- '<span>' : Defines a small section or container.
Example html
html 🈁
<html>
<head>
<title>HTML Tags Example</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph with a <a href="https://skilltut.blogspot.com/2024/12/html-anchor-tags-comprehensive-guide-attributes.html">link</a>.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5iwuZU7z-yCttLZMo3qZRoWwrF6S3aRpt0h3__jp80N7LxFH0WkHU6BVqelBk_ckqB5zZjSNMD6sg2gbganbMxZhUYH9XsuV7aMQ29JlhMd07ErbkRJbrO75Fc3Mpzh8Kd-58O0s_c73Jp8t97fhhOP499_YYk0ONAmsIEOUX2Hqx3zIh5oa3Gnc_CgE/s1600/garden.jpg" alt="Example Image">
<div>
<span>This is a span inside a div.</span>
</div>
</body>
</html>
output 📌
Main Heading
Subheading
This is a paragraph with a link.
Try It....🆓
You are invited to explore our user friendly simple code editor and executor by clicking on the ' 👉 Try It Button ' to access the above code. Subsequently, you can do experiment by the changing the value of the aforementioned HTML codes and observing the corresponding output of the same.
HTML Attributes
'attributes' provide additional information about HTML elements. They are always included in the opening tag and usually come in name/value pairs like name="value".
Common HTML Attributes
- 'href' : Specifies the URL of a 'link'.
- 'src' : Specifies the source of an 'image'.
- 'alt' : Provides alternative text for an 'image'.
- 'id' : Assigns a unique identifier to an element.
- 'class' : Assigns one or more class names to an element.
Example html
html 🈁
<html>
<head>
<title>HTML Attributes Example</title>
</head>
<body>
<h1 id="main-heading">Main Heading</h1>
<p class="text">This is a paragraph with a <a href="https://www.example.com" target="_blank">link</a>.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5iwuZU7z-yCttLZMo3qZRoWwrF6S3aRpt0h3__jp80N7LxFH0WkHU6BVqelBk_ckqB5zZjSNMD6sg2gbganbMxZhUYH9XsuV7aMQ29JlhMd07ErbkRJbrO75Fc3Mpzh8Kd-58O0s_c73Jp8t97fhhOP499_YYk0ONAmsIEOUX2Hqx3zIh5oa3Gnc_CgE/s1600/garden.jpg" alt="Example Image" width="300" height="200">
</body>
</html>
output 📌
Try It....🆓
You are invited to explore our user friendly simple code editor and executor by clicking on the ' 👉 Try It Button ' to access the above code. Subsequently, you can do experiment by the changing the value of the aforementioned HTML codes and observing the corresponding output of the same.
Conclusion
HTML is the backbone of web development and understanding its structure, tags, and attributes is essential for creating web pages. By mastering HTML, you can build the foundation for more advanced web development skills. Keep practicing and experimenting with different HTML elements to enhance your web development skills.
Thank you for taking your time 🕟 to read 📘 our above post 🏤 and we appreciate 🙏 for the same. We sincerely hope 🙏 that you have found the same satisfactorily and we 👩👩👦👦 warmly welcome you to visit our website 🌐 again in the near future 📡 soon.
─── ⋆⋅☆⋅⋆ ───
No comments: