Chapter 2, HTML Web

Chapter Two
Web Page Development Using HTML
Compiled by Dawit Uta. (M. Tech.)

Computer Science Department, WSU
website address: www.davidtechnotips.com
1
HTML Structure
• HTML stands for hypertext markup language.
• HTML is comprised of “elements” and “tags”
– Begins with <html> and ends with </html>
• Elements (tags) are nested one inside another:
<html> <head></head> <body></body> </html>
• Tags have attributes:

<img src="logo.jpg" alt="logo">
• HTML describes structure using two main sections: <head> and <body>
2 Compiled by Dawit U.
HTML Code Formatting
• The HTML source code should be formatted to increase readability and facilitate
debugging.
– Every block element should start on a new line.
– Every nested (block) element should be indented.
– Browsers ignore multiple whitespaces in the page source, so formatting is harmless.
• For performance reasons, formatting can be sacrificed
First HTML Page
All HTML documents must start with a <!DOCTYPE>
test.html declaration. The declaration is not an HTML tag. It is an
"information" to the browser about what document type to
<!DOCTYPE html> expect. In HTML 5, the declaration is simple:
<html> <!DOCTYPE html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text that will appear on the web page </p>
</body>
</html>
First HTML Page: Tags
<!DOCTYPE HTML>
<html>
Opening tag
<head>
</head>
<body> Closing tag
<p>This is some text...</p>
</body>
</html>
First HTML Page: Header
<!DOCTYPE HTML>
HTML header
<html>
<head>
</head>
<body>
</body>
</html>
First HTML Page: Body
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
HTML body
Tags Attributes
• Tags can have attributes
– Attributes specify properties and behavior
– Example: Attribute alt with value "logo"
<img src="logo.gif" alt="logo" >
– Few attributes can apply to every element:

• id, style, class, title
• The id is unique in the document
• Content of title attribute is displayed as hint when the element is
hovered with the mouse
• Some elements have obligatory attributes
Some basic tags
• Hyperlink Tags
<a href="http://www.google.com/"
title=“Google">Link to google </a>
• Image Tags
<img src="logo.gif" alt="logo">
• Text formatting tags

This text is <em>emphasized.</em>
<br>new line<br>
This one is <strong>more emphasized.</strong>
Some basic
some-tags.html
tags – Example
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Tags Demo</title>
</head>
<body>
<a href="http://www. Google .com/" title=
“Google site">This is a link.</a>
<br />
<img src="logo.gif" alt="logo" />
<br />
<strong>Bold</strong> and <em>italic</em> text.
</body>
</html>
Headings and Paragraphs
• Heading Tags (h1 – h6)
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
• Paragraph Tags
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
• Sections: div and span
<div style="background: skyblue;">
This is a div</div>
Creating html documents. Example
headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>

<div style="background:skyblue">
This is a div</div>
</body>
</html>
Headings and Paragraphs – Example (2)
headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>

<div style="background:skyblue">
This is a div</div>
</body>
</html>
The <head> Section
• Contains information that doesn’t show directly on the viewable
page.
• Starts after the <!doctype> declaration
• Begins with <head> and ends with </head>
• Contains mandatory single <title> tag
• <meta charset=“character_set”>:The charset attribute specifies the
character encoding for the HTML document.
Common values:
UTF-8: Character encoding for Unicode
ISO-8859-1: Character encoding for the
Latin alphabet
The <head> Section cont…
Meta tag Usage
• Metadata is data (information) about data.
• The <meta> tag provides metadata about the HTML document. Metadata will
not be displayed on the page, but will be machine parsable.
• Meta elements are typically used to specify page description, keywords, author
of the document, last modified, and other metadata.
• The metadata can be used by browsers (how to display content or reload page),
search engines (keywords), or other web services.
Compiled by Dawit U. 15
 some other tags, in this section are also:
 <script>, <style>
• The <script> element is used to embed scripts into an HTML document
– Script are executed in the client's Web browser
– Scripts can live in the <head> and in the <body> sections
• Supported client-side scripting languages: are JavaScript (it is not Java!), CSS
Responsive web design
 Responsive web design is about creating web pages that look good on all
devices!
 A responsive web design will automatically adjust for different screen
sizes and viewports.
Responsive Web Design :
is about using HTML and
CSS to automatically
resize, hide, shrink, or
enlarge, a website, to
make it look good on all
devices (desktops,
tablets, and phones):
To create a responsive website, add
this <meta> tag to all your web pages
Setting The Viewport
 The viewport is the user's visible area of a web page. It varies with the
