Anatomía Del Código HTML5

Anatomía del código HTML5 – Las partes y su
significado.
DOCTYPE
1 <!DOCTYPE html>
La etiqueta doctype declara el tipo de documento, por lo que esta está señalando que este es un documento
HTML.
HTML
1 <html></html>
Delimita el documento HTML.
Atributo a destacar
LANG
1 <html lang="es"></html>
Indica el lenguaje de contenido del código.
HEAD
1 <head></head>
El elemento head delimita la cabecera del documento, entre sus etiquetas contiene información como scripts,
metadatos, estilos, ubicación de documentos de estilos, título de la página, etc.
META
1 <meta name="description" content="Descripción de la WEB">
Las meta etiquetas se utilizan para identificar propiedades del documento como por ejemplo el autor, el título y
la descripción que mostrarán los buscadores, etc.
Usos a destacar
META CHARSET
1 <meta charset="UTF-8">
Establece el tipo de codificación del documento.
META TITLE
1 <meta name="title" content="Título de la WEB">
Contiene el titulo que se mostrará en los buscadores.
META DESCRIPTION
1 <meta name="description" content="Descripción de la WEB">
Es el texto que se muestra bajo el título en los motores de búsqueda.
LINK
1 <link href="http://dominio.com/hoja-de-estilos.css" rel="stylesheet" type="text/css"/>
Esta etiqueta contiene un link a una hoja de estilos externa, la cual se utilizará en este documento.
Atributo a destacar
HREF
Especifica la url donde se localiza la hoja de estilo.
BODY
1 <body></body>
La etiqueta body delimita el cuerpo del documento y contiene todo aquello que podremos ver en nuestro
navegador. Imágenes, textos, enlaces, video, etc…
HEADER
1 <header></header>
El contenido de esta etiqueta debe ser la cabecera de nuestra página donde se suele encontrar el título, el
logotipo y poco más.
NAV
1 <nav></nav>
Esta etiqueta sirve para delimitar el menú de la página, donde colocaremos los enlaces internos para movernos
entre nuestras diferentes secciones del sitio web.
A
1 <a href="http://dominio.com/seccion2.html">IR SECCIÓN 2</a>
Representa un enlace o hipervínculo.
Atributos a destacar.
HREF
Dirección URL hacia la que apunta el enlace.
H1, H2, H3, H4, H5, H6
1 <h1>Título de la WEB</h1>
2 <h2>CONTENIDO PRINCIPAL</h2>
3 <h3>Testimonios</h3>
4 <h4>Avisos legales</h4>
Estas etiquetas establecen los encabezados. Se organizan por niveles siendo H1 el más importante y H6 el
menos importante.
SECTION
1 <section></section>
La etiqueta section engloba una sección de texto, imágenes y otros elementos que guardan cierta relación
entre ellos. Normalmente siempre le podremos poner un título o encabezado.
ARTICLE
1 <article></article>
La etiqueta article se suele encontrar dentro de una etiqueta section y sirve para dividir y ordenar los
contenidos en su interior.
DIV
1 <div></div>
Otra forma de dividir contenido para posteriormente aplicarle clases y modificar su estilo.
P
1 <p></p>
Entre las etiquetas P colocaremos un párrafo de texto.
IMG
1 <img src="http://dominio.com/imagen.jpg" alt="paisaje">
Esta etiqueta coloca una imagen en el documento mediante un enlace.
Atributos a destacar.
ALT
Representa el texto alternativo, muy importante para que los bucadores puedan obtener información de la
imagen.
SRC
URL donde se encuentra la imagen.
ASIDE
1 <aside></aside>
Contiene información no vital o que no está estrechamente relacionada con el contenido principal de la página
como podrían ser banners de anuncios, citas o enlaces externos.
FOOTER
1 <footer></footer>
Aquí encontraríamos el código perteneciente al pie de página, donde se suelen colocar los enlaces a textos
legales, el copyright, etc.
https://vinkula.com/estructura-del-codigo-html5-anatomia-de-una-pagina-web/
Estructura básica de una página Web - html, head y body

