Software">
2 2-HTML
2 2-HTML
2 2-HTML
Programación 2
Módulo 2: Frontend
Tema 2: HTML
2.2. HTML
2.2. HTML
2.2.1. Etiquetas
2.2.2. Estructura
2.2.3. Listas
2.2.4. Formularios
2.2.5. Tablas
2.2.7. Estilos
2.2. HTML
En este tema nos centraremos en el lenguaje HTML (HyperText Markup Language). HTML es
el lenguaje de marcado fundamental utilizado para estructurar y organizar el contenido de
una página web. Es la base sobre la cual construiremos nuestras interfaces.
Figura 2.6
HTML utiliza una serie de etiquetas para marcar y definir diferentes elementos en una
página web. Estas etiquetas son instrucciones que le dicen al navegador cómo debe
interpretar y mostrar el contenido.
Un documento HTML está estructurado por elementos. Los elementos están encerrados con
parejas de etiquetas que realizan la apertura y el cierre.
Cada etiqueta empieza y termina por signos de mayor y menor (<>, </>) exceptuando algunas
como por ejemplo la etiqueta img.
Todas las etiquetas cuentan con una serie de atributos los cuales sirven para
añadir/complementar información o significado al elemento HTML al que estamos
colocando. Los atributos siempre se colocan dentro de la etiqueta de apertura, aquí un
ejemplo:
Figura 2.7
2.2.2. Estructura
Una vez creado el documento HTML se nos presenta una estructura inicial formada por
etiquetas/elementos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Todo documento HTML empieza con la etiqueta DOCTYPE que indica que este documento
es de tipo HTML, está no tiene etiqueta de cierre.
Los espacios no son significativos y la indentación solo sirve para mejorar la lectura.
Figura 2.8
Figura 2.9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header></header>
<nav></nav>
<section>
<article></article>
<article></article>
<aside></aside>
</section>
</body>
</html>
2.2.3. Listas
Listas desordenadas:
• Elemento 1
• Elemento 2
• Elemento 3
• Elemento 4
Listas Ordenadas:
1. Elemento 1
2. Elemento 2
3. Elemento 3
4. Elemento 4
Las listas desordenadas empiezan con el elemento <ul> y dentro contienen elementos
<li>. Aquí un ejemplo:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
Por otro lado, las listas ordenadas empiezan con el elemento <ol>, por ejemplo:
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ol>
2.2.4. Formularios
Los formularios web son uno de los principales puntos de interacción entre un usuario y un
sitio web o aplicación.
Todos los formularios comienzan con un elemento <form> que engloba a todo el formulario.
<form>
<!-- Elementos del Formularios-->
</form>
Por lo general, los datos del formulario se envían a un archivo en el servidor cuando el
usuario hace clic en el botón Enviar.
<form action="/action_page.php">
<label for="fname">Nombre</label><br>
<label for="lname">Apellido</label><br>
</form>
2.2.4.2. Atributo target
El atributo target especifica dónde se muestra la respuesta que se recibe después de enviar
el formulario.
Valor Definición
El atributo method especifica el método HTTP que se utilizará al enviar los datos del
formulario.
Los datos del formulario se pueden enviar como variables de URL (con method=“get”) o
como transacción posterior HTTP (con method=“post”).
<form method="get">
</form>
• <input>
• <label>
• <textarea>
• <button>
• <option>
• <select>
• <datalist>
El elemento <input> se usa para crear controles interactivos para formularios basados en
la web con el fin de recibir datos del usuario.
Hay disponible una amplia variedad de tipos de datos de entrada y widgets de control, que
dependen del dispositivo y el agente de usuario.
El elemento <input> es uno de los más potentes y complejos en todo HTML debido a la gran
cantidad de combinaciones de tipos y atributos de entrada.
Valor Definición
button Crea un botón el cual para definir el texto dentro de usamos el atributo
value=““.
radio Crea una casilla de opción, solo permite seleccionar una entre varias
opciones.
password Al igual que text crea un recuadro para insertar texto, pero este no es visible.
search Crea un campo similar a texto solo que la función de este es la búsqueda.
range Define una barra para seleccionar números donde por defecto va del 0 al 100
pero estos valores se pueden modificar con los atributos min=“” / max=““.
url Se utiliza para campos de entrada que deben contener una dirección URL.
Algunos de los atributos más importantes del elemento <input> son:
Atributo Definición
placeholder Indica una sugerencia breve que describe el valor esperado de un campo
de entrada.
El elemento <label> representa una etiqueta para un elemento en una interfaz de usuario.
Es una forma de indicar con texto de que se trata el campo que está visualizando. Por
ejemplo:
<form>
<label>Nombre: </label>
<input type="text">
</form>
Como podemos ver en el ejemplo el label indica que en el campo siguiente debe ingresar su
nombre y se visualiza de la siguiente manera:
Figura 2.10
El elemento <select> sirve para crear una lista con opciones. Las opciones van dentro de
etiquetas <option>.
<form>
<label>Selecciona un Nombre:</label>
<select>
<option>Renzo</option>
<option>Juan</option>
<option>Boti</option>
<option>Pedro</option>
</select>
</form>
Figura 2.11
El elemento <textarea> es similar al input de tipo texto con la diferencia de que textarea
define un campo de entrada de varias líneas (un área de texto). Se le puede definir un
tamaño con los atributos col y rows:
<form>
<textarea rows="10" cols="30"></textarea>
</form>
Figura 2.12
El elemento <button> crea un botón.
<button>Click Me!</button>
2.2.5. Tablas
Las tablas en HTML permiten organizar información de manera tabular. Una tabla es un
conjunto estructurado de datos distribuidos en filas y columnas (datos tabulados). Una
tabla permite buscar con rapidez y facilidad valores entre diferentes tipos de datos que
indiquen algún tipo de relación.
Al igual que los formularios las tablas también están contenidas por un elemento, este
elemento se llama <table>, de esta manera le indicamos al documento que se trata de una
tabla.
Las tablas están conformadas por celdas que se denotan con la etiqueta/elemento <td>, las
celdas son las que contienen la información. Por ejemplo:
<table>
<tr>
<td>Info</td>
<td>Info2</td>
<td>Info3</td>
</tr>
</table>
Por otro lado, como podemos ver en el ejemplo anterior, también existen las filas que se
denotan con la etiqueta <tr>. Aquí un ejemplo de una tabla con 2 filas:
<table>
<tr>
<td>Juan</td>
<td>Pedro</td>
<td>Matias</td>
</tr>
<tr>
<td>23</td>
<td>32</td>
<td>5</td>
</tr>
</table>
Además de las celdas y filas, existen los encabezados de las tablas y se denotan con la
etiqueta <th>.
Por ejemplo:
<table>
<tr>
<th>Persona 1</th>
<th>Persona 2</th>
<th>Persona 3</th>
</tr>
<tr>
<td>Juan</td>
<td>Pedro</td>
<td>Matias</td>
</tr>
<tr>
<td>23</td>
<td>32</td>
<td>5</td>
</tr>
</table>
Los encabezados se distinguen de las celdas ya que son los que indican de qué trata la
columna.
Figura 2.13
En HTML se pueden agregar imágenes, videos, audios y gifs. Son recursos importantes que
pueden proporcionar no sólo una mejor apariencia sino también brindar más información sin
depender tanto de textos largos.
La etiqueta <img> sirve para agregar imágenes al documento. Esta etiqueta diferencia de
las demás no cuenta con una etiqueta de cierre ya que no es necesario agregar información
dentro de la misma, sino que lo haremos a través de los atributos de los que dispone. Aquí
un ejemplo:
Como podemos ver, la etiqueta img no contiene una etiqueta de cierre y al momento de
crearla aparecen dos atributos: src, cuyo valor indica la ubicación de la imagen, podría ser
un link o la dirección del archivo. Por otro lado, está el atributo alt cuyo valor es el texto que
se va a mostrar en caso de que la imagen no se encuentre o falle.
El elemento <img> tiene más atributos, pero los más importantes aparte de src y alt son los
atributos width y height que sirven para establecer un alto y un ancho a la imagen, por
ejemplo:
<div>
</div>
El elemento <video> se usa para insertar videos dentro del documento. Tiene una etiqueta
de cierre y va de la mano de otro elemento: <source>. El elemento source se utiliza para
especificar la ubicación del video y de qué tipo de archivo se trata (mp4, ogg, etc.).
Atributo Utilidad
controls Activa los controles del video (Subir/Bajar Volumen, Pausar, Adelantar)
El elemento <source> no tiene una etiqueta de cierre y está contenida por el elemento
<video>. También cuenta con dos atributos importantes, src, que indica la ubicación del
video y type, que indica el formato del video. El formato se escribe especificando que es un
video y luego separado por una barra diagonal el formato del video ya sea mp4, ogg, etc.
</video>
Atributo Utilidad
Cabe aclarar que <source> tiene los mismos atributos dichos anteriormente, a diferencia
que esta vez en el atributo type especificaremos que el archivo es de tipo audio y el formato
correspondiente (mp3/wav/ogg).
</audio>
Los enlaces o hipervínculos se definen con la etiqueta <a> y su contenido es el texto que
sirve para la interacción con el enlace.
<a href="https://www.google.com/">Google</a>
Los enlaces tienen un atributo clave (href) que sirve para indicar la URL de algún sitio o para
navegar entre nuestros documentos. Por ejemplo:
<a href="./login.html">Login</a>
En el atributo href está especificada la ubicación de otro documento html. Para navegar
entre nuestras carpetas hasta llegar al archivo que queremos enlazar debemos empezar con
“./” esto quiere decir que estamos buscando en la misma carpeta. Si queremos salir un nivel
más arriba tenemos que agregar otro punto al principio, ósea “../”. Aquí un ejemplo:
Figura 2.14
Como podemos ver el archivo index.html (el archivo que estamos escribiendo) se encuentra
dentro de la carpeta main y en caso de querer enlazar index.html con contacto.html la
etiqueta quedaría de la siguiente manera.
<a href="../contacto.html">Contacto</a>
Con los dos puntos indicamos que queremos salir de la carpeta main y seleccionar un
archivo de afuera de la misma, en caso de querer seleccionar una carpeta aun anterior solo
haría falta otro punto “…/” y así tantas veces necesitemos.
Atributo Utilidad
href Sirve para indicar la ubicación a la cual nos queremos dirigir ya sea archivo o
un enlace a un sitio externo.
title Contiene información adicional sobre el enlace, como qué tipo de información
contiene la página o cosas que debes tener en cuenta en el sitio web.
2.2.7. Estilos
• En línea: quiere decir que se definen los estilos dentro de la misma etiqueta o
elemento.
• Con el elemento <style>: quiere decir que se definen los estilos de cualquier otro
elemento, dentro del elemento <style>, el cual puede estar en cualquier parte del
documento HTML. Aunque normalmente, si se usa, se coloca al principio del
documento.
• Con un archivo externo: en este caso se usa uno o más archivos CSS externos que
contienen los estilos de los elementos que se usarán en el documento HTML.
En el ejemplo podemos ver que el título y el párrafo cambian de color con la propiedad color.
Hay muchísimas propiedades para personalizar los elementos, pero por ahora solo veremos
los principales:
Propiedad Utilidad
color Cambia el color del texto, se puede poner el nombre del color o
el valor hexadecimal.
text-aling Cambia la alineación del texto ya sea left, right, center, justify
1. https://developer.mozilla.org/es/
2. https://www.w3schools.com/css/default.asp
3. https://developer.mozilla.org/es/docs/Learn/Common_questions/Web_mechanics/
What_is_a_URL