diegoofernandez
Beta
Redactor
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
SOBRE ESTE CURSO
Hace unos meses he decidido, dejar de programar profesionalmente por periodo de tiempo indefinido, pero para mantenerme un poco en "forma" y por que creo que el conocimiento debe compartirse, he decidido realizar esta serie de tutoriales, ojalá a alguien le sea de utilidad o los pueda aprovechar.
INDICE:
Creando una página simple:
El siguiente ejemplo de código HTML, crea un sitio web básico, pero el cual es fundamental para entender conceptos básicos del lenguaje.
En nuestro editor de texto creamos un archivo y lo guardamos con la extensión .html, ejemplo:
sitiobasico.html
Esta extensión es necesaria para que nuestro navegador pueda leer el archivo. A continuación de haber guardado el archivo con su extensión, escribimos línea a línea el siguiente código:
Te invito a guardar este archivo y abrirlo en el navegador para ver su resultado.
Vamos a desglosar cada una de las etiquetas de nuestro sitio simple para aprender la utilidad de cada una.
LÍNEA 1:
Esta línea de código tiene la responsabilidad de indicarle al navegador la versión y tipo de documento está leyendo, en este caso le indicamos que estamos creando un documento de tipo html5. Esta línea siempre irá escrita antes que el resto. Hablaremos más sobre el ‘doctype’ del documento en un momento.
LÍNEA 2:
Esta etiqueta es el padre de todas las demás etiquetas que escribiremos, aquí indicamos que comienza nuestro sitio web, es decir, la etiqueta html abre la página. Ten presente que ningún contenido puede ir antes de esta etiqueta a excepción del doctype. Por supuesto nada puede ir después de la etiqueta html de cierre (</html>). Vemos que también indicamos el atributo: lang=”es”, hay dos cosas importantes aquí a tener en cuenta, la primera es reconocer y recordar la sintaxis de como se escribe un atributo de etiqueta en html, y como puedes ver no tiene nada de complicado, simplemente indicamos el nombre del atributo (lang en este caso) seguido del signo de igualdad (=) y entre comillas (que pueden ser dobles o simples) el valor del atributo. Y la segunda es recordar para que funciona este atributo, que tiene el fin de declarar el idioma principal en el cual mostrará contenido la página, en este caso al darle el valor “es” le decimos que el contenido estará en el idioma español.
LÍNEA 3:
Esta etiqueta abre la sección de encabezado de nuestro documento, esta sección es muy importante, pero puede dar lugar a ciertas confusiones, y por lo tanto hay que tener el concepto solido sobre qué tipo de información y para quien corresponde esa información que añadiremos en el encabezado de nuestro documento html.
Pero primero “eliminemos” el posible error de interpretación:
El encabezado de nuestro documento html NO es la cabecera de nuestro sitio web, ¿de qué va esto? La cabecera de nuestra web siempre será la que contenga el slidershow de imágenes principal, el titular de una noticia, el menú de navegación, el formulario de búsqueda, el logo de nuestro sitio, resumiendo, la cabecera de nuestra web es toda aquella información visual que el usuario puede comprender y ver en la parte superior del diseño de nuestra web, y la cabecera de nuestro documento HTML ES OTRA COSA TOTALMENTE DISTINTA.
La cabecera del documento HTML que se abre con la etiqueta <head> nunca mostrará un resultado en pantalla al usuario, y esto se debe a que esta parte de información de nuestro documento está preparada para brindarle a servicios externos y ajenos a nuestra web que es lo que debe hacer y cómo debe tratar nuestro sitio. Para hacer más entendible este concepto pongamos el siguiente ejemplo:
Yo quiero que cuando mi documento html se cargue, el navegador (un servicio ajeno a nuestra web) cargue un archivo extra, como puede ser una hoja de estilos, un script, tipografías, etc. Bien, si quiero que el navegador haga eso ¿cómo y en donde se lo indico? Pues en la cabecera de nuestro documento HTML, por eso es importantísima la información dentro de las etiquetas <head></head>, por que serán el espacio donde brindaremos información e indicaremos a los navegadores y otros servicios, que debe hacer con nuestro documento HTML.
Espero que el concepto haya quedado claro, continuemos.
LÍNEA 4:
La etiqueta <meta> es una etiqueta de autocierre, que como vimos en clases anteriores, esto significaba que no llevaban una etiqueta de cierre correspondiente. Esta etiqueta se encarga de los metadatos del documento.
Ahora, ¿Qué es un metadato?
La definición de metadatos más concreta es que: los metadatos son “datos acerca de datos”, ¿raro palabrerío no? Esto de datos acerca de datos significa en nuestro caso que, la etiqueta <meta> le brindara al navegador información (datos) sobre nuestro documento HTML, y si vemos que en este caso la misma lleva el atributo: charset=”UTF-8”, debemos saber que este atributo le dice al navegador el tipo de codificación que tendrán nuestros caracteres a lo largo del documento HTML. ¿Pero qué embrollo es este? Nosotros como desarrolladores tenemos que especificar siempre el tipo de codificación de nuestra aplicación / sitio web. Y eso lo hacemos con la etiqueta <meta> y el atributo: charset.
¿Por qué es necesario informar sobre la codificación? Simplemente por los caracteres especiales, ya que por defecto los navegadores manejan una codificación de caracteres especifica del idioma inglés, y por lo tanto si no indicamos nada los navegadores no mostrarán correctamente los caracteres como las tildes, la virgulilla de la letra ñ y demás caracteres y símbolos que no son propios del inglés.
Como vemos, este tipo de elemento es útil para servicios ajenos a nuestro sitio, como lo es el navegador, y por eso la etiqueta <meta> va dentro de las etiquetas <head></head>, ya que dentro de ellas delimitamos la información para servicios externos.
LÍNEA 5:
En muchas ocasiones usaremos la etiqueta ‘meta’ con dos atributos, los cuales son ‘name’ y ‘content’. Lo que hacen estos dos atributos juntos es actuar como uno conjunto de datos organizados como nombre y valor, donde en ‘name’ pondremos el tipo de metadato que queremos crear y en ‘content’ el valor de ese tipo de metadato creado.
En este caso, con el atributo ‘name’le indicamos que creamos el metadato ‘viewport’. ¿Y para que sirve esto? El viewport será una de las etiquetas imprescindibles para que nuestro sitio web responsive, es decir, nuestros sitios web en celulares y dispositivos móviles sea interpretado correctamente. El viewport corresponde al área que esta disponible en la pantalla del navegador.
Con el primer valor dentro de ‘content’: width=device-width, le decimos que en dispositivos móviles, el ancho de nuestro diseño será el mismo que el de la pantalla. Luego con: ‘initial-scale=1.0’, indicamos que se aplique la escala 1:1, es decir, el usuario no podrá aplicar ningún zoom que pueda llegar a romper el diseño.
LÍNEA 6:
En esta línea incluimos otro metadatos, y el atributo ‘http-equiv’ aporta información sobre los encabezados de respuesta (esto lo veremos mucho más adelante); pero en este caso específico, lo que hacemos es agregar al explorador “Edge” de Microsoft como una vista de compatibilidad. Es una buena práctica, pero si lo deseas puedes no incluir esta línea en tu código.
LÍNEA 7:
Esta etiqueta es muy sencilla de comprender, y además, la utilizarás siempre. La etiqueta ‘title’ se encarga de mostrar el título en la pestaña del navegador, y el texto que incluiremos dentro de ella es lo que se mostrará, en este caso si abrimos este archivo en el navegador, la etiqueta ‘title’ mostrará lo siguiente:
LÍNEA 8:
Cerramos simplemente la cabecera de nuestro documento.
LÍNEA 9:
Body en español significa cuerpo, y una forma fácil de recordar cuando colocar esta etiqueta obligatoria, es darse cuenta que, luego de cerrar la “cabeza”, es decir, la cabecera de nuestro documento html, escribimos su cuerpo.
Aquí es donde “arranca” lo interesante, ya que todo lo que coloques dentro de las etiquetas de apertura y cierre <body>…</body> podrás verlo en pantalla en tu navegador. Cada elemento que crees, podrás verlo en pantalla y entender su uso y los estilos por defecto que el navegador le da al mismo. Por el momento, la etiqueta ‘body’ no lleva atributos y pareciera no tener nada de especial, pero su importancia esta en lo que coloquemos dentro de ella.
LÍNEA 10:
En esta línea creamos un titular, o encabeza, llamarlo de ambas manera es correcto. Este encabezado que creamos es el de mayor jerarquía, ya que como aprenderás más adelante hay distintos tipos de jerarquías de titulares/encabezados. El navegador, por defecto, le da un estilo en negrita y tamaño de fuente más grande que la de un párrafo normal.
LÍNEA 11:
En esta línea utilizamos la etiqueta ‘p’, esta etiqueta crea un párrafo, y el navegador entiende que todo el texto que este dentro de las mismas, deberá tratarlo como un párrafo.
LÍNEA 12:
LÍNEA 13:
Cerramos nuestro documento html y ya no podremos escribir nada fuera luego de esta etiqueta. Con esta etiqueta el navegador deja de leer nuestro documento.
Si abrimos este documento en nuestro navegador obtendremos el siguiente resultado:
Hace unos meses he decidido, dejar de programar profesionalmente por periodo de tiempo indefinido, pero para mantenerme un poco en "forma" y por que creo que el conocimiento debe compartirse, he decidido realizar esta serie de tutoriales, ojalá a alguien le sea de utilidad o los pueda aprovechar.
INDICE:
Creando una página simple:
El siguiente ejemplo de código HTML, crea un sitio web básico, pero el cual es fundamental para entender conceptos básicos del lenguaje.
En nuestro editor de texto creamos un archivo y lo guardamos con la extensión .html, ejemplo:
sitiobasico.html
Esta extensión es necesaria para que nuestro navegador pueda leer el archivo. A continuación de haber guardado el archivo con su extensión, escribimos línea a línea el siguiente código:
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Primer sitio básico</title>
</head>
<body>
<h1>¡Hola Mundo!</h1>
<p>Este es mi primer sitio web.</p>
</body>
</html>Te invito a guardar este archivo y abrirlo en el navegador para ver su resultado.
Vamos a desglosar cada una de las etiquetas de nuestro sitio simple para aprender la utilidad de cada una.
LÍNEA 1:
HTML:
<!DOCTYPE html>Esta línea de código tiene la responsabilidad de indicarle al navegador la versión y tipo de documento está leyendo, en este caso le indicamos que estamos creando un documento de tipo html5. Esta línea siempre irá escrita antes que el resto. Hablaremos más sobre el ‘doctype’ del documento en un momento.
LÍNEA 2:
HTML:
<html lang="es">Esta etiqueta es el padre de todas las demás etiquetas que escribiremos, aquí indicamos que comienza nuestro sitio web, es decir, la etiqueta html abre la página. Ten presente que ningún contenido puede ir antes de esta etiqueta a excepción del doctype. Por supuesto nada puede ir después de la etiqueta html de cierre (</html>). Vemos que también indicamos el atributo: lang=”es”, hay dos cosas importantes aquí a tener en cuenta, la primera es reconocer y recordar la sintaxis de como se escribe un atributo de etiqueta en html, y como puedes ver no tiene nada de complicado, simplemente indicamos el nombre del atributo (lang en este caso) seguido del signo de igualdad (=) y entre comillas (que pueden ser dobles o simples) el valor del atributo. Y la segunda es recordar para que funciona este atributo, que tiene el fin de declarar el idioma principal en el cual mostrará contenido la página, en este caso al darle el valor “es” le decimos que el contenido estará en el idioma español.
LÍNEA 3:
HTML:
<head>Esta etiqueta abre la sección de encabezado de nuestro documento, esta sección es muy importante, pero puede dar lugar a ciertas confusiones, y por lo tanto hay que tener el concepto solido sobre qué tipo de información y para quien corresponde esa información que añadiremos en el encabezado de nuestro documento html.
Pero primero “eliminemos” el posible error de interpretación:
El encabezado de nuestro documento html NO es la cabecera de nuestro sitio web, ¿de qué va esto? La cabecera de nuestra web siempre será la que contenga el slidershow de imágenes principal, el titular de una noticia, el menú de navegación, el formulario de búsqueda, el logo de nuestro sitio, resumiendo, la cabecera de nuestra web es toda aquella información visual que el usuario puede comprender y ver en la parte superior del diseño de nuestra web, y la cabecera de nuestro documento HTML ES OTRA COSA TOTALMENTE DISTINTA.
La cabecera del documento HTML que se abre con la etiqueta <head> nunca mostrará un resultado en pantalla al usuario, y esto se debe a que esta parte de información de nuestro documento está preparada para brindarle a servicios externos y ajenos a nuestra web que es lo que debe hacer y cómo debe tratar nuestro sitio. Para hacer más entendible este concepto pongamos el siguiente ejemplo:
Yo quiero que cuando mi documento html se cargue, el navegador (un servicio ajeno a nuestra web) cargue un archivo extra, como puede ser una hoja de estilos, un script, tipografías, etc. Bien, si quiero que el navegador haga eso ¿cómo y en donde se lo indico? Pues en la cabecera de nuestro documento HTML, por eso es importantísima la información dentro de las etiquetas <head></head>, por que serán el espacio donde brindaremos información e indicaremos a los navegadores y otros servicios, que debe hacer con nuestro documento HTML.
Espero que el concepto haya quedado claro, continuemos.
LÍNEA 4:
HTML:
<meta charset="UTF-8">La etiqueta <meta> es una etiqueta de autocierre, que como vimos en clases anteriores, esto significaba que no llevaban una etiqueta de cierre correspondiente. Esta etiqueta se encarga de los metadatos del documento.
Ahora, ¿Qué es un metadato?
La definición de metadatos más concreta es que: los metadatos son “datos acerca de datos”, ¿raro palabrerío no? Esto de datos acerca de datos significa en nuestro caso que, la etiqueta <meta> le brindara al navegador información (datos) sobre nuestro documento HTML, y si vemos que en este caso la misma lleva el atributo: charset=”UTF-8”, debemos saber que este atributo le dice al navegador el tipo de codificación que tendrán nuestros caracteres a lo largo del documento HTML. ¿Pero qué embrollo es este? Nosotros como desarrolladores tenemos que especificar siempre el tipo de codificación de nuestra aplicación / sitio web. Y eso lo hacemos con la etiqueta <meta> y el atributo: charset.
¿Por qué es necesario informar sobre la codificación? Simplemente por los caracteres especiales, ya que por defecto los navegadores manejan una codificación de caracteres especifica del idioma inglés, y por lo tanto si no indicamos nada los navegadores no mostrarán correctamente los caracteres como las tildes, la virgulilla de la letra ñ y demás caracteres y símbolos que no son propios del inglés.
Como vemos, este tipo de elemento es útil para servicios ajenos a nuestro sitio, como lo es el navegador, y por eso la etiqueta <meta> va dentro de las etiquetas <head></head>, ya que dentro de ellas delimitamos la información para servicios externos.
LÍNEA 5:
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">En muchas ocasiones usaremos la etiqueta ‘meta’ con dos atributos, los cuales son ‘name’ y ‘content’. Lo que hacen estos dos atributos juntos es actuar como uno conjunto de datos organizados como nombre y valor, donde en ‘name’ pondremos el tipo de metadato que queremos crear y en ‘content’ el valor de ese tipo de metadato creado.
En este caso, con el atributo ‘name’le indicamos que creamos el metadato ‘viewport’. ¿Y para que sirve esto? El viewport será una de las etiquetas imprescindibles para que nuestro sitio web responsive, es decir, nuestros sitios web en celulares y dispositivos móviles sea interpretado correctamente. El viewport corresponde al área que esta disponible en la pantalla del navegador.
Con el primer valor dentro de ‘content’: width=device-width, le decimos que en dispositivos móviles, el ancho de nuestro diseño será el mismo que el de la pantalla. Luego con: ‘initial-scale=1.0’, indicamos que se aplique la escala 1:1, es decir, el usuario no podrá aplicar ningún zoom que pueda llegar a romper el diseño.
LÍNEA 6:
HTML:
<meta http-equiv="X-UA-Compatible" content="ie=edge">En esta línea incluimos otro metadatos, y el atributo ‘http-equiv’ aporta información sobre los encabezados de respuesta (esto lo veremos mucho más adelante); pero en este caso específico, lo que hacemos es agregar al explorador “Edge” de Microsoft como una vista de compatibilidad. Es una buena práctica, pero si lo deseas puedes no incluir esta línea en tu código.
LÍNEA 7:
HTML:
<title>Primer sitio básico</title>Esta etiqueta es muy sencilla de comprender, y además, la utilizarás siempre. La etiqueta ‘title’ se encarga de mostrar el título en la pestaña del navegador, y el texto que incluiremos dentro de ella es lo que se mostrará, en este caso si abrimos este archivo en el navegador, la etiqueta ‘title’ mostrará lo siguiente:
LÍNEA 8:
HTML:
</head>Cerramos simplemente la cabecera de nuestro documento.
LÍNEA 9:
HTML:
<body>Body en español significa cuerpo, y una forma fácil de recordar cuando colocar esta etiqueta obligatoria, es darse cuenta que, luego de cerrar la “cabeza”, es decir, la cabecera de nuestro documento html, escribimos su cuerpo.
Aquí es donde “arranca” lo interesante, ya que todo lo que coloques dentro de las etiquetas de apertura y cierre <body>…</body> podrás verlo en pantalla en tu navegador. Cada elemento que crees, podrás verlo en pantalla y entender su uso y los estilos por defecto que el navegador le da al mismo. Por el momento, la etiqueta ‘body’ no lleva atributos y pareciera no tener nada de especial, pero su importancia esta en lo que coloquemos dentro de ella.
LÍNEA 10:
HTML:
<h1>¡Hola Mundo!</h1>En esta línea creamos un titular, o encabeza, llamarlo de ambas manera es correcto. Este encabezado que creamos es el de mayor jerarquía, ya que como aprenderás más adelante hay distintos tipos de jerarquías de titulares/encabezados. El navegador, por defecto, le da un estilo en negrita y tamaño de fuente más grande que la de un párrafo normal.
LÍNEA 11:
HTML:
<p>Este es mi primer sitio web.</p>En esta línea utilizamos la etiqueta ‘p’, esta etiqueta crea un párrafo, y el navegador entiende que todo el texto que este dentro de las mismas, deberá tratarlo como un párrafo.
LÍNEA 12:
HTML:
</body>LÍNEA 13:
HTML:
</html>Cerramos nuestro documento html y ya no podremos escribir nada fuera luego de esta etiqueta. Con esta etiqueta el navegador deja de leer nuestro documento.
Si abrimos este documento en nuestro navegador obtendremos el siguiente resultado:
