HTML
HTML is the combination of HyperText and Markup Language.
Hypertext means machine readable text. (Browser understand only HTML
language)
Markup means to structure it in a specific format. (A markup language is used
to define the text document within the tags which defines the structure of
webpages.)
HTML and CSS creates the static webpage.
JS provides the dynamicity or functionality to the web page.
Emmet Abbreviation
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
</body>
</html>
Shortcut for Emmet Abbreviation
html:5
shift + ! + enter
<!DOCTYPE html>
Must required code in HTML document.
Instruct the web browser about what version of HTML the page is written in.
DOCTYPE refers Document Type Definition.
(in older version the declaration is more complicated)
<html lang="en">
en refers to English language.
<head> </head>
Container of the HTML documents that contains information related to HTML
document.
Placed between <html> and <body>
<head> This section has global attributes.
<meta> Holds information for machine processing not
<title> human-readability.
<base> Contains human visible information such as
<link> top-level headings and listed-authors.
<script>
<style>
<head>
<meta> tag
Contained in HTML element
Describes the document / data about the data such as who wrote it and its
summary.
It has character set, Keywords, description, author, refresh, viewport.
<meta charset="UTF-8">
Defines the character set.
The Unicode Consortium develops the Unicode Standard. Their goal is to
replace the existing character sets with its standard Unicode Transformation
Format (UTF).
What is HTML?
Creating a reference or a link to visualize the data on the user interface
we use a technology called as HTML which can be abbreviated as Hyper Text
Markup Language and that would be the first page to rendered on to the
webpages.
Tags:
The HTML document is created using tags
Left angle bracket and Right angle bracket with tag-name.
There are two types of tags
1. Paired tags: Has opening tag and closing tag, <tag-name> </tag-name> .
Also called as Container tags
Ex: <head>, <body>,…
2. Unpaired tags: Has only opening tag, <tag-name> .
Also called as non-container tags, Empty tags, void tags.
Ex: <meta>
Basics Tags in HTML
Heading Tags: This tags creates HEADINGS in the HTML document.
All Heading tags are paired tags
There 6 Heading tag:
h1, h2,h3, h4, h5, h6
Default size of heading tags:
<h1> 2em
<h2> 1.8em
<h3> 1.7em
<h4> bold
<h5> 0.83em
<h6> 0.67em
Element: A paired tag with content is called as an Element. (or)
A opening tag and closing tag with content is called as an Element
Ex: <h1>Hello</h1>
There are two types of element
1. Inline level element: which occupies only the width of the element.
2. Block level element: which occupies the entire width of the line that is
from starting of the line to the ending of the line.
Some of the basic tags are:
Heading tags
Paragraph tag: <p> </p>
To create paragraphs.
Allows only single space between the characters.
Line breaks are not allowed.
Preformatted tag: <pre> </pre>
Prints as it is written inside this tag.
Extra spaces and line breaks are allowed.
Div tag: <div> </div>
Defines the division and section of the document.
Block level element.
Span tag: <span> </span>
Marks up the part of text or part of document.
Inline level element
Image tag: <img src= “ ” alt= “ ”>
Used to insert the image.
Src: Source that specifies the path of the image document that should be
embedded.
Alt: Alternate text for the image which is visible on the webpage, if the
image in the src cannot be displayed.
Attribute: Attribute gives the special state to the HTML element.
Or Attribute gives additional information to the HTML element.
Path
There are two types of Path.
1. Absolute Path: Directly fetching the image from the browser.
2. Relative Path: Fetch the image by a file name.
Formatting Tags
<b>, <strong>
<i>, <em>
<u>, <ins>
<mark>
<q>
<sub>
sup>
<del> (similar to strike)
<small>
<center>
<strike> Deprecated tags as we have other options in CSS.
<big>
<tt>
NOTE: All formatting tags are inline level elements.
Anchor tag: The anchor tag converts the Hypertext to HyperLink exclusively
with the href attribute.
<a>HOME</a> This command displays normal text (Hypertext)
<a href= “…link… ” >HOME</a>
NOTE:
<p href= “…link… ”>HOME</p> This command creates Hypertext not
HyperLink. As browser understandability is href= “” only with anchor tag.
To make paragraph tag as link:
<a href= “…link… ” > <p> content </p> </a>
Default color of <a> tag:
Blue not visited
Purple visited
Red active
Target attribute in <a> tag:
target = “_blank” Hosted page opens in the new tab.
target = “_self” Hosted page opens in the same tab.
Q. Difference between HyperText and HyperLink?
HyperText HyperLink
HyperText is the text that is visible on HyperLink is the text content that
the UI host other webpage on the website
HyperText can be created by the HyperLink is created with the anchor
normal basic tags. tag exclusively with the href
attribute.
Core Attributes: As the name says core means the intial or the starting point.
There are Four Core Attributes in HTML.
• Id: The value of the id attribute should be unique, where id targets only
the individual element.
• class: The same value of the class attributes is allowed. The class
attribute targets multiple element.
• title: The title attribute creates the tool tip. Tool tip is a kind of pop-up
which pops out when the cursor is placed on the targeted element
• style: The style attribute is used for styling the HTML element which is
called as inline CSS styling attribute.
Marquee tag
The <marquee> tag creates the scrolling text or image or an element in the
HTML document.
The default direction of the marquee tag is left to right.
Syntax:
< marquee behavior = "scroll" direction = "up" > Offer Fig caption offer...! <
/marquee >
Attributes of marquee tag:
behaviour = alternate, scroll, slide
specifies the behaviour of an element
direction = left, right, up, down
specifies the direction of an element
bgcolor = red, orange,…
gives the background color to the content
loop= in numbers
specifies the number of times the behavioural action is performed
scrollamount= in numbers (10) or with seconds (10s)
specifies the speed of the content
height = in pixels
gives height to the element
width = in pixels
gives width to the element.
Semantic Tags
The tags that describes its own meaning to both browser and developer.
Lists: HTML list, lists the set of related items together in the specific manner.
There are three types of Lists
1. Ordered List.
2. Unordered List.
3. Description/Definition List.
Ordered List:
Ordered List starts with the tag <ol>
Each item listed with the tag <li>
We can use three attributes in Ordered List.
• type= “A”, “a”, “I”, “i”, “1”
default value of type is Number
• start=“4”
the value of start should be Number
• reversed
Unordered List:
Unordered List starts with the tag <ul>
Each item listed with the tag <li>
Attribute of Unordered List is:
• type = “circle”, “square”, “disc”, “none”
default value of type is disc
Description List
Description List starts with the tag <dl>
Each item listed with the tags
<dt> , <dd>
• <dt> description term
• <dd> description data
By default the description data appeara with some tab space.
Table
Table is used to structure the data in the form of rows and columns.
Table starts with the tag <table>
Table datas are inserted using the tags
<tr>, <th>, <tr>
• <tr> table row
• <th> table heading
• <td> table data
We can use three attributes in table tag.
• border = “2” gives border to the table.
• cellpadding = “15px” gives space between content and border of the
cell.
• cellspacing = “10px” gives space between adjacent borders of the
cell.
cellpadding & cellspacing
cellpadding: Gives space between the content and border of the cell.
cellspacing: Gives the space between the adjacent cells.
colspan & rowspan
colspan: Merging two or more columns into a single cell.
rowspan: Merging two or more rows into a single cell.
Forms
HTML Forms is used to get the data form the user.
• In HTML Form is created using <form> tag.
• Label created using <label> tag.
• Textbox and field is created using <input> tag.
• Form is Semantic tags (every tag has meaning)
• <form> tag is the block level element.
• But all tags of form are inline level elements.
Syntax:
<form>
<label for="username">Name</label>
<input type="text" name="username" id="username">
</form>
input
To get the data from the user.
label
To tell user about the data that they should fill.
for and id
for label and id input
value should be same.
link the label and corresponding attribute.
name
acts like a container
holds the entered data (which is visible on the url, ex: username=Raj)
name attribute should have same value in the input:radio to make any
one option to be selected.
name attribute should have same value in the input:checkbox also.
value
most required attribute in the radio, checkbox, select tags.
Without using value in radio, checkbox, select tags, it take the input as
on.
Form tags:
Label
To tell user about the data that they should fill.
Paired tag
Input
To take data from the user.
Line breaks are not allowed in input.
We can use placeholder attribute for faint text.
Paired tag
Input tag has 21 types.
textarea
To take data from the user.
Line breaks are allowed in textarea.
textarea has col= “” and row= “” attribute where number of
columns and rows of the data that wanted from the user can be taken
style= “resize= none” to disable resizing the textarea by the user.
Paired tag
button
To create button
type= “submit”
type= “reset”
Paired tag
Button name should be mentioned
Validation Attributes
• Required
• Input attribute, to make the field mandatory
• Disabled
• Input attribute, to make the field disable
• <input type="text" id="fname" name="fname" value="John"
disabled>
• Placeholder
• Input attribute, for faint text
• Min Length
• <input type="text" id="pin" name="pin" minlength="4" size="4">
•
• Max Length
• <input type="text" id="pin" name="pin" maxlength="4" size="4">
Input Attributes
The min and max Attributes
The input min and max attributes specify the minimum and maximum values
for an input field.
The min and max attributes work with the following input types: number,
range, date, datetime-local, month, time and week.
Tip: Use the max and min attributes together to create a range of legal values.
Example
Set a max date, a min date, and a range of legal values:
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-
31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-
02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
The multiple Attribute
The input multiple attribute specifies that the user is allowed to enter more
than one value in an input field.
The multiple attribute works with the following input types: email, and file.
Example
A file upload field that accepts multiple values:
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
Audio Tag
The <audio> tag is used to embed sound content in a document, such as music
or other audio streams
<audio src="../HTML/calling-21139.mp3" controls></audio>
Attributes of audio tag
Video Tag
The <video> tag is used to embed video content in a document, such as a
movie clip or other video streams.
<video src="../HTML/istockphoto-1338832559-640_adpp_is.mp4"
controls></video>
Attributes of video tag
iframes
iframe is required to run a webpage inside another webpage
height and width can be given to iframe.
Not all website supports iframe because for security purpose.
<iframe src="" frameborder="0" height= “” width= “” ></iframe>
(to execute the youtube video, go to youtubeopen videosharecopy the
embed format and paste in html)
