Web Design

HTML Lists
- HTML supplies two types of list tags
1. Unordered list using the <ul>
2. Ordered list using the <ol>
- The lists are composed of list items <li>.

2
Unordered List
- Items in this list start with a bullet.
<ul>
<li>Tea</li>
<li>Sugar</li>
<li>Milk</li>
</ul>

3
Unordered List
- Html provides three types of list bullets:
• Disc (default).
• Circle.
• Square.
- These are controlled by the "type" attribute for the <ul> tag.

<ul>
<li>Tea</li>
<li>Sugar</li>
<li>Milk</li>
</ul>

4
Unordered List

<ul type="square">
<li>Tea</li>
<li>Sugar</li>
<li>Milk</li>
</ul>

<ul type=" circle ">

<li>Tea</li>
<li>Sugar</li>
<li>Milk</li>
</ul>

5
Ordered List
- Items in this list are numbered automatically.
<ol>
<li>Rocky</li>
<li>Rocky II</li>
<li>Rocky III</li>
</ol>

6
Unordered List
- HTML provides 5 types of ordered lists.
- These lists are controlled by the "type" attribute for the <ol> tag.

7
Unordered List

<ol type="i">
<li>Rocky</li>
<li>Rocky II</li>
<li>Rocky III</li>
</ol>
<p>Unrelated text ... </p>
<ol type="i" start="3">
<li>Rocky</li>
<li>Rocky II</li>
<li>Rocky III</li>
</ol>

8
Images
- Images are added to a website to improve its appearance and to
help explain concepts that are difficult to put into words.
<img src="pic1.jpg" alt="my image” width="70"
height="100" border="3">

- Attributes:
- src: Defines the image source file.
- alt: Alternative Text (if image doesn’t load).
- width: Image width in px.
- height: Image height in px.
- id: Gives an id to the image.
- title: Adds a tooltip to the image.
- border: Adds a border around the image (px).
9
Links
- HTML links are hyperlinks that can be clicked to move to another
document. A link can be text, image, or any other HTML element.

<a href="https://www.google.com">Visit Google</a>

- There are 3 major types of links:

1. External links
2. Local links
3. Internal links

10
External Links
- Creates a link to a web page on another website using the <a>
tag and the attribute “href” and the “url” of the page as a value

<a href="https://www.google.com">Visit Google</a>

11
Local Links
- Creates a link to another page on the same server using the <a>
tag and the attribute“href” and a relative path as a value.

<a href="folder1/about-us.html">About us</a>

12
Internal Links
- Creates a link to a location on the same page using the <a> tag
and the attribute “href” and an id as a value.
1. Create a bookmark having id attribute.
2. Then, create a link to the location.

<p id="hi"> this is the location the link refers

to</p>

<a href="#hi">nti</a>

13
Links to Email address
- Similar to an external website Link.
- Uses the term “mailto:” followed by the email address as a value
for the href attribute.

<a href="mailto:[email protected]">contact me</a>

14
The target attribute
- The “target” attribute of a link specifies where to
- open the linked document.
- Values:
_blank: Opens in a new window or tab.
_self: Opens in the same window/tab (default).
_parent: Opens in the parent frame.
_top: Opens in the full body of the window.
framename: Opens in a named frame.

15
Question
- You want to add an image to your webpage. What should you
add within the image tag? Please select all that apply.
q The link to the source file
q The alt description
q The href attribute
q The width and height specifications

16
Question
- You are creating a website and you want to add a link to the
about.html page on your home.html page. What is the correct
notation to create this link?
q <a href = “about.html”>About</a>
q <a> about.html </a>
q <a> href = about.html </a>
q <a href = “home.html”>About</a>

17
Tables
- The HTML tables allow to arrange data like text, images, links,
other tables, etc. into rows and columns of cells.
- The HTML tables are created using the <table> tag in which the
<tr> tag is used to create table rows and <td> tag is used to
create data cells

18
Tables
- Main Tag: <table>
- Sub Tags:
<tr></tr>: Creates a table row.
<th></th>: Creates a table header (bold and centered)
<td></td>: Creates a table data cell.
<caption> </caption>: Creates a table title.

19
Tables

<table>
<tr>
<th>Col 1 Header</th><th>Col 2 Header</th>
</tr>
<tr>
<td>Row 1 - Col 1 </td><td>Row 1 - Col 2 </td>
</tr>
<tr>
<td>Row 2 - Col 1 </td><td>Row 2 - Col 2 </td>
</tr>
<tr>
<td>Row 3 - Col 1 </td><td>Row 3 - Col 2 </td>
</tr>
</table>

