En este tutorial veremos la estructura básica de un documento HTML y vamos a crear nuestra primera página web que será mostrada en el navegador.
El Documento <!DOCTYPE html>
En primer lugar se debe indicar el tipo de documento que se esta creando, en HTML5 es muy sencillo <!DOCTYPE html> (Documento Tipo html).
Esta linea debe ser la primera linea del documento, esta linea en si no es una etiqueta es la declaración del tipo de documento que se esta creando, la cual es la mas importante para que los navegadores web Firefox, Chrome, Opera, Internet Explorer, etc, se den cuenta que tipo de documento es y lo muestren correctamente en la pantalla de los dispositivos ya sean pc, tablets, o celulares.
La etiqueta <html>
Despues de la declaración del tipo de documento, empezamos a construir el documento html, la estructura del documento es de tipo arbol y su raíz son las etiquetas <html> </html>, dentro de estas etiqueta es en donde se escribirá todo el contenido de la pagina.
Todas las etiquetas pueden contener dentro de ellas atributos y los atributos a su vez contienen valores, "esto lo abordaremos con mas detalle mas adelante", la etiqueta <html> solo tiene un atributo que es "lang", este se incorpora a la etiqueta de la siguiente manera en la etiqueta de inicio <html lang="es">.
Y la formula seria de la siguiente manera, "html" es la palabra clave en la etiqueta, "lang" es el atributo y "es", es el valor del atributo, "html" define el formato de la pagina, el atributo "lang" define el lenguaje humano de la pagina y el valor "es" define el lenguaje o idioma de la pagina.
El valor "es" significa el idioma en que se escribirá la pagina en este caso "español", también se puede especificar concretamente el idioma por regiones, ejemplos "en-US" Ingles-Estados Unidos, "en-GB" Ingles-Reino Unido, "es-ES" Español-España, "es-MX" Español-Mexico, "es-AR" Español-Argentina, Etc.
Aunque no es necesario especificar el idioma en la etiqueta html, esto puede ayudar a los buscadores a leer e indexar las paginas correctamente y esto ayuda al posicionamiento de las paginas en los buscadores como Google, Yahoo, Bing, etc.
La Etiqueta <head>
La estructura de árbol del documento html se divide en dos secciones principales, la primer sección se define con las etiquetas <head> </head>, dentro de estas etiquetas se ingresa toda la información de la pagina web, la información general del documento, el titulo de la pagina, la descripción, las meta etiquetas y los archivos externos de css, javascript, etc, esto lo veremos en el siguiente tutorial.
Toda esta información no es mostrada por los navegadores web ha excepción del titulo de la pagina, todo lo demás es información que leen los buscadores para poder indexar y mostrar correctamente la pagina.
La Etiqueta <body>
Siguiendo con la estructura de árbol, la siguiente sección se define con las etiquetas <body> </body>, dentro de estas etiquetas, es en donde se escribe el código o contenido mediante distintas etiquetas que si sera mostrado en los navegadores dentro de las paginas web, tales como texto, vínculos o línks, imágenes, audio, vídeo, etc. etc.
Este es el código de mi primer pagina web.
<!DOCTYPE html>
<html>
<head>
<title>Mi primer Pagina Web</title>
<head/>
<body>
<h1>Mi Primer Titulo</h1>
<p>Mi primer parrafo.</p>
</body>
</html>
<html>
<head>
<title>Mi primer Pagina Web</title>
<head/>
<body>
<h1>Mi Primer Titulo</h1>
<p>Mi primer parrafo.</p>
</body>
</html>
Escribe o copia y pega el código de arriba en tu bloc de notas o en el editor de texto Atom, guárdalo con extensión .html y ábrelo en tu navegador favorito y te aparecerá una imagen similar como la siguiente la cual sera tu primer pagina web, algo sencillo pero que con algunos códigos CSS podría ser mejor, eso lo veremos en los tutoriales CSS3.
NOTAS:
Para guardar el código escrito en atom o el editor de texto que esten usando , vayan al menú principal y den clic en "File" y en las opciones que se les muestran den clic en "Save" (Salvar o Guardar) o presionen las teclas (Control + s).
Para abrir el documento abran la carpeta en donde guardaron su archivo .html y den doble clic sobre el y se les abrirá en el navegador web que tengan como predeterminado en su sistema operativo, o den clic derecho y ábranlo con cualquier navegador web que tengan instalado en su sistema operativo y que ustedes prefieran.
Den clic sobre las imágenes para verlas de tamaño original.
Si todo salio bien ya abran creado su primera página web, con un título y un párrafo y si se fijan en la pestaña superior del navegador encontrarán el título que le hayan puesto a su página, esta es la única información que muestran los navegadores de las etiquetas que van dentro de la sección <head> estas etiquetas las veremos en el siguiente tutorial.
Truco para Atom
Un truco o atajo para escribir mas rápido el código en atom es utilizando la extensión auto completar que trae el editor instalada por defecto, solo funciona cuando el documento ya esta guardado y tiene la extensión .html, se utiliza para auto completar la estructura basica y las etiquetas html no su contenido.
Para auto completar la estructura básica html escriban las primeras letras, por ejemplo ht y les aparecerá un recuadro con la palabra completa html den clic en ella y automáticamente se escribirá la estructura básica html.
Igual les aparecerá con cualquier etiqueta que quieran escribir solo den clic en el nombre de la etiqueta en el recuadro que aparece y se escribirá automáticamente, como les muestro en las siguientes imágenes.
Resumen
- Para definir un documento HTML se utiliza la linea <!DOCTYPE html>.
- La raíz de un documento HTML son las etiquetas <html> </html>.
- La primera sección importante de un documento HTML son las etiquetas <head> </head>.
- La segunda sección importante de un documento HTML son las etiquetas <body> </body>.
- Dentro las etiquetas <head> </head> es donde se encuentra toda la información del documento HTML.
- Dentro las etiquetas <body> </body> es en donde se escribe el código que sera mostrado por los navegadores.
En el siguiente tutorial veremos la información de lo que se debe ingresar dentro de las etiquetas <head> </head> .
Saludos y que estén bien, nos leemos en el siguiente tutorial, hasta la proxima Amigos.
No hay comentarios.:
Publicar un comentario