HTML

MAESTRA EN MEDIOS INTERACTIVOS
Curso Propedutico
2010
INTRODUCCIN A HTML
05
CONTENIDO
Elemento HTML
Estructura mnima de un documento HTML
Elementos de texto
Elementos genricos
Aadiendo enlaces
Aadiendo imgenes
CONCEPTOS PENDIENTES...
WYSIWYG
CMS
FLV
Interfaz
Pixel, megapixel
Resolucin y calidad de imagen digital

ELEMENTO HTML
La
sintaxis bsica del lenguaje HTML (Hiper Text Markup
Lenguage) es el elemento. Un elemento HTML est definido
por etiquetas (tags) y contenido.
etiqueta de apertura etiqueta de cierre
<nombreelemento>contenido</nombreelemento>
elemento
contenido
ejemplo: <p>Lorem ipsum...</p>

ELEMENTO HTML
Existen elementos que requieren la definicin de ciertos
parmetros. Los atributos son instrucciones para precisar la
definicin de un elemento.
nombre atributo valor
<nombreelemento atributo01= "valor"

atributo02= "valor" >contenido</
nombreelemento>
ejemplo: <img src="image.jpg" alt="descripcion de imagen" width="300" height="225">

ELEMENTO HTML
No todos los elementos tienen contenido de texto plano. Pueden existir:
Elementos vacos: Existe slo una etiqueta de apertura y cierre. ejemplo: <br />
Elementos anidados: Etiquetas que por definicin pueden contener otros elementos.
ejemplo: <a href="mypage.html"><img src="image.jpg" ></a>
Elementos compuestos: Elementos que por definicin son usados en conjuncin con
otros elementos. ejemplo:
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
ELEMENTO HTML
Los elementos tambin pueden clasificarse en:
Elementos de bloque: Siempre inician en una nueva lnea y, generalmente, aaden por
definicin espacio arriba y abajo. Se apilan como bloques en el flujo del documento HTML.
ejemplo: <div>, <h1>, <p>, <blockquote>, <pre>, <ol>, <ul>, <dl>, <hr> entre otros
Elementos de lnea: Tienen un flujo continuo, por tanto, no aaden saltos de lnea (o
retorno de carro). ejemplo: <span>, <a> entre otros
ELEMENTO HTML
Ms vale aclarar:
Se escribe siempre en bajas (minsculas)

Los atributos se definen en la etiqueta de apertura, NUNCA en la de cierre
Cuando se definen ms de un atributo el orden de aparicin NO importa. Aunque es una
buena prctica agruparlas de forma coherente
Se debe separar siempre con signo = el nombre del atributo y su valor
El valor siempre debe ir entre signos " y "
El valor puede ser un nmero, cadena de texto, URL, dependiendo del atributo
Algunos atributos son estrictamente requeridos (como en img y en a)
Sobra decir que NO es posible definir nuevos atributos
ESTRUCTURA
Undocumento HTML se compone de una cabeza (head) y
de un cuerpo (body)
1 <html>
2 <head>
3 <title>ttulo del documento</title>
</head>
<body>
4 
</body>
</html>
ESTRUCTURA
1 html : Identifica al archivo como un documento HTML. Tiene dos subsecciones
importantes head y body.
atributos: dir lang xmlns
ejemplo:
<html xmlns="http://www.w3.org/1999/xhtml">
xmlns: declara el espacio de nombres XML utilizado en el documento. Es requerido de

forma estricta por documentos XHTML
ESTRUCTURA
2 head : Crea la seccin encabezado del documento HTML. En el encabezado es posible
definir el ttulo del documento, metadatos, establecer enlaces a hojas de estilo CSS y
archivos JS y otros, as como estilos del documento y cdigo JS
atributos: dir lang profile
ejemplo:
<head>
<title>head element example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="myfile.js"></script>
<meta name="description" content="my website description" />
<meta name="keywords" content="word01, word02" />
</head>
ESTRUCTURA
3 title : Define el ttulo del documento
atributos: class id dir lang style
ejemplo:
<title>head element example</title>
4 body : Contenedor para todos los dems elementos del documento
atributos: class id dir lang style title
ejemplo:
<body>

</body>
ESTRUCTURA
!DOCTYPE : Es recomendable aadir el elemento !DOCTYPE para especificar el Tipo de
Definicin de documento (DTD) que debe ser aplicado (versin de HTML)
ejemplo: Para XHTML 1.0 transitional se especifica
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ESTRUCTURA
Por lo anterior una estructura bsica para un documento XHTML 1.0 se definira:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ttulo del documento</title>
</head>
<body>

