chapter 5 html basics

8/3/2019 Chapter 5 HTML Basics

1/24

Chapter 5: HTML Basics

October 2011


2/24

Introduction

The Internet a network of networks An infrastructure (connectivity among a large number of

machines world wide)

Several applications:

E-mail www

File transfer (FTP)

Remote login

E-commerce

Instant messaging (chat)

Mailing lists

2 Internet Programming


3/24

Introduction (contd)

www (world wide web) A collection of websites

A website

A collection of resources:

Web pages (static / dynamic) Media files (images, animations, sound, )

Style files (CSS)

Documents (pdf, doc, txt, rtf, )

Has a globally unique name

E.g. www.aau.edu.et

Stored on machines called web servers

http://www.aau.edu.et/http://www.aau.edu.et/


4/24


A web page A document with a mark-up language called HTML The basic unit of information storage on the www

How does the www work Websites (with unique names) are stored on web servers

Users access these websites via the Internet usingsoftware called a web browser.

A user sends requests for resources from a server with

the help of the a user agent (browser) The server sends the requested resource to the user

agent

The user agent renders the resource for the user to view.



5/24


Software involved: At the server:

Web server software : listens for incoming requests for resourcesfrom clients and serves the requests Apache - open source IIS (Internet Information Services) Microsoft Squid

At the client: Web browser : sends/receives requests/responses to/from web

servers on behalf of the client and renders content as necessary Microsoft Internet Explorer Mozilla Firefox Opera Safari



6/24


Communication protocol HTTP (HyperText Transfer Protocol)

Client (web browser) and Server (web server) communicate viathe HTTP to exchange request/response messages

The web is governed by the w3c (world wide webconsortium) (www.w3.org)



7/24


How are websites uniquely named? DNS (Domain Name System)

Resolves a human friendly name (eg www.google.com) to amachine friendly IP address (eg 64.233.187.99)

Phone book of the Internet

For this purpose, DNS servers store a table containing name-IP(among other things) pairs and do a look-up when requested

A DNS server may communicate with other server to resolve agiven name

There are about 12 root DNS servers (http://www.root-servers.org/)

http://www.google.com/http://www.root-servers.org/http://www.root-servers.org/http://www.root-servers.org/http://www.root-servers.org/http://www.root-servers.org/http://www.google.com/


8/24


DNS name structure

Hierarchical in nature (eg. cs.aau.edu.et)

cs is under aau (a subdomain of aau), aau is under edu, edu is under et.

The highest level is the last component of the DNS address

Labels separated by . (dot)

Labels can be up to 63 characters long and are case insensitive

A maximum of 255 characters is allowed in total

The last (highest) labels of a DNS name can be:

Three letter code top level domains (TLDs): indicating the type of

organization com, edu, gov, net, org, biz,

Two letter country codes (CCTLDs): indicating the country

et, us, za, uk, tv,



9/24


URL (Uniform Resource Locator) The exact address of a resource on the web Format:

://[:][][?] E.g. http://www.somedomain.com/search.php?q=dns&lang=en

Protocol identifies the type of protocol to be used for communication http, ftp, mailto,

Host identifies the machine on which the requested resource is stored Domain names (eg. www.google.com) IP address

Port identifies the port number of the web server software on the webserver machine

Default port for http: 80 Path identifies the name and path of the resource on the server Query specifies parameters, if any, that should be sent to the server

along with the request has the form: ?var_name1=value1&var_name2=value2&

http://www.somedomain.com/search.php?q=dns&lang=enhttp://www.google.com/http://www.google.com/http://www.somedomain.com/search.php?q=dns&lang=en


10/24

HyperText Markup Language (HTML)

A markup language, i.e. its used to markup content.

Composed of several tags.

HTML Document

A text document containing markup tags

The tags tell the browser how to display the document

Should have an .htm or .html file name extension

Can be created using a simple text editor



11/24

HTMLDocument Structure

An HTML document has the following basicstructure:

page title



12/24


13/24

HTML Tags

html everything in the document should be within

&

head

contains information which is not displayed in the browserdisplay area

may contain other tags in it

format:

title sets the title of the web page to be displayed in the

browsers title bar.

found within the tag.

format: 13 Internet Programming


14/24

HTML Tags (contd)

body contains the visible part of the web page

displayed in the display area of the browser

contains several other tags and content in it

format: attributes:

bgcolor=color

background=img url

text=text color

link=link color

alink=active link color

vlink=visited link color

Internet Programming14


15/24

HTML Tags (contd)

headings predefined formats for text presentation

six heading formats defined in HTML: up to

the largest font size

the smallest font size

Format:

E.g. a text in heading two

bold makes a text appear in bold

Format: or

E.g. a text in bold



16/24

HTML Tags (contd)

italics makes a text appear in italics

Format: or

E.g. a text in italics

underline makes a text appear underlined

Format:

E.g. underlined text

paragraph defines a paragraph

Format:



17/24

HTML Tags (contd)

E.g.

this is a paragraph of text. it has a new linebefore and after it.

The browser inserts a new line before and after the text inthe paragraph tag.

attribute:

align=alignment {left, right, center, justify}

line break

inserts a new line Format:

E.g. line one
line two
line three
line four



18/24

HTML Tags (contd)

horizontal rule inserts a horizontal line

Format:

attributes:

width=width {absolute: in pixels or relative: in %} noshade

color=color {browser dependent}

E.g.

sub/sup define either a subscript or a superscript

Format: ;

E.g. X12 + 2X3



19/24

HTML Tags (contd)

lists Unordered Lists (ul)

define bulleted lists

Format:

Atribute: type=bullet type {disc, circle, square}

E.g.

bookmarkerchalkInternet Programming19


20/24

HTML Tags (contd)

Ordered Lists (ol)

define numbered lists

Format:

Atribute:

type=number type {1, i, I, a, A}

E.g.

bookmarkerchalk



21/24

HTML Tags (contd)

Definition Lists (dl)

define a list of term-description pairs

Format:

E.g.

booksomething that we read

markersomething we write with



22/24

HTML Tags (contd)

images insert images in an html document

Format: {no end tag}

Attributes:

src=img url alt=alternate text

border=border width

width=image width

height=image height

supported image formats:

gif, jpg/jpeg, png

E.g.



23/24

HTML Tags (contd)

anchor defines a hyperlink or a named anchor

used for navigation

Format:

Attributes: href=url

target=target { _self, _blank }

name=anchor name

E.g.

Go to home

Google



24/24

HTML Tags (contd)

Navigation with anchors named anchors

named places in an html document

Format:

E.g.

linking to anchors

Format:

link text {on the same page}