Scribd
Upload
10 views67 pages

CP301 CH - 3 HTML

This document provides an overview of web technologies, specifically focusing on client-side scripting with HTML. It covers the basics of HTML structure, essential tags, attributes, formatting, lists, graphics, links, tables, and forms. The content is aimed at guiding users through the process of creating and formatting web pages using HTML.

Uploaded by

abhimanyu thakur
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views67 pages

CP301 CH - 3 HTML

This document provides an overview of web technologies, specifically focusing on client-side scripting with HTML. It covers the basics of HTML structure, essential tags, attributes, formatting, lists, graphics, links, tables, and forms. The content is aimed at guiding users through the process of creating and formatting web pages using HTML.

Uploaded by

abhimanyu thakur
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 67

Web Technologies

(CP301)

Credits: 6 (Lect: 2+ Lab: 4)

Reference Book(s):
1. Developing Web Application, Ralph Moseley, Wiley India
2. Web Design, Joel Sklar, Cengage Learning
Chapter 3:

Client Side Scripting: HTML


Introduction to HTML

 HTML : Hyper Text Markup Language


 A browser understands and interpret the HTML tags, identifies the
structure of the document (which part are which) and makes decision
about presentation (how the parts look) of the document.

 HTML also provides tags to make the document look attractive using
graphics, font size and colors.

 User can make a link to the other document by creating Hypertext Links
also known as Hyperlinks.
Website Development Process

 A Web site is composed of individual pages that are linked together each of
these relating to a different aspects of your site such as news , links and
biography.

 It is a much like a SDLC ( Software development Life Cycle ).


1. Requirements
2. Design
3. Write Code
4. Test
5. Upload
6. Reiterate
Basic HTML

 A page can be loaded into a browser by two ways


 By writing a URL in the address bar
 By manually open a file

 The essential tags that are required to create a HTML document are:

<html>.............</html>
<head>.............</head>
<body>.............</body>
Basic HTML

 HTML Tag <HTML>:


 The <HTML> tag encloses all other HTML tags and associated text

within your document.

<HTML>
Your Title and Document (contains text with HTML tags)
goes here
</HTML>

 The slash mark is always used in closing tags.


Basic HTML

 HEAD Tag <HEAD>:


 HEAD tag comes after the HTML start tag. It contains TITLE tag to give

the document a title that displays on the browsers title bar at the top.

<HEAD>
<TITLE>
Your title goes here
</TITLE>
</HEAD>
Basic HTML

 BODY Tag <BODY>:


 The BODY tag contains all the text and graphics of the document with all

the HTML tags that are used for control and formatting of the page.

<BODY>
Your Document goes here
</BODY>

 An HTML document, web page can be created using a text editor,


Notepad or WordPad. All the HTML documents should have the
extension .htm or .html
Basic HTML

 Example:

<HTML>
<HEAD>
<TITLE>
My first Page
</TITLE>
</HEAD>
<BODY>
WELCOME TO MY FIRST
WEB PAGE
</BODY>
</HTML>
Basic HTML

 Attributes used with <BODY> :


 BGCOLOR: used to set the background color for the document

<BODY BGCOLOR="yellow">
Your document text goes here.
</BODY>
 TEXT: used to set the color of the text of the document

<BODY TEXT="red">
Document text changed to red color
</BODY>
 BACKGROUND: It is used to point to an image file (the files with an
extension .gif, .jpeg) that will be used as the background of the
document.
<BODY BACKGROUND="filename.jpeg"> <
Document background changed
/BODY>
Basic HTML

 Attributes used with <BODY> :


 MARGINS: Set the left hand/right hand margin of the document

<BODY LEFTMARGIN="60“ TOPMARGIN="60" >


This document is indented 60 pixels from the left
hand side and also from top side of the page.
</BODY>
 ALINK: Specifies the color of an active link in a document
<BODY ALINK="red">
Document active link color changed to red
</BODY>
 LINK: Specifies the color of an unvisited link in a document
<BODY ALINK=“blue">
Document unvisited link color changed to blue
</BODY>
Basic HTML

 Attributes used with <BODY> :


 VLINK: Specifies the color of an unvisited link in a document

<BODY VLINK=“yellow">
Document visited link color changed to yellow
</BODY>
Basic HTML

 Container and Empty Tags :


 Container Tags : Tags which have both the opening and closing i.e.

<TAG> and </TAG> are called container tags.


 Empty Tags: Tags, which have only opening and no ending, are called

empty tags. Line break <BR> or <BR /> and <HR /> tags are empty
tags.
Basic HTML

 Formatting web page :


 HTML has six header tags <H1>, <H2>...........<H6> used to specify
section headings. Text with header tags is displayed in larger and bolder
fonts than the normal body text by a web browser.
 Every header leaves a blank line above and below it when displayed in
browser.
<HTML>
<HEAD>
<TITLE>
My first Page
</TITLE>
</HEAD>
<BODY>
<h1> Welcome to my first web page
</h1>
</BODY>
</HTML>
Basic HTML

 Formatting web page :


 Browsers ignore extra space within HTML document.
 For Example: You can have text “Hello ” in
HTML
BVM document but in browser it display, “Hello BVM".
 Paragraph tag <P>:
 This tag <P> indicates a paragraph, used to separate two paragraphs
with a blank line.
<P> Welcome to the world of HTML </P>
 Line Break Tag <BR>:
 The empty tag <BR> is used, where the text needs to start from a
new line and not continue on the same line. To get every sentence on
a new line, it is necessary to use a line break.
Example:
National Institute of Open Schooling <BR>
B-31B, Kailash Colony <BR>
New Delhi-110048
Basic HTML

 Formatting web page :


 Preformatted Text Tag <PRE>:
 <PRE> tag can be used, where it requires total control over spacing
and line breaks. Browser preserves your space and line break in the
text written inside the tag. It uses courier font.

<PRE> Welcome to the world of HTML </PRE>

 Horizontal Rule Tag <HR>:


 An empty tag <HR> basically used to draw lines and horizontal
rules. It can be used to separate two sections of text. It accept SIZE,
COLOR, ALIGN attribute.
 Example:
<BODY>
Your horizontal rule goes
here. <HR>
The rest of the text goes
here.
</BODY>
Basic HTML

 Character Formatting Tags:


 The character formatting tags are used to specify how a particular text
should be displayed on the screen to distinguish certain characters
within the document.
 Boldface <B>
 Italics <I>
 Subscript <SUB>: displays text in Subscript
 Superscript <SUP>: displays text in Superscript
 Small <SMALL>: displays text in smaller font as compared to normal
font
 Big <BIG>: displays text in larger font as compared to normal font
Basic HTML

 <FONT> Tag:
 Attributes of <FONT> are:
 COLOR: Sets the color of the text that will appear on the screen. It
can be set by giving the value as #rr0000 for red or by name.

 SIZE: Sets the size of the text, takes value between 1 and 7, default is
3.

 FACE: Sets the normal font type, provided it is installed on the user’s
machine. <FONT FACE="ARIAL"> bvm </FONT>
Basic HTML

Font Size Heading Point Size


7 - 36pt
6 <h1> 24pt
5 <h2> 18pt
- <h3> 14pt
4 <h4> 12pt bold
3 Body text 12pt plain
- <h5> 10pt
- <h6> 7pt
2 - 9pt
Basic HTML

 List in Web Page:


 HTML Supports several ways of arranging items in lists.
The most
commonly used are:
 Ordered List (Numbered List)
 Unordered List (Bulleted List)

 Ordered List <OL>


 Ordered list also called as Numbered list, is used to present a
numbered list of item in the order of importance or the item
(paragraph) is marked with a number.
 An ordered list must begin with the <OL> followed by an <LI> list
item tag.
Basic HTML

 List in Web Page:


 Ordered List <OL> attributes:

START : Used for lists that need to start at values other than 1.

 START always specified in default numbers, and is completed based
on TYPE before display, For example, If START =5 it would display
either an ‘E’, ‘e’, ‘V’, ‘v’, or ‘5’ based an TYPE attribute.
 TYPE : allows marking list items with different types. By default the
list Item markers are set to numbers 1,2,3… so on.
<OL type=“ï”>

i : Roman numerals i, ii, iii, iv.....


I : Roman Capitals I, II, III, IV.......
a : Lowercase letter a, ,b, c, ..........
A : Uppercase letters A, B, C, ............
Basic HTML

 List in Web Page:


 Unordered List <UL>:
 Unordered List also called as bulleted list, used to present list of
items marked with bullets. An unordered list starts with in <UL>
followed by <LI> (List Item) tag. Use of <UL> is very similar to <OL>
(ordered list).
 Example:
<UL>
<LI> Brinjal
<LI> Cabbage
<LI> Tomato
</UL>
Basic HTML

 List in Web Page:


 Unordered List <UL> attributes:
 TYPE: allows marking list items with different types. By default the
list Item markers are set to bullets.
 Other values are circle and square.
 Example:
<UL type=“circle”>
<LI> BVM
<LI> ADIT
<LI> GCET
</UL>
Basic HTML

 Graphics in Web Page <IMG>:


 Images can be placed in a web page by using <IMG> tag. TYPE: allows