</body>
</html>
ELEMENTOS DE TEXTO
Elementos de bloque:
1 h1-h6 : Definen encabezados de seccin en el documento. h1 es el encabezado ms
importante, cuanto mayor sea el nmero, la jerarqua es menor.
atributos: class id dir lang title
ejemplo: <h1>Este es el encabezado principal</h1>

<h2>Este es un encabezado #2</h2>
<h3>Este es un encabezado #3</h3>
2 p : Define un prrafo como bloque de texto o un salto de prrafo
ejemplo: <p>Lorem ipsum...</p>
<p />
ELEMENTOS DE TEXTO
3 blockquote : Definen citas largas, generalmente los navegadores la interpretan con una
sangra en la pgina.
atributos: cite class id dir lang title
ejemplo: resultado:
<p>Segn el W3C, el valor del atributo
cite en las etiquetas blockquote tiene
el siguiente significado:</p>
<blockquote cite="http://www.w3.org/
TR/html401/struct/text.html">
"El valor de este atributo es una
direccin URL que indica el documento
original de la cita."
</blockquote>
<p>La URL no es visible en el
navegador, pero es recomendable
agregarlo. Eso dice el W3C.</p>
ELEMENTOS DE TEXTO
4 pre : Indica texto pre-formateado, es decir respeta ntegramente el contenido en texto
plano del elemento, incluyendo espacios en blanco y caracteres especiales.
ejemplo:
<pre>h o l a m u n d o!</pre>
5 ol : Crea una lista ordenada (numerada) aadiendo una sangra. Se utiliza en conjuncin
con el elemento li, el cual define cada objeto de la lista.
<ol>
ejemplo:
<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
</ol>
ELEMENTOS DE TEXTO
6 ul : Crea una lista desordenada (vietas) aadiendo una sangra. Se utiliza en conjuncin
con el elemento li, el cual define cada objeto de la lista.

<ul>
ejemplo: <li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
</ul>
7 dl : Crea una lista de definiciones aadiendo una sangra. Se utiliza en conjuncin con el
elemento dt, el cual define el trmino de la definicin y dd, la definicin.
<dl>
ejemplo:
<dt>palabra</li>
<dd>significado de la palabra</li>
</dl>
ELEMENTOS DE TEXTO
8 hr : Crea una lnea horizontal
ejemplo:
<p>Lorem ipsum...</p>
<hr />
<p>Lorem ipsum</p>
9 address : Se utiliza para mostrar informacin de contacto sobre el autor del contenido
Web. Por lo general, se visualiza en cursiva.
ejemplo:
<address>Autor: ID VicMan</address>
ELEMENTOS DE TEXTO
Elementos en lnea:
10 br : Aade un salto de lnea. Es un elemento vaco
atributos: class id title
ejemplo: resultado:
<h2>Mass Media</h2>
<p>De los medios de
comunicacion<br />en este mundo tan
codificado<br />con Internet y otras
navegaciones<br />yo sigo
prefiriendo<br />el viejo beso
artesanal<br />que desde siempre
comunica tanto</p>
<h4>Mario Benedetti</h4>
ELEMENTOS DE TEXTO
11 em : Indica un nfasis a una palabra. Se interpreta como itlicas
12 strong : Indica un mayor nfasis a una palabra. Se interpreta como negritas
ejemplo:
<p>En un parrafo hay palabras
<em>importantes</em> y otras
<strong>muy
importantes<strong>, como todo
en la vida</p>
ELEMENTOS DE TEXTO
13 q : Indica una cita corta. Los navegadores agregan signos y .
14 abbr : Indica una abreviatura
15 acronym : Indica un acrnimo.
ejemplo:
<p><abbr title="Nicholas">N.</abbr>
Massachusetts Institute of Technology
Negroponte, fundador del <acronym
title="Massachusetts Institute of
Technology">MIT</acronym> MediaLab
dijo <q>en un mundo digital el medio
no es el mensaje, sino una
encarnacion de este</q>.</p>
ELEMENTOS DE TEXTO
16 del : Indica que el texto ha sido eliminado tras revisar el documento. Los navegadores lo
muestran como texto tachado
17 ins : Indica que el texto ha sido insertado tras una revisin del documento. Los
navegadores lo muestran como texto subrayado
atributos: class id dir lang title datetime
ejemplo:
<p>Las Chivas <del>pueden ganar</
del><ins datetime="18/08/2010"> no
pudieron ganar</ins> la Copa
Libertadores</p>
ELEMENTOS DE TEXTO
18 cite,dfn,code,var,samp,kbd : Elementos de limitado uso. Su escasa aplicacin
se encuentra en textos cientficos (buscar definicin en htmldog.com)
19 b,i,u,font y otros demonios : Elementos de presentacin. En contra de los

