Html 5 Iniciació
14
HTML versió 5 Hypertext Markup Language
-
Upload
daniel-amo -
Category
Education
-
view
196 -
download
5
description
Iniciació a
Transcript of Html 5 Iniciació
HTMLversió 5
Hypertext Markup Language
HTML
L'HTML o Hypertext Markup Language és un llenguatge de programació basat en tags que permet confeccionar pàgines web.
Els tags sempre van en parelles i poden anar uns dins dels altres. <font> <b>hola mundo</b></font>
HTML 5 - Tag DOCTYPE
Els navegadors llegeixen els tags i els interpreten mostrant per pantalla la pàgina web. Per interpretar els tags necessiten quelcom que els indiqui com fer aquesta interpretació. El doctype és el que defineix el tipus de document per una pàgina web i, per tant, com el navegador ha d'interpretar l'estructura de tags. En HTML 5 farem servir el següent tag pel doctype:<!DOCTYPE html>
HTML 5 - Tag HTML
Tots els tags han d'anar definits dins del tag principal html. Sense aquest tag els navegadors no poden interpretar l'estructura.
Una pàgina web té doncs una estructura base igual a la següent:
<!DOCTYPE html><html></html>
HTML 5 - Tag HEAD i TITLE
El tag head permet indicar al navegador diferents elements que defineixen 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>
HTML 5 - Tag BODY
El tag body permet indicar al navegador què s'ha de mostrar per pantalla.
La estructura base definitiva es completaria de la següent manera:
<!DOCTYPE html><html> <head> <title>hola món!</title> </head> <body> hola món! </body></html>
HTML 5 - Tag FONT
El tag font permet indicar al navegador el format del text mostrat per pantalla. Té els següents atributs:
● color: Indica el color del text. S'indica 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>
HTML 5 - Tag B, I, U
Els tags b, i, u permeten donar un format a la font del contingut web:
● 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>
HTML 5 - Tag BR
El 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>...
HTML 5 - Tag IMG
El tag img permet indicar al navegador que mostri una imatge per pantalla. Té els següents atributs:
● src: És la direcció local o externa de la imatge.● width: Permet indicar l'amplada de la imatge en píxels o
percentatge. Si només s'indica el width la imatge es redimensiona proporcionalment.
● height: Permet indicar l'alçada de la imatge en píxels o en percentatge. Si només s'indica el height la imatge es redimensiona proporcionalment.
<img src="imatge.jpg" width="100" />
HTML 5 - Tag A
El tag a permet crear enllaços cap a altres pàgines o elements web. Té els següents atributs:
● href: És la direcció local o externa de l'element web.● target: És opcional. Permet indicar si l'element 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" />
HTML 5 - Tag P
El 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. Ut iaculis pretium suscipit. Sed sed nisi risus, quis rhoncus tortor. Sed quis magna dictum lacus lobortis scelerisque. </p>
HTML 5 - Tag H1, H2, H3, H4
El tag h permet crear capçaleres de manera que se li doni importància a certes parts del contingut web. Possibles versions del tag h:
● h1● h2● h3
<h1>Lorem ipsum dolor sit amet</h1> <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis pretium suscipit. Sed sed nisi risus, quis rhoncus tortor. Sed quis magna dictum lacus lobortis scelerisque. </p>
HTML 5 - Tag TABLE
El 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>
