BWD Unit-1

Chapter – 1
Getting Started With HTML :
1.1 History of HTML
HTML —which is short for HyperText Markup Language

— is the official language of the World Wide Web and
was first conceived in 1990.
HTML is a platform independent language.
HTML is a product of SGML (Standard Generalized
Markup Language) which is a complex.
The founder of HTML was Tim Berners-Lee.
He made HTML and Mosaic Browser which become
extremely popular and well-known in the 1990’s when
the Internet had been developing rapidly.
It’s nothing but a designing or layout language.
HTML is not a programming language, it is a markup language.
HTML document just contains information or say contains which is to be
published.
HTML uses markup tags to describe web pages.
It is a type of computer language that is primarily used
for files that are posted on the internet and viewed by
web browsers.
Browser can understand only one language that one is
HTML.
We can write HTML in normal Notepad to Dreamweaver
means no of software.
We can create static pages with extension either .HTML or .HTM.
The HTML contains TAGS and attributes of that tags.
With the help of HTML language we can develop static pages.
Most browsers allow the user to view the HTML of any webpage. In
Firefox, for example, press Ctrl + U to view the page source.
HTML is the language for describing the structure of web pages.
It is used to build a website. consists of a series of elements
HTTP
Hyper Text Transfer Protocol

HTTP protocol is used by the World Wide Web.
HTTP defines how messages are formatted and transmitted, and what
actions Web servers and browsers should take in response to various
request.
How HTML pages serves?

To access information stored in the
form of web pages, users (clients) must connect to a Web server.
The machine where the Web site actually resides is called a Web
server.
Web Server stores web document. T
The web pages and related resources are stored into the central computer
and these files to be read over TCP/IP is called web server.
The server computer runs special software called web server that do:
Website Management
Receive Clients Requests and Respond to a client’s request by
providing the page.
When we send a request for a Web page by entering a Web site address,
this request is sent to a Web Server. The Web server then sends the Web
page to your browser.
In the case of the Internet, the web server and browser are usually on
two different machines, possibly many miles apart. However, in a more
local situation, we might set up a machine that runs the web server
software, and then use a browser on the same machine to look at its web
pages.
Computers that offer the facility to read information stored in the web
pages are called Web Clients.
A very large Web site may be spread over a number of servers in

different geographic locations.
Advanatage and Disadvanatage:-
Advantages Disadvantages
Easy- It is super easy to learn and Complexity- A lot of code can be
use. complex to handle
Independent- It is a platform- Security- It is not secure on its own.
independent language which means it You need third-party services to
can work across all devices. provide more security.
Industry Standard- Accepted by all Limitations- Alone HTML does not
modern browsers like Chrome, Safari, have many capabilities. Html alone
Opera, etc can create basic web pages.
Not Centralized- Each page should be
Simplicity – The coding structure is
programmed separately. It is one of
very simple to understand
the biggest disadvantages.
HTML is simple to edit as is plain Dynamic Pages- Creating dynamic
text. pages is hard. By default all HTML
pages are static.
Write Code- You have to write code
Embed Media- Easily embed audio,
for the simplest web pages. It can be
video, photos, and other types of
a problem if a website has a lot of
media files.
pages.
Structure of HTML
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
What is Tag?
a tag is a way of representing an HTML element in the program.
Can be a staring tag and ending tag.
There are two categories of tags.

HTML tags can be of two types. They are
1. Paired Tags
2. Unpaired Tags
1 Paired Tags
A tag is said to be a paired tag if they have both Opening Tag and the Closing
Tag. Paired tags are also known as Container Tags.
Example#
<b>Hi i am Shyam </b>
2. Unpaired Tags
An unpaired tag does not have a companion tag. Unpaired tags are also known
as Singular or Stand-Alone Tags.
Example#
<br> , <hr>
What is Element?
An element in HTML usually consist of a start tag <tag name>, close tag </tag
name> and content inserted between them.
Such as:
<title>WebPage</title>
Comment Tag:-
You can add comments to your HTML source by using the following syntax:


