Bienvenidos al primer taller de HTML, Aprende HTML con SchmarotzerFliegend #01
Antes de empezar quiero comentar alguna que otra cosa. Lo primero es decir que pienso saltarme toda la información teórica en cuando a autores del lenguaje y tal se refieran. La segunda es que la gente que quiere aprender a programar, sea por el motivo que sea, quiere aprender a programar y no averiguar la pasta de dientes que usaba la quinta persona que aprendió a utilizarlo. Por esos motivos quiero explicar que soy una persona que va al grano, y a pesar de que este taller pueda ser extremadamente largo, espero que os sea de utilidad.
Tenéis la opción de escribir en los comentarios vuestras dudas o agradecimientos y las contestaré en la mayor brevedad que me sea posible. Pues bien, para ir al grano...
¡¡REQUISITOS!!
Bien, para empezar os pido varios requisitos que espero podáis cumplir.
- Conocimiento: Os preguntaréis si es necesario algún requisito para empezar a programar con HTML. Lo cierto es que lo único necesario para entender este taller son ganas de aprender y de adentrarse en este mundo de la programación Web.
- Material: Es aconsejable tener un ordenador a mano, no es necesario crear una página web en el ordenador, pero será necesario para hacer las pruebas y aprender a manejar el lenguaje en su total plenitud. Aun recuerdo mis largas horas de clase programando páginas en un simple folio, que tiempos aquellos!
- Software: En este caso, para gustos los colores. Existen varios programas de pago muy útiles y buenos como son el Microsoft Expressión Web, Frontpage o Dreamweaver por ejemplo. También podéis utilizar programas de Software Libre, hay muchos entre estos como Amaya, Aptana Studio, BlueFish, BlueGriffon, eXe entre otros muchos que pueden existir por Internet. Como puedo no estar seguro de lo que cada uno pueda tener a su disposición, este taller lo llevaré a cabo con el clásico Bloc de Notas. Sí, ese que podéis encontrar en vuestro Windows y que todos hemos utilizado alguna vez.
¡¡TODO LISTO!!
Bien, si habéis leído los requisitos y os veis aptos para continuar, seguidme, en caso contrario, esto seguirá en marcha así que cuando os veáis capaces os espero! =)
Abriremos nuestro Bloc de Notas de cualquiera de las dos siguientes maneras.
Opción 1: Vamos a Inicio, Todos los Programas, Accesorios, Bloc de Notas.
Opción 2: Inicio, Ejecutar (o en su defecto pulsamos las teclas WINDOWS + R), y veremos la siguiente el recuadro de la imagen 1 en el que tendremos que escribir notepad y clicar sobre Aceptar para abrirlo.
Imagen 1
Bien, como ya os he dicho, pulsáis sobre Aceptar y tendréis en vuestra pantalla el clásico Bloc de Notas.
HTML es un lenguaje basado en etiquetas de abre y cierre, <ETIQUETA> y </ETIQUETA>. Como podéis observar, para abrirlo simplemente tenemos que usar los caracteres menor que (<) y mayor que (>), y en su interior la etiqueta deseada. Y a la hora de cerrar las etiquetas, simplemente debemos añadir un slash o barra diagonal (/) después de el carácter "menor que". Lo veremos mejor en la imagen 2.
No os asustéis por la cantidad de etiquetas que aparecen, son las básicas y muy fáciles de aprender. Como habéis comprobado, la etiqueta principal es HTML, y se cierra al final del documento. Dentro de esta, se encuentran las demás. HEAD es la cabecera, y TITLE va dentro de esta por lo que hay que cerrarla antes de cerrar la etiqueta HEAD. La siguiente es la de BODY que viene siendo el cuerpo del documento. Ahora os explico para que sirve cada etiqueta de las que véis.
<HTML> y </HTML> --> Esta marca el inicio y el fin del documento.
<HEAD> y </HEAD> --> Básicamente esta se encarga de adjuntar en su interior la etiqueta <TITLE>.
<TITLE> y </TITLE> --> Esta etiqueta se utiliza para asignarle un nombre a la página. El nombre que contenga esta será el que muestre en el nombre de la pestaña de tu explorador, y será el nombre con el que se guarde la página si alguien la asigna a Mis Favoritos.
<BODY> y </BODY> --> Esta etiqueta define los atributos de la página, como el color de fondo, la imagen de fondo (si tiene alguna), el color de texto, el color de los enlaces, etc... En resumen, esta mostrará la mayor parte del contenido de tu página HTML.
Ahora que sabéis para qué sirve cada etiqueta, copiar ese código en vuestro Bloc de Notas, y guardarlo donde queráis con la extensión .html. Ejemplo: MiPrimeraPáginaWeb.html
Si no guardásemos el archivo con la extensión .html, el archivo no se abriría predeterminadamente con el navegador.
Una vez guardado, lo abrís con vuestro navegador Internet Explorer, Mozilla Firefox, Google Chrome o el que utilicéis. Al abrirlo veréis que en el navegador no se muestra nada, pero en el título de la pestaña veréis el título que le hemos puesto, .: Mi Primera Página Web :.
Bien, llegados a este punto, podemos decir que habéis creado vuestra primera página web escrita en HTML, pero está muy sosa aun, no? Veamos como añadir texto a nuestra web.
Para ello vamos a poner un titular a la página dentro de las etiquetas <BODY> </BODY> de la siguiente manera:
<h1> Bienvenido a la página de SchmarotzerFliegend </h1>
El código debería quedaros como muestro en la Imagen 3:
No hagáis caso del final de las imágenes en las que sale mi nombre, es una simple manera de añadir mi firma, cutre, lo sé =)
Visto el resultado, comprobaréis que el título es grande y en negrita. La H de <h1> proviene de la palabra heading --> encabezamiento, lógico, no?
Hay varios tamaños para encabezar un título y la estructura es la misma con las siguientes variables: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
Haced la prueba y veréis el cambio de unos a otros.
Para separar nuestro titular del resto de la página, añadiremos una línea horizontal normal y corriente, para ello utilizaremos el "comando" <hr>
En este caso no necesitamos cerrarlo por lógica, pero podemos asignarle atributos para hacer la línea de distintas maneras.
En este caso, después de escribir nuestro titular,
<h1> Bienvenido a la página de SchmarotzerFliegend </h1>
vamos a pulsar Intro, y en la siguiente línea escribiremos <hr> para tener un código más limpio y poder visualizarlo mejor mas tarde.
Debería quedar algo como en la imagen 5
Como podéis ver, para gustos los colores, así que, que cada uno le ponga la barra que más le apetezca.
Dentro del cuerpo de la página, "<BODY>", tenemos un par de maneras de hacer saltos de línea dentro del código HTML. Al igual que al escribir una línea horizontal con la etiqueta <HR>, para hacer un salto de línea podemos escribir <BR> o <P> y </P>. Fijaos en ambos ejemplos con las imágenes 7 y 8
Como habréis podido comprobar, el código se ha complicado un poco por motivos obvios. En el primer caso, en la frase "Para crear un salto de línea con las etiquetas <BR> simplemente tenemos que abrirla", habréis visto que salta a la siguiente línea como si del mismo párrafo se tratase. En el caso de la frase "En el caso de utilizar las etiquetas <P> debemos cerrarlas para que surja efecto", ha separado las líneas como si se tratase de un nuevo párrafo.
Depende de cuál se acerque más a vuestra necesidad utilizad una u otra. Muchos os habréis dado cuenta de que en la Imagen 7, en el código, hemos añadido algunos símbolos que no hemos explicado. Eso es porque el código HTML tiene que poseer alguna manera para poder mostrar en pantalla las etiquetas <P>, <HTML> o cualquier otra etiqueta.
Para poder mostrar el símbolo menor que "<" en pantalla, hay que escribir "<" y para poder mostrar en pantalla el símbolo mayor que ">", tendremos que escribir ">".
A continuación os mostraré una serie de caracteres que necesitan de un código específico para poder mostrarlos en pantalla.
Aquí tenéis un listado de los carácteres especiales que utiliza HTML para no confundir caracteres como &, <, >, comillas, etc...
HTML es un lenguaje basado en etiquetas de abre y cierre, <ETIQUETA> y </ETIQUETA>. Como podéis observar, para abrirlo simplemente tenemos que usar los caracteres menor que (<) y mayor que (>), y en su interior la etiqueta deseada. Y a la hora de cerrar las etiquetas, simplemente debemos añadir un slash o barra diagonal (/) después de el carácter "menor que". Lo veremos mejor en la imagen 2.
Imagen 2
No os asustéis por la cantidad de etiquetas que aparecen, son las básicas y muy fáciles de aprender. Como habéis comprobado, la etiqueta principal es HTML, y se cierra al final del documento. Dentro de esta, se encuentran las demás. HEAD es la cabecera, y TITLE va dentro de esta por lo que hay que cerrarla antes de cerrar la etiqueta HEAD. La siguiente es la de BODY que viene siendo el cuerpo del documento. Ahora os explico para que sirve cada etiqueta de las que véis.
<HTML> y </HTML> --> Esta marca el inicio y el fin del documento.
<HEAD> y </HEAD> --> Básicamente esta se encarga de adjuntar en su interior la etiqueta <TITLE>.
<TITLE> y </TITLE> --> Esta etiqueta se utiliza para asignarle un nombre a la página. El nombre que contenga esta será el que muestre en el nombre de la pestaña de tu explorador, y será el nombre con el que se guarde la página si alguien la asigna a Mis Favoritos.
<BODY> y </BODY> --> Esta etiqueta define los atributos de la página, como el color de fondo, la imagen de fondo (si tiene alguna), el color de texto, el color de los enlaces, etc... En resumen, esta mostrará la mayor parte del contenido de tu página HTML.
Ahora que sabéis para qué sirve cada etiqueta, copiar ese código en vuestro Bloc de Notas, y guardarlo donde queráis con la extensión .html. Ejemplo: MiPrimeraPáginaWeb.html
Si no guardásemos el archivo con la extensión .html, el archivo no se abriría predeterminadamente con el navegador.
Una vez guardado, lo abrís con vuestro navegador Internet Explorer, Mozilla Firefox, Google Chrome o el que utilicéis. Al abrirlo veréis que en el navegador no se muestra nada, pero en el título de la pestaña veréis el título que le hemos puesto, .: Mi Primera Página Web :.
Bien, llegados a este punto, podemos decir que habéis creado vuestra primera página web escrita en HTML, pero está muy sosa aun, no? Veamos como añadir texto a nuestra web.
Para ello vamos a poner un titular a la página dentro de las etiquetas <BODY> </BODY> de la siguiente manera:
<h1> Bienvenido a la página de SchmarotzerFliegend </h1>
El código debería quedaros como muestro en la Imagen 3:
Imagen 3
Si guardáis el archivo HTML y lo comprobáis en vuestro navegador, observaréis algo como la imagen 4. Para guardar el archivo, recordad la extensión .html, aunque si trabajáis sobre el mismo documento basta con darle simplemente a Guardar en vez de a Guardar Como. 
Imagen 4
No hagáis caso del final de las imágenes en las que sale mi nombre, es una simple manera de añadir mi firma, cutre, lo sé =)
Visto el resultado, comprobaréis que el título es grande y en negrita. La H de <h1> proviene de la palabra heading --> encabezamiento, lógico, no?
Hay varios tamaños para encabezar un título y la estructura es la misma con las siguientes variables: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
Haced la prueba y veréis el cambio de unos a otros.
Para separar nuestro titular del resto de la página, añadiremos una línea horizontal normal y corriente, para ello utilizaremos el "comando" <hr>
En este caso no necesitamos cerrarlo por lógica, pero podemos asignarle atributos para hacer la línea de distintas maneras.
En este caso, después de escribir nuestro titular,
<h1> Bienvenido a la página de SchmarotzerFliegend </h1>
vamos a pulsar Intro, y en la siguiente línea escribiremos <hr> para tener un código más limpio y poder visualizarlo mejor mas tarde.
Debería quedar algo como en la imagen 5
Imagen 5
Como podréis observar si volvéis a guardar el archivo, en vuestro navegador, debajo del titular aparecerá una línea horizontal gris, normal y corriente.
Si queremos darle distintos tamaños, no tenemos nada mas que modificar la etiqueta <hr> asignandole el atributo SIZE seguido de un "=" y el número de tamaño que queramos darle. Este número no le dice otra cosa más que el tamaño de la línea, para ello utilizaremos cualquiera de las siguientes posibilidades:
<hr size=1>
<hr size=2>
<hr size=3>
<hr size=4>
<hr size=5>
<hr size=6>
<hr size=7>
<hr size=8>
<hr size=9>
<hr size=10>
<hr size=80>
Es cuestión de encontrar la que mas se acerque a tus necesidades. Podéis añadir el número que queráis para el grosor de la línea, no tiene por qué ser uno de los que he puesto yo. Para que veáis el ejemplo os muestro el resultado de esas 11 líneas en el navegador mediante la imagen 6
Imagen 6
Dentro del cuerpo de la página, "<BODY>", tenemos un par de maneras de hacer saltos de línea dentro del código HTML. Al igual que al escribir una línea horizontal con la etiqueta <HR>, para hacer un salto de línea podemos escribir <BR> o <P> y </P>. Fijaos en ambos ejemplos con las imágenes 7 y 8
Imagen 7
Imagen 8
Depende de cuál se acerque más a vuestra necesidad utilizad una u otra. Muchos os habréis dado cuenta de que en la Imagen 7, en el código, hemos añadido algunos símbolos que no hemos explicado. Eso es porque el código HTML tiene que poseer alguna manera para poder mostrar en pantalla las etiquetas <P>, <HTML> o cualquier otra etiqueta.
Para poder mostrar el símbolo menor que "<" en pantalla, hay que escribir "<" y para poder mostrar en pantalla el símbolo mayor que ">", tendremos que escribir ">".
A continuación os mostraré una serie de caracteres que necesitan de un código específico para poder mostrarlos en pantalla.
Aquí tenéis un listado de los carácteres especiales que utiliza HTML para no confundir caracteres como &, <, >, comillas, etc...
| < | < |
| & | & |
| > | > |
| " | " |
| Á | Á |
| É | É |
| Í | Í |
| Ó | Ó |
| Ú | Ú |
| á | á |
| é | é |
| í | í |
| ó | ó |
| ú | ú |
| Ä | Ä |
| Ë | Ë |
| Ï | Ï |
| Ö | Ö |
| Ü | Ü |
| ä | ä |
| ë | ë |
| ï | ï |
| ö | ö |
| ü | ü |
| Ã | Ã |
| Ñ | Ñ |
| Õ | Õ |
| ã | ã |
| ñ | ñ |
| õ | õ |
| Ø | Ø |
| ø | ø |
| Ð | Ð |
| ð | ð |
| ß | ß |
| À | À |
| È | È |
| Ì | Ì |
| Ò | Ò |
| Ù | Ù |
| à | à |
| è | è |
| ì | ì |
| ò | ò |
| ù | ù |
| Â | Â |
| Ê | Ê |
| Î | Î |
| Ô | Ô |
| Û | Û |
| â | â |
| ê | ê |
| î | î |
| ô | ô |
| û | û |
| å | å |
| Å | Å |
| Ç | Ç |
| ç | ç |
| Ý | Ý |
| ý | ý |
| ÿ | ÿ |
| Þ | Þ |
| þ | þ |
| Æ | Æ |
| æ | æ |
| ¼ | ¼ |
| ½ | ½ |
| ¾ | ¾ |
| © | © |
| ® | ® |
| ª | ª |
| ² | ² |
| ³ | ³ |
| ¹ | ¹ |
| ¯ | ¯ |
| µ | µ |
| ¶ | ¶ |
| · | · |
| ° | ° |
| ¸ | ¸ |
| ¿ | ¿ |
| | |
| ¡ | ¡ |
| £ | £ |
| ¥ | ¥ |
| § | § |
| ¤ | ¤ |
| ¦ | ¦ |
| « | « |
| ¬ | ¬ |
| ­ | |
| º | º |
| ´ | ´ |
| ¨ | ¨ |
| ± | ± |
| » | » |
| × | × |
| ÷ | ÷ |
| “ | “ |
| ” | ” |
| Π| Π|
| ‡ | ‡ |
| ¢ | ¢ |
| € | € |
| ™ | ™ |
| ‰ | ‰ |
| ƒ | ƒ |
| † | † |
Puede que el tema de hoy se os haya hecho corto, o puede que no, pero he preferido dejar por hoy esto, y que me planteéis vuestras dudas si es que las tenéis para no repetir posibles errores en una siguiente lección.
Así que practicar el tema, empaparos con las etiquetas y os espero en el próximo post de este hilo que será algo más pesado por la cantidad de cosas que hay que explicar en él.
Un saludo y ánimo!!
Entradas
2 comentarios:
cada cuanto irás añadiendo nuevos temas? es interesante y facil d entender, me gustaria seguir el taller, gracias por el trabajo :)
Hola Joana!
Pues a poder ser cada semana o en cuanto me sea posible, pero intentaré cubrir ese margen. Muchas gracias por el interés ^^
Publicar un comentario