What is a Web Page?
• A web page or webpage is a document, commonly written in HTML, that is viewed in an
Internet browser.
• HTML – Hyper Text Markup Language is the notation for describing
• document structure
• formatting
• A web page can be accessed by entering a URL address into a browser's address bar.
• A web page may contain text, graphics, and hyperlinks to other web pages and files.
• Many web pages also make use of JavaScript code for dynamic behavior and Cascading
Style Sheets (CSS) code for better presentation.
• Images, videos, and other multimedia files are often embedded in web pages.
• The first web page was created at CERN by Tim Berners-Lee on August 6, 1991.
• You can visit and browse the first website and the first web page at the info.cern.ch
address.
What is Website?
• A collection of web pages which are grouped together and usually connected
together in various ways. Often called a "web site" or a "site."
• A website is a collection of web pages and related content that is identified by a
common domain name and published on at least one web server.
• Notable examples are wikipedia.org, google.com, amazon.com.
• Websites are typically dedicated to a particular topic or purpose, such as news,
education, commerce, entertainment, or social networking.
• Users can access websites on a range of devices, including desktops, laptops,
tablets, and smartphones.
• The app used on these devices is called a web browser.
What is Web Application?
• A web-application is an application program that is usually stored on a remote
server, and users can access it through the web-browser.
• The web application uses a combination of server-side scripts and client-side
scripts to present information
• Web application is designed for interaction with end users while Website
basically contains static content.
• Web application mostly requires authentication while in website authentication
is not necessary.
• Example : Amazon, Facebook, Online Banking
Creating HTML Pages
• An HTML file must have an .htm or .html file extension
• HTML files can be created with text editors:
• NotePad, NotePad ++, PSPad
• Or HTML editors :
• Microsoft FrontPage
• Macromedia Dreamweaver
• Netscape Composer
• Visual Studio
• Open any above mentioned editors and create a new file with .html extension and
save the file.
• After saving the file you can open the file with any Web Browser in order to view
the output.
First HTML Page
test.html
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML Structure
• HTML is comprised of “elements” and “tags”
• Begins with <html> and ends with </html>
• Elements (tags) are nested one inside another:
<html> <head></head> <body></body> </html>
• Tags have attributes:
<img src="logo.jpg" alt="logo" />
• HTML describes structure using two main sections: <head> and <body>
• The HTML source code should be formatted to increase readability and facilitate
debugging.
• Every block element should start on a new line.
• Every nested (block) element should be indented.
• Browsers ignore multiple whitespaces in the page source, so formatting is harmless.
• For performance reasons, formatting can be sacrificed
First HTML Page
<!DOCTYPE HTML> HTML header
<html> Opening tag
<head>
<title>My First HTML Page</title>
</head>
Closing tag
<body>
<p>This is some text...</p>
</body>
</html>
HTML body
Basic HTML Tags
1. Headings
2. Paragraph
3. Colors
4. Fonts
5. List
6. Anchor Tag
7. Image
8. Table
9. Form
1) Headings
• Headings are important because search
engines use the headings to index the structure
and content of your web pages.
<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
align="position" --left (default), center or right
2) <p> paragraph
• The HTML <p> element represents a paragraph.
• Paragraphs are usually represented in visual media as blocks of text separated
from adjacent blocks by blank lines and/or first-line indentation, but HTML
paragraphs can be any structural grouping of related content, such as images or
form fields.
• Paragraphs are block-level elements, and notably will automatically close if
another block-level element is parsed before the closing </p> tag.
• We can use align attribute of the paragraph tag to specify the text alignment for
the text inside the paragraph, ex. <p align=“center”>our test</p>
3) Colors
• We can use color values for mainly two attributes named bgcolor and color.
• Possible values for the color are,
• many are predefined (red, blue, green, ...)
• all colors can be specified as a six character hexadecimal value: #RRGGBB
• #FF0000 – red
• #888888 – gray
• #00FF00 –green
• #000000 – black
• For example, <body bgcolor=“red”> or <body bgcolor=“#888888”>
4) Fonts
• The <font> tag specifies the font face, font size, and color of text.
• The <font> tag is not supported in HTML5.
<font color="red" size="2" face="Times Roman">
This is the text of line one
</font>
<br/>
<font color="green" size="4" face="Arial">
Line two contains this text
</font>
<br/>
<font color="#FF9933" size="6" face="Courier">
The third line has this additional text
</font>
5) List
Ordered List
1. Block-A a) Block-A A. Block-A i. Block-A I. Block-A
2. Block-B b) Block-B B. Block-B ii. Block-B II. Block-B
3. Block-C c) Block-C C. Block-C iii. Block-C III. Block-C
4. Block-D d) Block-D D. Block-D iv. Block-D IV. Block-D
Unordered List
o Block-A ▪ Block-A
Block-A
o Block-B ▪ Block-B
Block-B
o Block-C ▪ Block-C
Block-C
o Block-D ▪ Block-D
Block-D
5.1) Ordered List (OL)
<ol> Types:
<li> Item one </li>
<li> Item two </li> Type = 1 (default)
<ol type="I"> Type = a
<li> Sublist item one </li> Type = A
<li> Sublist item two </li> Type = I
<ol type="i"> Type = i
<li> Sub-sub list item one </li>
<li> Sub-sub list item two </li>
</ol>
</ol> Output
</ol>
5.2) Unordered List (UL)
<ul>
<li> One </li> Types:
<li> Two </li> Type = disc (default)
<ul type="circle"> Type = circle
<li> Three </li> Type = square
<li> Four </li>
<ul type="square">
<li> Five </li> Output
<li> Six </li>
</ul>
</ul>
</ul>
6) <a> Anchor Tag (Hyperlinks)
• The <a> tag defines a hyperlink, which is used to link from one page to another.
• An Anchor tag have 3 important attributes:
• the href attribute (hypertext reference) defines the target address of the document.
• the name attribute of the anchor tag can be used to enable users to “jump” to a specific
point on a page.
• the target attribute specifies how the destination page or the target document should be
opened. target="_ blank" is used for opening of the target page in a new tab.
• Link to an absolute URL:
• Example, <a href="http://www.silveroakuni.ac.in"> Silver Oak University</a>.
• Link to a relative URL:
• Example, <a href=“./home.html"> Home </a>.
• Link to a section within a URL:
• Example, <a href=“#reference"> Reference Section. </a>.
7) Images
• The HTML <img> element embeds an image into the document.
• Syntax: <img src= "pathToImage" />
• Attributes:
• the src attribute is required, and contains the path to the image we want to embed.
• the alt attribute holds a text description of the image, which isn't mandatory but is incredibly
useful for accessibility (screen readers read this description out to their users so they know
what the image means). Alt text is also displayed on the page if the image can't be loaded
for some reason: for example, network errors, content blocking etc…
• the width & height attribute can be in units of pixels or percentage of page or frame.
• the align attribute (currently deprecated) will aligns the image with its surrounding context
(Use the float and/or vertical-align CSS properties instead of this attribute).
8) Table
<table border=1> <table> table tag
<caption>Table Caption</caption> <caption> optional table title
<tr> <tr> table row
<th>Heading1</th> <th> table header
<th>Heading2</th> <td> table data element
</tr>
<tr> Output
<td>Row1 Col1 Data</td>
<td>Row1 Col2 Data</td>
</tr>
<tr>
<td>Row2 Col1 Data</td>
<td>Row2 Col2 Data</td>
</tr>
</table>
<table border="1" cellspacing="2" height="230" width="60%">
<tr align="center">
<td colspan="2">A</td>
<td colspan="5">B</td>
</tr>
<tr align="center">
<td>C</td> <td>D</td> <td>E</td>
<td align="left">F</td>
<td align="left">G</td>
<td align="left">H</td>
<td rowspan="3" valign="top">J</td>
</tr>
<tr align="center">
<td rowspan="2">K</td>
<td>M</td>
<td colspan="2">N</td>
<td colspan="2" align="left">I</td>
</tr>
<tr align="center">
<td>L</td> <td>P</td>
<td>O</td> <td>I</td>
<td>H</td>
</tr>
</table>
Frame and
Frameset
❑Frameset is used to divide a browser screen into two or more HTML regions/sections.
❑Tag used is the <FRAMESET>..</FRAMESET> tags.
❑Each unique region is called a frame.
❑Each frame can be loaded with a different document and hence, allow multiple HTML
documents to be seen concurrently.
❑FRAMESET tag is included after <HEAD> tag and We will not write <BODY> tag.
❑The <frameset> element contains one or more frame elements. It is used to specify the
number of rows and columns in frameset with their pixel of spaces. Each element can hold
a separate document.
Syntax:
<frameset cols = "pixels | % | *"> <frameset rows = "pixels | % | *">
frameset
attributes
cols: The cols attribute is used to create vertical frames in a web browser. This attribute is basically used to
define the no. of columns and their size inside the frameset tag. (Size may be in pixel or percentage)
rows: The rows attribute is used to create horizontal frames in the web browser. This attribute is used to
define the no. of rows and their size inside the frameset tag. (Size may be in pixel or percentage or as a
proportion of the remaining space by using ‘*’.)
border: This attribute of frameset tag defines the width of the border of each frame in pixels. Zero value is
used for no border. (Size may be in pixel or percentage or as a proportion of the remaining space by using
‘*’.)
frameborder: This attribute of frameset tag is used to specify whether a three-dimensional border should be
displayed between the frames or not for this use two values 0 and 1, where 0 defines no border and value 1
signifies for yes there will be a border.
framespacing: This attribute of frameset tag is used to specify the amount of spacing between the frames in
a frameset. This can take any integer value as a parameter which basically denotes the value in pixel.
<frameset rows="40%,30%,30%"> <frameset cols="40%,30%,30%">
<frame src="form.html"> <frame src="form.html">
<frame src="1.html"> <frame src="1.html">
<frame src="table.html"> <frame src="table.html">
</frameset> </frameset>
<frameset rows="10%, *, 10%" border="0">
<frame src="header.html">
<frameset cols="20%,*,20%">
<frame src="left.html">
<frame src="maincontent.html" name="main">
<frame src="right.html">
</frameset>
<frame src="footer.html">
</frameset>
HTML Forms
▪ HTML forms are used to create User interface on Web pages
• Usually the purpose is to ask the user for information
• The information is then sent back to the server
▪ A form is an area that can contain form elements
• The syntax is: <form parameters> ...form elements... </form>
• Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down menus,
etc
• Other kinds of HTML tags can be mixed in with the form elements
• A form usually contains a Submit button to send the information in the form elements to
the server
• The form’s parameters tell browser how to send the information to the server (there are two
different ways it could be sent)
The <form> Tag
▪ The <form arguments> ... </form> tag encloses form elements (and probably
other HTML as well)
▪ The arguments to form tell what to do with the user input
• action="url"(required)
• Specifies where to send the data when the Submit button is clicked
• method="get" (default)
• Form data is sent as a URL with ?form_data info appended to the end
• Can be used only if data is all ASCII and not more than 100 characters
• method="post"
• Form data is sent in the body of the URL request
• Cannot be bookmarked by most browsers
• target="target"
• Tells where to open the page sent as a result of the request
• target= _blank means open in a new window
• target= _top means use the same window
Form Elements
• Input Input Types (HTML4) Input Types (HTML5)
▪ text ▪ number
• Select ▪ password ▪ email
▪ checkbox ▪ search
• Textarea ▪ radio ▪ url
▪ submit ▪ tel
• Button ▪ button ▪ range
▪ reset ▪ color
• Label ▪ file ▪ date
▪ time
• Fieldset ▪ datetime-local
▪ month
• Legend ▪ week
• Etc…
HTML5 Form Validation
• Form validation is a “technical process where a web-form checks if the information
provided by a user is correct.”
• The form will either alert the user that something is not in correct format and need to fix
to proceed, or the form will be validated and the user will be able to continue with their
process.
• Form can be validated both in Client-Side as well as Server-Side, it is recommended to
validate the form in both the side.
• Form validation generally performs two functions.
1. Basic Validation
• Emptiness
• Length Validation etc……
2. Data Format Validation
Secondly, the data that is entered must be checked for correct form and value.
• Email Validation
• Mobile Number Validation
• Enrollment Number Validation etc….
• We can use required attribute in order to stop user sending empty data to server.
1 <input type="text" name="txtName" required/>
• We can use pattern attribute in order to force some format on user before sending the data to server.
1 <input type="text" name="txtName" pattern= “\d”/> It allows only Digit
• We can use title attribute for custom error message.
1 <input type="text" name="txtName"
pattern=“\d{10}"
It allows only 10 digits
title="Please enter 10 digit mobile number"
required/>
HTML 5 Inbuilt Validation – Without
JavaScript
<form action="" method="post">
<h1 align="center">Registration Form</h1> <hr>
<table border="2" width="50%" height="50%" align="center" >
<tr> <th><b>First Name :</b></th>
<td><input type="text" required placeholder="Enter First Name" maxlength="50"></td>
</tr>
<tr> <th> <b>Last Name : </b></th>
<td><input type="text" required placeholder="Enter Last Name" maxlength="50"></td>
</tr>
<tr> <th> <b>Contact no. :</b></th>
<td><input type="text" pattern="\d{10}" minlength="10" maxlength="10"
required placeholder="Enter Your Contact No."></td>
</tr>
<tr> <th> <b>Landline no : (079-123456)</b></th>
<td><input type="text" pattern="\d{3}-\d{6}" maxlength="10" required
placeholder="Enter Your Landline No.">
</tr>
<tr> <th><b>Email :</b></th>
<td><input type="email" required placeholder="Enter Your Email ID"></td>
</tr>
<tr> <th>Password</th>
<td><input type="password" placeholder="Enter a New Password"></td>
</tr>
<tr> <th><b>Date of Birth</b></th>
<td><input type="date" required></td>
</tr>
<tr> <th>Age</th>
<td><input type="Number" min="18" max="40" placeholder="Enter Age Between 18 to 40" required></td>
</tr>
<tr> <th> <b>Gender</b></th>
<td>Male
<input type="radio" name="gender">
Female
<input type="radio" name="gender">
</td>
</tr>
<tr> <th>Address</th>
<td><textarea name="Address" id="" cols="60" rows="3"></textarea></td>
</tr>
<tr> <th>City</th>
<td><select name="City" id="">
<option value="" disabled selected>Select City</option>
<option value="">Ahmedabad</option>
<option value="">Vadodara</option>
<option value="">Morbi</option>
</select>
</td>
</tr>
<tr> <th>Pincode</th>
<td><input type="text" pattern="\d*" maxlength="6"></td>
</tr>
<tr> <th><b>Joining Date</b></th>
<td><input type="date" required max="2022-12-31" min="2022-01-01"></td>
</tr>
<tr> <th>Cnfirm Your Form</th>
<td> <input type="submit"> <input type="reset"></td>
</tr>
</table>
</form>
META Tag
• Metadata is data (information) about data.
• The <meta> tag provides metadata about the HTML document.
• <meta> tags always go inside the <head> element, and are typically used to
specify character set, page description, keywords, author of the document,
expiry dates and viewport settings.
• Metadata will not be displayed on the page.
• The metadata can be used by search engines (keywords), browsers (how to
display content or reload page) or other web services.
• You can use <meta> tag to specify important keywords related to the document
and later these keywords are used by the search engines while indexing your
webpage for searching purpose.
Meta Tag Attributes
Attribute Value Description
charset character_set Specifies the character encoding for the HTML document
author
description
name keywords Specifies a name for the metadata
robots
expires
content-type
Provides an HTTP header for the information/value of the
http-equiv default-style
content attribute
refresh
Gives the value associated with the http-equiv or name
content text
attribute
format/URI Not supported in HTML5. Specifies a scheme to be used to
scheme
USA/Europe interpret the value of the content attribute
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript"> Meta tag – examples
Define a description of your web page:
<meta name="description" content="Free Web tutorials for HTML and CSS">
Define the author of a page:
<meta name="author" content="John Doe">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Page redirection:
<meta http-equiv = "refresh" content = “10”; url = http://www.asoit.edu.in" />
Stop the browser from caching a page (disable browser cache):
<meta http-equiv="Cache-Control" content="no-store" />
Stop the page from being listed in search result :
<meta name="robots" content="noindex,nofollow">
Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Media Tag – Audio and
Video
❑HTML5 features include native audio and video support without the need for Flash.
❑HTML5 <audio> and <video> tags make it simple to add media to a website.
❑You need to set src attribute to identify the media source and include a controls attribute so the user can play
and pause the media.
Embedding
Video
<video src = "foo.mp4" width = "300" height = "200" controls> </video>
❑You can use <source> tag to specify media along with media type and many other attributes.
Video
Attributes
Sr.No. Attribute & Description
autoplay
1 This Boolean attribute if specified, the video will automatically begin to play back as soon as it can
do so without stopping to finish loading the data.
controls
2 If this attribute is present, it will allow the user to control video playback, including volume, seeking,
and pause/resume playback.
height
3
This attribute specifies the height of the video's display area, in CSS pixels.
loop
4 This Boolean attribute if specified, will allow video automatically seek back to the start after
reaching at the end.
src
5 The URL of the video to embed. This is optional; you may instead use the <source> element within
the video block to specify the video to embed.
width
6
This attribute specifies the width of the video's display area, in CSS pixels.
Embedding
Audio
<audio src = "foo.wav" controls autoplay> </audio>
❑Most commonly used audio formats are ogg, mp3 and wav.
❑You can use <source> tag to specify media along with media type and many other attributes.
Attributes Attribute & Description
This Boolean attribute if specified, the audio will automatically begin to play back as soon as it can do so without
autoplay
stopping to finish loading the data.
Controls It will allow the user to control audio playback, including volume, seeking, and pause/resume playback.
loop This Boolean attribute if specified, will allow audio automatically seek back to the start after reaching at the end.
src The URL of the audio to embed.
iframe
❑An inline frame is used to embed another document within the current HTML document.
❑The most common use of an iframe is to load content from another site within the page
Use of iframe to display YouTube video & Google
Map
<body>
<iframe src="https://www.youtube.com/embed/ltVi3HpaWWQ"
title="YouTube video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;
web-share" style="border:0; width: 300px;height: 150px;" allowfullscreen>
</iframe>
<div>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3670.2
186920934587!2d72.53193677449633!3d23.08908891384425!2m3!1f0!2f0!
3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x395e833af6f39347%3A0xf1db9
065daea7008!2sSilver%20Oak%20University!5e0!3m2!1sen!2sin!4v16901070
23615!5m2!1sen!2sin" style="border:0; width: 300px;height: 150px;"
allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</body>