device - it will be smaller on a mobile phone than on a computer screen.
 You should include the following <meta> element in all your web pages:
The <body> Section
• The <body> section describes the viewable portion of the page
• Starts after the <head> </head> section
• Begins with <body> and ends with </body>
<html>
<head><title>Test page</title></head>
<body>

</body>
</html>
Text Formatting
• Text formatting tags modify the text between the
opening tag and the closing tag
– Ex. <b>Hello</b> makes “Hello” bold
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through
20
Text Formatting – Example
textformatting.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re writing HMTL code<br>
Next line.</p>
</body>
</html>
Hyperlinks: <a> Tag
 Link to a document called form.html on the same server in the same
directory:
<a href="form.html">Fill Our Form</a>
 Link to a document called parent.html in different folder:
<a href="./parent.html">Parent</a>
Hyperlinks: <a> Tag
 Link to an external Web site:

<a href=“http://www.devbg.org” target="_blank">Go!!</a>
 Always use a full URL, including "http://", not just "www.somesite.com"

 Using the target="_blank" attribute opens the link in a new window
 Link to an e-mail address:
<a href="mailto:bugs@example.com">Please report bugs

here</a>
Hyperlinks – Example
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<a href="http://www.devbg.org" target="_blank">BASD</a>
<br />
<a href="mailto:bugs@example.com">Please report bugs
here</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg”
/></a> <br />
Hyperlinks – Example
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<a href="http://www.devbg.org" target="_blank">BASD</a>
<br />
<a href="mailto:bugs@example.com?subject=Bug
Report">Please report bugs here (by e-mail only)</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg”
/></a> <br />
Images: <img> tag
 Inserting an image with <img> tag:
<img src="/img/basd-logo.png">
 Image attributes:
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border
 Example:
<img src="./php.png" alt="PHP Logo" />
26
Block and Inline Elements
 Block elements add a line break before and after

them
<div> is a block element and container for other tags
Other block elements are <table>, <hr>, headings, lists,
<p>,<br> and etc.
 Inline elements don’t break the text before and
after them
<span> is an inline element and container for other tags
Most HTML elements are inline, e.g. <a>,<input>,<hr>
The <div> Tag
• <div> creates logical divisions within a page
• Block style element
• Used with CSS
• Example:
div-and-span.html
<div style="font-size:24px; color:red">DIV
example</div>
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
The <span> Tag
• Inline style element
• Useful for modifying a specific portion of text
– Don't create a separate area (paragraph) in the
document
• Very useful with CSS
span.html
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-size:32px;
font-weight:bold">TEST</span>.</p>
HTML Special Characters
Symbol Name HTML Entity Symbol
Copyright Sign © ©
Registered Trademark Sign ® ®
Trademark Sign ™ ™
Less Than < <
Greater Than > >
Ampersand & &
Non-breaking Space
Em Dash — —
Quotation Mark " "
Euro € €
British Pound £ £
Japanese Yen ¥ ¥
30
HTML Special Characters both in numeric and named entity
List there are three types of list.
1. Ordered Lists
 To Create an Ordered List use <ol></ol> Tag :
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
 Attribute values for type are 1, A, a, I, or i
1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit iii. Grapefruit
a. Apple
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit II. Orange
C. Grapefruit III. Grapefruit
2. Unordered Lists
 To Create an Unordered List use <ul></ul>Tag :
<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
 Attribute values for type are:
– disc, circle or square
• Apple o Apple  Apple

• Orange o Orange  Orange
• Pear o Pear  Pear
3. Definition lists
 To Create definition lists use <dl> tag
– Pairs of text and associated definition; text is in <dt> tag,
definition in <dd> tag
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>
– Renders without bullets
– Definition is indented
dl: definition list
dt: definition term
dd: definition description
<ol type="1">
Lists – Example
lists.html
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>A markup language designed …</dd>
</dl>
HTML Tables
HTML Tables
• Tables represent tabular data
– A table consists of one or more rows
– Each row has one or more columns
• Tables comprised of several core tags: <table></table>
<tr></tr>: create a table row
<td></td>: create tabular data (cell)
• Table have some features
1. bgcolor: Add a background color
2. background image: add a background image
3. Border, Cell padding, Cell spacing
4. rowspan/colspan: cells that span more than one row/column
Simple HTML Tables – Example
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
Complete HTML Tables
Table rows split into three semantic sections: header, body and
footer
<thead> denotes table header and contains <th> elements, instead of
<td> elements
<tbody> denotes collection of table rows that contain the data
<tfoot> denotes table footer but comes BEFORE the <tbody> tag
<colgroup> and <col> define columns (most often used to set column
widths)
Complete HTML Table: Example
<table>
<colgroup>
columns
<col style="width:100px" /><col />
</colgroup> th
<thead>
header
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
footer
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
Last comes the body (data)
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>
</table>
Complete HTML Table:
By default, header text is
Example
bold and centered.
(2)
<table> table-full.html
<colgroup>
<col style="width:200px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
<tr><td>Cell Although the footer
1.1</td><td>Cell is
1.2</td></tr>
<tr><td>Cell before the data in 2.2</td></tr>
2.1</td><td>Cell the
</tbody> code, it is displayed last
41
</table> Compiled by Dawit U.
Cell Spacing and Padding
Tables have two important attributes:
 cellspacing  cellpadding
