05 Introduccion a HTML

MAESTRÍA EN MEDIOS INTERACTIVOS
Curso Propedéutico
2010

INTRODUCCIÓN A HTML

05

CONTENIDO

• Elemento HTML

• Estructura mínima de un documento HTML

• Elementos de texto

• Elementos genéricos

• Añadiendo enlaces

• Añadiendo imágenes

CONCEPTOS PENDIENTES...

• WYSIWYG

• CMS

• FLV

• Interfaz

• Pixel, megapixel

• Resolución y calidad de imagen digital

ELEMENTO HTML
• La
sintaxis básica del lenguaje HTML (Hiper Text Markup
Lenguage) es el elemento. Un elemento HTML está deﬁnido
por etiquetas (tags) y contenido.

etiqueta de apertura etiqueta de cierre

<nombreelemento>contenido</nombreelemento>
elemento
contenido

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

ELEMENTO HTML
• Existenelementos que requieren la deﬁnición de ciertos
parámetros. Los atributos son instrucciones para precisar la
deﬁnición 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 vacíos: Existe sólo una etiqueta de apertura y cierre. ejemplo: <br />

• Elementos anidados: Etiquetas que por deﬁnición pueden contener otros elementos.
ejemplo: <a href="mypage.html"><img src="image.jpg" ></a>

• Elementos compuestos: Elementos que por deﬁnició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:

• Se escribe siempre en bajas (minúsculas)
• Los atributos se definen en la etiqueta de apertura, NUNCA en la de cierre
• Cuando se definen más de un atributo el orden de aparición NO importa. Aunque es una
buena práctica 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 número, 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>título del documento</title>
</head>
<body>
4 
</body>
</html>

ESTRUCTURA
1 html : Identiﬁca 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 sección encabezado del documento HTML. En el encabezado es posible
deﬁnir el título del documento, metadatos, establecer enlaces a hojas de estilo CSS y
archivos JS y otros, así como estilos del documento y código 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 : Deﬁne el título del documento

atributos: class id dir lang style

ejemplo:

<title>head element example</title>

4 body : Contenedor para todos los demás elementos del documento

atributos: class id dir lang style title

ejemplo:
<body>

</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)

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 básica para un documento XHTML 1.0 se deﬁniría:

<!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>título del documento</title>
</head>
<body>

</body>
</html>

ELEMENTOS DE TEXTO
Elementos de bloque:
1 h1-h6 : Deﬁnen encabezados de sección en el documento. h1 es el encabezado más
importante, cuanto mayor sea el número, la jerarquía 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 : Deﬁne un párrafo como bloque de texto o un salto de párrafo


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

<p />

ELEMENTOS DE TEXTO
3 blockquote : Deﬁnen citas largas, generalmente los navegadores la interpretan con una
sangría en la página.

atributos: cite class id dir lang title

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 deﬁne 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.

<ul>
ejemplo:   <li>primer elemento de la lista</li>
  <li>segundo elemento de la lista</li>
</ul>

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

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 itálicas

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 acrónimo.


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

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 aplicación
se encuentra en textos cientíﬁcos (buscar deﬁnición en htmldog.com)

19 b,i,u,font y otros demonios : Elementos de presentación. En contra de los
actuales estándares Web. Olvídense de ellos!!!

CARACTERES ESPECIALES
Algunos caracteres comunes, como el símbolo de copyright ©, no son parte de
el conjunto estándar de caracteres ASCII, que contiene sólo letras, números,
y símbolos básicos. Otros caracteres, como el símbolo menor que (<),
están disponibles, pero si se escribe en un documento XHTML, los navegadores
lo interpretan como el inicio de una etiqueta.
El lenguaje soluciona este conﬂicto con caracteres de referencia. Al escribir la referencia
el navegador despliega el símbolo asociado a la referencia.

ejemplos:

  espacio en blanco
á á
é é
ñ ñ

ELEMENTOS GENÉRICOS
Los elementos de texto descritos hasta el momento no permiten describir
semánticamente todos los tipos de contenidos existentes en la Web actual.
XHTML define dos elementos genéricos empleados para definir “contenidos
personalizados” o “agrupar” elementos afines.

La etiqueta <div> (división) indica un elemento genérico a nivel de bloque, mientras
que la etiqueta <span> (espacio) se utiliza para definir un elemento genérico en línea.

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 código JS pueden ser aplicados a elementos con un
id definido.
Un mismo elemento puede tener un atributo class y un id.

En su definición básica 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 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.

En la versión HTML5 y CSS3 se definen nuevos elementos layout que sustituirán
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 estándares.

1 div : Representa una división o bloque de contenido en una página.

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

atributos: class id href target name (entre otros más)

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="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>

Semánticamente, es más recomendable usar atributos id en lugar del atributo name. Para que
los elementos h no pierdan su signiﬁcado, 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

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 página 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 sesión:
05. INTRODUCCIÓN A HTML

05 Introduccion a HTML

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a 05 Introduccion a HTML

Semelhante a 05 Introduccion a HTML (20)

Mais de Víctor Manuel García Luna

Mais de Víctor Manuel García Luna (20)

05 Introduccion a HTML