Curso HTML Parte 1 – Lo básico
Julio 18, 2008Pues este es un pequeño tutorial introductorio de HTML. Se asume que no sabes nada de HTML pero que posees las habilidades básicas de computación.
El HTML, o Hypertext Markup Language, es el lenguaje de marcado mas usado mundialmente para construir páginas web. Quiza hayas escuchado antes de el o no, pero lo mas seguro es que la mayoria de páginas que has visitado, hayan sido construidas con el. El HTML se encarga de organizar el contenido, y las CSS(Cascading Style Sheets u Hojas de Estilo en Cascada) se encargan de su formato, o como este se ve. Por el momento no veremos CSS, asi que no te preocupes mucho por eso.
Ahora sería un buen momento para llenarte la pantalla de la historia del HTML, como funciona, estándares, reglas, etc. PERO! realmente yo creo que para comenzar a aprender HTML, se tiene que practicar, ensuciarte un poco las manos, por eso dejaremos las cosas técnicas para despues. Asi que, comenzemos.
Tu Primera Página
Los archivos HTML no son mas que simples archivos de texto, asi que para comenzar solamente necesitas un editor de texto……increíble no?. Si eres usuario de Windows puedes usar el Notepad, para los usuarios de Linux, cualquier editor de texto servirá: Gedit, Kedit, etc.
Corre tu editor de elección y escribe algo sencillo que tu quieras o algo como esto:
Mi primera pagina web
Un texto sencillo bastara. Ahora crea un folder en cualquier lugar que desees, y llamalo “html”. Guarda tu archivo como “primerapagina.html”, pues ten cuidado porque algunos editores, como Notepad, guardan con la extension “.txt” asi que es mejor asegurarse de escribir la extensión al final.
Para ver tu archivo solamente necesitas un navegador web, como el Firefox o el Internet Explorer, ahora simplemente abre tu navegador y para ver tu página puedes hacer lo siguiente:
- Archivo->Abrir Archivo->Busca la carpeta donde guardaste tu archivo->Abrir
- En la barra de dirección, escribe la dirección donde se encuentra tu pagina, ej: “C:\html\primerapagina.html”.
- O simplemente un doble click la abrira en tu navegador predeterminado.
Y como arte de magia, ahí esta, tu primera página web, date unas palmadas en la espalda………..ahora sigue leyendo.
Etiquetas
HTML podrá ser todo texto, pero aun asi existen algunas características para crear un documento HTML válido. La estructura del HTML incluye las llamadas etiquetas que encierran al contenido para darle algún significado. Cada etiqueta comienza con un símbolo de menor que “<” y se cierra con el símbolo de mayor que “>”.
Cambia tu texto para que se vea algo asi:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<body>
Mi primera pagina
</body>
</html>
Ahora guarda tu página y refresca tu navegador. No hay ningun cambio notable pero eso esta bien, recuerda HTML es solamente para el estructurar el contenido, no como este se ve.
Analicemos las etiquetas:
La primera linea del !DOCTYPE es para decirle a tu navegador que clase de documento esta tratando, pero eso es un aspecto mas técnico, asi que por ahora no entraremos en detalle, solo recuerda de meter esa línea siempre en tu documento.
La etiqueta html es importante, le dice a tu navegador que todo lo que este dentro de la etiqueta es parte de un documento HTML. Lo que se encuentra entre las etiquetas body es el cuerpo del contenido y es lo que se mostrará en tu navegador.
Por lo tanto, todo aquello que se encuentre adentro de una etiqueta se ve afectado por ella.
Cada etiqueta posee una etiqueta correspondiente a su apertura y a su cierre, por ejemplo: “<html></html>“. Aunque las versiones anteriores de HTML permitían dejar las etiquetas abiertas, los estándares de ahora requieren que todas las etiquetas se cierren. Asi que, como consejo, SIEMPRE CIERRA TUS ETIQUETAS.
Hay etiquetas que no se cierran, por ejemplo la etiqueta de salto de línea <br/>, que se cierran a ellas mismas.
Las etiquetas tambien poseen lo que se conoce como atributos, que son parametros extras de las etiquetas, se ven algo asi: ‘<etiqueta1 attribute=“valor”></etiqueta1>‘. Los atributos siempre van entre comillas dobles. En otro tutorial hablaremos de ellos.
De esto podemos decir que cada etiqueta nos dan el principio y fin de un “elemento”, que son las piezas que conforman nuestra página.
Pero a nuestra página le falta algo muy esencial no? El título. Asi que modifica tu documento agregando la etiqueta head donde se muestra:
<html>
<head>
<title>Mi primera pagina</title>
</head>
<body>
…
Si te fijas ademas de la etiqueta head introducimos la etiqueta title la cual nos permite mostrar el título. El elemento head, le da informacion sobre la pagina al navegador. Existen otra información ademas del titulo, que se veran en cursos mas adelante.
Por ahora recarga tu página y veras que tu título aparece en tu navegador.
Párrafos y Encabezados.
Pues una página sin contenido no seria de mucho uso verdad?. Asi que agrega unas cuantas lineas de texto dentro del body de tu archivo, por ejemplo:
…
<body>
Esta es mi primera pagina.
Verdad que es muy genial?
</body>
…
Guarda tu documento, refresca tu navegador y poof!……lo mas probable es que tu texto no salió como lo esperabas. Ahora te preguntaras, “Porque?”. Pues los navegadores no leen el texto que escribes sino las etiquetas dentro de las cuales esta contenido tu texto. Si quieres separar por lineas tu texto, tienes que especificarle al navegador lo que quieres hacer, para eso ocupamos la etiqueta de párrafo <p>
<p>Esta es mi primera pagina.</p>
<p>Verdad que es muy genial?</p>
Tambien puedes separar tu texto con la etiqueta <br/>, salto de línea, aunque es preferible separar bloques de texto con párrafos.
Si lo que quieres es crear un título o encabezado para tu texto, utiliza las etiquetas de heading. Estas etiquetas van desde h1 a h6, siendo h1 el de mayor prioridad, por ende mas énfasis, y h6 el de menor importancia. Prueba en tu documento incluir estas etiquetas:
…
<body>
<h1>Mi Pagina Genial</h1>
<p>Esta es mi primera pagina.</p>
<p>Verdad que es muy genial?</p>
<h2>Porque es genial mi pagina?</h2>
<p>Porque la escribi yo mismo</p>
</body>
…
Si notas utilizamos las etiquetas en orden, de mayor a menor, se crearon con esa idea en mente.
Como una pequeña nota, cabe decir que la etiqueta h1 solo deberia ser usada 1 vez, ya que es la principal, pero las demas se pueden usar cuantas veces desees, pero teniendo en cuenta el orden.
Si te fijas en los títulos, están en negrita. Si deseas poner en negrita, o énfasis, tu texto utiliza la etiqueta <em> o <strong>.
Bueno con eso finalizo la primera parte de nuestro curso de principiantes de HTML, en la proxima entrega veremos mas temas como lo son las listas, tablas, enlaces, etc. Recuerda practica y edita el codigo como se te ocurra para que te hagas una idea de lo que hace cada etiqueta. No tengas miedo, que no hay mejor forma de aprender que la prueba y error. Hasta la proxima!
Qué concisa esta explicación y muy básica y fundamental para comenzar a familiarizarse con la creación de páginas web. Muy bonito artículo.