- Introduction
- Typography
- List, Link, Media
- Table & Form
- HTML5 Sematic Elements
- Web Accessibility
- HTML Graphics
- Projects
- HTML stands for Hyper Text Markup Language
- It is not a programming language
- HTML helps us to create the main structure of a webpage
- With the help of markup tag we can display text, image, video etc. on the webpage
- Tim Berners-Lee created HTML in 1991
- Tag is the heart of html; HTML document is mainly built with tag.
- Tag Syntax:
<keyword>
; Inside the angular brackets we need to write predefined keywords to use html tag. - Small / capital letters both can be used when writing html tag; however small letter is prefered.
- Example:
<p> This is a paragraph </p>
- In the example,
<p>
is an opening tag,</p>
is a closing tag andThis is a paragraph
is called content - In between the starting tag to end tag we have content
- Everything from starting tag to end tag is called Element
-
There are 2 types of html tag: Pair/container tag and empty tag
-
Pair tag has starting and ending; However, empty tag has no closing tag.
-
Some of the example of pair tag and empty tags are given below:
<!-- Some examples of Pair/Container Tag --> <html> ... </html> <head> ... </head> <body> ... </body> <p>...</p> <h1>...</h1> .... <!-- Some examples of Empty Tag --> <br /> <hr /> <img /> <input /> ...
- Attribute helps tag to extend its capabilities
- In the following example,
<img/>
is tag; src, height, width are the attributes<img src="anis.jpg" height="200" width="200" />
- Attribute Syntax:
attributeName="attributeValue"
-
HTML document has 2 important part: head, body
-
In the following example a basic structure of a HTML document
<!DOCTYPE html> <html> <head> TITLE, META TAG ETC. </head> <body> CONTENT OF THE WEBPAGE </body> </html>
-
Always use
<!DOCTYPE html>
to tell the browser what type of document to expect; remember it is not a tag, just a declaration -
Every HTML document must have
<html>
pair tag and Inside<html>
tag we use<head>
and<body>
as the example shows above. -
Inside head tag we use meta tag, set title etc.
-
Inside body tag we write everything that we want to display on web page.
- Editor: VScode / Notepad++ / Sublime
- Browser: Google Chrome / Firefox
- Version Control: GitHub
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
This is my first webpage <br />
I am Abdullah Numan Shakil <br />
A full stack web developer & Competitive Programmer<br />
</body>
</html>
- Here, lang attribute refers to the language; attribute value en refers to english
- Inside
<head>
tag we have set title of the webpage using<title>
tag - Inside
<body>
tag we are displaying some text. here<br/>
tag creates a line break
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Free complete html tutorials 2022" />
<meta name="keywords" content="HTML, html, html5" />
<meta name="author" content="Shakil Hossan" />
<link rel="stylesheet" href="style.css" />
<style>
body {
background-color: aquamarine;
}
</style>
<script src="index.js"></script>
<title>Document</title>
</head>
- Inside
<head>
tag we can define metadata(document title, character set, links, scripts, styles), other information that will not be visible to the users - meta tag provides information to the browsers and search engines about the webpage
<meta charset="UTF-8" />
defines the character encoding for the HTML document.<meta http-equiv="X-UA-Compatible" content="IE=edge" />
for supporting older version of IE.<meta name="viewport" content="width=device-width, initial-scale=1.0" />
defines that webpage width is related to devices width and initial zoom level is 1.<link rel="stylesheet" href="style.css">
generally connects css file to html. Inside of href attribute we give the css file name.<style> ... </style>
we can use<style> ... </style>
tag directly inside the head tag for designing html elements.<script src="index.js"></script>
generally connects js file to html. we can also use<script> ... </script>
tag directly inside the body tag.
- After writing your html code you can check the validity on this website https://validator.w3.org/