HTML Estructura - Compressed

Tema
HTML & CSS
Estructura
Semana 6
DOCTYPEs <!DOCTYPE html>
Dada las diferentes
versiones de HTML, cada
página web debe comenzar
con una declaración
DOCTYPE para decirle a un
navegador qué versión de
HTML de la pagina esta
usando.
Semana 6
Anatomía de un documento HTML - básica
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Semana 6
HTML Head Meta
<html></html>
<head></head>
<meta>
El elemento <html>. El elemento HTML Metainformación.
Este elemento <head> provee Sirve para aportar
envuelve todo el información general información sobre el
contenido de la (metadatos) acerca documento y nos indica
página. A veces se del documento, la codificación de
lo conoce como el incluyendo su título y caracteres.
elemento raíz. enlaces a scripts y
hojas de estilos. Description, keywords,
Charset
Semana 6
Title Body Comentarios
<title></title>
<body></body>
Si desea añadir un
Este establece el Contiene todo el comentario a su código
título de la página, contenido que quieres que no será visible en el
que es el título mostrar a los usuarios navegador del usuario,
que aparece en la cuando visitan tu página, puede agregar el texto
pestaña del ya sea texto, imágenes, entre estos caracteres:
navegador en la vídeos, juegos, pistas de
que se carga la audio reproducibles o 
página. cualquier otra cosa.
Semana 6
Atributo ID
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
El atributo id se conoce como atributo eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p>
global porque puede ser utilizado en

<p id=”comosea”>Lorem ipsum dolor sit
cualquier elemento. Es usado para
amet, consectetur adipiscing elit, sed

identificar de forma única ese elemento
do eiusmod tempor incididunt ut labore
de otros elementos en el página.
et dolore magna aliqua.</p>
Cada elemento HTML puede llevar el consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et

atributo id.
Representado con un # en CSS
Semana 6
Atributo Class
<p class="mot1">Lorem ipsum dolor sit
El atributo de clase en cualquier

elemento puede compartir el mismo

valor. Entonces, en este ejemplo, el
consectetur adipiscing elit, sed do

valor de “mot1” podría ser también se
eiusmod tempor incididunt ut labore et
usa en encabezados y enlaces.

<p class="mot1">Lorem ipsum dolor sit
Semana 6
Agrupación de texto y elementos en un bloque
<div>
El elemento <div> le permite agrupar <div id="header">
<ul>
un conjunto de elementos en una

<li><a href="index.html">Home</a></li>
caja a nivel de bloque.
<li><a href="biography.html">Biography</a></li>
<li><a href="works.html">Works</a></li>
Por ejemplo, puede crear un <li><a href="contact.html">Contact</a></li>
elemento <div> para contener todo </ul>
de los elementos para el encabezado </div>
de su sitio (el logo y el navegación), o
puede crear un elemento <div> para
contener comentarios de los
visitantes.
Semana 6
Ejemplo
<html>
<head>
<title>Contact The Art Bookshop, London UK</title>
</head>
<body>
<div id="header">
<h1>The Art Book Shop</h1>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="index.html">new publications</a></li>
<li class="current-page"><a href="index.html">contact</a></li>
</ul>
</div>
<div id="content">
<p>Charing Cross Road, London, WC2, UK</p>
<p><span class="contact">Telephone</span>0207 946 0946</p>
<p><span class="contact">Email</span><a
href="mailto:books@example.com">books@example.com</a></p>
</div>
<p>© The Art Bookshop</p>
</body>
</html>
Semana 6
Elementos de bloque y elementos en línea
Hay dos categorías importantes de elementos en HTML — Estos son los
elementos de bloque y los elementos en línea.
Los elementos de bloque forman un bloque

<p>
visible en la página. Aparecerán en una línea
nueva después de cualquier contenido anterior.
Los elementos en línea están contenidos dentro

<em>
de elementos de bloque y delimitan solo
pequeñas partes del contenido del documento;
(no párrafos enteros o agrupaciones de
contenido)
Semana 6
Display
display: block;
display: inline;
display: run-in;
La propiedad CSS display
display: flow;
especifica si un elemento es
display: flow-root;
tratado como block or inline
display: table;
element y el diseño usado por sus
display: flex;
hijos, como flow layout(Diseño de
display: grid;
Flujo), grid(Cuadricula) o
display: ruby;
flex(Flexible).
display: subgrid;
Semana 6

HTML Estructura - Compressed

Cargado por

Información del documento

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

HTML Estructura - Compressed

Cargado por

Copyright:

Formatos disponibles

Tema

HTML & CSS

Dada las diferentes

versiones de HTML, cada

página web debe comenzar

con una declaración

DOCTYPE para decirle a un

navegador qué versión de

HTML de la pagina esta

<link rel="stylesheet" href="style.css">

El elemento <html>. El elemento HTML Metainformación.

Este elemento <head> provee Sirve para aportar

envuelve todo el información general información sobre el

contenido de la (metadatos) acerca documento y nos indica

página. A veces se del documento, la codificación de

lo conoce como el incluyendo su título y caracteres.

elemento raíz. enlaces a scripts y

hojas de estilos. Description, keywords,

Este establece el Contiene todo el comentario a su código

título de la página, contenido que quieres que no será visible en el

que es el título mostrar a los usuarios navegador del usuario,

que aparece en la cuando visitan tu página, puede agregar el texto

pestaña del ya sea texto, imágenes, entre estos caracteres:

navegador en la vídeos, juegos, pistas de

que se carga la audio reproducibles o

página. cualquier otra cosa.

<p>Lorem ipsum dolor sit amet,

consectetur adipiscing elit, sed do

El atributo id se conoce como atributo eiusmod tempor incididunt ut labore et

dolore magna aliqua.</p>

global porque puede ser utilizado en

amet, consectetur adipiscing elit, sed

do eiusmod tempor incididunt ut labore

de otros elementos en el página.

et dolore magna aliqua.</p>

<p>Lorem ipsum dolor sit amet,

Cada elemento HTML puede llevar el consectetur adipiscing elit, sed do

eiusmod tempor incididunt ut labore et

dolore magna aliqua.</p>

Representado con un # en CSS

<p class="mot1">Lorem ipsum dolor sit

amet, consectetur adipiscing elit, sed

El atributo de clase en cualquier

et dolore magna aliqua.</p>

elemento puede compartir el mismo

<p>Lorem ipsum dolor sit amet,

consectetur adipiscing elit, sed do

usa en encabezados y enlaces.

<p class="mot1">Lorem ipsum dolor sit

amet, consectetur adipiscing elit, sed

do eiusmod tempor incididunt ut labore

et dolore magna aliqua.</p>

El elemento <div> le permite agrupar <div id="header">

un conjunto de elementos en una

caja a nivel de bloque.

Por ejemplo, puede crear un <li><a href="contact.html">Contact</a></li>

elemento <div> para contener todo </ul>

de los elementos para el encabezado </div>

de su sitio (el logo y el navegación), o

puede crear un elemento <div> para

contener comentarios de los

<title>Contact The Art Bookshop, London UK</title>

<h1>The Art Book Shop</h1>

<p>© The Art Bookshop</p>