Lec 03Introduction to HTML

8/7/2019 Lec 03Introduction to HTML

1/34

An Introduction to HTML

Lecture 03

LAMP

29th Jan 2008


2/34

3/19/2011 2

Story So Far ..

Introduction to Internet & Web basics Internet, internet and intranet

World Wide Web

Web page

HTML

Browsers

Server-client Architecture

Server

Web server

Scripting

ASP.NET


3/34

3/19/2011 3

Story Continues

HTTP

HTML

HTML Tags

Formatting & Nesting

Links

Lists

Tables


4/34

3/19/2011 4

Acronym #1: HTTP

Hypertext Transfer Protocol

provides a way for one computer (the browser) to ask a remote computer

(a web server) for an HTML document


5/34

3/19/2011 5

Acronym #2: HTML

Hypertext Markup Language

hypertext : a set of documents with links

markup : tags are added to text for structure

language : vocabulary, grammar etc.

a language for describing the structure and the appearance of web pages

web browsers read HTML and use the mark up tags to decide how to

display it

HTML doc is a plain text doc


6/34

3/19/2011 6

HTML

HTML 2.0 - November, 1995.

HTML 3.0 - September 28, 1995

HTML 3.2 - January 14, 1997

HTML 4.0 - July 8, 1997

W3C World Wide Web Consortium

http://www.w3.org


7/34

3/19/2011 7

So whats this tag business?

HTML documents are plain text (ASCII) with tags added to

them

tags appear between angle brackets:

the spacing of text in HTML does not affect the layout of the

text in the browser

the best way to learn is to check the source


8/34

3/19/2011 8

Check the HTML source!


9/34

3/19/2011 9

Check the HTML source!


10/34

3/19/2011 10

Tags

A element is fundamental component of the structure of a text doc

To denote various elements tags are used.

Structure :

They are generally paired.

Some tags has additional properties attributes.

Spaces and lines in the source are ignored

Tag case insensitive: always use lower case


11/34

3/19/2011 11

The structure of an HTML document

all HTML documents start with and end with

documents should have and

sections

head contains:

page title enclosed in tags

meta data about the page with the tag

Javascript, style sheets and other non-visual code

body contains everything else


12/34

3/19/2011 12

Basic Tags

Tag Description

Defines an HTML document

Defines the document's body

to Defines header 1 to header 6

Defines a paragraph

Inserts a single line break

Defines a horizontal rule


13/34

3/19/2011 13

Formatting Tags

The Altered Text The Altered Text

The Altered Text The AlteredText


Paragraph

Line Break and Aligns the text to center

and
Aligns the text to right


14/34

3/19/2011 14

Formatting Tags (contd..)

Align

Size

ColorEx:


15/34

3/19/2011 15

The Most Common Character Entities

Result Description Entity Name Entity Number

non-breaking space

< less than < greater than > >

& ampersand & &

" quotation mark " "

' apostrophe ' (does not work in IE) '


16/34

3/19/2011 16

Links

Anchor tag

Text to be displayed

Example:

BITS PILANI

The Target Attribute

CSD Rocks!


17/34

3/19/2011 17

View in Browser


18/34

3/19/2011 18

Link (Contd)

Mailto Link

subbareddy

How to make a lmage a link ?


19/34

3/19/2011 19

Body Tags

Attributes

Link

Vlink

Alink background

Ex:


20/34

3/19/2011 20

Links

LINK is used to indicate relationships between documents

Path of the file or website is given in a link.

Path : Relative Absolute


21/34

3/19/2011 21

Relative Path

Specifying the path from current document

FOLDER1

FOLDER2

file1

File1

File2

Relative path from folder1-file2 to folder2-file1:folder2/file1

Relative path from folder2-file1 to folder1-file1: ../file1


22/34

3/19/2011 22

Absolute Path

C Drive FOLDER1

FOLDER2

File1

File1

File2

Absolute path for folder1-file1:

C:/folder1/file1

For a web site the URL is an absolute URL

Ex: http://www.bits-pilani.ac.in


23/34

3/19/2011 23

Where to use what ?

Absolute path

For giving references (links) to other websites

Relative Path:

For referring to the web pages of the same website.


24/34

3/19/2011 24

Lists

Unnumbered List

List of Courses :

ASP.NET

Computer Programming I

Computer Programming II

ASP.NET


Computer Programming II


25/34

3/19/2011 25

Lists (Contd)

Numbered Lists

List of Courses :

1. ASP.NET

2. Computer Programming I

3. Computer Programming II

ASP.NET

Computer Programming IComputer Programming II


26/34

3/19/2011 26

Nested Lists

List of Courses :

ASP.NET

C#

VB.NET


Computer Programming

II

ASP.NET

C#

VB.NET

Computer Programming

I

Computer ProgrammingII


27/34

3/19/2011 27

Tables

Table tags

Rows

Columns


28/34

3/19/2011 28

Table Tags

Tag Description Defines a table

Defines a table header

Defines a table row

Defines a table cell Defines a table caption

Defines groups of table columns

Defines the attribute values for one or more

columns in a table Defines a table head

Defines a table body

Defines a table footer


29/34

3/19/2011 29

ColSpan:


30/34

3/19/2011 30

Colspan (Contd..)


31/34

3/19/2011 31

RowSpan


32/34

3/19/2011 32

RowSpan


33/34

3/19/2011 33

Comments in HTML

when you want to write something in the HTML source thatdoesn't appear in browser

also used to hide JavaScript and CSS

comments start with

Here is a paragraph of text.

The paragraph has two sentences thats all.


34/34

3/19/2011 34

Documents

Lec 03Introduction to HTML