UNIT - 2

WEBSITE DEVELOPMENT USING HTML AND CSS

By the end of this Chapter, you will be able to:

 Use a text editor to author an HTML document.

 Be able to use basic tags to denote paragraphs, emphasis or special type.
 Create hyperlinks to other documents.
 Create an email link.
 Add images to your document.
 Use a table for layout.

What is Website?
A website is a collection of web pages which contains the information about the
particular organization or institution or any product. It contains the related content
that is identified by a common domain name and published on any one web server.
Few examples of such websites are bing.com,
wikipedia.org, google.com, amazon.com etc. A website can be opened using the
software known as Browser. Commonly used browsers are Google Chrome, Internet
Explorer, Mozilla Firefox etc.

Languages used for website development

The most common programming languages used to develop websites are:HTML
(HyperText Markup Language), JavaScript, Cascading Style Sheets and PHP:
Hypertext Preprocessor. Some of these can be used as an extension of the
existing languages but some can be used entirely separate from the other
languages to create a dynamic or static website.

Purpose
Websites are developed for a particular purpose, such as commerce, education,
media and entertainment, or social networking. It can be the work of an individual, a
business or other organization for the interest of public or any personal reasons. It
helps to communicate with the world anytime, anywhere irrespective of distance.
Today the world has become a global market for the businesses also.

Types of Websites: Static and dynamic website

Static website
A static website is stored on the web server in the format that has to be sent to a
client web browser. It is mainly coded in Hypertext Markup Language (HTML)
and Cascading Style Sheets (CSS) to control the appearance of the website. These
are non-interactive websites which are only used to display the same information to
all visitors. If any changes are to be made then website owner can do it.It is a
manual process to edit the text, photos and other content and may require basic
website design skills and software. After the changes again it is published on the
same domain. Website containing the basic information or a brochure website are
often come under this category as these websites contains the present pre-defined,
static information to the user.

Dynamic website

A dynamic website is one that changes or customizes itself frequently and

automatically. Server-side dynamic pages are generated "on the fly" by computer
code that produces the HTML (CSS are responsible for appearance and thus, are
static files). There are a wide range of software systems, such as CGI, Java
Servlets and Java Server Pages (JSP), Active Server
Pages and ColdFusion (CFML) that are available to generate dynamic web systems
and dynamic sites. Various web application frameworks and web template
systems are available for general-use programming
languages like Perl, PHP, Python and Ruby to make it faster and easier to create
complex dynamic websites.
A site can display the current state of a dialogue between users, monitor a changing
situation, or provide information in some way personalized to the requirements of the
individual user. Few examples of dynamic websites are News channel sites , a retail
website with lots of products allows a user to input a search request, e.g. for the
keyword Beatles.
A 2010-era trend in websites called "responsive design" has given the best of
viewing experience as it provides with a device based layout for users. These
websites change their layout according to the device or mobile platform thus giving a
rich user experience.[6]

Section-1 Basics about Html

1.1 HTML Basics This Chapter leads you to the basics of Hyper Text Mark up Language
(HTML). HTML is the building block for web pages. You will learn to use HTML to author
an HTML page to display in a web browser.

Prerequisites
You will need a text editor, such as Notepad and an Internet browser, such as Internet
Explorer or Netscape Navigator.
Q: What is Notepad and where do I get it?
A: Notepad is the default Windows text editor. On most Windows systems, click your Start
button and choose Programs then Accessories. Its icon is a little blue notebook. Mac Users:
SimpleText is the default text editor on the Mac. In OSX use TextEdit and change the
following preferences: Select (in the preferences window) Plain text instead of Rich text and
then select Ignore rich text commands in HTML files. This is very important because if you
don’t do this HTML codes probably won’t work. One thing you should avoid using is a word
processor (like Microsoft Word) for authoring your HTML documents.
What is an Html File?
The documents themselves are plain text files with special “tags” or codes that a web
browser uses to interpret and display information on your computer screen.

 HTML stands for Hyper Text Markup Language

 An HTML file is a text file containing small markup tags
 The markup tags tell the Web browser how to display the page
 An HTML file must have an htm or html file extension

