HTML(Hypertext Markup Language)
HTML
Hyper text markup Language
HTML is the code that is used to structure a web page and its Content
The Component used to design the structure of websites are called HTML TAG
HTML Boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="index.js"></script>
</body>
Quick Point
HTML tag is parent of head and body tag
Most of html element have opening and closing tags with content in between
Some tags have no content in between, eg -<br>
We can use inspect element/view page source to edit html
Comment in HTML
• This is part of code that should not be parsed
<!- -This is an HTML Comment- ->
<!--function displayMsg()alert("Hello World!")}//-->
Heading Tag
Users often skim a page by its headings. It is important to use headings to show the document structure. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3> , and so on.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Anchor Tag
Used to add link to your page
<a href="https://www.growwwithcode.com">Visit Growwwithcode.com!</a>
Image Tag
Used to add images to your page
<img src="img_girl.jpg" alt="Girl in ajacket" width="500" height="600">
Br Tag
Used to add next line (line breaks) to your page
<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>
Bold, Italic and Underline Tag
Used to highlight text in your page
Hr Tag
<h1>The Main Languages of the Web</h1>
<p>HTML is the how to display the content.</p>
</hr>
<p>CSS is a language that all at once.</p>
Subscript and Superscript tag
here are times when we would like to use characters that are a half a character below or above the set text. Subscripts are characters that are set half a character below the text. Superscripts are characters that are set half a character above the text.In a real-world setting, we use these characters when we’re using math equations, chemical equations, citations or footnotes, for example.
<p>This text contains <sub>subscript</sub> text.</p>
<p>This text contains <sup>superscript</sup> text.</p>
Span Tag
Span is also a container used for other HTML element Inline Element
(takes width as per size)
LIST In HTML
Lists are used to represent real life list data.
Unordered ordered
<ul> <ol>
<li>Apple</li> <li>Apple</li>
</ul> </ol>
Table In HTML
Tables are used to represent real life table data
<tr> Used to display table row
<td> used to display table data
<th> used to display table header
Form in HTML
Forms are used to collect data from the user
Eg- sign up/login/help requests/contact me
<form>
Form content
</form>
Action in form
Action attribute is used to define what action need to be performed when a form is submitted
<form action=”/action.PHP”>
From Element : Input
<input type=”text ”Placeholder=”Enter Name”>
Class and ID
<div id =”id1”class=”group1”> </div>
<div id = “id2” class= “group2”> </div>
Checkbox
<lable for=”id1”>
<input type =”checkbox”value+”classX”name=”class” id=”id1”> </lable>
Video tag
<video src=”myvid.mp4”>my video</video>
Attribut
controls
height
width
autoplay
