Introducción a HTML5 parte I Tuvo un maravilloso talento para empaquetar el pensamiento pensamiento a l máximo y hacerl hacerlo o portable. — H io im a Ra hi ng ro fi M ar. iti Lr r
Los pensamien pensa mientos tos elevados elevados deben tener un lenguaje elevado. —Aristófanes —Aristófanes
Objetivos En este capitulo aprenderá a: ■ Comprend Comprender er los componentes componentes importantes de los documentos de HTML5. ■ Usar HTML5 HTM L5 para para crear crear páginas Web. ■ Añadir Añad ir imágene imágeness a páginas páginas Web. ■ Crear y usar usar hipervínculos hipervíncu los para para ayudar a los usuarios a navegar por páginas Web. m
Marcar Marcar listas de información. información .
■ Crear tablas con filas y columnas de datos. ■ Crear y usar usar formularios para para obtener la entrada del usuario.
38
l a r e n e g
Capítulo Capítulo 2
Introducción Introducción a HTM L5: parte parte I
2.1
Introducción
2. 8 Caracteres Caracteres especiales y reglas reglas horizontales horizontales
2 .2
Edición Edición de HTML HTML55
2.9 Listas
2 .3
El primer ejemplo de HTM HTML5
2.1 0 Tabla Tablass
2 .4 2.5
Servicio de validación de HTML HTML55 del W3 W3C C Encabezados
2.11 Formularios 2.12 Vinculación interna
2.6 Vinculación
2.13 Elementos meta
2.7
2.14 Recurs Recursos os Web
Imágenes 2.7.1 2.7.1
n a l P
Atribu Atr ibuto to alt
2.7.2 Elementos Elemento s vacíos 2.7.3 2.7.3 Uso de imágenes como hipervínculos hipervínculos Ejerci cici cios os de autoev autoeval aluac uación ión | Resp Respue uest stas as a los los eje ejerc rcic icio ioss de autoev autoevalu aluaci ación ón | Eje Ejercic rcicio ioss Resumen | Ejer
2.1
Introducción
En este capítulo empezaremos a desatar el poder del desarrollo de aplicaciones aplicaciones basadas basadas en W eb con H TM L5 . A lenguajes de program ación como C, C ++, C# , Java diferencia de los lenguajes Java y Visual Visual Basic Basic,, H TM L5 es un lengu aje de m arc ado que especifi especifica ca la estructura y el contenido de b s d ocum entos que se visual visualiza izann en b s navegado navegadores res Web. Web. Presentaremos Presentaremos algunos fundam entos y luego luego cubriremo s técnicas técnicas más sofis sofisti ticadas cadas de HT M L5 , como: * 'labias, que son especialmente útiles útiles para estructurar inform ación a partir de bases bases de datos (es deci decir, r, software que almacena conjuntos estructurados de datos) • Fo rm ular ios para recolectar recolectar información de b s visitantes visitantes de las las páginas Web * Vin cula ción in ter na para facil facilita itarr la navegación navegación por b s páginas páginas • Elementos meta para para especifica especificarr b inform ación sobre un doc um ento En el capítulo 3 presentaremos muchas nuevas características en HTML5- En el capítulo 4 habbrcmos sobre CSS3, un a tec no bg ía para especifica especificarr b apariencia apariencia de las páginas páginas Web.
2.2
Edición Edición de HTM L5
Para Para crear crear docu m entos de H TM L5 , escr escrib ibimo imoss texto texto de marcado marcado de HT M L5 en un editor de texto (como el Bb c de notas, TextEdit, vi, vi, emacs) y b guardamos con b extensión de nom bre de archivo archivo . html o . htm. htm. Las Las computadoras conocidas conocidas com o servid almacenan enan documentos de H TM L5. Los clientes (como servidores ores Web almac b s nave na vega gado dores res W eb q u e se ejec ej ec utan ut an en su c o m p u ta d o ra b e a l o Sm ar tpho tp ho nc ) so licita lic ita n re cu rs os especí esp ecífico fico s a b s servi servidor dores es Web, Web, como docum entos de HTM L5 . Por ejem pb , al escribi escribirr vw w.d eitel .com/books/dow nloads. html e n el campo de dirección de un navegador navegador Web se solici solicita ta el archivo archivo do wnlo ads. html del directorio books en el servidor Web que se ejecuta en wv m .deite l .co .com. m. En el ca pít ub 17 habbrem os sobre b s servidores Web. Por ahora só b tiene tiene que cobca r b s documentos de HTM L5 en su computadora computadora y para para desplegarlos (visualizar los) debe abrirbs en forma local con un navegador Web.
2.3
El primer ejemplo de HTM HT M L5
En este este ca pítu b presentaremos presentaremos las las capaci capacidade dadess de m arcado arcado de H TM L y proveer proveeremos emos capturas capturas de pan talla que muestran cómo un navegador despliega (visualiza) el HTML5. Puede descargar bs ejempbs de
2.3
El primer ejemplo de HTM L5
39
w*w. pearsonh1ghered.com/deitel. Los Los documentos documentos de H TM L5 que mostramos tienen tienen números de linea para su conveniencia; conveniencia; estos núm eros no forman parte del docum ento. Abra cada docu men to de H TM L5 en vari varios os navegadores Web, de manera que pueda verlos c interactuar con ellos. La figura 2.1 es un documento de HTML5 llamado p r i n c i p a l . h t m l , que está guardado en la carpeta ejemplos/cap02. Este primer ejemplo muestra el mensaje mensaje Bi en ve ni do a HTML5 en el navegado navegador. r. Ahora a nali cemos cada línea línea del documen to. 1 2
< !DOCTYP
< n e t a c h a r s e t = “utf-8"> Bienvenido</t1tle> </head> <body> <p>Bienvenido a HTML5</p> </body> </ht«l><br />
<br />
la pest pestañ aña a — nuestra el contenido del elemento t i t l e<br />
<br />
C<br />
<br />
' fi»ey//Cyejemplo%/c4p02/pnfKipat.html<br />
<br />
Bx Bxm^túdo a HTML?<br />
<br />
<2 =<br />
<br />
• •<br />
<br />
Figura 2.1 | El primer ejemplo de HTML5. HTM L5. Declaración Declaración de tip o de docume do cumento nto<br />
<br />
1.a declaración declaración d e tipo de do cu m en to (DOCTYPE) en la línea línea 1 es obligatoria en los documentos de HTML5 pa ra qu e los nave na vega gado dore ress de sp lie g ue n la pá gina gi na e n m o d o e s tá n d a r d e ac ue rd o co n las esp ecific ec ific acion ac iones es de HTML y CSS. Algunos navegadores operan en modo quirks para mantener compatibilidad hacia atrás con págin pá ginas as W eb q u e no es tá n actu ac tuali aliza zada dass co n los es tánd tá nd ares ar es más má s rec ien tes. tes . E n o d a d o cu m e n to de H T M L 5 qu e a e e debe incluir la declaración DOCTYPE. Líneas en blanco<br />
<br />
Incluimos Uneos en blanco (líneas 2 y 10) para facilitar la legibilidad de nuestros documentos; el navegador ignora estas líneas. Comentarios<br />
<br />
Las Las líne líneas as 3 y 4 son co m en tarios de H TM L5- Insertará Insertará comentarios en su marcado de HT ML 5 para mejorar la la legibilidad y describir el contenido de un documento. El navegador ignora los comentarios cuando se despliega su documento. Los comentarios de HTML5 empiezan con <!— y terminan con -->. En nuestros ejemplos in cluimos comentarios que especifican el número de figura y el nombre de archivo, además de indicar el propósito del ejemplo. Co n frecuen cia incluiremos com entarios adicionales, adicionales, en especial especial para explicar nuevas caracterís característic ticas. as.<br />
<br />
40<br />
<br />
Capítulo 2<br />
<br />
Introducción a HTM L5: parte I<br />
<br />
Elementos htm l, heady body<br />
<br />
£1 marcado de HTML5 contiene texto (e imágenes, gráficos, animaciones, sonidos y videos) que representa el contenido de un docum ento, además de elem entos que especifican la estructura y el significado de un documento. Algunos elemen tos importa ntes son htjnl (qu e empieza en la línea 5 y term ina en la línea 14), head (líneas 6 a 9) y body (líneas 11 a 13). El elemento html encierra la sección d d enca beza do (representada por el elemento head) y la sección d d cu er po (representada por el elemento body). La sección del encabezado co ntiene informac ión sobre d docum ento de H TM L5 , como el conjunto de caracteres (UTF-8, el esquema de codificación de caracteres más po pu lar para la Web) que utiliza la pág ina (línea 7) (k> qu e ayud a al navegador a d ete rm inar c óm o va a d esp legar el conten ido) y el título ( t i t l e ) (línea 8). La sección del encabezado también pue de contener instrucciones especiales de formato del documento conocidas como hojas de estilo CSS3 y programas del lado diente conocidos com o secuencias de co m and os (scrip t) para crear páginas Web dinámicas (en el capítulo 4 presentaremos las hojas de estilo CSS3 y explicaremos las secuencias de com and os c on el lenguaje JavaScript en los capítulos 6 al 13). La sección del cuerpo co ntiene el contenido de b página, que el navegador muestra c uand o el usuario visita la página Web. Etiquetas de inicio y de fin<br />
<br />
Los documentos de HTM L5 delimitan h mayoría de los dem entas con una etiqueta de inicio y una etiqueta de fin. Una etiqu eta de ¡n id o consiste en d nombre del elemento entre paréntesis angulares (po r ejem plo, chtml > en la línea 5). Una etiq ueta de fin consiste en el nombre del dem ento seguido de un a barra diagorud (/) entre paréntesis angulares (por ejemplo, c /htm l >en la línea 14). Tamb ién existen los den om inad os “elemen tos vacíos", que no tienen etiquetas de fin. Más adelante veremos que muchas etiquetas de inicio tienen atributos que proporcionan ¡nformadón adicional sobre u n elem ento, el cual utilizan los navegadores para determ inar cóm o procesar ese elemento. C ada atributo tiene un nom bre y un va lor separados por un signo de igual («).<br />
<br />
Buena práctica de program ación 2.1 Aunque los nombres de los elementosy atributos de HTM L5 no son susceptibles al uso de mayúsculas (puede usar letras minúsculasy mayúsculas), es una buena práctica usar sólo letras minúsculas.<br />
<br />
Elemento t l t l e<br />
<br />
La línea 8 especifica un elemento t i t l e . A esto se le conoce como de m en to an idad o, ya que está encerrado entre las etiquetas de inicio y de fin del elemento head. FJ elemento head tamb ién es un elem ento anidado , ya que está encerrad o entre las etiquetas de inicio y de fin del elemento htm l. El elemento t i t i e describe la página Web. Por lo general, los títulos aparecen en la ba rra d e títu lo en la parte superior de la ventana del navegador, en la pestaña del navegador en d on de se visualiza la página y también com o el texto que identifica a una página cuand o los usuarios agregan esa página a su lista de F av o rito s o M arcado res, lo que les permite regresar a sus sitios favoritos. Los mo tores de búsqu eda usan t i ti e para fines de ¡ndexación y a la hora de mostrar resultados.<br />
<br />
■píxr'<br />
<br />
Buena práctica de programación 2.2 d i aplicar sangría a los elementos anidados se enfatiza la estructura de un documento y sepromueve la legibilidad. Usamos tres espaciospara cada nivel de sanpla.<br />
<br />
En la línea 11 comienza el elemento body del documento, el cual especifica su contenido y puede incluir texto, imágenes, sonidos y videos. Elemento pdrrafo (<p>... </p>)<br />
<br />
Algunos elementos, como el d em en to p árr afo qu e se indica m ediante las etiquetas <p> y </p> en la línea 12, ayu dan a definir b estructura de un d ocum ento. Tod o el texto que se coloca entre bs etiquetas <p> y </p> forma un<br />
<br />
2.5<br />
<br />
Encabezados<br />
<br />
41<br />
<br />
párrafo. Cuando u n navegador despliega u n párrafo, coloca espacio adicion al po r encima y debajo de l texto del párm fo. La línea clave en el prog ram a es la línea 12, qu e indica al navegador q ue m uestre el mensaje Bienven ido a HTML5. Etiquetas defin<br />
<br />
Este docu me nto termina co n dos etiquetas de fin (líneas 13 y 14) que cierran los elementos body y htm l. respec tivamente. La etiqueta </htm1> informa al navegador que el marcado de H TM L5 está completo. Cómo ab rir un archivo de H TM L5 en su navegador Web predetenttinado<br />
<br />
I^ra abrir un ejemplo de H TM L5 de este capítulo, abra la carpeta en do nde gua rdó los ejemplos del libro, na vegue hasta la carpeta del capítulo 2 y haga doble clic en el archivo para abrirlo en su navegador Web predeter minado. En este pun to de berá aparecer la ventana de su navegador en fo rma similar a la cap tura de pantalla de ejemplo que se m uestra en la figura 2.1. Ajustamos el tama ño de la ventana del navegador para ah orrar espacio.<br />
<br />
2.4<br />
<br />
Servicio de validación de HTM L5 del W 3C<br />
<br />
Debe usar una sintaxis correcta de HTML5 para asegurar que el navegador procese sus documentos en forma apropiada. El Consorcio World Widc Web (W3C) ofrece un servicio de validación (en validator .w3 .org) para rev isar la sintaxis de un do cu m en to. Los docum en to s pue den valida rse de varias formas: • Proporc ionar el URL de una página Web en línea • Cargar un archivo en el validador • Pegar código directam ente en un área de texto sumin istrada en el sitio del validador ‘lodos los ejemplos de H TM L5 en este libro se validaron m ediante el proceso de cargar un archivo en: val1dator.*3.org/#val1date-by-upload Para usar validator.w3.org/#val idate-by-upload, haga clic en el botón Choose File (Examinar) para seleccionar de su com puta dor a el archivo q ue desea validar. A continua ción, haga clic en More Options (Más opciones). En la lista desplegablc Document Type ( U p o de documento), seleccione HTMLTS (experimental). Seleccione la casilla de verificación Verbose Output (Salida detallada) y luego haga clic en el botó n Check (Veri f 1car) pa ra va lid ar su do cu m en to . Si c ont ie ne errores d e sintaxis, el serv icio de validac ión m os trar á m en sajes para describir esos errores. Como el validador de HTML5 aún se considera experimental, recibirá una advertencia cada vez que valide un do cume nto de H TM L5 .<br />
<br />
Tip para prevenir errores 2.1 La mayoría de los navegadores intentan desplegar los documentos de HTM L5 incluso aunq ue sean inválidos. Esto puede conducir a resultados inesperados e indeseables. Use un servicio de validación como el MarkUp Val1dat1on S«rv1ce /Servicio de validación de aarcadoy del W3C para confirmar que un documento HT ML5 tenga la sintaxis correcta.<br />
<br />
2.5<br />
<br />
Encabezados<br />
<br />
Tal vez cierto texto en u n docu men to de H TM L5 sea más imp ortante que otro. HT M L5 ofrece seis elementos de encabezado (hl a h6) para especificar la importancia relativa de la información (figura 2.2). El elemen to de encabezado h l (línea 12) se conside ra el más significativo y p or lo general se despliega en una fuente más grande que los otros cinco (líneas 13 a 17). Cada elemento de encabezado sucesivo (h2, h3, etc.) se despliega por lo general en una fuente cada vez más pequeña.<br />
<br />
42<br />
<br />
Capítulo 2<br />
<br />
Introducción a HTM L5: parte I<br />
<br />
Tip de portabilidad 2.1 El tomarte de texto que se utiliza para mostrar cada elemento de encabezadopuede variar de un navegador a otro. En el capitulo 4 usaremos CSS para controlar el tamaño del texto y otraspropiedades del mismo.<br />
<br />
Observación de apariencia visua l 2.1 Al colocar un encabezado en la parte superior de cada página es más fácil para los visitantes comprender el propósito de ¡apágina. Los encabezados también ayudan a crear un esquema para un documento y son indexadospor los motores de búsqueda.<br />
<br />
I<br />
<br />
<!DOCTYPE ht*l><br />
<br />
<!-- Fig. 2.2: encabezado.html --> <!-- Los elementos de encabezado hl a h6. --> <ht«il> <head> <meta charset - “ u t f - 8 "> <t1t1e>Encabezados </t1tie> </head> <body><br />
<br />
<hl>Encabezado de nivel <h2>Encabezado de nivel <H3>Encabezado de nivel <h4>Encabezado de nivel <hS>Encabezado de nivel <H6>Encabezado de nivel<br />
<br />
1</H1> 2</h2> 3</h3> 4</h4> 5</hS> 6</h6><br />
<br />
</body><br />
<br />
</html> W [<br />
<br />
t o c» b c * d o!<br />
<br />
C<br />
<br />
*<br />
<br />
'<br />
<br />
l ) ftW//Cyej«mpios/cap02/eocab«zadoMmJ<br />
<br />
>t>oi logtnó&z<br />
<br />
titb SU« GíHey C j Impcrtad© de Irtcrtv..<br />
<br />
•<br />
<br />
E n c a b e z a d o d e n iv el 1 K n c a b e / a d o d e n iv e l 2<br />
<br />
Encabezado de nivel 3 1 n < a b e /a d o d » n h r i 4 EttraWeaét ét a b d 5 K <br />
<br />
4o »«••!«<br />
<br />
•<br />
<br />
Figura 2.2 | Los elemen tos de encabeza do h l a h6.<br />
<br />
2.6<br />
<br />
Vinculación<br />
<br />
Una de las características mis importantes de HTML5 es el hipervínculo, que hace referencia (o vincula) a otros recursos, com o los docum entos de HT M L5 y b s imágenes. Cuan do un usuario haoe clic en u n hipervínculo, el nave-<br />
<br />
2.6<br />
<br />
Vinculación<br />
<br />
43<br />
<br />
jpdo r trata de ejec utar u na acción asociada co n él (p or ejem plo , navegar h ad a u n UR L o ab rir u n c orreo electrónico d e un cliente). Cualquier ¿m íenlo visualizadopuede actuar como lúpervinculo. I br lo general los navegadores Web subrayan los hipervínculos de texto y colorean su texto en azul de manera predeterminada, de modo que los usuarios puedan distinguir los hipervínculos del texto simple. En la figura 2.3 creamos hipervínculos de texto hacia cuatro sitios Web. 1 < IDOCTYPE html><br />
<br />
2 3 <1— Flg. 2.3: vinculos.html — > 4 <1— Vínculos hacia otras páginas Web --><br />
<br />
3 <ht«il> 6 <head> 7 <neta charset - “utf-S"» 8 <title>Vínculos 9 10
11
12 13
Estos son mis sitios favoritos : Haga clic en un nombre para visitar ese sit1o.
14 13 16 17 18 19
< I— crea cuatro hipervínculos de texto --> Facebook
< a href - ,'http:/ /www. twitt er.co m">Tw itter < /p>
F oursquare
Coogle
20
21
C _ file///CV
1*
=
Estos son m is sitios favo ritos: lllfi«fccm MI frontil»*|uri tÍMfJf «f SltK». Farrtef* lata fiaoÉ
Figura 2.3 | Vinculación a otras páginas W :b. (El texto ¿a cu te es el código especial para acentuar letras, como en la Inea 8 de este código). En la línea 13 se inrrod uce el d em en to str on g, el cual indica que su contenido tien e alta imp ortancia. Por b general los navegadores desp liega n di ch o tex to en un a fu en te en ne grita. los vínculos se crean mediante el uso del elemento a (anda). En la línea 16 se define un lúpervinculo hacia el URL asignado al atribu to h r e f (referencia de hiperrexto), el cual especifica la ubicaciónde un recursotal como • Una página Web o ubicación den tro de una página Web • Un archivo • Una dirección de correo electrónico
44
Capítulo 2
Introducción a HTM L5: parte I
El demento ancla en la línea 16 vincula el texto Facebook a una página Web ubicada en http://www. face boo k . com. E l n av eg ad or c am bia e l c olor de cu alqu ier v ín cu lo de texto una vez que se haga clic en és te (en cuyo caso, los vínculos son de color morado en vez de azul). Cuando un URL no indica un documento específico en el sitio Web , el servidor devuelve una página Web prede terminada. A esta página se le conoce por lo general como Index .htm l, pero la mayoría de los servidores Web pued en configurarse para usar cualquier archivo como la página Web predeterminada para el sitio. Si el servidor Web no puede localizar un documento solicitado, devuelve una indicación de error al navegador Web (lo que se conoce como erro r 404) y éste mue stra una página Web que contiene un mensaje de error.
Observación de ingeniería de software 2.1 Aunque no se requiere en HTM L5, se recomienda encerrar los valores de losatributos entre comillas sencillas o dobles.
Crear un hipen>inculo a una dirección de correo electrónico
Las anclas pueden vincular a direcciones de correo electrónico mediante el uso de un URL mal 1t o :. C uando el usuario hace dic en este tipo de vínculo con ancla, la mayoría de los navegadores inician el programa de corteo electrónico pred ete rm inado del usuario (po r ejemplo, Mozilla Th un de rbird, Micro soft O ut lo ok o Ap ple Mail) pata qu e éste pu eda escribir un mensaje d e correo electró nic o a b dilecció n vinc ub da . La figura 2.4 muestra este tipo de anda. Las líneas 13 y 14 contienen un vínculo de correo electrónico. 1.a forma de un an cb d e correo electrónico es .... En este caso, creamos un vínculo a b dirección de correo d e ite lO d e ite l .com. La línea 13 incluye b dirección de corr eo electrónico com o aparecerá en el mensaje visualizado en el navegador. 1
2
3 4 3
6 7 8
<1-- Fig. 2.4: contacto.html — > chtml >
<meta charset = "utf-8"> Barra de navegaciAoacute;n Fig ur a 2 .7 | Imágenes como anclas de vínculos (parte I de 2).
48
Capítulo 2
11 12 13 14 15 16 17 IS 14 20 21
Introducción a HTM L5: parte I
22
23 24 25 26 27 28 24 30 31 32 33 34 35 36 37 38
39 