actuales estndares Web. Olvdense de ellos!!!
CARACTERES ESPECIALES
Algunos caracteres comunes, como el smbolo de copyright , no son parte de
el conjunto estndar de caracteres ASCII, que contiene slo letras, nmeros,
y smbolos bsicos. Otros caracteres, como el smbolo menor que (<),
estn disponibles, pero si se escribe en un documento XHTML, los navegadores
lo interpretan como el inicio de una etiqueta.
El lenguaje soluciona este conflicto con caracteres de referencia. Al escribir la referencia
el navegador despliega el smbolo asociado a la referencia.
ejemplos:
espacio en blanco

á
é
ñ
ELEMENTOS GENRICOS
Los elementos de texto descritos hasta el momento no permiten describir
semnticamente todos los tipos de contenidos existentes en la Web actual.
XHTML define dos elementos genricos empleados para definir contenidos
personalizados o agrupar elementos afines.
La etiqueta <div> (divisin) indica un elemento genrico a nivel de bloque, mientras

que la etiqueta <span> (espacio) se utiliza para definir un elemento genrico en lnea.
Ambos elementos se complementan regularmente con atributos class e id.

La etiqueta class indica el nombre de una clase de estilo a aplicar en ese elemento.
Una clase puede ser asociada a varios elementos, incluso si no son del mismo tipo.
La etiqueta id es un identificador para el elemento al que pertenece, debe ser nico
por cada documento. Estilos CSS y cdigo JS pueden ser aplicados a elementos con un
id definido.
Un mismo elemento puede tener un atributo class y un id.
ELEMENTOS GENRICOS
En su definicin bsica los elementos div y span no aparentan tener cualidades
sobresalientes, sin embargo, su verdadera utilidad se percibe cuando son asociados con una
hoja de estilos CSS.
Actualmente, los elementos genricos son una herramienta esencial en el diseo Web
basado en estndares, ya que permite a los diseadores separar presentacin de
contenido, adems de ofrecer una gran cantidad de trucos para definir reglas CSS.
En la versin HTML5 y CSS3 se definen nuevos elementos layout que sustituirn

paulatinamente el uso de div y span, sin embargo, resulta conveniente conocer su uso
en XHTML para as valorar los avances logrados en los nuevos estndares.
ELEMENTOS GENRICOS
1 div : Representa una divisin o bloque de contenido en una pgina.
atributos: class id dir lang title style
ejemplo:
<div id="header">
<h1> Bienvenidos a mi sitio Web </h1>
<p> Lorem ipsum...<p>
</div>
2 span : Se utiliza para aplicar propiedades de hoja de estilos CSS slo en el texto
contenido entre sus etiquetas.
ejemplo:
<p>Este es texto normal <span id="blue" >y este es texto
azul</span> text.</p>
ENLACES
1 a : Crea un enlace en la pgina. El usuario puede hacer click para saltar a:
otra seccin de la misma pgina
una pgina diferente
una seccin de una pgina diferente
atributos: class id href target name (entre otros ms)
ejemplo:
href : Indica la URL destino o nombre de ancla del enlace. La URL destino puede ser:
absoluta: protocolo, host name, domain name, ruta directorio, documento
ejemplo: http://www.apple.com
relativa: documento del mismo sitio. se utilizan los caracteres .. y /
ejemplo: nosotros.html, ../images/foto.jpg
ENLACES
href : Indica la URL destino o nombre de ancla del enlace
name : Define el nombre de un ancla
target : Especifica la ventana o frame (no te alegres Alexxa, ya no se usan!) en el que el
documento de enlace ser cargado. Puede adquirir uno de los siguientes valores:
_blank: abre el enlace en una nueva ventana del navegador
_parent: (qepd)
_self: (qepd)
_top: (qepd)
_ventana: abre el enlace en una nueva pestaa del navegador (slo en Firefox)
Desde un punto de vista de usabilidad, el atributo _blank no es recomendable, ya que
rompe el modelo mental de navegacin del usuario. Los usuarios generalmente no desean
ventanas por todos lados!!! Su uso debe limitarse a enlaces fuera del sitio o de inters muy
especfico.
ENLACES
ejemplos:
<a href="http://www.panic.com/">Panic, Inc.</a>

