Scribd
Cargar
85 vistas44 páginas

Lectura - HTML y CSS (Parte I)

Este documento introduce los conceptos básicos de HTML, incluyendo su estructura, etiquetas y herramientas necesarias. Explica que HTML es el lenguaje de marcado usado para crear páginas web y se compone de etiquetas. Luego describe la estructura básica de un documento HTML, con las etiquetas <head> y <body>, y las herramientas como editores de texto y navegadores necesarios para desarrollar páginas web. Finalmente, guía al lector en la creación de su primera página web b

Cargado por

Camilo Ignacio Lavado
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
85 vistas44 páginas

Lectura - HTML y CSS (Parte I)

Este documento introduce los conceptos básicos de HTML, incluyendo su estructura, etiquetas y herramientas necesarias. Explica que HTML es el lenguaje de marcado usado para crear páginas web y se compone de etiquetas. Luego describe la estructura básica de un documento HTML, con las etiquetas <head> y <body>, y las herramientas como editores de texto y navegadores necesarios para desarrollar páginas web. Finalmente, guía al lector en la creación de su primera página web b

Cargado por

Camilo Ignacio Lavado
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 44

HTML y CSS (Parte I)

Introducción a HTML

Competencias

● Reconocer qué es HTML, su estructura, alcance y características.


● Implementar la estructura assets del proyecto (imágenes y archivos CSS), utilizando
rutas locales, absolutas y/o CDN, de acuerdo a las buenas prácticas de la industria.

Introducción

HTML es el lenguaje de marcado con el que se estructura y escribe contenido, para luego
ser interpretado por un navegador web. Conocer este lenguaje y su alcance, es el primer
paso para empezar a comprender cómo crear sitios que se adapten a las necesidades del
mercado, con buenas prácticas de programación y una visión completa del proceso de
desarrollo.

En este capítulo abordaremos cuáles son los requisitos del software instalado que requieres
instalado para comenzar a escribir código HTML, el uso del editor de código y algunos
atajos. Además, tendremos un acercamiento a los conceptos principales de HTML,
partiendo por la estructura de carpetas y los assets, para que conozcas cómo organizar los
archivos y así los puedas localizar de una forma sencilla, además esto le dará claridad y
limpieza al desarrollo en general de acuerdo a las buenas prácticas de la industria.

Aprender HTML te iniciará en el lenguaje de la programación, con él podrás construir


páginas web y expandir tus conocimientos hacia otros lenguajes que harán de ti un gran
desarrollador.

_ 1

www.desafiolatam.com
¿Qué es HTML?

Del inglés HyperText Markup Language, podemos traducir HTML como un lenguaje de
marcas de hipertexto, que sirve para la elaboración de páginas web.

Su principal estructura es a base de etiquetas, por lo tanto, la clave es conocer qué son,
cómo se escriben y cómo se ocupan.

<p> Hola </p> <!-- esto es una etiqueta! -->

Las etiquetas

Las etiquetas son los elementos con los que damos formato y estructura a un archivo
HTML.

Existen muchísimas etiquetas y cada una de ellas apuntan a diferentes tipos de elementos.
Además, cada una tiene un formato determinado por defecto (que veremos más adelante).

Por lo general la estructura, o sintaxis de una etiqueta es la siguiente:

Imagen 1. Estructura de etiquetas.


Fuente: Desafío Latam.

Existen muchas etiquetas y éstas pueden estar una dentro de otras, como lo que veremos a
continuación ejemplificado en la estructura base de un documento HTML.

_ 2

www.desafiolatam.com
Estructura base de un documento HTML

La estructura básica de un archivo HTML consiste en una etiqueta cabeza (<head>) y un


cuerpo (<body>). El <head> contiene toda la información que es para el navegador y el
<body> contiene todo el contenido que es para el usuario.
Ejemplo:

<!DOCTYPE html>
<html>
<head>
<!-- Aquí va la información para el navegador -->
</head>
<body>
<!-- Aquí va el contenido para el usuario -->
</body>
</html>

La primera etiqueta <!DOCTYPE html> es la que le indica al navegador cómo debe


interpretar el resto del documento (el doctype especificado es de HTML5, el cual es el
estándar de hoy).

La etiqueta <html> especifica que todo lo que está dentro de ella deberá ser interpretado
como HTML.

Herramientas necesarias

Para desarrollar nuestra primera página web, necesitaremos que nuestro computador
cuente con:

1. Un navegador web: Un navegador web es un programa diseñado para acceder y


navegar por la web y a través de la interpretación de los archivos, visualizar las
páginas.

En esta experiencia utilizamos Google Chrome. Lo puedes descargar desde acá.

.
2. Un editor de texto: Este es un programa que se instala en el computador y que
ocuparemos para escribir el lenguaje que luego interpretará el navegador. Existen
muchos editores y los más utilizados hasta ahora son Atom, Visual Studio Code y
Sublime. En esta serie de videos utilizaremos Atom, que puedes descargar de acá.

_ 3

www.desafiolatam.com
Atom es un editor de texto multiplataforma (Windows, Linux y Mac), compatible con
diversos lenguajes, por ejemplo: HTML, CSS, Less,C/C++, C#, Java, Python, PHP,
Ruby, etc.

Ayuda para generar la estructura HTML

Una de las ventajas de utilizar editores de texto orientados al desarrollo, como lo es Atom,
es que posee herramientas que facilitan las tareas recurrentes, como por ejemplo escribir
una y otra vez la estructura base de un documento HTML.

Esta función se llama autocompletado. Para utilizarla, primero debemos asegurarnos que el
tipo de código que estamos escribiendo sea HTML, y eso se ve en la esquina inferior
derecha del editor.

Imagen 2. Tipo de documento en ATOM.


Fuente: Desafío Latam.