Para crear una página web se necesita un documento HTML utilizando
tres elementos o tags principales que cualquier sitio Web usa: html,
head y body.
 Aprender
Hugo
158Delgado
110-02-2013
63,882 HTML
Comentario
Votos
Visitado
HTMLPrimeros pasos en la Web
COMPÁRTELO:
Un documento web (o página web) es, como hemos apuntado en
la introducción, un conjunto de tags HTML que se escriben en un editor
de texto plano (sin formato) y se ejecutan en un navegador web.
El esqueleto básico de HTML
CÓMO CREAR UNA PÁGINA WEB
Para crear un verdadero documento HTML comenzará con tres

elementos contenedores:
 <html>
 <head>
 <body>
Estos tres se combinan para describir la estructura básica de la página:
 <html>: Este elemento envuelve todo el contenido de la página (excepto la DTD)

 <head>: Este elemento designa la parte de encabezado del documento. Puede
incluir información opcional sobre la página Web, como puede ser el título (el
navegador lo muestra en la barra de título), palabras clave de búsqueda opcionales
y una hoja de estilo opcional.
 <body>: Este elemento alberga el contenido de su página Web, es decir, aquello
que queremos que aparezca en el área de navegación del navegador..
Sólo hay una manera correcta de combinar estos tres elementos. He
aquí su colocación exacta, con el doctype al comienzo de la página:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Toda página Web utiliza esta estructura básica. Los puntos suspensivos
(...) muestran dónde insertaría la información adicional.
Una vez colocado el esqueleto XHTML, debe añadir dos conectores más
a la mezcla.
Toda página Web requiere un elemento <title> en la sección del

encabezado. A continuación, deberá crear un contenedor para el
texto en la sección del cuerpo de texto (<body>).
Un elemento contenedor de texto multiuso es <p>, que representa un

párrafo. Veamos con más detalle los elementos que hay que agregar:
 <title>: Establece el título de la página Web, el cual tiene varias funciones. Primero,
los navegadores lo muestran en la parte superior de la ventana. Segundo, cuando
un visitante crea un marcador para la página, el navegador emplea el título para
etiquetarlo en el menú Marcadores (o favoritos). tercero, cuando la página aparece
en una búsqueda Web, el motor de búsqueda suele enseñar este título como
primera línea en los resultados, seguido de un fragmento del contenido de la página.
 <p>: Indica un párrafo. Los navegadores no los sangran pero añaden un pequeño
espacio entre varios consecutivos para mantenerlos separados.
He aquí la página con estos dos nuevos ingredientes:
<!DOCTYPE html>
<html>
<head>
<title>Bienvenido a mi sitio Web</title>
</head>
<body>
<p></p>
</body>
</html>
Si abre este documento en un navegador Web, verá que la página está

vacía, pero ahora aparece el título.
Cuando un navegador muestra una página Web, el título se presenta

en la parte superior de la ventana, con el texto al final. Si el suyo utiliza la
navegación por pestañas, el título también aparece en ellas.
Tal y como está ahora, este documento HTML es una buena plantilla
para futuras páginas. La estructura básica está en su lugar; simplemente
necesita cambiar el título y añadir algo de texto.
Lo primero que tenemos que saber es que en toda página web existen
dos partes claramente diferenciadas: la cabecera, o head, y el cuerpo,
o body.
Vamos hacer es crear una carpeta, dentro de "Mis documentos", para

almacenar los ficheros de prueba que vayamos a usar.
A esta carpeta la llamaremos pruebas-html en el resto de los ejercicios. Con
la carpeta abierta, haga doble clic sobre el ícono que representa al
bloc de notas.
Se le abrirá un documento en blanco.
Escriba el siguiente texto:

<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
</body>
</html>
Cuando lo tenga escrito, guárdelo en la carpeta con el

nombre plantilla.html.
Es vital que la extensión sea .html, ya que sólo por la extensión el sistema
operativo reconoce este archivo como un documento web, y no como
un simple y archivo de texto.
El nombre del archivo deberá escribirse como está, en minúsculas y sin

