HTML The Mother Tongue of The Browser. Web Site World Wide Web The World Wide Web (Web) is a network...

HTML

The Mother Tongue of The Browser

Web Site

World Wide Web The World Wide Web (Web) is a network of

information resources. The Web relies on three mechanisms to

make these resources readily available to the widest possible audience: A uniform naming scheme for locating

resources on the Web (e.g., URLs). Protocols, for access to named resources over

the Web (e.g., HTTP). Hypertext, for easy navigation among

resources (e.g., HTML).

Web Programming Programming for the World Wide Web

involves bothserver-side programming, andclient-side (browser-side) programming.

The publishing language used by the World Wide Web is HTML.

Web Programming Servers make web documents,

which are specified in HTML, available on request to browsers.

Browsers display, to users, web documents which have been received from servers.

HTML Background HTML stands for “Hyper Text Mark-up

Language”.

The language used to design Web Page.

HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different universities to gain access to each other's research documents.

HTML standards are organized by W3C : http://www.w3.org/MarkUp/

Hyper-Text-Markup-Language Hyper is the method by which you move

around on the web. Text is self-explanatory. Mark-up is what you do with the text. You

are marking up the text the same way you do in a text editing program with headings, bullets and bold text and so on.

Language is what HTML is. It uses many English words.

Simply, HTML is a Language, as it has code-words and syntax like any other language.

HTML HTML is used for creating static web

pages.

It is designed to display data & focus on how data looks.

HTML’s role on the web is to tell the browser how a document should appear.

HTML was the only language one could use to create Web pages.

HTML is about displaying information.

HTML Functionalities HTML gives authors the means to:

Publish online documents with headings, text, tables, lists, photos, etc.

Include spread-sheets, video clips, sound clips, and other applications directly in their documents.

Link information via hypertext links, at the click of a button.

Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.

HTML Versions HTML 2.0 was developed by the IETF's HTML

Working Group, which set the standard for core HTML features based upon current practice in 1994.

HTML 3.2 was W3C's first Recommendation for HTML on January 14, 1997.

HTML 4.0 was first released as a W3C Recommendation on December 18 ,1997.

HTML 4.01 is a revision of the HTML 4.0 became a W3C Recommendation December 24, 1999.

XHTML is a stricter and cleaner version of HTML.

HTML5 is the next major version of HTML.

Sample Webpage

Sample Webpage HTML Structure<html>

<head><title>First Demo</title>

</head><body>

<p>Welcome all</p></body>

</html>

Title tags

Body tags

HTML Basic Structure HTML documents contain text and various tags

that define elements such as headings, paragraphs and Hyperlinks.

Each element describes how the document should be displayed.

An HTML document is divided into a head section

The title of the document appears in the head (along with other information about the document).

body section The content of the document appears in the body.

HTML Element Syntax

Each element has a number of properties associated with it: An HTML element starts with a start tag / opening

tag. An HTML element ends with an end tag / closing tag. The element content is everything between the start

and the end tag. Some HTML elements have empty content. Empty elements are closed in the start tag. Most HTML elements can have attributes. HTML documents consist of nested HTML elements.

Most elements can contain other HTML elements.

<start_of_tag attribute_name=“attribute value”>Content

</end_of_tag> HTML elements can have attributes. Attributes provide additional

information about the element. Attributes are always specified in the

start tag. Attributes come in name/value pairs

like: name="value“.

General Element Attributes Core Attributes

Not valid in base, head, html, meta, script, style, and title elements.

Attribute

Value Description

class classname Specifies a classname for an element

id id Specifies a unique id for an element

style style_definition

Specifies an inline style for an element

title text Specifies extra information about an element

HTML Document Elements Hierarchy

documentdocument

bodybodyheadhead

titletitle

formform imageimage tablestables stylestyle scriptscriptanchoranchor

buttonbutton labellabel legendlegend selectselectinputinput textareatextarea

metameta scriptscript stylestyle

h1-h6h1-h6pp

Head

Body

Inside <body> Section Text

Formatting Resizing Layout Listing

Images Inserting images (GIF &

jpg) Adding a link to an image

Links To local pages To pages at other sites To bookmarks

Background Colors Images

Tables

Frames

Forms

HTML Text The <font> tag will change the font.

<font color="red" face="arial" size="2">This local text looks different.

</font>

Text Format AppearanceTag Description

<b>text</b> writes text as bold

<i>text</i> writes text in italics

<u>text</u> writes underlined text

<strike>text</strike>

strikes a line through the text

<strong>text<strong>

usually makes text bold

Text Size Appearance

Tag Description

<big>text</big> increase the size by one

<small>text</small>

decrease the size by one

<h1>text</h1> writes text in biggest heading

<h6>text</h6> writes text in smallest heading

