Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
27 views

WST Notes-HTML

Uploaded by

princeawan092
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
27 views

WST Notes-HTML

Uploaded by

princeawan092
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Topic: HTML Tags

HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages. As its
name suggests, HTML is a markup language.

• Hypertext refers to the way in which Web pages (HTML documents) are linked together. When
you click a link in a Web page, you are using hypertext.
• Markup Language describes how HTML works. With a markup language, you simply "mark up" a
text document with tags that tell a Web browser how to structure it to display.
• HTML file can have extension as .htm or .html.

HTML Document Structure:

An HTML document starts and ends with <html> and >/html> tags. These tags tell the browser that the entire
document is composed in HTML. Inside these two tags, the document is split into two sections:

• The <head>...</head> elements, which contain information about the document such as title of the document,
author of the document etc. Information inside this tag is not displayed outside.
• The <body>...</body> elements, which contain the real content of the document that you see on your screen.
• HTML language is a markup language and we use many tags to markup text. In the above example you have
seen <html>, <body> etc. are called HTML tags or HTML elements.
• Every tag consists of a tag name, sometimes followed by an optional list of tag attributes, all placed between
opening and closing brackets (< and >). The simplest tag is nothing more than a name appropriately enclosed in
brackets, such as <head> and <i>. More complicated tags contain one or more attributes, which specify or
modify the behavior of the tag.
• According to the HTML standard, tag and attribute names are not case-sensitive. There's no difference in effect
between <head>, <Head>, <HEAD>, or even <HeaD>; they are all equivalent. But with XHTML, case is
important: all current standard tag and attribute names are in lowercase.

HTML Basic Tags

The basic structure for all HTML documents is simple and should include the following minimum elements or tags:

• <html> - The main container for HTML pages


• <head> - The container for page header information
• <title> - The title of the page
• <body> - The main body of the page

Remember that before an opening <html> tag, an XHTML document can contain the optional
XML declaration, and it should always contain a DOCTYPE declaration indicating which version
of XHTML it uses.

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.

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.
• The <object> tag is designed to include images, JavaScript objects, Flash animations, MP3 files, QuickTime
movies and other components of a page.
• The <link> tag is used to link to an external file, such as a style sheet or JavaScript file.
• The <style> tag is used to include CSS rules inside the document.
• The <script> tag is used to include JavaScript or VBScript inside the document.
• The <meta> tag includes information about the document such as keywords and a description, which are
particularly helpful for search applications.

The <title> Element:

You should specify a title for every page that you write inside the <title> element. This element is 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.

The <body> Element:


The <body> element appears after the <head> element and contains the part of the Web page that 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.

HTML Meta Tags


HTML lets you specify metadata - information about a document rather than document content - in a variety of ways.
The META element can be used to include name/value pairs describing properties of the HTML document, such as
author, Expiry Date, a list of key words, author etc.

The <meta> tag is an empty element and so does not have a closing tag, rather, <meta> tags carry information within
attributes, so you need a forward slash character at the end of the element.

Metadata provided by using meta tag is a very important part of the web. It can assist search engines in finding the
best match when a user performs a search.

You can add metadata to your web pages by placing <meta> tags between the <head> and </head> tags. The can
include the following attributes:

Attribute Description

Name Name for the property. Can be anything. Examples include, keywords,
descrip on, author, revised, generator etc.

content Specifies the property's value.

scheme Specifies a scheme to use to interpret the property's value (as declared in the
content a ribute).

h p- equiv Used for h p response message headers. For example, h p-equiv can be used
to refresh the page or to set a cookie. Values include content-type, expires,
refresh and set-cookie.
Some examples:
<meta name="keywords" content="HTML, meta tags, metadata" />

<meta name="description" content="Learn about Meta Tags." />

<meta name="revised" content="html tutorial, 6/12/2006" />

<meta http-equiv="refresh" content="10" />

<meta http-equiv="refresh" content="10; url=http://www.google.com" />

HTML Attributes

Attributes are another important part of HTML markup. An attribute is used to define the characteristics of an
element and is placed inside the element's opening tag. All attributes are made up of two parts: a name and a value:

• The name is the property you want to set. For example, the <font> element in the example carries an attribute
whose name is face, which you can use to indicate which typeface you want the text to appear in.
• The value is what you want the value of the property to be. The first example was supposed to use the Arial
typeface, so the value of the face attribute is Arial. The value of the attribute should be put in double
quotation marks and is separated from the name by the equal sign.

Right now, we want to focus on a set of generic attributes that can be used with just about every HTML Tag in existence.

Core Attributes:
The four core attributes that can be used on the majority of HTML elements (although not all) are:

The id Attribute:
The id attribute can be used to uniquely identify any element within a page ( or style sheet ). There are two primary
reasons that you might want to use an id attribute on an element:

• If an element carries an id attribute as a unique identifier it is possible to identify just that element and its
content.
• If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to
distinguish between elements that have the same name.
• Begin with a letter (A.Z or a.z) and can then be followed by any number of letters, digits (0.9), hyphens,
underscores, colons, and periods.
• Remain unique within that document; no two id attributes may have the same value within that HTML
document.
The title Attribute:
The title attribute gives a suggested title for the element. The syntax for the title attribute is similar as explained
for id attribute.
The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip
or while the element is loading.

The class Attribute:


The class attribute is used to associate an element with a style sheet and specifies the class of element.

The style Attribute:


The style attribute allows you to specify CSS rules within the element.

Internationalization Attributes:
There are three internationalization attributes, which are available to most (although not all) XHTML elements.
The dir Attribute:
The dir attribute allows you to indicate to the browser the direction in which the text should flow. The dir attribute
can take one of two values, ltr and rtl.
The lang Attribute:
The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML
only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang
attribute in new XHTML documents.

Generic Attributes:
Here's a table of some other attributes that are readily usable with many of HTML's tags.

Attribute Options Function

align right, le center Horizontally aligns tags

valign top, middle, bo om Ver cally aligns tags within an HTML element.

bgcolor numeric, hexadecimal, RGB Places a background color behind an element


values

background URL Places an background image behind an element

id User Defined Names an element for use with Cascading Style


Sheets.

class User Defined Classifies an element for use with Cascading


Style Sheets.

width Numeric Value Specifies the width of tables, images, or table


cells.

height Numeric Value Specifies the height of tables, images, or table


cells.

tle User Defined "Pop-up" tle for your elements.

Grouping - The <div> and <span> Elements :

The <div> and <span> elements allow you to group together several elements to create sections or subsections of a
page.
For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the
elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so
that they appear using a special set of style rules.

The <div> element is used to group block-level elements together:


<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a> </div>

<div id="content" align="left" bgcolor="white">


<h5>Content Articles</h5>
<p>Actual content goes here.....</p> </div>

The <span> element, on the other hand, can be used to group inline elements only. So, if you had a part of a sentence
or paragraph you wanted to group together you could use the <span> element.

<div><p>This is the example of <span style="color:green">span tag</span> and the <span style="color:purple">div
tag</span> alongwith CSS</p></div>

Block and Inline Elements:


We can categories all the elements into two sections:

Block-level elements - Block-level elements appear on the screen as if they have a carriage return or
line break before and after them. For example the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>,
<pre>, <hr />, <blockquote>, and <address> elements are all block level elements. They all start on their own
new line, and anything that follows them appears on its own new line.
Inline elements - Inline elements, on the other hand, can appear within sentences and do not have to
appear on a new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>,
<del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements.

HTML Comments
<!-- and ending tag --> placed at the beginning and end of EVERY line to be treated as a comment.

HTML Images
Insert Image - The <img> Element:
You will insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag.
<img src="image URL" attr_name="attr_value"...more attributes />

Image Attributes:

Following are most frequently used attributes for <img> tag.

• width: sets width of the image. This will have a value like 10 or 20%etc.
• height: sets height of the image. This will have a value like 10 or 20% etc.
• border: sets a border around the image. This will have a value like 1 or 2 etc.
• src: specifies URL of the image file.
• alt: this is an alternate text which will be displayed if image is missing.
• align: this sets horizontal alignment of the image and takes value either left, right or center.
• valign: this sets vertical alignment of the image and takes value either top, bottom or center.
• hspace: horizontal space around the image. This will have a value like 10 or 20%etc.
• vspace: vertical space around the image. This will have a value like 10 or 20%etc.
• name: name of the image with in the document.
• id: id of the image with in the document.
• style: this will be used if you are using CSS.
• title: specifies a text title. The browser, perhaps flashing the title when the mouse passes over the link.
• ismap and usemap: These attributes for the <img> tag tell the browser that the image is a special
mouse-selectable visual map of one or more hyperlinks, commonly known as an image map.
HTML Text Links

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.

Linking Documents - The <a> Element:


A link is specified using the <a> element. This element is called anchor tag as well.
<a href="Document URL" attr_name="attr_value"...more attributes />

Anchor Attributes:
Following are most frequently used attributes for <a> tag.

