Scribd
Cargar
88 vistas13 páginas

Learning HTML

Cargado por

Josué Manuel Zacarias Gonzales
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 DOCX, PDF, TXT o lee en línea desde Scribd
88 vistas13 páginas

Learning HTML

Cargado por

Josué Manuel Zacarias Gonzales
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 DOCX, PDF, TXT o lee en línea desde Scribd

ELEMENTOS ESTRUCTURALES DE HTML

NOTACION HTML FUNCION


Este elemento delimita el código HTML. Puede
<html Lang = es></html> incluir el atributo lang para
definir el idioma del contenido del documento.
(lang es para declarar el idioma en el que vamos a
escribir el contenido de la
página)
Lista de idiomas.
https://en.wikipedia.org/wiki/List_of_ISO_639-
1_codes
Este elemento se usa para definir la información
necesaria para configurar la
<head></head> página web, como el título, el tipo de codificación
de caracteres y los archivos externos
requeridos por el documento.
Este elemento delimita el contenido del
<body><body> documento (la parte visible de la
página).

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

</html>

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

</head>
</html>

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

</head>
<body>

</body>
</html>
CABECERA DEL PROYECTO HTML
NOTACION EN HTML FUNCIONALIDAD
<title></title> Este elemento define el título de la página.
Este elemento define la URL usada por el navegador para establecer la
ubicación real de las URL relativas. El elemento debe incluir el atributo
<base> href para declarar la URL base. Cuando se declara este elemento, en
lugar de la URL actual, el navegador usa la URL asignada al atributo href
para completar las URL relativas.
Este elemento representa metadatos asociados con el documento,
como la descripción del documento, palabras claves, el tipo de
<meta> codificación de caracteres, etc. El elemento puede incluir los atributos
name para describir el tipo de metadata, content para especificar el
valor, y charset para declarar el tipo de codificación de caracteres a
utilizar para procesar el contenido.
Este elemento especifica la relación entre el documento y un recurso
externo (generalmente usado para cargar archivos CSS). El elemento
<link> puede incluir los atributos href para declarar la ubicación del recurso, rel
para definir el tipo de relación, media para especificar el medio al que el
recurso está asociado (pantalla, impresora, etc.), y type y sizes para
declarar el tipo de recurso y su tamaño (usado a menudo para cargar
iconos).
<style> Este elemento se usa para declarar estilos CSS dentro del documento
<script> Este elemento se usa para cargar o declarar código JavaScript

Se pueden incluir múltiples elementos <meta> para declarar información adicional. Por ejemplo, dos datos que los navegadores pueden considerar a la hora de
procesar nuestros documentos son la descripción de la página y las palabras claves que identifican su contenido. Estos elementos <meta> requieren el atributo
name con los valores "description" y "keywords", y el atributo content con el texto que queremos asignar como descripción y palabras clave (las palabras clave
se deben separar por comas).

<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<meta charset="utf-8">
<meta name="description" content="Este es un documento HTML5">
<meta name="keywords" content="HTML, CSS, JavaScript">
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<meta charset="utf-8">
<meta name="description" content="Este es un documento HTML5">
<meta name="keywords" content="HTML, CSS, JavaScript">
<link rel="icon" href="imagenes/favicon.png" type="image/png"
sizes="16x16">
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
</body>
</html>

CUERPO DEL PROYECTO HTML


