WINSEM2022-23 BITE304L TH VL2022230501642 Reference Material I 12-12-2022 HTML

Hyper Text Markup Language HTML
HTML
It is a markup language used for developing web pages
Used for structuring and presenting the content for
WWW.
It was introduced in 1991 by Tim Berners- Lee
It is standardized by W3C.
HTML 5 is the current version
2 01/17/2023
HTML Format
<HTML>
<HEAD>
<TITLE> My First Page </TITLE>
</HEAD>
<BODY>
<h1>VIT UNIVERSITY</h1>
School of Information Technology and Engineering
</BODY>
</HTML>
3 01/17/2023
HTML Format
• Meta
Head
Information
• Text and
Body
other tags
4 01/17/2023
HTML BASICS
Tags
<tag>content</tag>
<i> Hello </i>
Elements
Opening tag ,its corresponding closing tag, and its
content together is called an element.
Attributes
Properties of the element that give additional info
Name=value
<body bgcolor=“blue”>
5 01/17/2023
HTML BASICS
HTML tags are case-insensitive
Tags must be properly nested
Paired tags – which has closing tags
Standalone tags – which doesn’t have closing tag (ex:
<hr>)
Elements
<html> is the root element
Attributes
Attributes are placed within the starting tag
Attribute value should be specified in double quotation
marks
6 01/17/2023
HEAD Tags
Tags Meaning
<title> </title> Appears in the title bar of the web
page
<style></style> Links or inserts a style sheet

<link> Makes a link to an external source
<script> </script> Contains scripts like javascript or

vbscript
<meta> Used to specify document properties
<base> Specifies base url of the document
7 01/17/2023
<meta charset="UTF-8">
 <meta name="description" content="Web
technologies course ">
 <meta name="keywords" content="HTML, CSS,
JavaScript">
 <meta name="author" content="">
 <meta name="viewport" content="width=device-
width, initial-scale=1.0">
8 01/17/2023
Common HTML Tags
<body> tag
Attributes:
 bgcolor – specifies the color of the background
 Background – to set an image as background
