Html full form( Hypertext Markup Language): Learn complete HTML

/ Sagar/Shanky

HTML introduction

HTML stands for HyperText Markup Language which is a markup language that is used to create a web page and markup language means a language that uses tags to define elements within a document.

With HTML you can create static pages however if you combine CSS, Javascript and HTMl together you will be able to create dynamic and more functional web pages or websites.

HTML Basic Example and HTML Syntax

Now that you have a basic idea of HTML, let’s kick off this tutorial by learning how to declare HTML Syntax. In the below HTML code:

  • <!DOCTYPE html> specific that it is a HTML5 document.
  • <html> is the root of html page.
  • <head> contains page information.
  • <title> is title of the page
  • <body> is documents body
  • <h1> is heading
  • <p> is the paragraph
<!DOCTYPE html>
<html>
<head>
<title> Page title </title>
</head>
<body>
<h1> My first heading</h1>
<p> My fist para </p>
</body>
</html>

<!DOCTYPE html>  # Document Type 
<html lang="en-US">    # Language Attribute to declare the language of the Web page
<head>
# Also <meta> element is used to specify the character set, page description, author and viewport.
<meta name="viewport" content="width=device-width, initial-scale-1.0"  # Setting the viewport which is a users visible area of a web page, initial-scale=1.0 sets the initial zoom level. 
<style>                                                     # Head element is the container of title, style, meta, link, script etc.
body{background-color: red;}                                # Internal CSS and define style information for a single HTML page
h1{ color:red; }                                            # Internal CSS
p {
  border: 2px red;                                          # Border( Border becomes more dark when pixels increased)
  padding: 30px;                                            # Padding ( Space between text and Border)
  margin: 10px;                                             # Margin (Space outside the border)
 }
a: link, a:visted, a:hover, a:active {                      # HTML Links with different with different scenerios
  text-align: center;
  color: blue;
}
.city {                                                     # Decalring the CSS for Class City
 background-color: tomato;
 color: white;
}
<link rel="stylesheet" href="styles.css">                   # External CSS and link is a 
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" # Adding the Favicon in HTML page.
</style>
</head>
<body>
<div class="city">                                          # Creating a class named city 
  <h2> Hello this is my City </h2>
</div>                                                      # Class City ends here
<!--      -->                                               # Comments in HTML 
<p style="background:red" background-image: url('a.jpg') background-repeat>...........</p>                   # Paragraph
<p><a href="#C4">Jump to Chapter 4</a>                      # Creating a Link to create a BookMark using the ID 
<h2 id="C4"> Chapter 4 </h2>                                # Creating a heading with id that will be tagged with a link to create a bookmark. ID's are unique and used only with one HTML element rather than class being used by multiple HTML elements
<a href="google.com"> This is a link</a>                    # Link
<a href="google.com" target="_blank"> This is a link</a>    # Opens the document in a new window or tab
<a href="google.com" target="_parent"> This is a link</a>   # Opens the document in parent frame
<a href="google.com" target="_top"> This is a link</a>      # Opens the document in full body of the window
<a href="google.com" target="_self"> This is a link</a>     # Opens the document in same window
<iframe src="a.html" name="iframe_a" height="10" width="10" title="Title Iframe"></iframe>   # Creating a Iframe ( An inline fram) 
<p><a href="google.com" target="iframe_a">Hello, the link will open when clicked on the link</a></p>   # Using Iframe in the link  
<ol>                                                        # Ordered List
  <li>Coffee</li>                                           # Lists
  <li>Tea</li>
</ol>
<img src="a.jpeg" alt="Image" width="2" height="2">         # Image
<img src="computer_table.jpeg" usermap="#workmap">          # Using Image Map
<map name="workmap">
   <area shape="" coords="34,44,270,350" href="computer.htm">
   <area shape="" coords="31,41,21,35"   href="phone.htm">
<map>
</body>

<script>                                                   # Creating a Javascript inside the Html Page
  function myfunc() {
  document.getElementById("C4").innerHTML = "Have a nice DAY "
  var x = document.getElementsByClassName("city");         # Using the Class city within the Javascript within a HTML Page
  for (var i = 0; i< x.length; i ++ ) {
    x[i].style.display = "none"
  }
}

</script>
</html>


<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element

Leave a comment