Scribd
Upload
57 views

Java Script

The document discusses HTML and its evolution including versions from HTML 1.0 to HTML5. It also covers related topics like XHTML and differences between HTML and XHTML regarding syntax and structure.

Uploaded by

Meron Abebe
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
57 views

Java Script

The document discusses HTML and its evolution including versions from HTML 1.0 to HTML5. It also covers related topics like XHTML and differences between HTML and XHTML regarding syntax and structure.

Uploaded by

Meron Abebe
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 136

 HTML/XHTML/HTM5

1 Web Programming
HTML
• Invented by British physicist Tim Berners-Lee in 1990
• HTML, an acronym for HyperText Markup Language, is a
computer language for creating websites and web
applications.
• Consisting mainly of a series of codes usually written in a
text file and then saved as html
• code written in the HTML language translates into a
beautiful, well-formatted text or a combination of text and
media when viewed through a browser.

2 Web Programming
HTML Versions
• HTML 1.0: This was the barebones version of HTML and
the very first release of the language.
• HTML 2.0: This version was introduced in 1995 and it
gradually evolved to allow extra capabilities including:
form-based file upload, tables, client-side image maps and
internationalization.
• HTML 3.2: In an attempt to ensure development of
standards for the World Wide Web, the World Wide Web
Consortium (W3C) was founded by Tim Berners-Lee in
1994. By 1997, they published HTML 3.2.

3 Web Programming
HTML Versions..
• HTML 4.0: Later in 1997, the W3C released HTML 4.0 — a
version that adopted many browser-specific element types and
attributes.
• HTML 4.0 will later be reissued with minor edits in 1998.
• HTML 4.01: In December 1999, HTML 4.01 was released.
• XHTML: The specifications for this was introduced in 2000 and
it was recommended to be used as the joint-standard with HTML
4.01. It incorporated XML to ensure code is properly written and
to ensure interoperability between programming languages.
• HTML5: The W3C published HTML5 as a recommendation in
October 2014 and will later release HTML 5.1 in November
2016.

4
Hypertext Markup Language (HTML)
 describes the content and structure of information on a
web page
 A markup language, i.e. it’s used to markup content.
 Composed of several tags.
 not the same as the presentation (appearance on screen)
 surrounds text content with opening and closing tags
 each tag's name is called an element
 syntax: <element> content </element>
 example: <p>This is a paragraph</p>

5 Web Programming
 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

6 Web Programming
Choosing Your HTML Editor
• If you will be creating web pages in HTML, you will need
an HTML editor.
• There are many free and paid HTML editors, and below
are some of the top options you can choose from:
• HTML-Kit
• CoffeeCup
• KompoZer
• Komodo Edit
• Notepad++
• Bluefish
HTML – Document Structure
 An HTML document has the following basic structure:

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

8 Web Programming
XHTML
 a newer version of HTML, standardized in 2000
 uses a markup format called XML (XML + HTML =
XHTML)
 XHTML stands
forEXtensible HyperText Markup Language and is the next
step in the evolution of the Internet.
 The XHTML 1.0 is the first document type in the XHTML
family.

9 Web Programming
 though the browser will accept some malformed HTML,
we'll write "strict" XHTML that complies to the official
web standards
 a strict XHTML page uses some different syntax and tags
 XHTML is almost identical to HTML 4.01 with only few
differences.
 This is a cleaner and more strict version of HTML 4.01.

10 Web Programming
 XHTML was created for two main reasons:

1.To create a stricter standard for making web pages,


reducing incompatibilities between browsers
2. To create a standard that can be used on a variety of
different devices without changes

11 Web Programming
 The Main Changes:
There are several main changes in XHTML from HTML:
 XHTML document must have a DOCTYPE declaration at
the top of the document.
 All XHTML tags and attributes should be written in lower
case only.
 All the XHTML tags will have their closing tags.
 All the attribute values must be quoted.
 Attribute minimization is forbidden.
 The id attribute replaces the name attribute.
 The language attribute of the script tag is deprecated
 All the tags should be properly nested

12  Element Prohibitions Web Programming


DOCTYPE Declaration:
 The first change which will appear on your page is the Doctype.
Allthough this was optional in HTML, XHTML requires you to
add a Doctype.
 There are three available for use.
XHTML 1.0 Strict
 If you are planning to use strictly Cascading Style Sheet and
avoiding to write most of the XHTML attributes, then it is
recommended to use this DTD. A document conforming to this
DTD will be of the best quality

13 Web Programming
 If you want to use XHTML 1.0 Strict DTD then you need
to put following line at the top of your XHTML
document.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">

14 Web Programming
 XHTML 1.0 Transitional:
 If you are planning to use many XHTML attributes as well as few
Cascading Style Sheet properties, then you should adopt this DTD and you
should write your XHTML document according to DTD.
 This DTD contains all HTML elements and attributes, INCLUDING
presentational and deprecated elements (like font). Framesets are not
allowed. The markup must also be written as well-formed XML.
 If you want to use XHTML 1.0 Transitional DTD then you need to put the
following line at the top of your XHTML document
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

15 Web Programming
XHTML 1.0 Frameset:
 This DTD is equal to XHTML 1.0 Transitional, but allows the
use of frameset content.
You can use this when you want to use HTML Frames to
partition the browser window into two or more frames.
 If you want to use XHTML 1.0 Frameset DTD then you need
