HTLM Additional Concepts

HTML Images
• In HTML, images are
defined with the <img> tag.
• The <img> tag is empty,
which means that it
contains attributes only, and
has no closing tag.
• To display an image on a
page, you need to use the
src attribute. Src stands for
"source". The value of the
src attribute is the URL of
the image you want to
display.

1
 HTML Images
• The required alt attribute
specifies an alternate text
for an image, if the image
cannot be displayed.
• The value of the alt
attribute is an author-
defined text:
• The alt attribute provides
alternative information for
an image if a user for some
reason cannot view it
(because of slow
connection, an error in
src attribute, or if the user
the uses a screen reader).

HTML Images
• The height and width attributes are used to specify the
height and width of an image.
• The attribute values are specified in pixels by default:
– <img src="pulpit.jpg" alt="Pulpit rock" width="304"
height="228">
• Tip: It is a good practice to specify both the height and
width attributes for an image. If these attributes are
set, the space required for the image is reserved when
the page is loaded. However, without these
the browser does not know the size of the image. The
attributes, effect will be that the page layout will
loading (while the images load).
change during

2
 HTML Tables
• Tables are defined with the
<table> tag.
• A table is divided into rows (with
the <tr> tag), and each row is
divided into data cells (with the
<td> tag). td stands for "table
data," and holds the content of a
data cell. A <td> tag can contain
text, links, images, lists, forms,
other tables, etc.
• Table Example
– <table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

HTML Forms
• HTML forms are used to pass
data to a server.
textHTML
• An fields,form
checkboxes, radio-buttons,
can contain input submit
elements like
lists, textarea, fieldset, legend, and label
buttons and more. A form can also contain select
elements.
.
• The <form> tag is used to create an HTML form:
.
– <form>

input elements
</form>

3
 HTML Forms – Input Element
• The most important form element is the
<input> element.
• The <input> element is used to select user
information.
• An <input> element can vary in many
ways, depending on the type attribute. An
<input> element can be of type text field,
checkbox, password, radio button, submit
button, and more.
• The most common input types are
described below.
• Text Fields
• <input type="text"> defines a one-line
input field that a user can enter text into:
– <form>
First name: <input
name="firstname"><br>
type="text"
name="lastname">
Last name: <input type="text"

• How </form>
the HTML code
browser:
above looks in a

HTML Forms – Input Element

4
 HTML Forms – Input Element

HTML Layouts - Using <div> Elements

• The div element is a block level element used for grouping HTML elements.
• The following example uses five div elements to create a multiple column
layout, creating the same result as in the previous example:

5
 HTML Layouts - Using <div> Elements

HTML Layouts - Using Tables

• A simple way of creating layouts is by using
the HTML <table> tag.
• Multiple columns are created by using <div>
or <table> elements. CSS are used to position
elements, or to create backgrounds or colorful
look for the pages.
• Example:

6
HTML Layouts - Using Tables

HTML Layouts - Using Tables

7
 HTML Colors
• Colors are displayed combining RED, GREEN, and
BLUE light.
• HTML colors are defined using a hexadecimal
notation (HEX) for the combination of Red,
Green, and Blue color values (RGB).
• The lowest value that can be given to one of the
light sources is 0 (in HEX: 00). The highest value is
255 (in HEX: FF).
• HEX values are specified as 3 pairs of two-digit
numbers, starting with a # sign.

HTML Colors

8
 HTML Exercises
1. Create a simple HTML
document
2. Create a document illustrating
HTML heads
3. Create a document showing use
of HTML
paragraphs and line breaks
4. How do you insert comments in
HTML code?
Write HTML code for such.
5. Create a document illustrating a
HTML link
(open link in new browser window)

HTML Additional Exercises

• Create a document illustrating a HTML link
(jump to another part of the document on the
same page)
• Create an image-map, with clickable link
• Additional exercises:
– http://www.w3schools.com/html/html_example
s. asp