• href: specifies the URL of the target of a hyperlink. Its value is any valid document URL, absolute or relative,
including a fragment identifier or a JavaScript code fragment.
• target: specify where to display the contents of a selected hyperlink. If set to "_blank" then a new window
will be opened to display the loaded page, if set to "_top" or "_parent" then same window will be used to
display the loaded document, if set to "_self" then loads the new page in current window. By default, its
"_self".
• name & id: attributes place a label within a document. When that label is used in a link to that document,
it is the equivalent of telling the browser to goto that label.
• event: attributes like onClick, onMouseOver etc. are used to trigger any Javascript ot VBscript code.
• title: attribute lets you specify a title for the document to which you are linking. The value of the attribute
is any string, enclosed in quotation marks. The browser might use it when displaying the link, perhaps flashing
the title when the mouse passes over the link.
• accesskey: attribute provides a keyboard shortcut that can be used to activate a link. For example, you
could make the T key an access key so that when the user presses either the Alt or Ctrl key on his keyboard
(depending on his operating system) along with the T key, the link gets activated.
Base Path for Links:
It is not required to give a complete URL for every link. You can get rid of it if you will use <base> tag in your header. This
tag is used to give a base path for all the links.

<head>
<base href="http://www.google.com/">
</head>

So now if you will use <a href="/html/index.htm" then it will be considered as <a
href="http://www.google.com/html/index.htm".

Linking to a Page Section:


You can create a link to a particular section of a page by using name attribute. Here we will create three links with-in
this page itself.
<h1>HTML Text Links <a name="top"></a></h1>
<a href="/html/html_text_links.htm#top">Go to the Top</a>

HTML Image Links


<a href="http://www.google.com/" target="_self" > <img src="/images/home.gif" alt="Google" border="0"/> </a>

HTML Lists Formatting


You can list out your items, subjects or menu in the form of a list. HTML gives you three different types of lists.

<ul> - An unordered list. This will list items using bullets

<ol> - An ordered list. This will use different schemes of numbers to list your items

<dl> - An definition list. This will arrange your items in the same way as they are arranged in a dictionary.
HTML Unordered Lists:
An unordered list is a collection of related items that have no special order or sequence.

<center>
<h2>Movie List</h2>
</center>
<ul>
<li>Movie 1</li>
<li>Movie 2</li>
<li>Movie 3</li>
<li>Movie 4</li>
</ul>

You can use type attribute to specify the type of bullet you like. By default its is a disc. Following are the possible way:
<ul type="square">

<ul type="disc">

<ul type="circle">

HTML Ordered Lists:


The typical browser formats the contents of an ordered list just like an unordered list, except that the items are numbered
instead of bulleted.
<center>
<h2>Movie List</h2>
</center>
<ol>
<li>Movie 1</li>
<li>Movie 2</li>
<li>Movie 3</li>
<li>Movie 4</li>
</ol>

You can use type attribute to specify the type of numbers you like. By default its is a generic numbers. Following are the
other possible way:
<ol type="I"> - Upper-Case Numerals.

<ol type="i"> - Lower-Case Numerals.

<ol type="a"> - Lower-Case Letters.

<ol type="A"> - Upper-Case Letters.

You can use start attribute to specify the beginning of any index. By default its is a first number or character. In the
following example index starts from 5:
<ol start=”5”>
…
</ol>
HTML Forms

HTML Forms are required when you want to collect some data from the site visitor.

A form will take input from the site visitor and then will post your back-end application such as CGI, ASP Script or PHP
script etc. Then your back-end application will do the required processing on that data in whatever way you like.

Form elements are like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc. which are
used to take information from the user.

A simple syntax of using <form> is as follows:

<form action="back-end script" method="posting method">


form elements like input, textarea etc.
</form>

Most frequently used form attributes are:

• name: This is the name of the form.


• action: Here you will specify any script URL which will receive uploaded data.
• method: Here you will specify method to be used to upload data. It can take various values but most frequently used
are GET and POST.
• target: It specifies the target page where the result of the script will be displayed. It takes values like _blank, _self,
_parent etc.
• enctype: You can use the enctype attribute to specify how the browser encodes the data before it sends it to the
server. Possible values are like:
• application/x-www-form-urlencoded - This is the standard method most forms use. It converts spaces to the plus
sign and non-alphanumeric characters into the hexadecimal code for that character in ASCII text.
• mutlipart/form-data - This allows the data to be sent in parts, with each consecutive part corresponding the a form
control, in the order they appear in the form. Each part can have an optional content-type header of its own indicating
the type of data for that form control.

HTML Forms - Text Input Controls:

There are actually three types of text input used on forms:

• Single-line text input controls: Used for items that require only one line of user input, such as search boxes or
names. They are created using the <input> element.
• Password input controls: Single-line text input that masks the characters a user enters.
• Multi-line text input controls: Used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created with the <textarea> element.

Single-line text input controls:

<form action="/cgi-bin/hello_get.cgi" method="get">


First name:
<input type="text" name="first_name" /> <br>
Last name:
<input type="text" name="last_name" />
<input type="submit" value="submit" /> </form>
Following is the list of attributes for <input> tag.