Try It:
Open your text editor and type the following text:

<html>
<head>
<title>My First Webpage</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

1. Save the file as mypage.html.

2. Start your Internet browser.
3. Select Open (or Open Page)in the File menu of your browser. A dialog box
will appear.
4. Select Browse (or ChooseFile) and locate the html file you just created -
mypage.html - select it and click Open.
5. Now you should see an address in the dialog box, for example
C:\MyDocuments\
6. mypage.html.
7. Click OK, and the browser will display the page.

Example Explained

What you just made is a skeleton html document. This is the minimum required
information for a web document and all web documents should contain these basic
components.

The first tag in your html document is <html>. This tag tells your browser that this is
the start of an html document.

The last tag in your document is </html>. This tag tells your browser that this is the
end of the html document.
The text between the <head> tag and the </head> tag is header information.
Header information is not displayed in the browser window.
The text between the <title> tags is the title of your document.

The <title> tag is used to uniquely identify each document and is also displayed in
the title bar of the browser window.

The text between the <body> tags is the text that will be displayed in your browser.

The text between the <b> and </b> tags will be displayed in a bold font.
1.2 Basic HTML Tags

The most important tags in HTML are tags that define headings, paragraphs and line
breaks.

Basic HTML Tags

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading
while <h6> defines the smallest.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6> This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading. A useful
heading attribute is “align”.

<h5 align=“left”>I can align headings </h5>

<h5 align=“center”>This is a cantered heading </h5>
<h5 align=“right”>This is a heading aligned to the right </h5>
Paragraphs

Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text.
You can use the align attribute with a paragraph tag as well.

<p align=“left”>This is a paragraph</p>

<p align=“center”>this is another paragraph</p>

Line Breaks

The <br> tag is used when you want to start a new line, but don’t want to start a new
paragraph. The <br> tag forces a line break wherever you place it. It is similar to
single spacing in a document.

Note:- The <br> tag has no closing tag.

Horizontal Rule

The <hr> element is used for horizontal rules that act as dividers between sections,
like this:

The horizontal rule does not have a closing tag. It takes attributes such as align and
width.

For instance:

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment
can be placed anywhere in the document and the browser will ignore everything
inside the brackets. You can use comments to write notes to yourself, or write a
helpful message to someone looking at your source code.
Note: - You don’t see the text between the tags <!-- and -->. If you look at the source
code, you would see the comment. To view the source code for this page, in your
browser window, select View and then select Source.

Other HTML Tags

There are logical styles that describe what the text should be and physical styles
which actually provide physical formatting. It is recommended to use the logical tags
and use style sheets to style the text in those tags.

Character tags like <strong> and <em> produce the same physical display as
<b>and <i> but are more uniformly supported across different browsers.

1.3 HTML Character Entities

Some characters have a special meaning in HTML, like the less than sign (<) that
defines the start of an HTML tag. If we want the browser to actually display these
characters we must insert character entities in place of the actual characters
themselves.
The Most Common Character Entities:

A character entity has three parts: an ampersand (&), an entity name or an entity
number, and finally a semicolon (;). The & means we are beginning a special
character, the; means ending a special character and the letters in between are sort
of an abbreviation for what it’s for. To display a less than sign in an HTML document
we must write: &lt; or&#60; the advantage of using a name instead of a number is
that a name is easier to remember. The disadvantage is that not all browsers support
the newest entity names, while the support for entity numbers is very good in almost
all browsers.

Note: Entities are case sensitive.

1.4 HTML Background

The <body> tag has two attributes where you can specify backgrounds. The
background can be a color or an image.

Bgcolor

The bgcolor attribute specifies a background-color for an HTML page. The value of
this attribute can be a hexadecimal number, an RGB value, or a color name:

<body bgcolor=“#000000”>

<body bgcolor=“rgb(0,0,0)”>

<body bgcolor=“black”>

The lines above all set the background-color to black.

Background

The background attribute can also specify a background-image for an HTML page.
The value of this attribute is the URL of the image you want to use. If the image is
smaller than the browser window, the image will repeat itself until it fills the entire
browser window.

<body background=“clouds.gif”>
<body background=“http://profdevtrain.austincc.edu/html/graphics/clouds.gif”>

The URL can be relative (as in the first line above) or absolute (as in the second line
above).

If you want to use a background image, you should keep in mind:

 Will the background image increase the loading time too much?
 Will the background image look good with other images on the page?
 Will the background image look good with the text colors on the page?
 Will the background image look good when it is repeated on the page?
 Will the background image take away the focus from the text?

Note: The bgcolor, background, and the text attributes in the <body> tag are
deprecated in the latest versions of HTML (HTML 5).

The World Wide Web Consortium (W3C) has removed these attributes from its
recommendations. Cascading Style sheets (CSS) should be used instead (to define
the layout and display properties of HTML elements).

Try It Out!

Open your text editor and type the following text:

<html>
<head>
<title>My First Webpage</title>
</head>

<body background=“http://profdevtrain.austincc.edu/html/graphics/clouds.gif”
bgcolor=“#EDDD9E”>

<h1 align=“center”>My First Webpage</h1>

<p>Welcome to my <strong>first</strong> webpage. I am writing this page using a

text editor and plain old html.</p>

<p>By learning html, I’ll be able to create webpages like a

<del>beginner</del>
pro....
<br> which I am of course.</p>

</body>
</html>

Save your page as mypage3.html and view it in your browser.

1.5 HTML Links

Webpages in a website can be linked with each other with the help of tags. HTML
uses the <a> anchor tag to create a link to another document or web page.

There are two types of linking in HTML- Internal and External.

Internal Linking