Example:-

<p>This is a paragraph.</p>
<!DOCTYPE> Declaration
All HTML documents must start with <!DOCTYPE> declaration. It is

information to the browser about what document type to expect.
<!DOCTYPE> declaration is an instruction to the web browser about what

version of HTML the page is written in.
<HTML> Tag
USE: HTML tag represents the root of html document, holding all the
content of an HTML document, and it also tells the browser that
you're using HTML.
<head> tag
USE: The <head> element is a container for metadata and is placed

between the <html> tag and the <body> tag.
Metadata is the data about the HTML document. Metadata is not displayed.
Metadata is typically define the document title, character set, style, scripts
and other meta information.
The following elements can go inside <head> element.
 <title>
 <style>
 <base>
 <link>
 <meta>
 <script>
 <noscript>
1) Title Example:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to HTML</title>
</head>
<body>
</body>
</html>
<title> tag
USE: The <title> tag defines the title of the document. The title must be
text only and it is shown in browser’s title bar.
The <title> tag is required in HTML document.
The content of a page title is very important for search engine

optimization.
You can have more than one <title> element in HTML document.
2)<Style >
The <style> tag in HTML helps us to modify our text, viewed in the page. This
modification includes changing font size, font family, font color etc. Not only
the texts but also we can change the style of a body ar part of a page. Now
let’s look at various attributes of style and what else the tag supports.
The <style> tag is used to define style information (CSS) for a document.
Syntax:
<tagname style="property:value;">
 The tagname includes <p>, <body>, from <h1> to <h6> etc.
 The property is borrowed from CSS like color, font-size, font-family
etc.
 The value is also borrowed from CSS.
1)HTML Font Family: The font family changes the font style of a text and can
be used in any text writing tag like <p> or heading tag.
<html>
<head>
<title>Font Family</title>
</head>
<body>
<h1 style="font-family:commanders;">Welcome to HTML.</h1>
<h2 style="font-family:Chaparral Pro Light;"> Welcome to HTML.</h2>
<h3 style="font-family:algerian;"> Welcome to HTML.</h3>
<p style="font-family:Castellar;"> Welcome to HTML.</p>
</body>
</html>
2)HTML Font Size: The font size changes the size of a text and this can also
be used in any text writing tag like <p> or heading tag. The units can be given
in “%” or pixels or other units can also be included.
Example:
<html>
<head>
<title>Font Size</title>
</head>
<body>
<h1 style="font-size:80%;"> Welcome to HTML..</h1>
<h2 style="font-size:150%;"> Welcome to HTML..</h2>
<h3 style="font-size:20px;"> Welcome to HTML..</h3>
<p style="font-size:30px;"> Welcome to HTML..</p>
</body>
</html>
3)HTML Font Color: The font color tag changes the color of a text and can be
used in any text writing tag like <p> or heading tag. We can use both name of
the colors or also the color codes that is mainly used in Photoshop. For various
color codes or to pick from various color ranges refer HTML Color Codes .
Example:
<html>
<head>
<title>Font Color</title>
</head>
<body>
<h1 style="color:red;"> Welcome to HTML.</h1>
<h2 style="color:#8CCEF9;"> Welcome to HTML.</h2>
<h3 style="color:green;"> Welcome to HTML.</h3>
<p style="color:#810CA6;"> Welcome to HTML.</p>

</body>
</html>
4)HTML Text Align: The text alignment tag is used to change the alignment
of a text including centre, left or right alignment.
Example:
<html>
<head>
<title>Text Align</title>
</head>
<body>
<h1 style="text-align:left;"> Welcome to HTML.</h1>
<h2 style="text-align:center;"> Welcome to HTML.</h2>
<p style="text-align:right;"> Welcome to HTML.</p>
</body>
</html>
5)HTML Background Color: Using this attribute we can change the color of