NOTACIÓN EN HTML FUNCIONALIDAD
<div></div> Este elemento define una división genérica. Se usa cuando no se puede
aplicar ningún otro elemento.
<main></main> Este elemento define una división que contiene el contenido principal del
documento (el contenido que representa el tema central de la página).
<nav> </nav> Este elemento define una división que contiene ayuda para la navegación,
como el menú principal de la página o bloques de enlaces necesarios para
navegar en el sitio web.
<section></section> Este elemento define una sección genérica. Se usa frecuentemente para
separar contenido temático, o para generar columnas o bloques que ayudan
a organizar el contenido principal.
<aside></aside> Este elemento define una división que contiene información relacionada con
el contenido principal pero que no es parte del mismo, como referencias a
artículos o enlaces que apuntan a publicaciones anteriores.
<article></article> Este elemento representa un artículo independiente, como un mensaje de
foro, el artículo de una revista, una entrada de un blog, un comentario, etc.
<header></header> Este elemento define la cabecera del cuerpo o de secciones dentro del
cuerpo.
<footer></footer> Este elemento define el pie del cuerpo o de secciones dentro del cuerpo.
DISEÑO DEL PROYECTO HTML
En la barra superior, descrita como cabecera en la Figura , ubicamos el logo, el nombre del sitio, los
subtítulos y una descripción breve de nuestro sitio o página web. En la barra de navegación situada debajo
es donde la mayoría de los desarrolladores ofrecen un menú o una lista de enlaces para navegar en el sitio.
El contenido relevante de la página se ubica en el medio del diseño, donde generalmente encontramos
artículos o noticias, y también enlaces a documentos relacionados o recursos. En el ejemplo de la Figura ,
esta sección se ha dividido en dos columnas, información principal y barra lateral, pero los diseñadores la
adaptan a sus necesidades insertando columnas adicionales o dividiendo las columnas en bloques más
pequeños. En la parte inferior de un diseño tradicional, nos encontramos con otra barra llamada barra
institucional. La llamamos de este modo porque en este aréa es donde mostramos información general
acerca del sitio web, el autor, la compañía, los enlaces relacionados con reglas de uso, términos y
condiciones, el mapa del sitio, etc. Como mencionamos anteriormente, los elementos de HTML5 se han
diseñado siguiendo este patrón. En la Figura aplicamos los elementos introducidos anteriormente para
definir el diseño de la Figura.

El primer elemento de un diseño tradicional es <header>. No debemos confundir este elemento con el
elemento <head> utilizado anteriormente para crear la cabecera del documento. Al igual que <head>, el
elemento se ha definido para facilitar información introductoria <header> como títulos o subtítulos, pero
no para el documento, sino para el cuerpo o secciones dentro del cuerpo del documento. En el siguiente
ejemplo, este elemento se usa para definir el título de la página web.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<meta charset="utf-8">
<meta name="description" content="Este es un documento HTML5">
<meta name="keywords" content="HTML, CSS, JavaScript">
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
Este es el título
</header>
</body>
</html>
La siguiente sección de nuestro ejemplo es la barra de navegación.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<meta charset="utf-8">
<meta name="description" content="Este es un documento HTML5">
<meta name="keywords" content="HTML, CSS, JavaScript">
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
Este es el título
</header>
<nav>
Principal | Fotos | Videos | Contacto
</nav>
</body>
</html>

Otro ejemplo de especificidad es el que ofrecen los elementos <main>, <section>, y <aside>, que se han diseñado para organizar el contenido
principal del documento. En nuestro diseño, estos elementos representan las secciones que llamamos Información
principal y Barra lateral. Debido a que la sección Información principal abarca más, su contenido generalmente se representa por elementos
<section> (uno o varios, dependiendo del diseño), y debido al tipo de información que contiene, el elemento <aside> se ubica en los laterales de
la página. La mayoría del tiempo, estos dos elementos son suficientes para representar el contenido principal, pero como se pueden usar en
otras áreas del documento, se implementa el elemento <main> para agruparlos, como lo muestra el siguiente ejemplo.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<meta charset="utf-8">
<meta name="description" content="Este es un documento HTML5">
<meta name="keywords" content="HTML, CSS, JavaScript">
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
Este es el título
</header>
<nav>
Principal | Fotos | Videos | Contacto
</nav>
<main>
<section>
Artículos
</section>
<aside>
Cita del artículo uno
Cita del artículo dos
</aside>
</main>
</body>
</html>

El elemento <aside> describe la información que contiene, no un lugar en la estructura, por lo que se podría ubicar en cualquier
parte del diseño, y se puede usar mientras su contenido no se considere el contenido principal del documento.
Como los artículos de un diario, las páginas web generalmente presentan la información dividida en secciones que comparten
características similares. El elemento <article> nos permite identificar cada una de estas partes. En el siguiente ejemplo,
implementamos este elemento para representar las publicaciones que queremos mostrar en la sección principal de nuestra página
web.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<meta charset="utf-8">
<meta name="description" content="Este es un documento HTML5">
<meta name="keywords" content="HTML, CSS, JavaScript">
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
Este es el título
</header>
<nav>
Principal | Fotos | Videos | Contacto
</nav>
<main>
<section>
<article>
Este es el texto de mi primer artículo
</article>
<article>
Este es el texto de mi segundo artículo
</article>
</section>
<aside>
Cita del artículo uno
Cita del artículo dos
</aside>
</main>
</body>
</html>

