Scribd
Upload
6 views

unit-2_HTML (2)

Uploaded by

priyanshikumrawat2004
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

unit-2_HTML (2)

Uploaded by

priyanshikumrawat2004
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 52

UNIT-II

HTML

HTML :BASICS OF HTML, FORMATTING AND FONTS,


COMMENTING CODE, COLOR, HYPERLINK, LISTS, TABLES,
IMAGES, FORMS, XHTML, META TAGS, CHARACTER ENTITIES,
FRAMES AND FRAME SETS, BROWSER ARCHITECTURE AND
WEB SITE STRUCTURE. OVERVIEW AND FEATURES OF HTML5
HTML(CLIENT SIDE SCRIPTING)
 HTML stands for Hyper Text Markup Language.
 Most Documents/webpages that appear on WWW are written in
HTML.
 HTML is a markup language, not a programming language.
Markup language is a set of tags.(this language can only be used
for formatting the content)
 HTML documents are written using html<tags>.
 We can use this language to display text, images, sound & movie
files, & almost any other type of electronic information on
webpage.
 We can use HTML to format documents & link them together.
 Extension of HTML file is .html or .htm.
STRUCTURE OF HTML PROGRAM/WEBPAGE

 <html>
 <head>
 <title> </title>
 </head>
 <body>

 </body>

 </html>
HTML ELEMENTS
 An element of HTML consists of 3 basic parts :
 Opening tag
 Content tag
 Closing tag.
 <p>--------------
 Element Content
 </p>------------
 Every webpage requires 4 elements
 html element<html>
 head element<head>
 title element<title>
 body element<body>
(i) <html> Element:
 It begins & ends each & every webpage.
<html>-----</html>
 Its purpose is to encapsulate all the HTML code & describe the
HTML document to the web browser.
(ii) <head> Element:
 The head function “behind the scenes”. Tags placed within the
head element are not directly displayed by web browser.
 It falls between<html> tag & <body> tag
 <title element> is placed inside <head> tag.
 Other elements like javascript (scripting language) & CSS
(formatting)also placed within <head> element.
TAGS USED INSIDE<HEAD>

o <title>……..</title>
 It will show title at the top of the web browser.
o <! Doctype html 4.0>
 It is a comment which tells about html version.
o <link>
 It makes a link between an external source &.html file.
o <script language=“javascript”>
o <script type=“text/CSS”>
o <script type=“text/javascript”>
 It contains script such as java script or vbscript.
o <meta>
 <meta name=“author” content=“MITUjjain”>
 It gives the information about web page.
o <base>
 It specifies the base URL of the document.
(iii) <title> element
 It is used to give title to your web page.
 The words written between opening & closing <title> </title> tags
will be displayed at the top of a viewers browser.
(iv) <body> element
The body is where all contents is placed like paragraph, pictures, tables
etc.
It will encapsulate all of your webpage’s viewable content.
HTML TAGS
 Every web page is actually a html file.
 Each html file is just a plain-text file, but with a .html file
extension instead of .txt.
 HTMl file is made up of many HTML as well as the content of
a webpage.
 A website will often contain html files that link to each other.
 HTML tags are the hidden keywords within a webpage that
define how your web browser must format & display the
content.
 Most tags have two parts, an opening part & a closing part,
Ex: <head>---------</head>, <p>---------</p>
 Some tags have no closing part.
 Example:<img> tag.
 Some tags are essential in every HTML file, so that web
browsers can understand it & display it correctly.
 The rest of the HTML file can contain any number of tags you
want to use.
 Web developer uses the html tags to create the web page & web
