LECCION 1

Así es como comienza una página con lenguaje de programación web html5 con inclusiones de CSS

Lo primero que tenemos que hacer, es descargar un programa para escribir html5, se dice que es un programa compilador de lenguaje. Podemos escribir sin mas en nuestro blog de notas, a modo de prueba podeis hacerlo al final de la lección, abrir una nota, escribir algo y cuando os pida guardar, esto es importante, tanto en el blog de notas como en la aplicacion que descargueis, teneis que guardar siempre el documento con la extensión .html y en el blog de notas cambiais el formato del documento en lugar de txt a todos los archivos, en el compilador buscais la opción html... El programa que os recomiendo, es el que me mostraron a mi, y despues de haber probado varios, realmente es el que mas me gusta, quizás porque me acostumbre a el, notepad++, no os explico como descargar... porque esto es algo sencillo, no tiene propagandas, buscar como cambiar el idioma a castellano... y jugar un poco con todas las opciones del programa para ver todo lo que puede hacer. Importante saberlo, aúnque en el programa ya baja por defecto, en lenguaje habeis de configurar a utf-8 SIN BOM, esto es importante, porque vosotros vais a escribir en este idioma, con lo que el programa tiene que reconocer el idioma, si quereis profundizar un poco mas en esto, ya sabeis, wikipedia, hay lenguajes latin que se corresponde con una numeración, es interesante saber siempre de que se trata, aunque no lo vayais a utilizar. Dicho todo esto, creo que esencial no se me queda nada en el tintero, vamos a comenzar.

Se abre con el símbolo de menor que y seguido de signo de cerrar admiración < ! y se continúa con mayúsculas con la palabra DOCTYPE, después se escribe html en minúsculas, esto es para html5, para lenguajes de html anteriores, habría que cambiar algunos datos después de la palabra DOCTYPE, al final de los metadatos se cierra con signo de mayor que >, y con esto habriríamos una página de documento html.

En un párrafo siguiente, se abre nuevamente con el símbolo de menor que <, seguido de html y se cierra con signo de mayor que, como se muestra a continuación, pero sin espacios, < html >, a continuación, comenzamos con la cabecera, aquí podremos indicar el título de la página, la sintaxis de html, todo esto en meta etiquetas, concretamente, usamos una etiqueta que ha de ir acorde a nuestro lenguaje html5, y esto es utf-8, con lo que la cabecera de la página quedaría de la siguiente forma.

Después vendría el título definido de esta forma < title > y para cerrar < / title >

< !DOCTYPE html >

< html >

< head > (esto define la cabecera)

< meta charset="utf-8" >

< title > CHULETA PERSONAL DE LENGUAJE HTML5 Y ALGO DE LENGUAJE CSS < / title >

A continuación, añadimos todas las etiquetas metas que queramos y no solo queramos, sino que nos sirvan para declarar términos de busqueda, autor de la página......., y después podríamos cerrar el documento con las etiquetas de head y html. A continuación añadimos etiquetas y explicamos para que sirve cada una de ellas y cerramos el documento.

< meta name = "description" content = "Y ahora aquí vendría la descripción de la página para los buscadores">

< meta name = "keywords" content = "Ahora aquí pondríamos palabras clave para los buscadores">

< meta name = "author" content = "Aquí indicaríamos el nombre del autor de la página, Daniel Sánchez Aguilar">

< meta name = "classification" content = "Aquí palabras clave para la clasificación de la página en los buscadores">

< meta name = "generator" content = "Programa utilizado para crear la página, Notepad++">

< meta http-equiv = "Refresh"content = "30"> Esto refresca la página cada 30 segundos.

< meta http-equiv = "Refresh"content = "5; URL"> Esto te redirige a otra página a los 5 segundos de entrar.

< style > Delimita definición de estilos, colores, bordes, imágenes de fondo... y esto es una extensión CSS.< / style>

< script >Incluir lenguaje script, ejemplo: < script tipe = "text/javascript">(Aquí iría ahora el código), < / script>

< / head >

< / html >

Y hasta aquí, salvando la etiqueta final de html, vendría siendo lo que es el encabezamiento.

Ahora, entre la etiqueta de final de la cabecera, que es la etiqueta < / head>, y la etiqueta final de documento que es la de < / html>, tendríamos lo que viene siendo el cuerpo de la página, que viene delimitado por la etiqueta < body > y con su etiqueta final de < / body>, y dentro de la etiqueta del cuerpo, tenemos muchas mas posibilidades de etiquetas, como podrían ser listas ordenadas o desordenadas, links, tablas y otras muchas etiquetas que veremos en la siguiente lección.