aprende html5.pdf

7/21/2019 Aprende HTML5.pdf

1/40

Presentacin 1


2/40

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


3/40

Etiquetas, elementos, atributos

2014 CENET 3

Las etiquetas en HTML estn rodeadas por los

smbolos para distinguirlas del texto

ordinario

El smbolo . Por ejemplo:


4/40


2014 CENET 4

Los nombres de etiquetas en HTML5 se pueden

escribir en maysculas o minsculas, peronormalmente, y para facilitar su lectura, seescriben 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 decierre inician con una diagonal /


5/40


2014 CENET 5

Hola Mundo

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


6/40


2014 CENET 6

La etiqueta de apertura de un elemento puede conteneratributos que proporcionan ms informacin sobre el elemento

Un atributo consiste de un nombre seguido de su valor,

separados por el signo =, por ejemplo:

Hola Mundo

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


7/40


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

opcionalesElemento

Etiqueta apertura Contenido Etiqueta cierre


8/40


2014 CENET 8

Hola Mundo

Nombre Valor

Atributo


9/40

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


10/40


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 mayorade los elementos en bloque pueden

contener otros elementos en bloque y todos

pueden contener texto y otros elementos en lnea


11/40


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 muestraen pantalla

Los saltos de lnea se ignoran

Y varios espacios en blanco consecutivos se

convierten en uno solo


12/40

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


13/40

2014 CENET 13

Atributos estndar

title. Proporciona un ttulo a un elemento. Lamayora de los navegadores lo muestran como un

tooltip


14/40

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


15/40

2014 CENET 15

Estructura de un documento HTML

Mi primera pgina Web

HTML es fcil!


16/40

2014 CENET 16

Doctype

Un documento HTML inicia con una declaracin de tipo dedocumento (Document Type Declaration, tambin conocido

como doctype)

XHMTL 1.0 strict

HTML5


17/40

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


18/40

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


19/40

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
http://www.examples.com/example/example.htmlhttp://www.examples.com/example/example.htmlhttp://www.examples.com/example/example.html


20/40

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


21/40

Elementos de head

2014 CENET 21

define las relaciones entre dos documentos. Su uso ms frecuente es parareferirse 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 hacereferencia, su valor ms comn es stylesheet.

Ejemplo:

Este elemento contiene informacin sobre tu pgina. El

trmino meta se refiere a metadatos, datos de los datos. Su uso ms


22/40

Elementos de head

2014 CENET 22

comun es para describir informacin sobre la descripcin y palabrasclave del documento, y el tipo de codificacin.

Atributos

name. El nombre del atributo que

describe a content

description: El valor del

metadato Ejemplo:


23/40

Elementos de head

2014 CENET 23

Permite integrar lenguajes de scripting en undocumento HTML.

Atributos

type. Describe el tipo MIME del script que se va a incluir.

src: La URL del documento que contiene el script

Ejemplo:


24/40

Elementos de head

2014 CENET 24

Su propsito es insertar informacin de estilo(CSS) dentro del documento

Ejemplo:

p {

text-color: #fff;

}


25/40

Elementos de head

2014 CENET 25

Permite agregar un ttulo a undocumento HTML, se muestran en la barra de

ttulo de los navegadores y se usa como valor por

default cuando se marca una pgina comofavorita.Introduccin a HTML


26/40

2014 CENET 26

El elemento

Todo el contenido de un documento HTML seencuentra en el elemento body.

El elemento body va despus del elemento head y

debe cerrarse antes de la etiqueta de cierre delelemento html.


27/40

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


28/40

2014 CENET 28

debemos elegir el elemento ms siginifcativo que

se adecue mejor a su contenido

sirve para delimitar prrafos

...Los headings sirven como ttulos y separan

las diferentes secciones de contenido de un documento. El

elemento se usa para designar el ttulo principal de un

documento.

Ejemplo:

HTML5

HTML5 introduce nuevos elementos


29/40

Elementos de body

2014 CENET 29

Su objetivo es proporcionar informacinde contacto para la persona u organizacin responsabledel documento HTML

Ismael Haro

Desarrollador web


30/40

Elementos de body

2014 CENET 30

El elemento pre define un bloquepreformateado donde el texto se muestra tal cual esten el cdigo fuente.

Texto preformateado que

conserva los saltos de lnea

y espacios en blanco


31/40

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

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


32/40

Elementos de body

2014 CENET 32

Cada elemento de una lista (ordenada y noordenada) vive dentro su propio elemento

2 cucharadas de aceite de oliva

1/2 cucharada de sal


33/40

Elementos de body

2014 CENET 33

Una lista ordenada contiene elementos que estn diseados paraser leidos en una secuencia especfica. Cmo los pasos de una receta

Combina el agua, aceite, dos terceras

partes de la harina en un recipiente grande ymezclalos

Agrega de forma gradual el resto de la

harina hasta que tome forma, evita que se ponga

muy seca.

l d b d


34/40

Elementos de body

2014 CENET 34

Una lista de definiciones es una coleccin deelementos (dt) y sus descripciones (dd)

Una definicin esta relacionado con la

descripcin que aparezca despus

El elemento dd contiene la descripcin del

elemento dt con el que est relacionado.

l d b d


35/40

Elementos de body

2014 CENET 35

Pasta

Un plato preparado quecontiene pasta como su principal

ingrediente


36/40

2014 CENET 36

Elementos de frase Se usa para agregar nfasis a una palabra o frase

Se usa para agregar ms enfasis que el elemento

Es usada para describir abreviaciones

Es usado para describir acrnimos

y deben, de preferencia, incluir la(s) palabra(s)

completa(s) en su atributo title

Inserta un salto de linea en un bloque de t texto

Crea una linea horizontal que sirve para dividir secciones de texto.


37/40

2014 CENET 37

Elementos multipropsito

Crea una divisin en un documentoagrupando diferentes elementos y essemnticamente neutral

Es la versin en lnea de un y se usa

para separa una porcin de texto de forma

arbitraria


38/40

2014 CENET 38

Caracteres especiales HTML incluye un grupo de referencias de caracteresque

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


39/40

2014 CENET 39

Caracteres especiales

Un nombre de entidad es simplemente un nombrepara referirse a un smbolo en particular. El

nombre de entidad para el smbolo < es lt

(

aprende html5.pdf

Documents