to put the following line at the top of your XHTML document.
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">
 NOTE: No matter what DTD you are using to write your XHTML
document, if it is a valid XHTML document then your document will be
considered as a good quality document.

16 Web Programming
Case Sensitivity:
 XHTML is case sensitive markup language, more strictly
all the XHTML tags and attributes should be written in
lower case only. Here is the example, this is wrong
because Href and anchor A are having characters which
are not in lower case.
<!-- This is invalid in XHTML -->
<A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>
<!-- Correct XHTML way of writing this is as follows -->
<a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>

17 Web Programming
Closing Tags:
 Each and every XHTML tag should have an equivalent
closing tags, even empty elements should also have
closing tags. Here is the example showing the difference:
 <!-- This is invalid in XHTML -->

<p>This paragraph is not written according to XHTML syntax.



<!-- This is also invalid in XHTML -->
<img src="/images/xhtml.gif">

18 Web Programming
 Below is the correct way of writing above tags in
XHTML. Difference is that, here we have closed both the
tags properly.
 <!-- This is valid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.</p>
<!-- This is also valid now -->
<img src="/images/xhtml.gif" />

19 Web Programming
Attribute Quotes:
 All the XHTML attribute values must be quoted otherwise
your XHTML document will be assumed as an invalid
document. Here is the example showing the difference.

<!-- This is invalid in XHTML -->


<img src="/images/xhtml.gif" width=250 height=50 />
<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" width="250" height="50" />

20 Web Programming
 Attribute Minimization:
 XHTML does not allow attribute minimization. It means
you should explicitly state the attribute and the value.
Following is the example showing the difference:
<!-- This is invalid in XHTML -->
<option selected>
<!-- Correct XHTML way of writing this is as follows -->
<option selected="selected">

21 Web Programming
 The id Attribute:
 The id attribute replaces the name attribute. Instead of
using name="name", XHTML prefer to use id="id".
Following is the example to show this difference:
<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" name="xhtml_logo" />
<!-- Correct XHTML way of writing this is as follows --> <img
src="/images/xhtml.gif" id="xhtml_logo" />

22 Web Programming
The Language Attribute:
 The language attribute of the script tag is deprecated.
 Following is the example showing this difference:

<!-- This is invalid in XHTML -->


<script language="javascript" type="text/javascript" >
document.write("Hello XHTML!");
</script>

<!-- Correct XHTML way of writing this is as follows -->

<script type="text/javascript" >


document.write("Hello XHTML!");
</script>
23 Web Programming
Nested Tags:
 All the XHTML tags must be nested properly otherwise
your document will be assumed as a wrong XHTML
document.
 Following is the example showing this difference:

<!-- This is invalid in XHTML -->


<b><i> This text is bold and italic</b></i>

<!-- Correct XHTML way of writing this is as follows -->


<b><i> This text is bold and italic</i></b>

24 Web Programming
 Structure of an XHTML page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
<head>
<title>
Every document must have a title
</title>
</head>
<body>
...your content goes here...
</body>
</html>

25 Web Programming
(X)HTML Elements
 Names enclosed in < and >
 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>
 HTML elements are Not case sensitive
 XHTML elements are case sensitive

26 Web Programming
Building XHTML Documents
 Elements consist of a start tag, content and an end tag:
Start Tag Content End Tag

<h1> Introduction to XHTML</h1>

 Empty elements are used to describe elements that do not have any
content: <br />
 Attributes are used to describe elements and are placed inside the open
tag of an element:
<img src=“picture.jpg” alt= “This is my picture” />
 Comments are used to annotate the document, but are not processed
by parsers:
<!-- This is a comment -->

27
 some tags can contain additional information called attributes
 syntax: <element attribute="value" attribute="value">
content </element>
 example:
<a href="page2.html">Next page</a>
E.g. <font face=“arial” size=“9”>Hello</font>
 some tags don't contain content; can be opened and closed in
one tag
 syntax: <element attribute="value" attribute="value" />
 example: <hr />
 example: <img src="bunny.jpg" alt="pic from Easter" />

28 Web Programming
Structure of XHTML
Documents
Documents consist of three parts:
1. Document Type Declaration
2. Header
3. Body

1 <?xml version=”1.0”?>
1 <?xml version=”1.0”?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 <!DOCTYPE"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3 <html xmlns=”http://www.w3.org/1999/xhtml”>
3
Root Element 4 xmlns=”http://www.w3.org/1999/xhtml”>
<html <head>
4 5
<head> <title>Strict XHTML Document</title>
5 6<title>Strict
</head> XHTML Document</title>
7 <body>
6 </head>
8 <!-- Body of document goes here -->
7 <body>
9 </body>
8 10<!--</html>
Body of document goes here -->
9 </body>
10 </html>

29
Document Framework Elements
 The <html> element
• This is the root element for an XHTML document and must be present in every XHTML
document
• everything in the document should be within <html> &</html>
• The header and body elements are contained within the root <html> element
• Attributes: xmlns=http://www.w3.org/1999/xhtml
(Declares a namespace for custom tags in an HTML document.)
 The <head> element
• Contains header elements that contain data used primarily by programs such as search engines
 contains information which is not displayed in the browser display area
 may contain other tags in it
 Elements that can be contained within the <head> element:
 <title> - Title of the document
 <base> - Base URL of the document
 <link> - Defines document relationship to other documents
 <meta> - Contains information about document such as keywords, author information and
