HTML 5

HTML
Todo documento hecho en HTML5 comienza con una declaracioó n de queó tipo de
documento es…
El root statement de un documento html es
<html>
y cuando finaliza el archivo se cierra con
</html>
todo lo que estaó entre medio es el contenido del documento.
<!doctype html>
DEBE comenzar con este comando que le dice al browser que es un archivo HTML
Las declaraciones en html siempre estaó n encerradas en < y >, y tiene un inicio y un
final
Estructura
Los documentos html tienen una estructura que le permite al browser entenderlo,
los 3 componentes principales son:
•  Root Element. Es el que envuelve el documento (no es

realmente una seccioó n). Comienza con <html> y cierra con </html>
•  Head. El head es la seccioó n que tiene la informacioó n de la

paó gina completa, es informacioó n comuó n para todo el documento. Puede ser
muy extensiva y abarca cosas como el idioma, si usa otros programas, etc.
No es lo que se ve en la paó gina misma, es informacioó n “tras bambalinas”.
• o Es muy importante que en el HEAD se encuentre el
title que es lo que se muestra en la pestanñ a del browser. Para que sea
un buen title debe ser descriptivo de la paó gina como tambieó n de la
seccioó n. Ej. “orquesta wasabi oficial” y en la seccioó n banda es “banda
⎮ orquesta wasabi oficial”. Esto es lo que usa google para definir si una
página es relevante en su motor de búsqueda con un límite de 66
caracteres.
El head comienza con <head> y termina con </head>
•  Body. La sección body es “la página”, donde está toda la

información visible (excepto el title), las imágenes, la tipografía, colores, etc.
Abre con <body> y cierra con </body>.
Un ejemplo de un documento HTML es.
<!doctype html>
<html>
<head>
<title>mi primera página</title>
</head>
<body>
<div>soy amabile</div>
</body>
</html>
Esta sería una página que de título tendría “mi primera página” y lo que se mostraría
en la página misma sería “soy amabile”
Tags
Las páginas tienen varios elementos que llamados Tags. Entre ellos están.
<a> Anchor hace un link a otra sección o página del mismo documento.
<div> sección es una sección de la página como Headlines, menú, etc.
<img> imagen
<link> link a otra página fuera del documento
<p> paragraf un cuadro de texto
Semantic markup es usar los elementos para lo que son, vale decir, el de texto para
texto, el de imagen para imagen, etc… Esto le ayuda a los buscadores a ser más
eficientes igual que a los usuarios. También ayuda para que sea más rápido y eficiente
el mantenimiento de la página.
Introducir texto.
Hay 3 tags buenos para introducir grandes porciones de texto, estos son:
•  <p>
•  <span>
•  <div>
Para poner Headings se usa <h1>, <h2>, hasta <h6>
<p> y <div> usan todo el largo de la página… <span> permite poner cosas al lado.
Introducir espacios.
<br> funciona como un “enter”
<!doctype html>
<html>
<head>
</head>
<body>
<h1>primer título</h1>
<br>
<br>
<br>
<br>
<h2>segundo título</h2>
<span>muy amabile</span>
</body>
</html>
Insertar comentarios.
Sirven para ordenar el código, no se ven en la página solo en el código.
Los comentarios son de acceso público a si que NUNCA deben incluir información
persona o confidencial.
Comienzan con <!—y se cierran con -->
<!doctype html>
<html>
<head>
</head>
<body>
<h1>primer título</h1>
<br>
<br>
<br>
<br>

<h2>segundo título</h2>
<span>muy amabile</span>
</body>
</html>
Tablas.
<!doctype html>
<html>
<head>
</head>
<body>
<h1>tabla 1</h1>
<table>
<tr>
<td>código de aeropuerto</td>
<td>ciudad</td>
</tr>
<tr>
<td>CWA</td>
<td>central Wisconsin</td>
</tr>
<tr>
<td>ORD</td>
<td>Chicago O’hare</td>
</tr>
<tr>
<td>LHR</td>
<td>London Heathrow</td>
</tr>
</table>
</body>
</html>
para agregar bordes a la tabla
<!doctype html>
<html>
<head>
</head>
<body>
<h1>tabla 1</h1>
<table border=”1”>
<tr>
<td>código de aeropuerto</td>
<td>ciudad</td>
</tr>
<tr>
<td>CWA</td>
<td>central Wisconsin</td>
</tr>
<tr>
<td>ORD</td>
<td>Chicago O’hare</td>
</tr>
<tr>
<td>LHR</td>
<td>London Heathrow</td>
</tr>
</table>
</body>
</html>
al agregarle el border=”1” se le agrega un Atributo a la función, esto define de mejor

forma como se va a comportar.
<img>
• Para agregar imágenes. No necesita cerrarlo pq no tiene contenido
propio, solo hace referencia a otro contenido del root. envuelve el documento
(no es realmente una seccioó n). Comienza con <html> y cierra con </html>
•  Head. El head es la seccioó n que tiene la informacioó n de la

paó gina completa, es informacioó n comuó n para todo el documento. Puede ser
muy extensiva y abarca cosas como el idioma, si usa otros programas, etc.
No es lo que se ve en la paó gina misma, es informacioó n “tras bambalinas”.
o Es muy importante que en el HEAD se encuentre el title que es lo que se
muestra en la pestanñ a del browser. Para que sea un buen title debe ser descriptivo
de la paó gina como tambieó n de la seccioó n. Ej. “orquesta wasabi oficial” y en la
seccioó n banda es “banda ⎮ orquesta wasabi oficial”. Esto es lo que usa google para
definir si una

HTML 5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML 5

Uploaded by

Copyright:

Available Formats

HTML

El root statement de un documento html es

y cuando finaliza el archivo se cierra con

todo lo que estaó entre medio es el contenido del documento.

•  Root Element. Es el que envuelve el documento (no es

•  Head. El head es la seccioó n que tiene la informacioó n de la

•  Body. La sección body es “la página”, donde está toda la

Un ejemplo de un documento HTML es.

<div> sección es una sección de la página como Headlines, menú, etc.

<link> link a otra página fuera del documento

<p> paragraf un cuadro de texto

Para poner Headings se usa <h1>, <h2>, hasta <h6>

para agregar bordes a la tabla

al agregarle el border=”1” se le agrega un Atributo a la función, esto define de mejor

•  Head. El head es la seccioó n que tiene la informacioó n de la

You might also like