WEB PROGRAMMING

LECTURE - 02
 IMAGE IN HTML
• The Image element <IMG….> is used to incorporate
inline graphics (typically icons, images) into an HTML
document.
• Browsers that cannot render inline images ignore the
Image element unless it contains the ALT attribute.
• Example:
<img src="images/imagename.png" alt="rainy"
width=“400px" height="500px" style="border: 5px
solid">

Md. Arman Hossain, Lecturer, CSE, EWU

 ATTRIBUTES OF IMAGE
ELEMENT
Image element attributes Description
SRC Specify the URL of the image to be displayed
ALT Specify an alternate text for an image/video, if the
image cannot be displayed.
HEIGHT Define the height of a graphics element.
WIDTH Define the width of a graphics element.
ALIGN Specify the alignment of images.
BORDER control the thickness of the border around an image
displayed

Md. Arman Hossain, Lecturer, CSE, EWU 3

LINKS AND ANCHORS
 ANCHORS
• Links are specified in HTML using the anchor <A> element.
• The <A>…</A> tag can be used in two ways:
1. To create a link to another document.
• Example:
<a href="https://www.google.com">Click Here</a>
2. To jump to a specific section (holding id) within the
same webpage
• Example:
<div id="section1">Section 1</div>
<a href="#section1">Go to Section 1</a>
Md. Arman Hossain, Lecturer, CSE, EWU 5
 THE TARGET ATTRIBUTE
• The target attribute in the <a> tag controls how a link opens when
clicked.
• <a href="URL" target="value">Link Text</a>
• Possible values:
• _self (Default): Opens the link in the same tab or window.
• _blank: Opens the link in a new tab or window.
• Framename: Opens the link in a specific iframe with the given
name.
• Example: <iframe name="myIframe"></iframe>
• <a href="https://www.example.com" target="myIframe">Visit
Example</a>

Md. Arman Hossain, Lecturer, CSE, EWU 6

 DIFFERENT USE OF LINKS
1. Image as a Link
<a href=" http://www.google.com "> <img src="smiley.gif"
alt="HTML tutorial" width="32" height="32" /> </a>
2. Mail link
<a href="mailto:[email protected]?
Subject=Hello%20again">Send Mail</a>
3. Download link
<a href=http://www.tizag.com/pics/htmlT/blanktext.zip
>Text Document</a>

Md. Arman Hossain, Lecturer, CSE, EWU

7
HTML TABLE
 TABLES IN HTML

• A table is divided into rows, and each row is divided into

cells.

Md. Arman Hossain, Lecturer, CSE, EWU

9
 COMMON TABLE ELEMENTS
Table Elements Description
<TABLE> Defines a table
<CAPTION> Defines the table Caption.
<TH> Defines Table Header cell
<TR> Defines a table row
<TD> Defines table data cells
<THEAD> Groups the header rows
<TBODY> Groups the body content of a table.
<TFOOT> Groups the footer rows of a table.

Md. Arman Hossain, Lecturer, CSE, EWU 10

 UNDERSTANDING ROWSPAN AND
COLSPAN ATTRIBUTE
• The rowspan is used to merge cells vertically.
• The colspan is used to merge cells horizontally.
• Interpret the following table

Md. Arman Hossain, Lecturer, CSE, EWU 11

 SOLUTION

Md. Arman Hossain, Lecturer, CSE, EWU 12

 LIST

Md. Arman Hossain, Lecturer, CSE, EWU 13

 LISTS
• HTML supports several mechanisms for specifying lists of
information.
• In HTML there are 3 different types of lists, all of which may be
nested.
• Common HTML list elements are:
• <UL> : unordered list; bullets
• <OL> : ordered list; numbers
• <DL> : definition list; dictionary

Md. Arman Hossain, Lecturer, CSE, EWU 14

 <OL>...</OL>
• The Ordered List element is used to present a numbered list of
items.
• Place the <LI> (list item) tag between your opening <OL> and
closing </OL> tags to create list items.
• Example:
<ol>
<li>Find a Job</li>
<li>Get Money</li>
<li>Move Out</li>
</ol>

Md. Arman Hossain, Lecturer, CSE, EWU

