Chapter 5: HTML Basics

October 2011

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
Internet Programming

Introduction (contd)

www (world wide web)

A collection of websites A collection of resources:

A website

Web pages (static / dynamic) Media files (images, animations, sound, ) Style files (CSS) Documents (pdf, doc, txt, rtf, ) E.g. www.aau.edu.et

Has a globally unique name

Stored on machines called web servers

Internet Programming

Introduction (contd)

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 using software 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.
Internet Programming

Introduction (contd)

Software involved:

At the server:

Web server software : listens for incoming requests for resources from 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

Internet Programming

Introduction (contd)

Communication protocol

HTTP (HyperText Transfer Protocol)

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

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

Internet Programming

Introduction (contd)

How are websites uniquely named?

DNS (Domain Name System)

Resolves a human friendly name (eg www.google.com) to a machine 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 a given name There are about 12 root DNS servers (http://www.rootservers.org/)

Internet Programming

Introduction (contd)

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,

et, us, za, uk, tv,

Two letter country codes (CCTLDs): indicating the country

Internet Programming

Introduction (contd)

URL (Uniform Resource Locator)

The exact address of a resource on the web Format:

<protocol>://<host>[:<port>][<path>][?<query>]

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, Domain names (eg. www.google.com) IP address

Host identifies the machine on which the requested resource is stored

Port identifies the port number of the web server software on the web server 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&

Internet Programming

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

10

Internet Programming

HTML Document Structure

An HTML document has the following basic structure:

<html> <head> <title>page title</title> </head> <body> </body> </html>

11

Internet Programming

HTML Elements

Names enclosed in < and > Commonly have a start tag and end tag

Start tag format: <tag_name> End tag format: </tag_name> [ note the / after < ] E.g. <strong>bold text</strong>
E.g. <br> <tag_name attr1=val1 attr2=val2 ></tag_name> E.g. <font face=arial size=9>Hello</font>

Some tags may not have end tags

Tags may have attributes

Not case sensitive

12 Internet Programming

HTML Tags

html

everything in the document should be within <html> &</html> contains information which is not displayed in the browser display area may contain other tags in it format: <head></head>

head

title

13

sets the title of the web page to be displayed in the browsers title bar. found within the <head> tag. format: <title></title> Internet Programming

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: <body></body> attributes:

bgcolor=color background=img url text=text color link=link color alink=active link color vlink=visited link color
Internet Programming

14

HTML Tags (contd)

headings

predefined formats for text presentation six heading formats defined in HTML: <h1> up to <h6>

<h1> the largest font size <h6> the smallest font size <h1></h1>

Format:

E.g. <h2>a text in heading two</h2>

bold

15

makes a text appear in bold Format: <b></b> or <strong></strong> E.g. <b>a text in bold</b>
Internet Programming

HTML Tags (contd)

italics

makes a text appear in italics Format: <i></i> or <em></em> E.g. <i>a text in italics</i>

underline

makes a text appear underlined Format: <u></u> E.g. <u>underlined text</u>

defines a paragraph Format: <p></p>
Internet Programming

paragraph

16

HTML Tags (contd)

E.g. <p>this is a paragraph of text. it has a new line before and after it.</p> The browser inserts a new line before and after the text in the paragraph tag. attribute:

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

line break

inserts a new line Format: <br> E.g. line one <br> line two <br> line three <br> line four

17

Internet Programming

HTML Tags (contd)

horizontal rule

inserts a horizontal line Format: <hr> attributes:

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

E.g. <hr width=75% noshade color=#FF0000>

sub/sup

18

define either a subscript or a superscript Format:  ;  E.g. X₁² + 2X₃
Internet Programming

HTML Tags (contd)

lists

Unordered Lists (ul)

define bulleted lists Format: <ul> <li></li> <li></li> </ul> Atribute: type=bullet type {disc, circle, square} E.g. <ul type=square> <li>book</li><li>marker</li><li>chalk</li></ul>
Internet Programming

19

HTML Tags (contd)

Ordered Lists (ol)

define numbered lists Format: <ol> <li></li> <li></li> </ol> Atribute: type=number type {1, i, I, a, A} E.g. <ol type=i> <li>book</li><li>marker</li><li>chalk</li></ol>

20

Internet Programming

HTML Tags (contd)

Definition Lists (dl)

21

define a list of term-description pairs Format: <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> E.g. <dl> <dt>book</dt><dd>something that we read </dd> <dt>marker</dt><dd>something we write with </dd> Internet Programming </dl>

HTML Tags (contd)

images

insert images in an html document Format: <img> {no end tag} Attributes:

src=img url alt=alternate text border=border width width=image width height=image height gif, jpg/jpeg, png

22

supported image formats:

E.g. <img src=assets/images/logo.gif alt=Site Logo>

Internet Programming

HTML Tags (contd)

anchor

defines a hyperlink or a named anchor used for navigation Format: <a></a> Attributes:

href=url target=target { _self, _blank } name=anchor name

E.g. <a href=home.htm>Go to home</a> <a href=http://www.google.com target=_blank>Google</a>

23 Internet Programming

HTML Tags (contd)

Navigation with anchors

named anchors

named places in an html document Format: <a name=anchor_name></a> E.g. <a name=top></a>
Format: <a href=#anchor_name>link text</a> {on the same page} <a href=url#anchor_namelink text</a> {on a different page} E.g. <a href=#top>Top of page</a> {assuming the example above} <a href=http://www.aau.edu.et/history.htm#establishment> Establishment of AAU</a>
Internet Programming

linking to anchors

24