espacios ni caracteres especiales.
Los únicos signos de puntuación admitidos son el punto (sólo uno), que
lo usaremos para separar el nombre de la extensión y el guión bajo.
El nombre podrá contener letras y números, pero deberá empezar por

una letra. Así mismo, nos abstendremos de meter en el nombre de un
archivo letras acentuadas, eñes, cedillas, o cualquier otro carácter de
algún alfabeto local.
https://disenowebakus.net/domine-html-y-dhtml-primeros-pasos.php
Partes básicas de un documento

Unas webs pueden y deben ser y parecer diferentes de otras, pero todas tienden a contener
elementos comunes, a menos que estén destinadas a mostrar un video en pantalla completa,
un juego, formen parte de un proyecto artístico concreto o simplemente estén mal
estructuradas. Estos componentes son:
header (encabezado)
Normalmente formado por una gran franja que cruza la parte superior de la página con
un encabezado y/o un logo. Esta parte suele permanecer invariable mientras navegamos
entre página y página dentro de un sitio web.
navigation bar (barra/menú de navegación)
Son los enlaces a las principales secciones del sitio web; normalmente está formado por
un menú con botones, enlaces o pestañas. Al igual que el encabezado, este contenido
normalmente permanece invariable en las diferentes páginas del sitio — tener un menú
inconsistente en nuestra web, inducirá a los usuarios a confusión y frustración. Muchos
diseñadores web consideran el menú de navegación como parte del encabezado en
lugar de un componente individual, pero esto no es necesario.
main content (contenido principal)
Es la parte ancha central de nuestra página y contiene el contenido único de la misma,

por ejemplo el video que quieres ver, la narración que estás leyendo, el mapa que
quieres consultar, los titulares de las noticias, etc. Esta parte es distinta de una página a
otra dentro de nuestro sitio web.
sidebar (menú/barra lateral)

Suele incluir algún tipo de información adicional, enlaces, citas, ads comerciales, etc.
Normalmente está relacionado con el contenido principal de la página (por ejemplo en
una página de noticias, la barra lateral podría contener la biografía del autor o enlaces a
artículos relacionados) pero en otras ocasiones encontraremos elementos recurrentes
como un menú de navegación secundario.
footer (pie de página)

Parte inferior de la página que generalmente contiene la letra pequeña, el copyright o la
información de contacto. Es el sitio donde colocar información común (al igual que en
el encabezado) pero normalmente esta información no es tan importante o es
secundaria para la propia página. El pie también se suele usar para propósitos SEO,
incluyendo enlaces de acceso rápido al contenido más popular.
Una página web "típica" podría parecerse a esta:

Link to sectionHTML para dar estructura al contenido
El ejemplo visualizado no parece muy atractivo, pero nos puede servir como ejemplo para
trabajar el contenido de una página web típica. Podemos encontrar webs con más columnas y
más complicadas, pero esta nos servirá para hacernos una idea general sobre el tema. Con el
adecuado CSS, podremos usar muchos más elementos para decorar las distintas secciones y
conseguir que queden como queramos, pero como hemos comentado con anterioridad,
necesitaremos respetar ciertas normas semánticas, y utilizar el elemento adecuado para cada
tipo de sección.
La parte visual no lo es todo. Utilizamos diferentes fuentes y colores para llamar la atención de
los usuarios videntes de las partes más importantes del contenido, como el menú de
navegación y sus correspondientes enlaces, pero ¿que ocurre con los usuarios discapacitados
visuales que no pueden distinguir los colores llamativos o las fuentes de mayor tamaño?
Nota: Los daltónicos representan alrededor del 8% de la población mundial. Los invidentes y los
discapacitados visuales representan entre el 4-5% de la población mundial (en 2012 había 285 millones de
personas como estas en el mundo, mientras que el total de la población estaba sobre los 7.000 millones).
En nuestro código HTML, podemos crear secciones de contenido basadas en
su funcionalidad — usando elementos que representen las diferentes secciones del contenido
descritas anteriormente sin ambigüedad, de forma que las tecnologías de ayuda y los lectores
de pantalla puedan reconocer esos elementos y asistir en tareas como "encontrar el menú de
navegación", o "encontrar el contenido principal". Como hemos mencionado anteriormente en
este curso, hay muchas consecuencias al no utilizar el elemento correcto y la semántica
adecuada para aquello que han sido ideados.
Para implementar estas secciones semánticas, HTML dispone de etiqutas adecuadas que
podemos usar para representar estas secciones, por ejemplo:
 header (encabezado): <header>.

 navigation bar (menú de navegación): <nav>.
 main content (contenido principal): <main>, con varias subsecciones (además de la barra
lateral) representadas por elementos <article>, <section>, y <div>.
 sidebar (barra lateral): <aside>.
 footer (pie de página): <footer>.