Luego, simplemente tenemos que escribir html y apretar la tecla Tab.

Imagen 3. Estructura HTML generada en ATOM.


Fuente: Desafío Latam.

_ 4

www.desafiolatam.com
Estructura de carpetas

Antes de iniciar el desarrollo de nuestro sitio, es necesario conocer cómo estructuramos las
carpetas y archivos que la componen, esto permite que los encontremos de forma más
eficiente.

La estructura depende del alcance del proyecto, pero existe una convención que propone un
modelo basado en la organización por tipos de archivos.

En este modelo, los archivos HTML se guardarán en el directorio principal, mientras que los
recursos adicionales (vídeos, hojas de estilo, imágenes, etc.) se almacenarán en
subcarpetas dentro de una carpeta común llamada “assets”, como se grafica en la imagen:

Imagen 4. Estructura de carpetas.


Fuente: Blog EA Mexicano.

_ 5

www.desafiolatam.com
Ejercicio guiado: Nuestra primera página web

En este capítulo comenzaremos a crear nuestra primera página web, para esto es muy
importante que tengas instalado los programas Chrome y Atom.

Empecemos con nuestra página

Existen diversas formas de empezar a crear una página web. Para empezar un proyecto
nuevo comenzaremos por una carpeta.

● Paso 1: Crearemos una nueva carpeta en nuestro escritorio, que llamaremos


"meet&coffee":

● Paso 2: Ahora vamos abrir la carpeta con nuestro editor de texto. Hay varias formas
de lograr esto:

○ La primera y más simple es arrastrar la carpeta nueva sobre el ícono de Atom.


○ Otra forma, sería arrastrar la carpeta directamente sobre una pestaña abierta
de Atom.
○ También podríamos abrir Atom, ir a "File / Open File" y buscar la carpeta.

Imagen 5. Abriendo un archivo en ATOM.


Fuente: Desafío Latam.

_ 6

www.desafiolatam.com
Sabremos que lo logramos si podemos ver nuestra carpeta al costado izquierdo de
nuestro editor.

Imagen 6. Agregando carpeta a ATOM.


Fuente: Desafío Latam.

● Paso 3: Antes de seguir, asegúrate de poder ver la carpeta del proyecto en la


columna izquierda. Ahora podremos generar nuestro primer archivo en Atom.

Para ello, vamos a hacer clic con el botón secundario sobre la carpeta generada y
seleccionaremos new file. También podemos presionar la tecla a sobre la carpeta,
con esto se abrirá una ventana donde podremos escribir el nombre del archivo, lo
llamaremos index.html. Una vez creado el archivo, nos aparecerá al costado
izquierdo dentro de la carpeta de nuestro proyecto.

La página principal de nuestro sitio se debe llamar index.html porque es una


convención que subentiende que es el archivo índice que inicia un sitio web.

Imagen 7. Creación del archivo index.html.


Fuente: Desafío Latam.

El que sea .html, dice que es un archivo que se interpretará como HTML, por lo tanto
podrá ser leído por el navegador.

● Paso 4: Si necesitamos cambiarle el nombre, podremos hacer click con el botón


secundario (clic derecho) sobre el archivo y seleccionar rename en la barra de
navegación, donde podremos escribir el nuevo nombre directamente sobre el archivo
para renombrarlo.

_ 7

www.desafiolatam.com
Imagen 8. Renombrar archivo.
Fuente: Desafío Latam.

● Paso 5: Cada vez que realicemos un cambio en el archivo, nuestro editor Atom, nos
avisará dejando un punto de color al lado del nombre del archivo, el cual será el
punto de la vergüenza indicándonos que los cambios no están guardados.

Imagen 9. Archivo sin editar.


Fuente: Desafío Latam.

Para guardar, debemos presionar cmd + s en Mac y ctrl + s en Windows o Linux.


También podemos hacerlo sin utilizar atajos dentro del menú, haciendo clic sobre file
y luego sobre guardar (o save).

Estaremos guardando constantemente, así que es importante recordar este atajo.


Una vez que esté guardado nuestro archivo, ya podremos abrirlo en nuestro
navegador.

_ 8

www.desafiolatam.com
● Paso 6: Si no lo guardamos, solo veremos un archivo vacío dentro del navegador.
Probemos ingresando texto en nuestro archivo y guardándolo.

Hola esta es mi primera página web

Imagen 10. Agregando texto al archivo HTML.


Fuente: Desafío Latam.

● Paso 7: Ahora probamos como se ve en en navegador. Para eso abriremos el archivo


con Chrome y podremos ver el texto que escribimos.

El archivo lo podemos encontrar en la carpeta que creamos inicialmente en nuestro


escritorio.

Imagen 11. Archivo creador.


Fuente: Desafío Latam.

Si no guardas el archivo, al recargar el navegador no verás los cambios realizados.


De igual forma para recargar la página del navegador, puedes hacer clic en el ícono
de recargar o utilizando el atajo cmd + r en Mac y ctrl + r en Linux o Windows.

_ 9

www.desafiolatam.com
Para ver los cambios debemos actualizar la página.

Imagen 12. Ver archivo en el navegador.


Fuente: Desafío Latam.

● Paso 8: Finalmente, crearemos la estructura base en la cual trabajaremos el resto del


proyecto:

● /assets/img para las imágenes.


● /assets/css para el archivo CSS.

Puedes hacerlo directamente desde la carpeta "meet&coffee" o desde ATOM,


presionando con el botón derecho en la carpeta, de la siguiente manera:

Imagen 13. Crear la estructura de carpetas.


Fuente: Desafío Latam.

Debe quedar la siguiente estructura en nuestro proyecto:

Imagen 14. Estructura de carpetas.


Fuente: Desafío Latam.

_ 10

