On the path of becoming a web developer, the very first step we have to put is learning HTML. HTML stands for Hyper Text Markup Language. It is the markup language for creating web pages. It tells the browser how to display content. You will learn the basic fundamental idea of HTML.To create your first HTML website,you have to use a text editor. I will recommend using Atom or Microsoft Visual studio code because it is free and easy to use with some helpful tools.
Let's start with a basic example of an HTML document.
Every HTML code must start with <!DOCTYPE html> . It represents the document type and this is a HTML5 document.
<html>: After the document type declaration, <html> element should be written.It is the root element. You might be wondering what is HTML element. An HTML element consists of a start tag, some content and a close tag.Here, the start tag <html> is at line no 2 and close tag </html> at line no 11. Here, the 'lang' attribute tells the browser the language of your website and the 'dir' attribute tells the browser the direction of the text of the content.
<head> : The <head> element contains meta information of the web page and links to CSS stylesheet should be written here. The meta charset attribute specifies the character encoding for the HTML document. It also contains the <title> element which specifies the title of the website which you can find in your browser's title bar.
<body>: This <body> element works as a container that contains all the paragraphs, headings,images, etc which is visible on the website.
<h2> : This element defines a heading.There are 6 types of heading.
<p> : This element defines paragraph.
When you run this code in your browser, you will get something like the below image.
HTML Headings : HTML headings are defined with <h1> to <h6> tags. The <h1> tag is for the most important and biggest heading. From <h1> to <h6> size decreases though you can set the size with style attribute or CSS. An example is given below to show the size difference between different heading tag.
HTML Links : HTML links are hyperlinks. You can jump to another document on clicking the link. To define a link in your HTML page, you have to use <a> tag. The href attribute specifies the URL. An example of how a link is specified on a web page is given below.
<a href = "https://google.com/" > Google </a>
HTML Images : You can add images through the <image> tag. It is a self-closing tag and it has some attributes like src and alt .The src attribute specifies the source of the image and the alt attribute specifies the alternative text to be shown when the image is not showing. An example of how to add an image to an HTML web page is given below.
<img src = "image.jpg" alt = "mountain" >
HTML Lists : HTML allows us to show list items on the page. There are two types of list - 1. unordered list 2. ordered list.
1. Unordered List : In this type of list, list items are marked with bullets. To use this type of list, you have to use <ul> tag, and to specify each list item you have to use the <li> tag.Here is an example of an unordered list.
2. Ordered List : In this type of list, list items are marked with numbers. To use the ordered list , you have to use <ol> tag, and to specify each list item you have to use the <li> tag. An example of an ordered list is given below.
There are several other topics to learn in basic HTML. Those things will be covered in the next blog. If you want to know more about those things covered in this blog, you can check the website w3schools.
Happy Learning 😃.
No comments:
Post a Comment