Link to sectionAprendizaje activo: El código del ejemplo anterior
El ejemplo de página web mostrado arriba se consigue mediante el siguiente código
(disponible en nuestro Github repo). Observemos el ejemplo anterior, y a continuación
echemos un vistazo al código de abajo para identificar las secciones que se observan en el
ejemplo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My page title</title>

<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">


</head>
<body>

<header>
<h1>Header</h1>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our team</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>


<main>


<article>
<h2>Article heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet
ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis
dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut
porta lorem lacinia consectetur.</p>
<h3>subsection</h3>
<p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed,
adipiscing id dolor.</p>
<p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit
pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed
odio eros.</p>
<h3>Another subsection</h3>
<p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus
et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi
at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel
odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis,
nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
</article>

<aside>
<h2>Related</h2>
<ul>
<li><a href="#">Oh I do like to be beside the seaside</a></li>
<li><a href="#">Oh I do like to be beside the sea</a></li>
<li><a href="#">Although in the North of England</a></li>
<li><a href="#">It never stops raining</a></li>
<li><a href="#">Oh well...</a></li>
</ul>
</aside>
</main>

<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
</body>
</html>
Tómese su tiempo para revisar el código y comprenderlo - los comentarios dentro del código
también le ayudarán a entenderlo. No le pedimos que haga mucho más en este artículo,
porque la clave para entender el diseño del documento es escribir una estructura HTML
conocida y posteriormente desarrollar su apariencia con CSS. Estudiaremos el diseño CSS
como parte del tema CSS.
Link to sectionElementos de diseño HTML en detalle

Es bueno entender el significado global de todos los elementos definitorios de las secciones
HTML en detalle — es algo que se trabajará gradualmente a medida que comencemos a tener
más experiencia en el desarrollo web. En el enlace HTML element reference podemos leer en
detalle la lista de estos elementos. Por el momento, estas son las definiciones principales que
deberíamos tratar de entender:
 <main> Contendrá el contenido único de esta página. Utilizaremos <main> solamente una vez para
cada página, y lo situaremos inmediatamente interior al elemento <body>. Mejor que no lo
anidemos con otros elementos.
 <article> Encuadra un bloque de contenido que tiene sentido por sí mismo aparte del resto de
la página (por ejemplo una entrada en un blog).
 <section> Es parecido al elemento <article>, pero se usa más para agrupar cada parte de la
página que, por su funcionalidad, constituye una sección en sí misma (por ejemplo un mini-
mapa, o un conjunto de titulares y resúmenes). Se considera una buena práctica comenzar
cada una de estas secciones con un título heading; nótese que podemos subdividir
artículos <article>s en distintas secciones <section>s, o también <section>s en distintos
artículos <article>s, dependiendo del contexto.
 <aside> Incluye contenido que no está directamente relacionado con el contenido principal,
pero que puede aportar información adicional relacionada indirectamente con él (resúmenes,
biografías del autor, links relacionados, etc.).
 <header> Representa un grupo de contenido introductorio. Si este es "hijo" de un
elemento <body> entonces se convertirá en el encabezado principal del sitio web, pero si es hijo
de un elemento <article> o un elemento <section> entonces simplemente será
el encabezado particular de cada sección (por favor no confundir esto con títulos y
encabezamientos).
 <footer> Representa el contenido del pie de página.