20
Tables Attributes
- bgcolor: Changes the background color for the table.
- width: Defines the table width in pixels or by percentage.
- border: Defines the border width in pixels.
- bordercolor: adds a border color (around the table).
- cellspacing: Defines the space between the cells in px.
- cellpadding: Defines space between the cell border and cell
contents in px.
- align: aligns the table on the page (left | right | center)
- background: adds a Background Image to the table.

21
Table Caption Attributes
- Tag: <caption>
- Attributes:
align: top | bottom. (top is the default)
id: add an id for the caption.
dir: changes the direction of the caption text.
title: adds tooltip for the caption text.

22
Tables

<table border="1" cellpadding="2">

<caption align="bottom"> Table Label </caption>
<tr>
<th>Col1 Header</th><th>Col2 Header</th>
</tr>
<tr>
<td>Row 1 - Col 1</td><td>Row 1 - Col 2</td>
</tr>
<tr>
<td>Row 2 - Col 1</td><td>Row 2 - Col 2</td>
</tr>
<tr>
<td>Row 3 - Col 1</td><td>Row 3 - Col 2</td>
</tr>
</table>

23
Table td Attributes
- Tag: <td>
- Attributes:
width: Width in pixels or percentage.
height: Height in pixels.
align: left | right | center.
valign: top| middle | bottom.
background: cell Background image.
bgcolor: cell Background color.
colspan: Merge columns cells. (number)
rowspan: Merge rows cells. (number)

24
Tables

<table border="1" cellpadding="2">

<tr>
<th>Col1 Header</th><th>Col2 Header</th>
</tr>
<tr>
<td colspan="2">Row 1 - Col 1 </td>
</tr>
<tr>
<td rowspan="2">Row 2 - Col 1 </td><td>Row 2 - Col 2
</td>
</tr>
<tr>
<td>Row 3 - Col 2 </td>
</tr>
</table>

25
Question
- You are developing a website for a shoe shop. In order to add a
table to your website, which tags can you use? Select all that
apply.
q The table column tag: <tc> </tc>
q The table data tags: <td> </td>
q The table row tag: <tr> </tr>
q The table tag: <table> </table>
q The table header tags: <th> </th>

26
Forms
- HTML form on a web page allows a user to enter data that is sent
to a server for processing. Users fill out the forms using
checkboxes, radio buttons, or text fields.
- The <form> tag is used to insert a form on a web page

27
Form tag attributes
- Tag: <Form>
- Attributes:
action: Url or webpage name for the form data to be sent.
method: The HTTP method for sending data.
get: is default.
post: is more secure.

28
Forms Controls
- There are plenty of controls available in HTML.
- Most of the form controls are created using the <input>, <select>,
or <textarea> elements.

<form>

</form>

29
Forms Controls <input>
- Many HTML controls are created with the <input> element, using
a different value for the TYPE attribute.
- The <input> tag is all self-contained and has no closing tag
(empty tag).

30
Text boxes
- Description: Defines a one-line text input field
- Code: <input type="text">
- Attributes:
name: Variable name passed to the data page.
size: Specifies the width of an <input> element in characters.
The default value is 20.
maxlength: Maximum number of characters accepted.
value: Initial value that appears to the user.

<form>
<input type="text" name=”username">
</form>

31
Text boxes “password”
- Description: Defines a one-line password input field.
- Code: <input type="password">
- Attributes:
name: Variable name passed to the data page.
size: Specifies the width of an <input> element, in characters.
Default value is 20.
maxlength: Maximum number of characters accepted.
value: Initial value that appears to the user.

<form>
<input type="password" name=password" >
</form>

32
Hidden Field
- Description: Used to send hidden data to the server page.
- Code: <input type="hidden">
- Attributes:
name: Variable name passed to the data page.
value: value to be sent to the server.

<form>
<input type="hidden” name="type" value=”user">
</form>

33
Check Box
- Description: Adds a check box control to the form.
- Code: <input type="checkbox">
- Attributes:
name: Variable name passed to the data page.
value: value to be sent to the server if the check box is
checked.
checked: Determines the initial state of the checkbox
(checked or not)

<form>
<input type="checkbox" name="registered" value="1">
</form>

34
Radio button
- Description: Adds a Radio button control to the form. To allow
user to select ONE of a limited number of choices.
- Code: <input type="radio">
- Attributes:
name: Variable name passed to the data page.
value: value to be sent to the server if the Radio button is
checked.
checked: Determines the initial state of the Radio button
(checked or not)
<form>
<input type="radio" name="subject" value="1">
</form>

