- Que es HTML?
HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).
- Etiquetes HTML
Les etiquetes bàsiques d'HTML, d'obligada presència en tot document són:
<!DOCTYPE>: És l'etiqueta que permet definir el tipus de document HTML que s'empra. Existeixen tres tipus bàsics: l'estricte (Strict), el transicional (Transitional) i el de marcs (Frameset).<html>: És l'etiqueta arrel de qualsevol document HTML o XHTML.<head>: Defineix la capçalera del document HTML. Permet declarar metainformació del document que no es mostra directament en el navegador. Aquesta informació és d'especial rellevància pels indexadors i cercadors automàtics.<body>: Defineix el cos del document. Aquesta és la part del document HTML que es mostra en el navegador.
<HEAD> hi podem trobar:<title>: Permet definir el títol de la pàgina. En navegadors gràfics el contingut deltitleapareix a la barra del títol a sobre de la finestra.<meta>: Permet definir metainformacions del document tals com l'autor, la data de realització, la codificació del document (UTF, ISO, etc.), les paraules clau i la descripció del mateix<LINK>: Permet definir metadades complementàries a les delmetatals com el document anterior, el següent, el capítol al qual pertany el document, la pàgina glossari, etc.
<BODY> hi podem trobar:<a>: Etiqueta àncora. Crea un enllaç a un altre document o a una altra zona del mateix, segons els atributs.<h1>, <h2>,… <h6>: capçaleres o títols del document, acostumen a distingir-se per mida.<div>: Divisió estructural de la pàgina.<p>: Paràgraf.<br>: Salt de línia.<table>: Indica el començament d'una taula, després s'haurà de definir les files amb<tr>i les cel·les dintre de les files amb<td>.<ul>: Llista desordenada (sense numerar). Els ítems es defineixen amb<li>.<ol>: Llista ordenada (numerat). Els ítems es defineixen amb<li>.<dl>: Llista de definició. Hi ha dos tipus d'ítem; eldti eldd.<dt>: Terme a definir.<dd>: Definició del terme.
<html>…</html>Etiquetes HTML més utilitzades
Encabezados.
Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando el título del artículo, categoría, etc. Pues bien, para escribir encabezados tenemos que utilizar las etiquetas <h>.
Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6, predefiniendo éstos el tamaño del encabezado. Así, <h1> sería el encabezado más grande mientras que <h6> sería el más pequeño.
A continuación vamos a mostraros el código de los seis diferentes encabezados:
Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6, predefiniendo éstos el tamaño del encabezado. Así, <h1> sería el encabezado más grande mientras que <h6> sería el más pequeño.
A continuación vamos a mostraros el código de los seis diferentes encabezados:
| <h1> Texto muy grande</h1> <h2>Texto grande</h2> <h3>Texto algo más grande de lo normal</h3> <h4>Texto normal</h4> <h5>Texto pequeño</h5> <h6>Texto muy pequeño</h6> |
Contenedores
HTML considera que los párrafos son bloques de texto. Los navegadores hacen lo posible para adaptar el contenido de los párrafos a la ventana, a menos que los atributos NOWRAP o NOBR estén explícitamente especificados.
Dentro de un párrafo, todos los espacios, tabuladores y saltos de línea cuentan como un espacio simple.
Dentro de un párrafo, todos los espacios, tabuladores y saltos de línea cuentan como un espacio simple.
Para colocar textos en bloques, se utiliza el par de etiquetas <p> y </p>. Esta etiqueta puede incluir cualquiera de los atributos mencionados anteriormente.
Los saltos de línea (saltar de una línea a la siguiente) se crean usando la etiqueta <br/>.
La etiqueta <hr> se utiliza para insertar una línea horizontal.
| Etiqueta | Atributo | Efecto visual |
| <br/> | Salto de línea | |
| <p> y </p> | Párrafo | |
| <hr size=5 width=20% align=left> | SIZE WIDTH ALIGN |
- Negrita
Existen dos etiquetas que harán que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es indiferente. Puedes usar la que prefieras.
La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un ejemplo:
Este palabra la vamos a poner en <b>negrita</b> y esta otra <strong>también</strong>
Este palabra la vamos a poner en negrita y esta otra también
- Cursiva
Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por supuesto cerrarla con la etiqueta </i>).
También podemos utilizar la etiqueta <em>. Como en el caso de la negrita, es indiferente el uso de una u otra. Aquí os dejo un ejemplo:
Este palabra la vamos a poner en <i>cursiva</i> y esta otra <em>también</em>
Este palabra la vamos a poner en cursiva y esta otra también
- Subrayado
Si queremos que la palabra o el texto quede subrayado, deberemos rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta. O sea, </u>. Así subrayaríamos una frase importante:
<u>Así subrayaríamos una frase importante</u>
Así subrayaríamos una frase importante
- Lista numerada
<ol type=”1” start=”10”>
<li> España </li>
<li> Francia </li>
<li> Italia </li>
<li> Portugal </li>
</ol>
<li> España </li>
<li> Francia </li>
<li> Italia </li>
<li> Portugal </li>
</ol>
Donde type es el tipo de lista que puede ser 1; numéricamente, a; letras minúsculas,
A ;letras mayúsculas, i; números romanos minúsculas y I; números romanos en mayúsculas, y start es el numero o valor donde comenzara nuestra lista.
- Lista Numerada
- Primera opción
- Segunda opción
- Tercera opción
Así, las dos listas anteriores se podrían haber creado con:
<html>
<body> <p>Esto es una lista numerada:</p>
<ol>
<li>Primera opción</li>
<li>Segunda opción</li>
<li>Tercera opción</li>
</ol>
<p>y esto es una lista sin numerar:</p>
<ul>
<li>Primera opción</li>
<li>Segunda opción</li>
<li>Tercera opción</li>
</ul>
</body>
</html>
- Estructura básica de una página web.
La estructura básica de una página web es la siguiente:
| <html> <head></head> <body> </body> </html> |
Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas.
La primera <head></head> es la cabecera de la página. Aquí irán cierta información que no es directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior izquierda).
La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página anterior, el siguiente código
| <html> <head> <title>Esto es el título de la página.</title> </head> <body> Hola mundo!<br> <b>Esto es negrita.</b><br> <i>Y esto itálica.</i><br> </body> </html> |
generará el siguiente resultado (abre la página en otra ventana, dale al botón derecho => ver código fuente, y verás así el código HTML de la página):
Observad el título en la parte superior izquierda de la página. Además, dentro de <body></body> distinguimos varias etiquetas:
<br> => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).
<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itálica.
También observamos el código &iaacute; => Esto indica que queremos poner una "i" con acento, es decir, "í". Esto se explicará en un capítulo posterior.
Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>.
- Que va crear la primera página WEB?
¿Cómo?
En la leccion 1 vimos qué se necesita para crear un sitio web: un navegador y el Bloc de notas (o un editor de texto similar). Puesto que estás leyendo esto, lo más probable es que ya tengas abierto el navegador. Lo único que necesitas es abrir otra ventana del navegador de forma que puedas leer este tutorial y veas cómo va quedando tu nuevo sitio web al mismo tiempo.Abre también el Bloc de notas (que se encuentra en el menú de Inicio, Todos los programas, en la sección Accesorios):
¡Y ya estamos listos!
¿Y qué puedo hacer?
Empecemos con algo sencillo. Que te parece una página que diga: "¡Hurra! Esta es mi primera página web." Sigue leyendo y verás qué sencillo es.HTML is sencillo y lógico. El navegador lee el código HTML igual que lo haces tú: de arriba abajo y de izquierda a derecha. Así pues, todo documento HTML empieza con lo que debería aparecer en primer lugar en la página y termina con lo que debería ir en último lugar.
Lo primero que tienes que hacer es decirle al navegador que le "hablarás" usando el lenguaje HTML. Esto se consigue con la etiqueta
<html> (sin sorpresas, ¿no?). Así que antes de hacer cualquier otra cosa, escribe "<html>" en la primera línea del documento creado con el Bloc de notas.Como recordarás de las lecciones anteriores,
<html> es una etiqueta de inicio y tiene que cerrarse con su correspondiente etiqueta de cierre cuando hayas terminado de escribir el código HTML. Así que para no olvidar la etiqueta de cierre del elemento HTML escribe "</html>" un par de líneas más abajo, y entre ambas etiquetas <html> y </html> escribe el resto del documento.Lo siguiente que necesita el documento es una "cabecera", que proporcionará información relativa a este mismo documento, y un "cuerpo" donde se incluirá el contenido del documento. Puesto que HTML es de lo más lógico, la cabecera (es decir, las etiquetas
<head> y </head>) se encuentra encima del cuerpo (o sea, encima de las etiquetas <body> y </body>).El documento debería presentar ahora este aspecto:
<html>
<head>
</head>
<body>
</body>
</html>
Si el documento se parece al del ejemplo anterior, ya has creado tu primer sitio web: un sitio web especialmente aburrido y en modo alguno parecido a lo que soñabas cuando empezaste este tutorial, pero, con todo y con eso, ya es algo que parece un sitio web. El código que acabas de crear te servirá como plantilla básica para todos tus futuros documentos HTML.
Hasta ahora todo va bien, pero ¿cómo añado contenido a mi sitio web?
Como aprendiste anteriormente, todo documento HTML tiene dos partes: un encabezado y un cuerpo. En la sección del encabezado se incluye información sobre la propia página, mientras que el cuerpo contiene la información que constituye la página en sí..Por ejemplo, si quieres poner a la página un título que aparecerá en la barra de títulos del navegador, deberías hacerlo en la sección del encabezado, es decir dentro de las etiquetas "head". El elemento que se usa para el título es
title, o sea, escribe el título de la página entre la etiqueta de inicio <title> y la etiqueta de cierre </title>:<title>Mi primer sitio web</title> <body> y </body>.Como lo prometido es deuda, vamos a conseguir que la página nos diga: "¡Hurra! Este es mi primer sitio web." Este es el texto que queremos transmitir, y, por lo tanto, pertenece a la sección del cuerpo. Así pues, en la sección del cuerpo, escribe lo siguiente:
<p>¡Hurra! Este es mi primer sitio web.</p> <p> es la abreviatura de "párrafo", que es exactamente lo que es: un párrafo de texto.El documento HTML debería tener ahora este aspecto:
<html>
<head>
<title>Mi primer sitio web</title>
</head>
<body>
<p>¡Hurra! Este es mi sitio web.</p>
</body>
</html>
Lo siguiente que hay que hacer es guardarlo en el disco duro y luego abrirlo en el navegador:
- En el Bloc de notas elige "Guardar como..." del menú "Archivo" en el menú principal.
- Elige "Todos los archivos" en la caja "Tipo". Esto es muy importante, pues, de lo contrario, se guardará como documento de texto y no como un documento HTML.
- Ahora guarda el documento como "pagina1.htm" (la terminación ".htm" indica que es un documento HTML; con la terminación ".html" se consigue el mismo resultado. Personalmente, siempre uso ".htm"; tú puedes elegir cualquiera de las dos extensiones, según prefieras). Da igual dónde guardes el documento en el disco duro, siempre que recuerdes dónde lo hiciste para poder recuperarlo con posterioridad.
Ahora pasamos al navegador:
- En el menú principal elige "Abrir" del menú "Archivo".
- Haz clic en el botón "Examinar" de la caja que aparece.
- Ahora localiza el documento HTML y haz clic en "Abrir".
En el navegador debería poder leerse ahora: "¡Hurra! Este es mi primer sitio web." ¡Enhorabuena!
No comments:
Post a Comment