the background page or web page. This attribute is used along with the body
tag to change the whole color of the body. It can also be used along with the
text tags to change the text block’s color.
Example:
<html>
<head>
<title>Background Color</title>
</head>
<body style="background-color:#616A6B;">
<h1 style="font-family:commanders;
background-color:yellow;">Hello GeeksforGeeks.</h1>
<h2 style="font-family:algerian;
background-color:cyan;">Hello GeeksforGeeks.</h2>
<p style="font-family:Castellar;
background-color:green;">Hello GeeksforGeeks.</p>
</body>
</html>
3)Base:-
The <base> tag specifies the base URL and/or target for all relative URLs in a
document.
The <base> tag must have either an href or a target attribute present, or both.
There can only be one single <base> element in a document, and it must be

inside the <head> element
Syntax:
<base href = "SAMPLE_URL">
Example:-
Specify a default URL and a default target for all links on a page:
<head>
<base href="https://example.com//" target="_blank">
</head>
<body>
<a href="https://example.com/">HTML base Tag</a>
</body>
4)Link
The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you can click on to
jump to another document.
When you move the cursor over a link in a Web page, the arrow will turn into a
little hand.
The most important attribute of the <a> element is the href attribute, which
indicates the link’s destination.
There are two steps to create link

1. The location of the target link
2. The text or image to be displayed in place of the target link address
There are two types of path

ABSOULTE
Absolute path contains parent folders and directory information. It needs to define whole
path for hyper link in the HREF attribute
< A HREF= "C : \ WINDOWS \ DESKTOP \ OPEN.HTML> OPEN < /A >
RELATIVE
A relative path describes the location of a file in relation to another

file on the same current Directory.
< A HREF= "OPEN.HTML"> OPEN < /A >
Syntax of creating Hyperlink

With Text
<a href="url">Link text</a>
With Image
<a href="url"><img src=’path’></a>
There are two types of Link

Internal (In one page)
To mark the destination of a link, you use the NAME attribute of

the anchor tag.
<a name="bookmark1">...</a>
For link write # must be placed before the name value.
<a href="#bookmark1">...</a>
External (Between two pages)
For link write <a href="Pageno2.html">...</a>
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The a href attribute</h1>
<p>An absolute URL: <a

href="https://www.javatpoint.com/">javatpoint</a></p>
Absolute url(a full web address)
<p>A relative URL: <a href="tag_a.asp">The a tag</a></p>
A relative URL(without the "https://www" part)
</body>
</html>
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
 self - Default. Opens the document in the same window/tab as it was

clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window
Example:
<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<a href="https:// www.javatpoint.com /" target="_blank">Visit javatpoint!</a>
<p>If target="_blank", the link will open in a new browser window or tab.</p>
</body>
</html>
5)Meta:-
HTML <meta> tag is used to represent the metadata about the HTML document.
It specifies page description, keywords, copyright, language, author of the
documents, etc.
The metadata does not display on the webpage, but it is used by search engines,
browsers and other web services which scan the site or webpage to know about
the webpage.
With the help of meta tag, you can experiment and preview that how your
webpage will render on the browser.
The <meta> tag is placed within the <head> tag, and it can be used more than
one times in a document.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>
6) HTML <script> Tag
The <script> tag is used to embed a client-side script (JavaScript).
The <script> element either contains scripting statements, or it points to an

external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and
dynamic changes of content.
Example:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> JavaScript Tutorials</h1>
<script>
//write JavaScript code here..
alert('Hello, how are you?')
</script>
</body>
</html>
<body> tag
USE: The <body> tag defines the document’s body. The <body> element
contains all the contents of HTML document such as headings,
paragraphs, images, hyperlinks, tables, lists etc.
There can be only one <body> element in HTML document.
Syntax:
<body> Body Contents... </body>
What is Attributes:
o attribute is a piece of markup language used to adjust the behavior or

