Professional Documents
Culture Documents
Unit 4
Unit 4
Basics of Web Design – www, W3C, Web Browser, Web Server, Web Hosting, Web Pages, DNS,
URL, Introduction to HTML, XHTML, DHTML, HTTP.
Overview of HTML 5 – Basic Formatting Tags: heading, paragraph, break, underline, bold, italic,
superscript, subscript, font and image, attributes: align, color, bgcolor, font face, border, size,
navigation links using anchor tag: internal, external, mail and image, lists: ordered, unordered and
definition, HTML media tags: audio and video
The development of the World Wide Web was begun in 1989 by Tim Berners-Lee and his colleagues
at CERN, an international scientific organization based in Geneva, Switzerland. They created
a protocol, HyperText Transfer Protocol (HTTP), which standardized communication between servers
and clients. Their text-based Web browser was made available for general release in January 1992.
World Wide Web, which is also known as a Web, is a collection of websites or web pages stored in web
servers and connected to local computers through the internet. These websites contain text pages,
digital images, audios, videos, etc. Users can access the content of these sites from any part of the
world over the internet using their devices such as computers, laptops, cell phones, etc. The WWW,
along with internet, enables the retrieval and display of text and media to your device.
W2C stands for "World Wide Web Consortium." The W3C is an international community that includes
a full-time staff, industry experts, and several member organizations. These groups work together to
develop standards for the World Wide Web.
The mission of the W3C is to lead the Web to its full potential by developing relevant protocols and
guidelines. When browsers conform to the W3C standards, it also helps Web pages appear consistent
across different browsers.
Web Browsers
Web Browsers are software installed on your PC to access the Web, such as Netscape Navigator,
Microsoft Internet Explorer or Mozilla Firefox.
On the Web, when you navigate through pages of information, this is commonly known as web
browsing or web surfing.
There are four leading web browsers − Explorer, Firefox, Netscape, and Safari, but there are many
others browsers available.
Internet Explorer
Internet Explorer (IE) is a product from software giant Microsoft. This is the most commonly used
browser in the universe. This was introduced in 1995 along with Windows 95 launch and it has passed
Netscape popularity in 1998.
Google Chrome
This web browser is developed by Google and its beta version was first released on September 2,
2008 for Microsoft Windows. Today, chrome is known to be one of the most popular web browser
with its global share of more than 50%.
Mozilla Firefox
Firefox is a new browser derived from Mozilla. It was released in 2004 and has grown to be the
second most popular browser on the Internet.
You can download a latest version of this browser by clicking here → Download Firefox
Safari
Safari is a web browser developed by Apple Inc. and included in Mac OS X. It was first released as a
public beta in January 2003. Safari has very good support for latest technologies like XHTML, CSS2 etc.
Opera
Opera is smaller and faster than most other browsers, yet it is full- featured. Fast, user-friendly, with
keyboard interface, multiple windows, zoom functions, and more. Java and non Java-enabled versions
available. Ideal for newcomers to the Internet, school children, handicap and as a front-end for CD-
Rom and kiosks.
Web server
Web server is a computer where the web content is stored. Basically web server is used to host the
web sites but there exists other web servers also such as gaming, storage, FTP, email etc.
Web site is collection of web pages whileweb server is a software that respond to the request for web
resources.
Web Server Working
Web server respond to the client request in either of the following two ways:
Sending the file to the client associated with the requested URL.
Generating response by invoking a script and communicating with database
Web hosting
When a hosting provider allocates space on a web server for a website to store its files, they are
hosting a website. Web hosting makes the files that comprise a website (code, images, etc.) available
for viewing online. Every website you’ve ever visited is hosted on a server.
The amount of space allocated on a server to a website depends on the type of hosting. The main
types of hosting are shared, dedicated, VPS and reseller. They are differentiated by the kind of
technology used for the server, the level of management provided and the additional services on offer.
web hosting is the process of renting or buying space to house a website on the World Wide Web.
Website content such as HTML, CSS, and images has to be housed on a server to be viewable online.
Web Page
web page is a document available on world wide web. Web Pages are stored on web server and can
be viewed using a web browser.
A web page can cotain huge information including text, graphics, audio, video and hyper links. These
hyper links are the link to other web pages.
Collection of linked web pages on a web server is known as website. There is unique Uniform
Resource Locator (URL) is associated with each web page.
Static Web page
Static web pages are also known as flat or stationary web page. They are loaded on the client’s
browser as exactly they are stored on the web server. Such web pages contain only static information.
User can only read the information but can’t do any modification or interact with the information.
Static web pages are created using only HTML. Static web pages are only used when the information
is no more required to be modified.
Used to link web pages on different Used to link web pages within the same website.
websites
Changes when the server name or Remains same even of we change the server name
directory name changes or directory name.
Edu Education
Gov U.S. government agency
What is HTML?
</body>
</html>
Example Explained
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Learn HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).
We believe in that using a simple text editor is a good way to learn HTML.
Follow the steps below to create your first web page with Notepad or TextEdit.
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Windows 7 or earlier:
</body>
</html>
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML
files).
Tip: You can use either .htm or .html as file extension. There is no difference, it is up to you.
Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose
"Open with").
HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
Example
<!DOCTYPE html>
<html>
<body>
</body>
</html>
Try it Yourself »
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages
correctly.
It must only appear once, at the top of the page (before any HTML tags).
<!DOCTYPE html>
HTML Tags
Tags are coded instructions that are referred to as source code. HTML tags are keywords enclosed in a pair of
angular brackets(< and >). These tags mark the beginning and end of an HTML element. The first tag is known as
opening tag or the ON tag. The end tag is known as the closing tag or the OFF tag. It is preceded by a slash(/) .
Two types of tags are a) Container tags – These tags have a beginning and an end tag. B)Empty tags – These tags
have only an opening or a start tag. The <br> tag defines a line break, and is an empty element without a closing
tag:
HTML Elements
HTML documents are made up by HTML elements. An element is a collection of start tag, attributes, end tag,
content between them. Content between them. <tagname>content</tagname> eg: <h1>CHAPTER 1</h1>
All the HTML elements can be categorized into two categories (a) Block Level Elements (b)Inline Elements. Block
Elements A block-level element always start with new line and takes the full width of web page, from left to
right. Eg: <p>,<h1> etc They all start on their own new line, and anything that follows them appears on its own
new line. Inline Elements Inline elements does not start with new line and take width as per requirement. They
are mostly used with other elements. Eg: <b>,<i> etc
HTML Attributes
HTML attributes are special words which provide additional information. They are the modifier of the HTML
element. Attributes should always be applied with start tag. The Attribute should always be applied with its
name and value pair. User can add multiple attributes in one HTML element, but need to give space between
two attributes. syntax =<"value">.
HTML Headings
Center
right
HTML Paragraphs
HTML paragraphs are defined with the <p> tag. Attributes are same as the heading tag.
Center
right
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML <html> Tag
Example
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Body Tag
The <body> element contains all the contents of an HTML document, such as headings, paragraphs,
images, hyperlinks, tables, lists, etc.
Bold
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
ITALIC
<html>
<body>
The HTML <em> element also defines emphasized text. The content inside is typically displayed in
italic.
<em>This text is emphasized</em>
HTML <small> Element
The HTML <sub> element defines subscript text. Subscript text appears half a character below the
normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical
formulas, like H2O:
<p>This is <sub>subscripted</sub> text.</p>
HTML <sup> Element
The HTML <sup> element defines superscript text. Superscript text appears half a character above the
normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes,
like WWW[1]:
<p>This is <sup>superscripted</sup> text.</p>
Font tag
Fonts play a very important role in making a website more user friendly and increasing content
readability. Font face and color depends entirely on the computer and browser that is being used to
view your page but you can use HTML <font> tag to add style, size, and color to the text on your
website. You can use a <basefont> tag to set all of your text to the same size, face, and color.
The font tag is having three attributes called size, color, and face to customize your fonts. To change
any of the font attributes at any time within your webpage, simply use the <font> tag. The text that
follows will remain changed until you close with the </font> tag. You can change one or all of the font
attributes within one <font> tag.
The font tag is used to change the color, size, and style of a text. The base font tag is used to set all
the text to the same size, color and face.
The font tag has basically three attributes which are given below:
Size
Face/Type
Color
font Size: This attribute is used to adjust the size of the text in the HTML document using font tag
with size attribute. The range of size of the font in HTML is from 1 to 7 and the default size is 3.
Font face: Font type can be set by using face attribute with font tag in HTML document. But the fonts
used by the user needs to be installed in the system first.
Font Color: Font color is used to set the text color using font tag with color attribute in HTML
document. Color can be specify either with its name or with its hex code.
Example 1
<html>
<head>
<title>Example of Font Type</title>
</head>
<body>
<font face = "Times New Roman" size = "6">
GeeksforGeeks!!</font><br />
<font face = "Verdana" size = "6">
GeeksforGeeks!!</font><br />
<font face = "Comic sans MS" size =" 6">
GeeksforGeeks!!</font><br />
<font face = "WildWest" size = "6">
GeeksforGeeks!!</font><br />
<font face = "Bedrock" size = "6">
GeeksforGeeks!!</font><br />
</body>
</html>
ANOTHER OPTION
To change the text font in HTML, use the style attribute. The style attribute specifies an inline style for
an element. The attribute is used with the HTML <p> tag, with the CSS property font-family, font-size,
font-style, etc.
<!DOCTYPE html>
<html>
<head>
<title>HTML Font</title>
</head>
<body>
<h1>Our Products</h1>
<p style = "font-family:georgia,garamond,serif;font-size:16px;font-style:italic;">
This is demo text
</p>
</body>
</html>
HTML <img> Tag
Note: Also, always specify the width and height of an image. If width and height are not specified, the
page might flicker while the image loads.
<img src="img_girl.jpg" alt="Girl inajacket" width="500" height="600">
Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor
in which we want to use the inline property for adding the border.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the border using inline property
</Title>
</Head>
<Body>
<h1> Hello User </h1>
<h2> Your are at JavaTpoint Site </h2>
</Body>
</Html>
Now, place the cursor inside the opening tag of that text around which we want to add the border.
And then, we have to type the style attribute. And then, we have to type the border property in the
style attribute same as shown in the following block:
14.1M
286
History of Java
1. <h1 style="border:"> Hello User!!! </h1>
Step 3: And then we have to give the border color in the border property.
1. <h1 style="border:orange;"> Hello User!!! </h1>
Step 4: We can also give the style and width of the border which we want to add in the Html code. If
we want to add then we have to type the border-width and border-style property just after
the border property.
1. <h1 style="border:orange; border-width:5px; border-style:solid;"> Hello User!!! </h1>
Step 5: And, at last, we have to save the Html file and then run the file in the browser.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the border using inline property
</Title>
</Head>
<Body>
<font style="border:blue; border-width:10px; border-style:outset;">
JavaTpoint </font>
<center>
<h1 style="border:orange; border-width:5px; border-style:solid;"> Hello User!!! </h1>
<h2 style="border:green; border-width:8px; border-style:dashed"> Your are at JavaTpoint Site!.... <
/h2>
</center>
</Body>
</Html>
HTML Links
The HTML Links are hyperlinks that means when you click on a link, it jump son another document.
Syntax
Following is the syntax −
Value Explanation
_top It opens the linked document in the full body of the window
<!DOCTYPE html>
<html>
<head>
<title>HTML Link Color</title>
</head>
<body>
<h2>About</h2>
<p>
Our <a href="/about/about_team.htm" style="color: red">Team</a>
comprises of programmers, writers, and analysts.
</p>
</body>
</html>
Internal Links in html
An internal link is used in html page to navigate properly in the webpage. If you want to go to any
specific location in the same page by clicking on a link, you can create an internal link in the
webpage. <a> tag is used for link creation in html page.
Syntax:
<a href= “#link1”> MyLink</a>
Here “href” contain the location name where the link will navigate us when we click on “MyLink”. The
location is given a name for reference and the name contain “#” at the time of creating link.
Example:
<html>
<head>
</head>
<body>
<a id="home">main menu</a>
<a href="#lession1">Lession.1</a><br />
<a href="#lession2">Lession.2</a><br />
<a href="#lession3">Lession.3</a><br />
<a href="#lession4">Lession.4</a><br />
<br />
Example
<a href="default.asp"> <img src="smiley.gif" alt="HTMLtutorial" width=40% height= 40%>
</a>
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Example
Item
Item
Item
Item
1. First item
2. Second item
3. Third item
4. Fourth item
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML List Tags
Tag Description
The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
Type Description
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Control List Counting
By default, an ordered list will start counting from 1. If you want to start counting from a specified
number,
Example
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Note : List can be reversed by using reversed attribute - Specifies that the list order should be descending
(9,8,7...) start number Specifies the start value of an ordered list
Example
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
HTML Email Tag
HTML <a> tag provides you option to specify an email address to send an email. While using <a> tag
as an email tag, you will use mailto: email address along with href attribute. Following is the syntax of
using mailto instead of using http.
<a href = "mailto: abc@example.com">Send Email</a>
This code will generate the following link which you can use to send email.
Send Email
Now, if a user clicks this link, it launches one Email Client (like Lotus Notes, Outlook Express etc. )
installed on your user's computer. There is another risk to use this option to send email because if
user do not have email client installed on their computer then it would not be possible to send email.
Default Settings
You can specify a default email subject and email body along with your email address. Following is the
example to use default subject and body.
<a href = "mailto:abc@example.com?subject = Feedback&body = Message">
Send Feedback
</a>
This code will generate the following link which you can use to send email.
HTML5 features include native audio and video support without the need for Flash.
The 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.
HTML media tags: audio and video
Multimedia on the web is sound, music, videos, movies, and animations. Multimedia elements (like
sounds or videos) are stored in media files. Multimedia files also have their own formats and different
extensions like .wav, .mp3, .mp4, and .avi. : HTML audio tag is used to define sounds such as music
and other audio clips. Currently there are three supported file format for HTML5 audio tag. 1. mp3 2.
wav 3. Ogg
(Three video formats supported for HTML video tag: 1. mp4 2. webM 3. ogg Example : Attribute Value
Description autoplay Specifies that the video will start playing as soon as it is ready controls Specifies
HTML is written using HTML elements, which consist of tags, primarily and opening tag and a closing
tag. The data between these tags is usually the content. The main objective of HTML is to allow web
browsers to interpret and display the content written between the tags. The tags are designed to
describe the page content. HTML comes with predefined tags. They allow one to insert images, text,
videos, forms and other pieces of content together into a cohesive webpage.
Elements of HTML are the basic building blocks of all websites. HTML allows images and objects to be
embedded in the webpage. It can also be used to create interactive forms. HTML also provides the
means to create structured documents. It does this by denoting structural semantics for text such as
headings, paragraphs, lists, links, quotes and other items. However these days, web pages are rarely
designed using only HTML. HTML allows for the programmer to embed scripts written in languages
such as JavaScript, which many often do. This changes the look and behavior of the HTML web pages.
XHTML, on the other hand, stands for Extensible HyperText
Markup Language. It is a markup language written in XML. It is a collection of XML markup languages
that mirror or extend versions of HTML. Essentially, it is a hybrid between HTML and XML specifically
designed for Net device displays. It is HTML defined as an XML application.
XHTML uses three XML namespaces that correspond to three HTML 4.0 DTDs: Strict, Transitional, and
Frameset. These namespaces are used to qualify element and attributes names by associating them
with namespaces identified by URI references. The namespaces also prevent identically custom-named
tags, which may be used in different XML documents from being read the same way. Hence, each
custom tag is read differently.
XHTML markup must conform to the markup standards defined in a HTML DTD. In fact, XHTML is
almost identical to HTML 4.01. However, it is a stricter and cleaner version of HTML 4.01.
As XHTML is in part HTML, it is supported by almost all major browsers. However, in order to be
compatible with the said Net devices, XHTML must go through a modularization process. In this, the
device designer will specify which elements are supported by using standard building blocks. The
content creators can then target these building blocks or modules. These modules conform to certain
standards. Hence, XHTML extensibility makes sure that the layout and presentation stays more-or-less
the same over various platforms.
DHTML also allows the pages to change at any time, without returning to the Web server first. It allows
scripting languages to change a web page's look and function after the page has been fully loaded and
during the viewing process. It also allows the user to add effects to their pages that are otherwise
difficult to achieve.
Wikipedia list additional DHTML features, such as DHTML allows the developers to:
Animate text and images in their document, independently moving each element from any
starting point to any ending point, following a predetermined path or one chosen by the
user.
Embed a ticker that automatically refreshes its content with the latest news, stock quotes,
or other data.
Use a form to capture user input, and then process, verify and respond to that data without
having to send data back to the server.
Include rollover buttons or drop-down menus.
XML is a text-based data format with strong support via Unicode for languages. It emphasizes
simplicity, generality, and usability over the Internet. It is also widely used for the representation of
arbitrary data structures, especially in web services. Programmers often use APIs while processing XML
data and schema systems to aid in the definition of XML-based languages.