content type
 <script> - Defines link to scripts used in the document
 <style> - Defines links to style sheets used in the document

30
HTML Tags (cont’d)
 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”
 …

31 Web Programming
Exercise : Hello World

1. Open Notepad (StartRunnotepad)


2. Enter the following, as is

32 Web Programming
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My First Web page</title>
</head>
<body>
Hello World!
</body>
</html>

33 Web Programming
3.Save it with file name: hello.html (in My Documents)
4. Open My Documents folder
5. Find and open (double-click) hello.html

34 Web Programming
Basic Formatting Elements
 Block Level Elements :
Used to describe blocks of content and to label the main content
headings

 Character Level Elements:


Presentational Elements – Used to define how text should be
displayed
Logical Elements – Used to define the meaning of the text style

35
Block Level Elements
<p>…</p> - Paragraph element
<p> This is a paragraph </p>

<br /> - Line break (empty element)


This is a line break <br />

<h1>…</h1> to <h6>…</h6> - Heading elements


<h1>This is the largest heading</h1>
<h6>This is the smallest heading</h6>

<hr /> - Horizontal rule (empty element)


This is a horizontal rule <hr />

<div>…</div> - Section divider


<div>This is a section divider</div>

36
HTML/XHTML Tags (cont’d)
 headings
 predefined formats for text presentation
 headings to separate major areas of the page
 six heading formats defined in HTML: <h1> up to <h6>
 <h1> the largest font size
 <h6> the smallest font size
 Format:
 <h1>…</h1>
 E.g. <h2>a text in heading two</h2>

37 Web Programming
Eg:
<h1>Addis Ababa University </h1>
<h2>College of Natural Sciences</h2>
<h3>Department of Computer Science</h3>

38 Web Programming
 paragraph
 defines a paragraph
 Format: <p>…</p>
<p>You're not your job.
You're not how much money you have in the bank.
You're not the car you drive. You're not the contents
of your wallet. You're the all-singing, all-dancing crap of the
world.</p>

39 Web Programming
HTML Tags (cont’d)
 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}

40 Web Programming
HTML Tags (cont’d)
 horizontal rule
 inserts a horizontal line
 a horizontal line to visually separate sections of a page
 Format: <hr />
 attributes:
 width=“width” {absolute: in pixels or relative: in %}
 noshade=“noshade”
 color=“color” {browser dependent}
 E.g. <hr width=“75%” noshade=“noshade” color=“#FF0000”>
p>First paragraph</p>
<hr />
<p>Second paragraph</p>

41 Web Programming
Block Level Elements – XHTML Code
<?xml version=”1.0”?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>XHTML Block-level Elements</title>
</head>
<body>
<p> This is a paragraph about African Gray parrots. The African Gray is
one of the most popular pet birds of the parrot family. It is known
for its intellegence and is one of the best talkers of all domestic
birds. This parrot is native to Africa and can live to be almost 70
years old.</p>
<p> This is also a paragraph about African Gray parrots. Here is some
additional information about the African Gray parrot separated by
line breaks: (break here) <br />The African Gray parrot is about 15
inches long and (break here) <br />Has a wing span of about 20
inches.</p>
<hr />
<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>
<hr />
</body>
</html>
42
Block Level Elements – Web Browser

43
 bold
 makes a text appear in bold
 Format: <b>…</b> or <strong>…</strong>
 E.g. <b>a text in bold</b>

44 Web Programming
Presentational Formatting Elements
<b>…</b> - Bold font style
<b>This text is bold</b>

<big>…</big> - Increases the current font size


<big>This text is larger than the current font<big>

<i>…</i> - Italic font style


<i>This text is in italic font</i>

<small>…</small> - Decreases the current font size


<small>This text is smaller than the current font</small>

<sub>…</sub> - Subscript text


<sub>This text is subscript</sub>

<sup>…</sup> - Superscripted text


<sup>This text is superscript</sup>

45
HTML Tags (cont’d)
 underline
 makes a text appear underlined
 Format: <u>…</u>
 E.g. <u>underlined text</u>
sub/sup
 define either a subscript or a superscript
 Format: <sub>…</sub> ; <sup>…</sup>
 E.g. X<sub>1</sub><sup>2</sup> + 2X<sub>3</sub>

 <b><u><i>Italic,underline and bold </i></u></b>

46 Web Programming
Comments: <!-- ... -->

 HTML comments
 insert commented text in an html document
 Format: <!-- comment text -->
 E.g. <!-- this is a comment text -->
<!-- My web page, by Suzy Student
CSE 190 D, Spring 2048 -->
<p>CSE courses are <!-- NOT --> a lot of fun!</p>
CSE courses are a lot of fun! text

47 Web Programming
Presentational Formatting Elements – XHTML Code
<?xml version=”1.0”?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>XHTML Presentational Text Formatting Elements</title>
</head>
<body>
<p>
This text is formatted in <b>bold</b>
</p>
<p>
This text is formatted in <i>italics</i>
</p>
<p>
See how <big>the big element</big> increases the current font size
and how <small>the small element</small>decreases it.
</p>
<p>
This is how the <sup>superscript element</sup>
and the element <sub>subscript element</sub> format text.
</p>
</body>
</html>

48
Block and inline elements (explanation)
 block elements contain an entire large region of content
 examples: paragraphs, lists, table cells
 the browser places a margin of whitespace between block
elements for separation
 inline elements affect a small amount of content