display of an HTML element. For example, attributes can be used to
change the color, size, or functionality of HTML elements.
o Each element or tag can have attributes, which defines the behaviour of
that element.
o Attributes should always be applied with start tag.
o The Attribute should always be applied with its name and value pair.
o The Attributes name and values are case sensitive.
o You can add multiple attributes in one HTML element, but need to give
space between two attributes.
Syntax:
<element attribute_name="value">content</element>
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h1> This is Style attribute</h1>
7. <p style="height: 50px; color: blue">hello welcome to html </p>
8. <p style="color: red">It will change the color of content</p>
9. </body>
10. </html>
Attributes: There are many attributes in the <body> tag which are

depreciated from HTML5 are listed below:
 background : It contains the URL of the background image. It is used
to set the background image.
 bgcolor: It is used to specify the background color of an image.
 alink: It is used to specify the color of the active link.
 link: It is used to specify the color of visited links.
 text: It specifies the color of the text in a document.
 vlink: It specifies the color of visited links.
Heading and paragraph Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Add Background color

<!DOCTYPE html>
<html>
<head>
<title>HTML Backgorund Color</title>
</head>
<body style="background-color:grey;">
<h1>coding </h1>
<p>Welcome to world of programming </p>
</body>
</html>
Or
//Adding background color
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Red;">red</h1>
<h1 style="background-color:pink;">pink</h1>
</body>
</body>
</html>
Adding Background image
<!DOCTYPE html>
<html>
<body>
<h2>Background Image</h2>
<p>A background image for a p element:</p>
<p style="background-image: url('download.jfif');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a p element.<br>
By default, the background-image<br>
will repeat itself in the directions.<br>
browser window to see how the<br>
background image behaves.</p>
</body>
</html>
Introduction to HTML 5
HTML 5 is the fifth and current version of HTML. HTML5 is not only a new
version of HTML language enriched with new elements and attributes, but a set
of technologies for building more powerful and diverse web sites and
applications, that support multimedia, interact with software interfaces, etc.
Advnatage of HTML5:-
 It Supports by all Modern Browsers

 It is more device friendly.it is easy for use.
 It has introduced new multimedia features which support audio and
video controls by using <audio> and <video> tags.
 There are new graphics elements including vector graphics and tags.
 Enrich semantic content by including <header> <footer>, <article>,
<section> and <figure> are added.
 It supports geolocation, which makes it possible to determine the
users’ location.
 Web storage facility which provides web application methods to store
data on the web browser.
 Uses SQL database to store data offline.
 Capable of handling incorrect syntax.
 DisAdvantage of HTML5:
 It supported only by modern browsers.
 You must write long code which is time-consuming.
Structure of HTML 5
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
<section>
"A section is a thematic grouping of content, typically with a heading". For

example, numbered sections of a thesis.
We can think section is like group in which particular information will display.
We can say it an alternative option of div tag.
Example #
<section id="about_us_info">
<h1> heading </h1>
<p> some data </p>
</section>
<section id="contact_info">
<h1> heading </h1>
<p> some data </p>
</section>
<article>
Article means options contents of the home , about us.
<article> tag includes news articles, blog posts, or user comments.
If under an article we have comments, we can use an article tag for the main
post and have inside of it an article tag for each comment.
Example#
<article class="article">
<p>article, some text</p>
<article class="comment"><p>comment 1</p></article>
<article>
<aside>
This tag contains information like sidebar , advertisment or some image.
We can show content related to that article but not part of the main flow.
Example#
<section id="main_content_info">
<h1> heading </h1>
<p> some data </p>
</section>
<aside id="top_5songs_list">
some data
</aside>
<header> <footer>
<header> as the name suggest ,The <header> tag can be used to group header
information, of a whole document or an article, inside a document. <footer> tag
typically contains the author of the document, copyright information, links to
terms of use, contact information, etc.
<header> tag is used to represent the introductory content to an article or web