A webpage is linked within the same web page. It is done by using an absolute path or
relative path of a link. The internal link name is followed by the hash sign(#).By assigning an
id to refer section of the webpage, which is referred to as an internal link to the same page.

Syntax:
<a name= “#Text” ></a>
<a hreaf=”#Text”></a>

Try it!
 <html>

<head><title> My page </title></Head><body>

<H1><U><A name="#Top"> ADMISSSION ENQUIRY FORM </A></u></h1>

<Form method=Post action= "maoilto:[email protected]"><b>Name </b><Input type=Text

name="st_name"><br>

<b>Gender </b>

<Input type=Radio name="gender" value="Male"> Male

<Input type=Radio name="gender" value="Female"> Female <Br>

<b>E- mail </B><Input type=Text Name ="email"><br>

SELECT SUBJECTS: <BR>

<Input type=CHECKBOX value="Science"> Science <Input type=CHECKBOX value="Commerce"> Commerce

<Input type=CHECKBOX value="Arts"> Arts

<Br>

Comment<Br>

<TextAREA name="comment" Rows=5 cols=50></TEXTAREA><br>

<INPUT Type=Submit Value ="Send">

<INPUT Type=Reset Value ="Clear">

</Form>

<A href="#Top"> Top </A>

</body>

</html>

Note : In the above example highlighted text depicts the internal linking. Try the
above code and see the output in the browser window.

External Linking
The Anchor Tag and the “href” Attribute

An anchor can point to any resource on the Web: an HTML page, an image, a sound
file, a movie, etc.

The syntax of creating an anchor:

<a href=“url”>Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to tell
the address of the document or page we are linking to, and the words between the
open and close of the anchor tag will be displayed as a hyperlink.

The Target Attribute

With the target attribute, you can define where the linked document will be opened.
By default, the link will open in the current window. The code below will open the
document in a new browser window:

<a href=http://www.austincc.edu/ target=“_blank”>Visit ACC!</a>

Email Links

To create an email link, you will use mailto: plus your email address.

Here is a link to ACC’s Help Desk:

<a href=“mailto:[email protected]”>Email Help Desk</a>

To add a subject for the email message, you would add? subject= after the email
address.

For example:

<a href=“mailto:[email protected]?subject=Email Assistance”>Email Help

Desk</a>

1.6 HTML Images

The Image Tag and the “Src” Attribute

The <img> tag is an empty tag, which means that it contains attributes only and it
has no closing tag. To display an image on a page, you need to use the src attribute.
Src stands for “source”. The value of the src attribute is the URL of the image you
want to display on your page.

The syntax of defining an image:

<imgsrc= “ location of the image” height=<numeric value> width= <numeric value>

border = <numeric value> align= <left, right,….>
Image Dimensions

When you have an image, the browser usually figures out how big the image is all by
itself. If you put in the image dimensions in pixels however, the browser simply
reserves a space for the image, then loads the rest of the page. Once the entire
page is loaded it can go back and fill in the images. Without dimensions, when it runs
into an image, the browser has to pause loading the page, load the image, then
continue loading the page.

The chef image would then be:

<imgsrc=“graphics/chef.gif” width=“130” height=“101” alt=“Smiling Happy Chef”>

Image Alignment

You can set the alignment of an image also to make your webpage more
presentable.

There are five types of alignment which can be applied on the image are as follows:
 Left
 Right
 Top
 Bottom
 Middle

Note: By default, images are left aligned. The image with the top and bottom
alignment will be set at the top of the line or bottom of the line.

Few examples are given for your reference rest you can try it by changing the
alignment in the html code.

Open the file mypage2.html in your text editor and add code highlighted in bold:

Try It!
(An image with “middle” alignment.)
 <html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1 align="center">My First Web page</h1>
<p>Welcome to my first webpage. I am writing this page using a text editor
and plain
old html.</p>
<p>By learning html, I’ll be able to create web pages like a pro....<br>
which I am of course.
<!-- Who would have guessed how easy this would be :) -->
<imgsrc="C:\Users\Desktop
Desktop\graphics\chef.jpg"
align="middle" width=130 h
height=101 alt="Smiling Happy Chef">
<p align="center">This is my Chef</p>
</body>
</html>

OUTPUT:

Try It!

(An image with “bottom” alignment.)

 <html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1 align="center">My First Web page</h1>
<p>Welcome
>Welcome to my first webpage. I am writing this page using a text editor and plain
old html.</p>
<p>By learning html, I’ll be able to create web pages like a programmer<br>
which I am of course.
<!-- Who would have guessed how easy this would be :) -->
<imgsrc="C:\Users\IPWS\\Desktop\graphics\chef.jpg"
chef.jpg" align="bottom" width=130
height=101 alt="Smiling Happy Chef">
<p align="center"> This is my Chef. </p>
</body>
</html>

OUTPUT

You can try inserting images of different types such as PNG, JPEG, GIF, BMP etc.
with all the attributes of img tag.

1.7 Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr>
tag),and each row is divided into data cells (with the <td> tag). The letters td stands
fortable data, which is the content of a data cell. A data cell can contain text, images,
lists,paragraphs, forms, horizontal rules, tables, etc.

Tables and the Border Attribute

To display a table with borders, you will use the border attribute.

1.8 Inserting Audio and Video

There are various tag, which help us in enhancing the appearance of a web page. Using
<audio> and <video> tags, you will be able to incorporate Multimedia in your webpage and
can make your webpage more alive.

Inserting Audio

To insert an audio<AUDIO>tag is used in a web page.It can be used for any file format like .
MP3 e,.ogg, .wav etc.

Syntax:

<Audio controls src= “ filename ” ></Audio>

The attributes of <audio> tag are as follows:

Src : Specifies the URL of the audio file.