Link to sectionElementos No-semánticos
A veces nos encontramos situaciones en las que no encontramos un elemento semántico
adecuado para agrupar ciertos elementos juntos o englobar cierto contenido. Podríamos
querer agrupar ciertos elementos para referirnos a ellos como una entidad que comparta
cierto CSS o JavaScript. Para casos como estos, HTML dispone del elemento div <div> y del
elemento <span>. Estos elementos deberán ser utilizados con su correspondiente atributos
clase class, para conferirles su etiqueta correspondiente para ser fácilmente referenciados.
<span> Es un elemento no-semántico para ser utilizado en el interior de una línea, lo
utilizaremos cuando no se nos ocurra el uso de otro elemento semántico de texto en el que
incluir el contenido, o si no se desea añadir ningún significado específico. Por ejemplo:
<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
play, the lights should be down low]</span>.</p>
En este caso, la nota del editor solo proporciona información extra para el director de la obra;
Se supone que estos elementos no incluyen contenido extra importante. Para los usuarios
videntes, quizás debamos usar CSS para diferenciar sutilmente estas notas del texto principal.
<div>Es un elemento de bloque no-semántico, lo utilizaremos cuando no se nos ocurra el uso

de otro elemento semántico mejor, o si no se desea añadir ningún significado concreto. Por
ejemplo, supongamos un carrito de la compra que podemos pulsar en cualquier momento
durante nuestro estancia en la tienda online:
<div class="shopping-cart">
<h2>Shopping cart</h2>
<ul>
<li>
<p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
<img src="../products/3333-0985/" alt="Silver earrings">
</li>
<li>
...
</li>
</ul>
<p>Total cost: $237.89</p>
</div>
Este no es un elemento lateral <aside>, ya que no está relacionado necesariamente con el

contenido principal de la página (en realidad queremos que se pueda ver desde cualquier
página). Ni siquiera se puede incluir en una sección <section>, pues su contenido no forma parte
del contenido principal de la página. Por lo tanto un elemento <div> es el adecuado en este
caso. Hemos incluido un encabezado para indicar a los lectores automáticos donde se
encuentra el mismo.
Atención: Los divs son tan prácticos y faciles que su uso es muy constante. Como no conllevan valor
semántico, solo lidian con el código HTML. Debemos tener cuidado de usarlos solo cuando no hallemos
una mejor solución y reducir su uso al mínimo pues de otro modo complicaremos el mantenimiento y
actualización de los documentos.
https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/estructura

Anatomía Del Código HTML5

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Anatomía Del Código HTML5

Hochgeladen von

Copyright:

Verfügbare Formate

Anatomía del código HTML5 – Las partes y su

Estructura básica de una página Web - html, head y body

El esqueleto básico de HTML

CÓMO CREAR UNA PÁGINA WEB

Para crear un verdadero documento HTML comenzará con tres

 <html>: Este elemento envuelve todo el contenido de la página (excepto la DTD)

Toda página Web requiere un elemento <title> en la sección del

Un elemento contenedor de texto multiuso es <p>, que representa un

Si abre este documento en un navegador Web, verá que la página está

Cuando un navegador muestra una página Web, el título se presenta

Vamos hacer es crear una carpeta, dentro de "Mis documentos", para

Se le abrirá un documento en blanco.

Escriba el siguiente texto:

Cuando lo tenga escrito, guárdelo en la carpeta con el

El nombre del archivo deberá escribirse como está, en minúsculas y sin

El nombre podrá contener letras y números, pero deberá empezar por

Partes básicas de un documento

navigation bar (barra/menú de navegación)

main content (contenido principal)

Es la parte ancha central de nuestra página y contiene el contenido único de la misma,

sidebar (menú/barra lateral)

footer (pie de página)

Una página web "típica" podría parecerse a esta:

 header (encabezado): <header>.

<title>My page title</title>

Link to sectionElementos de diseño HTML en detalle

<div>Es un elemento de bloque no-semántico, lo utilizaremos cuando no se nos ocurra el uso

Este no es un elemento lateral <aside>, ya que no está relacionado necesariamente con el

Das könnte Ihnen auch gefallen