Unidad 2.1 - Atributos - Enlaces - Listas - Tablas

Lenguaje de Programación - 2021
Unidad 2.1: HTML 5
Atributos Los atributos son valores adicionales que

configuran los elementos y/o ajustan su comportamiento.
En términos generales hay dos tipos de

atributos:
• Comunes:
Su sintaxis es ->
atributo="valor"
•
Booleanos:
Su sintaxis es ->
atributo
Esto sucede porque en HTML hay ciertos atributos que tienen esta peculiaridad,
si existe funciona y si no existe no funciona. Vamos a ver algunos atributos a
continuación:
<html
lang="es">
El primer atributo que tenemos es lang="es", en este caso lo que estamos haciendo es
configurar el documento HTML diciéndole que su idioma va a ser español. Si fuera en inglés
pondremos "en" si fuera en alemán, pues pondriamos "de".
Visual Studio Code nos avisa si pasamos por encima del atributo, una pequeña descripción.
Y nos da una referencia a MND Reference que nos describe esa etiqueta.
/header>
section
>
The h2 element represents a section
heading. <h2> karti MDN Reference
<h2>Introducción</h2> <div
style="display:flex">
Atributos Globales Importantes Class => este atributo nos sirve

para darle estilos a nuestra página a traves de CSS y lo podemos ver en el
siguiente ejemplo.
<head>
<meta charset="UTF-8" /> /> <title>Los Vengadores</title> <style>
- parrafo-1{
color: red;
</style> k/head> <body>
<h2> Los vengadores (The Avengers)</h2> <article>

<h2>Introducción</h2> <div style="display:flex">
<p class="parrafo-1"> Este es un texto </p> </div>
</section> k/body>
id => Es un identificador único que se utiliza para seleccionar el

elemento desde JS y para hacer navegación a través de anclas
siguiente manera :
<body>
<h2 id="titulo"> Los vengadores (The Avengers)</h2> <script>
const p = document.getElementById('titulo')
console.log(p.textContent)
</script> </body>
title => Es un atributo que ayuda a la accesibilidad mostrando una descripción del
elemento al que pertenece. Aparece el mensaje en un tooltip. <body>
Ksection>
<h2 title="Una página dedicada a marvel">

Los vengadores (The Avengers)</h2>
<article>
<h2>Introducción</h2> <div
style="display:flex">
<p class="parrafo-1"> Este es un texto </p> </div> </article>
</section>
</body>
data-* => Es un atributo que nos permite guardar algún valor en

la etiqueta HTML
kbody>
<h2 id="titulo"> Los vengadores (The

Avengers)</h2> <p id="parrafo" data-
ejemplo="Datos de ejemplo"> Este es un texto </p>
<script>
const p = document.getElementById('titulo'), const parrafo =

document.getElementById('parrafo'),
console.log(p.textContent)
console.log (parrafo.dataset.ejemplo)
</script>
</body>
Si bien a nivel de HTML no les parece útil en este momento, pero marcarlo y
grabarse estos atributos porque en un futuro cuando vean la parte de JavaScript
estos atributos les van a ser muy útiles.
Enlaces
con otra página web, con un recurso tanto interno como externo, o con
otro sitio web.
Tienen el atributo obligatorio href, donde le especificamos la ruta del recurso o sitio
que queremos obtener.
También tienen el atributo target, que configura como queremos visualizar el recurso o sitio
que solicitamos.
Se establece con la etiqueta a que viene de ancla , una vez colocada se viene el
atributo hrefy también tiene el atributo target que lo vamos a ver más adelante. Dentro
del href, le tenemos que dar la ruta de donde está nuestro recurso, por ejemplo el
siguiente código nos llevará a nuestro index.html.
<a href="/" >Inicio</a> ka

href="/contacto.html"
>Contacto</a>
Al hacer click en Inicio nos reenvía directamente a nuestra página de Home.

Y si hacemos click en Contacto nos redirige a la página de Contactos.
Existen las rutas absolutas y las rutas

relativas.
Rutas absolutas: Tienen un protocolo, http o https y son únicas en la red. Se

suele
utilizar para rutas
externas.
• Rutas relativas: Pueden ser relativas al punto donde nos encontramos o
relativas a la
raíz del proyecto. No usan
protocolo.
Si el recurso se encuentra al mismo nivel (en la misma carpeta) pondremos

únicamente el nombre del archivo.
Si necesitamos salir de la carpeta actual usaremos / y se pone uno por cada nivel
(carpeta) de la que queremos salir.
Atributos en los enlaces
target: define donde se abrirá el recurso solicitado. Por norma general siempre que
uses rutas absolutas deberás poner como valor"_blank” El valor por defecto es "_self'
( es como no poner nada)
download: Atributo booleano, sirve para descargar el recurso solicitado, siempre este
recurso debe de estar en tu mismo servidor.
Por lo general, las imágenes, se guardan en la carpeta images que está dentro de la
carpeta
Navegación a través de anclas
Para realizar un menú de navegación utilizamos la etiqueta <nav> </nav>, en este

caso particular navegaremos en la misma página a través de anclas, veamos el siguiente
ejemplo:
<!DOCTYPE html> <html lang="es">
<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>
<h1>Blog</h1> <nav>
<p><a href="#post-1">Post 1</a></p> <p><a href="#post-2">Post 2</a></p>
<p><a href="#post-3">Post 3</a></p>
<p><a href="#post-4">Post 4</a></p> </nav>
<article id="post-1">
<h2>Post 1</h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and
scrambled it to make a type specimen book.</p> </article>
'<article id="post-2">
<h2>Post 2</h2>
industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and
scrambled it to make a type specimen book.</p> </article> '<article

id="post-3">
<h2>Post 3</h2>
<p> Lorem Ipsum is simply dummy text of the printing and

typesetting industry. Lorem Ipsum has been the
scrambled it to make a type specimen book.</p> </article> <article
id="post-4">
<h2>Post 4</h2>
scrambled it to make a type specimen book.</p>
'</article> </body>
k/html>
Listas
Las listas en HTML sirven para listar contenido. En función del tipo de contenido
de nuestra lista tenemos tres tipos de listas:
• ul -> unordered list: Se utilizan cuando el orden de los elementos no influye

lista de
compras)
ol -> ordered list: Se utilizan cuando el orden de los elementos es importante( top
10)
• dl -> definition list: Se utilizan para hacer una lista de definiciones(diccionario)
Para crear una lista desordenada es tan sencillo como poner un