<hr/> Defines a horizontal line

Text LayoutTag Description

<p>text</p>Adds a paragraph break after the text. (2 linebreaks).

<p align="left|center|right"> text </p>

Left justify text in paragraph.

text<br/>Adds a single linebreak where the tag is.

<center>text</center> Center text.

<div align="left|center|right "> text</div>

Defines a section in a document.Note:dir can be used instead of align

HTML Lists HTML supports

ordered “Numbered” lists,unordered “Bulleted” lists anddefinition lists.

Numbered List

<ol start="5"><li>text</li><li>text</li>

</ol>

Attribute Value Description

start number Use styles instead.Specifies the start point in a

list

type NumberCapital letterSmall letterCapital Roman

#Small Roman

#

Use styles instead.Specifies which kind of bullet points will be used

<ol type=“A"><li>text</li><li>text</li>

</ol>

Bulleted Lists You have the following bullet

options: disc circle square

<ul type=“circle”> <li>text</li> <li>text</li> </ul>

<ul type="disc"><ul type="circle"><ul type="square">

Definition List The <dd> tag is used to describe an item

in a definition list. The <dd> tag is used in conjunction with

<dl> (defines the definition list) and <dt> (defines the item in the list).

<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd></dl>

Example!

HTML Images

Images types used in browsers are : .gif & .jpg <img src=“abc.gif">

<img src=“http://www.xyz.com/abc.gif">

Resizing<img src=“abc.gif" width="60" height="60">

<img src=“" width="" height="“ align=“” alt=“” hspace="" vspace="">

HTML Images

Alignment of ImagesYou can align images according to the text

around it Default, left, right, top, texttop, middle, center.

Alternative Text<img src=“logo.gif" alt="This is a text that

goes with the image">

Example!

HTML Links

Click <a href="http://www.yahoo.com">here</a> to go to yahoo.

Link targets<a href="http://www.yahoo.com" target="_blank">

Image link<a href="myfile.htm"><img src="rainbow.gif"></a>

<a href="url“ target=“”>Link text</a>

The target can be one of the following Values to identify where the link is loaded :

"_blank“ Loads the link into a new blank window. "_self“ Loads the link into the same window. (default)

HTML Links Link to email

<a href="mailto:youremailaddress">Email Me</a>

<a href="mailto:[email protected]?subject=SweetWords">Send Email</a>

HTML Links Link Within a Page

To link to an anchor you need to: Create a link pointing to the anchor Create the anchor itself.

Example!

<a name =“top”></a>Click <a href=“#top”>Top</a>

<a name =“chapter4”></a>Click <a href=“# chapter4”>here</a> to read chapter 4

<marquee> Tag <marquee attribute1 attribute2>moving text< / marquee

> (IE)Places a scrolling text marquee into the document.

Example!

Sample Form Design

HTML Forms

<form> Main Attributes action=address

Specifies where to send the form-data when a form is submitted.

method=post or method=get Specifies how to send form-data.

<form> </form>

Form Fields A <form> can contain <input> elements:

Text field Password field Hidden field Check box File Submit button Reset button Image button Radio button

Other elements: <textarea> <label> Drop-down menu

<input> Text Field Attributes size maxlength name value align tabindex: Specifies the tab order of an

element.

<input type="text" size="25" value="Enter your name here!">

<input> Password Field Attributes size maxlength name value align tabindex

Enter Password : <input type="password" size="25">

<input> file Field Used for file uploads. When used, two controls appear in the browser:

a field that looks similar to a text input, and a button control that’s labeled Browse…. The text that

appears on this button can’t be changed. accept attribute, is used to define the kinds of

files that may be uploaded. Browser support for this attribute is inconsistent,

however, the job of validating file uploads is best left to the server.

<input type="file" name="picture" id="picture“ accept="image/jpeg, image/gif"/>

<textarea> Field Attributes rows cols Name tabindex readonly disabled

<textarea cols="40" rows="5" name="myname">

Now we are inside the area - which is nice.</textarea>

<input> Checkbox Field Attributes name value align tabindex Checked

<input type="checkbox" name="option1" value="Milk"> Milk<br>

<input type="checkbox" name="option2" value="Butter" checked> Butter<br>

<input> Radio Button Field Attributes name value align tabindex checked

<input type="radio" name="group1" value="Milk"> Milk<br>

<input type="radio" name="group1" value="Butter" checked =“checked”> Butter<br>

<input type="radio" name="group1" value="Cheese"> Cheese

Drop-Down Menu Tags <select> Attributes

name size multiple

<option> Attributes selected value

<select> <option>Milk</option> <option selected>Coffee</option> <option>Tea</option>

</select>

<input> Submit button / Reset button Attributes

name value align tabindex

<input type="button" value="Hello world!">