marking list items with different types. By default the list Item markers
are set to bullets.
 Syntax:
<IMG SRC = image_URL>

Where SRC – Source of the image file

image_URL – represents the image file with its location.

Example:

<IMG SRC=logo.gif>

<IMG SRC= “logo.jpg” HEIGHT=“320” WIDTH=“240” ALT=“Alternate


text for image” BORDER=“1” HSPACE=“10” VSPACE=“10”>
Basic HTML

 Links in Web Page <A>:


 Web pages are linked to one another through Hypertext Links.
 Section of text or image in the HTML document can be linked to an
external document or to a specific place within the same document.

Example:

<A HREF=“menu.html”> Click here </A>

<A HREF= “menu.html” TARGET=“_blank”> Click here </A>

<A HREF= “menu.html” TARGET=“_blank”>

<IMG SRC=“logo.gif” />

</A>
Basic HTML

 Linking to a specific place within the same Document :


 It is required to jump different sections in the same document. For
this it needs two steps, first; identify section with a name and or
second; use jumps to the location using the name used.

 <A HREF="#section_name"> link to another section of the same


document </A>
 This link text jumps to the section named with HREF on click.
 The # symbol before the section name is must.
 <A NAME="section_name"> Beginning of the section </A>
 The NAME attribute is used to identify a section with a name. It is
a unique identifier within the document for the anchor.
Basic HTML

 Linking to a specific place within the same Document :


 Same folder, but different document:

 <A HREF="document.html#section_name">

 Different folder, different document:


 <A HREF="foldername/document. html#section_name">

 A different server:
 <A HREF="http://www.bv
mengineering.ac.in/foldername/doc1.html#section
_name>
Basic HTML

 Tables <TABLE>:
A table is divided into rows <tr> and each row is divided into data cells
<td>.
 A data cell can contain text, images, lists, paragraphs, forms, horizontal
rules, tables, etc.
Example : <table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Basic HTML

 Tables <TABLE> attributes:


 Border: Which sets the border width in pixels around the table.
 Width: Which in this case is as a percentage of the screen
 Cellpadding: to give the distance in pixels between the inner border and
the text
 Cellspacing: Which sets the spacing in pixels between the inner and outer
borders.
 Rowspan: The rowspan attribute specifies the number of rows a cell
should span.
 Colspan: The colspan attribute specifies the number of columns a cell
should span.
Basic HTML

 Forms in Web Page <FORM>:


 HTML forms provide a simple and reliable user interface to collect data
from the user and transmit the data to a server-side program for
processing.
 The server simply reads all the HTTP data sent to it by the browser, then
returns a Web page to the client.
 Each of the controls typically has a name and a value, where the name is
specified in the HTML and the value comes either from user input or from a
default value in the HTML.
Basic HTML

 Forms in Web Page <FORM>:


 <form action=“processform.php” name= “f1” method =“POST”>
 The action attributes tells the HTML where to send the
collected information.
 The method attribute describes the way to send it.
 There are two types of Method:
 GET
 POST
Basic HTML

 Forms in Web Page <FORM>:


 GET Method:
 An HTTP GET request, appends the form data to the end of the
specified URL after a question mark.
 GET is the default and is also the method that is used when the
user types a URL into the address bar or clicks on a hypertext
link.

Advantage of GET Method:


 Save the results of a form submission: you can submit data and
bookmark the resultant URL, send ita normal hypertext link.
Google.com, yahoo.com etc to a other by email, or put it in.
Basic HTML

 Forms in Web Page <FORM>:


 POST Method:
 HTTP POST, sends the data after the HTTP request headers and a
blank line.

Advantage of POST Method:


 When POST is used, the data is sent on a separate line.
 POST is Secure than GET.
Basic HTML

 <FORM> Elements:
 <INPUT> tag is used to collect information from the user.
 Different Types of Input:

 <input type=“text” name=“fn” id=“fn1” value=“fname”/>


 <input type=“password”/>
 <input type=“radio”/>
 <input type=“checkbox”/>
 <input type=“file”/>
 <input type=“submit”/>
Basic HTML

 <FORM> Elements:
 Different Types of Input:

 <input type=“button”/>
 <input type=“image”/>
 <input type=“reset”/>
 <input type=“hidden”/>: allows hidden data to be
passed along with form. (not seen by user)
 <textarea name=“add1” id=“add11” rows=“10” cols=“10”>
Basic HTML

 <FORM> Elements:
 Drop Down Menu:
 A SELECT element presents a set of options to the user