www.desafiolatam.com
Como buena práctica, no dejaremos las imágenes y otros archivos dentro de la raíz
de la carpeta, sino crearemos subdirectorios. ¿Por qué? Porque a medida que el
proyecto va creciendo puede llegar a ser difícil mantener el orden, especialmente si
trabajamos todos los archivos en la raíz del proyecto, por lo tanto, es importante
clasificarlos.

La carpeta “assets” corresponde a una convención que indica donde se deben


almacenar los archivos adicionales de nuestro proyecto, como hojas de estilo (css),
Javascript (js) o imágenes (img).

¡Felicitaciones! acabamos de crear nuestro primer documento, sin embargo, aún no


estamos ocupando código HTML.

_ 11

www.desafiolatam.com
Crear páginas con HTML

Competencias

● Emplear adecuadamente la estructura y sintaxis de las etiquetas de un documento


HTML, para dar solución a una problemática.

Introducción

En el capítulo anterior tuvimos un primer acercamiento al uso de las herramientas para


organizar la estructura de nuestras carpetas y de los archivos HTML, el uso del editor de
texto y cómo visualizar estos documentos en el navegador.

HTML, como mencionamos, es un lenguaje descriptivo que se basa en una serie de


etiquetas que el navegador web interpreta, mostrando los contenidos por pantalla. En este
capítulo abordaremos en profundidad la estructura principal de un documento HTML, su
sintaxis y principales etiquetas, para tener un acercamiento a cómo se estructuran los sitios
web y comencemos a crear nuestro propio código.

A lo largo de esta unidad, aprenderemos las bases de la construcción de un sitio web, a


través de un ejercicio llamado "Meet & Coffee", el cual será una página de reuniones y
eventos. Definiremos sus secciones principales y agregaremos el contenido de las charlas
que se realizan en un espacio colaborativo de trabajo, todo acompañado de un rico café.
Toda la información que agregaremos al sitio estará relacionado a este tema.

_ 12

www.desafiolatam.com
¿Qué es una página web? ¿Qué es un sitio web?

Antes que comencemos con todo, necesitamos definir qué es una página web y cuál es su
diferencia con un sitio web.

Si buscamos en Google, posiblemente encontremos respuestas o muy complejas o muy


simples. Así que, en esta instancia, una página web la definiremos como:

Página web (web page): Documento que puede ser visto a través de un navegador como
Firefox, Google Chrome o Safari. Las páginas web están construidas en un lenguaje de
etiquetas llamado HTML.

Imagen 15. Ejemplo página web.


Fuente: Desafío Latam.

Si ya sabemos qué es una página web, podremos indicar que un Website (sitio web) es una
colección de páginas (documentos), agrupadas e interconectadas en relación a un mismo
tema.

_ 13

www.desafiolatam.com
Por ejemplo, esta página de Wikipedia contiene enlaces que la conectan a todos los
diferentes artículos. Cada uno de esos artículos es una página en sí misma y todos los
artículos en su conjunto son el sitio web de Wikipedia.

Imagen 16. Ejemplo página web.


Fuente: https://es.wikipedia.org/wiki/.

Contenido y formato

En cada página web podemos identificar dos grandes áreas:

Por un lado, el contenido que ésta tiene, o sea, su texto, imágenes, videos, entre otros. Es
decir, a grandes rasgos, su información.

Por otro lado, está el formato o estilo, que es el modo en el que se expresa esta información.
Ya sea a través de los colores, distribución, tamaño de las imágenes, tipo de letra, entre
muchas otras cosas.

El resultado de esta combinación es lo que veremos en el navegador: el contenido


expresado de la forma más atractiva posible para los usuarios de nuestra página.

Partamos por entender cómo estructurar el contenido de nuestro sitio a través de las
etiquetas HTML, su sintaxis y alcances.

_ 14

www.desafiolatam.com
Etiqueta HEAD (título, codificación y metadatos)

Como vimos anteriormente, la etiqueta <head></head> especifica el contenido que se le


