Scribd
Upload
3 views17 pages

Web Design: Lecturer Dr. Mohand Lokman Ahmad Class Symbol: Oa6o7sx

This document is a lecture on web design, focusing on links, tables, and HTML forms. It explains how to create regular text links and image links, as well as how to structure tables with rows and columns, including headers and merged cells. Additionally, it covers various input elements for forms, such as text fields, checkboxes, radio buttons, submit buttons, dropdown menus, and text areas.

Uploaded by

Ahmed11khalil6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views17 pages

Web Design: Lecturer Dr. Mohand Lokman Ahmad Class Symbol: Oa6o7sx

This document is a lecture on web design, focusing on links, tables, and HTML forms. It explains how to create regular text links and image links, as well as how to structure tables with rows and columns, including headers and merged cells. Additionally, it covers various input elements for forms, such as text fields, checkboxes, radio buttons, submit buttons, dropdown menus, and text areas.

Uploaded by

Ahmed11khalil6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Web design

lecture 3
Lecturer
Dr. Mohand Lokman Ahmad
Class symbol: oa6o7sx
Links

• links : are a vital part of Web pages. Links allow you to


move smoothly from one page to another. It allows you
to navigate from page to page.
• there are a lot of different types of links:
• Regular or text links
• Image links
Regular or Text Links
• To create a simple text link, use the <a> tag by following this
syntax:
• <a href="URL of page you want to link to">link text</a>
What does this syntax mean?
The <a> tag opens the link element.
The href attribute will tell you the destination of the link.
The "link text" could be anything from a simple description of
the linked page to something like "click here" or "visit the
page."
The </a> tag closes the element.
For example:
• <a href="http://www.google.com">Google It!</a>
Image Links
<!DOCTYPE html>
<html>
• Sometimes, you would want to use an <head>
image instead of a text link. <title></title>
</head>
• <a href="URL"> <body>
<a href="http:/www.google.com">
<img src="image.jpg" alt="alt text of <img src="images/register.png" alt="alt
image"></a> text of image">
</a>
• Images size </body>
</html>
You need to use this code:
<img src="imagefile.jpg" alt="image on
your site" width="100" height="100">
• The width and height attributes
determine the dimensions of the image.
Creating Tables
• let us be clear that tables are not to be used for layouting, formatting and positioning.
• You should only use tables if you have to present data.
• The <table> tag defines all tables in an HTML document. To make it easier for you to hardcode your
table, you should always remember that HTML tables work first with rows (designated by the <tr> tag) ,
then columns (defined by the <td> tag).
<table border="1">
<tr>
<td>one cell</td>
</tr>
</table>
Muli-column table
<h4>One row, multi column:</h4>
<table border="1">
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
</table>
• As you can see, there are two different sets for <tr>, which would mean that the table would have two
rows. Three <td> tags for each <tr> set would mean that each row has three columns.
Column header
• If you need to include headers in your table, you would need to use the <th> tag instead of the <td> tag in your first <tr> set.

• For example, to create the following table:

<table border="1">

<tr>

<th>Header 1</th>

<th>Header 2</th>

<th>Header 3</th>

</tr>

<tr>

<td>Row 1, Column 1</td>


<td>Row 1, Column 2</td>

<td>Row 1, Column 3</td>

</tr>

</table>
cells that take up two columns
<table border="1">
<tr>
<th>Category</th>
<th colspan="3">Examples</th>
</tr>
<tr>
<td>Fruits</td>
<td>Apples</td>
<td>Oranges</td>
<td>Grapes</td>
</tr>
</table>
cells that take up two rows
<table border="1">
<tr>
<th>Department:</th>
<td>Accounting</td>
</tr>
<tr>
<th rowspan="2">Contact Person:</th>
<td>Freya Olsen</td>
</tr>
<tr>
<td>Maita Cot</td>
</tr>
</table>
cellpadding
<table border="1“ cellpadding="10">
<tr>
<td>This cell is padded. </td>
<td>This cell is padded too. </td>
</tr>
<tr>
<td>The world is round.</td>
<td>The sky is grey.</td>
</tr>
</table>
HTML Forms

HTML forms provide a great way to capture data from your web site. A form in an HTML page can be
used to submit data to a server for further processing.
The <form> tag has several attributes that would tell the browser what to do with the information that is
entered in the different fields. These attributes are:
• action
• Method
The action attribute tells your browser the location of the script that you are going to use to process the
form. On the other hand, the method attribute has two possible values, method=get or method=post, both
of which specify a method of submitting data to the script you have specified in the action attribute.
When you use the post method, the form data is packaged as part of an HTTP request and isn’t visible in
the browser. Because of that the submission is more secure than it is when you use the “get” method.
the input element
• text
• Input with attribute type=“text”. This gives the <html>
user to enter only a line of text. <head>
<title></title>
</head>
<body>
• Password <form >
<input type="text"></input>
• Very much like a text field, but this one is </form>
especially earmarked for passwords and other
sensitive data. Whatever you enter into the </body>
password field is masked. </html>
result
• The syntax for a password field is as follows:
<input type="password" >
the input element
<!DOCTYPE html>
• Checkboxes <html>
<head>
• A checkbox is used if you have a <title></title>
</head>
list of choices, a list from which <body>
you want the visitor to select as <form >
many options as possible or let <input type="checkbox" >
Yes, I am interested!
them select none of the choices <input type="checkbox" >No, do not
you provided. contact me.
</form>
</body>
<input type="checkbox" > </html>
the input element
<!DOCTYPE html>
<html>
• Radio Buttons <head>
<title></title>
</head>
• Radio buttons are used when <body>
<form >
you have a set number of <input type="radio" >Yup<br>
<input type="radio" >Nope
</form>
options and you only want to
</body>
let your site's visitor to </html>

choose only one of these


choices.
the input element
• Submit <!DOCTYPE html>
<html>
<head>
• The submit button allows your visitors <title></title>
</head>
to send their input to the server.The <body>
<form >
correct syntax for the submit button is: <input type="submit">

<input type="submit" value="Submit"> </form>


</body>
</html>
Dropdown Menus
• Dropdown menus allow you to give your visitors a set <!DOCTYPE html>
number of options to choose from. <html>
<head>
• The typical code for a dropdown box would be: <title></title>
<select name="alphabets">
</head>
<body>
<option value="a">A</option> <form >
<select name="alphabets">
<option value="b">B</option> <option value="a">A</option>
<option value="c" selected>C</option>
<option value="b">B</option>
<option value="c"
<option value="d">D</option> selected>C</option>
<option value="d">D</option>
</select> </select>
• Having the attribute "selected" would mean that when the
</form>
dropdown box is first displayed on the page, it will show
option "C" as the selected value (selected by default) </body>
</html>
Text Area
<!DOCTYPE html>
• A text area acts like a text field, only that <html>
you have more space than just one line. It <head>
is not defined by an <input> tag, but by a <title></title>
tag such as: </head>
<body>
<textarea> <form >
<textarea >
Input text here Input text here
</textarea>
</textarea> <textarea rows="15" cols="20">
• This will show a text box with the words </textarea>
"Input text here" filled in. You can also </form>
specify the number of rows and columns
to control the size of your text box, </body>
</html>
i.e.,<textarea rows="15" cols="20">

You might also like