examples: bold text, code fragments, images


 the browser allows many inline elements to appear on the
same line must be nested inside a block element

49 Web Programming
 P text em text
 text a text

50 Web Programming
Presentation Controls
 All tags have associated attributes but many attributes (& tags)
have been deprecated with the move from HTML to XHTML

 XHTML uses Cascading Style Sheets (CSS) to format the content


rather that embedding the formatting code within the XHTML code
(these will be covered later in the course)
 Transitional XHTML still supports these attributes and they can be
used for the first few tutorials until CSS has been covered.
 The background colour can be set with the <body> tag
(deprecated in XHTML)
<body bgcolor = “#FFFF00”> (sets the colour to yellow)
 Font attributes can be set with
<font color =“#0066CC” face = “Times”>
(Both the tag and the attributes have been deprecated)
 Text can also be aligned (deprecated) either with <p>or<h1> etc
<p align = “center”> or <h3 align = “right”>

51
Logical Formatting Elements
<cite>…</cite> - Formats citation text
<cite>This text is bold</cite>

<code>…</code> - Formats computer code text


<code>This is computer code text</code>

<em>…</em> - Emphasis formatting – in most browsers, this is


italic text
<em>This is emphasis text - italics</em>

<strong>…</strong> - Emphasis formatting – in most browsers,


bold text
<strong>This is emphasis text - bold</strong>

52
Logical Formatting Elements- XHTML Code
<?xml version=”1.0”?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>XHTML Logical Text Formatting Elements</title>
</head>
<body>
<p>
Following is a citation: <br />
<cite>
Four score and seven years ago, our fathers brought forth upon this continent a new
nation:
conceived in liberty, and dedicated to the proposition that all men are created equal.
</cite>
</p>
<p>
Following is a block of code: <br />
<code>
while ($x &lt; 10) { <br />
$var = $x + 1; <br />
$count++; <br />
} <br />
</code>
</p>
<p> This text is formatted using the <strong>strong element</strong></p>
<p> This text is formatted using the <em>em element</em></p>
</body>
53 </html>
Logical Formatting Elements- Web browser

54
Ins and del tags
 The ins(insert) tag is similar to u(underline tag), it is used
to show an inserted text

 del (delete) tag is used to show a deleted text

 Eg

 <p>The price of Shampoo is: <del
>100</del><ins>95</ins>

55 Web Programming
HTML Tags (cont’d)
 lists
 Unordered Lists (ul) (block)
 define bulleted lists
 ul represents a bulleted list of items (block)
 li represents a single item within the list (block)
 Format:
<ul>
<li>…</li>
<li>…</li>
…
</ul>
 Atribute:
 type=“bullet type” {disc, circle, square}

56 Web Programming
 E.g.
 <ul type=“square”> <li>book</li><li>marker</li><li>chalk</li></ul>

 Eg.
<ul>
<li>No shoes</li>
<li>No shirt</li>
<li>No problem!</li>
</ul>

57 Web Programming
HTML Tags (cont’d)
 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>

58 Web Programming
nested list
 a list can contain other lists:
<ul>
<li>Colleges:
<ul>
<li>Natural Science</li>
<li>Social Science</li>
</ul>
</li>
<li>Schools:
<ul>
<li>Information Sceince</li>
<li>Medicine</li>
</ul>
</li>
</ul>

59 Web Programming
Class Activity: Create the following list

60
HTML Tags (cont’d)
 Definition Lists <dl>, <dt>, <dd>
 define a list of term-description pairs
 dl represents a list of definitions of terms (block)
 dt represents each term, and dd its definition
 Format:
<dl>
<dt>…</dt>
<dd>…</dd>
<dt>…</dt>
<dd>…</dd>
…
</dl>
 E.g.
<dl>

61 Web Programming
<dl>
<dt>book</dt>
<dd>something that we read …</dd>
<dt>marker</dt>
<dd>something we write with …</dd>
</dl>

62 Web Programming
Definition Lists
 <dl> for list element; <dt> for “definition terms”; <dd>
for “definition data”
 Example
 <dl>
<dt><strong>CPU</strong></dt>
<dd>Central Processing Unit</dd>
<dt><strong>ALU</strong></dt>
<dd>Arithmetic Logic Unit</dd>
<dt><strong>GHz</strong></dt>
<dd>Gigahertz</dd>
</dl>
 Quotations: <blockquote>
 a lengthy quotation (block)
<p>As Lincoln said in his famous Gettysburg Address:</p>
<blockquote>
<p>Fourscore and seven years ago, our fathers brought forth
on this continent a new nation, conceived in liberty, and
dedicated to the proposition that all men are created equal.</p>
</blockquote>
As Lincoln said in his famous Gettysburg Address:
Fourscore and seven years ago, our fathers brought forth on this continent a
new nation,conceived in liberty, and dedicated to the proposition that all
men are created equal.

64 Web Programming
 Inline quotations: <q>
 a short quotation (inline)

<p>Quoth the Raven, <q>Nevermore.</q></p>


Quoth the Raven, “Nevermore.”

65 Web Programming
Image File Formats
 Three primary formats for Web images:
 GIF – Graphics Interchange Format
The GIF format supports 256 colors and is a good format for small
non-photographic images like icons and buttons
 JPEG - Joint Photographic Experts Group
JPEG is a compression technique that is used to reduce large file
sizes for high quality images, like photographs
 PNG - Portable Network Graphics
