Aprende HTML5 PDF

Presentacin 1
<El amigable mundo del lenguaje de marcado>

2014 CENET 2
Qu es HTML?
HyperText Markup Language (HTML) es el cdigo usado para
convertir texto ordinario en texto estructurado que pueda ser
utilizado en la Web
HTML est formado por un grupo de marcadores llamados
tags o etiquetas que rodean las diferentes partes de un texto,
las cuales indican la funcin y el propsito de las etiquetas
(markup)
Estas etiquetas no se muestran y son distintas al contenido
real que envuelven
Etiquetas, elementos, atributos

2014 CENET 3
Las etiquetas en HTML estn rodeadas por los
smbolos < y > para distinguirlas del texto
ordinario
El smbolo < marca el inicio de la etiqueta,
seguido del nombre de la etiqueta y termina con
el smbolo >. Por ejemplo:

2014 CENET 4
<p>
Los nombres de etiquetas en HTML5 se pueden
escribir en maysculas o minsculas, pero
normalmente, y para facilitar su lectura, se
escriben en mnusculas
La mayora de las etiquetas vienen pares, una
etiqueta de apertura, para indicar el inicio de un
segmento y una etiqueta de cierre. Las etiquetas de
cierre inician con una diagonal /

2014 CENET 5
<p>Hola Mundo</p>
Estos pares de etiquetas y su contenido forman
un elemento, y los elementos son los
principales componentes de los documentos
HTML
Algunas etiquetas representan elementos vacos,
los cuales no poseen contenido. Por ejemplo
<br>

2014 CENET 6
La etiqueta de apertura de un elemento puede contener
atributos que proporcionan ms informacin sobre el elemento
Un atributo consiste de un nombre seguido de su valor,
separados por el signo =, por ejemplo:
<p class=important>Hola Mundo</p>
Los valores de los atributos deben, de preferencia, estar
rodeados por comillas simples o dobles.
La etiqueta de apertura de un elemento puede
incluir varios atributos separados por espacios

2014 CENET 7
Los atributos deben aparecer solo en las
etiquetas de apertura
Algunos elementos requieren ciertos atributos de
forma obligatoria, mientras que otros son
opcionales
Elemento

Etiqueta apertura Contenido Etiqueta cierre


2014 CENET 8
<p class=important>Hola Mundo</p>

Nombre Valor

Atributo
Elementos en bloque y en lnea

2014 CENET 9
Todos los elementos HTML se pueden dividir en
dos tipos bsicos: Elementos en bloque y
Elementos en lnea
Un elemento en bloque es aquel que contiene un
bloque significativo de contenido que debera
mostrarse en su propia lnea. Por ejemplo;
prrafos, tablas y listas

2014 CENET 10
Los elementos en lnea usualmente contienen
menos texto y se muestra junto a otro texto en la
misma lnea, cmo cuando se enfatizan palabras
en una oracin
La mayora de los elementos en bloque pueden
contener otros elementos en bloque y todos
pueden contener texto y otros elementos en lnea

2014 CENET 11
Los elementos pueden anidarse, es decir, podemos
tener elementos dentro de elementos
Los espacios que se almacenan en un documento
HTML se colapsan cuando un navegador los muestra
en pantalla
Los saltos de lnea se ignoran
Y varios espacios en blanco consecutivos se
convierten en uno solo

2014 CENET 12
Atributos estndar
class. Indica la clase o clases a las cuales un elemento
pertenece. Cualquier nmero de elementos pueden
pertenecer a una clase. Un solo elemento puede
pertenecer a muchas clases
id. Especifica un identificador nico para un elemento
style. Especifica las propiedades CSS de un elemento

2014 CENET 13
Atributos estndar
title. Proporciona un ttulo a un elemento. La
mayora de los navegadores lo muestran como un
tooltip

2014 CENET 14
Comentarios
Los comentarios en HTML son notas que no se
muestran en el navegador y que se pueden leer
revisando el cdigo fuente


