   HTML defines the structure and layout of a Web    document by using a variety of tags and attributes.     ◦ HTML Defin...
<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, b...
   Paragraph - <p></p>   List – ordered list<ol>,unordered list<ul>   Image - <img>   Link - <a>   Heading – <H1> to ...
<p> This is the first paragraph.</p><p>This is the second paragraph.</p><p>This is the third paragraph.</p>This is the fir...
   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                          ...
   Image tag attributes    ◦ src = source image    ◦ width = image width    ◦ Height = image heightSample<img src=Pengui...
   Anchor tag attributes:    ◦ href=The href attribute specifies the destination of      a link    ◦ target= The target a...
1.    Create one paragraph (Brief history of PUP)        Save it as history.html2.    Create list for the following:     1...
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...
17
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...
19
   Form elements    ◦ Input tag    ◦ Select tag   Input tag types    ◦   Text    ◦   Radio    ◦   Checkbox    ◦   Submit...
<form>Rank: <select><option  value=PO1>PO1</option><option  value=PO2>PO2</option><option  value=PO3>PO3</option></select>...
22
   Create form with the following fields    ◦   Employee Number    ◦   Lastname    ◦   Firstname    ◦   Middlename    ◦  ...
   Cascading Style Sheets (CSS) is a    simple mechanism for adding style    (e.g., fonts, colors, spacing) to Web    doc...
   External CSS – a style sheet outside HTML    document and can be embedded or link to HTML    document by using <link> ...
<head><style>p {align:center:color:gray;font-family:Arial;font-size:12px;}table,td,th{border:solid ; border-color:gray;fon...
ITMS Training and Research                   Division   27
   Create the CSS for the following tag:    ◦ Paragraph       Font-family: arial       Color: #666666       fo    ◦ Ta...
   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...
<div class=wrapper width=800px>  <div id=header><img src=header.jpg></div>  <div id=nav>Home<br>About Us<br>Contact Us</di...
   Create your desired template, choose from    div or table tag.   Create also the CSS for this template and add    it ...
ITMS Training and Research                   Division   33
ITMS Training and Research                   Division   34
Hypertext markup language(html)
Upcoming SlideShare
Loading in …5
×

Hypertext markup language(html)

1,366 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,366
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hypertext markup language(html)

  1. 1.  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
  2. 2. <html> <head> <title>…</title> </head> <body> Page contents…. </body></html> 3
  3. 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
  4. 4.  Paragraph - <p></p> List – ordered list<ol>,unordered list<ul> Image - <img> Link - <a> Heading – <H1> to <H6> Table - <table> Form 5
  5. 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
  6. 6.  align id Example: ◦ <p align=center>…</p> ◦ <p id=p1>…</p> 7
  7. 7. Sample tag<ol>Favorite colors<li>White<li>Pink<li>Blue<li>Green<li>Brown</ol> 8
  8. 8.  Type ◦ 1 ◦ I ◦ A ◦ a 9
  9. 9. Sample Tag<ul>Favorite colors<li>White<li>Pink<li>Blue<li>Green<li>Brown</ul> 10
  10. 10.  Type ◦ Disc ◦ Square ◦ circle 11
  11. 11.  Type start Example: ◦ <ol type=1 start=5>…</ol> ◦ <ul type=disc</ul> ◦ Output 12
  12. 12.  Image tag attributes ◦ src = source image ◦ width = image width ◦ Height = image heightSample<img src=Penguins.jpg width=100 height=100> 13
  13. 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
  14. 14. 1. Create one paragraph (Brief history of PUP) Save it as history.html2. Create list for the following: 1. Colleges (Ordered list) 2. Courses (Unordered list) Save as aboutus.html3. 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
  15. 15. 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
  16. 16. 17
  17. 17. 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
  18. 18. 19
  19. 19.  Form elements ◦ Input tag ◦ Select tag Input tag types ◦ Text ◦ Radio ◦ Checkbox ◦ Submit ◦ Button Select tag 20
  20. 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
  21. 21. 22
  22. 22.  Create form with the following fields ◦ Employee Number ◦ Lastname ◦ Firstname ◦ Middlename ◦ Position Arrange the layout of the form using Table tag Output 23
  23. 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
  24. 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
  25. 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
  26. 26. ITMS Training and Research Division 27
  27. 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
  28. 28.  Use <table> tag ◦ Create table with two columns and four rows 29
  29. 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> ITMS Training and Research Division 30
  30. 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> ITMS Training and Research Division 31
  31. 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. ITMS Training and Research Division 32
  32. 32. ITMS Training and Research Division 33
  33. 33. ITMS Training and Research Division 34

×