PNG was originally developed to replace the GIF format. The
biggest difference between PNG and GIF is that PNG supports more
than 256 colors
 The next slide will demonstrate the differences in image quality and file
sizes for these 3 formats. Notice that the GIF file is much more grainy than
the JPEG and PNG files. This is due to the restriction to only 256 colors.

66
Image File Formats Example
Original file – Windows Bitmap file – Stage.bmp File Size – 351k

GIF Format PNG Format


JPEG Format
Stage.gif Stage.png
Stage.jpg
File size – 13k File size –164k
File size – 28k
67
HTML Tags (cont’d)
 Images: <img>
 inserts a graphical image into the page (inline)
 Format: <img />
 Attributes:
 src=“img url” : the src attribute specifies the image URL
 alt=“alternate text”
 XHTML also requires an alt attribute describing the image
 border=“border width”
 width=“image width”
 height=“image height”
 supported image formats:
 gif, jpg/jpeg, png
 E.g. <img src=“assets/images/logo.gif” alt=“Site Logo”>

68 Web Programming
The <img> element
The <img> element is an empty element

The two required attributes are:


 src – Defines the path to the image file - can be an
absolute or relative path

 alt – Defines alternate text for the image file that will
display in place of the image if the client can not
display images
 Title-Defines description to the image and it is displayed when we hover of the
image using mouse

<img src="myimage.gif" alt="Alternate text“


title=“some title” />

69
Image- code

This code assumes that an image named forest.jpg is


stored in the same directory as the html file

70
File organisation
 The previous example assumes the image file is in the same
folder as html file

 But web sites can get complicated and they are much easier to
manage if your files are organised into folders
 Eg

 if your images are in a separate folder - then the path would


look like this in the previous example
<img src=“../images/forest.jpg” alt=“trees” />

71
Link Types
 Link to other pages within site

 Link to other sites

 Link to a named place within the same page

 Link to create an email message.

72
Creating XHTML Links
The anchor element - <a>
 Requires the user to perform an action in order to activate the link.

Usually this is clicking on the linked text or image


 The href attribute defines the file to be linked to

<a href=”http://chughes.com/index.html”>This is a link</a>

73
Creating XHTML Links
Relative vs. Absolute URL’s
 Relative links are used to link to documents that reside on
the same Web server,
so the protocol and domain name reference can be omitted
from the URL:

<a href=”newpage.html”>Click Here</a>

 Absolute links are used to link to documents that reside on


different Web servers and must contain the complete URL:

<a href=”http://chughes.com/newpage.html”>Click Here</a>

74
Linking With the <img> Element
 To use the <img> element as a link:
 Embed the <img> element within an <a> element

<a href=”newpage.html”><img src=”myimage.gif” alt=”Click on this image” /></a>

 By default, web browsers place a blue border around the image to identify it
as a clickable object

 To remove the blue border around the image, use a style definition. This is
usually done in a cascading style sheet.(CSS) This will be covered later in the
course.

75
XHTML Links code
<?xml version=”1.0”?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Link Examples in XHTML</title>
</head>
<body>
<p> Here are some examples of links in XHTML: </p>
<p><a href=”http://chughes.com/newpage.html”>This is an absolute link
to a new
page</a></p>
<p><a href=”newpage.html”>This is a relative link to a new
page</a></p>
<p><a href=”newpage.html”><img src=”button.gif” alt=”This image is a
clickable button”></a></p>
<p><a href=”mailto:[email protected]”>This is link that launches an
email message</a></p>
</body>
</html>

76
Linking within a single document
 Links can be created to reference different sections of a single document
using internal links and anchors:
 Use an anchor to mark a section in the document where you would like
to link to:

<a name=”footnote”>Footnote</a>
 Use an internal link to reference the anchored section. Internal links
begin with a “#” character:

<a href=”#footnote”>Link to footnote</a>


 When the user clicks on the internal link, they will be directed to the
section referenced by the anchor

77
Linking within a single document - code

internal link – has # in front of name

Named anchor

78
Linking within a single document – web browser

internal links – will jump to


where the named is anchor is

79
Class Activity
1. Create the following web page using Textpad, validate your code and then view in a browser.

Links to Act3_Q1.html

Links to Act4_Q1.html

80
HTML Tags (cont’d)
 Anchors or Links: <a>
 links, or "anchors", to other pages (inline)
 defines a hyperlink or a named anchor
 used for navigation
 Format: <a>…</a>
 Attributes:
 href=“url”
 uses the href attribute to specify the destination 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>

81 Web Programming
HTML Tags (cont’d)
 Navigation with anchors
 named anchors
 named places in an html document
 Format: <a name=“anchor_name”></a>
 E.g. <a name=“top”></a>
 linking to anchors
 Format:
 <a href=“#anchor_name”>link text</a> {on the same page}

 <a href=“url#anchor_name”link 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>

82 Web Programming
More about anchors

 types of URLs that can appear in anchors:


 absolute (to another web site)
 relative (to another page on this web site)
 specify a tooltip with the title attribute
Example:
<p><a href="1-internet.html">Lecture Notes 1</a></p>
<p><a href="http://www.google.com/"
title="Search">Google</a></p>

Lecture Notes 1
Google

83 Web Programming
Creating image map
<img src="./images/back.jpg" alt="Schedule is missing from
here.." width="400px" height="400px"
usemap="#mymap"/>