• type: Indicates the type of input control you want to create. This element is also used to create other form
controls such as radio buttons and checkboxes.
• name: Used to give the name part of the name/value pair that is sent to the server, representing each form
control and the value the user entered.
• value: Provides an initial value for the text input control that the user will see when the form loads.
• size: Allows you to specify the width of the text-input control in terms of characters.
• maxlength: Allows you to specify the maximum number of characters a user can enter into the text box.

Password input controls:


This is also a form of single-line text input controls are created using an <input> element whose type attribute has a
value of password.

<form action="/cgi-bin/hello_get.cgi" method="get">


Login :
<input type="text" name="login" /> <br>
Password:
<input type="password" name="password" />
<input type="submit" value="submit" /> </form>

Multiple-Line Text Input Controls:

If you want to allow a visitor to your site to enter more than one line of text, you should create a multiple-line text input
control using the <textarea> element.

<form action="/cgi-bin/hello_get.cgi" method="get">


Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
<input type="submit" value="submit" /> </form>

Following is the detail of above used attributes for <textarea> tag.

• name: The name of the control. This is used in the name/value pair that is sent to the server.
• rows: Indicates the number of rows of text area box.
• cols: Indicates the number of columns of text area box.

HTML Forms - Creating Button:

There are various ways in HTML to create clickable buttons. You can create clickable button using <input> tag.

When you use the <input> element to create a button, the type of button you create is specified using the type
attribute. The type attribute can take the following values:

• submit: This creates a button that automatically submits a form.


• reset: This creates a button that automatically resets form controls to their initial values.
• button: This creates a button that is used to trigger a client-side script when the user clicks that button.

<form action="http://www.example.com/test.asp" method="get">


<input type="submit" name="Submit" value="Submit" />
<br /><br />
<input type="reset" value="Reset" />
<input type="button" value="Button" /> </form>

You can use an image to create a button. Here is the syntax:

<form action="http://www.example.com/test.asp" method="get">


<input type="image" name="imagebutton" src="URL" /> </form>

Here src attribiute specifies a location of the image on your webserver.

HTML Forms - Checkboxes Control:

<input type="checkbox" name="maths" value="on"> Maths


<input type="checkbox" name="physics" value="on"> Physics
<input type="submit" value="Select Subject" />

Following is the list of important checkbox attributes:

• type: Indicates that you want to create a checkbox.


• name: Name of the control.
• value: The value that will be used if the checkbox is selected. More than one checkbox should share the same
name only if you want to allow users to select several items from the same list.
• checked: Indicates that when the page loads, the checkbox should be selected.

HTML Forms - Raidobox Control:

<input type="radio" name="subject" value="maths" /> Maths


<input type="radio" name="subject" value="physics" /> Physics

Following is the list of important checkbox attributes:

• type: Indicates that you want to create a checkbox.


• name: Name of the control.
• value: The value that will be used if the checkbox is selected. More than one checkbox should share the same
name only if you want to allow users to select several items from the same list.
• checked: Indicates that when the page loads, the checkbox should be selected.

HTML Forms - Select box Control:

Drop Down Box is used when we have many options available to be selected but only one or two will be selected..

Here is example HTML code for a form with one drop down box
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>

Following is the list of important attributes of <select>:

• name: This is the name for the control.


• size: This can be used to present a scrolling list box.
• multiple: If set to "multiple" then allows a user to select multiple items from the menu.
Following is the list of important attributes of <option>:

• value: The value that is sent to the server if this option is selected.
• selected: Specifies that this option should be the initially selected value when the page loads.

HTML Forms - File Select Boxes:

If you want to allow a user to upload a file to your web site from his computer, you will need to use a file upload box,
also known as a file select box. This is also created using the <input> element.

Here is example HTML code for a form with one file select box

<input type="file" name="fileupload" accept="image/*" />

HTML Forms - Hidden Controls:


If you will want to pass information between pages without the user seeing it. Hidden form controls remain part of
any form, but the user cannot see them in the Web browser. They should not be used for any sensitive information
you do not want the user to see because the user could see this data if she looked in the source of the page.

Following hidden form is being used to keep current page number. When a user will click next page then the value of
hidden form will be sent to the back-end application and it will decide which page has be displayed next.

<form action="/cgi-bin/hello_get.cgi" method="get" name="pages">


<p>This is page 10</p>
<input type="hidden" name="pgaenumber" value="10" />
<input type="submit" value="Next Page" /> </form>

HTML Forms - Submit and Reset Button:


These are special buttons which can be created using <input> When submit button is clicked then Forms data is
submitted to the back-end application. When reset button is clicked then all the forms control are reset to default
state.

<form action="/cgi-bin/hello_get.cgi" method="get">


First name:
<input type="text" name="first_name" /> <br>
Last name:
<input type="text" name="last_name" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" /> </form>

You might also like