<input> Image button Image buttons have the same effect as submit

buttons Attributes

name src align border width Height tabindex

<input type="image" src=“abc.gif" name="image" width="60" height="60">

Example!

Frames

Sample Web Page Designed Using Frames

Frames Frames allow multi-windowed

layout. i.e. splitting a single Web page into

multiple windows, each of which can open a different document.

Frames are independent, scrollable portions of a Web browser window, with each frame capable of displaying a different document.

Frames Tags

Tag Description

<frameset>

Defines a set of frames

<frame> Defines a sub window (a frame)

<noframes>

Defines a noframe section for browsers that do not handle frames

<iframe> Defines an inline sub window (frame)

HTML <frame> AttributesAttribute Value Description

Frameborder 01

Specifies whether or not to display a border around a frame

Marginheight

pixels Specifies the top and bottom margins of a frame

Marginwidth

pixels Specifies the left and right margins of a frame

name name Specifies the name of a frame

noresize noresize Specifies that a frame cannot be resized

scrolling Yesnoauto

Specifies whether or not to display scrollbars in a frame

Height Pixel | % Set height of frame

Width Pixel | % Set width of frame

Bordercolor rgb(x,x,x)#xxxxxxcolorname

sets color for the border of frame

src URL Specifies the URL of the document to show in a frame

HTML <frameset> Attributes

Attribute Description

border Define border width of frames inside frameset.=pixel count

Frameborder Controles border of frames whether to display a border or notYes | no

Cols(pixels,%,*)

Specifies the number and size of columns of frame in a frameset

Rows(pixels,%,*)

Specifies the number and size of rows of frame in a frameset

framespacing Spacing in pixels between frames

Web Page Design

4) address and phone number

1) newspaper logo

2) list of links

3) articles

620 pixels

500 pixels120 pixels

Creating Frames You divide a document into frames using

the <frameset> element.

The <frame> element and other <frameset> elements are the only items that you can place inside a <frameset> element.

Creating Frames Two attributes of the <frameset> element,

rows and cols, determine whether frames are created as rows or columnsThe rows attribute determines the

number of horizontal frames to createThe cols attribute determines the number

of vertical frames to create The src attribute of the <frame>

element specifies the document to be opened in an individual frame

HTML Frames<frameset rows=“*,50%" cols="50%,*">

<frame src="" name="topleft"><frame src="" name="topright"><frame src="" name="botleft"><frame src="" name="botright">

</frameset>

Top left Top right

Bottom left Bottom right

Nesting Frames Each individual frame within a window

can contain its own set of frames.

Frames that are contained within other frames are called nested frames.

Nested frames accomplished by including a <frameset> element inside another <frameset> element.

Nested Frames

<frameset rows="50%,50%" cols="50%,50%" border="5" > <frame src="" name="topleft" bordercolor="red" scrolling="no“ /> <frameset rows="50%,50%" cols="50%,50%" border="5“ /> <frame src="" name="botleft" bordercolor="red" scrolling="no“ /> <frame src="" name="botright" bordercolor="red" scrolling="no“ /> <frame src="" name="botright" bordercolor="red" scrolling="no“ />

<frame src="" name="botright" bordercolor="red" scrolling="no“ /> </frameset> <frame src="" name="botleft" bordercolor="red" scrolling="no“ /> <frame src="" name="botright" bordercolor="red" scrolling="no“ /></frameset>

Using the target Attribute & <base> Element One popular use of frames creates a table of

contents frame on the left side of a Web browser window with a display frame on the right side.

The target attribute determines in which frame or Web browser window a document opens.

When you are using the same target window or frame for a long list of hyperlinks, it is easier to use the target attribute in the <base> element instead of repeating the target attribute within each hyperlink.

You use the target attribute with the <base> element to specify a default target for all links in a document, using the assigned name of a window or frame.

Links Within FramesJump to the <a href="analysis.htm" target="main">Analysis</a> of the project

The target can be a name of a frame that you specified in the <frame> tag or one of the following Values: "_blank“ Loads the link into a new blank

window. "_parent“ Loads the link into the immediate

parent of the document the link is in. "_self“ Loads the link into the same window.

(default) "_top“ Loads the link into the full body of the

current window.

Frames Disadvantage The web developer must keep track of

more HTML documents.

It is difficult to print the entire page.

Frames are less used in modern-day web design, they’re still valid, and there are still many web sites that use these elements today as they have for years.

Tables

Table TagsTag Description

<table> Defines a table.

<caption> Defines a table caption. Provides a means for labeling

the table’s content. Used once per table and mustimmediately follow the table start tag.

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<thead> Groups the header content in a table. By default, athead will not affect the display of the table in any

way.

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

Using of <table>,<tr> & <td> Tags Graphical tables are enclosed within a