<map name="mymap">
<area shape="rect" coords="0,0,100,100" alt="Google"
title="Go to google" href="http://wwww.google.com" />
<area shape="circle" coords="200,200,100" alt="yahoo"
title="Go to hayoo" href="http://www.yahoo.com" />
</map>

84 Web Programming
 Phrase elements : <em>, <strong>
 em: emphasized text (usually rendered in italic)
 strong: strongly emphasized text (usually rendered in
bold)
Example:
<p>
HTML is <em>really</em>,
<strong>REALLY</strong> fun!
</p>

85 Web Programming
 Computer code: <code>
 code: a short section of computer code (usually rendered in a
fixed-width font)

<p>
The <code>ul</code> and <code>ol</code>
tags make lists.
</p>
The ul and ol tags make lists.

86 Web Programming
Preformatted text: <pre>

 a large section of pre-formatted text (block)

<pre>
Steve Jobs speaks loudly
reality distortion
Apple fans bow down

</pre>

87 Web Programming
 Using pre and code together
<pre><code>
public static void main(String[] args) {
System.out.println("Hello, world!");
}
</code></pre>

88 Web Programming
HTML Tags (cont’d)
 Tables
 insert tabular data
 design page layout
 Tags involved: <table><thead><tbody>, <tr>, <td>,
<th>, <caption>

89 Web Programming
XHTML Tables
 XHTML tables are sets of elements used to format
content, or even an entire document, into rows and
columns
 Tables can contain any type of content, including text,
links, images, and multimedia
 Tables in XHTML work much the way they do in a
spreadsheet or word processing application and
resemble a grid
 Tables can be used to format blocks of content or they
can also be used to providing formatting for an entire
document

90
Table Elements
 <table> - Encloses the rest of the table elements

 <tr> - Table Row – Used to designate the beginning and


ending of a row of data
 <th> - Table Heading – Used to label the heading cells in a table
row
 <td> - Table Data – Used to label data cells in a table row
 <caption> - Optional element. Used to describe the data in
the table.

91
HTML Tags (cont’d)
 Format:
<table>

<caption>table caption</caption>
<tr>
<td>…</td> <td>…</td> …
</tr>
<tr>
<td>…</td> <td>…</td> …
</tr>
…
</table>

92 Web Programming
Tables
 By default
 Text in each cell is automatically aligned to the left
 All the cells in a column have the same width
 Width of the column is determined by the cell with the most
text in it
 <th> for “table header”
<tr>
<th>Header1</th>
<th>Header2</th>
</tr>
HTML Tags (cont’d)
 E.g.
<table>
<caption align=“center” valign=“bottom”>table 1.0</caption>
<tr>
<th>Column 1</th> <th>Column 2</th>
</tr>
<tr>
<td>Cell 1</td> <td>Cell2</td>
</tr>
<tr>
<td>Cell 3</td> <td>Cell 4</td>
</tr>
</table>

94 Web Programming
Table- code

95
HTML Tags (cont’d)
 Table attributes:
 align=“alignment” {left, center, right}
 bgcolor=“color”
 width=“table width” {absolute or relative}
 border=“border width”
 bordercolor=“color”
 cellspacing=“space amount” {in pixels}
 cellpadding=“padding amount” {in pixels}
 …

96 Web Programming
HTML Tags (cont’d)
 Table row attributes:
 align=“alignment” {left, center, right}
 bgcolor=“color”
 height=“height”
 valign=“alignment” {top, middle, bottom}
 Table data/heading attributes:
 align=“alignment”
 valign=“alignment”
 width=“width”
 bgcolor=“color”
 Unless otherwise specified, <tr> and <td> inherit attributes of
<table> whenever it applies.
97 Web Programming
<table> Common Element Attributes
Name Description and Values

width Sets the width of the table.


Values: Percentage or pixels

border Sets the width of the border around the table. Values: A value of 0 makes the
border invisible. An integer value greater than 0 will result in a border of that number of
pixels.

cellpadding Sets the amount of space between the border of the table cell and the data
contained in the cell.
Values: Percentage or pixels

cellspacing Sets the amount of space between cells.


Values: Percentage or pixels

98
Table – code with attributes

border & width


attribute set

Attributes have a
name and a value –
the value is written in
double quotes in
lowercase

99
<td> and <th> Element Attributes
Name Description and Values

align Horizontal alignment of data in a cell


Values: left, center, right, justified

valign Vertical alignment of data in a cell


Values: top, middle, bottom

rowspan Number of rows a cell span


Values: integer greater than 1 and less than or equal to the total number of rows in the table

colspan Number of columns a cell span


Values: integer greater than 1 and less than or equal to the total number of columns in the table

abbr Used for an abbreviated version of the content of the cell

axis Used to assign a cell to a category group

headers List of cells that provide header information for the current cell based on the values of the id
attributes of the header cells. This list is space delimited.

scope Provides information about which cells the current header cell provides header information for
Values: col, colspan, row, rowspan

100
<tr> Element Attributes
Name Description and Values

align Horizontal alignment of data in all cells in a row


Values: left, center, right, justified

valign Vertical alignment of data in all cells in a row


Values: top, middle, bottom

101
Class Activity
1. Create the following web page using Notpad, validate your code and then view in a browser.

Now modify your code so the web page looks like this

102
Class Activity
3. Create the following web page using Notpad, validate your code and then view in a browser.

103
 Long Tables
 There are three elements that help distinguish between
