-
Notifications
You must be signed in to change notification settings - Fork 0
Week 2_2(es): Semántica & Organización
Ahora vamos a aprender a utilizar las etiquetas que añadan significados o que ayuden a organizar la página!
Elementos Estructurales(Structural elements) son elementos que contienen otros elementos y agregan significados o organización a la página.
Copien y peguen el siguiente código a su archivo de index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Blog!</title>
</head>
<body>
<h1>My Blog</h1>
<p>Pura Vida!</p>
<h2>Seoul, the city for Tech Junkies</h2>
<p>Posted on July 14, 2018</p>
<img src="img/seoul.jpg" width="100%">
<p>
Digital addicts will be relieved to know they’ll never have to wait too long for their internet fix in South Korea. The country was judged to have the world’s fastest internet connection speed for the 12th consecutive quarter last year, according to Akamai - the content delivery network (CDN) responsible for serving between 15 and 30 per cent of all web traffic.
</p>
<p>3 Comments | 2 Likes</p>
<h2>Jejudo, South Korea's Hawaii</h2>
<p>Posted on July 16, 2018</p>
<p>
Jeju is the capital of an island, Jejudo, which might just be the most popular holiday destination you’ve never heard of. Unesco-listed, and billed as South Korea’s answer to Hawaii, it's pure Instagram gold, and home to dramatic volcanic landscapes, underground caves, hiking trails and scenic beaches. Halla Mountain, at 1,940m above sea level, is South Korea’s highest peak, while the cone of Seongsan Ilchulbong, or “Sunrise Peak”, is particularly spectacular.
</p>
<p>
The most crowded flight path on Earth is the 280-mile hop from Seoul to Jeju International. More than 26 million passengers use Jeju airport each year - that’s more than any UK airport bar Gatwick and Heathrow. There were a staggering 64,991 departures between these two airports in 2017 – that works out at around 178 a day.
</p>
<p>2 Comments | 5 Likes</p>
<p>© YURI Corp. </p>
</body>
</html>Vamos a mostrarlo en el navegador.
Podemos utilizar el elemento estructural semántico para añadir significado a los segmentos de la página.
La etiqueta <article> es para un contenido que es independiente.
En el código que tenemos, se muestran dos artículos, y cada uno tiene título, fecha, texto y el número de comentarios y likes al final del artículo (metadata).
La etiqueta <header> se usa para los encabezados.
En el código que tenemos, el título y la consigna(slogan) de nuestro blog puede ser el encabezado de la página.
De la misma manera, el título y la fecha de cada artículo puede ser el encabezado de cada artículo. Por eso podemos utilizar la etiqueta <header>.
La etiqueta <footer> se usa para el pie de página.
En el código que tenemos, el nombre de la corporación de abajo de la página puede ser el pie de página.
El metadata también puede ser el pie de página para cada artículo, por eso vamos a utilziar la etiqueta <footer>.
Ahora el código parece como abajo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Blog!</title>
</head>
<body>
<header>
<h1>My Blog</h1>
<p>Pura Vida!</p>
</header>
<article>
<header>
<h2>Seoul, the city for Tech Junkies</h2>
<p>Posted on July 14, 2018</p>
</header>
<img src="img/seoul.jpg" width="100%">
<p>
Digital addicts will be relieved to know they’ll never have to wait too long for their internet fix in South Korea. The country was judged to have the world’s fastest internet connection speed for the 12th consecutive quarter last year, according to Akamai - the content delivery network (CDN) responsible for serving between 15 and 30 per cent of all web traffic.
</p>
<footer>
<p>3 Comments | 2 Likes</p>
</footer>
</article>
<article>
<header>
<h2>Jejudo, South Korea's Hawaii</h2>
<p>Posted on July 16, 2018</p>
</header>
<p>
Jeju is the capital of an island, Jejudo, which might just be the most popular holiday destination you’ve never heard of. Unesco-listed, and billed as South Korea’s answer to Hawaii, it's pure Instagram gold, and home to dramatic volcanic landscapes, underground caves, hiking trails and scenic beaches. Halla Mountain, at 1,940m above sea level, is South Korea’s highest peak, while the cone of Seongsan Ilchulbong, or “Sunrise Peak”, is particularly spectacular.
</p>
<p>
The most crowded flight path on Earth is the 280-mile hop from Seoul to Jeju International. More than 26 million passengers use Jeju airport each year - that’s more than any UK airport bar Gatwick and Heathrow. There were a staggering 64,991 departures between these two airports in 2017 – that works out at around 178 a day.
</p>
<footer>
<p>2 Comments | 5 Likes</p>
</footer>
</article>
<footer>
<p>© YURI Corp. </p>
</footer>
</body>
</html>Una página debe contener solo un encabezado y un pie de página en el nivel más alto.
También, un párrafo de código debe tener solo un encabezado y un pie de página en el nivel más alto.
No se ven los cambios en el navegador.
Pero, es buena idea tener los elementos estructurales semánticos en su código porque:
- Pueden identificar la estructura de la página fácilmente desde los nombres de los elementos.
- Pueden añadir estilos a sus elementos en una manera coherente. (Lo aprenderemos en CSS!)
La etiqueta <nav> se usa para navegar entre las páginas. Para hacer eso, vamos a crear dos páginas más, nombradas about.html y memo.html.
Vamos a agregar el siguiente código a cada archivo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Blog!</title>
</head>
<body>
<header>
<h1>About me</h1>
<p>I will tell you about me.</p>
</header>
<h2>Yuri Kim</h2>
<p>
I am a student who loves HTML and CSS!<br/>
Welcome to my blog!
</p>
<footer>
<p>© YURI Corp. </p>
</footer>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Blog!</title>
</head>
<body>
<header>
<h1>Memos</h1>
<p>Some memos are written here.</p>
</header>
<article>
<header>
<h2>Things to do</h2>
<p>Posted on July 14, 2018</p>
</header>
<p>
<ul>
<li>Learn HTML</li>
<li>Learn Illustrator</li>
<li>Learn Photoshop</li>
</ul>
</article>
<article>
<header>
<h2>My favorite Movies</h2>
<p>Posted on July 16, 2018</p>
</header>
<p>
<ul>
<li>Good Will Hunting</li>
<li>Attila Marcel</li>
<li>Midnight in Paris</li>
</ul>
</p>
</article>
<footer>
<p>© YURI Corp. </p>
</footer>
</body>
</html>Ahora, vamos a crear la barra de navegación usando la etiqueta <nav> en el top de la página index.html.
<header>
<h1>My Blog</h1>
<p>Pura Vida!</p>
<nav>
<ul>
<li><a href='index.html'>Blog</a></li>
<li><a href='about.html'>About</a></li>
<li><a href='memo.html'>Memo</a></li>
</ul>
</nav>
</header>Vamos a agregar el mismo código al about.html y al memo.html!
Ahora podemos navegar entre las páginas!
Los elementos estructurales no semánticos(Non-semantic structural elements) son elementos estructurales que no tienen significados pero se usan para organizar las páginas.
Uno de ellos es el elemento <div>.
El elemento <div> es block element y se usa para dividir la página en segmentos. A diferencia de <header>, <footer>, o <article>, la etiqueta <div> no tiene ningún significado pero solo divide las partes de la página.
Cuando no hay un elemento estructural semántico para dividir la página en secciones, podemos utilizar el elemento <div>.
Vamos a ver la página index.html. Dónde podemos añadir la etiqueta <div>?
El contenido de cada artículo está dentro de la etiqueta <p>.
Pero, digamos que queremos añadir estilo a cada contenido de artículo de una manera coherente.
En este caso, podemos utilizar la etiqueta <div> con el atributo class como abajo.
<header>
<h2>Seoul, the city for Tech Junkies</h2>
<p>Posted on July 14, 2018</p>
</header>
<div class="article-body">
<img src="img/seoul.jpg" width="100%">
<p>
Digital addicts will be relieved to know they’ll never have to wait too long for their internet fix in South Korea. The country was judged to have the world’s fastest internet connection speed for the 12th consecutive quarter last year, according to Akamai - the content delivery network (CDN) responsible for serving between 15 and 30 per cent of all web traffic.
</p>
</div>
<footer>
<p>3 Comments | 2 Likes</p>
</footer>
</article>
<article>
<header>
<h2>Jejudo, South Korea's Hawaii</h2>
<p>Posted on July 16, 2018</p>
</header>
<div class="article-body">
<p>
Jeju is the capital of an island, Jejudo, which might just be the most popular holiday destination you’ve never heard of. Unesco-listed, and billed as South Korea’s answer to Hawaii, it's pure Instagram gold, and home to dramatic volcanic landscapes, underground caves, hiking trails and scenic beaches. Halla Mountain, at 1,940m above sea level, is South Korea’s highest peak, while the cone of Seongsan Ilchulbong, or “Sunrise Peak”, is particularly spectacular.
</p>
<p>
The most crowded flight path on Earth is the 280-mile hop from Seoul to Jeju International. More than 26 million passengers use Jeju airport each year - that’s more than any UK airport bar Gatwick and Heathrow. There were a staggering 64,991 departures between these two airports in 2017 – that works out at around 178 a day.
</p>
</div>El valor del atributo class es "article-body" que hicimos nosotros.
Si cada artículo tiene el mismo valor en el atributo class, podemos añadir estilo a cada artículo en la manera coherente.
El <div> es la versión no semántica del elemento semántico de block level como <header>, <footer>, y <article>.
El <span> es la versión no semántica de in-line element como <strong> y <em>.
Mientras <strong> y <em> agrega el significado que el contenido es importante, la etiqueta <span> no tiene ningún significado.
Como la etiqueta <div>, podemos usar la etiqueta <span> con el atributo class para añadir estilo al contenido en la manera coherente.
Por ejemplo, podemos usar la etiqueta <span> como se muestra abajo.
<span class="south-korea">South Korea</span>