Html 5 Iniciació

376 views

Published on

Iniciació a

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

  • Be the first to like this

No Downloads
Views
Total views
376
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html 5 Iniciació

  1. 1. HTML versió 5Hypertext Markup Language
  2. 2. HTMLLHTML o Hypertext MarkupLanguage és un llenguatgede programació basat entags que permet confeccionarpàgines web.Els tags sempre van enparelles i poden anar unsdins dels altres.<font> <b>hola mundo</b></font>
  3. 3. HTML 5 - Tag DOCTYPEEls navegadors llegeixen els tags i els interpreten mostrant perpantalla la pàgina web. Per interpretar els tagsnecessiten quelcom que els indiqui com fer aquestainterpretació.El doctype és el que defineix el tipus de document per unapàgina web i, per tant, com el navegador ha dinterpretarlestructura de tags.En HTML 5 farem servir el següent tag pel doctype:<!DOCTYPE html>
  4. 4. HTML 5 - Tag HTMLTots els tags han danar definits dins del tag principal html.Sense aquest tag els navegadors no poden interpretarlestructura.Una pàgina web té doncs una estructura base igual a lasegüent:<!DOCTYPE html><html></html>
  5. 5. HTML 5 - Tag HEAD i TITLEEl tag head permet indicar al navegador diferents elements quedefineixen el document, com per exemple el títol.El títol es defineix amb el tag title i va sempre dins el tag head.La estructura base es completaria de la següent manera:<!DOCTYPE html><html> <head> <title>hola món!</title> </head></html>
  6. 6. HTML 5 - Tag BODYEl tag body permet indicar al navegador què sha de mostrarper pantalla.La estructura base definitiva es completaria de la següentmanera:<!DOCTYPE html><html> <head> <title>hola món!</title> </head> <body> hola món! </body></html>
  7. 7. HTML 5 - Tag FONTEl tag font permet indicar al navegador el format del textmostrat per pantalla. Té els següents atributs: ● color: Indica el color del text. Sindica amb un # i un valor hexadecimal. ○ blanc: #FFFFFF ○ negre: #000000 ○ vermell: #FF0000 ○ blau: #0000FF ● face: Indica el tipus de font. Els més comuns a internet són: arial, verdana i tahoma. <font color="#ff0000" face="arial"> hola món! </font>
  8. 8. HTML 5 - Tag B, I, UEls tags b, i, u permeten donar un format a la font del contingutweb: ● b: Posa el text en negreta. ● i: Posa el text en cursiva. ● u: Subratlla el text.<u> hola món! </u><i> hola món! </i><b> hola món! </b>
  9. 9. HTML 5 - Tag BREl tag br permet fer noves línies entre el text de la pàgina web.No té atributs. ...<body>hola<br />món<br />!</body>...
  10. 10. HTML 5 - Tag IMGEl tag img permet indicar al navegador que mostri una imatgeper pantalla. Té els següents atributs: ● src: És la direcció local o externa de la imatge. ● width: Permet indicar lamplada de la imatge en píxels o percentatge. Si només sindica el width la imatge es redimensiona proporcionalment. ● height: Permet indicar lalçada de la imatge en píxels o en percentatge. Si només sindica el height la imatge es redimensiona proporcionalment.<img src="imatge.jpg" width="100" />
  11. 11. HTML 5 - Tag AEl tag a permet crear enllaços cap a altres pàgines o elementsweb. Té els següents atributs: ● href: És la direcció local o externa de lelement web. ● target: És opcional. Permet indicar si lelement es carrega en la mateixa pàgina o en una pàgina nova. ○ Si no està especificat carrega en la mateixa pàgina. ○ Si el valor és _blank llavors es carrega en una finestra nova.<a href="http://www.cmontserrat.net" target="_blank" />
  12. 12. HTML 5 - Tag PEl tag p permet crear paràgrafs. Té els següents atributs: ● align: Permet alinear el text segons el seu valor: ○ left ○ right ○ center ○ justify <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utiaculis pretium suscipit. Sed sed nisi risus, quis rhoncus tortor.Sed quis magna dictum lacus lobortis scelerisque.</p>
  13. 13. HTML 5 - Tag H1, H2, H3, H4El tag h permet crear capçaleres de manera que se li doniimportància a certes parts del contingut web. Possiblesversions del tag h: ● h1 ● h2 ● h3<h1>Lorem ipsum dolor sit amet</h1><p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utiaculis pretium suscipit. Sed sed nisi risus, quis rhoncus tortor.Sed quis magna dictum lacus lobortis scelerisque.</p>
  14. 14. HTML 5 - Tag TABLEEl tag table permet crear taules amb les seves files i columnes.Dins hi trobarem els tags tbody, tr i td: ● tbody: Defineix el cos de la taula. ● tr: Defineix les files ● td: Defineix les columnes<table><tbody><tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing.</td></tr></tbody></table>

×