Paragraph tag
<p> This is a paragraph </p>
Attributes : align={ center, left, right or justify}
Line breaks
<br> - standalone tag
Horizontal line
<hr> - standalone tag
9 01/17/2023
Formatting tags
Tag Meaning
<font face=“arial” size=“2” Changing style of a specific text
color=“blue”> Web Tech</font>
<b> VIT University </b> Bold text
<i>Hello </i> Italic text
<u>SITE </u> Underlined text
<em>Hello </em> Same as italics
<strong> VIT Same as bold
University</strong>
10<sub>2 </sub> Subscript
10<sup>2</sup> Superscript
10 01/17/2023
Heading tags
Tag Meaning
<H1 ...> text</H1> largest of the six
<H2 ...> text </H2>
<H3 ...> text </H3>
<H4 ...> text </H4>
<H5 ...> text </H5>
<H6 ...> text </H6> smallest of the six
Attributes
Align Center,left,justify,right
11 01/17/2023
Headings
<HTML>
<HEAD>
<TITLE>Headings</TITLE>
</HEAD>
<BODY>
Samples of the six heading types:
<H1>Level-1 (H1)</H1>
<H2 ALIGN="center">Level-2 (H2)</H2>
<H3><U>Level-3 (H3)</U></H3>
<H4 ALIGN="right">Level-4 (H4)</H4>
<H5>Level-5 (H5)</H5>
<H6>Level-6 (H6)</H6>
</BODY>
</HTML>
12 01/17/2023
<PRE> Preformatted Text
<PRE>
if (a < b) {
a++;
b = c * d;
}
else {
a--;
b = (b-1)/2;
}
</PRE>
13 01/17/2023
Special Characters
Character Use
< <
> >
& &
" "
Space
14 01/17/2023
Colors
Values for BGCOLOR and COLOR
many are predefined (red, blue, green, ...)
all colors can be specified as a six character hexadecimal
value: RRGGBB
FF0000 – red
888888 – gray
004400 – dark green
FFFF00 – yellow
15 01/17/2023
Fonts
<FONT COLOR="red" SIZE="2" FACE="Times Roman">
This is the text of line one </FONT>
<FONT COLOR="green" SIZE="4" FACE="Arial">
Line two contains this text </FONT>
<FONT COLOR="blue" SIZE="6" FACE="Courier"
The third line has this additional text </FONT>
16 01/17/2023
Note: <FONT> is now deprecated in favor of CSS.
Physical Character Styles
<H1>Physical Character Styles</H1>
<B>Bold</B><BR>
<I>Italic</I><BR>
<TT>Teletype (Monospaced)</TT><BR>
<U>Underlined</U><BR>
Subscripts: f<SUB>0</SUB> +
f<SUB>1</SUB><BR>
Superscripts: x<SUP>2</SUP> +
y<SUP>2</SUP><BR>
<SMALL>Smaller</SMALL><BR>
<BIG>Bigger</BIG><BR>
<STRIKE>Strike Through</STRIKE><BR>
<B><I>Bold Italic</I></B><BR>
<BIG><TT>Big Monospaced</TT></BIG><BR>
<SMALL><I>Small Italic</I></SMALL><BR>
<FONT COLOR="GRAY">Gray</FONT><BR>
<DEL>Delete</DEL><BR>
<INS>Insert</INS><BR>
17 01/17/2023
Logical
Character
Styles
<H1>Logical Character Styles</H1>
<EM>Emphasized</EM><BR>
<STRONG>Strongly Emphasized</STRONG><BR>
<CODE>Code</CODE><BR>
<SAMP>Sample Output</SAMP><BR>
<KBD>Keyboard Text</KBD><BR>
<DFN>Definition</DFN><BR>
<VAR>Variable</VAR><BR>
<CITE>Citation</CITE><BR>
<EM><CODE>Emphasized Code</CODE></EM><BR>
<FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR>
<ACRONYM TITLE="Java Development Kit">JDK Acronym</ACRONYM>
18 01/17/2023
Lists <ol type=“a”>
1. Ordered Lists <li>HTML</li>
• 1,2,3 (Default) <li>XML</li>
• A,B,C <li>CSS</li>
• a,b,c </ol>
• i,ii,iii
• I,II,III <ul type=“disc”>
2. Unordered Lists <li>OS</li>
• Disc <li>WT</li>
• Square </ul>
• Circle <dl>
3. Definition Lists <dt>OS</dt>
<dd>Operating System</dd>
</dl>
19 01/17/2023
Ordered (Numbered) Lists
<OL TYPE="1">
<LI> Item one </LI>
<LI> Item two </LI>
<OL TYPE="I" >
<LI> Sublist item one </LI>
<LI> Sublist item two </LI>
<OL TYPE="i">
<LI> Sub-sublist item one </LI>
<LI> Sub-sublist item two </LI>
</OL>
</OL>
</OL>
20 01/17/2023
Unordered (Bulleted) Lists
<UL TYPE="disc">
<LI> One </LI>
<LI> Two </LI>
<UL TYPE="circle">
<LI> Three </LI>
<LI> Four </LI>
<UL TYPE="square">
<LI> Five </LI>
<LI> Six </LI>
</UL>
</UL>
</UL>
21 01/17/2023
<A> Anchors (HyperLinks)
Link to a new page:
<A HREF=“www.google.com">Click to search </A>
Open link in a new window:
<A HREF=www.google.com target=“_blank”>Click to search
</A>
Named Anchors(Linking to the same page)
Link to the same page:
<A HREF="#refer"> Click here to go reference </A>
Naming a section:
<A name=“refer">This is the reference part of this page</A>
22 01/17/2023
Images
 <img src=“flowers.jpg" align="left" width="150" height="150"
alt=“flowerpicture">
 SRC is required
 WIDTH, HEIGHT may be in units of pixels or percentage of page or frame
 WIDTH="357"
 HEIGHT="50%"
 Images scale to fit the space allowed
 ALIGN ( left,right,middle,top)
 ALT used to display alternate text if the browser doesn’t support the image.
23 01/17/2023
Tables
<table border=“1”>
<tr>
<th>Name</th>
<th>Reg.No</th>
</tr>
<tr>
<td>Abhi</td>
<td>BIT001</td>
</tr>
<tr>
<td>Arjun</td>
<td>BIT002</td>
</tr>
</table>
24 01/17/2023
<TABLE> Element Attributes
 ALIGN=position -- left, center, right for table

 BORDER=number -- width in pixels of border (including any cell
spacing, default 0)
 CELLSPACING=number -- spacing in pixels between cells, default
about 3
 CELLPADDING=number -- space in pixels between cell border
and table element, default about 1
 WIDTH=number[%]-- width in pixels or percentage of page/frame
