Related Posts Plugin for WordPress, Blogger...

¿Nos iniciamos con HTML5? (Parte1)

HTML5 (HyperText Markup Language / Lenguaje de marcas de hipertexto, versión 5).

El HTML es el lenguaje que se emplea para el desarrollo de páginas web, darles estructura y contenido.Cuando accedemos a cualquiera de estos documentos, los navegadores interpretan este lenguaje lo muestran.


En el lenguaje HTML se trabaja con "Tags" (etiquetas) que le indican al navegador como deben mostrar cada elemento, imagen, audio, párrafo, menú y todo lo que compone la página web.


Para realizar nuestra primera pagina web utilizaremos el editor de texto Notepad++ , (ojo este editor de texto solo funciona para PC) así que despúes de descargarlo e instalarlo podemos empezar!!!



          -Abrimos nuestro editor de texto y nos encontraremos con esto:


         Por defecto el programa al abrirlo nos crea un documento nuevo, empecemos a trabajar!!! a continuación escribimos todo este texto (que ahora nos parece una rayada pero que poco a poco entenderemos).


         Esto seria la estructura base de nuestra página:




         
<!DOCTYPE html> : es la etiqueta que nos indica que a tipo de documento nos estamos refiriendo, en este caso el tipo de documento es html.

<html>: es la etiqueta de apertura de todo documento y </html> es la etiqueta de cierre y va al final de todo documento.(si nos fijamos en la imagen en este caso en particular tenemos nuestra etiqueta de apertura en la línea nº2 y la de cierre en la linea nº11).

Dentro de la etiqueta <html> irá todo el contenido de nuestra página </html>

<head>: es la etiqueta cabecera( línea nº3). Dentro de esta tenemos <meta charset="UTF-8"/> aquí le estamos indicando al navegador que nuestra página esta en español y contiene caracteres como la "ñ" y acentos.
Dentro de la misma etiqueta "head" tenemos la apertura de la etiqueta <title> (etiqueta de título) en mi caso "Creatics" y cerramos etiqueta </title> .Cerramos la etiqueta </head> ( línea nº6) ya que no colocaremos nada mas dentro de nuestra cabecera.

<body>: es la etiqueta cuerpo, es decir dentro de esta etiqueta es donde desarrollamos todo el contenido de nuestra página y todo lo que estará visible a la persona que acceda a ella. En este momento no tenemos contenido dentro de nuestro cuerpo así que solo tenemos apertura y cierre de la etiqueta <body></body>.

Y como cierre de todo el contenido de nuestra página tenemos </html>.

¿Hasta aquí todo bien?. Espero que si!!!
Nota: los símbolos "menor que" y "mayor que" enmarcan habitualmente la etiqueta de apertura <  >, y </ >, que acotan la etiqueta de cierre (para toda etiqueta de apertura hay una de cierre).

en nuestro caso el contenedor mas grande es la etiqueta <html> (con una apertura y un cierre) y dentro de esta vamos a tener todos los cajones necesarios para la organización de nuestra página.

Bueno ahora viene el momento de guardar nuestro documento, antes de guardarlo, decirles que cuando se trabaja con paginas web tenemos que tener todo muy bien organizado por carpetas, entonces vamos a crear una carpeta en el escritorio con el nombre que deseen como por ejemplo "proyecto1".

A continuación:


  • Archivo-Guardar como
  • En el apartado nombre pondremos index
  • En el apartado tipo buscamos html
  • y le damos guardar.
Y al guardar el documento nuestro archivo quedará de la siguiente manera:



Es un tutorial muy cortito pero mejor ir aprendiendo poco a poco !!! 


No hay comentarios :

Publicar un comentario