Você está na página 1de 6

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


• uó 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>
<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>

para agregar bordes a la tabla

<!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>

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>
0. ¥ 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>

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 com

Você também pode gostar