width
25 01/17/2023
Cell spacing and cell padding
cellspacing=10
cellpadding=10
26 01/17/2023
<TR> Table Row Attributes
Valid for the table row:

ALIGN -- left, center, right
VALIGN -- top, middle, bottom
BGCOLOR -- background color
<TABLE ALIGN="center" WIDTH="300" HEIGHT="200">

<TR ALIGN="left" VALIGN="top" BGCOLOR="red"><TD>One</TD><TD>Two</TD>
<TR ALIGN="center" VALIGN="middle" BGCOLOR="lightblue"><TD>Three</TD><TD>Four</TD>
<TR ALIGN="right" VALIGN="bottom" BGCOLOR="yellow"><TD>Five</TD><TD>Six</TD>
</TABLE>
27 01/17/2023
<TD> Table Cell Attributes
colspan -- how many columns this cell occupies
rowspan – how many rows this cell occupies
<html>
<body>
<table border=1>
<tr><th>First Name</th>
 <th>Last Name</th>
 <th>Batch</th> </tr>
<tr> <td>Aditya</td>
 <td> Chopra</td>
 <td rowspan="2">Batch 1 </td></tr>
<tr><td colspan="2">Arjun</td></tr>
<tr><td>Vipin</td>
 <td>Goel</td>
 <td>Batch 2 </td></tr>
28</table> 01/17/2023
Division and Span
Div tag Span tag
Block level HTML Same as divisions
element to define except that it is an inline
sections of a HTML HTML element
document No line break is created
Can contain other <span>content </span>
HTML elements such as
divisions,images,spans,t
ext,etc.,
<div> </div>
29 01/17/2023
Block and Inline elements
Block Level Elements
Define how elements are displayed
Block level elements add space before and after the
element
Starts in a new line and adds line break at the end
Takes the full width
Ex: <p>, <table>, <form>,<div>
30 01/17/2023
Block and Inline elements
Inline Elements
Inline elements display as part of line
No new lines are added . No line breaks
Takes only required space
Ex: <a>, <img>, <em>,<span>
31 01/17/2023
Forms
It is required to get user input to facilitate user
interaction in webpage like,
Registration form
Login page
To provide Contact details
To give feedback
To filter content
Search boxes
File upload
This is achieved using Form elements in HTML
32 01/17/2023
Form elements
Text boxes
Radio buttons
Checkboxes
Drop downs
Text areas
Buttons
33 01/17/2023
34 01/17/2023
Form element
The <form> is a block-level element that defines an
interactive part of a webpage.
All the form elements like <input>, <textarea> or
<button> must appear within a <form> element.
35 01/17/2023
Form Attributes
action contains an address that defines where
the form information will be sent – required
method can be either GET or POST and
defines how the form information will be sent –
required
36 01/17/2023
Difference between Get and Post
GET POST
Appends the form data Appends the form data
to the URL as inside the body of the
name/value pairs HTTP request
submitted form data is the submitted form data is
visible in the URL not visible in the URL
URL length is limited POST has no size
(2048 characters) limitations, and can be
Ideal for non-secure used to send large
data, like query strings amounts of data.
in Google Ideal for sensitive
37 information 01/17/2023
Form element attributes
Action Specifies where to send the form-data when a form is
submitted
Method Specifies the HTTP method to use when sending form-
data(GET/POST)
Name Specifies the name of the form
Target Specifies where to display the response that is received
after submitting the form
Novalidate Specifies that the form should not be validated when
submitted
Autocomplete Specifies whether a form should have autocomplete on
or off
accept-charset Specifies the character encodings used for form
submission
enctype Specifies how the form-data should be encoded when
38
submitting it to the server (only for method="post")
01/17/2023
Form Elements
<input> - Input from user through textbox
<label> - Name associated with form elements
<select> - Drop down boxes
<textarea> -
<button> -
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>
39 01/17/2023
Form - <input > element
Input tag is used for the user to enter data in the form of
textbox, radio button, checkbox etc.
It is a standalone tag
Depending on the type attribute it can be used in different
ways
Type attribute can have the following values
• Button
• Text
• File
• Password
• Image
• Hidden
• Email
• Radio
• Color
• Checkbox
• Date
• Submit
• Datetime
• Reset
• Search
40 01/17/2023
Form - <label > element
Label refers to a name associated with various for elements
for attribute should be the value of id attribute of the input
element to bind label and input element
<form name="regform" action="/registration"
method="get">
<h1>Personal Details</h1>
<label for=“name”> NAME : </label>
<input type="text" id="name" name="name">
</form>
41 01/17/2023
Form - <input tag>
Other attributes of Input tag
• Id
• Name
• Value
• Readonly
• Disabled
• Placeholder
• Required
• Size
• Maxlength
• Autocomplete
• Autofocus
• Min, max
• Multiple
42 01/17/2023
Form – Text boxes
Textboxes are created using <input type=“text”>
<form name="regform" action="/registration" method="get">