browser is used to interpret tags & display the information.
DIFFERENT HTML TAGS
Tags Description
<html>----</html> Declares the web page to be written in
HTML.
<head>-----</head> Defines a header for a document.
<title>----</title> Defines the title of a web page.(seen in
web browser.)
<body>-----</body> Defines the document ‘s body.
<hn>--------</hn> <h1>(large)to<h6> (small)tags are
used to define html headings.
<b>-------</b> Define bold text
<i>-------</i> Define italic text
<center>-------</center> It is used to set the content in to the
center.
<ul>--------</ul> It is used to list the content without
order.
<ol>-----</ol> It is used to list the content in a
particular order.
Tags Description
<li>-----</li> It is used to list the contents.
<br> Forces a line break (single)
<p> Starts a paragraph
<hr> Inserts a horizontal line.
<img src=“----”> Displays an image here
<a href=“-----”>-----</a> Defines hyperlink.
<table> Defines a table.
<!---- > Defines a comment (not visible in
browser)
<marquee>-------</marquee> It is used to scroll the text or image
content.
<font>------</font> It is used to specify the font size, font
color & font in html document.
<link> It is used to link the content from
external source.
<meta> It is used to specify the page
description.
HTML TABLE TAG

 <table>------</table> tag represents an HTML table.


 <th>--------</th> tag is used to add a column heading in a
column
 <tr>--------</tr> tags represents a row in the table.
 <td>------</td> tags are used to add data value in the column.
 How to create table with border in HTML?
Ans. <table border=“1”>
How to align HTML in table?
Ans: <table align=“center”>
<table align=“right>
How to Align table content in HTML?
Ans. <td align=“center”>name</td>
How to set table width in HTML.
Ans. <table width=“80%”>
How to change table background color in HTML?
Ans.<table bgcolor=“grey”>
How to change table cell color in html.
If you set color in particular row
<tr bgcolor=“pink”>
Particular cell
<td bgcolor=“light blue”>
For particular heading
<th bgcolor=“grey”>
 Cell-Padding: In a table a space between border & text we
use cell padding.
 <table cellpadding=“7”>
 Cell-Spacing: In table space create between the cells we use
cell spacing.
 <table cellspacing=“6”>
 Spanning Row in HTML table: Two rows can be merged in
to single row.
 <th rowspan=“4”>name and rollno and marks</th>
 <td rowspan=“2”>66</td>
 Spanning Column in HTML table:Merging the columns.
 <th>StudentDetails</th>
 <th colspan=“3”>StudentDetails</th>
LIST IN HTML
There are three types of lists in HTML:
(1) Unordered List.(bullets)
(2) Ordered List.(Numbers)
(3) Definition List.(dictionary).
(4) Unordered List: <ul> tag is used to begin unordered
list(bulleted list).
There are three types of bullets- Square, Disc & Circle.
Default bullet displayed by most web browsers is full disc.
<li> tag is used to create list items.
2. Ordered List: An ordered list displays a list of item using
numbers or letters in either ascending or descending order.
<ol>----</ol> tag is used to define an ordered list.
<li>----<li> tag is used to define an item of list.
It created numbered list.
We can start ordered list by any number by using start attribute
<ol start=“5”.
There are 4 other types of ordered lists, type attributes is used to
change numbering.
<ol type=“a”> <ol type=“i”>
<ol type=“A”> <ol type=“I”>
3. Definition List: It is used to make definition lists are seen in
dictionaries using <dl> tag.
A definition list is a list of terms, with a definition of each term.
We can create definition list by using the <dl>-----</dl> with
<dt> and<dd> tag. The <dt>-----</dt> is used to define the term;
whereas, the <dd> tag is used to give the term’s definition.
These lists displace the term word just above the definition itself
for a unique look.
Three tags are used here:
<dl>-defines the start of the list.
<dt>- definition term
<dd>- defining definition.
FORMATTING ELEMENTS IN HTML

There are various formatting tags available in html to format text


elements .There are as follows:
Tag Description Example
<b> Bold Text <b>Hello<b>->Hello
<i> Italic text <i>Hello<i>->Hello
<sup> Superscript text x<sup>3</sup>->x^3+y^2
+y <sup>2</sup>

<sub> Subscript text H<sub>2</sub>o->H2o


<em> Emphasis text <em>Hello</em>-
>Hello
(bold+italic)
Tag Description Example
<u> underline text <u>Hello</u>->Hello

<small> small the text <small>Hello</small>

<ins> add or modify the text hello<ins>dear</ins>


