Topic 3 - Advanced HTML Tags

LIFESKILLS COMPUTER TRAINING
AND CONSULTING LIMITED

PRESENTS
ADVANCED HTML TAGS

LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
For more of our courses, visit www.lifeskillstech.xyz
OR www.ajewoleonline.com. You can also send an
email to lifeskillstech@gmail.com or call
+2347068675164
Available Courses
1. AutoCAD 2D & 3D
2. Machine Design with Autodesk Inventor
3. ELearning Course Design & Development
4. Develop an ELearning Portal
5. Develop a CBT Platform
6. Microsoft Office Training
7. Easy Web Design with Joomla!
8. Web Design with HTML, CSS, PHP and MySQL
9. Develop an Ecommerce Site
10. Web Design with ASP.Net
11. Programming with VB
12. Programming with C#
ADVANCED HTML TAGS
Form Tag
HTML Form Basics

Interactivity is increasingly becoming a major part of many websites. Although
the systems are all run by backend software, such as PHP or ASP, there must
still be a front-end interface for the visitors to use. The sending of data to a
script on a website is achieved by using HTML forms.
In HTML the first thing you must do is to define a form as a whole. This is done
using the tags:
<form>
</form>
ADVANCED HTML TAGS
Form Attributes
A form tag on its own is almost completely useless. There are three main attributes you can
use,though, which make the form more useful.
1. Action
<form action="http://www.lifeskillstech.com/index.php">
2. Method
<form method="post"> or <form method="get">
These two methods, POST and GET, refer to the standard HTTP methods of sending data across the internet.
The GET method puts the data into the URL of the next page, so that it is visible in the browser's address bar,
for example:
http://www.lifeskillstech.com/scripts/page.php?page=12&name=david&agree=yes
3. Name
Usually form tags only ever include the method and action attributes, but occasionally you will need to use
the name attribute. This is used as:
<form name="loginform">
This allows the browser to recognise the form on the page, which is useful if you are writing scripts in
JavaScript, for example to validate form data.
ADVANCED HTML TAGS
Form Input Elements
1. Text Input
e.g. <input type="text" name="username">
2. Larger Text Inputs

e.g. <textarea name="comments" rows="6" cols="25">Thank you for visiting the site. We
wouldappreciate it if you would leave some comments in this box to help us
improve.</textarea>
3. Buttons
<input type="Submit" value="Sign Up">
<input type="Reset">
ADVANCED HTML TAGS
Form Input Elements
4. Radio Buttons
<input type="radio" name="colors" value="red">Red<br>
<input type="radio" name="colors" value="green">Green<br>
<input type="radio" name="colors" value="blue">Blue
5. Checkboxes
<input type="checkbox" name="agree" value="yes">
<input type="checkbox" name="agree" value="yes" checked>
ADVANCED HTML TAGS
Form Input Elements
6. Selection Boxes
<select>
<option value="1st">Item 1</option>
<option value=“2nd">Item 2</option>
<option value=“3rd“ selected>Item 3</option>
</select>
7. Hidden Field
<input type="hidden" name="userid" value="98503804598">
ADVANCED HTML TAGS
Special Characters
Not all characters are available from your keyboard. For example, what if you want to
add a copyright symbol (c), a paragraph mark (¶), or an accented e (e)?
Good news:
HTML supports them all, along with about 250 relatives, including mathematical
symbols and Icelandic letters. To add them, however, you need to use some sleight
of hand.
The trick is to use HTML character entities—special codes that browsers

recognize as requests for unusual characters. The table below has some common options,
with a sprinkling of accent characters.
ADVANCED HTML TAGS
ADVANCED HTML TAGS
ADVANCED HTML TAGS
Tables In HTML
An HTML table is a grid of cells built out of rows and columns. In the Old Days of the Web, crafty web
designers used invisible tables to line up pictures and arrange text into columns. Now style sheets fill that gap
with features and HTML tables are back to being just tables.
You can create a table using these HTML elements:
• <table> wraps the whole shebang. It’s the starting point for every table.
• <tr> represents a single table row. Every table element (<table>) contains a series of one or more <tr>
elements.
• <td> represents a table cell (“td” stands for “table data”). For each cell you want in a row, you add one <td>
element. You put the text (or numbers, or <img> elements, or pretty much any HTML you like) that you want
to appear in that cell inside the <td> element. If you put text in the cell, it displays in the same font as
ordinary body text.
• <th> is an optional table element; you use it when you want to define a column heading. You can use a <th>
element instead of a <td> element any time, although it usually makes the most sense in the first row of a
table. Browsers format the text inside the <th> element in almost the same way as text in a <td> element,
except that they automatically boldface and center the text (unless you apply different formatting rules with a
style sheet).
ADVANCED HTML TAGS
Table Example
<table>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Population</th>
</tr>
<tr>
<td>1</td>
<td>Rome</td>
<td>450,000</td>
</tr>
<tr>
<td>2</td>
<td>Luoyang (Honan), China</td>
<td>420,000</td>
</tr>
<tr>
<td>3</td>
<td>Seleucia (on the Tigris), Iraq</td>
<td>250,000</td>
</tr>
….
</table> LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
ADVANCED HTML TAGS
ADVANCED HTML TAGS
Div Tag and Web Layout
The div tag is used to specify a section within an HTML document. Anything
from text to images to videos can be placed within a div. Divs are similar to
tables but they are easier to use, customizable with CSS, and load faster than
tables.
Divs also make it easier for search engine spiders to “crawl” or examine a
website – making your website easier to find via Google. For example, a
simple web page can consist of a header, a side navigation or menu bar,
content area and a footer. Such layout is constructed using div tags as
follows:
ADVANCED HTML TAGS
<div id="overall-wrapper">
<div id="header"></div>
<div id="main-content">
<div id="side-navigation"></div>
<div id="body"></div>
</div>
<div id="footer"></div>
</div>
The physical layout of the page will be as follows:
ADVANCED HTML TAGS
<div id="overall-wrapper">
<div id="header"></div>
<div id="main-content">
<div id="side-navigation"></div>
<div id="body"></div>
</div>
<div id="footer"></div>
</div>
The physical layout of the page will be as follows:

ADVANCED HTML TAGS
You will notice that the whole layout is put inside an overall div tag called wrapper. Also,
the side navigation and content divs are both placed inside a main-content div tag.
ADVANCED HTML TAGS
Another Layout
ADVANCED HTML TAGS
In the next topic……….
WE WILL LEARN CASCADING STYLE SHEET

Topic 3 - Advanced HTML Tags

Uploaded by

Copyright:

Available Formats

You might also like

Topic 3 - Advanced HTML Tags

Uploaded by

Document Information

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

Topic 3 - Advanced HTML Tags

Uploaded by

Copyright:

Available Formats

LIFESKILLS COMPUTER TRAINING

AND CONSULTING LIMITED

ADVANCED HTML TAGS

HTML Form Basics

2. Larger Text Inputs

The trick is to use HTML character entities—special codes that browsers

The physical layout of the page will be as follows:

In the next topic……….

WE WILL LEARN CASCADING STYLE SHEET

You might also like