<ul></ul> y aqui dentro es donde debemos colocar los items de esa lista. Cada
elemento de la lista debera de ir con un <li></li>
kul>
<li>Pan</li>
<li>Dulce de Leche</li> <li>Manteca</li>

</ul>
El orden en esta lista no importa, es decir que para el navegador le da igual si pan va
primero o al último, lo pongamos donde lo pongamos, la información que
nos va a llegar es exactamente la misma.
Un caso real de un <ul> es en la navegación que nos queda de la siguiente

manera:
<nav>
<ul>
<li><a href="#post-2">Post 2</a></li> <li><a href="#post-3">Post

3</a></li> <li><a href="#post-4">Post 4</a></li> <li><a href="#post-
1">Post 1</a></li>
F
</ul>
</nav>
Todos los menús que ves que son horizontales están construida de esta
forma, solo que tienen CSS para mostrarlos así.
Para una lista ordenada la semántica es la misma:
kh2>Orden de aprendizaje web</h2>

<ol>
<li>HTML</li> <li>CSS</li>
<li>JAvaScript</li> </ol>
El tercer y último tipo de lista que existe en HTML son las listas de definición. Estas se
escriben con <dl> </dl> y cada elemento de una lista de definición lleva dos etiquetas:
•
•
dt -> Definition term: El término que vamos a definir dd-> Definition description: La
descripción del término.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd> <dt>CSS</dt>
<dd>Cascade Style Sheets</dd> </dl>
Listas anidadas y atributos de las listas Se pueden

construir listas anidadas teniendo un <ul>o <ol> dentro de otro según sea
necesario.
kol>
<li>HTML
<ul>
<li>Listas</li>
<li>Enlaces</li>
</ul> </li>
<li>CSS</li>
<li>JAvaScript</li> </ol>
Los atributos de las listas no son muchos:
ul -> Type: Estilo de numeración(1, A, a , 1,i)

ol -> Type: Estilo de los items( disc, square, circle)
start: Inicio de la secuencia (un número)
Pero estas son las opciones que nos da HTML. Con CSS las opciones son infinitas.
Tablas
En esta sección vamos a hablar sobre las tablas en HTML hace tiempo las
tablas se utilizaban para colocar todo el contenido dentro de una web a día de hoy.
Eso es algo que ya no tiene ningún sentido hacerlo porque tenemos herramientas
muchísimo mejores para estructurar el contenido dentro de CSS.
Entonces aquí vamos a ver cómo se usan las tablas para representar el contenido tabulado,
que sería el contenido que queremos mostrar dentro de una tabla, cuya finalidad es que el
contenido en concreto esté estructurado y no haya una forma mejor que estructurarlo en una
tabla.
Estructura básica de una tabla
table -> Etiqueta que encierra una tabla tr -> table row, etiqueta que construye una fila td ->
table data, etiqueta que construye una celda
Importante: el número de celdas dentro de un tr establecerá el número de

columnas de la tabla.
<table>
<tr>
<td>8:30 - 9:30</td>
<td>Matemáticas</td>
<td>Sociales</td> <td>Matemáticas</td>
<td>Matemáticas</td>
</tr>
</table>