En este punto, ya contamos con la cabecera y el cuerpo del documento, secciones con ayuda para la navegación y el contenido, e
información adicional a un lado de la página. Lo único que nos queda por hacer es cerrar el diseño y finalizar el cuerpo del
documento. Con este fin, HTML ofrece el elemento <footer>.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<meta charset="utf-8">
<meta name="description" content="Este es un documento HTML5">
<meta name="keywords" content="HTML, CSS, JavaScript">
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
Este es el título
</header>
<nav>
Principal | Fotos | Videos | Contacto
</nav>
<main>
<section>
<article>
Este es el texto de mi primer artículo
</article>
<article>
Este es el texto de mi segundo artículo
</article>
</section>
<aside>
Cita del artículo uno
Cita del artículo dos
</aside>
</main>
<footer>
&copy; Derechos Reservados 2016
</footer>
</body>
</html>

la sección Barra institucional se define con el elemento <footer>. Esto se debe a que la sección representa el final (o pie) de nuestro documento
y se usa comúnmente para compartir información general acerca del autor del sitio o la compañía detrás del proyecto, como derechos de autor,
términos y condiciones, etc. El elemento <footer> se usa para representar el final del documento y tiene el objetivo
principal ya mencionado, sin embargo, este elemento y el elemento <header> también se pueden utilizar dentro del cuerpo para representar el
comienzo y final de una sección.

