Notes for Web Designing & Development on the basis of GGSIPU BCA Syllabus Page 1 HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tagsThe tags describedocument content HTML documents containHTMLtagsand plain text HTML documents are also calledweb pagesHypertext means : Hypertext is text which contains links to other texts. Markup means:Markup languages are designed for the processing, definition and presentation of text. The language specifies code for formatting, both the layout and style, within a te xt file. The code used to specify the formatting are called tags. HTML is a an example of a widely known and used markup language.Elements and tags Elements give structure to a HTML document and tells the browser how you want your website to be presented. Generally elements consist of a start tag, some content, and an end tag. "Tags"? Tags are labels you use to mark up the beginning and end of an element. All tags have the same format: they be gin with a less-than sign "<" and en d with a greater-than sign ">". Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag. Example <h1>this is a heading</h1> <h2>this is a subheading</h2>
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Notes for Web Designing & Development on the basis of GGSIPU BCA Syllabus
Page 1
HTML
What is HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
Hypertext means: Hypertext is text which contains links to other texts.
Markup means: Markup languages are designed for the processing, definition and presentation oftext. The language specifies code for formatting, both the layout and style, within a text file. The code
used to specify the formatting are called tags. HTML is a an example of a widely known and used markup
language.
Elements and tags
Elements give structure to a HTML document and tells the browser how you want your websiteto be presented. Generally elements consist of a start tag, some content, and an end tag.
"Tags"?
Tags are labels you use to mark up the beginning and end of an element.
All tags have the same format: they begin with a less-than sign "<" and end with a greater-than
sign ">".
Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>.The only difference between an opening tag and a closing tag is the forward slash "/". You label
content by putting it between an opening tag and a closing tag.
Notes for Web Designing & Development on the basis of GGSIPU BCA Syllabus
Page 2
What is an attribute?
As you probably remember, elements give structure to a HTML document and tells the browser
how you want your website to be presented (for example, <br /> informs the browser to make a
line break). In some elements you can add more information. Such additional information is
called an attribute.
Attributes are always written within a start tag and are followed by an equals sign
Should tags be typed in uppercase or lowercase?
Most browsers might not care if you type your tags in upper, lower or mixed cases. <HTML>,
<html> or <HtMl> will normally give the same result. However, the correct way is to type tags
in lowercase. So get into the habit of writing your tags in lowercase.
The <html> Element:
The <html> element is the containing element for the whole HTML document. Each HTML
document should have one <html> and each document should end with a closing </html> tag.
Following two elements appear as direct children of an <html> element:
<head>
<body>
As such, start and end HTML tags enclose all the other HTML tags you use to describe the Web
page.
The <head> Element:
The <head> element is just a container for all other header elements. It should be the first thing
to appear after the opening <html> tag.
Each <head> element should contain a <title> element indicating the title of the document,
although it may also contain any combination of the following elements, in any order:
The <base> tag is used to create a "base" url for all links on the page. Check HTML Base
tag.
The <object> tag is designed to include images, JavaScript objects, Flash animations,MP3 files, QuickTime movies and other components of a page. Check HTML Object tag.
The <link> tag is used to link to an external file, such as a style sheet or JavaScript file.
You should specify a title for every page that you write inside the <title> element. This elementis a child of the <head> element). It is used in several ways:
It displays at the very top of a browser window.
It is used as the default name for a bookmark in browsers such as IE and Netscape.
Its is used by search engines that use its content to help index pages.
Notes for Web Designing & Development on the basis of GGSIPU BCA Syllabus
Page 5
The <script> Tag
The <script> tag is used to define a client-side script, such as a JavaScript.
The <script> element either contains scripting statements, or it points to an external script file
through the src attribute.
Attributes:
src - This attribute specifies the location of an external script.
type - This attribute specifies the scripting language of the element's contents and overrides the
default scripting language
Example:
<head>
<script type="text/javascript"></head>
The <body> Element:
The <body> element appears after the <head> element and contains the part of the Web pagethat you actually see in the main browser window, which is sometimes referred to as body
content.
A <body> element may contain anything from a couple of paragraphs under a heading to more
complicated layouts containing forms and tables.
Attributes of Body Tag:
Bgcolor: To change the background color of the webpage
Text: to change the text color
Background: Specifies a background image for a document
Alink: Specifies the color of an active link in a document
Link: Specifies the color of unvisited links in a document
Any document starts with a heading. You use different sizes for your headings. HTML also havesix levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While
displaying any heading, browser adds one line before and after that heading.
Example:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4><h5>This is heading 5</h5>
<h6>This is heading 6</h6>
Paragraph Tag
The paragraph tags are used to define a block of text as a paragraph. This HTML element is one
of the basic HTML tags you should learn to use properly.
When a block of text is surrounded by the paragraph tags, the browser automatically adds white
space before and after the paragraph.
Using the Paragraph Tag
To define a paragraph, you use the opening and closing paragraph set of tags
Notes for Web Designing & Development on the basis of GGSIPU BCA Syllabus
Page 13
html - image links
Image links are constructed as you might expect, by embedding an <img> tag inside of an
anchor element <a>. Like HTML text links, image links require opening and closing anchor tags, but instead of placing text between these opening and closing tags, the developer needs to place
an image tag -- with a valid source attribute value of course.
HTML Image Link Code:
<a href="http://www.espn.com" target="_blank">
<img src="ahman.gif" />
</a>
By default, many browsers add a small border around image links. This default behavior is
intended to give web viewers the ability to quickly decipher the difference between ordinary
Notes for Web Designing & Development on the basis of GGSIPU BCA Syllabus
Page 14
html - text links (anchors)
The World Wide Web got its spidery name from the plentiful connections (links) that linkwebsites together with the click of a button. What most people don't know is that HTML links
are actually HTML anchors constructed using anchor tags (<a>).
Web pages can contain links that take you directly to other pages and even specific parts of a
given page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and
images. Thus you can create hyperlinks using text or images available on your any web page.
html - hypertext reference (href)
A Hypertext Reference (href ) is an HTML attribute of an anchor (link) tag that requires avalid URL in order to properly direct a user to a different location. In other words, this Hypertext
Reference is where users will navigate to if they do click on this link.
The address of a website is called a Uniform Resource Locator (a URL), and it acts like a street
address for a website as a user is directed from one site to another. There are different types of
URLs, and each has a slightly different look. The examples above link to what are known as
Global URLs
html - link targets
The target attribute defines how each link will open when clicked. Will each one open in anew window, or will each one open in the current browser window? As the web designer, you
call the shots as to how a user navigates from page to page, so long as you know how to handle
Notes for Web Designing & Development on the basis of GGSIPU BCA Syllabus
Page 15
Link Targets:
Target= Description
_blank Opens new page in a new browser window
_self Loads the new page in the current window
_parent Loads new page into a parent frame
_top Loads new page into the current browser window, cancelling all frames
html - email links
Creating an email link is simple. If you want people to mail you about your site, a good wayto do it is place an email link with a subject line already filled out for them.
The HTML table model allows authors to arrange data -- text, preformatted text, images, links,forms, form fields, other tables, etc. -- into rows and columns of cells.
An HTML document that describes frame layout (called a frameset document )
The <frameset> tag defines a frameset.
The <frameset> element holds one or more <frame> elements. Each <frame> element can hold aseparate document.
The <frameset> element specifies HOW MANY columns or rows there will be in the frameset,and HOW MUCH percentage/pixels of space will occupy each of them.
The FRAMESET section of a document specifies the layout of views in the main user agent
window. In addition, the FRAMESET section can contain a NOFRAMES element to provide alternate content for user agents that do not support frames or are configured not to
display frames.
rows
This attribute specifies the layout of horizontal frames. It is a comma-separated list of
pixels, percentages, and relative lengths. The default value is 100%, meaning one row.
Notes for Web Designing & Development on the basis of GGSIPU BCA Syllabus
Page 30
cols
This attribute specifies the layout of vertical frames. It is a comma-separated list of
pixels, percentages, and relative lengths. The default value is 100%, meaning one
column.
Rows and columns
Setting the rows attribute defines the number of horizontal subspaces in a frameset. Setting
the cols attribute defines the number of vertical subspaces. Both attributes may be set
simultaneously to create a grid.
If the rows attribute is not set, each column extends the entire length of the page. If
the cols attribute is not set, each row extends the entire width of the page. If neither attribute isset, the frame takes up exactly the size of the page.
Frames are created left-to-right for columns and top-to-bottom for rows. When both attributes arespecified, views are created left-to-right in the top row, left-to-right in the second row, etc.
The first example divides the screen vertically in two (i.e., creates a top half and a bottom half).
<FRAMESET rows="50%, 50%">...the rest of the definition... </FRAMESET>
The next example creates three columns: the second has a fixed width of 250 pixels (useful, for
example, to hold an image with a known size). The first receives 25% of the remaining space and
Notes for Web Designing & Development on the basis of GGSIPU BCA Syllabus
Page 36
The <map> element contains a number of <area> elements, that defines the clickable areas in the
image map.
HTML - Web Forms
HTML web forms are a composition of buttons, checkboxes, and text input fields embedded
inside of HTML documents with one goal in mind: to capture user input. By doing things such as
providing fields for user data such as names, phone number, and email addresses, web formsgive users the opportunity to interact directly with a webpage.
HTML forms are placed on a web page using the <form> tag. This tag should encapsulate a series of
other form elements, identifying them as a single cohesive web form. <form>
.
input elements
.
</form>
HTML Forms - The Input Element
The most important form element is the input element.
The input element is used to select user information.
An input element can vary in many ways, depending on the type attribute. An input element can
be of type text field, checkbox, password, radio button, submit button, and more.
The most used input types are described below.
Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname" /><br />
Notes for Web Designing & Development on the basis of GGSIPU BCA Syllabus
Page 39
HTML form elements rely on action and method attributes to identify where to send the formdata for processing (action) and how to process the data (method). In the code above, we'veinserted some make-believe values to represent what a typical HTML form might look like
behind the scenes.
Unfortunately, HTML alone is unable to process form data. A scripting language such as PHP,
PERL, and/or JavaScript must be used with HTML forms to process data captured by HTML
HTML select fields provide essentially the same functionality as HTML Checkbox Fields. They allow the
user to select one or more values from a pre-determined series of options.
Incorporating a select field into a web page is done using the <select> tag. List values are thenadded to the field using the <option> tag, similar to how list items <li> are added to ordered list
elements (<ol>).
HTML Drop Down List:
By default, select fields, popularly called drop down lists, only allow the user to choose a single
value. This behavior and appearance may be changed by adjusting the multiple and size attributes