(defines the inserted text)
<del> strike the text <del>Hello<del>

<mark> highlight the text <mark>Hello</mark>


FONT & BASEFONT IN HTML
<font> tag: It is used to add style, size & color to the specific
text.
<basefont>tag: It is used to set all of your text in the webpage to
the same size, face& color.
There are 3 attributes to change size, color &face of font.
1.Font size:
Set the size of your font.
Range: 1(smallest)to7(largest)
Default size of font is 3.
Example:<font size=“6”>Hello</font>
2. Font color- It is set the color of your font.
We can set color using 3 methods:
(i) Using color name- red, blue.
(ii) Using RGB (red,green,blue) value rgb(72,0,0)
(iii) Using hexadecimal value #ffff00
<font color=“#ffff00”>Hello </font>
<font color=“red”>Hello</font>
3.Font face- It is used to set different font face using any font you
have installed.
Ex:<font face=“arial”>Hello</font>
We can also used these attributes all together.
<font face=“arial” size=“4” color=“blue”>
With the help of<basefont>tag we can set the default font of our
webpage.
FORM TAG IN HTML

HTML forms are used to collect some data from the site visitor.
The HTML<form>------</form> tag is used to create an HTML form.
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
accept-charset UTF-8 Specifies the Charset used in the submitted
form(default: the page charset)
action URL Contains a URL that defines where to send the
data after submitting the form
autoComplete On(default) Determines that the browser retains the history of
Off previous values.

enctype Specifies how the browser encodes the data


before it sends it to the server.(default: is url-
encoded)
method GET(default) Specifies how to send the form data to a web
POST Server. The data can be sent as URL variables, by
using the get method or as HTTP post, by using
the post method.
name name Specifies a name used to identify the form

novalidate True Specifies that the browser should not validate the
False form.

target -Self Specifies the target of the address in the action


-Blank attribute.
-Parent
<input> tag prompts the user to enter data and also request for the
information from the web server after submitting the web form.
<form>
<Input>
</form>
No input end tag in HTML5.
Type attribute:
It indicates the type of input element. It’s an empty tag. The default
value is text.
<input>
<input type=“text”>
 Text : it defines a single-line text field.
 <input type=“text”>
 Password Field: A password field is like a text field, the
difference being that this control hides each typed character by
displaying an asterisk(*)or bullets(.) instead of the character
itself.
 <input type=“password”>
 Button: This is used to add a button on a web form to activate a
script when an user click the button.
 <input type=“button”>
 Button with value: Value defines the text to be written on the
button.
 Email Field: This field is used to add an email address or a list of
email address to a form where type=“email” is a value for the
input type. The input format should be an email like
Name Attribute :Specifies a name used to identify a form.
It is used to give a name to the control which is sent to the server
to be recognized and get the value.
name=“lastname”.
Value Attribute:
Name:<input type="text" value="MITUJJAIN">

Check Box: A check box is a small box, which when selected