the main content of the table and the first and last
rows (which can contain different content).
 For long tables you can split the table into a <thead>,
 <tbody>, and <tfoot>.

 <thead>
 The headings of the table should
 sit inside the <thead> element.

104 Web Programming


 <tbody>
 The body should sit inside the <tbody> element.

 <tfoot>
 The footer belongs inside the <tfoot> element.

105 Web Programming


<table>
<thead>
<tr>
<th>Date</th>
<th>Income</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<th>1st January</th>
<td>250</td>
<td>36</td>
</tr>
<tr>
<th>2nd January</th>
<td>285</td>
<td>48</td>
</tr>
<!-- additional rows as above -->

106 Web Programming


<tr>
<th>31st January</th>
<td>129</td>
<td>64</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>7824</td>
<td>1241</td>
</tr>
</tfoot>
</table>
107 Web Programming
HTML Tags (cont’d)
 Cells spanning multiple rows/columns
 two additional attributes of <td> and <th>
 colspan=“num columns”
 rowspan=“num rows”

 E.g. (colspan)
<table>
<tr> <td colspan=“2”>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> </tr>
<tr> <td colspan=“4”>Cell 8</td> </tr>
</table>

108 Web Programming


HTML Tags (cont’d)
 E.g. (rowspan)
<table>
<tr> <td rowspan=“3”>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> </tr>
<tr> <td>Cell 6</td> <td>Cell 7</td> </tr>
</table>

 E.g. (hybrid)
<table>
<tr> <th colspan=“3”>Title</th> </tr>
<tr> <th rowspan=“3”>Cell 1</th> <td>Cell 2</td> <td>Cell 3</td> </tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> </tr>
<tr> <td>Cell 6</td> <td>Cell 7</td> </tr>
</table>

109 Web Programming


110 Web Programming
HTML Special Characters
 Special characters (named characters)
 not found on the standard keyboard
 e.g. ©
 used by HTML
 e.g. <
 ignored by browsers
 e.g. blank spaces
 Format:
 &code;
 Examples:
 &copy;  © &lt;  < &amp;  & &nbsp;  space

111 Web Programming


More characher entities
 &cent;
 &pound;
 &deg;
 &yen;
 &nbsp;
 &copy;
 &reg;
 &deg;
 &frac12;
 &frac34;
 &frac14;
 &sup2;
112 Web Programming
Exercise:
 <p> <a href="http://google.com/search?q=marty&ie=utf-
8&aq=t"> Search Google for Marty </a> </p>

 Solution:
&lt;p&gt; &lt;a href=&quot;http://google.com/search?q=marty&amp;ie=utf-8&amp;aq=t&quot;&gt;
Search Google for Marty &lt;/a&gt; &lt;/p&gt;

113 Web Programming


Divisions

 In HTML, we can create divisions of an HTML document


using the <div> tag.
 A <div> is a logical block tag that has no predefined
meaning or rendering
 Very important for page layout design
 The <div> tag works well with CSS
 Tag format:
 <div> … </div>
 Attributes:
 align=“alignment” {left, right, center} - define content alignt.

114
XHTML Forms

115
Overview of XHTML Forms
 Web forms give Website owners the ability to receive information from their
users or to allow users to personalize the Website

 A Web form can contain many types of input elements:


 Text boxes
 Password boxes
 Buttons
 Checkboxes
 Pull-down menus

 Form input values are processed by a program on the Web server and usually
send another XHTML page back to the Web browser with either a set of
results based on the user’s input, or a confirmation page
 Forms can be located anywhere in the body of an XHTML document

116
The <form> Element
 The <form> - element contains all of the input elements of the form
 Attributes:
◦ action – This attribute is required and provides the path to the
program that will process the form data when the user submits the form
◦ Examples:
<form action=”/cgi-bin/process.cgi”>
<form action=”http://www.grahamm.com/cgi-bin/process.cgi”>
<form action=”mailto:[email protected]”>
◦ method – This attribute tells the web server how to process the data
Values:
get – This is the default value and will automatically assign this value if the
method attribute is not present in the <form> element. This method appends
the form input data to the end of a URL.
The following two <form> start tags are the same:
<form action=”/cgi-bin/process.cgi” method=”get”>
<form action=”/cgi-bin/process.cgi”>

post – This value tells the processing program to send the form data to the server
as regular input data. Nothing will be appended to the URL

117
Get Versus Post
 GET : asks a server for a page or data
 for small and non-secure data
 Is the default method
 Data is sent as part of the request URL
 Limitation in size of data
 if request has parameters, they are sent in the URL as a query string
 POST : submits data to a web server and retrieves the server's response
 For large & secure data
 Input is sent as a data stream after the request URL
 if request has parameters, they are embedded in the request packet, not the URL
 For submitting data, a POST request is more appropriate than a GET
 GET requests embed their parameters in their URLs
 URLs are limited in length (~ 1024 characters)
 URLs cannot contain special characters without encoding
 private data in a URL can be seen or modified by users

118 Web Programming


Text Input Elements
There are three types of text input elements which are empty elements:
1. Text: <input type=”text” />
Allows users to enter text

2. Password: <input type=”password” />


Allows users to enter text which is not visible to others. The
characters are entered and appear only as the “*” character.
WARNING: even though the value is hidden while it is being typed, the
value is sent to the server in text form

3. File: <input type=”file” />


Allows users to Browse their computer in order to send a file to the
Web server