Los títulos de las tablas se establecen con la etiqueta caption, es una etiqueta
opcional, y
según la especificación esa etiqueta se coloca justo después de la etiqueta
table. Las cabeceras de las tablas se establecen con la etiqueta thead. Dentro
tendremos una
etiqueta tr normal, pero en el caso de las celdas, las estableceremos
con la etiqueta th en lugar de td. El contenido de la tabla debe ir dentro de una
etiqueta tbody para representar el cuerpo de la tabla. De forma opcional podemos
colocar tfoot a la tabla para establecer el pie de tabla, esto es algo que algunas
tablas tienen como suma de cantidades o total.
<table>
<caption>HORARIO DE CLASES</caption> <thead>

<tr>
<th></th> <th>L</th> <th>M</th> <th>M</th> <th>]</th>
<th>V</th> </tr> </thead> <tbody>

<tr>
<td>8:30 - 9:30</td> <td>Matemáticas</td> <td>Matemáticas</td>

<td>Sociales</td> <td>Matemáticas</td>
<td>Matemáticas</td> </tr> </tbody> <tfoot>
<tr>
<td>Total de asignaturas</td>
<td>12</td>
</tr> </tfoot> </table>

Atributos de una tabla
Para hacer que las celdas ocupen más de una fila o más de una columna tenemos 2
atributos:
rowspan: sirve para que una celda ocupe más de una fila, el valor por defecto
es 1 colspan: sirve para que una celda ocupe más de una columna, el valor por
defecto es 1.
<td rowspan="2">Matemáticas</td>
Si necesitamos seleccionar una columna, tenemos la etiqueta colgroup, que nos

permite seleccionar una columna en concreto. Dentro pondremos tantas etiquetas col
como columnas tengamos, cada etiqueta col equivaldrá a una columna siguiendo el
mismo orden que tiene la tabla.
Si necesitamos que una etiqueta col agrupa más de una columna, tenemos el atributo span,
que funciona exactamente igual que rowspan y colspan.
Para seleccionar una columna en particular podemos usar en estilo el siguiente

col:nth-child(2)

Unidad 2.1 - Atributos - Enlaces - Listas - Tablas

Cargado por

Copyright:

Formatos disponibles

Unidad 2.1 - Atributos - Enlaces - Listas - Tablas

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Unidad 2.1 - Atributos - Enlaces - Listas - Tablas

Cargado por

Copyright:

Formatos disponibles

Lenguaje de Programación - 2021

Unidad 2.1: HTML 5

Atributos Los atributos son valores adicionales que

En términos generales hay dos tipos de

Atributos Globales Importantes Class => este atributo nos sirve

<meta charset="UTF-8" /> /> <title>Los Vengadores</title> <style>

</style> k/head> <body>

<h2> Los vengadores (The Avengers)</h2> <article>

id => Es un identificador único que se utiliza para seleccionar el

Lenguaje de Programación - 2021

<h2 title="Una página dedicada a marvel">

data-* => Es un atributo que nos permite guardar algún valor en

<h2 id="titulo"> Los vengadores (The

const p = document.getElementById('titulo'), const parrafo =

<a href="/" >Inicio</a> ka

Al hacer click en Inicio nos reenvía directamente a nuestra página de Home.

Existen las rutas absolutas y las rutas

Rutas absolutas: Tienen un protocolo, http o https y son únicas en la red. Se

Si el recurso se encuentra al mismo nivel (en la misma carpeta) pondremos

Atributos en los enlaces

Navegación a través de anclas

Para realizar un menú de navegación utilizamos la etiqueta <nav> </nav>, en este

<!DOCTYPE html> <html lang="es">

Lenguaje de Programación - 2021

scrambled it to make a type specimen book.</p> </article> '<article

<p> Lorem Ipsum is simply dummy text of the printing and

Lenguaje de Programación - 2021

• ul -> unordered list: Se utilizan cuando el orden de los elementos no influye

Para crear una lista desordenada es tan sencillo como poner un

<li>Dulce de Leche</li> <li>Manteca</li>

Un caso real de un <ul> es en la navegación que nos queda de la siguiente

<li><a href="#post-2">Post 2</a></li> <li><a href="#post-3">Post

Para una lista ordenada la semántica es la misma:

kh2>Orden de aprendizaje web</h2>

<dd>Cascade Style Sheets</dd> </dl>

Listas anidadas y atributos de las listas Se pueden

Lenguaje de Programación - 2021

Los atributos de las listas no son muchos:

ul -> Type: Estilo de numeración(1, A, a , 1,i)

Estructura básica de una tabla

Importante: el número de celdas dentro de un tr establecerá el número de

Lenguaje de Programación - 2021

<caption>HORARIO DE CLASES</caption> <thead>

<th></th> <th>L</th> <th>M</th> <th>M</th> <th>]</th>

<th>V</th> </tr> </thead> <tbody>

<td>8:30 - 9:30</td> <td>Matemáticas</td> <td>Matemáticas</td>

</tr> </tfoot> </table>

Atributos de una tabla

Si necesitamos seleccionar una columna, tenemos la etiqueta colgroup, que nos

Para seleccionar una columna en particular podemos usar en estilo el siguiente

También podría gustarte