2014 CENET 15
Estructura de un documento HTML
<!doctype html>
<html lang="es">
<head>
<title>Mi primera pgina Web</title>
</head>
<body>
<p>HTML es fcil!</p>
</body>
</html>

2014 CENET 16
Doctype
Un documento HTML inicia con una declaracin de tipo de
documento (Document Type Declaration, tambin conocido
como doctype)
XHMTL 1.0 strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1s
trict.dtd"> HTML5
<!doctype html>

2014 CENET 17
rbol de documento
Una forma prctica de ver la estructura de un
documento HTML es como un rbol. Con todos los
elementos conectados como ramas

2014 CENET 18
El elemento head
El elemento head contiene informacin sobre el
documento HTML, incluyendo palabras clave,
enlaces a otros documentos que usa como archivos
CSS y JavaScript
A excepcin del elemento title que se muestra en la
barra de ttulo del navegador, ningn elemento
dentro de head se muestra en el contenido de la
pgina HTML

2014 CENET 19
Componentes de una URL
Cada documento disponible en Internet se
encuentra en una direccin nica llamada Uniform
Resource Locator (URL)
Protocolo Hostname Path Archivo

http://www.examples.com/example/example.html

Prefijo Dominio Nombre Extensin

2014 CENET 20
URLs relativas
Una URL relativa son direcciones hacia recursos en
el mismo sitio que se referencian a travs del path o
del archivo
Por ejemplo:
examples/chapter1/example.html
../../example.html
Elementos de head

2014 CENET 21
<link> define las relaciones entre dos documentos. Su uso ms frecuente es para
referirse a las hojas de estilo que usa el documento
href. La URL que apunta al documento al que se hace referencia
type: Especifica el Multipurpose Internet Mail Extensions (MIME) del
documento. El valor ms comun es text/css para hojas de estilo externas.
rel: define la relacin entre el documento HTML y el documento al que se hace
referencia, su valor ms comn es stylesheet.
Ejemplo:
<link rel="stylesheet" type="text/css" href="main.css"
media="screen" />
<meta> Este elemento contiene informacin sobre tu pgina. El
trmino meta se refiere a metadatos, datos de los datos. Su uso ms
Elementos de head

2014 CENET 22
comun es para describir informacin sobre la descripcin y palabras
clave del documento, y el tipo de codificacin.
Atributos
name. El nombre del atributo que
describe a content
description: El valor del
metadato Ejemplo:
<meta name="description" content="Esta es una
introduccin a HTML">
<meta charset=utf-8>
Elementos de head

2014 CENET 23
<script> Permite integrar lenguajes de scripting en un
documento HTML.
Atributos
type. Describe el tipo MIME del script que se va a incluir.
src: La URL del documento que contiene el script
Ejemplo:
<script type=text/javascript
src=jquery.js></script>
Elementos de head

2014 CENET 24
<style> Su propsito es insertar informacin de estilo
(CSS) dentro del documento
Ejemplo:
<style
type="text/css"> p {
text-color: #fff;
}
</style>
Elementos de head

2014 CENET 25
<title> Permite agregar un ttulo a un
documento HTML, se muestran en la barra de
ttulo de los navegadores y se usa como valor por
default cuando se marca una pgina como
favorita.
<title>Introduccin a HTML</title>

2014 CENET 26
El elemento <body>
Todo el contenido de un documento HTML se
encuentra en el elemento body.
El elemento body va despus del elemento head y
debe cerrarse antes de la etiqueta de cierre del
elemento html.

Elementos de body

2014 CENET 27
Estructura semntica
La semntica es el estudio del significado del
lenguaje, el trmino tambin es usado para
referirse al significado de un elemento o atributo
HTML
Nuestro objetivo es mantener separados el
contenido y la presentacin del documento y

