chapter-2_introduction to html

7/30/2019 Chapter-2_Introduction to HTML

1/67

HTMLHTML is a language for describing web

pages.

HTML stands for Hyper Text Markup

LanguageHTML is not a programming language, it is

a markup language

A markup language is a set ofmarkup tagsHTML uses markup tags to describe web

pages


2/67

HTML Tags

HTML markup tags are usually called HTML tags HTML tags are keywords surrounded byangle

brackets like

HTML tags normallycome in pairs like and

The first tag in a pair is the start tag, the secondtag is the end tag

Start and end tags are also called opening tagsand closing tags


3/67


4/67

The text between and describes the

web page The text between and is the visible

page content

The text between and is displayed as a

heading The text between

and
is displayed as a
paragraph


5/67

The development processWhat You NeedYou don't need an HTML editor

You don't need aweb server

You don't need aweb site In this chapter we use a plain text editor (like Notepad)

to edit HTML

When you save an HTML file, you can use either the

.htm or the .html file extension


6/67

Basic HTML HTML Headings

HTML headings are defined with the to tags.

Example This is a heading

This is a headingThis is a heading


7/67


8/67

HTML Paragraphs HTML paragraphs are defined with the

tag.

Example

This is a paragraph.

This is another paragraph.


9/67

HTML Links HTML links are defined with the tag.

Example

Yahoo


10/67

HTML Images

HTML images are defined with the tag. Example


11/67

HTML Text Formatting

HTML Text Formatting This text is bold

This text is big

This text is italic

This is computer output

This is subscript andsuperscript


12/67

HTML Formatting Tags

HTML uses tags like and for formattingoutput, like bold or italic text.

These HTML tags are called formatting tags


13/67

COMMENTING CODE


14/67

HTML LISTS

The most common HTML lists are ordered andunordered lists:


15/67

HTML Ordered Lists

An ordered list starts with the tag. Each list itemstarts with the tag.

The list items are marked with numbers.

CoffeeMilk

How the HTML code above looks in a browser:1. Coffee

2. Milk


16/67

HTML Unordered Lists

An unordered list starts with the tag. Each listitem starts with the tag.

The list items are marked with bullets (typically smallblack circles).

CoffeeMilk

How the HTML code above looks in a browser:

Coffee

Milk


17/67

HTML Definition Lists

A definition list is a list of items, with a description ofeach item.

The tag defines a definition list.

The tag is used in conjunction with (definesthe item in the list) and (describes the item inthe list):

Coffee- black hot drinkMilk- white cold drink


18/67


Coffee - black hot drink

Milk - white cold drink


19/67

HTML Tables

Tables are defined with the tag.A table is divided into rows (with the tag), and

each row is divided into data cells (with the tag).td stands for "table data," and holds the content of a

data cell. A tag can contain text, links, images,lists, forms, other tables, etc.


20/67

Table Example

row 1, cell 1row 1, cell 2



21/67


22/67

HTML Table Headers

Header information in a table are defined with the tag.


23/67

The text in a th element will be bold and centered.

Header 1Header 2




24/67


25/67


26/67


27/67


28/67


29/67


30/67


31/67

HTML Forms and Input

HTML Forms are used to select different kinds of userinput.

HTML Forms

pass data to a server.

it contains input elements like Text fields, checkboxes,radio-buttons, submit buttons and more.

A form can also contain select lists, textarea, fieldset,legend, and label elements.

The tag is used to create an HTML form:

input elements.


32/67

HTML Forms - The Input Element

The input element is used to select user information. An input element can be of type text field, checkbox,

password, radio button, submit button, and more.

1.Text Fields

defines a one-line input fieldthat a user can enter text into:

First name:
Last name:


33/67


Also note that the default width of a text field is 20 characters.


34/67

Password Field

defines a password field:

Password:


Note:The characters in a password field are masked (shown as asterisks orcircles).


35/67

Radio Buttons

defines a radio button.

Radio buttons let a user select ONLY ONE Optionamong rest of all option