15
 <OL>...</OL> CONT..
• The OL element has TYPE attribute which allows
authors to specify whether the list items should be
marked with.
• It has following values:
• <OL TYPE=a> Small letters. For example a, b, c ...
• < OL TYPE =A> Capital letters. For example A, B, C ...
• < OL TYPE =i> Small roman numerals. For example i, ii, iii ...
• < OL TYPE =I> Large roman numerals. For example I, II, III ...
• < OL TYPE =1> The default numbers. For example 1, 2, 3 ...

Md. Arman Hossain, Lecturer, CSE, EWU

16
 <OL>...</OL> CONT..
• The OL element has START attribute which allows authors to start
at values other than 1.
• Thus START=5 would display either an 'E', 'e', 'V', 'v', or '5' based on
the TYPE attribute.
• Example
<h4 align="center">Goals</h4>
<ol start="4" >
<li>Buy Food</li>
<li>Enroll in College</li>
<li>Get a Degree</li>
</ol>

Md. Arman Hossain, Lecturer, CSE, EWU 17

 <UL>...</UL>
• The Unordered List element is used to present a list of items which
is marked by bullets.
• The bullet itself comes in three flavors: squares, discs, and circles.
• Place the <LI> (list item) tag between your opening <UL> and
closing </UL> tags to create the list items.

Md. Arman Hossain, Lecturer, CSE, EWU 18

 <UL>...</UL> CONT..
• The TYPE attribute can be used in the <UL> element to specify
bullet type
• <UL TYPE= disc>
• < UL TYPE = circle>
• < UL TYPE = square >

Md. Arman Hossain, Lecturer, CSE, EWU 19

 < DL>...</DL>
Code Result

<dl> Fromage
<dt><b>Fromage</b></dt> French word for cheese.
<dd>French word for cheese.</dd> Voiture
<dt><b>Voiture</b></dt> French word for car.
<dd>French word for car.</dd>
</dl>

Md. Arman Hossain, Lecturer, CSE, EWU 20

 TRY IT…
• Example 1

• Example 2

Md. Arman Hossain, Lecturer, CSE, EWU 21

 HTML FORM

Md. Arman Hossain, Lecturer, CSE, EWU 22

 FORMS
• HTML Forms are used to select different kinds of user input and
to pass data to a server.
• A form can contain input elements like text fields, checkboxes,
radio-buttons, submit buttons and more.
• A form can also contain select lists, textarea, fieldset, legend,
and label elements.

Md. Arman Hossain, Lecturer, CSE, EWU 23

 FORMS CONT…
• The following elements are used to create forms:
• <FORM>...</FORM> : A form within a document
• <input > : One input field
• <OPTION> ...</OPTION>: One option within a Select element
• <SELECT>...</SELECT> : A selection from a finite set of options
• <TEXTAREA ...>...</TEXTAREA> : A multi line input field

Md. Arman Hossain, Lecturer, CSE, EWU 24

 <FORM>...</FORM>
• There can be several forms in a single document, but the <FORM> element
cannot be nested.
<FORM ACTION="_URL_" METHOD="GET|POST" EncTYPE="MIME type">
• Form attributes
• The ACTION attribute is a URL specifying the location to which the contents of
the form data fields are submitted to elicit a response. The way data is submitted
varies with the access protocol of the URL to which the form data is sent and with
the values of the METHOD and EncTYPE attributes.

• The METHOD attribute specifies a method of accessing the URL specified in

the ACTION attribute. Generally, the method will be either GET or POST.
• The GET method is ideal for form submission where the use of the form
data does not require external processing.
• The POST method should be used where the form is used to provide
information for example, that updates a database.
• The EncTYPE attribute specifies the media type used to encode the form data.
The default EncTYPE is the MIME type application/x-www-form-urlencoded.
Md. Arman Hossain, Lecturer, CSE, EWU 25
 <INPUT>
