U4 05introduccionhtml 100901142734 phpapp02 new by Universidad Da Vinci

MAESTRÍA EN MEDIOS INTERACTIVOS Curso Propedéutico 2010

INTRODUCCIÓN A HTML

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รก 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 definiciรณn de ciertos parรกmetros. Los atributos son instrucciones para precisar la definiciรณ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 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: •

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

documento HTML se compone de una cabeza (head) y de un cuerpo (body) 1 2 3

<html> <head> <title>título del documento</title> </head> <body>  </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 secci贸n encabezado del documento HTML. En el encabezado es posible definir 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 : Define el tĂtulo del documento atributos: class id dir lang style ejemplo: <title>head element example</title>

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 definirí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 : Definen 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>

p : Define un párrafo como bloque de texto o un salto de párrafo atributos: class id dir lang style title ejemplo:

<p>Lorem ipsum...</p> <p />

ELEMENTOS DE TEXTO 3

blockquote : Definen citas largas, generalmente los navegadores la interpretan con una sangría en la página. atributos: cite class id dir lang title ejemplo: <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>

resultado:

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. atributos: class id dir lang title ejemplo: <pre>¡h

o!</pre>

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. atributos: class id dir lang title ejemplo:

<ol> <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. atributos: class id dir lang title ejemplo:

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

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. atributos: class id dir lang title ejemplo:

<dl> <dt>palabra</li> <dd>significado de la palabra</li> </dl>

ELEMENTOS DE TEXTO 8

hr : Crea una l铆nea horizontal atributos: class id dir lang title ejemplo: <p>Lorem ipsum...</p> <hr /> <p>Lorem ipsum</p>

address : Se utiliza para mostrar informaci贸n de contacto sobre el autor del contenido Web. Por lo general, se visualiza en cursiva. atributos: class id dir lang title 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: <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>

resultado:

ELEMENTOS DE TEXTO 11

em : Indica un énfasis a una palabra. Se interpreta como itálicas

strong : Indica un mayor énfasis a una palabra. Se interpreta como negritas atributos: class id dir lang title 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 “.

abbr : Indica una abreviatura

acronym : Indica un acrónimo. atributos: class id dir lang title ejemplo: <p><abbr title="Nicholas">N.</abbr> 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>

Massachusetts Institute of Technology

ELEMENTOS DE TEXTO 16

del : Indica que el texto ha sido eliminado tras revisar el documento. Los navegadores lo muestran como texto tachado

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íficos (buscar definición en htmldog.com)

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 conflicto con caracteres de referencia. Al escribir la referencia el navegador despliega el símbolo asociado a la referencia. ejemplos: &nbsp;

espacio en blanco

&aacute;

&eacute;

&ntilde;

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.

ELEMENTOS GENÉRICOS 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.

ELEMENTOS GENÉRICOS 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>

span : Se utiliza para aplicar propiedades de hoja de estilos CSS sólo en el texto contenido entre sus etiquetas. atributos: class id dir lang style title 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>

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

<a href="../descargas/pack.zip">download</a>

URL absoluta URL relativa URL relativa URL relativa

ENLACES <a name="top">destino, el usuario llega aquí</a> . . . contenido . . . <a href="#top">enlace, el usuario da click aqui</a>

<a href="#section01">go to section 01</a> . . . contenido . . . <h3 id="section01">Encabezado</h3> <p>Lorem ipsum...</p>

ancla (con atributo name)

ancla (con atributo id)

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

1, col 1</td> 1, col 2</td>

2, col 1</td> 2, col 2</td>

Siguiente sesión:

05. INTRODUCCIÓN A HTML