URL absoluta
<a href="index.html">Home</a>
URL relativa
<a href="imagen.jpg">ver imagen</a>

URL relativa
<a href="../descargas/pack.zip">download</a>
URL relativa
ENLACES
<a name="top">destino, el usuario llega aqu</a>
. . . contenido . . .
<a href="#top">enlace, el usuario da click ancla (con atributo name)
aqui</a>
<a href="#section01">go to section 01</a>

. . . contenido . . .
<h3 id="section01">Encabezado</h3> ancla (con atributo id)
<p>Lorem ipsum...</p>
Semnticamente, es ms recomendable usar atributos id en lugar del atributo name. Para que
los elementos h no pierdan su significado, o los elementos a no sean asociados a un estilo CSS
para verse como un encabezado.
IMGENES
1 img : Controla cmo una imagen o clip de video ser desplegado en una pgina Web
atributos: class id src alt height width usemap title
ejemplo:
<img src="image.jpg" alt="Spiderman usando un iPad, dice: mira
ma,sin Flash" width="500" height="450" title="Un chiste para
programadores, maqueros y fans de la liga de la justicia. Obvio
tienen que ser nerds">
Un chiste para programadores, maqueros y
fans de la liga de la justicia. Obvio
tienen que ser nerds
CASO A. La imagen se visualiza correctamente

CASO B. La imagen no se visualiza correctamente
TABLAS
1 table : Crea una tabla en la pgina Web, puede contener filas y columnas. Se asocia con
dos elementos, tr crea filas, y el elemento td crea las celdas en cada fila de la tabla
atributos: class id cellpadding cellspacing
ejemplo: <table>
<tr>
<td>row 1, col 1</td>
</tr>
<tr>
</tr>
</table>
Siguiente sesin:
05. INTRODUCCIN A HTML

HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML

Загружено:

Авторское право:

Доступные форматы

MAESTRA EN MEDIOS INTERACTIVOS

Estructura mnima de un documento HTML

Resolucin y calidad de imagen digital

etiqueta de apertura etiqueta de cierre

ejemplo: <p>Lorem ipsum...</p>

<nombreelemento atributo01= "valor"

ejemplo: <img src="image.jpg" alt="descripcion de imagen" width="300" height="225">

Se escribe siempre en bajas (minsculas)

atributos: dir lang xmlns

xmlns: declara el espacio de nombres XML utilizado en el documento. Es requerido de

atributos: dir lang profile

atributos: class id dir lang style

<title>head element example</title>

4 body : Contenedor para todos los dems elementos del documento

atributos: class id dir lang style title

ejemplo: Para XHTML 1.0 transitional se especifica

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

atributos: class id dir lang title

ejemplo: <h1>Este es el encabezado principal</h1>

2 p : Define un prrafo como bloque de texto o un salto de prrafo

atributos: class id dir lang style title

ejemplo: <p>Lorem ipsum...</p>

atributos: cite class id dir lang title

atributos: class id dir lang title

atributos: class id dir lang title

atributos: class id dir lang title

atributos: class id dir lang title

atributos: class id dir lang title

atributos: class id dir lang title

atributos: class id title

12 strong : Indica un mayor nfasis a una palabra. Se interpreta como negritas

atributos: class id dir lang title

14 abbr : Indica una abreviatura

15 acronym : Indica un acrnimo.

atributos: class id dir lang title

atributos: class id dir lang title datetime

19 b,i,u,font y otros demonios : Elementos de presentacin. En contra de los

&nbsp; espacio en blanco

La etiqueta <div> (divisin) indica un elemento genrico a nivel de bloque, mientras

Ambos elementos se complementan regularmente con atributos class e id.

En la versin HTML5 y CSS3 se definen nuevos elementos layout que sustituirn

atributos: class id dir lang title style

atributos: class id dir lang style title

atributos: class id href target name (entre otros ms)

<a href="http://www.panic.com/">Panic, Inc.</a>

<a href="imagen.jpg">ver imagen</a>

<a href="#section01">go to section 01</a>

atributos: class id src alt height width usemap title

CASO A. La imagen se visualiza correctamente

atributos: class id cellpadding cellspacing

Вам также может понравиться

espacio en blanco