entregará al navegador y es necesaria para mostrar correctamente la página. Dentro de ella
están contenidos los metadatos para la página. Por lo general, podemos encontrar: el título
(<title>), la codificación (<meta charset="utf-8">), el favicon (<link rel="shortcut
icon">) y otros metadatos (<meta>).

También podemos encontrar los estilos (<style> o <link rel="stylesheet">) y los


scripts (<script>), pero esos temas los veremos más adelante.

Título

La etiqueta <title></title> muestra el título de la página en el tab, además tiene


atribuciones semánticas para el navegador.

Posee la siguiente estructura:

<title> Academia Desafío Latam - Desafío Latam </title>

Y se traduce en el navegador de esta manera:

Imagen 17. Título Web Desafío Latam.


Fuente: Desafío Latam.

_ 15

www.desafiolatam.com
Codificación

La etiqueta <meta> con el atributo charset especifica la codificación de los caracteres del
documento. En este caso usaremos utf-8 para poder codificar símbolos y caracteres latinos.

Posee la siguiente estructura:

<meta charset="UTF-8">

Esta etiqueta es muy importante, ya que si no la usamos, la letra como la "Ñ" y las letras con
tilde no se codificarían bien. Algo tan simple como este texto: Ñ á é í ó ú se vería así:

Imagen 18. Tildes.


Fuente: Desafío Latam.

Favicon

Es una pequeña imagen asociada al sitio web que se muestra en la pestaña


correspondiente. Para poner el pequeño ícono que aparece en la pestaña del navegador se
tiene que tener una imagen pequeña (formato jpg, png, gif o bmp) y cuadrada.

Posee la siguiente estructura:

<link rel="icon" type="image/png" href="/assets/favicon/icono.png">

_ 16

www.desafiolatam.com
Y se traduce en el navegador de esta manera:

Imagen 19. Favicon Web Desafío Latam.


Fuente: Desafío Latam.

Otros metadatos

Además de lo que ya hemos aprendido, existen varios tipos de metadatos que se pueden
incluir en el head.

Existen de autor <meta name="author">, de descripción <meta name="description" >,


de palabras clave <meta name="keywords"> y más.

En este link de w3schools están detallados para que tengas mayor información.

Etiqueta BODY (textos)

El segundo elemento básico de la estructura HTML es el body. Este contiene todos los
elementos que se representan de forma visible al visitante de la página web. Veamos las
principales etiquetas que lo componen:

Párrafos

Los párrafos son representados por el elemento <p></p>. Se considera párrafo a aquellos
bloques de texto compuesto por una o más oraciones de un tema en particular, que
normalmente se separa de otros bloques de texto.

_ 17

www.desafiolatam.com
Posee la siguiente estructura:

<p>Antiguamente la universidad era el único lugar de calidad para aprender a desarrollar


tus talentos. Con eso bastaba. Hoy no es así, en realidad en la actualidad un título
universitario es muy útil pero no determinante a la hora de conseguir un empleo. Esto es
un efecto de la era digital.</p>

Y se traduce en el navegador de esta manera:

Imagen 20. Párrafo Web Desafío Latam.


Fuente: Desafío Latam.

Dentro de las consideraciones de esta etiqueta, podemos mencionar:

● Agrega automáticamente un espacio antes y después de cualquier párrafo


(márgenes agregados por el navegador).
● Si un usuario agrega varios espacios, el navegador los reduce a un solo espacio.
● Si un usuario agrega varias líneas, el navegador las reduce a una sola línea.

Encabezados

Una página web no solo tiene párrafos, también tiene headings (o encabezados), que son
textos de mayor jerarquía que los párrafos.

Los encabezados son etiquetas que se escriben con la letra h y la sigue un número del 1 al
6: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.

El <h1> es el encabezado con mayor jerarquía, o sea, el más importante. Mientras va


aumentando el número del encabezado va disminuyendo su jerarquía, siendo el <h6> el
menos relevante. La jerarquía de los encabezados se ve reflejado tanto en su estilo por
defecto, como en su semántica.

_ 18

www.desafiolatam.com
Posee la siguiente estructura:

<h1>¡ESTO ES DESAFÍO LATAM! </h1>

Y se traduce en el navegador de esta manera:

Imagen 21. Headers.


Fuente: Desafío Latam.

Etiqueta BODY (imágenes)

La etiqueta <img>, a diferencia de los párrafos y encabezados, no tiene un cierre. Es sólo la


etiqueta y sus parámetros.

<img src="" alt="">

Podemos identificar, de momento, dos parámetros fundamentales.

● src: Del Inglés Source, hace referencia al archivo de origen. Éste, puede ser una URL o
una ruta a nuestro proyecto local.

● alt: Del inglés Alternative, se refiere a texto alternativo. Agregar este parámetro es
muy importante, ya que los motores de búsqueda codificarán tu imagen a través de
ese texto. También, si la imagen no se encuentra, mostrará el texto en vez de ella.

_ 19

www.desafiolatam.com
Etiqueta BODY (listas)

Ahora conoceremos las listas, para ello utilizaremos las etiquetas <ul>, <ol> y <li>.

● ul significa unordered list y la usaremos cuando tengamos que hacer un listado de


elementos sin un orden particular.

● ol significa ordered list y como su nombre lo indica, lo utilizaremos cuando


necesitemos tener una lista de elementos ordenados o enumerados.

● li significa list item y es un elemento de la lista de cualquiera de los dos tipos,


ordenada o desordenada.

Hagamos un ejercicio rápido: en el archivo index.html que creamos en el capítulo anterior,


crearemos una estructura base de acuerdo a lo que hemos ido aprendiendo a lo largo de
este capítulo.

Generamos una lista no ordenada de las cosas que debemos comprar en el supermercado y
una lista ordenada con nuestros animales favoritos, de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
<title>Listas no-ordenadas y listas ordenadas</title>
<meta charset="utf-8">
</head>
<body>
<h1>Listas no-ordenadas y listas ordenadas</h1>

<h2>Lista del supermercado</h2>


<ul>
<li>Lechuga</li>
<li>Palmitos</li>
<li>Tomate</li>
<li>Espinaca</li>
</ul>

<h2>Mis animales favoritos</h2>


<ol>
<li>Gato</li>
<li>Perro</li>
<li>Conejo</li>

_ 20

www.desafiolatam.com
<li>Ratón</li>
</ol>
</body>
</html>

Recargamos y podemos observar que en la lista no-ordenada los elementos no se


jerarquizan y se le antepone una viñeta redonda y sólida, y en la lista ordenada se jerarquizan
los elementos a través de números.

Imagen 22. Listas ordenadas y no ordenadas.


Fuente: Desafío Latam.

_ 21

www.desafiolatam.com
Etiqueta BODY (links)

Ahora, siguiendo en el archivo del ejercicio anterior de las listas, veremos una etiqueta muy
importante, la etiqueta para los enlaces o links.
Los links nos permiten enlazar nuestra página a:

● Otros sitios, diferentes al nuestro.


● Otras páginas de nuestro sitio.
● Archivos.
● Secciones dentro de la misma página.
● Entre otros.

La etiqueta para los enlaces es: <a>, básicamente se escribe así:

<a href="link">Texto a mostrar</a>

Al interior de href="" debe ir la ruta a la cual seremos dirigidos. Y entre los símbolos ><
debería ir el contenido mostrado para hacer clic.

Links a otros sitios

Escribiremos lo siguiente:

<a href="https://www.w3schools.com/">Aprende más sobre desarrollo web en


W3Schools</a>

Ésto creará un link que nos redirigirá al sitio enlazado.

Pero, muchas veces queremos que los links se abran en una nueva pestaña, sobre todo
cuando la página a la cual redirige es de un sitio distinto al nuestro. Esto se consigue
añadiendo otro atributo a la etiqueta <a> llamado target. Y para que siempre se abra en una
nueva pestaña debe llevar el valor _blank.

<a href="https://www.w3schools.com/" target="_blank">Aprende más sobre


desarrollo web en W3Schools</a>

_ 22

www.desafiolatam.com
Links a páginas dentro de nuestro sitio

Para dirigir páginas dentro de un mismo sitio, basta con poner el nombre del archivo HTML
al que hacemos referencia. Por ejemplo, si quisiéramos hacer un enlace desde otra página a
nuestro inicio, escribiríamos lo siguiente:

<a href="index.html">Link a la página principal de nuestro proyecto</a>

Recuerden que el valor de href es la ruta al archivo.

Imágenes con links

No siempre el contenido mostrado para hacer clic es un texto, a veces puede ser una
imagen.

Haremos un link a Google con su logo clickeable.

● Escribiremos la etiqueta <a>, con su atributo href dirigiendo a Google, como es un


enlace a un sitio externo le daremos el atributo target="_blank".

● Luego en el mismo Google buscamos el logo de Google y generamos la etiqueta


<img> con sus atributos src y alt, dentro del contenido de la etiqueta <a>.

<a href="https://www.google.cl" target="_blank"><img


src="http://as01.epimg.net/betech/imagenes/2018/10/29/portada/1540844638
_585946_1540848919_noticia_normal.jpg" alt="Google"></a>

_ 23

www.desafiolatam.com
Si das click en la imagen, te llevará a la imagen que hemos agregado en el link:

Imagen 23. Enlaces.


Fuente: Desafío Latam.

Y listo, hemos conocido los enlaces que nos servirán siempre en nuestros desarrollos.

Etiqueta BODY (menú)

Ya hemos conocido las listas y los links, el menú por su parte, representa una barra
representada por una lista no ordenada de elementos (<li>) y se utiliza para menús
contextuales, barras de herramientas y para enumerar controles y comandos de formularios.

La estructura de un menú, es la siguiente:

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="pagina1.html">Página 1</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>

El resultado de este código podría no ser muy atractivo visualmente, pero es funcional.
Luego con CSS, le daremos algo de estilo:

Imagen 24. Menú.


Fuente: Desafío Latam.

_ 24

www.desafiolatam.com
A lo largo de este capítulo hemos revisado qué es HTML, cual es la principal estructura que
la componen y cuales son las mejores prácticas para organizar nuestros archivos.

Tuvimos un primer acercamiento al editor ATOM y a alguno de los atajos que nos provee
para facilitar la escritura de código.

Además, hemos visto en detalle las principales etiquetas y su sintaxis.

En el próximo capítulo tendremos un acercamiento a CSS y abordaremos los aspectos clave


que nos permitirán darle estilo a nuestro proyecto.

Ejercicio guiado: Meet&Coffee

En el capítulo anterior comenzamos a crear la estructura para nuestro proyecto de


Meet&Coffee. En este capítulo, pondremos en práctica la estructura de HTML que hemos
revisado, para irnos acercando poco a poco a la maqueta inicial.

Empecemos con nuestra página

● Paso 1: En nuestro archivo index.html generamos la estructura base de HTML. Una


forma sencilla de hacer esto es escribir “html” y presionar la tecla de tabulación,
como sugiere ATOM:

Imagen 25. Autocompletado.


Fuente: Desafío Latam.

_ 25

www.desafiolatam.com
Esto generará por defecto la estructura sobre la que iremos trabajando en el proyecto:

Imagen 26. Estructura base HTML.


Fuente: Desafío Latam.

● Paso 2: Partiremos por añadir un título a nuestra página, para esto agregaremos el
siguiente código dentro de la etiqueta <head>:
<title>Meet & Coffee</title>.

Si recargamos la página, veremos que aparece el título en la pestaña del navegador.

Imagen 27. Título.


Fuente: Desafío Latam.

● Paso 3: Dentro de los documentos de nuestros assets, ubicados en el archivo


“Assets Proyecto - Meet and Coffee” dentro de nuestro material de estudio, tenemos
este png llamado favicon. Lo descargamos y lo pondremos dentro de la carpeta
assets/img del proyecto.

Lo llamamos de la siguiente forma:

<link rel="shortcut icon" type="image/png"


href="./assets/img/favicon.png"/>

_ 26

www.desafiolatam.com
Si refrescamos la página, podremos observar que se muestra el ícono que agregamos:

Imagen 28. Favicon.


Fuente: Desafío Latam.

● Paso 4: Agregaremos además otros metadatos relativos a nuestro proyecto, con la


finalidad de que los buscadores interpreten esta información para indexar nuestro
contenido, quedando el archivo index.html de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
<title>Meet & Coffee</title>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png"
href="./assets/img/favicon.png">
<meta name="author" content="Francisca Medina Concha">
<meta name="description" content="Comparte tus conocimientos tomando
café">
<meta name="keywords" content="charlas, eventos, simposios,
tecnología, co-work">
</head>
<body>
<!-- Aquí va el contenido de la página web -->
</body>
</html>

_ 27

www.desafiolatam.com
● Paso 5: Ya trabajamos con el head, ahora nos toca trabajar sobre el body, ahí donde
le debemos añadir el contenido específico para el usuario. En la guía de estilo y la
maqueta final podremos sacar el contenido necesario.

En el body de nuestro index.html escribiremos las dos primeras frases.

<body>
Descubre lo último en tecnología bebiendo café

Charlas, eventos y simposios sobre tecnología


</body>

Guardaremos el archivo, recargamos nuestro navegador y podremos observar que el


texto se escribió, pero quedó todo junto.

Imagen 29. Body.


Fuente: Desafío Latam.

Eso es porque no le hemos indicado que cada texto será un párrafo independiente.

● Paso 6: Empecemos asignándole la etiqueta <p>, que indica párrafo a la primera


frase: <p>Descubre lo último en tecnología bebiendo café</p>.

Luego etiquetamos el segundo párrafo, <p>Charlas, eventos y simposios


sobre tecnología</p>.

Guardaremos el archivo, recargamos nuestro navegador y podremos observar como


ya podemos escribir hacia abajo.

Todo lo que esté al interior de la etiqueta <p> formará parte del párrafo.

_ 28

www.desafiolatam.com
Imagen 30. Párrafos.
Fuente: Desafío Latam.

● Paso 7: Entonces, en nuestro index.html, vamos a cambiar nuestros párrafos por


encabezados.

El primer párrafo lo transformaremos en un <h1>, ya que es el de mayor tamaño y


mayor relevancia.

<h1>Descubre lo último en tecnología bebiendo café</h1>

Y cambiaremos el segundo párrafo por un <h2>:

<h2>Charlas, eventos y simposios sobre tecnología</h2>

Vamos a guardar nuestra página y la abriremos en nuestro navegador. Ahora


podemos ver las notables diferencias entre el <h1> y el <h2>.

Imagen 31. Headers.


Fuente: Desafío Latam.

_ 29

www.desafiolatam.com
● Paso 8: Añadiremos, entonces, el resto de los textos con las siguientes etiquetas.

Texto ubicación:

<h2>¿Dónde nos juntamos?</h2>


<p>Todos los martes y viernes, de 19:00 a 22:00 en We Work, Calle Baker
133, Providencia, Santiago.</p>

Texto próxima charla:

<h2>Próxima charla</h2>
<h3>Big Data para Noobs</h3>
<h4>Rafaela Valdez</h4>
<h5>Data scientist, phD Theoriccal Physics, Carneige Mellon
University</h5>
<p>En esta charla revisaremos las técnicas y tecnologías que hacen que
sea económico hacer frente a los datos de una escala extrema.</p>

Texto eventos:

<h2>Eventos anteriores</h2>
<h3>Simposio Vegan DB</h3>
<h3>Machine learning 101</h3>
<h3>Scrum sin scream</h3>

Guardaremos el archivo y recargamos, ahora podemos ver los encabezados y párrafos


generados en el navegador:

_ 30

www.desafiolatam.com
Imagen 32. Textos.
Fuente: Desafío Latam.

_ 31

www.desafiolatam.com
Si has seguido todas las indicaciones tu código debería verse así:

<!DOCTYPE html>
<html>
<head>
<title>Meet & Coffee</title>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png"
href="./assets/img/favicon.png">
<meta name="author" content="Francisca Medina Concha">
<meta name="description" content="Comparte tus conocimientos tomando
café">
<meta name="keywords" content="charlas, eventos, simposios,
tecnología, co-work">
</head>
<body>
<h1>Descubre lo último en tecnología bebiendo café</h1>
<h2>Charlas, eventos y simposios sobre tecnología</h2>

<h2>¿Dónde nos juntamos?</h2>


<p>Todos los martes y viernes, de 19:00 a 22:00 en We Work, Calle
Baker 133, Providencia, Santiago.</p>

<h2>Próxima charla</h2>
<h3>Big Data para Noobs</h3>
<h4>Rafaela Valdéz</h4>
<h5>Data scientis, phD Theoriccal Physics, Carneige Mellon
University</h5>
<p>En esta charla revisaremos las técnicas y tecnologías que hacen
que sea económico hacer frente a los datos de una escala extrema.</p>

<h2>Eventos anteriores</h2>
<h3>Simposio Vegan DB</h3>
<h3>Machine learning 101</h3>
<h3>Scrum sin scream</h3>
</body>
</html>

● Paso 9: Ahora, que ya hemos escrito el contenido de nuestra página, vamos a poner
las imágenes. (Recuerda que nuestras imágenes están almacenadas en esta carpeta
de assets/img).

_ 32

www.desafiolatam.com
Ahora, antes de nuestro h1 colocaremos la etiqueta que corresponde a una imagen
de la siguiente forma:

<img src="assets/img/bg-hero.png" alt="Hero image">

● Paso 10: Además, agregaremos una imagen desde internet, que llamaremos desde
nuestra etiqueta <img>. Iremos a Google y buscaremos café.

Buscamos la que más nos guste, la abrimos y con click derecho le damos a "Copiar
dirección de imagen". Esto nos copiará un link directo a la foto.

_ 33

www.desafiolatam.com
Si lo colocamos en el navegador veremos esto:

Imagen 33. Agregar imagen desde internet.


Fuente: Ecestaticos.com.

Ahora, dentro del parámetro src, le daremos como valor el link de la foto que hemos
copiado. Agregaremos este código después del <h1>.

<img
src="https://www.ecestaticos.com/imagestatic/clipping/b71/2a1/b712a1c165
720e7fcb04530ad1e5fc53/lo-que-ocurre-cuando-solo-bebes-te-y-cafe-durante
-todo-el-dia.jpg?mtime=1525090245" alt="Bebiendo café">

Vamos a meternos a nuestro navegador y veremos que la imagen ha sido incluida,


del porte que venía.

● Paso 11: Como ya tenemos las imágenes que utilizaremos en nuestro sitio en los
assets vamos a borrar esta fotografía que no corresponde.

Además, al mostrar una imagen desde Internet nos arriesgamos a que ésta pueda
ser borrada, por lo tanto, es mucho mejor tener las imágenes dentro de la carpeta de
nuestro proyecto, así que vamos a descargar las imágenes del proyecto.

● Paso 12: Ahora, vamos a colocar las imágenes que restan, según cómo están dentro
de nuestra maqueta final.

Ingresa todas las imágenes en tu proyecto, excepto coffee-cup.svg, que será el logo
de nuestra barra de navegación que añadiremos después.
Será un buen trabajo para practicar.

_ 34

www.desafiolatam.com
Si realizaste todo bien, tu página debería verse de esta forma:

Imagen 34. Visualizar imágen en la página web.


Fuente: Desafío Latam.

_ 35

www.desafiolatam.com
● Paso 13: Ya hemos agregado la mayor parte del contenido de nuestra página index.
Finalmente, crearemos un menú. Vamos añadir una lista no-ordenada, con 5 ítems, al
principio de la etiqueta <body>.

Dentro de los list item vamos a colocar la etiqueta <a>, de momento, como valor del
parámetro href colocaremos el signo #.

Finalmente, como contenido de la etiqueta pondremos uno a uno los nombres de las
secciones.

Como vemos en nuestra maqueta final, el primer elemento del menú es el ícono del
café, de momento lo dejaremos como texto.

<ul>
<li><a href="#">Ícono</a></li>
<li><a href="#">Ubicación</a></li>
<li><a href="#">Próxima Charla</a> </li>
<li><a href="#">Eventos anteriores</a></li>
<li><a href="#">Contacto</a></li>
</ul>

Recargamos el navegador para observar que se generó nuestra lista con los
elementos mencionados.

Imagen 35. Menú.


Fuente: Desafío Latam.

Ya hemos agregado todo el contenido de nuestra página index.html. Revisemos lo


que hemos creado.

Ya sé que te preguntarás, ¿Por qué se ve así, sin ningún diseño?

_ 36

www.desafiolatam.com
Es porque lo que hemos hecho ha sido entregarle el contenido a la página. Aún nos
queda ver temas de estilo y estructura, que lo veremos en la unidad a continuación.

Ejercicio propuesto (1)

De momento te invito a realizar una pequeña actividad que consiste en armar tu CV en


HTML. Recuerda utilizar la estructura básica de HTML (<head> y <body>) y todas las
etiquetas que hemos conocido:

Para el <head>:

● Título.
● Codificación.
● Favicon.
● Metadatos.

Para el <body>:

● Párrafos.
● Encabezados.
● Imágenes.
● Listas (ordenadas y no-ordenadas).
● Links.

_ 37

www.desafiolatam.com
Solución Ejercicio Propuesto (1)

A modo de ejemplo, generamos el currículum de Cristiano Ronaldo:

● Paso 1: Creamos un archivo adicional llamado curriculum.html:

Imagen 36. Curriculum.


Fuente: Desafío Latam.

● Paso 2: Generamos la estructura base del documento HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

</body>
</html>

● Paso 3: Agregamos los atributos de título:

<title>Curriculum Vitae</title>

● Paso 4: Se define la codificación en utf-8, para permitir caracteres especiales:

<meta charset="utf-8">

_ 38

www.desafiolatam.com
● Paso 5: Dentro de la carpeta assets/img agregamos una imagen pequeña para el
favicon y la mapeamos en el <head>.

<link rel="shortcut icon" type="image/png"


href="./assets/img/favicon_cv.png">

● Paso 6: Agregamos los metadatos adicionales:

<meta name="author" content="Desafío Latam">


<meta name="description" content="Curriculum de Cristiano Ronaldo">
<meta name="keywords" content="curriculum, trabajo">

Finalmente el <head> queda de la siguiente manera:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png"
href="./assets/img/favicon_cv.png">
<meta name="author" content="Desafío Latam">
<meta name="description" content="Curriculum de Cristiano Ronaldo">
<meta name="keywords" content="curriculum, trabajo">
<title>Curriculum Vitae</title>
</head>
<body>

</body>
</html>

_ 39

www.desafiolatam.com
● Paso 7: Para el body definimos los párrafos del texto que queremos agregar. Para
este ejemplo, la información se obtuvo desde modelocurriculum.net.

<body>
<p>Currículum Vitae</p>
<p>Cristiano Ronaldo</p>
<p>Resumen</p>
<p>El futbolista Cristiano Ronaldo, natural de Madeira (Portugal) y
actual delantero del Real Madrid C.F., es uno de los deportistas más
laureados de todos los tiempos. Son muchos los momentos clave en la
biografía de Cristiano Ronaldo, que ha sido considerado el máximo
goleador de la historia del Real Madrid y atesora un gran número de
galardones a título personal. La Bota de Oro, el Balón de Oro y el
premio The Best de la FIFA son solo algunos de los reconocimientos que
ha obtenido Cristiano Ronaldo a lo largo de su carrera deportiva.</p>
<p>Datos Personales</p>
<p>Nombre: Cristiano Ronaldo dos Santos Aveiro</p>
<p>Fecha de Nacimiento: 05 de febrero de 1985</p>
<p>Lugar de Nacimiento: Funchal (Madeira, Portugal)</p>
<p>Formación</p>
<p>Cristiano Ronaldo empezó su carrera deportiva a los 8 años de edad
cuando ingresó en la escuela de fútbol La Andorinha. Como despuntó desde
tan tierna edad, los clubes C.S. Marítimo y C.D. Nacional pronto
mostraron su interés en contar con el jugador. Es por esto que Ronaldo
no estudió como el resto de niños de su edad, y aunque trató de
compaginar su carrera deportiva asistiendo a clases nocturnas, decidió
aparcar sus estudios cuando firmó con el Sporting de Lisboa a los
dieciséis de edad.</p>
<p>Premios y Reconocimientos</p>
<p>Cristiano Ronaldo ha recibido un sinfín de galardones y distinciones
a lo largo de su carrera deportiva (premios entre los que se encuentran,
ni más ni menos, el Balón de Oro, el Jugador del Año de la UEFA o el
Jugador Mundial de la FIFA). No obstante, Cristiano también ha recibido
una serie de condecoraciones que no están relacionadas con el mundo del
fútbol, como pueden ser:</p>
<p>- Comandante de la Orden del Mérito de Portugal (2016)</p>
<p>- Gran Oficial de la Orden del Infante Don Enrique (2014)</p>
<p>- Medalla al Mérito de la Orden de Nuestra Señora de la Concepción de
Villaviciosa (2006)</p>
<p>- Distinción Oficial de la Orden del Infante Don Enrique (2004)</p>
</body>

_ 40

www.desafiolatam.com
● Paso 8: Definimos los encabezados, para dar estilo a los títulos del documento. Se
han actualizado las siguientes líneas:

<h1>Curriculum Vitae</h1>
<h2>Cristiano Ronaldo</h2>
<h3>Resumen</h3>
<h3>Datos Personales</h3>
<h3>Formación</h3>
<h3>Premios y Reconocimientos</h3>

● Paso 9: Agregaremos una imagen después del <h1>:

<img src="./assets/img/ronaldo.jpg" alt="Cristiano Ronaldo">

● Paso 10: Tanto los ítemes de Datos Personales, como los de formación están en
forma de listas. Los formateamos para que se vean como tal:

<ul>
<li>Nombre: Cristiano Ronaldo dos Santos Aveiro</li>
<li>Lugar de Nacimiento: Funchal (Madeira, Portugal)</li>
<li>Fecha de Nacimiento: 05 de febrero de 1985</li>
</ul>

<ul>
<li>- Comandante de la Orden del Mérito de Portugal (2016)</li>
<li>- Gran Oficial de la Orden del Infante Don Enrique (2014)</li>
<li>- Medalla al Mérito de la Orden de Nuestra Señora de la Concepción
de Villaviciosa (2006)</li>
<li>- Distinción Oficial de la Orden del Infante Don Enrique
(2004)</li>
</ul>

_ 41

www.desafiolatam.com
● Paso 11: Finalmente, agregaremos un link al final de la página que nos lleve a la
fuente de la información:

<p>
Fuente: <a
href="https://www.modelocurriculum.net/biografias/deportistas/cristiano-
ronaldo" target="_blank">ModeloCurriculum.net</a>
</p>

Este es el resultado final del código:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png"
href="./assets/img/favicon_cv.png">
<meta name="author" content="Desafio Latam">
<meta name="description" content="Curriculum de Cristiano Ronaldo">
<meta name="keywords" content="curriculum, trabajo">
<title>Curriculum Vitae</title>
</head>
<body>
<h1>Curriculum Vitae</h1>
<img src="./assets/img/ronaldo.jpg" alt="Cristiano Ronaldo">
<h2>Cristiano Ronaldo</h2>
<h3>Resumen</h3>
<p>El futbolista Cristiano Ronaldo, natural de Madeira (Portugal) y
actual delantero del Real Madrid C.F., es uno de los deportistas más
laureados de todos los tiempos. Son muchos los momentos clave en la
biografía de Cristiano Ronaldo, que ha sido considerado el máximo
goleador de la historia del Real Madrid y atesora un gran número de
galardones a título personal. La Bota de Oro, el Balón de Oro y el
premio The Best de la FIFA son solo algunos de los reconocimientos que
ha obtenido Cristiano Ronaldo a lo largo de su carrera deportiva.</p>
<h3>Datos Personales</h3>
<ul>
<li>Nombre: Cristiano Ronaldo dos Santos Aveiro</li>
<li>Lugar de Nacimiento: Funchal (Madeira, Portugal)</li>
<li>Fecha de Nacimiento: 05 de febrero de 1985</li>
</ul>
<h3>Formación</h3>

_ 42

www.desafiolatam.com
<p>Cristiano Ronaldo empezó su carrera deportiva a los 8 años de edad
cuando ingresó en la escuela de fútbol La Andorinha. Como despuntó desde
tan tierna edad, los clubes C.S. Marítimo y C.D. Nacional pronto
mostraron su interés en contar con el jugador. Es por esto que Ronaldo
no estudió como el resto de niños de su edad, y aunque trató de
compaginar su carrera deportiva asistiendo a clases nocturnas, decidió
aparcar sus estudios cuando firmó con el Sporting de Lisboa a los
dieciséis de edad.</p>
<h3>Premios y Reconocimientos</h3>
<p>Cristiano Ronaldo ha recibido un sinfín de galardones y distinciones
a lo largo de su carrera deportiva (premios entre los que se encuentran,
ni más ni menos, el Balón de Oro, el Jugador del Año de la UEFA o el
Jugador Mundial de la FIFA). No obstante, Cristiano también ha recibido
una serie de condecoraciones que no están relacionadas con el mundo del
fútbol, como pueden ser:</p>
<ul>
<li>- Comandante de la Orden del Mérito de Portugal (2016)</li>
<li>- Gran Oficial de la Orden del Infante Don Enrique (2014)</li>
<li>- Medalla al Mérito de la Orden de Nuestra Señora de la Concepción
de Villaviciosa (2006)</li>
<li>- Distinción Oficial de la Orden del Infante Don Enrique
(2004)</li>
</ul>
<p>
Fuente: <a
href="https://www.modelocurriculum.net/biografias/deportistas/cristiano-
ronaldo" target="_blank">ModeloCurriculum.net</a>
</p>
</body>
</html>

_ 43

www.desafiolatam.com
El sitio se ve de esta manera:

Imagen 37. Desarrollo ejercicio propuesto.


Fuente: Desafío Latam.

_ 44

www.desafiolatam.com

También podría gustarte