• The <input> element represents a field whose contents may be edited
by the user.
• Attributes of the <input> element are:
• The NAME attribute assigns a name to the given field so that author may
reference it later. The NAME attribute is required for most input types and is
normally used to provide a unique identifier for a field, or for a logically
related group of fields.
• The CHECKED attribute can be used with a TYPE= CHECKBOX or
TYPE=RADIO setting, this indicates that the checkbox or radio button is
selected.
• The MAXLENGTH attribute is used with TYPE=TEXT setting, this indicates
the maximum number of characters that can be entered into a text field. This
can be greater than specified by the SIZE attribute, in which case the field
will scroll appropriately. The default number of characters is unlimited.

Md. Arman Hossain, Lecturer, CSE, EWU

26
 ATTRIBUTES OF <INPUT>
• Attributes of the <input> element are:
• The TYPE attribute determines what kind of input field it will be.
Defaults value is free text. Several types of fields can be defined
with the type attribute:
• TEXT
• PASSWORD
• RADIO
• CHECKBOX
• BUTTON
• HIDDEN
• RESET

Md. Arman Hossain, Lecturer, CSE, EWU 27

 TYPE =TEXT
• <input type="text" /> defines a one-line input field that a user
can enter text into:
<form>
First name <input type="text" name="firstname" /><br />
Last name <input type="text" name="lastname" />
</form>

Md. Arman Hossain, Lecturer, CSE, EWU 28

 TYPE = PASSWORD
• <input type="password" /> defines a password field. PASSWORD
is the same as the TEXT attribute, except that text is not displayed
as it is entered.
<form>
Password: <input type="password" name="pwd" />
</form>

Md. Arman Hossain, Lecturer, CSE, EWU 29

 TYPE = RADIO

Md. Arman Hossain, Lecturer, CSE, EWU 30

 TYPE = RADIO
• <input type="radio" /> defines a RADIO button.
• RADIO button is used for attributes that accept a single value from a set
of alternatives.
• Only the selected radio button in the group generates a name/value
pair in the submitted data. Radio buttons require an explicit VALUE and
NAME attribute.
• VALUE - specifies what will be sent if the user chooses this radio button.
Only one value will be sent for a given group of radio buttons (see name
for more information).
• NAME - defines which set of radio buttons that it is a part of.
<input type="radio" name=“gender" value="male" /> Male<br />
<input type="radio" name=" gender" value="female" /> Female
• Checked is an optional attribute and can be used to specify which
options are selected for initial form display.
Md. Arman Hossain, Lecturer, CSE, EWU 31
 TYPE = CHECKBOX

Md. Arman Hossain, Lecturer, CSE, EWU 32

 TYPE = CHECKBOX
• <input type="checkbox" /> defines a checkbox.
• Checkboxes let a user select ONE or MORE options of a limited
number of choices.
• The check box's NAME and VALUE attributes behave the same as
a radio button. Also CHECKED is an optional attribute.
<input type="checkbox" name="vehicle1" value="Bike" /> I
have a bike<br />
<input type="checkbox" name="vehicle2" value="Car" /> I
have a car

Md. Arman Hossain, Lecturer, CSE, EWU 33

 TYPE = BUTTON
• This can be used to embed buttons directly into HTML documents that
add functionality when used in conjunction with Script.
• The NAME attribute is used to give the button a unique name, which can
be used to set its function in the script.
• The VALUE attribute specifies the text that is displayed on the button in
the document

Md. Arman Hossain, Lecturer, CSE, EWU 34

 TYPE = SUBMIT
• <input type="submit" /> defines a SUBMIT button.
• A SUBMIT button is used to send form data to a server.
• The data is sent to the page specified in the form's action attribute.
• The NAME attribute is used to give the button a unique name.
• The VALUE attribute specifies the text that is displayed on the button in
the document.

Md. Arman Hossain, Lecturer, CSE, EWU 35

 TYPE = HIDDEN
• With this input type, no field is presented to the user, but the content of
the field is sent with the submitted form.
• This value may be used to transmit state information about client/server
interaction.

<input type="hidden" name="HiddenField" value="100" />

Md. Arman Hossain, Lecturer, CSE, EWU 36

 TYPE = RESET
• RESET is a button that when pressed resets the form's fields to their
specified initial values.
• The label to be displayed on the button may be specified just as for the
SUBMIT button.

Md. Arman Hossain, Lecturer, CSE, EWU 37

 HTML INPUT TYPES EXAMPLE

http://www.w3schools.com/html/html_form_input_types.asp

Md. Arman Hossain, Lecturer, CSE, EWU 38

 <SELECT>

Md. Arman Hossain, Lecturer, CSE, EWU 39

 <SELECT ...>...</SELECT>
• The <SELECT> element allows the user to choose
one of a set of alternatives described by textual
labels.
• Every alternative is represented by the <OPTION>
element.
• Attributes used with the <SELECT> are listed in the
following sections.
• The MULTIPLE attribute is needed when users are allowed to make several
selections, for example <SELECT MULTIPLE>.
• The NAME attribute specifies the name that will submitted as a name/value pair.

Md. Arman Hossain, Lecturer, CSE, EWU 40

 <SELECT ...>...</SELECT>
<form method="post" action="mailto:[email protected]">
Education?
<select name="degree">
<option>Choose One</option>
<option>Some High School</option>
<option>High School Degree</option>
<option>Some College</option>
<option>Bachelor's Degree</option>
<option>Doctorate</option>
</select>
<input type="submit" value="Email Yourself">
</form>

Md. Arman Hossain, Lecturer, CSE, EWU 41

 <TEXTAREA>...</TEXTAREA>
• The <TEXTAREA> element lets users enter more than one line of
text.
• Forums and the like use text areas to post what you type onto their
site using scripts. For this form, the text area is used as a way to
write comments to somebody.
• When submitting a form, lines in a TEXTAREA should be
terminated using CR/LF.
• ROWS and COLUMNS need to be specified as attributes to the
<TEXTAREA> tag.
• ROWS are roughly 12pixels high, the same as in word programs.
• The value of the COLUMNS reflects how many characters wide
the text area will be.
Md. Arman Hossain, Lecturer, CSE, EWU 42
 <TEXTAREA>...</TEXTAREA>
• Another attribute to be aware of is the WRAP. Wrap has
3 values.
• WRAP=
• OFF : The default setting. Wrapping doesn't happen. One ongoing line.
Lines are sent exactly as typed.
• VIRTUAL : The display word-wraps, but long lines are sent as one line
without new-lines. That is, the viewer will see the words wrapping as
they type their comments, but when the page is submitted to you, the
web host, the document sent will not have wrapping words.
• PHYSICAL : The display word-wraps, and the text is transmitted at all
wrap points. The text will appear both to you, the web host, and the
viewer including any page breaks and additional spaces that may be
inputted. The words come as they are.

Md. Arman Hossain, Lecturer, CSE, EWU 43

 HTML MULTIMEDIA
• Multimedia on the web is sound, music, videos, and animations.
• Modern web browsers have support for many multimedia formats.
• HTML Helpers (Plug-ins)
• A helper application is a small computer program that extends the
standard functionality of the browser.
• Helper applications are also called plug-ins.
• Plug-ins are often used by browsers to play audio and video.
• Examples of well-known plug-ins are Adobe Flash Player and
QuickTime.
• Plug-ins can be added to Web pages through the <object> tag or
the <embed> tag.

Md. Arman Hossain, Lecturer, CSE, EWU 44

 HTML AUDIO/ VIDEOS
• Sounds can be played in HTML by many different methods.
• Using The <embed> Element
• The <embed> tag defines a container for external (non-
HTML) content.
• <embed height="50" width="100" src=“abc.mp3">
• Using the <object> Element
• The <object> tag can also define a container for external
(non-HTML) content
• <object height="50" width="100"
data=“abc.mp3"></object>
• <object> tag is for Internet Explorer, while the <embed> tag is
for Netscape and related to it browsers using Netscape plugin to
display a flash movie
Md. Arman Hossain, Lecturer, CSE, EWU 45
 HTML IFRAMES
• An iframe is used to display a web page within a web
page.
• <iframe src="URL"></iframe>
• The URL points to the location of the separate page.
• The height and width attributes are used to specify the
height and width of the iframe.
<iframe src=“http://www.google.com" width="200" height="200"></iframe>

• The frameborder attribute specifies whether or not to

display a border around the iframe. Set the attribute
value to "0" to remove the border

Md. Arman Hossain, Lecturer, CSE, EWU 46

END