<SELECT NAME=“FavLang" >

<OPTION VALUE=“C“ Selected > C </OPTION>

<OPTION VALUE=“C++“ > C++ </OPTION>

<OPTION VALUE=“JAVA“> Java </OPTION>

</SELECT>
Basic HTML

 <FORM> Elements:
 Drop Down Menu:

<SELECT NAME=“FavLang" >

<OPTION Selected disabled > Select Language </OPTION>

<OPTION VALUE=“C“ > C </OPTION>

<OPTION VALUE=“C++“ > C++ </OPTION>

<OPTION VALUE=“JAVA“> Java </OPTION>

</SELECT>
Basic HTML

 <FORM> Elements:
 List Box:
 List boxes are used when multiple selections are permitted or a
specific visible size has been specified.

<SELECT NAME=“FavLang“ size=“2”>

<OPTION VALUE=“C“ > C </OPTION>

<OPTION VALUE=“C++“ > C++ </OPTION>

<OPTION VALUE=“JAVA“> Java </OPTION>

</SELECT>
Basic HTML

 Fieldset and Legend:


 Fieldset: draws a rectangle around the area.
 Legend: gives heading to each input section.
 Example:
<fieldset>
<legend> Personal details</legend> First
Name: <input type=text /> Last
Name: <input type=text />
Email : <input type=text />
Address : <textarea type=text />
</fieldset>
Basic HTML

 Web Site Structure :


 A Web site is collection of pages associated by hyperlinks , but it
should be broken up into area for structure.
 Your site is broken into several sub-sites.
 A website has a root directory which is entered first , then several
sub-directories that serve as the sub-sites.

 www.mywebsite.co.in
 index.html ( homepage)
 Department ( All department related files (pages))
 Images ( images and other files (pages))
 CSS (All CSS files)
 JS (All JavaScript files)
Introduction to XHTML

 XHTML stands for Extensible Hypertext Markup Language


 XHTML is aimed to replace HTML
 XHTML is almost identical to HTML 4.01
 XHTML is stricter and cleaner version of HTML
 XML is a markup language designed for describing data
 XHTML is a Bridge between HTML and XML
Introduction to XHTML

 XHTML elements must be properly nested.


 XHTML elements must always be closed.
 XHTML elements must be in lowercase.
 XHTML documents must have one root element.
 Attribute names must be in lower case.
 Attribute values must be quoted.
Introduction to XHTML

 DOCTYPE declaration of XHTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 This is what the <html> element looked like in XHTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">

 Here is a typical XHTML <head> section:


<head>
<meta http-equiv="Content-type" content="text/html;
charset=UTF-8" />
<title>My First XHTML Page</title>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
Introduction to XHTML

 XHTML elements must be properly nested

<b><i> bold and italic </b> </i> is wrong

<b><i> bold and italic </i> </b> is correct


 XHTML documents must be well-formed

<html>

<head>……..</head>

<body>……..</body>

</html>
 If an HTML tag is not a container, close it like this :
<br />, <hr />, <img src=“smile.gif” />
Introduction to XHTML

 META tag:
 Metadata is information about information in this context machine
understandable information about web resources.
 It can be included in both HTML and XHTML to describe the actual
documents rather than the document’s content.
 Metadata is included in the head section of web page.
 Meta tags are used to provide information to search engine. They
pick up the data you give and also control some extent where they go
on your site following links.
Introduction to XHTML

 META tag:
<html>

<head>

<title> My Web Page </title>

<meta name =“author” content=“Kirti Sharma”/>

<meta name =“description” content=“This page is related to


information of faculties of bvm”/>

</head>

</html>
Introduction to XHTML

 META tag:
<html>

<head>

<title> My Web Page </title>

<meta name =“expires” content=“Mon,20 Jul 2017 16:00:00 ”/>

<meta name =“refresh” content=“50;abc1.html”/>

</head>

</html>
Introduction to XHTML

 META tag (Memory Cache):


 Web browsers can cache pages for quick reviewing without having
to request them again and re-download the document.
 Each page has a TTL ( Time To Leave) . Usually 30 days, when the
browser cache has been cleared or the allotted memory is all used
up.
 Browser can be stopped from caching a page. If it supports the meta
elements http-equiv attribute.
 For this we have to set value pragma is assigned to http-equiv
attribute and no-cache value to the content attribute.
 <meta http-equiv =“pragma” content=“no-cache”/>
Introduction to XHTML

 Character Entities:
 &lt , &gt, &amp, &divide, &copy, &reg, &quot.
 Frameset:
 <frame> and <noframes> tags:
 Dividing content on website when it is large, then use frames to