Controls : Display the controls on the web page.
Autoplay : Place the audio file automatically when the webpage is loaded.
Loop : Replays the audio file.
Try it!
<HTML>
<Head>
<Title> Adding audioclip </title>
</Head>
<Body>
This is my first musical web page.
<Audio controlssrc= “ C:\Users\Desktop\PPT WORK\InspirationalPop.mp3” >
Check your browser setting </Audio>
</Body>
</ HTML>

Inserting Video

To insert video in the HTML pages video tag is used it supports file formats like .MP4,
.webm, .ogg etc.

Syntax

<video controls src = “ filename “ width = height= autoplay></video>

The attributes of <video> Tag are as follows:

Src : Specifies the URL of the video file.

Controls : Displays the controls on the web page
Autoplay : The place the audio file automatically when the webpage is loaded
Height : Specifies the height of the video player displayed
Width : Specifies the width of the video player displayed

Try it!

<HTML>
<Head>
<Title> My first page </Title>
</Head>

<Body>
Check the video clip.
<video controls src = “ videofilename.mp4 “ width = 720 height= 540 autoplay>
please check your browser settings </video>
</Body>
</HTML>

Note:

If the browser does not support audio in video tag, then any text placed between
<audio></audio> and <video></video> tag will be displayed in the browser.
1.8 Frames

Frames allows multiple HTML documents to be displayed as independent Windows within

one browser window. It divides into multiple Windows in which each window displays the
separate HTML page or web page.

Syntax

<iframe src= “ “ height=200 width = 200 style= “ border- width: ;border- style:
, Border- color: “></iframe>

Example

<HTML>

<Head>

<Title> Frame page </title>

<Body>

<h1>WebPage Containing Three Frames </h1>

<iframe src="file:///C:/Users/Desktop/frame1.html" height= 400 width=400 ></iframe>

<iframe src="file:///C:/Users/Desktop/FORM1.HTML" height=400 width =400 style="border-

width:5px; border-style:solid, Border-color:green"></iframe>

<iframe src="file:///C:/Users/Desktop/frame1.html" border:none></iframe>

</Body>

</HTML>

Output:
1.9 Forms

It is a container element started by <FORM>tag and ended by</FORM>tag. It is

used to create a form on a web page.

Syntax:

<FORM NAME="FormName" ACTION = "URL" METHOD =

"method">

Attributes of FORM element are discussed below:

1. NAME -This specifies the name of the form. But this name will not be displayed on
the
form. As there can be more than one FORMs in an HTML document, a name is
required to differentiate one form from another. The NAME attribute is
optional if there is only one FORM on the web page.

NAME = "FormName"

2. ACTION - This specifies the URL where the form-data is sent when the form is
submitted.This URL is also called the destination of the form.

ACTION = "URL"

3. METHOD - This specifies how the form-data is submitted. Form-data can be

submitted
using the methods get or post. With METHOD = "get", the form-data is
submitted as URL variables, and with METHOD = "post", the form-data is
submitted as HTTP post.
METHOD = "method"

INPUT element - It is an empty element specified by <INPUT> tag. It is used to

provide an input field in a form where the user can enter the data. An input field may
be a text field, a checkbox, a radio button, a button, and more. INPUT element is
always used within the FORM element. Thus, INPUT element defines an object on
the FORM which can receive user input.

Syntax:

<INPUT TYPE = “FIELD TYPE” NAME = “FIELD NAME” VALUE = “FIELD TEXT”>
Attributes of INPUT element are discussed below:

Attribute:

TYPE

Use: The TYPE attribute determines the field type of input field to be provided in the
form.

Field type can be one of the following:

TEXT, PASSWORD, RADIO, CHECKBOX, SUBMIT, RESET, BUTTON,

IMAGE, HIDDEN, FILE.

Syntax:TYPE = "FieldType"

NAME

Use: Specifies the name of the field. This name does not appear on the FORM. It is
required for the identification/ differentiation as there can be more than one fields in a single
FORM.

Syntax: NAME = "FieldName"

VALUE

Use: Specifies the text to be displayed on the field.