119
Text input elements - attributes
The following attributes can be used with text input elements:
 maxlength - Maximum number of characters allowed for input
 name - Used to identify the input field

 size - Defines the size of the input field in characters. If this is smaller than
the maxlength attribute, the field will scroll.
 size attribute controls onscreen width of text field
 maxlength limits how many characters user is able to type into field
 type - Defines the type of input (text, password, or file for text input fields)

 disabled - Disables the field for user input. The value of a disabled field
will not be sent to the processing program

 readonly - Makes the content of the text field unchangable. The value of this field
will be sent to the processing program

 value - Sets a default value


 value attribute specifies control's initial text

 onselect - For use with scripts. An event handle that specifies an action to be
performed when the field is selected

 onchange - For use with scripts. An event handle that specifies an action to be
performed when the content of the field has been changed
120
 Example:
Student ID:<input type="text" size="10" maxlength="8" /> <br />
Password:<input type="password" size="16" />
<input type="submit" value="Log In" />

121 Web Programming


Selection Form Elements
 The selection form elements allow the user to
select one or many choices from a list

 There are 3 types of selection elements:


 Checkboxes: <input type=”checkbox” />
 Radio buttons: <input type=”radio” />
 Drop-down lists: <select>…</select>

 Using selection elements:


 Checkboxes - used for lists where the user can choose one or more
selections from a list of options. Each item in a
checkbox group can be checked or unchecked.
 Radio Buttons – used for lists which allow the user to choose only one
item in the list
 Drop-down lists - The list appears in a scrollable box. These are
usually used for long lists of items.
 Each item is listed in a separate <option> element

122
 Example:Checkboxes

<input type="checkbox" name="lettuce" /> Lettuce


<input type="checkbox" name="tomato" checked="checked" />
Tomato
<input type="checkbox" name="pickles" /> Pickles

123 Web Programming


 Example: Radio Buttons

<input type="radio" name="cc" value="visa"


checked="checked" /> Visa
<input type="radio" name="cc" value="mastercard" />
MasterCard
<input type="radio" name="cc" value="amex" /> American
Express

124 Web Programming


Completing the Form
 Once a user has completed the form, the data must be sent to the server to be
processed

 The XHTML language provides a means to submit the form using the program
that is specified in the action attribute of the <form> element by assigning the
value of “submit” to the type attribute for the <input /> element:
<input type=”submit” />
 XHTML also gives users an ability to clear the form and reset the default
values by assigning the value of “reset” to the type attribute for the <input />
element:
<input type=”reset” />
 The value attribute can be set to assign names to either of these buttons. If no
value is set, then the computer will assign default text

125
HTML Forms (cont’d)
 Other input fields
 <textarea> tag
 a multi-line text input area (inline)
 used to input a large block of text
 Tag format: <textarea>…</textarea>

 Attributes:
 name=“name”
 cols=“num_columns”
 rows=“num_rows”
 readonly=“readonly”
 wrap=“wrap_type” {off, hard, soft, virtual, physical}

126
 <textarea name="address" cols=30 rows=3>
optional text to appear in the textarea
</textarea>
(use wrap=physical within the tag to force wraparound)

 Example:
<textarea rows="4" cols="20">
Type your comments here.
</textarea>

127 Internet Programming


HTML Forms (cont’d)
 <fieldset> tag
 used to group input fields in a form
 the title/label of the group is set using the <legend> tag
 Tag format:
<fieldset>
<legend>…</legend>
… one or more input fields …
</fieldset>

 Attributes:
 <legend>
 align=“alignment” {left, center, right}

128
 HTML File Upload
 HTML File Upload is used to show the list of all file, when a user click on
browse button A form in an HTML (web page) contain an input element
with type="file". This involve one or more files into the submission of
form. The file are stored into hard disk of the web server, that is why file
input is called" file upload".
 <input type="file">:The <input type="file> is used to create a upload file
with a text box and the browse button. The method attribute used in form
must be set to post

129 Internet Programming


<form action="http://webster.cs.washington.edu/params.php"
method="post" enctype="multipart/form-data">
Upload an image as your avatar:
<input type="file" name="avatar" />
<input type="submit" />
</form>

 add a file upload to your form as an input tag with type of file
 must also set the enctype attribute of the form
 it makes sense that the form's request method must be post (an entire file can't
be put into a URL!)
 form's enctype (data encoding type) must be set to multipart/form-data or else
the file will not arrive at the server

130 Web Programming


 <label> tag
 used to give labels to input fields
 associates nearby text with control, so you can click text to
activate control
 can be used with checkboxes or radio buttons
 label element can be targeted by CSS style rules

Example:
<label>First Name:
<input type=“text” name=“fname”>
</label>

131 Web Programming


 Hidden input parameters

<input type="text" name="username" /> Name <br />


<input type="text" name="sid" /> SID <br />
<input type="hidden" name="school" value="UW" />
<input type="hidden" name="quarter" value="48sp" />

 an invisible parameter that is still passed to the server


when form is submitted
 useful for passing on additional state that isn't modified by
the user

132 Web Programming


Form Example –code

Open <form> element

} Checkbox group for accounts

} Radio group for emp

} Select group for branch

submit button

close <form> element

133
Form Example – Web Browser

134
Class Activity
1. Create the following web page using Textpad, validate your code and then view in a browser.

135
Class Activity
2. Modify the form created in Question 1 and use a table to set the elements out more neatly, like
in the example below

136

You might also like