Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Hypertext markup language(html)
1.
2. 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
4. ◦ 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
5. Paragraph - <p></p>
List – ordered list<ol>,unordered list<ul>
Image - <img>
Link - <a>
Heading – <H1> to <H6>
Table - <table>
Form
5
6. <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
14. 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
15. 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
16. Sample Heading tag
<h1>This is heading h1.</h1>
<h2>This is heading h2.</h2>
<h3>This is heading h3.</h3>
<h4>This is heading h4.</h4>
<h5>This is heading h5.</h5>
<h6>This is heading h6.</h6>
16
23. Create form with the following fields
◦ Employee Number
◦ Lastname
◦ Firstname
◦ Middlename
◦ Position
Arrange the layout of the form using Table
tag
Output
23
24. 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
25. 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
28. 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
29. Use <table> tag
◦ Create table with two columns and four rows
29
30. <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>
ITMS Training and Research
Division 30
31. <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>
ITMS Training and Research
Division 31
32. Create your desired template, choose from
div or table tag.
Create also the CSS for this template and add
it to the head section.
ITMS Training and Research
Division 32