includes a checkmark. It is used to allow the user to select one or
more than one of the options available on a web page. An user can
select or clear the check box by clicking it.
<input type=“checkbox”>
Radio Button: A radio button is used to create a series of options of
which only can be selected. It is displayed as a circle which when
selected, displays a dot in the middle.
<input type=“radio”>
Checked attribute: Input element should be checked/selected when a
web page loads. It is used only with type=“checkbox” &
type=“radio”
URL field: The URL field is used to enter only the web addresses, in
their correct format. If the URL is not entered in the correct format
then the URL field validates the text field to enter web address.
<input type=“url”>
Autofocus: helps in keeping the focus of mouse pointer on the input
field.
Pattern: defines the regular expression of the text that should be
entered in the text field.
Search Box: This is used to add a search box to a form.
<input type=“search”>
Tel: The Tel type represents a one-line plain text edit for entering a
telephone number.
<input type=“tel”>
Range: Range input represents the input of limited range numerical values.
<input type=“rang”>
Number : Number is used to validate the textbox only if the value within
the field is a numerical value.
<input type=“number”>
File: This is used to upload a file on a web page. You also need to set the
enctype=“multipart/form-data”
<input type=“file”>
Date : This is used for input fields that should contain a date.
<input type=“date”>
Time: It allows the user to select a time.
<input type=“time”>
DateTime: it allows the user to select date & time.
<input type=“datetime”>
Datetime-local: It allows the user to select a date & time.
<input type=“datetime-local”>
Month: It allows the user to select a month and year.
<input type=“month”>
Week: It allows the user to select a week and year.
<input type=“week”>
Submit Button: A submit button is used to transfer form data to the URL specified
in the <form action> tag.
<input type=“submit”>
Reset button: A reset button helps user to clear all the data that they have entered in
the text fields.
<input type=“reset”>
Accept-charset Attribute: It specifies the character encodings that are to be used for
the form submission.
ISO-8859-1 character encoding for the Latin alphabet.
UTF-8 character encoding for Unicode
<form accept-charset=“UTF-8”>
Action attribute: It contains a URL that defines where to send the data after
submitting the form. It specifies the physical address of the server to which the
user data should be redirected at the click of the submit button.
action=http://www.something.com/something.html
action=“page.html”;
action=“gotform.php”;
If the action attribute is omitted, the action is set to current page.
AutoComplete:
On: The browser will automatically complete values based on values that the
user has entered before.
Off: User need to write all values each time they fill the form.
<form autocomplete=“on”>
Method Attribute:(GET or POST):
It specifies how to send the form data to a web server. The data can be
sent as URL variables, by using the get method or as HTTP post by
using the post method.
GET(default)
POST
GET: GET sends the data as part of the URL.
Appends form-data into the URL in name/value pairs.
The length of a URL is limited 2048 characters.
Never use GET method if you have password or other sensitive
information to be sent to the server.
Useful for form submissions where a user want to bookmark the result.
GET is better for non-secure data, like query strings in Google.
GET can’t be used to send binary data, ex: images or word documents.
<form action = “some.php” method=“GET”>
If we use an invalid value for the method attribute of the <form>
tag, the browser will use the default value GET.
POST Method: HTTP POST requests supply additional data from
the client(browser) to the server in the message body.
Appends form-data inside the body of the HTTP request(data is
not shown in URL).
The POST method does not have any restriction on data size to be
sent.
FORM submissions with POST cannot be bookmarked.
The POST method can be used to send ASCII as well as binary
data. Ex:- image and word documents etc.
The data sent by the POST method goes through HTTP header so
security depends on HTTP protocol. By using Secure HTTP you
can make sure that your information is secure.
POST is a little safer then GET because the parameters are not
stored in browser history or in web server logs.
<form action=“some.php” method=“POST”>
Enctype attribute: It specifies how the browser encodes the data
before it sends it to the server.
Value Description

Application/x-www-form All characters are encoded before sent (spaces are


url-encoded converted to “+” symbols, and special characters are
converted to ASCII Hex values).
Multipart/form-data No characters are encoded. This value is required
when you are using forms that have a file upload
control
text/plain Spaces are converted to “+” symbols, but no special
characters are encoded.
<form enctype=“multipart/form-data”>
Required Attribute: It specifies that an input field must be filled out before
submitting the form.

novalidate attribute: Specifies that the browser should not validate the form.

Accept : Specifies the type of files that the server accepts.