2014 CENET 28
debemos elegir el elemento ms siginifcativo que
se adecue mejor a su contenido
<p> sirve para delimitar prrafos
<h1>...<h6> Los headings sirven como ttulos y separan
las diferentes secciones de contenido de un documento. El
elemento <h1> se usa para designar el ttulo principal de un
documento.
Ejemplo:
<h1>HTML5</h1>
<p>HTML5 introduce nuevos elementos</p>
Elementos de body

2014 CENET 29
<address> Su objetivo es proporcionar informacin
de contacto para la persona u organizacin responsable
del documento HTML
<address>
Ismael Haro<br>
Desarrollador web<br>
</address>
Elementos de body

2014 CENET 30
<pre> El elemento pre define un bloque
preformateado donde el texto se muestra tal cual est
en el cdigo fuente.
<pre>
Texto preformateado que
conserva los saltos de lnea
y espacios en blanco </pre>
Elementos de body

2014 CENET 31
Listas. Una lista es una coleccin de elementos relacionados.
En HTML existen 3 tipos de listas:
listas ordenadas,
listas no ordenadas y
listas de definiciones
<ul> Lista no ordenada, es usada cuando los elementos de
la lista no requiere de un orden particular como la lista de
ingredientes de una receta
Elementos de body

2014 CENET 32
Cada elemento de una lista (ordenada y no
ordenada) vive dentro su propio elemento
<li>
<ul>
<li>2 cucharadas de aceite de oliva</li>
<li>1/2 cucharada de sal</li>
</ul>
Elementos de body

2014 CENET 33
<ol> Una lista ordenada contiene elementos que estn diseados para
ser leidos en una secuencia especfica. Cmo los pasos de una receta
<ol>
<li>Combina el agua, aceite, dos terceras
partes de la harina en un recipiente grande y
mezclalos</li>
<li>Agrega de forma gradual el resto de la
harina hasta que tome forma, evita que se ponga
muy seca.</li>
</ol>
Elementos de body

2014 CENET 34
<dl> Una lista de definiciones es una coleccin de
elementos (dt) y sus descripciones (dd)
<dt> Una definicin esta relacionado con la
descripcin que aparezca despus
<dd> El elemento dd contiene la descripcin del
elemento dt con el que est relacionado.
Elementos de body

2014 CENET 35

<dl>
<dt>Pasta</dt>
<dd>Un plato preparado que
contiene pasta como su principal
ingrediente</dd>
</dl>

2014 CENET 36
Elementos de frase
<em> Se usa para agregar nfasis a una palabra o frase
<strong> Se usa para agregar ms enfasis que el elemento <em>
<abbr> Es usada para describir abreviaciones
<acronym> Es usado para describir acrnimos
<abbr> y <acronym> deben, de preferencia, incluir la(s) palabra(s)
completa(s) en su atributo title
<br> Inserta un salto de linea en un bloque de t texto
<hr> Crea una linea horizontal que sirve para dividir secciones de texto.

2014 CENET 37
Elementos multipropsito
<div> Crea una divisin en un documento
agrupando diferentes elementos y es
semnticamente neutral
<span> Es la versin en lnea de un <div> y se usa
para separa una porcin de texto de forma
arbitraria

2014 CENET 38
Caracteres especiales
HTML incluye un grupo de referencias de caracteres que
ofrecen una forma de representar caracteres especiales en un
documento HTML
Una referencia de caracter inicia con un & y termina con ;
Dentro de esos smbolos hay dos formas de representar un
caracter especial El nombre de una entidad
Una referencia numrica

2014 CENET 39
Caracteres especiales
Un nombre de entidad es simplemente un nombre
para referirse a un smbolo en particular. El
nombre de entidad para el smbolo < es lt
(<)
Una referencia nmerica es nmero precedido
con el smbolo # que representa su nmero

2014 CENET 40
unicode. El mismo smbolo < se representa con el
nmero 38 (&)
Continuar....

Aprende HTML5 PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Aprende HTML5 PDF

Caricato da

Copyright:

Formati disponibili

Presentacin 1

<El amigable mundo del lenguaje de marcado>

Potrebbero piacerti anche