Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Todo documento hecho en HTML5 comienza con una declaración de qué tipo de
documento es…
<!doctype html>
DEBE comenzar con este comando que le dice al browser que es un archivo HTML
Las declaraciones en html siempre está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:
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>.
<!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.
<img> imagen
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>
<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>
<title>mi primera página</title>
</head>
<body>
<h1>primer título</h1>
<div>soy amabile</div>
<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>
<title>mi primera página</title>
</head>
<body>
<h1>primer título</h1>
<div>soy amabile</div>
<br>
<br>
<br>
<br>
<!--este título es super lindi -->
<h2>segundo título</h2>
<span>muy amabile</span>
</body>
</html>
Tablas.
<!doctype html>
<html>
<head>
<title>mi primera página</title>
</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>
<!doctype html>
<html>
<head>
<title>mi primera página</title>
</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>
<img>
Para agregar imágenes. No necesita cerrarlo pq no tiene contenido propio, solo hace
referencia a otro contenido del root.