In the fallowing 4 weeks we will concentrate on the programming of the Dynamic Web. HTML is the...

Post on 22-Dec-2015

212 views 0 download

Tags:

Transcript of In the fallowing 4 weeks we will concentrate on the programming of the Dynamic Web. HTML is the...

In the fallowing 4 weeks we will concentrate on the programming of the Dynamic Web.

HTML is the publishing language for the World Wide Web. Combined with HTML, there are many progrmming

languages, such as, Perl, Java, Javascript, ASP(Active

Server Pages), PHP(Personal Home Page Tools),Coldfusion, etc..

Topics will be discussed in this part: Introduction to HTML Sever side CGI programming with Perl

Introduction to HTML HTML is the web’s own publishing language. It consists of a number of

“tags” that the author has used to make up the various components of the document – Its paragraphs, headings, tables and so on – and also to insert graphics and hypertext links.

The main topics we will discuss in this part is:

1. The Minimum HTML Document, 2.Paragraphs & Headings, 3. Tag options and centering, 4. Inline images & Horizontal rules, 5. Link to other pages & Link within pages, 6. Lists, 7 Tables, 8. Forms, 9. Frames, 10. Client pull, 11. Image Maps.

Text Editor Browser

The simple HTML document The output of the html document

Mimimum HTML Document

The form of a tag is <tagname options>The form of a matching end tag is </tagname>

Making Up Paragraphs & Heading

HTML has a tag which indicates what a paragraph is. That tag is <p>

HTML defines 6 levels of headings.

Each tag may have different options (attributes) to control the way of output appears.

Inline images & Horizontal rules

The tag for images in HTML is the img tag. Img options: align, size(width, height), space(Vspace, hspace) alt,… Horizontal rules are used to improve the appearance of a page by breaking it

into sections.

Make up Lists HTML supports unnumbered, numbered, and definition lists The list elements included in HTML standard are:

OL ordered(numbered ) list

UL unordered(bulleted or simple) list

LI (list item)

DL (definition term)

DD (definition itself)

Links to other pages and within pages

The tag used to represent links is the “a” tag <a>, the end tag </a> must be used

TABLE Simple table example To create a simple table

for your WebPages, you need at least three basic different tags: <table> </table> The

entire table should be enclosed in this pair of tags.

<tr>(</tr>) This tag begins a new table row

<td>(<td>) This tag creates a table cell in a table row

the example file SimpleTable.html

Table Aligning options Using the align option of each tags and set it to the

value of left, right, center, justify to align the contents horizontally(simpletablealign.html):

<table border=10 frame=box rules=all width=80% align=center>

<tbody align=center> <tr><th>A Stocks<th align=left>Company Name <tr><td>MSFT<td>Microsoft Co. Ltd <tr><td align=right>MONI<td>Marconi PLC <tr><td>RHAT<td>RedHat Software Co. Ltd </table>

Table Aligning options

Table Aligning options Using the valign option of each tags and set it to the value of top,

middle(the default), bottom, baseline to align the contents vertically(tablevalign.html):

<table border=10 frame=box rules=all width=80% align=center> <tbody align=center> <tr><th>A Stocks <th align=left> Company Name <tr><td valign=bottom> MSFT<td> Microsoft <br>Co. Ltd <tr><td align=right> MONI<td> Marconi PLC <tr><td valign=top> RHAT<td> Redhat Software <br>Co. Ltd </table>

Table Aligning options

Table Aligning options Table captions Using tag <caption> you can control

the caption go to bottom or top using align= bottom or top

Controlling the Table as a whole Width, Align……

Forms