cell cell cell cell
cell cell cell cell
 Defines the empty  Defines the empty space

space between around the cell content
cells
Cell Spacing and Padding – Example
table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>
Column and Row Span
• Table cells have two important attributes:
 colspan  rowspan
colspan="1" colspan="1" rowspan="2" rowspan="1"
cell[1,1] cell[1,2] cell[1,2]

cell[1,1]
cell[2,1] cell[2,1]
colspan="2" rowspan="1"
 Defines how  Defines how
many columns many rows the
44
the cell occupies Compiled by Dawit U.
cell occupies
Column and Row Span – Example
table.html
<html><head><title>table</title></head>
<body>
<table cellspacing="0" border ="3">
<tr><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<td>Cell[2,3]</td></tr>
</table>
</body>
</html>
HTML Forms
Entering User Data from a Web Page
HTML Forms
 HTML form is any section of a web page where a user can input information and
submit to a web server.
 Your visitors can enter text into blank fields, make choices by checking boxes, select
options from menus, and then click a button to send it all away for processing.
Create a form block with below tag
<form></form> The “method" attribute tells how the form data

Example:
should be sent via HTTP GET or POST request
<form name="myForm" method="post"

action="path/to/some-script.php">
...
</form>
The "action" attribute tells where the form data
should beCompiled
sent and handlled
by Dawit U. 47
The Components of a Form
 The entirety of a form is wrapped within a single form tag that acts as a container for the
specialized elements that generate form controls.
 These controls are the text fields, checkboxes, radio buttons, menus, and buttons your
visitors will use to enter their information or make their selections.
 When the form is submitted, all the values of its various controls are sent as name/value
pairs to a form handler as part of a data set. Therefore, each control must carry a name
attribute so it can be correctly paired with its value.
 Many common form controls can be created with the inline input element, and each type
of input control is defined with a corresponding type attribute
 The INPUT tag is a multipurpose tag that creates many different types of controls
 The type of input is controlled by the TYPE attribute, so it can be TEXT, PASSWORD,
CHECKBOX, RADIO, SUBMIT, RESET, FILE, HIDDEN, IMAGE, or BUTTON
 Almost all of these should have a NAME attribute
 The input element is also an empty element, so it can hold no text content, can hold no
other elements, and must be closed with a trailing slash (/>).
 Required Attributes
 name: Identifies the control so it can be matched with its value when the form is
submitted. A markup validator may not generate an error if this attribute is missing, but
it’s required in order to successfully handle the form.
Form Fields
 Single-line text input fields:
<input type="text" name="FirstName" value="This
is a text field" />
 Multi-line textarea fields:
<textarea name="Comments“ cols=“20”
rows=“40”>This is a multi-line text
field</textarea>
 Hidden fields contain data not shown to the user:
<input type="hidden" name="Account" value="This
is a hidden text field" />
– Often used by JavaScript code
Fieldsets
 Fieldsets tag are used to enclose a group of related form
fields.
 The legend tag assigns a caption to a field set.
<form method="post" action="form.php">

<fieldset>
<legend>Client Details</legend>
<input type="text" name="Name" />
<input type="text" name="Phone" />
</fieldset>
<fieldset>
<legend>Order Details</legend>
<input type="text" name="Quantity" />
<textarea cols="40" rows="10"
name="Remarks"></textarea>
</fieldset>
</form>
Form Input Controls
 Checkboxes:
<input type="checkbox" name="fruit"
value="apple" />
 Radio buttons:
<input type="radio" name="title" value=“M"/>
 Radio buttons can be grouped, allowing only one to be selected from a

group:
<input type="radio" name="city" value=“Rome" />
<input type="radio" name="city" value=“Turk" />
Other Form Controls
Dropdown menus:
<select name="gender">
<option value="Value 1"
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>
Submit button:
<input type="submit" name="submitBtn"
value="Apply Now" />
Other Form Controls…
 Reset button – brings the form to its initial state

<input type="reset" name="resetBtn"
value="Reset the form" />
 Image button – acts like submit but image is displayed and click
coordinates are sent
<input type="image" src="submit.gif"
name="submitBtn" alt="Submit" />
 Ordinary button – used for Javascript, no default action
<input type="button" value="click me" />

 Password input – a text field which masks the entered text with *
signs
<input type="password" name="pass" />
 Multiple select field – displays the list of items in multiple lines,

instead of one
<select name="products" multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value 3">speakers</option>
</select>
 File input – a field used for uploading files
<input type="file" name="photo" />
– When used, it requires the form element to have a specific attribute:
<form enctype="multipart/form-data">
...
<input type="file" name="photo" />
...
This attribute indicates how form data should be
</form>
encoded before the data being sent to the server.
Labels
 Form labels are used to associate an explanatory text to a form field
using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />
 Clicking on a label focuses its associated field (checkboxes are

toggled, radio buttons are checked)
 Labels are both a usability and accessibility feature and are required
in order to pass accessibility validation.
HTML Forms – Example
form.html
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
58 <input type="text" name="lname" id="lname" /> U.
Compiled by Dawit
HTML Forms Example
form.html (continued)
<br />
Gender:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label>
<br />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send Form" />
<input type="reset" value="Clear Form" />
</p>
</form>
HTML Forms – Example
form.html (continued)
Inserting multimedia in HTML
 Multimedia is a form of communication that combines different content forms such as text,
audio, images, animations, or video into a single interactive presentation, in contrast to
traditional mass media which features little to no interaction from users, such as printed
material or audio recordings.
Adding multimedia files

• <a href=“filename.extension> listen to sound file </a>
• <a href=“sound1.wav> listen to sound file </a>
• <a href=“movie1.mov> view movie clip </a>
Embed vs Video and Audio tags
 What is the difference between embed and video/audio?
 The difference between embedding and linking videos/audio. An

embedded video/audio lets you borrow the video/audio from another
platform. Visitors can watch/listen the video/audio on your website
without leaving the current page.
 In contrast, linking a video/audio shares the URL of the video/audio.
Different types of files
File Type Extention/Mime type

================================
plain text: .txt
HTML document: .html
GIF image: .gif or .jpg or .png
Acrobat file: .pdf
AIFF sound file: .aiff .au . wav
MP3 .mp3
QuickTime movie: .mov
MPEG movie: .mpeg or .mpg
HTML Frames
<frameset> and <frame>
HTML Frames
 Frame divides a browser window into several pieces or panes, each pane containing a
separate HTML page.
 The page can be split into separate views (frames) horizontally and vertically.
 One of the key advantages that frames offer is that you can then load and reload single
panes without having to reload the entire contents of the browser window.
 A collection of frames in the browser window is known as a frameset.
 When to Use Frames
A lot of beginners use frames in their sites, particularly creating one for navigation and the
other for content. But then as they learn more about HTML and XHTML they tend to move
toward using tables for layout and, increasingly, CSS.
HTML Frames cont…
A couple of other drawbacks you should be aware of with frames are as follows:
 Some browsers do not print well from framesets.
 Some smaller devices cannot cope with frames, often because their screen is not big
enough to be divided up
 Frames are not supported by all user agents (browsers, search engines, etc.)
 The browser’s Back button might not work as the user hopes and so on.
 when writing a frameset document, you use a different DOCTYPE declaration. This is
because frameset documents use a few elements in different ways than other XHTML
documents.
HTML Frames cont…
 To create a frameset document, first you need the <frameset> element, which is used
instead of the <body> element.
 The frameset defines the rows and columns your page is divided into, which in turn
specify where each individual frame will go. Each frame is then represented by a
<frame> element.
 You also need to use the <noframes> element, which provides a message for users whose
browsers do not support frames.
 The <frameset> element have many attributes rows, cols, noresize, scrolling, and src.
 But rows and cols attributes used to specify the number of rows and columns that make
up the frameset.
 The <frames /> elements indicate which page will be kept inside that frame using the src
attribute Compiled by Dawit U. 67
 You can specify the width of each column/rows in one of the four ways:
Absolute values in pixels Eg. cols="40, 60"
 A percentage of the browser window: eg. cols="40%, 60%"
 Using a wildcard symbol eg. cols="400, *"
