Hypertext markup language(html)

 HTML defines the structure and layout of a Web
document by using a variety of tags and attributes.
◦ HTML Define
 Acronym for Hypertext Markup Language
 A document use for creating web pages.
◦ Parts of the HTML Document
 Head section
<head><title></title></head>
 Body section
<body></body>

2

<html>
<head>
<title>…</title>
</head>
<body>
Page contents….
</body>
</html>

3

◦ a software used for authoring web documents. A
simple text editor like Notepad is sufficient for
creating web pages, but there are advanced HTML
editors that can be used to speed-up the
development process.
◦ Some of these are:
 Microsoft FrontPage
 Dreamweaver

4

 Paragraph - <p></p>
 List – ordered list<ol>,unordered list<ul>
 Image - <img>
 Link - <a>
 Heading – <H1> to <H6>
 Table - <table>
 Form

5

<p> This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>

This is the first paragraph.
This is the second paragraph.
This is the third paragraph.

6

 align
 id
 Example:
◦ <p align=center>…</p>
◦ <p id=p1>…</p>

7

Sample tag
<ol>Favorite colors
<li>White
<li>Pink
<li>Blue
<li>Green
<li>Brown
</ol>

8

 Type
◦ 1
◦ I
◦ A
◦ a

9

Sample Tag
<ul>Favorite colors
<li>White
<li>Pink
<li>Blue
<li>Green
<li>Brown
</ul>

10

 Type
◦ Disc
◦ Square
◦ circle

11

 Type
 start
 Example:
◦ <ol type=1 start=5>…</ol>
◦ <ul type=disc</ul>
◦ Output

12

 Image tag attributes
◦ src = source image
◦ width = image width
◦ Height = image height
Sample
<img src=Penguins.jpg width=100
height=100>

13

 Anchor tag attributes:
◦ href=The href attribute specifies the destination of
a link
◦ target= The target attribute specifies where to open
the linked document
Sample
<a href=img.html>Penguin</a>

14

1. Create one paragraph (Brief history of PUP)
Save it as history.html
2. Create list for the following:
1. Colleges (Ordered list)
2. Courses (Unordered list)
Save as aboutus.html
3. Add the logo of PUP at the top of the PUP
history paragraph.
4. Create link to history.html and aboutus.html
Save as index.html

15

Sample Heading tag
<h1>This is heading h1.</h1>

16

Sample Table tag
<table border=1 width=50%>
<tr><th>Rank</th><th>Name</th><th>Div
ision/Office</th></tr>
<tr><td>PCI</td><td>Amir Hassan
Ali</td><td>Inspectorate Office</td></tr>
<tr><td>PCI</td><td>Victorio Dela
Peña</td><td>Data Warehouse Provision
Office</td></tr>
</table>

18

 Form elements
◦ Input tag
◦ Select tag
 Input tag types
◦ Text
◦ Radio
◦ Checkbox
◦ Submit
◦ Button
 Select tag

20

<form>
Rank: <select><option
value=PO1>PO1</option><option
value=PO2>PO2</option><option
value=PO3>PO3</option>
</select><br>
Name:<input type=text name=pname
maxlength=50><br>
Civil Status:<input type=radio value=Single
>Single<input type=radio value=Married
>Married<input type=radio value=Widow >Widow<br>
Unit Assignment:<input type=text name=unit><br>
<input type=submit value=Submit>
</form>

21

 Create form with the following fields
◦ Employee Number
◦ Lastname
◦ Firstname
◦ Middlename
◦ Position
 Arrange the layout of the form using Table
tag
 Output

23

 Cascading Style Sheets (CSS) is a
simple mechanism for adding style
(e.g., fonts, colors, spacing) to Web
documents
 A style is used to predefine the format
for any HTML tag in the document.
 CSS is defined in <style></style> tag
and usually place inside
<head>…</head>
 Three types: External, Internal and
Inline
24

 External CSS – a style sheet outside HTML
document and can be embedded or link to HTML
document by using <link> tag.
◦ It is ideal when the style is applied to many pages.
 Internal CSS – a style sheet place inside the HTML
document.
◦ The style is used to a single page.
◦ Format: <head><style>…</style></head>
 Inline CSS - An inline style can be used if a unique
style is to be applied to one single occurrence of an
element.
◦ <p style="color:blue;margin-left:20px;">This is a
paragraph.</p>

25

<head>
<style>
p {align:center:
color:gray;
font-family:Arial;
font-size:12px;}

table,td,th{
border:solid ; border-color:gray;
font-family:Arial; font-size:14px;
color:#666666;
padding-left:15px;
padding-right:15px;
}</style>
</head>
26

ITMS Training and Research
Division 27

 Create the CSS for the following tag:
◦ Paragraph
 Font-family: arial
 Color: #666666
 fo
◦ Table
 Border: solid
 Border-color:#cccccc
 Font-family:arial
 Color:#666666
◦ ol and ul
 Font-family:arial
 Color:#333333
 Open the webpages you created previously and add the
following to the head section:
<head> <link href="design.css" rel="stylesheet"
type="text/css"></head>

28

 Use <table> tag
◦ Create table with two columns and four rows

29

<h3><center>Template using table tag</center></h3>
<table width="347" border="1" align="center">
<tr>
<td colspan="2"><div align="center“
>Header/Banner</div></td>
</tr>
<tr>
<td colspan="2"><div
align="center">Navigation/Menu</div></td>
</tr>
<tr>
<td width="55" height="89"><p align="center">ADS</td>
<td width="282">ARTICLES</td>
</tr>
<tr>
<td colspan="2"><div align="center">FOOTER</div></td>
</tr>
</table>

Division 30

<div class=wrapper width=800px>
<div id=header><img src=header.jpg></div>
<div id=nav>Home<br>About Us<br>Contact Us</div>
<div id=content>Contents here</div>
<div id=footer>Copyright 2011
www.itms.pnp.gov.ph</div>
</div>

Division 31

 Create your desired template, choose from
div or table tag.
 Create also the CSS for this template and add
it to the head section.

Division 32

Division 33

Division 34

Hypertext markup language(html)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Hypertext markup language(html)

Similar to Hypertext markup language(html) (20)

Recently uploaded

Recently uploaded (20)

Hypertext markup language(html)