HTML- HyperText Markup Language

This is a high-level course that let us understand what HTML is, part of HTML document, and the different tags used in the HTML and how to create a simple to complex web page.

What is HTML?

It is a markup language which is mainly work on content and structure/presentation of a website. The markup language used to present the web structure interpreted by the browser and create the content of the page.

Parts of HTML Document

  • Header: – The intelligent part of a website where different initialization that could server for the entire web-page initialized such as meta, title, style, scripts and many more are set for the entire web page in this section.
  • Body: – The place where different elements /content of web page are created.

Example : – 

<!DOCTYPE html>
<html>
  <head>
    <title>Your Future Tech Resource</title>
    <link rel="stylesheet" href="style.css">
    <link id="altmetric-embed-css" rel="stylesheet" type="text/css" href="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed-59614f5c46b49b21eeef3bb28c4fb38d1e7069e8d014752fcb66e84942556802.css">
    <meta name="author" content="Degu, DA">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta name="description" content="My personal website">
    <script id="altmetric-embed-js" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/altmetric_badges-26c2366af6fbe8409157ffb0e7a7fe7cd193aa7c285b244ea05f846de0b1dfd3.js"></script>
  </head>
  <body>
  </body>
</html>

Different Tags

The tags in HTML are presented in angle bracket. The angle bracket starting with opening <tagName> and followed by closing</tagName>. There are tags without a closing</tagName>. Each tags represent different part and contribute for a different presentation of a web page.

Some of the tags are the following

  • <!DOCTYPE html> is a tag that is indicating the document type is an HTML. The HTML document is labeled with this kind of tag as a standard.
  • Header for main title, sub-title, sub-section, and so on
    • <h1>Main Title </h1>
    • <h2> Sub Title <h1>
  • Division <div></div>
  • Paragraph <p> Text </p>
  • Link <a href=”link-url”>Text</a>
  • Image <img src=”fileName”, alt= “”>
  • Lists
    • <ul><li></li></ul>,
    • <ol><li></li></ol>
  • Bold <strong></strong>
  • And many more

Example : – 

<!DOCTYPE html>
<html>
  <head>
    <title>Your Future Tech Resource</title>
    <link rel="stylesheet" href="style.css">
    <link id="altmetric-embed-css" rel="stylesheet" type="text/css" href="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed-59614f5c46b49b21eeef3bb28c4fb38d1e7069e8d014752fcb66e84942556802.css">
    <meta name="author" content="Degu, DA">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta name="description" content="My personal website">
    <script id="altmetric-embed-js" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/altmetric_badges-26c2366af6fbe8409157ffb0e7a7fe7cd193aa7c285b244ea05f846de0b1dfd3.js"></script>
  </head>
  <body>
    <h1>Programming Language</h1>
   <div>
    <p>This is a course mainly discussing about the <strong>Programming</strong> language.</p>
    <p> More Access <a href="https://degutechblog.com/">Tech Blog</a> </p>
   </div>
   <h2> List of Programming Language</h2>
   <ol>
    <li>C++</li>
    <li>Java</li>
    <li>C#</li>
   </ol>
  </body>
</html>
Pages: 1 2
Scroll to Top