II.
Desarrollo de Front end
1. Identificar los elementos para la estructura de un
documento HTML5.
HTML son las siglas en inglés de HyperText Markup Language, lenguaje de
marcado de hipertexto. Se llama así porque se escribe utilizando etiquetas,
etiquetas en las cuales utilizaremos los símbolos de menor (<), mayor (>) y en
algunos casos la barra inclinada (/).
Es un estándar a cargo del W3C, una organización a cargo de la estandarización y
las recomendaciones de toda tecnología relacionada con la web. Actualmente
utilizamos la versión quinta de HTML, es decir, HTML5.
HTML consta de varios componentes, de los cuales vamos a destacar los
elementos y sus atributos. Veamos un ejemplo de documento HTML, o documento
web, muy sencillo:
Al crear una página web basada en el HTML coloca este código en la primera
línea de los archivos html, tal cual, sin cambiar nada. Eso especifica que usamos
la versión Html5.
<!DOCTYPE html>
De modo que, una página web vacía, pero con el tipo de documento ya declarado
correctamente, sería así:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
HTML5 y esta versión nos obliga a definir qué lenguaje o idioma estamos usando
para los contenidos.
Ver las siglas de cada idioma en la wikipedia
<!DOCTYPE html>
<html lang="es">
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
Hay una serie de elementos que no se ven directamente en el contenido de las
páginas y el title o título definido en la cabecera es uno de estos y, además, es
muy importante.
Con las etiquetas <title> y </title> se define el título de cada una de las páginas de
una web. No de la web completa sino de cada página del sitio web. Por ejemplo, si
tienes una web que habla de cocina, tendrá dentro una página que hable de una
sopa, otra de tarta de fresa, etc, etc. Pues cada una de esas páginas ha de tener
un título que represente a esa página, no uno genérico de la web sino un <title>
concreto para cada una de sus páginas.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Título de esta página</title>
</head>
<body>
</body>
</html>
Lo que pongas entre esas etiquetas <title> será lo que va a aparecer en la barrita
azul que hay en la parte superior de los navegadores, pero no aparece dentro de
la ventana del navegador, solo en esa barrita de arriba. Sirven no solo para indicar
al visitante qué va a encontrar en esa página, sino también a los buscadores para
saber de qué hablas en esa página.
Es muy importante que el título de cada una de las páginas de tu web sea
distinto de unas a otras.
Además de la etiqueta title que acabamos de ver y que define el título de la página
(no de la web, sino de esa página concreta) y que como hemos dicho, ha de ser
distinta en cada una de las páginas de tu web, tenemos otra etiqueta de tipo meta
importante, la etiqueta description.
<meta name="Description" content="descripción de la página">
Actualmente los buscadores (incluido Google, el rey) solo hacen caso de las meta
etiquetas title y description
Para que se muestren correctamente las tildes o acentos que escribamos en el
contenido de nuestras páginas, tenemos que añadir una línea que indique ese tipo
de codificación.
<meta charset="utf-8" />
Y este es el código que llevamos hecho por el momento
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Título de esta página</title>
</head>
<body>
</body>
</html>
la línea que especifica el charset="utf-8" tiene que ser la primera línea que haya
justo después de <head> En caso contrario podría no ser leída por los
navegadores. (Debe estar dentro de los primeros 512 carácteres del archivo).
Si queremos que en nuestra web aparezca el siguiente párrafo:
Hola amigos, esta es mi nueva Web
tendremos que escribir, entre <body> y </body> la siguiente línea:
<p>Hola amigos, esta es mi nueva Web</p>
de forma que el ejemplo anterior quedaría así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Mi Nueva Web</title>
</head>
<body>
<p>Hola amigos, esta es mi nueva Web</p>
</body>
</html>
Si ahora quieres añadir otro párrafo, simplemente coloca otra línea más antes o
después de la escrita antes, según quieras que la nueva aparezca encima o
debajo del párrafo antiguo.
Por ejemplo, si quiero que antes del párrafo "Hola amigos...." aparezca la palabra
"BIENVENIDOS" el código HTML debería quedar como sigue:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Mi Nueva Web</title>
</head>
<body>
<p>BIENVENIDOS!</p>
<p>Hola amigos, esta es mi nueva Web</p>
</body>
</html>
Algunos de los elementos más utilizados en los documentos web son, por ejemplo:
Etiqueta Descripción Código Visualización
<HTML> </HTML> Documento HTML. Mira el código de la página anterior.
Cabecera del documento.
<HEAD> </HEAD> Habitualmente tendrá título Mira el código de la página anterior.
en <TITLE></TITLE>
<BODY> </BODY> Cuerpo del documento. Mira el código de la página anterior.
No se ve en la página que visualiza el navegador, ¡es un
<!--...--> Comentario. <!-- esto es un comentario-->
comentario!
Párrafo 1
<P> </P> Párrafo. <P>Párrafo 1</P> <P>Párrafo 2</P>
Párrafo 2
<H1> </H1>
Encabezados de diferentes
… <h1>Encabezado nivel 1</h1> Encabezado nivel 1
niveles.
<H6> </H6>
Hiperenlace (se redirige a
<A HREF="LINK" …>
link indicado en el atributo <a href="https://www.uam.es">Universidad Autónoma de Madrid</a> Universidad Autónoma de Madrid
</A>
HREF).
División en el documento; lo
<DIV> </DIV> <DIV="cabecera"> <p> Párrafo en la cabecera de la página.</p></div> Párrafo en la cabecera de la página.
habitual es darle un nombre.
Imagen: se indica la imagen <IMG
<IMG> </IMG>
en el atributo SRC. SRC="http://www.uam.es/UAM/imagen/1233310437165/LOGO_UAM.png"></IMG>
Audio: se indica el audio en
<AUDIO> <audio controls><source src="http://soundbible.com/grab.php?id=2213&type=mp3"
el atributo SRC de elemento
</AUDIO> ></audio>
SOURCE.
<video width="320" height="240" controls><source SRC="//prod-edxapp.edx-
Vídeo: se indica el video en
cdn.org/assets/courseware/v1/13e4c857c2ac6c21c7a0cd06fb9424cb/asset-
<VIDEO> </VIDEO> el atributo SRC de elemento
v1:UAMx+WebApp+1T2019a+type@asset+block/Pexels_Videos_2833.mp4"
SOURCE.
type="video/mp4"></video>
Formulario: veremos sus
<FORM> </FORM> detalles a lo largo de esta Veremos el código más adelante.
unidad.
Estos son otros elementos HTML.
Listas:
Numeradas <OL> </OL>
No numeradas <UL> </UL>
Cada elemento en lista (numerada o no numerada) se define con: <LI> </LI>.
Tablas. Se define con <TABLE> </TABLE>.
Fila se define con: <TR> </TR>
Celda de datos: <TD> </TD>
Celda de cabecera: <TH> </TH>
A partir de la versión HTML5 aparecen estas etiquetas para añadir diferentes secciones a los documentos HTML:
Ejemplos
Encabezados
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h1>
<p>Este es un párrafo</p> Espacios
Salto de línea
</h1>
</body>
</html>
Parrafos
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<p>Lorem <b> ipsum dolor sit amet consectetur</b> adipisicing elit.
Doloremque labore voluptate odit id aperiam cum neque sint minima, autem
commodi ad. Molestias qui numquam possimus voluptates officiis fugit quibusdam
nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque labore
voluptate odit id aperiam cum neque sint minima, autem commodi ad. <i>
Molestias qui numquam possimus voluptates officiis fugit</i> quibusdam
nulla.</p>
<p>Lorem ipsum dolor sit,
<b>
<i>
amet consectetur adipisicing elit.
</i>
Nostrum officia amet suscipit blanditiis ipsa culpa accusamus, eveniet,
</b>
adipisci rem laboriosam dolorum ad aperiam. Earum, eius quas? Praesentium
vel voluptatum rem?
</p>
</body>
</html>
Atributos
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<h1>
<a href="https://www.google.cl">
Google
</a>
</h1>
<img src="1.jpg" alt="esta es una imagen de ejemplo">
</body>
</html>
Listas y comentarios
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<h1>
<!-- Esta es una lista desordenada -->
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<!-- Esta es una lista ordenada -->
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
<!-- este es un comentario -->
</h1>
</body>
</html>
Semantica HTML 5
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<header>
<p>Logo corporativo</p>
</header>
<nav>
<a href="#">Inicio</a>
<a href="#">Nosotros</a>
</nav>
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque ipsa blanditiis ea vel ullam
veniam, ipsum, consequatur accusantium nisi deleniti doloremque. Repellat, beatae illum. Minus
eveniet maxime numquam facere repellendus.</p>
</section>
<aside>
<p>Publicidad</p>
</aside>
</body>
</html>
DOM
Definición
La W3C define el DOM o "Modelo de Objetos del Documento" como "una interfaz de
programación de aplicaciones (API) para documentos HTML y XML." Es decir, es la
base o programa base sobre la que se construyen los documentos de HTML y XML.
Todos los navegadores y otras aplicaciones que quieran mostrar documentos en estos
formatos deben tener este programa base o interfaz. La W3C indica que el DOM
"define la estructura lógica de los documentos y el modo en que se accede y manipula
un documento."
La W3C especifica: "Con el Modelo de Objetos del Documento los programadores
pueden construir documentos, navegar por su estructura, y añadir, modificar o eliminar
elementos y contenido". Es decir que tiene una estructura flexible en la cual se pueden
añadir o quitar elementos.
Estructura
En el DOM los documentos tienen una estructura parecida a un árbol, creando una
estructura jerárquica en la que de un objeto principal pueden depender varios
secundarios. Esto se ve claramente en la estructura que tiene la página de HTML, la
cual consta de etiquetas anidadas.
Por ejemplo, si tenemos una página web sencilla:
<html>
<head>
<title>mi página</title>
</head>
<body>
<h1>Hola mundo</h1>
<p>Esta es mi página.</p>
</body>
</html>
En el DOM se representa como una estructura de árbol de la siguiente manera:
Cada uno de los recuadros de la estructura anterior es un nodo. Los nodos son los
elementos básicos de la estructura del DOM. Estos se relacionan unos con otros en
una estructura jerárquica, de modo que cada nodo tiene un nodo superior del que
depende, que es el nodo padre. Cada nodo puede tener 0, 1, ó varios nodos
dependientes de él, éstos serán los nodos hijos. Los nodos que están a un mismo
nivel, dependiendo todos ellos del mismo nodo padre, son nodos hermanos. Todo el
árbol del DOM depende de un nodo principal a partir del cual se generan todos los
demás. Es el nodo Document.
Tipos de nodos
Aunque existen 12 tipos de nodos en realidad en las páginas web sólo tenemos los 5
siguientes:
Document: nodo raíz del que derivan todos los demás.
Element: Cada una de las etiquetas HTML. Es el único nodo que puede
contener atributos y del que pueden derivar otros nodos.
Attr; Cada atributo de una etiqueta genera un nodo Attr, el cual contiene
también su valor (como una propiedad). Es hijo del nodo element (etiqueta) que
lo contiene.
Text: Contiene el texto encerrado por una etiqueta HTML (hijo del nodo
Element).
Comment: Los comentarios incluidos en la página HTML también generan sus
nodos.
Los demás tipos de nodos son: CDATASection, EntityReference, Entity,
ProcessingInstruction, DocumentType, DocumentFragment, Notation. Estos se usan
en el lenguaje XML, pero en HTML, si se emplean, suelen ser elementos fijos bastante
definidos (etiqueta Doctype, caracteres de escape, etc). Veamos cuáles son estos
nodos:
CDatasection: Nodo que puede contener caracteres de escape escritos
normalmente.
DocumentType: Declaración o etiqueta Doctype.
DocumentFragment: Fragmento o porción del arbol del DOM: Aunque no
aparece en el documento HTML permite a Javascript (mediante los métodos
del DOM) seleccionar un trozo del documento.
Entity: Caracter de escape o Entidad en XML.
EntityReference: Referencia a entidad XML.
ProcessingInstrution: Instrucciones de procesamiento.
Notation Anotaciones: parecido a "comment", pero puede salir en pantalla en
XML.
El DOM y HTML
El DOM en sí es un "Modelo", ni HTML ni XML siguen estrictamente este modelo, ya
que hay nodos que no aparecen en HTML, o algunos elementos que faltan en XML.
Con todo, estos lenguajes toman al DOM como referencia para su propia organización
de la sintaxis.
Si bien es verdad que todo documento HTML tiene una escructura que procura
ajustarse al DOM, el DOM, en si mismo, como modelo, es una referencia con la que
se han creado algunos lenguajes que se usan en la Web.
El DOM en sí mismo no pone nombre a las etiquetas de HTML, es el HTML el que
asocia las etiquetas, atributos, y demás componentes, con los elementos de una
estructura tipo DOM. Es por eso que el DOM, tal como ocurre en XML, permite que
creemos nuevas etiquetas con nuevos nombres.
