Documentos de Académico
Documentos de Profesional
Documentos de Cultura
05
CONTENIDO
• Elemento HTML
• Elementos de texto
• Elementos genéricos
• Añadiendo enlaces
• Añadiendo imágenes
CONCEPTOS PENDIENTES...
• WYSIWYG
• CMS
• FLV
• Interfaz
• Pixel, megapixel
<nombreelemento>contenido</nombreelemento>
elemento
contenido
• Elementos vacíos: Existe sólo una etiqueta de apertura y cierre. ejemplo: <br />
• Elementos anidados: Etiquetas que por definición pueden contener otros elementos.
ejemplo: <a href="mypage.html"><img src="image.jpg" ></a>
• Elementos compuestos: Elementos que por definición son usados en conjunción con
otros elementos. ejemplo:
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
ELEMENTO HTML
• Los elementos también pueden clasificarse en:
• Elementos de bloque: Siempre inician en una nueva línea y, generalmente, añaden por
definición 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 línea: Tienen un flujo continuo, por tanto, no añaden saltos de línea (o
retorno de carro). ejemplo: <span>, <a> entre otros
ELEMENTO HTML
• Más vale aclarar:
1 <html>
2 <head>
3 <title>título 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 título del documento
ejemplo:
ejemplo:
<body>
<!-- cuerpo del documento HTML-->
</body>
ESTRUCTURA
!DOCTYPE : Es recomendable añadir el elemento !DOCTYPE para especificar el Tipo de
Definición de documento (DTD) que debe ser aplicado (versión de HTML)
<p />
ELEMENTOS DE TEXTO
3 blockquote : Definen citas largas, generalmente los navegadores la interpretan con una
sangría en la página.
ejemplo: resultado:
<p>Según 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
dirección 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) añadiendo una sangría. Se utiliza en conjunción
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 (viñetas) añadiendo una sangría. Se utiliza en conjunción
con el elemento li, el cual define cada objeto de la lista.
7 dl : Crea una lista de definiciones añadiendo una sangría. Se utiliza en conjunción con el
elemento dt, el cual define el término de la definición y dd, la definición.
<dl>
ejemplo:
<dt>palabra</li>
<dd>significado de la palabra</li>
</dl>
ELEMENTOS DE TEXTO
8 hr : Crea una línea horizontal
ejemplo:
<p>Lorem ipsum...</p>
<hr />
<p>Lorem ipsum</p>
9 address : Se utiliza para mostrar información 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 línea:
10 br : Añade un salto de línea. Es un elemento vacío
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 itálicas
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 revisión 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 aplicación
se encuentra en textos científicos (buscar definición en htmldog.com)
ejemplos:
Actualmente, los elementos genéricos son una herramienta esencial en el diseño Web
basado en estándares, ya que permite a los diseñadores separar presentación de
contenido, además 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 sólo 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 página. El usuario puede hacer click para “saltar” a:
• otra sección de la misma página
• una página diferente
• una sección de una página 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 pestaña del navegador (sólo en Firefox)
Desde un punto de vista de usabilidad, el atributo _blank no es recomendable, ya que
rompe el modelo mental de navegación del usuario. Los usuarios generalmente no desean
ventanas por todos lados!!! Su uso debe limitarse a enlaces fuera del sitio o de interés muy
específico.
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>
Semánticamente, es más 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.
IMÁGENES
1 img : Controla cómo una imagen o clip de video será desplegado en una página 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>