two-sided <table> tag that identifies the start and ending of the table structure.

Each row of the table is indicated using a two-sided <tr> (for table row).

Within each table row, a two-sided <td> (for table data) tag indicates the presence of individual table cells.

Columns Within a Table HTML does not provide a tag for

table columns. In the original HTML specifications,

the number of columns is determined by how many cells are inserted within each row. i.e. if a table have four <td> tags in each

row, then it has has four columns.

The Table Syntax

This creates a table with two rows and two columns.

<table><tr>

<td> First Cell </td><td> Second Cell

</td> </tr> <tr>

<td> Third Cell </td>

<td> Fourth Cell </td> </tr></table>

two rows

two columns

Adding Headings to Table

<table border="2" bordercolorlight="#b2b2ff"><tr bordercolor="red">

<th>First Col</th><th>second Col</th>

</tr><tr>

<td> First Cell </td><td> Second Cell </td>

</tr> <tr>

<td> Third Cell </td><td> Fourth Cell </td>

</tr></table>

Adding <caption> to Table

<table border="2" bordercolorlight=“yellow” cellpadding=10 > <caption>Demonstrating Table with header & caption</caption>

<tr bordercolor="red"><th>First Col</th><th>second Col</th>

</tr><tr>

<td> First Cell </td><td> Second Cell </td>

</tr> <tr>

<td> Third Cell </td><td> Fourth Cell </td>

</tr></table>

Attribute Description

Bgcolor

like with the body tag, this sets the background color of any item.

It works with tables as well and will be seen as the default color.

Width

determines the width of the table and isn’t required. If you don’t

put this in, the table will automatically adjust in terms of width.

Height

it’s mainly for the height and how high you want the table to be.

Not required at all and will adjust on its own if not with a set

height.

Border

determines the borders from outside the table to the table cells

and isn’t required. By default, browsers display tables without

table borders, i.e. its default value is 0.

Cellpadding

it’s the distance of the cell wall from the contents.

Cellspacing

sets the distance between cells and isn’t required. Again, it will

do that automatically if not set.

bordercolor

to set the color of the border.

The <table> Tag Attributes

The <tr> Tag Attributes

Attribute

Value Description

align LeftRightCenterjustify

Aligns the content in a cell

bgcolor rgb(x,x,x)#xxxxxxcolorname

Specifies a background color for a cell.

valign TopMiddleBottombaseline

Vertical aligns the content in a cell

The <th>& <td> Tags Attributes

Attribute

Value Description

align left |right | center | justify

Aligns the content in a cell

bgcolor rgb(x,x,x)#xxxxxxcolorname

Specifies a background color for a cell.

colspan Number Sets the number of columns a cell should span

height pixels | % Sets the height of a cell

rowspan Number Sets the number of rows a cell should span

valign top | middle |bottom |baseline

Vertical aligns the content in a cell

width pixels | % Specifies the width of a cell

Defining Cell and Column Sizes To set the width of an individual cell, add the width

attribute to either the <td> or <th> tags.

The syntax is: width=“value” value can be expressed either in pixels or as a

percentage of the table width a width value of 30% displays a cell that is 30% of the

total width of the table

The height attribute can be used in the <td> or <th> tags to set the height of individual cells.

Spanning Rows and Columns To merge several cells into one, you need to

create a spanning cell. A spanning cell is a cell that occupies more

than one row or column in a table. Spanning cells are created by inserting the

rowspan and colspan attribute in a <td> or <th> tag.

The syntax for these attributes is: rowspan=“value” colspan=“value”value is the number of rows or columns that

the cell spans in the table

Example of Spanning Cells

This cell spans three

rows

this cell spans two columns

Designing a Page Layout with Tables HTML tables are most often used to define

the layout of an entire Web page.

If you want to design a page that displays text in newspaper style columns, or separates the page into distinct sections, you’ll find tables an essential and useful tool.

Remember that some monitors display Web pages at a resolution of 640 by 480 pixels.

Web Page Layout using Table

A Sample Web Page Design with Tables

Web Page Using Nested Table Tables can be created within another

table making the Web page easier to manage.

Changing The Table Text Size In order to change the size of the

table text, you need to insert a <font> tag into each cell.Note: The <font> tag can not be

applied to all of the text in a table. As <font> tag is deprecated <style>

tag is used instead.

Online References www.w3schools.com www.echoecho.com www.quackit.com www.htmlcodetutorial.com www.htmlquick.com www.blooberry.com …

Now Its Time To Do Your Web Right

Now

HTML The Mother Tongue of The Browser. Web Site World Wide Web The World Wide Web (Web) is a network...

Documents

Transcript of HTML The Mother Tongue of The Browser. Web Site World Wide Web The World Wide Web (Web) is a network...