WEB DESIGNING

HTML means “Hypertext Markup Language is one of the languages to create web
pages through hypertext links”.HTML is used for formatting text, input tables and forms,
scrolling the text and it is mainly used for linking one webpage to another web page.

THE BASIC TAGS/MARKUP TAGS:

1) HTML: This element tells our browser that the file contains HTML coded
information. The file extension is .html.
2) HEAD: The head element identifies the first part of our HTML coded document that
contains the title.
3) TITLE: The title element contains title of the document.
4) BODY: The second and largest part of our HTML document is the body, which
contains the content of our document.
TEXT FORMATING TAGS:
TAG DESCRIPTION
<P> Defines paragraph
<FONT> Defines font tag
<B> Defines bold tag
<BIG> Defines big text
<I> Defines italic text
<SMALL> Defines small text
<SUB> Defines subscripted text
<SUP> Defines superscripted text
<INS> Defines inserted text
<DEL> Defines deleted text
<CENTER> Defines center text
<BR> To break the text
<HR> To draw horizontal line

INLINE IMAGES: Inline images are used to display images on webpage.

The basic format to include images is:
<IMG SRC =Image name>
Where SRC stands for source and Image Name is the URL (Uniform Resource Locator)of the
image file.
Ex: <IMG SRC=”C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg>

ANCHOR TAG:
Anchor tag is used to link from one web page to another web page through hypertext links.
<A HREF=”URL”>Text describing link</A>

TABLES:
Tables provide a structure for organizing HTML elements in the form of rows and columns.

BASIC TABLE ELEMENTS

1) <TABLE>……</TABLE> : This element defines a table in HTML.
 2) <CAPTION>……</CAPTION>This element defines the caption for the title of the
table. The default position of the title is centered at the top of the table.
3) <TR>…</TR> : This element specifies a table row within a table.
4) <TH>…</TH> : This element defines a table header cell. By default the text in this
cell is bold and centered.
5) <TD>…</TD> : This element defines a table data cell. By default the text in this cell
is aligned left and centered vertically.
Some of the attributes of TABLE tag are:
1. ALIGN (LEFT, CENTER, RIGHT) : This attribute identifies the horizontal
alignment of a table.
Ex: <table align=”left”>
<table align=”center”>
<table align=”right”>
2. VALIGN(TOP,MIDDLE,BOTTOM) : This attribute identifies the vertical
alignment of a table.
Ex: <table valign=”top”>
<table valign=”middle”>
<table valign=”bottom”>
3. COLSPAN=n : This attribute allows a number (n) of columns to be combined in a
cell.
Ex: <TD COLSPAN=”2”>
4. ROWSPAN=n : This attribute allows a number (n) of Rows to be combined in a cell.
Ex: <TD ROWSPAN=”2”>
5. NOWRAP: This attribute is used to turn off word wrapping within a cell.
Ex: <table width=”100”> <table width=”60%”>
6. Table border: This attribute draws a border around the table.
Example: <table border=”4”>
7. Cell spacing: This attribute specifies the space between one cell to another cell.
Ex: <table cellspacing=”4”>
8. Cell padding: This attribute specifies the space between cell border and cell data.
Ex: <table cellpadding=”4”>
9. BGCOLOR: This attribute specifies the background color of the entire table.
Ex:<table bgcolor=”ivory”>
10. BORDER COLOR: This attribute specifies the color of the border of the table.
Ex:<table border=”4” bordercolor=”blue”>

FORMS:
A form is a web page allows the user to enter information. It also allows the user to
interact with the contents of the form. To insert a form we use the <form> </form> tags.
The form container works as follows
<form method=”how_to_send” action=”URL of script”>
</form>
METHOD: This attribute accepts either POST or GET as its value. POST is used to send
greater amount of data. GET is used to send small amount of data like a single text box.
ACTION: It accepts the URL for the script that will process the data from your form.

FORM ELEMENTS
Form elements have properties such as Textboxes, Password boxes, Checkboxes, Option
(Radio) buttons, Submit, Reset, File, Hidden and Image.
INPUT TYPES
1. Text boxes: These boxes are used to provide input fields for text, phone numbers and dates
and so on.
Ex: <input type=”text” name=”student name” size=”30”>
Textboxes use the following attributes:
 TYPE indicates the type of data which is text.
 SIZE determines the size of the text box in characters Default = 20 characters
 MAXSIZE Determines the maximum number of characters that the field will accept.
 NAME Is the name of the variable to be sent to the CGI application.
 VALUE will display its contents as the default value.