36/67

Checkboxes

defines a checkbox.Checkboxes let a user select ONE or MORE options ofa limited number of choices.

I have a bike
I have a car



37/67

Submit Button

defines a submit button.

A submit button is used to send form data to a server.The data is sent to the page specified in the form'saction attribute. The file defined in the actionattribute usually does something with the received

input: Username:



38/67

If you type some characters in the text field above, andclick the "Submit" button, the browser will send your

input to a page called "html_form_action.asp". The page will show you the received input.


39/67

HTML Form Tags


40/67

1. EXAMPLE : OPTION GROUP

2 Fi ld t d L d


41/67

2. Fieldset and Legend :


42/67

3. Input tag


43/67


44/67


45/67

Web Site Structure

A website is a collection of pages associated byhyperlinks , but it should also be broken up into areasfor structure, which aids memory and orderingresources.

A web site generally has a root directory, the one whichis entered first, then several sub-directories that servesas the sub-sites.


46/67


47/67

The main site has a default index.html page, which will

be picked up by the browser simply by going tohttp://www.mywebsite.co.uk.

It uses several images that are collected under animages sub directory.

There are two further sub-sites under the main rootdirectory , namely cats and holidays.

http://www.mywebsite.co.uk/cats/

XML
http://www.mywebsite.co.uk/http://www.mywebsite.co.uk/


48/67

XML

XML stands for eXtensible Markup Language.

XML is designed to transport and store data.XML is designed to describe data.

XML is used to transport data, while HTML is used to

format and display the data.


49/67

The Difference Between XML and HTML

XML is not a replacement for HTML.

XML and HTML were designed with different goals:XML was designed to transport and store

data(describe), with focus on what data is.

HTML was designed to display data, with focus on

how data looks.

HTML is about displaying information, while XML isabout carrying information.

Introduction to XHTML


50/67

Introduction to XHTMLXHTML is a stricter and cleaner version of HTML.

XHTML is a combination of HTML and XML(EXtensible Markup Language).

XHTML consists of all the elements in HTML 4.01,combined with the strict syntax of XML.

Move to XHTML


51/67

Move to XHTML The head and body tag elements are required in

XHTML whereas in HTML they are optional. Document Structure

First XHTML page

Hello World

Move to XHTML
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd


52/67

Move to XHTMLAll XHTML tag and attribute names must be in

lowercase and all attribute values must enclosed inquotes.

Attributes cannot be abbreviated and should appearfully written out.

An XHTML document must specify a document title. There should be XML declaration:

Document type can be transitional,frameset,Basicetc.

Meta Tags


53/67

Meta Tags Metadata is information about information or , in this

context more specifically , metadata is machine-understandable information about web resources.

It is included in the head section.

Example

Meta Tags


54/67

Meta Tags In the head section to set an expiration date:

This sets the expiry point when a page will be reloadedfrom the Web site.

To force a refresh after a period of time

This will cause page to be refreshed after 50 secondsand a redirection to occur to the URL specified.

Meta Tags


55/67

Meta TagsA browser can be stopped from caching a page, if it

supports elements http-equiv attribute.

This forces browser to ignore the cached page andinstead make a request again.

To do this the value pragma is assigned to the http-

equiv attribute and a no-cache value to the contentattribute.


56/67

Frame


57/67


58/67

Frameset : Vertical


59/67


60/67

Frameset : Horizontal


61/67


62/67

Mix columns and row


63/67


64/67

Character Entities They are useful for inserting symbols that arent

usually available or just for placing spaces around textin the code.


65/67


66/67

Inside a Browser The controller acts as the main component of operations

between various components.

For example it is responsible for collecting input from theuser and also managing outgoing requests for the HTTPclient to deal with for external communication.

HTML and script are channeled through to the interpretersas needed and output from these is put through specialdisplay drivers.

The browser can be extended with plug-in modules, which

enhance capabilities such as multimedia,graphics andsound.


67/67

chapter-2_introduction to html

Documents