Syntax: VALUE = "FieldText"

We will now discuss different field types (values of TYPE attribute) relevant to our syllabus.

1. FieldType: TEXT

Use: It provides a single line text input field where the user can enter text. Additional

Attributes:SIZE = "n" - Sets the visible size of the text field to n characters.
MAXLENGTH = "n" - Set the maximum number of characters that
can be input in the text field to n.
2. FieldType: PASSWORD

Use: It provides a single line text input field where the user can enter password.
A password field is different from a text field because a text field displays
whatever characters are entered by the user whereas a password field shows
one dot for each character input by the user. This is to prevent others from seeing the
password.

Additional Attributes: Same as those for TEXT field.

3. FieldType: RADIO

Use: It provides a radio button on the form. More than one radio buttons can have
 (and in general have) the same name. All the radio buttons that have the same name
constitute a radio group. Only one radio button of a group can be selected at one
time. That is, from a group of radio buttons, if the user selects a button, all the other
buttons in the set are deselected. When a form is submitted, selected radio button's
value (specified by the VALUE attribute) is submitted to the destination.

Additional Attributes:

CHECKED - Indicates that the radio button is selected, which can be deselected
when another choice is made. At one time, only one radio button in a radio group can
be specified as CHECKED.

4. FieldType: CHECKBOX

Use: It provides a check box on the form. With checkboxes, we can give the users a
list of items to choose from. The user can choose more than one items from the list.
We can make a group of checkboxes, by giving them the same name. When a form
is submitted, selected cheboxes' values (specified by the
VALUE attribute) are submitted to the destination.

Additional Attributes:

CHECKED - Indicates that the checkbox is to be displayed with a tick mark to show
selection. This attribute is optional.

5. FieldType: SUBMIT

Use: This provides a button on the form. When this button is clicked, the form is
submitted to the destination.

6. FieldType: RESET

Use: This provides a button on the form. When this button is clicked, the input fields
on the form are reset to their default state.

Example:

TRY IT!
 <html>

<head><title> My page </title></Head><body>

<H1><U>ADMISSSION ENQUIRY FORM </u></h1>

<Form method=Post action= "maoilto:[email protected]"><b>Name </b><Input

type=Text name="st_name"><br>

<b>Gender </b>

<Input type=Radio name="gender" value="Male"> Male

<Input type=Radio name="gender" value="Female"> Female <Br>

<b>E- mail </B><Input type=Text Name ="email"><br>

SELECT SUBJECTS: <BR>

<Input type=CHECKBOX value="Science"> Science <Input type=CHECKBOX

value="Commerce"> Commerce <Input type=CHECKBOX value="Arts"> Arts

<Br>

Comment<Br>

<TextAREA name="comment" Rows=5 cols=50></TEXTAREA><br>

<INPUT Type=Submit Value ="Send">

<INPUT Type=Reset Value ="Clear">

</Form>

</body>

</html>

Points to Remember:

Exercise

1: What are the pre requisites to learn the basics of HTML?

2: How do you define a HTML file?
3: What is the tag for making a comment?
4: What dose <cite> and <pre> tag mean?
5: What is the syntax to define background color in HTML?
6: Explain the procedure to view source code in Mozilla Firefox, Google Chrome
&Internet Explorer?
7: List out any three popular web browsers?
8: What do you mean by an anchor tag?
9: How do you insert an image and create a table in the HTML page?
10: What is the tag to insert a single line break?
11: What does W3C stand for?
12: Fill in the blanks:

(a) Word processors like ................. should be avoided.

(b) The ................. tells the web browser how to display the page
(c) ................. is the tag used for defining the Sample computer code
(d) Acronym for HTTP ................
(e) Acronym for HTML ................

Practical Work:
1. Create a website for “Tour and Travel” company.
2. Create a website on the topic – “Digital India”.
3. Create a website on famous Sports of the World.
Note: A website must contain at least 4-5 webpages.