Name <input type="text" id="name" name="name">
</form>
43 01/17/2023
Form – Password
Textboxes for password are created using <input
type=“password”>
Same as text box , but the entered text is masked, either
appears
<form as asterisks oraction="/registration"
name="regform" dots method="get">
Password <input type=“password” id=“pwd” name=“pwd”>
</form>
44 01/17/2023
Form – Submit
This element creates a submit button, which on click
submits the data to the value in the action attribute
specified in form element
The text
<form on submit can
name="regform" be changed using value
action="/registration" attribute
method="get">
<input type=“submit” value=“Submit”>
</form>
45 01/17/2023
Form – Reset
This element creates a reset button which on click clears
the values entered in the form
If value attribute is not present, default value is
taken( Reset)
Name <input type="text" id="name" name="name"><br>
<input type=“reset” value=“Clear”>
</form>
46 01/17/2023
Form – Radio button
It allows the user to select any ONE of the choices
Value attribute is required to send the value while
submitting
<form form. Name
name="regform" attribute should have same value
action="/registration“>
for all choices
Name <input type="text" id="name" name="name"><br>
Gender <input type="radio" name="gender" value="male">
Male
<input type="radio" name="gender" value="female">
Female
</form>
47 01/17/2023
Form – Checkbox
It allows the user to select any ZERO or MORE of the
choices
Name attribute should have same value for all the choices
Value attribute is required to send the value while
<form ….. form
submitting
Hobbies <input type=“checkbox" name=“hobby"
value=“chess"> Playing Chess
<input type=“checkbox" name=“hobby" value=“read">
Reading Books
…
</form>
Checked attribute is used for default check

48 01/17/2023
Form – Button
This element creates a button with the text in value
attribute
This is used with OnClick() javascript function for an
event to occur
Same as text box , but the entered text is masked, either
appears
Name as asterisks
<input or id="name"
type="text" dots name="name"><br>
<input type="button" value="Click">
</form>
49 01/17/2023
Form – Hidden
These are elements which are not visible to the user, but
will be sent as name, value pair in HTTP request
<form name="regform" action="/registration" method="get">

Same as text box , but the entered text is masked, either
appears as asterisks or dots
<input type="hidden" id=“hname" name=“hname" value=“He
llo">
<input type=“submit”>
</form>
50 01/17/2023
Form – Date, date-time, month
Date picker can be added using this type
Min and Max attribute is applicable to this type
<form name="regform"
Name <input type="text"
id="name" name="name">
Date : <input type="date"
name="dob">
<input type=“submit”>
</form>
51 01/17/2023
Form – Number , Range,
Number, Range
Step, Min and Max attribute is applicable to this type
Age: <input type=“number"
name=“age“ min=“21” max=“40”>
<input type=“submit”
name=“Login”>
<input type=“reset” name=“Clear”>
</form>
52 01/17/2023
Form – Image
To use image as submit button
Age: <input type="image"
src="images/arrow.png"
width="50px" height="50px" >
</form>
53 01/17/2023
Form – File upload
To
Age: <input type="image"
src="images/arrow.png"
width="50px" height="50px" >
</form>
54 01/17/2023

WINSEM2022-23 BITE304L TH VL2022230501642 Reference Material I 12-12-2022 HTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WINSEM2022-23 BITE304L TH VL2022230501642 Reference Material I 12-12-2022 HTML

Uploaded by

Copyright:

Available Formats

Hyper Text Markup Language HTML

<style></style> Links or inserts a style sheet

<script> </script> Contains scripts like javascript or

<meta> Used to specify document properties

<base> Specifies base url of the document

 ALIGN=position -- left, center, right for table

Valid for the table row:

<TABLE ALIGN="center" WIDTH="300" HEIGHT="200">

<form name="regform" action="/registration" method="get">

Checked attribute is used for default check

<form name="regform" action="/registration" method="get">

You might also like