Value: file_extension audio/* video/* image/* media type.
Auto-focus attribute: Specifies that an <input> element should automatically get
focus when the page loads.
Text Direction (dirname): Specifies that the text direction will be submitted.

Value Description
ltr Default, Left-to-right text direction
rtl Right-to-Left text direction.
auto Let the browser figure out the text direction, based
on the content.

<input type=“text” name=“city” dirname=“city.dir”>

Disabled: Disables the input element when it loads on the client side’s web
page, so that the user cannot write text in it or select it. This attribute cannot
be used with type=“hidden”.
form(form_id): specifies form’s id to which the input field belong’s.
formaction: Specifies the URL of the file that will process the input
control when the form is submitted. (input tag attribute).
formmethod attribute: It is an input tag attribute. It defines the HTTP
method for sending data to the action URL.

Option tag: The <option>….</option> tags inside the


<select>….</select> element define an option in the drop down list.
<select>
<option>----------</option>
<option>---------</option>
</select>
Select tag: The <select>------</select> tag creates a dropdown list to accept a
user input from the list of items.
All attributes of select tag:
Autofocus.
Disabled
Required
Multiple
Size
Name
Selected Tag
Label: It specifies a shorter label for an option.
Optgroup Tag:
The <optgroup>……</optgroup> tag helps to group related choices, when we
have a long list of option to select from the drop-down list created using the
<select> tag.
<select>
<optgroup>
<option>------</option>
</optgroup>
<optgroup>
<option>-------</option>
</optgroup>
</select>
Button tag: We can customize the appearance of button using
the <button> tag.
<button>…..</button>
Datalist tag: The datalist tag provides an autocomplete feature,
which means that it allows you to select an input from the
predefined options. Tha datalist tag is combined with the input
tag.
<datalist>
<option>------</option>
<option>--------</option>

</datalist>
Field set: This creates a box around the related form
controls.
<fieldset>……..</fieldset>
Label tag: it defines a set of text that is associated with a
particular element.
<label>--------</label>
FRAME IN HTML
• Frame can display one or more than one html document in the
same browser window.
• Each html document is called frame & each frame is independent
of others.
• <frameset> tag is used to display browser window.
• <body> tag is not required in frame tag.
• Attribiutes of frameset tag;
(i) Rows: It divides browser window rowwise.
Example: <html>
<frameset row=“30%,70%”>
</frameset>
</html>
(2) COLS: It divides browser window column wise.
<html>
<frameset cols=“30%,40%,30%”>
</frameset>
</html>
(3) Frame border
(4) Border color
(5) name
HTML Frames Are Used To Divide Your Browser Window
Into Multiple Sections Where Each Section Can Load A
Separate HTML Document.

A Collection Of Frames In The Browser Window Is Known


As A Frameset.

The Window Is Divided Into Frames In A Similar Way The


Tables Are Organized: Into Rows And Columns.
Creating Frames:
To use frames on a page we use <frameset> tag
instead of <body> tag.

The <frameset> tag defines, how to divide the


window into frames.

The rows attribute of <frameset> tag defines


horizontal frames and cols attribute defines
vertical frames.

Each frame is indicated by <frame> tag and it


defines which HTML document shall open into
the frame.
Syntax
< frame src = "URL" >

Note: Do not use HTML <frame> tag as it is


not supported in HTML5, instead you can
use <iframe> or <div> with CSS to achieve
similar effects in HTML.
META TAGS
 <Meta> tag is used to add description of HTML page.
 The description that we add about the web page using the
<meta> is used by search engines for indexing & ranking the
web page.
 <meta> tags always go inside the <head> element.
 Character encoding for the HTML document
 <meta charset=“UTF-8”>
Attribute Value Description

charset character_set Specifies the character encoding for


the html document.
content text Gives the value associated with the
http-equiv or name attribute
http-equiv content-type Provides an HTTP header for the
default-style information/value of the content
refresh attribute
name application- Specifies a name for the meta data.
name
author
description
generator
keywords
Description of a web page: Define a description of your web page.
<meta name=“description” content=“A blog about programming language”>

Overview & Features of HTML5: HTML5 enables to create more interactive


websites by embedding audio, video and graphics on the web page.
The purpose of HTML5 is primarily to make it easier for web developers.
New features:
Browser support.
Geolocation.
Offline application cache.
Web Storage.
Error handling.
New Application Programming Interface(API).
New structure.
Application Programming Interface
2D drawing on a web page.
Drag & Drop.
Timed media playback
Browser history Management.
New Structure:
<article>
<aside>
<header>
<footer>
<details>
<dialog> and more.
DOCTYPE Declaration:
<!DOCTYPE html>
It is an instruction to the web browser about what version of
HTML the page is written in.
The <!DOCTYPE> declaration is not case sensitive.

You might also like