Your SlideShare is downloading. ×
Hypertext markup language(html)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Hypertext markup language(html)

1,061
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,061
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. <html> <head> <title>…</title> </head> <body> Page contents…. </body></html> 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.  Paragraph - <p></p> List – ordered list<ol>,unordered list<ul> Image - <img> Link - <a> Heading – <H1> to <H6> Table - <table> Form 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.  align id Example: ◦ <p align=center>…</p> ◦ <p id=p1>…</p> 7
  • 7. Sample tag<ol>Favorite colors<li>White<li>Pink<li>Blue<li>Green<li>Brown</ol> 8
  • 8.  Type ◦ 1 ◦ I ◦ A ◦ a 9
  • 9. Sample Tag<ul>Favorite colors<li>White<li>Pink<li>Blue<li>Green<li>Brown</ul> 10
  • 10.  Type ◦ Disc ◦ Square ◦ circle 11
  • 11.  Type start Example: ◦ <ol type=1 start=5>…</ol> ◦ <ul type=disc</ul> ◦ Output 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.  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. 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. 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. 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. 19
  • 19.  Form elements ◦ Input tag ◦ Select tag Input tag types ◦ Text ◦ Radio ◦ Checkbox ◦ Submit ◦ Button Select tag 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. 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.  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.  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. <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. ITMS Training and Research Division 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.  Use <table> tag ◦ Create table with two columns and four rows 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. <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.  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. ITMS Training and Research Division 33
  • 33. ITMS Training and Research Division 34

×