Академический Документы
Профессиональный Документы
Культура Документы
Curso Propedutico
2010
INTRODUCCIN A HTML
05
CONTENIDO
Elemento HTML
Elementos de texto
Elementos genricos
Aadiendo enlaces
Aadiendo imgenes
CONCEPTOS PENDIENTES...
WYSIWYG
CMS
FLV
Interfaz
Pixel, megapixel
<nombreelemento>contenido</nombreelemento>
elemento
contenido
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:
1 <html>
2 <head>
3 <title>ttulo del documento</title>
</head>
<body>
4 <!-- cuerpo del documento HTML-->
</body>
</html>
ESTRUCTURA
1 html : Identifica al archivo como un documento HTML. Tiene dos subsecciones
importantes head y body.
ejemplo:
<html xmlns="http://www.w3.org/1999/xhtml">
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
ejemplo:
ejemplo:
<body>
<!-- cuerpo del documento HTML-->
</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)
<p />
ELEMENTOS DE TEXTO
3 blockquote : Definen citas largas, generalmente los navegadores la interpretan con una
sangra en la pgina.
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.
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
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
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 .
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
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)
ejemplos:
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.
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
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="index.html">Home</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>
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
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
ejemplo: <table>
<tr>
<td>row 1, col 1</td>
<td>row 1, col 2</td>
</tr>
<tr>
<td>row 2, col 1</td>
<td>row 2, col 2</td>
</tr>
</table>
Siguiente sesin:
05. INTRODUCCIN A HTML