2. PASSWORD: These boxes are used to allow the entry of passwords.
Ex: <b> Enter your password:</b><input type=”PASSWORD” name=”secret”>
Password boxes use the following attributes:
 TYPE indicates the type of data which is a password
 SIZE determines the size of the textbox in characters.
 MAXSIZE determines the maximum size of the password in characters
 NAME Is the name of the variable to be sent to the CGI application.
 VALUE Is usually blank.
3. CHECK BOX: These boxes are used to allow the users to select more than one option.
Ex: <input type=”checkbox”>
Checkboxes have the following attributes:
 TYPE indicates the type is a checkbox.
 CHECKED indicates whether the box is blank or CHECKED as Initial status.
 NAME is the name of the variable to be sent to the CGI application.
 VALUE is usually set to a value
4. Radio Button: The Radio buttons allow users to select only one option among a list of
options. Ex: <input type=”Radio”>
Radio buttons have the following attributes
 TYPE indicates the type is a radio button.
 CHECKED is blank or CHECKED as the initial status. Only one radio button can be
checked.
 NAME is the name of the variable to be sent to the CGI application.
 VALUE Usually has a set value.
5. File Upload: You can use a file upload to allow surfers to upload files to your web server.
Ex: <input type=”file” name=”file upload”>
File upload has the following attributes:
 NAME is the name of the variable to be sent to the CGI application.
 SIZE is the size of the text box in characters.
 MAXSIZE is the maximum size of the input in the textbox in characters.
 ENCTYPE is a list of (MIME) types that the field can be used to upload.
6. Push Button: This element would be used with either JavaScript or VBScript to cause an
action to take place.
Ex: <input type=”button” value=”button”>
Push Button has the following attributes:
 TYPE indicates the type is a Button
 NAME is the name of the button to be used in scripting
 VALUE determines the text label on the button.
7. Submit: This is the element that causes the browser to send the names and values of the
other elements to the CGI Application specified by the ACTION attribute of the FORM
element.
Ex: <input type=”submit”>
Submit has the following attributes:
 TYPE Indicates the type is submit
 NAME value used by the CGI script for processing
 VALUE determines the text label on the button, usually it is submit query.
8. Image submit button: Allows you to substitute an image for the standard submit button.
Ex: <input type=”IMAGE” SRC=”URL”>
Image submit button has the following attributes:
 TYPE indicates that the type is a Image
 NAME is the name of the button to be used in scripting
 SRC URL of the image file.
9.Reset: It allows the user to clear all the input in the form.
Ex: <input type=”reset” value=”reset the form”>
Reset buttons have the following attributes:
 TYPE Indicates that the type is reset
 VALUE Determines the text label on the button, usually Reset.

Advantages of HTML:
 HTML documents browser interface are easy to build.
 It is easy to learn because it is very simple.

Disadvantages of HTML
 It is a weak presentation tool.
 Linking in HTML is compulsory.

XML
XML (Extensible Markup Language) is also a markup language like HTML.XML is used to
describe the data.
Structure of a XML document
An XML document contains a prolog and a body. The prolog consists of an XML declaration
followed by a document type declaration.
Ex: <?XML version=”1.0”>
<details>
<name>BGS PU college </name>
<address> Agalagurki </address>
</details>

Difference between HTML and XML

 HTML is used to display data and to focus on formatting of data, whereas XML is
used to describe data and focus on what data is.
 HTML tags are predefined, whereas XML tags are not predefined. We create our
own tags.
 HTML tags are not case sensitive, whereas XML tags are case sensitive.
 XML can be used to store data but not HTML.

DHTML:
Dynamic hypertext markup language refers to web content that can be changed each time
when it is viewed.
WEB HOSTING:
Web hosting means hosting web server application on a computer system through which
the content is readily available to web browser client.
Web hosting can be classified into four categories:
a. Free hosting: Available with many famous sites which offer to host some WebPages
for no cost.
b. Virtual or Shared Hosting: Here one’s web site domain is hosted on the web server
of hosting company along with the other websites.
c. Dedicated Hosting: Here the company wishing to go online rents an entire web
server from hosting company. This is suitable for large, high traffic sites.
d. Co-location Hosting: Here the company owning the site instead of web hosting
company.