la cadena de caracteres &copy; al pie del documento. Sin embargo, cuando se carga el documento, el navegador reemplaza estos caracteres por el carácter de
derechos de autor (©). Estas cadenas de caracteres se denominan entidades (carácter entities) y representan caracteres especiales que no se encuentran en el
teclado o tienen un significado especial en HTML, como el carácter de derechos de autor (©), el de marca registrada (®) o los paréntesis angulares usados por
HTML para definir los elementos (< y >). Cuando necesite incluir en sus textos uno de estos caracteres, debe escribir la entidad en su lugar. Por ejemplo, si
quiere incluir los caracteres < y > dentro de un texto, debe representarlos con las cadenas de caracteres &lt; y &gt;. Otras entidades de uso común son &amp;
(&), &quot; ("), &apos; ('), &pound; (£), y &euro; (€).

ATRIBUTOS LOCALES

NOTACION EN HTML FUNCIONALIDAD


Id Este atributo nos permite asignar un identificador único a un
elemento.
class Este atributo asigna el mismo identificador a un grupo de elementos.

El atributo id identifica elementos independientes con un valor único, mientras que el valor del atributo class se puede duplicar para asociar
elementos con características similares.

Por ejemplo, si tenemos dos o más elementos <section> que necesitamos diferenciar entre sí, podemos asignar el atributo id a cada uno con
valores que declaran sus propósitos.
<main>
<section id="noticias">
Artículos largos
</section>
<section id="noticiaslocales">
Artículos cortos
</section>
<aside>
Quote from article one
Quote from article two
</aside>
</main>
Por otro lado, si lo que necesitamos es identificar un grupo de elementos con características similares, podemos usar el atributo
class. El siguiente ejemplo divide el contenido de una sección con elementos <div>. Debido a que todos tienen un contenido similar,
compartirán los mismos estilos y, por lo tanto, deberíamos identificarlos con el mismo valor (todo son de la misma clase).
<main>
<section>
<div class="libros">Libro: IT, Stephen King</div>
<div class="libros">Libro: Carrie, Stephen King</div>
<div class="libros">Libro: El resplandor, Stephen King</div>
<div class="libros">Libro: Misery, Stephen King</div>
</section>
<aside>
Cita del artículo uno
Cita del artículo dos
</aside>
</main>
tenemos un único elemento <section> con el que representamos el contenido principal del documento, pero hemos creado varias
divisiones con elementos <div> para organizar el contenido. Debido a que estos elementos se han identificado con el atributo class y
el valor "libros", cada vez que accedemos o modificamos elementos referenciando la clase libros, todos estos elementos se ven
afectados.

Contenido
Hemos concluido la estructura básica de nuestro sitio web, pero todavía tenemos que trabajar en el contenido. Los elementos HTML
estudiados hasta el momento nos ayudan a identificar cada sección del diseño y asignarles un propósito, pero lo que realmente
importa en una página web es lo que hay dentro de esas secciones. Debido a que esta información está compuesta por diferentes
elementos visuales, como títulos, textos, imágenes y vídeos, entre otros, HTML define varios elementos para representarla.
TEXTO
El medio más importante que puede incluir un documento es texto. HTML define varios elementos para determinar el propósito de
cada palabra, frase, o párrafo en el documento. El siguiente elemento se usa para representar títulos.

NOTACION EN HTML FUNCIONALIDAD


<h1></h1> Este elemento representa un título. El título se declara entre las etiquetas de
apertura y cierre. HTML también incluye elementos adicionales para
representar subtítulos, hasta seis niveles ( <h2>, <h3>, <h4>, <h5>, y <h6>).

<header>
<h1>Este es el título</h1>
</header>

Los navegadores otorgan estilos por defecto a los elementos <h> que incluyen márgenes y diferentes tamaños de letras,
dependiendo de la jerarquía (<h1> es el de más alta jerarquía y <h6> el de menor jerarquía).
NOTACION EN HTML FUNCIONALIDAD
<P> </P> Este elemento representa un párrafo. Por defecto, los navegadores le
asignan un margen en la parte superior para separar un párrafo de
otro.
<pre> </pre> Este elemento representa un texto con formato predefinido,
como código de programación o un poema que requiere que los
espacios asignados a cada carácter y los saltos de línea se
muestren como se han declarado originalmente.
<span> </span> Este elemento puede contener un párrafo, una frase o una
palabra. No aplica ningún estilo al texto, pero se usa para
asignar estilos personalizados, como veremos en próximos
capítulos.

El elemento <p> se utiliza ampliamente para representar el cuerpo del texto. Por defecto, los navegadores les asignan estilos que
incluyen márgenes y un salto de línea para diferenciar un párrafo de otro. Debido a estas características, también podemos utilizar
los elementos <p> para dar formato a líneas de texto, como las citas de nuestro ejemplo.

<aside>
<p>Cita del artículo uno</p>
<p>Cita del artículo dos</p>
</aside>

____________________________________________________________________________________________________________
Cuando un párrafo incluye múltiples espacios, el elemento <p> automáticamente reduce ese espacio a solo un carácter e ignora el
resto. El elemento también hace algo similar con los saltos de línea. Todo salto de línea introducido en el documento no se considera
cuando el texto se muestra en la pantalla. Si queremos que estos espacios y saltos de línea se muestren al usuario, en lugar de usar el
elemento <p> tenemos que usar el elemento <pre>.
<article>
<pre>
La muerte es una quimera: porque mientras yo existo, no existe la
muerte;
y cuando existe la muerte, ya no existo yo.
Epicuro de Samos
</pre>
</article>

El elemento <pre> se configura por defecto con márgenes y un tipo de letra que respeta el formato asignado al texto original, lo que
lo hace apropiado para presentar código de programación y cualquier clase de texto con formato predefinido. En casos como el del
ejemplo anterior, donde lo único que necesitamos es incluir saltos de línea dentro del párrafo, podemos usar otros elementos
que se han diseñado específicamente con este propósito.

NOTACION EN HTML FUNCIONALIDAD


<br> Este elemento se usa para insertar saltos de línea.
<wbr> Este elemento sugiere la posibilidad de un salto de línea para
ayudar al navegador a decidir dónde cortar el texto cuando no
hay suficiente espacio para mostrarlo entero.

Estos elementos se insertan dentro del texto para generar saltos de línea. Por ejemplo, podemos escribir el párrafo anterior en una
sola línea e insertar elementos <br> al final de cada frase para presentarlas en líneas aparte.

<article>
<p>La muerte es una quimera: porque mientras yo existo, no existe la
muerte;<br>y cuando existe la muerte, ya no existo yo. <br>Epicuro de
Samos</p>
</article>

A diferencia de los elementos <p> y <pre>, los elementos <br> y <wbr> no asignan ningún margen o tipo de letra al texto, por lo
que las líneas se muestran como si pertenecieran al mismo párrafo y con el tipo de letra definida por defecto.

Debido a que no todas las palabras en un texto tienen el mismo énfasis, HTML incluye los siguientes elementos para declarar un
significado especial a palabras individuales o frases completas.
NOTACION EN HTML FUNCIONALIDAD
<em> </em> Este elemento se usa para indicar énfasis. El texto se muestra por defecto con
letra cursiva.
<strong> </strong> Este elemento es utiliza para indicar importancia. El texto se muestra por
defecto en negrita.
<i> </i> Este elemento representa una voz alternativa o un estado de humor, como un
pensamiento, un término técnico, etc. El texto se muestra por defecto con
letra cursiva.
<u> </u> Este elemento representa texto no articulado. Por defecto se muestra
subrayado.
<b></b> Este elemento se usa para indicar importancia. Debería ser implementado solo
cuando ningún otro elemento es apropiado para la situación. El texto se
muestra por defecto en negrita.
____________________________________________________________________________________________________________
<article>
<p>La muerte es una <em>quimera</em>: porque mientras yo existo, no
existe la <i>muerte</i>;<br>y cuando existe la <i>muerte</i>,
<strong>ya no existo yo</strong>. <br>Epicuro de Samos</p>
</article>
________________________________________________________________________________________________________________________
La especificidad de elementos estructurales también se manifiesta en algunos de los elementos utilizados para definir el contenido. Por ejemplo, HTML incluye
los siguientes elementos para insertar textos que tienen un propósito claramente definido.

NOTACION EN HTML FUNCIONALIDAD


<mark> </mark> Este elemento resalta texto que es relevante en las circunstancias actuales
(por ejemplo, términos que busca el usuario).
<small> </small> Este elemento representa letra pequeña, como declaraciones legales,
descargos, etc.
<cite> </cite> Este elemento representa el autor o título de una obra, como un libro, una
película, etc.
<address></address Este elemento representa información de contacto. Se implementa con
frecuencia dentro de los pies de página para definir la dirección de la
empresa o el sitio web.
<time> </time> Este elemento representa una fecha en formato legible para el usuario.
Incluye el atributo datetime para especificar un valor en formato de
ordenador y el atributo pubdate, el cual indica que el valor asignado al
atributo datetime representa
la fecha de publicación.
<code> </code> Este elemento representa código de programación. Se usa en conjunto con el
elemento <pre> para presentar código de programación en el formato
original.
<data></data> Este elemento representa datos genéricos. Puede incluir el atributo value
para
especificar el valor en formato de ordenador (por ejemplo,
<data value="32">Treinta y Dos</data>).

Como estos elementos representan información específica, normalmente se utilizan para complementar el contenido de otros
elementos. Por ejemplo, podemos usar el elemento <time> para declarar la fecha en la que un artículo se ha publicado y otros
elementos como <mark> y <cite> para otorgarle significado a algunas partes del texto.

<article>
<header>
<h1>Título del artículo</h1>
<time datetime="2016-10-12" pubdate>publicado 12-10-2016</time>
</header>
<p>La muerte es una quimera: porque mientras yo <mark>existo</mark>,
no existe la muerte;<br>y cuando existe la muerte, ya no existo
yo.<br><cite>Epicuro de Samos</cite></p>
</article>

IMPORTANTE: el valor del atributo datetime del elemento <time> se debe declarar en formato de ordenador. Este formato requiere la sintaxis 2016-10-
12T12:10:45, donde la T se puede reemplazar por un espacio en blanco y la parte menos significativa se puede ignorar (por ejemplo, 2016-10-12

Lo básico: el atributo pubdate es un atributo booleano. Este tipo de atributos no requieren un valor; representan el valor true (verdadero cuando
están presentes o false (falso) en caso contrario.

El resto de los elementos mencionados arriba también se combinan con otros elementos para complementar sus contenidos. Por ejemplo, los elementos
<address> y <small> se insertan normalmente dentro de un elemento <footer> para resaltar información acerca de la página o una sección.

También podría gustarte