Comenzamos con la definición de HTML...
HTML es un lenguaje de marcas basado en el uso de etiquetas y utilizado para describir páginas web. Sus principales características son:
|
En cuanto a las etiquetas, éstas están formadas por palabras entre los signos menor que y mayor que. Por ejemplo <html>, <table>, <p>, <b>, <div>... Generalmente son utilizadas en parejas: la primera recibe el nombre de etiquieta de inicio y se escribe tal y como hemos visto antes; la segunda etiqueta es la de finalización y el nombre entre los signos va precedido por "/". Veamos algún ejemplo:
<html> ...... </html> <body> .... </body>
Los navegadores web no mostrarán las etiquetas HTML, únicamente las interpretarán para saber cuál es la estructura de la página web y qué hacer con los elementos contenidos entre las etiquetas.
Crear una página web es realmente fácil. Con el bloc de notas y una serie de convenciones que explicaremos a continuación podremos crear algo sencillo. También podremos hacer páginas web con Eclipse, pero ya llegaremos a eso en futuras entregas. Veamos un ejemplo de página web...
Tal y como se puede observar, el texto que hemos escrito en el bloc de notas (es necesario guardar el archivo con extensión .html para que tu navegador lo abra automáticamente) está relacionado con el texto que muestra Internet Explorer, pero no es ni mucho menos el mismo. Ya estudiaremos las etiquetas principales de HTML en futuros posts. En este simplemente quiero que os deis cuenta de que el navegador, en este caso Internet Explorer, interpreta las etiquetas HTML para mostrar el elemento HTML (lo que hay entre las etiquetas) de una forma u de otra.
- <!DOCTYPE> se utiliza para especificar que el archivo que estamos editando con el bloc de notas es una página web. Tiene que ir siempre en primer lugar y no tiene etiqueta de cierre. Puede parecer complicado pero siempre tendremos que poner lo mismo. No hace falta ni que os lo aprendáis, con copiar y pegar... listo. En función de lo que pongamos a continuación, la versión HTML será una u otra
- Para HTML 5 bastaría con usar:
<!DOCTYPE html>
- Para HTML 4.1 tendríamos que introducir lo que aparece en el ejemplo, es decir:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- Para XHTML 1.0 tendremos que poner:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <body> indica que cualquier cosa entre esta etiqueta y la de cierre, esto es </body>, debe de ser mostrada en los navegadores web. Me explico, no debe de ser mostrada textualmente. Es decir, las etiquetas y elementos que cuelguen de <body> no serán mostrados, serán interpretados por el navegador y su contenido tendrá que ser visualizado por el navegador.
- <hX> con X un número entre 1 y 6 ambos inclusive. Sirve para insertar un título en la página. La idea es que estas etiquetas sirvan para denotar una jerarquía. El título h1 aparecerá más grande que el h2 y así sucesivamente hasta el h6.
- <p> define un párrafo de texto.
Bueno aparte de todas estas etiquetas, en siguientes entradas veremos cómo es la estructura básica de una página web y las etiquetas que podemos utilizar para definirla. También veremos etiquetas con las que crear tablas, etiquetas con las que modificar el formato del texto y muchas cosas más :P
| OBJETIVOS | Definir e introducir HTML. |
| DIFICULTAD | Fácil |
| REQUISITOS | --- |
| CONSEJOS | Sino entendéis algo, preguntad o toquetead hasta que deis con la solución. Es realmente sencillo hacer páginas web, por lo menos páginas web estáticas y simples. |
| PRÓXIMAMENTE | Veremos las etiquetas más útiles y conocidas de HTML. Veremos cómo añadir fragmentos de HTML a nuestro blog. Introduciremos alguna de las herramientas más utilizadas para crear páginas web. |
no se ve muy bien lo que hay que introducir junto a ...
ResponderEliminarme imagino que te refieras a la etiqueta !DOCTYPE. Tienes razón, se me había pasado corregirlo. Gracias por el aviso y un saludo :P
Eliminar