35
File field
- Description: Used to select a file to be uploaded to a web server.
- Code: <input type="file">
- Attributes:
name: Variable name passed to the data page.
value: The uploaded file data.

<form>
<input type="file">
</form>

36
Button
- Description: Used with scripts to cause an action.
- Code: <input type="button" value=" Hello" >
- Attributes:
name: Variable name passed to the data page.
value: Adds the button text label.

<form>
<input type="button" value=" Hello" >
</form>

37
Submit Button
- Description: This button causes the browser to send the NAMES
and VALUES of all the form tags to the server page defined by the
ACTION attribute.
- Code: <input type="submit" value=" Submit " >
- Attributes:
name: Variable name passed to the data page.
value: Adds the button text label.
<form>
<input type= "submit" value="submit" >
</form>

38
Reset Button
- Description: Defines a button to reset all the form values to their
default values.
- Code: <input type="reset" value=" Reset " >
- Attributes:
name: Variable name passed to the data page.
value: Adds the button text label.
<form>
<input type="reset" value="Reset" >
</form>

39
Form Labels
- Description: tag defines a label for an <input> element.
- Code:
<label>Username:<input type="text"></label>

<form>
<label>Username:<input type="text”
name=”username"></label>
</form>

40
Forms Controls <select>
- Used to add a combo box or a list box to the form.
- Code: <select></select>
- Attributes:
name: Variable name passed to the data page.
size: Defines the height (number of lines).
multiple: Allows users to select more than one selection.

41
Forms Controls <select>
- Adding list items
- Code: <option>………</option>
- Description: sub-element used to add a list item to the creates
combo box
- Attributes:
value: The value to be sent to the dynamic page when this
option is selected.
selected: means that this is the default selected option.

42
Forms Controls <select>

<p>
<select name="x500" size="1">
<option value="1">item 1</option>
<option value="2" selected="selected">item 2</option>
</select>
</p>

43
Forms Controls <select>

<p>
<select name="x600" size="5">
<option value="1">item 1</option>
<option value="2" selected="selected">item 2</option>
</select>
</p>

44
Forms Controls <select>
- Grouping list items
- Code: <optgroup>………</optgroup>
- Description: Sub-element is used to group related options in the
drop-down list.
- Attributes:
label: Specifies a label for the option-group.
disabled: means that the option-group is disabled.

45
Forms Controls <select>

<select>
<optgroup label="German Cars">
<option value="BMW">BMW</option>
<option value=" mercedes ">Mercedes</option>
</optgroup>
<optgroup label="Korean Cars">
<option value="KIA">KIA</option>
<option value="Hyndai">Hyndai</option>
</optgroup>
</select>

46
Forms Controls <textarea>
- Used to add a free text entry to the form.
- Code: <textarea> </textarea>
- Description: Add a free text entry to the form.
- Attributes:
name: Variable name passed to the data page.
rows: Number of rows (lines).
cols: Number of columns (in characters).

<textarea name="t1" rows="5" cols="20">

add text here
</textarea>

47
Fieldset
- Description: used to group related elements in a form by drawing
a box around them.
- Code: <fieldset> … </fieldset>
- Attributes:
name: Variable name passed to the data page.
disabled: Disables this group of form elements.

48
Fieldset

<form>
<fieldset>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>

49
legend
- Description: The <legend> tag defines a caption for the <fieldset>
element.
- Code: <legend>… </legend>

<form><fieldset>
<legend>Personal Data:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset></form>

50
HTML Assignment
- Design a website for a College. There should be at least 4 web-
pages present in the web-site. There should be:
- One Home page that contains the name of the college as heading
along with the college logo.
- There should be an appropriate description of the college on the
home
- There should a list of links for the following pages:
• Home;
• Academics;
• Admission;
• Gallery.

51
HTML Assignment
- One Academics page which contains a list of all the departments
present in the college. The list should be a nested list, with
available courses mentioned under each department.
- There should be a minimum of two courses under each
department,
- Each Course entry in the list should be a HTML link that leads to a
web-page totally dedicated to the course itself.
- Each Course should have its own dedicated web-page. This page
should contain a description about the course, a table of all the
teachers taking the course and the timetable for that particular
subject.

52
HTML Assignment
- The Admission page basically contains a form that a student
needs to fill up in order to take admission in the college. The
form should ask all the necessary questions using appropriate
form elements.
- One gallery page that contains set of photos taken of the college
and its students.
- Please note that each web-page in this website should have the
same background Image/color.
- The looks of each page should be similar

53