page.
We can have multiple header and footer tags in one page, of different section.
Each article could have it's own header.
Example#
<section id="page">
<header>the page header content</header>
<article>
<header>the article header</header>
<footer>the article footer</footer>
</article>
</section>
<footer>the page footer content</footer>
<nav>
As the name suggess ,the nav section tag is used to delimiter a navigation area of
your document.
We can add hyperlink and menus from here.
Example#
<body>
<header>
<nav>
<ul>
<li>navigation button 1</li>
</ul>
</nav>
</header>
</body>
Example 2:
<html>
<head>
<title>Nav Tag</title>
<style>
a{
text-decoration: none;
color: green;
font-size: 20px;
padding: 8px;
a:hover{
color: blue;
}
h1{
text-align: center;
</style>
</head>
<body>
<h1>Example of Nav tag</h1>
<nav>
<a href="#">Home</a> |
<a href="#">Courses</a> |
<a href="#">About-us</a> |
<a href="#">Contact-us</a> |
</nav>
</body>
</html>

BWD Unit-1

Uploaded by

Document Information

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

BWD Unit-1

Uploaded by

Copyright:

Available Formats

Chapter – 1

Getting Started With HTML :

1.1 History of HTML

HTML —which is short for HyperText Markup Language

Hyper Text Transfer Protocol

How HTML pages serves?

Web Server stores web document. T

A very large Web site may be spread over a number of servers in

a tag is a way of representing an HTML element in the program.

Can be a staring tag and ending tag.

There are two categories of tags.

All HTML documents must start with <!DOCTYPE> declaration. It is

<!DOCTYPE> declaration is an instruction to the web browser about what

USE: The <head> element is a container for metadata and is placed

The following elements can go inside <head> element.

The <title> tag is required in HTML document.

The content of a page title is very important for search engine

The <style> tag is used to define style information (CSS) for a document.

<h1 style="color:red;"> Welcome to HTML.</h1>

<h2 style="color:#8CCEF9;"> Welcome to HTML.</h2>

<h3 style="color:green;"> Welcome to HTML.</h3>

<p style="color:#810CA6;"> Welcome to HTML.</p>

5)HTML Background Color: Using this attribute we can change the color of

The <base> tag must have either an href or a target attribute present, or both.

There can only be one single <base> element in a document, and it must be

<base href="https://example.com//" target="_blank">

<a href="https://example.com/">HTML base Tag</a>

The HTML <a> tag defines a hyperlink.

There are two steps to create link

There are two types of path

< A HREF= "C : \ WINDOWS \ DESKTOP \ OPEN.HTML> OPEN < /A >

A relative path describes the location of a file in relation to another

< A HREF= "OPEN.HTML"> OPEN < /A >

Syntax of creating Hyperlink

There are two types of Link

To mark the destination of a link, you use the NAME attribute of

External (Between two pages)

For link write <a href="Pageno2.html">...</a>

<p>An absolute URL: <a

Absolute url(a full web address)

<p>A relative URL: <a href="tag_a.asp">The a tag</a></p>

A relative URL(without the "https://www" part)

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

 self - Default. Opens the document in the same window/tab as it was

<h2>The target Attribute</h2>

<a href="https:// www.javatpoint.com /" target="_blank">Visit javatpoint!</a>

<meta name="description" content="Free Web tutorials">

<meta name="keywords" content="HTML,CSS,XML,JavaScript">

<meta name="author" content="John Doe">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<p>All meta information goes in the head section...</p>

6) HTML <script> Tag

The <script> tag is used to embed a client-side script (JavaScript).

The <script> element either contains scripting statements, or it points to an

There can be only one <body> element in HTML document.

o attribute is a piece of markup language used to adjust the behavior or

Attributes: There are many attributes in the <body> tag which are

Heading and paragraph Example:

<h1>My First Heading</h1>

Add Background color

//Adding background color

Adding Background image