break information up and partition it.


 To Separate the different elements of your content like to divide the

page into rows and to place a new page into frame.


Introduction to XHTML

 Frameset Example:

<frameset frameborder=“3” rows=“220,*,60”>

<frame name=“banner” src=“banner.html” />

<frame name=“main” src=“main.html” />

<frame name=“options” src=“options.html” />

</frameset>
Introduction to XHTML

 <noframe>:
 Only give a body section to such a program where you want to
suppose browsers that don’t have frame capability.

<noframes>

<body>

<p> your browser does not support frame. </p>

</body>

</noframe>
Introduction to HTML5

 HTML5 is the newest version of HTML, only recently gaining partial support by
the makers of web browsers.

 It incorporates all features from earlier versions of HTML, including the


stricter XHTML.

 It is still a work in progress. No browsers have full HTML5 support. It will be


many years – perhaps not until 2018 or later - before being fully defined and
supported.

 New features are based on HTML, CSS, DOM, and JavaScript


Goals of HTML5

 Support all existing web pages. With HTML5, there is no requirement to go


back and revise older websites.

 Reduce the need for external plugins and scripts to show website content.

 Make the rendering of web content universal and independent of the device
being used.

 Enhanced form controls and attributes

 Built-in audio and video support (without plugins)


First Look at HTML5

 Remember the DOCTYPE declaration from XHTML?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 In HTML5, there is just one possible DOCTYPE declaration and it is simpler:

<!DOCTYPE html>

The DOCTYPE tells the browser which type and version of document to expect.
This should be the last time the DOCTYPE is ever changed. From now on, all
future versions of HTML will use this same simplified declaration.
First Look at HTML5

 This is what the <html> element looked like in XHTML:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">

 Again, HTML5 simplifies this line:

<html lang="en">

The lang attribute in the <html> element declares which language the page
content is in. Though not strictly required, it should always be specified, as it can
assist search engines.

Each of the world’s major languages has a two-character code, e.g. Spanish = "es",
French = "fr", German = "de", Chinese = "zh", Arabic = "ar".
First Look at HTML5

 Here is a typical XHTML <head> section:


<head>
<meta http-equiv="Content-type" content="text/html;
charset=UTF-8" />
<title>My First XHTML Page</title>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
 And the HTML5 version:
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>

Notice the simplified character set declaration, the shorter CSS stylesheet link
text, and the removal of the trailing slashes for these two lines.
First Look at HTML5

 Putting the prior sections together, and now adding the <body> section and
closing tags, we have our first complete web page in HTML5:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>HTML5 is fun!</p>
</body>
</html>
First Look at HTML5

Even though we used HTML5, the page looks exactly the same in a web browser
as it would in XHTML. Without looking at the source code, web visitors will not
know which version of HTML the page was created with.
HTML5 Basic Elements

 <header>: used to define a header for section or document


 <footer>: used to define a footer for section or document
 <article>: used to define a article
 <section>: used to define a section within document
 <nav>: used to define a navigation links
 <menuitem>: used to define a list of menuitems

 header, nav and footer are not doing fancy things like the other new HTML5
elements, but these elements are primarily designed to make the web
structure more meaningful both for browsers and humans, just like how the
World Wide Web inventor, Tim Barners-Lee, think of it.
HTML5 Basic Elements
HTML5 Elements: Video

<!DOCTYPE HTML>
<html>
<body>
<video src="movie.ogg" width="320" height="240"
controls="controls">
Your browser does not support the video
tag.
</video>
</body>
</html>
The above example uses an Ogg file, and will work in Firefox, Opera and Chrome.
To make the video work in Safari and future versions of Chrome, we must add an
MPEG4 and WebM file.
HTML5 Elements: Video

<!DOCTYPE HTML>

<html>

<body>

<video width="320" height="240" controls="controls">

<source src="movie.ogg" type="video/ogg" />

<source src="movie.mp4" type="video/mp4" />

<source src="movie.webm" type="video/webm" />

Your browser does not support the video tag.

</video>

</body>

</html>
HTML5 Elements: Video
HTML5 Elements: Audio

<!DOCTYPE HTML>
<html>
<body>
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</body>
</html>
HTML5 Elements: Audio
HTML5 Elements: Input Types

 HTML5 has several new input types for forms.


 email
 url
 number
 range
 date pickers (date, month, week, time, datetime, datetime-local)
 color
HTML5 Elements: Input Attributes

 HTML5 has several new input attributes for forms.


 required
 autofocus
 min, max, step
 pattern
 placeholder
 readonly

You might also like