Relative width b/n column eg. cols="3*, 2*, 1*"
HTML Iframes (internal frames)
 An HTML iframe is used to display a web page within a web page.
 The HTML <iframe> tag specifies an inline frame.
 An inline frame is used to embed another document within the current
HTML document.
 It is a good practice to always include a title attribute for the <iframe>.
This is used by screen readers to read out what the content of the iframe is.
Summary
HTML Graphics
 There are two modern web technologies for creating rich drawn graphics
within the browser: HTML5 Canvas and Scalable Vector Graphics (SVG).
 Canvas: A hypertext markup language element introduced in HTML5 for
creating and analyzing bitmap images as pixels.
 The Canvas specification provides a JavaScript API for accessing the
element's graphics context and performing drawing operations with it.
 Canvas is used to create high performance, interactive and complex scenes

 The HTML <canvas> element can be used to draw graphics on a web page
The <canvas> element is only a container for

graphics. You must use JavaScript to actually
draw the graphics. Canvas has several methods
for drawing paths, boxes, circles, text, and
adding images.
Canvas Example
• A canvas is a rectangular area on an HTML page. By default, a
canvas has no border and no content.
• The markup looks like this:
After creating the

rectangular canvas area,
you must add a JavaScript
to do the drawing.
Here are some examples:
Scalable Vector Graphics (SVG) in HTML.
 SVG: An XML-based vector graphics format. It is a markup language for describing
all aspects of an image or Web application, from the geometry of shapes, to the
styling of simple presentation, text and shapes.
 The HTML <svg> element allows vector based graphics in HTML:
 SVG can also be generated through JavaScript.
Scalable Vector Graphics (SVG) in HTML …
SVG has several methods for drawing paths, boxes, circles,

text, and graphic images. The stroke attribute is a presentation attribute defining the
color (or any SVG paint servers like gradients or patterns)
used to paint the outline of the shape; Note: As a presentation
attribute stroke can be used as a CSS property.
Example
Creates circles like this

Chapter 2, HTML Web

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 2, HTML Web

Uploaded by

Copyright:

Available Formats

Chapter Two

Web Page Development Using HTML

Compiled by Dawit Uta. (M. Tech.)

• Tags have attributes:

– Every block element should start on a new line.

– Every nested (block) element should be indented.

– Browsers ignore multiple whitespaces in the page source, so formatting is harmless.

• For performance reasons, formatting can be sacrificed

– Few attributes can apply to every element:

• Text formatting tags

<p>This is my first paragraph</p>

<p>This is my first paragraph</p>

 Link to a document called parent.html in different folder:

 Link to an external Web site:

 Always use a full URL, including "http://", not just "www.somesite.com"

<a href="mailto:bugs@example.com">Please report bugs

 Block elements add a line break before and after

• Apple o Apple  Apple

cell cell cell cell

cell cell cell cell

 Defines the empty  Defines the empty space

cell[1,1] cell[1,2] cell[1,2]

<form></form> The “method" attribute tells how the form data

<form name="myForm" method="post"

– Often used by JavaScript code

<form method="post" action="form.php">

 Radio buttons can be grouped, allowing only one to be selected from a

 Reset button – brings the form to its initial state

 Ordinary button – used for Javascript, no default action

<input type="button" value="click me" />

 Multiple select field – displays the list of items in multiple lines,

 Clicking on a label focuses its associated field (checkboxes are

Adding multimedia files

 The difference between embedding and linking videos/audio. An

 In contrast, linking a video/audio shares the URL of the video/audio.

File Type Extention/Mime type

 A collection of frames in the browser window is known as a frameset.

 When to Use Frames

 Some browsers do not print well from framesets.

Absolute values in pixels Eg. cols="40, 60"

 A percentage of the browser window: eg. cols="40%, 60%"

 Using a wildcard symbol eg. cols="400, *"

Relative width b/n column eg. cols="3*, 2*, 1*"

 Canvas: A hypertext markup language element introduced in HTML5 for

creating and analyzing bitmap images as pixels.

 The Canvas specification provides a JavaScript API for accessing the

element's graphics context and performing drawing operations with it.

 Canvas is used to create high performance, interactive and complex scenes

The <canvas> element is only a container for

After creating the

styling of simple presentation, text and shapes.

 The HTML <svg> element allows vector based graphics in HTML:

 SVG can also be generated through JavaScript.

SVG has several methods for drawing paths, boxes, circles,

Creates circles like this

You might also like

Relative width b/n column eg. cols="3, 2, 1*"