unidad-2-romero-mendez-ivan-daniel-12011267-programacion-web.pdf
TRANSCRIPT
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 1/34
PROGRAMACION WEB 2016
I NSTI TUTO TECNOLÓGICO
DE ORI ZABA
ALUMNO
ROMERO MENDEZ IVAN DANIEL
MATERIA
PROGRAMACION WEB
TEMA
ACTIVIDADES PROGRAMACION WEB
GRUPO
7g5D
HORA
16:00 A 17:00
Unidad 2
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 2/34
Romero Méndez Iván Daniel Página 2
2.1 Introducción
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto,
es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que
conducen a otros documentos o fuentes de información relacionadas, y con inserciones
multimedia (gráficos, sonido...).
La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos
de texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se
quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un
gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se realice por unprograma especializado (como Internet Explorer, Netscape, Safari entre otros).
Un documento HTML comienza con la etiqueta <html>, y termina con </html>. Dentro del
documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas: el
encabezamiento, delimitado por <head> y </head>, que sirve para definir diversos valores válidos
en todo el documento; y el cuerpo, acotado por <body> y </body>, donde reside la información
del documento.
La versión actual es HTML 5 aun no liberada, ni soportada por todos los navegadores.
Soporte estándares actuales entre otras:
HTML 4
XHTML 1
DOM Nivel 2 (DOM = Document Objetc Model)
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 3/34
Romero Méndez Iván Daniel Página 3
Diferencias del código de HTML5 con lenguajes anteriores
Algunas de las diferencias más notables son las siguientes:
No es necesario el cierre de las etiquetas img, br, hr, input, etc.
Por ejemplo:
<br /> ahora se sustituye por: <br>
<hr /> por: <hr>
<img src=''……/> por: <img src=''……>
<input …./> por: <input ….>
Se puede usar tanto minúsculas como mayúsculas en el código a diferencia del XHTML que
solo admite minúsculas.
El Doctype o declaración del documento está completamente minimizado, en HTML5 solo
es necesario emplear: <!DOCTYPE html>
Introduce nuevos marcadores para sumarlos a los existentes <div> en usos específicos, por
ejemplo: <nav>, <footer>, <audio>, <video>, etc.
Los elementos admitidos por html5 son:
[ a, abbr, address, area, article, aside, audio, b, base, bb, bdo, blockquote, body, br, button
, canvas, caption, cite, code, col, colgroup, command, datagrid, datalist, dd, del, details, dfn
, dialog, div, dl, dt, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, head
, header, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, link, map, mark, menu,
meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, pre, progress, q,
rp, rt, ruby, samp, script, section, select, small, source, span, strong, style, sub, sup, table
, tbody, td, textarea, tfoot, th, thead, time, title, tr, ul, var, video ]
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 4/34
Romero Méndez Iván Daniel Página 4
HTML5 no es un estándar aprobado por el W3C, aunque se puede validar correctamente las
páginas usando el Validador W3C de este organismo.
Algunas de sus ventajas son:
Código más sencillo y simplificado, las páginas cargan más rápido en el navegador.
La gran mayoría de los navegadores de los teléfonos Smartphone y las tabletas, son
compatibles con HTML5
Los plugins, widgets y botones que ofrecen los desarrolladores de las redes como
Facebook, Twitter y otras, escritos en HTML 5 funcionan excelentemente, con más
opciones que los clásicos en XHTML o que los iframes.
Es posible insertar directamente videos en las páginas sin tener que acudir a los iframes o
usar la etiqueta object.
HTML 5 incluye etiquetas orientadas principalmente a los buscadores, para facilitarles
comprender el contenido de las páginas, lo que nos beneficia, por ejemplo: header, footer,
article, nav, etc.
Permite la Geolocalizacion del usuario.
Otras de las razones es el empleo del microformato en las páginas web, que algunos son
totalmente incompatibles con otros lenguajes por lo que no validan correctamente a no
ser que se use HTML5.
2.2 Representación de documentos
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 5/34
Romero Méndez Iván Daniel Página 5
Los lenguajes de marcas, también denominados lenguajes de marcado o lenguajes de descripción
de documentos, construyen un conjunto de reglas que definen todo aquello que es parte de un
documento digital, pero que no pertenece al texto del mismo. Los lenguajes de marcas no son
lenguajes de formato similares a los lenguajes que se usan en Internet como los de descripción de
páginas (archivos PostScript, archivos .pdf, etc.) ni son lenguajes de programación (Java, Perl,
C++…), sino que se trata de lenguajes orientados a definir la estructura y la semántica de un
documento. En realidad, más que de lenguajes, podríamos hablar de metalenguajes o sistemas
formales mediante los cuales se añade información o codificación a la forma digital de un
documento bien para controlar su procesamiento, bien para representar su significado.
En un documento existen distintos niveles de información: por un lado, los datos que conforman
el contenido de un documento (caracteres de contenido), y por otro, una información superpuesta
al contenido, que es lo que constituye el etiquetado, marcado o “markup” (caracteres deetiquetado).
Un lenguaje de marcado cumple con dos objetivos esenciales a la hora de diseñar y procesar un
documento digital :
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 6/34
Romero Méndez Iván Daniel Página 6
Especifica las operaciones tipográficas y las funciones que debe ejecutar el programa
navegador/visualizador sobre dichos elementos. Las operaciones tipográficas son
instrucciones de formato que se aplican a cada uno de los elementos de un documento
digital como, por ejemplo, imprimir un título en negrita y a un determinado tamaño.
Separa un texto en los elementos de los que se compone, como por ejemplo un párrafo,
un capítulo, un encabezamiento, etc.
Así, pues, hay 2 tipos de marcación:
específica: describe cómo ha de formatearse el documento: fuente, tamaño, color, etc.
estructural: describe la estructura del documento: titular, párrafo, etc.
En general los lenguajes de marcado siguen una sintaxis basada en el uso de marcas o etiquetas:
una etiqueta que indica el principio de un elemento y otra el final del mismo.
Por regla general, la mayor parte de autores distinguen 2 tipos básicos de lenguajes de marcado:
Lenguaje de marcado de procedimiento o procesado: Las anotaciones o marcas de los
lenguajes de procedimiento describen la forma y el significado de las operaciones
tipográficas que van a ser aplicadas a cada uno de los elementos del documento. Por
ejemplo, una regla de un lenguaje de procedimiento indicaría que el título de la sección deun texto debe ser impreso en una sola línea con una fuente de seis puntos más grande que
el resto del texto, con objeto de que los lectores puedan inferir que es el título. Se refiere,
pues, a la apariencia física o formato (fuente, estilo de letra, tamaño, etc.) tanto del
documento en pantalla como del documento impreso.
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 7/34
Romero Méndez Iván Daniel Página 7
Lenguaje de marcado estructural o descriptivo: En los lenguajes estructurales las marcas o
anotaciones únicamente describen la estructura lógica del documento digital y/o la
descripción del contenido, no su tipografía.
Aunque lo cierto es que existen 3 utilizaciones básicas de los lenguajes de marcas: los que sirvenprincipalmente para describir el contenido (por ejemplo, las bases de datos), los que sirven para
definir el formato (por ejemplo, los procesadores de textos) y los que realizan las dos funciones
indistintamente (por ejemplo, el lenguaje HTML).
2.3 Tipos de datos básicos
Los tipos de datos se dividen en tipos de datos simples (o primitivos) y tipos de datos complejos.
Los tipos de datos simples se pueden utilizar en los valores de los atributos y en los elementos que
contienen sólo datos carácter. Existe una serie de tipos de datos definidos en el estándar y que por
tanto se pueden usar directamente en los esquemas. Además de estos, el usuario puede definir
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 8/34
Romero Méndez Iván Daniel Página 8
sus propios tipos de datos, tanto simples como complejos, como veremos más adelante.
Existen 19 tipos de datos simples predefinidos primitivos, que se pueden agrupar en 4 categorías:
Tipos cadena
string: secuencia de longitud finita de caracteres*
anyURI: una uri estándar de Internet
NOTATION: declara enlaces a contenido externo no-XML
Qname: una cadena legal Qname (nombre con cualificador)
Tipos binario codificado
boolean: toma los valores “true” o “false” *
hexBinary: dato binario codificado como una serie de pares de dígitos hexadecimales
base64Binary: datos binarios codificados en base 64
Tipos numéricos
decimal: número decimal de precisión (dígitos significativos) arbitraria *
float: número de punto flotante de 32 bits de precisión simple *
double: número de punto flotante de 64 bits de doble precisión *
Tipos de fecha/hora
duration: duración de tiempo
dateTime: instante de tiempo específico, usando calendario gregoriano, en formato
"YYYYMM-DDThh:mm:ss"
date: fecha específica del calendario gregoriano, en formato "YYYY-MM-DD” *
time: una instancia de tiempo que ocurre cada día, en formato "hh:mm:ss"
gYearMonth: un año y mes del calendario gregoriano
gYear: año del calendario gregoriano
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 9/34
Romero Méndez Iván Daniel Página 9
gMonthDay: día y mes del calendario gregoriano
gMonth: un mes del calendario gregoriano
gDay: una fecha del calendario gregoriano (día)
De cada uno de estos tipos primitivos se pueden obtener tipos derivados, como se muestra en elsiguiente diagrama, sacado de la recomendación [3]:
Es posible definir tipos de datos simples a partir de estos tipos predefinidos utilizando las llamadas
facetas.
2.4 Estructura global de un documento
La estructura básíca de un doumento html5 es:
<!DOCTYPE html>
<html lang='es'>
<head>
<meta charset='utf-8' />
<title>Título de la página</title>
<meta name='description'
content='Descripción de la página'>.
</head>
<body>
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 10/34
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 11/34
Romero Méndez Iván Daniel Página 11
marcador de cierre es obligatoria la barra inclinada (/html).
En html 5 la prímera línea es <!DOCTYPE html>
Marcador <head>: los documentos HTML se dividen en dos partes, la cabecera y el cuerpo.
Los navegadores Web necesitan distinguir entre cabecera y cuerpo para poder interpretar
correctamente los documentos. En general la cabecera del documento (head) incluye la
información general sobre el documento. Este marcador tienen su marcador de
terminación con la barra inclinada (/head).
Marcador <body>: incluye el contenido real del documento (body o cuerpo). Este
marcador tiene también su marcador de terminación con la barra inclinada </body>.
Cabecera del documento
Contiene información general sobre el documento HTML. Es obligatorio incluir el marcador <title>,
el resto de los marcadores son opcionales.
Marcador <title>
Los navegadores muestran el título de cada uno de los documentos HTML que encuentran. El
título que aparece se toma del contenido de este marcador. Este marcador debe aparecer con su
pareja con la barra inclinada </title> y dentro de la sección <head>
<title>Esto es el título de la página</title>
Marcador <meta>
Las metatags son etiquetas html que se incorporan en el encabezado de una página web y que
resultan invisibles para un visitante normal, pero de gran utilidad para navegadores u otros
programas que puedan valerse de esta información.
Su propósito es el de incluir información (metadatos) de referencia sobre la página: autor, título,
fecha, palabras clave, descripción, etc. Esta información podría ser utilizada por los robots de
búsqueda para incluirla en las bases de datos de sus buscadores y mostrarla en el resumen de
búsquedas o tenerla en cuenta durante las mismas y será invisible para un visitante normal.
Estas etiquetas también se usan para especificar cierta información técnica de la cual pueden
valerse los navegadores para mostrar la página, como el grupo de caracteres usado, tiempo de
expiración del contenido, posibilidad de dejar la página en cache o calificar el contenido del sitio
("programación web", "Oracle", etc.).
Meta tag Descripción
<meta content='copyright' Indica quien posee los derechos de contenido de la página.
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 12/34
Romero Méndez Iván Daniel Página 12
Meta tag Descripción
name='autor'>
<meta charset='utf-8'>
Indica al servidor que el recurso es un documento del tipo
html. Que está escrito en texto plano y el conjunto decaracteres con los que se ha escrito el contenido de la página.
<meta http-equiv='refresh'
content='30; URL=./indice.html'
/>
Carga la URL en content segundos. En este caso en 30
segundos . No es reconocido por todos los navegadores,
<meta name='Description'
content='El SGML es un
sistema' />
Este tag lo usan los buscadores para dar una descripción del
contenido de la página.
<meta name='Robots'
content='all'/>
Determina si los robots indezaran la página. Los posibles
valores de content son:
all para que el robot tenga en cuenta esta página y pueda
seguir los links contenidos en la misma (este es el valor
predeterminado), noindex para que no la tenga en cuenta.
A manera de ejemplo se muestra el siguiente código
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5</title>
</head>
<body>
<p>Hola mundo desde el ITV</p>
</body>
</html>
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 13/34
Romero Méndez Iván Daniel Página 13
2.5 Elementos basicos: texto, vinculos, listas, tablas, objetos, imagenes y aplicaciones
El HTML (HipertText Markup Language) ó Lenguaje de enlaces hipertexto es un sistema que se
encarga de definir tipos de documentos estructurados y lenguajes de marcas para representar
esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de
documento como al lenguaje de marcas.
Como cualquier página web está soportada por un archivo de texto, se pueden elaborar, editar o
modificar directamente con el bloc de notas, aunque existen programas editores profesionales de
páginas web como Adobe Dreanweaver CS5 y programas gratuitos de edición básica como
Freelabs, que permiten editarlas con algunas funciones automatizadas a través de botones y
menús.
A continuación se presenta una breve descripción de HTML 5, si usted desea conocer más a detalle
puede visitar las múltiples páginas en el internet o consultar la guía oficial en w3c.
Sintaxis
Caracteres:
Cualquier cadena de caracteres imprimibles que no represente un marcado se representa
literalmente, aunque los espacios y tabuladores se reducen a un solo carácter cuando no
están dentro de un bloque preformateado <pre>.
Marcadores, marcas o etiquetas (tags):
Los marcadores delimitan elementos de un documento como cabeceras, párrafos, etc. Lamayoría de los marcadores constan de una marca inicial < ...> , que da el nombre y
atributos del elemento, seguida del contenido ó secuencia de caracteres y una marca
final </...>.
Las marcas iniciales se escriben entre los símbolos '<' y '>' (menor y mayor) y las finales
entre '</' y '>' (menor, barra y mayor). Por ejemplo, <h1>Hola Mundo</h1>, indica que
'Hola Mundo' es una cabecera de nivel uno.
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 14/34
Romero Méndez Iván Daniel Página 14
Algunos elementos sólo tienen una marca inicial (por ejemplo el tag <hr> que representa
una línea horizontal y <br> inserta un salto de línea donde se coloque. Puede colocar
tantas como desee y se insertará un salto de línea por cada una de ellas. ).
Nombres de etiquetas
Los nombres consisten en una letra seguida de letras, dígitos, puntos o guiones. Los
ejemplos <h1> y<hr> anteriores son ejemplos de nombres de etiquetas. La longitud de un
nombre esta limitada a 72 caracteres en la definición del HTML. Los nombres de
elementos y atributos no distinguen entre mayúsculas y minúsculas, pero los nombres de
entidades (la representación alternativa de los caracteres) sí.
En las marcas, el nombre del elemento debe comenzar inmediatamente después del<.
Atributos:
Cuando una marca inicial admite atributos, éstos se escriben a continuación del nombre
del elemento. Generalmente los atributos tienen la forma nombre, signo igual, valor del
atributo aunque en algunos casos basta con el nombre del atributo. Se pueden poner
espacios en blanco antes y después del signo igual.
El valor de un atributo puede ser una cadena de caracteres entre comillas (simples o
dobles) que no contenga el símbolo de fin de marca '>' o un nombre como los definidos en
el apartado anterior. Por ejemplo, en <img src='foto.gif'> , img src es el nombre de la
marca que se refiere a insertar una imagen en la página web ; y "foto.gif" es el valor que
hace referencia al nombre específico de la imagen que queremos incluir.
Comentarios :
Una declaración de comentarios comienza con <!--, le siguen uno o varios comentarios y
termina con -->. Las etiquetas de comentariose visualizan dentro del código html pero no
tiene una traducción hacia el formato final. Es decir, no se visualiza en el navegador
cliente.
Formateo de párrafos o bloques:
El inicio de un párrafo se indica con el tag <p> y su final con el tag </p>. El espaciado y los retornos
de línea son ignorados por los navegadores que interpretan html.
Para agregar un retorno de línea es necesario usar el tag único <br>.
Elemento <hr /> inserta un línea además de un retorno de línea
<blockquote> y <blockquote> Este tag se usa para escribir una cita textual o un párrafo exacto y
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 15/34
Romero Méndez Iván Daniel Página 15
que éste se diferencie del resto del texto. El efecto que nos muestra es que crea un margen
izquierdo yderecho del texto, para que se diferencie de los demás.
<p>La pareja mexicana de Paola Espinosa y Alejandra Orozco se colgó la medalla de plata en la
prueba de plataforma de 10 metros sincronizado de los Juegos Olímpicos de Londres 2012,
mientras que la dupla ganadora fue la integrada por las chinas Chen Roulin y WangHao.</p> <br> <p>El binomio Espinoza-Orozco sumó 343.32 puntos, por 368.40 de las chinas, en
tanto que el bronce fue para las canadienses Roseline Filion y Meaghan Benfeito, con
337.62.</p>
Efecto visual
La pareja mexicana de Paola Espinosa y Alejandra Orozco se colgó la medalla de plata en la prueba
de plataforma de 10 metros sincronizado de los Juegos Olímpicos de Londres 2012, mientras que
la dupla ganadora fue la integrada por las chinas Chen Roulin y Wang Hao.
El binomio Espinoza-Orozco sumó 343.32 puntos, por 368.40 de las chinas, en tanto que el bronce
fue para las canadienses Roseline Filion y Meaghan Benfeito, con 337.62.
Etiquetas de caracteres y tipos de letra:
El lenguaje HTML permite asignar formatos de tipos de letra y caracteres. Existen diversos
marcadores para indicar que una palabra o frase tiene una connotación especial y es obligatorio
poner los marcadores de cierre al final del texto afectado. Estos son algunos de los más utilizados.
Lenguaje HTML Resultado en navegador
<b>texto en negrita</b> texto en negrita
<i>texto en cursiva o itálica</i> texto en cursiva o itálica
<u>texto subrayado</u> texto subrayado
<b><i><u>combinando las tres anteriores</u></i></b> combinando las tres anteriores
<tt>fuente tipo de máquina de escribir</tt> Fuente tipo de máquina de escribir
Subíndice. Por ejemplo H<sub>2</sub>O H2O
Superíndice. Por ejemplo x<sup>2</sup> x2
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 16/34
Romero Méndez Iván Daniel Página 16
Tipos de letras
La etiqueta <font> en HTML es obsoleta. Se supone que se eliminara en futuras versiones de
HTML. A pesar de su uso cotidiano, evitalo en favor de las hojas de estilos.
Para un documento completo podría usar las fuentes de google con un línea en el head como está:
<link href='//fonts.googleapis.com/css?family=Cuprum:400italic,400,700italic,700' rel='stylesheet'
>
Imagenes
Colocar imágenes en nuestra web produce unos resultados asombrosos de una manera muy fácil.
El tag básico para colocar una imagen es "img". Este tag, a diferencia de la gran mayoría de los tags
de html, no necesita un cierre. El atributo "src" es imprescindible para poder colocar una imagen.
Este atributo es el que indica dónde se encuentra alojada la imagen que queremos mostrar. Se
escribe así: <img src="ruta">, donde "ruta" es la dirección o la url dónde se encuentra situada la
imagen. Solo es posible cargar imagenes gif , jpg y png.
Código Efecto visual
<img alt ='' src='images/moneda.jpg'>
El tag <img> tiene dos atributos que debemos considerar alt y title, básicamente los dos cumplen
la misma función, mostrar un título al estar el mouse sobre la imagen. No todos los navegadores
soportan ambos, por ejemplo iExplorer solo soporta title. Para fines de validación es necesario
incluir alt=''.
Si la imagen es usada como hipervinculo, el valor por defecto es 1px. Si no requerimos el bordees
necesario agregar el atributo border='0' sobre todo si usamos iExplorer de preferencia en una hoja
de estilo. Por ejemplo.
img {
border: 0px;
}
Hiperenlaces
Es la piedra angular de HTML, este tag se utiliza para crear hipervínculos: el texto en cual podemos
hacer clic en un navegador para ir a otra página web. La sintaxis es la siguiente:
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 17/34
Romero Méndez Iván Daniel Página 17
href
Este atributo específica la localización de un recurso de la Web, definiendo así un vínculo entre el
elemento actual (el origen del vínculo) y el destino del vínculo definido por este atributo. El
destino de un vinculo puede ser: una página web interna o externa, o un título, imagen, parrafo
dentro de la misma página con el vinculo de origen (enlaces internos)
target
Destino del hiperenlace
_self : Abrir el enlace en la misma ventana que se encuentra el documento actual (valor
por defecto). En el caso que existe un iframe, la ventana se abrira en el mismo marco
_blank:independientemente de si el enlace esta o no dentro de un iframe, el valor '_blank'
creará una ventana nueva
<a href='www.itver.edu.mx'>I.T.V</a>
Listas
Listas desordenadas
Están englobadas por las etiquetas <ul>...</ul> (unordered list). Cada uno de los elementos de la
lista comenzará con una etiqueta <li>.
Codigo
<ul>
<li>Café</li>
<li>Leche</li>
<li>Té</li>
</ul>
Visualizacion
Café
Leche
Té
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 18/34
Romero Méndez Iván Daniel Página 18
2.6 Estructura y disposición
<header>: Delimita el encabezado visible del sitio dentro de esta etiqueta generalmenteencontraremos el menú, logotipo, y encabezados del sitio.
<nav>: Dentro de nav pondremos siempre las ligas más importantes del sitio.
<aside> Representa una sección de una página que consiste en contenido que está
tangencialmente relacionado con el contenido que le rodea, que podría ser considerado
independiente de ese contenido.
<section> se usa para representar un bloque de nuestra página que tiene valor semántico, es
decir, que aporta un significado a la página. Realmente si tenemos que clasificar por la importanciadel significado, el ranking sería: article sería la etiqueta que contiene la información más relevante,
section la que contiene información menos relevante, y div que contiene información que no
aporta significado ninguno.
Un aspecto importante de la etiqueta section es que debe tener un título. La etiqueta section crea
una sección de manera explícita en el outline del documento, por lo tanto debemos siempre
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 19/34
Romero Méndez Iván Daniel Página 19
asignarle un encabezado (h1-h6) ya que si no se le aplicará directamente untitle.
Por lo tanto, una buena forma de identificar cuando es necesario usar una etiqueta section es
cuando tengamos la necesidad de aplicar un encabezado.
<article> representa una composición auto-contenida en un documento, página, una aplicación o
en el sitio, que se destina a distribuir de forma independiente o reutilizable, por ejemplo, en la
sindicación. Podría ser un mensaje en un foro, un artículo de una revista o un periódico, una
entrada de blog, un comentario de un usuario, un widget interactivo o gadget, o cualquier otro
elemento independiente del contenido.
Cuando los elementos <article> están anidados, los internos representan artículos
relacionados con el exterior. Por ejemplo, los comentarios de un blog pueden ser
elementos <article> anidados al que representa la entrada del blog.
Los datos del autor de un elemento <article> pueden ser proporcionados a través del
elemento<address>, pero no se aplica a los elementos <article> anidados.
La fecha de publicación y el tiempo de un elemento <article> pueden ser descritos con el
atributopubdate atributo de un elemento <time>.
<address>. Es el elemento encargado de contener la información de contacto con los autores del
documento.
atributo Descripción valor
titleTexto informativo o título del elemento.
Suele mostrarse a modo de 'tool tip'.Texto legible. Sensible a M/m..
id
Le da un nombre al elemento que lo
diferencia de todos los demás del
documento.
Un nombre único. Sensible a M/m.
classAsigna nombres de clases al elemento. Por
defecto, clases CSS.
Lista de clases separadas por espacio en
blanco. Sensible a M/m. cdata
stylePermite especificar información de estilo1.
Por defecto, estilos CSS.Declaraciones de estilo.
langInformación sobre el idioma del contenido
del elemento y del valor de sus atributos.Un código de idioma.
dir Indica la dirección de texto y tablas. Uno de los siguientes: 'ltr' o 'rtl'.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 20/34
Romero Méndez Iván Daniel Página 20
atributo Descripción valor
onmouseout, onkeypress, onkeydown, onkeyup.
<footer>: dentro de footer generalmente se ponen cosas como otras ligas, derechos de autor etc,pero no es exclusivo, podemos usarlos para desplegar lo que necesitemos, siempre y cuando este
en el 'pie' de la pagina.
<!DOCTYPE html>
<html lang='es'>
<head>
<meta charset='utf-8' />
<title>Estructura básica de una página web en HTML5</title>
</head>
<body>
<header>
<nav>
<a href='inicio.html'>Inicio</a>
<a href='contacto.html'>Nosotros</a>
<a href='opcion1.html'>Opcion</a>
<a href='opcion2.html'>Opcion</a>
</nav>
</header>
<aside>
<p>Estas secciones son a menudo representadas como barras laterales o como
inserciones y contienen una explicación al margen como una definición de
glosario, publicidad, la biografía del autor,o en aplicaciones web, la
información de perfil o enlaces a blogs relacionados</p>
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 21/34
Romero Méndez Iván Daniel Página 21
</aside>
<section>
<p>Un section es una manera de dividir la página por 'secciones' de tal
modo que podemos dividir el contenido de esta por temas</p>
<article>
<h1>El article es la parte mas importante del sitio</h1>
<p>Basicamente en el article pondremos lo más importante de la
página, en orden jerárquico, un article puede tener header y
footer, sin estropear el diseño.</p>
</article>
</section>
<footer>
<p> © Derechos reservados</p>
<p>Contacteme en [email protected]</p>
</footer>
</body>
</html>
2.7 Formularios
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 22/34
Romero Méndez Iván Daniel Página 22
Los formularios son una característica del estándar HTML que permite a los autores llevar datos
del exterior al interior de nuestro sistema. Esto se logra mediante componentes que transportan
diversos tipos de datos para múltiples aplicaciones donde tu imaginación es el límite
Los formularios están delimitados con la etiqueta <form> ... </form>, que permite reunir varioselementos de formulario, como botones y casillas de texto y que debe poseer los siguientes
atributos:
method indica cómo se enviarán las respuestas "post" es el valor que envía los datos al
agente de procesamiento almacenándolos en el cuerpo del formulario, en tanto que "get"
envía los datos agregándolos a la dirección URL y separándolos de la dirección con un
signo de interrogación.
action indica la dirección a la que se enviará la información (una url o dirección de correo
electrónico: mailto:dirección_de_correo@equipo)
target nos permite mostrar el resultado en la ventana deseada:
target = '_blank' Fuerza que el documento referenciado por el enlace sea
mostrado en una nueva ventana del navegador.
target = '_self' El documento referenciado se mostrara en la misma ventana
La sintaxis genérica para la etiqueta form:
<form name='nombre' method='get/post'
action='url' target = '_blank/_self'
enctype = 'x-www-form-urlencoded'>
...Cuerpo del formulario</form>
La etiqueta form actúa como una especie de contenedor para almacenar elementos que permiten
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 23/34
Romero Méndez Iván Daniel Página 23
al usuario seleccionar o introducir datos. Todos los datos se enviarán a la dirección URL indicada
en el atributo action de la etiqueta form, por el método indicado en el atributo method .
Un ejemplo básico es:
<form method='post'
action='http://www.prograweb.com.mx'>
<input type='submit' value='Enviar' />
</form>
Se puede insertar cualquier elemento HTML en una etiqueta form (como botones, hipervínculos,
tablas y texto), pero los elementos interactivos son los más interesantes. Estos elementos
interactivos son:
La etiqueta input : Todos los botones y casillas de texto
La etiqueta textarea: una casilla de texto
La etiqueta select : una lista de opciones múltiples
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 24/34
Romero Méndez Iván Daniel Página 24
Atributos de etiquetas form y tipos de entrada
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 25/34
Romero Méndez Iván Daniel Página 25
ACTIVIDAD Unidad 2 lenguaje HTML
HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de
hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web.
Es un estándar que sirve de referencia del software que conecta con la elaboración de
páginas web en sus diferentes versiones, define una estructura básica y un código(denominado código HTML) para la definición de contenido de una página web, como
texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web
Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de
casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e
interpretación. Se considera el lenguaje web más importante siendo su invención crucial
en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que
se ha impuesto en la visualización de páginas web y es el que todos los navegadores
actuales han adoptado.1
El lenguaje HTML basa su filosofía de desarrollo en la diferenciación. Para añadir un
elemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrustadirectamente en el código de la página, sino que se hace una referencia a la ubicación de
dicho elemento mediante texto. De este modo, la página web contiene solamente texto
mientras que recae en el navegador web (interpretador del código) la tarea de unir todos
los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje
que permita que cualquier página web escrita en una determinada versión, pueda ser
interpretada de la misma forma (estándar) por cualquier navegador web actualizado.
Sin embargo, a lo largo de sus diferentes versiones, se han incorporado y suprimido
diversas características, con el fin de hacerlo más eficiente y facilitar el desarrollo de
páginas web compatibles con distintos navegadores y plataformas (PC de escritorio,
portátiles, teléfonos inteligentes, tabletas, vipers etc. No obstante, para interpretarcorrectamente una nueva versión de HTML, los desarrolladores de navegadores web
deben incorporar estos cambios y el usuario debe ser capaz de usar la nueva versión del
navegador con los cambios incorporados. Normalmente los cambios son aplicados
mediante parches de actualización automática (Firefox, Chrome) u ofreciendo una nueva
versión del navegador con todos los cambios incorporados, en un sitio web de descarga
oficial (Internet Explorer). Por lo que un navegador desactualizado no será capaz de
interpretar correctamente una página web escrita en una versión de HTML superior a la
que pueda interpretar, lo que obliga muchas veces a los desarrolladores a aplicar técnicas
y cambios que permitan corregir problemas de visualización e incluso de interpretación de
código HTML. Así mismo, las páginas escritas en una versión anterior de HTML deberían
ser actualizadas o reescritas, lo que no siempre se cumple. Es por ello que ciertos
navegadores todavía mantienen la capacidad de interpretar páginas web de versiones
HTML anteriores. Por estas razones, todavía existen diferencias entre distintos
navegadores y versiones al interpretar una misma página web.
Atributos
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 26/34
Romero Méndez Iván Daniel Página 26
HTML define 91 etiquetas que los diseñadores pueden utilizar para marcar los diferentes
elementos que componen una página:
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br,
button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset,
font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins,
isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol,
optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style,
sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var.
De todas las etiquetas disponibles, las siguientes se consideran obsoletas y no se pueden
utilizar: applet, basefont, center, dir, font, isindex, menu, s, strike, u. A pesar de que se
trata de un número de etiquetas muy grande, no es suficiente para crear páginas
complejas. Algunos elementos como las imágenes y los enlaces requieren cierta
información adicional para estar completamente definidos. La etiqueta <a> por ejemplo se
emplea para incluir un enlace en una página. Utilizando sólo la etiqueta <a> no es posible
establecer la dirección a la que apunta cada enlace. Como no es viable crear una etiquetapor cada enlace diferente, la solución consiste en personalizar las etiquetas HTML
mediante cierta información adicional llamada atributos.
De esta forma, se utiliza la misma etiqueta <a> para todos los enlaces de la página y se
utilizan los atributos para indicar la dirección a la que apunta cada enlace.
<html>
<head>
<title>Ejemplo de atributos en las etiquetas</title>
</head>
<body>
<p>
Los enlaces son muy fáciles de indicar:
<a>Soy un enlace incompleto, porque no tengo dirección de destino</a>.
<a href="http://www.google.com">Este otro enlace apunta a la página de Google</a>.
</p>
</body>
</html>
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 27/34
Romero Méndez Iván Daniel Página 27
No todos los atributos se pueden utilizar en todas las etiquetas. Por ello, cada etiqueta
define su propia lista de atributos disponibles. Además, cada atributo también indica el
tipo de valor que se le puede asignar. Si el valor de un atributo no es válido, el navegador
ignora ese atributo.
Aunque cada una de las etiquetas HTML define sus propios atributos, algunos de los
atributos son comunes a muchas o casi todas las etiquetas. De esta forma, es habitual
explicar por separado los atributos comunes de las etiquetas para no tener que volver a
hacerlo cada vez que se explica una nueva etiqueta. Los atributos comunes se dividen en
cuatro grupos según su funcionalidad:
Atributos básicos: se pueden utilizar prácticamente en todas las etiquetas HTML.
Atributos para internacionalización: los utilizan las páginas que muestran sus contenidos
en varios idiomas.
Atributos de eventos: sólo se utilizan en las páginas web dinámicas creadas con
JavaScript.
Atributos de foco: relacionados principalmente con la accesibilidad de los sitios web.
id = "texto": Establece un identificador único a cada elemento dentro de una página HTML
class = "texto": Establece la clase CSS que se aplica a los estilos del elemento
style = "texto": Establece de forma directa los estilos CSS de un elemento
title = "texto" Establece el título a un elemento (mejora la accesibilidad y los navegadores
lo muestran cuando el usuario pasa el ratón por encima del elemento)
La mayoría de páginas web actuales utilizan los atributos id y class de forma masiva. Sin
embargo, estos atributos sólo son realmente útiles cuando se trabaja con CSS y con
Javascript. Respecto al valor de los atributos id y class, sólo pueden contener guiones
medios (-), guiones bajos (_), letras y/o números, pero no pueden empezar por números.
Además, los navegadores distinguen mayúsculas de minúsculas y no se recomienda
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 28/34
Romero Méndez Iván Daniel Página 28
utilizar letras como ñ y acentos, ya que no es seguro que funcionen correctamente en
todas las versiones de todos los navegadores.
Atributos para internacionalización
Estos atributos son útiles para aquellas páginas que muestran sus contenidos en varios
idiomas y para aquellas que quieren indicar de forma explítica el idioma de suscontenidos:
Atributo
lang = "codigo de idioma" Indica el idioma del elemento mediante un código predefinido
xml:lang = "codigo de idioma" Indica el idioma del elemento mediante un código
predefinido
dir Indica la dirección del texto (útil para los idiomas que escriben de derecha a
izquierda)
En las páginas XHTML, el atributo xml:lang tiene más prioridad que lang y es obligatorio
incluirlo siempre que se incluye el atributo lang. Los idiomas se indican mediante un
código estandarizado (es para español, en para inglés, etc.).
Como la palabra internacionalización es muy larga, se suele sustituir por la abreviatura
i18n (el número 18 se refiere al número de letras que existen entre la letra i y la letra n de
la palabra internacionalización).
Atributos de eventos
Estos atributos sólo se utilizan en las páginas web que incluyen código JavaScript pararealizar acciones dinámicas sobre los elementos de la página. Cada vez que el usuario
pulsar una tecla, mueve su ratón o pulsa cualquier botón del ratón, se produce un evento
dentro del navegador. Utilizando JavaScript y los siguientes atributos, es posible
responder de forma adecuada a cada evento.
Atributo
onblur Deseleccionar el elemento <button>, <input>, <label>, <select>, <textarea>,
<body>
onchange Deseleccionar un elemento que se ha modificado <input>, <select>,
<textarea>
onclick Pinchar y soltar el ratón Todos los elementos
ondblclick Pinchar dos veces seguidas con el ratón Todos los elementos
onfocus Seleccionar un elemento <button>, <input>, <label>, <select>,
<textarea>, <body>
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 29/34
Romero Méndez Iván Daniel Página 29
onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>
onkeypress Pulsar una tecla Elementos de formulario y <body>
onkeyup Soltar una tecla pulsada Elementos de formulario y <body>
onload La página se ha cargado completamente <body>
onmousedown Pulsar (sin soltar) un botón del ratón Todos los elementos
onmousemove Mover el ratón Todos los elementos
onmouseout El ratón "sale" del elemento (pasa por encima de otro elemento) Todos los
elementos
onmouseover El ratón "entra" en el elemento (pasa por encima del elemento) Todos los
elementos
onmouseup Soltar el botón que estaba pulsado en el ratón Todos los elementos
onreset Inicializar el formulario (borrar todos sus datos) <form>
onresize Se ha modificado el tamaño de la ventana del navegador <body>
onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar el formulario <form>
onunload Se abandona la página (por ejemplo al cerrar el navegador) <body>
Atributos de foco
Cuando el usuario selecciona un elemento en una aplicación, se dice que "el elemento
tiene el foco del programa". Si por ejemplo un usuario pincha con su ratón sobre un
cuadro de texto y comienza a escribir, ese cuadro de texto tiene el foco del programa,
llamado "focus" en inglés. Si el usuario selecciona después otro elemento, el elemento
original pierde el foco y el nuevo elemento es el que tiene el foco del programa. Los
elementos de las páginas web también pueden obtener el foco de la aplicación (en este
caso, el foco del navegador) y HTML define algunos atributos específicos para controlar
cómo se seleccionan los elementos.
Atributo
accesskey = "letra" Establece una tecla de acceso rápido a un elemento HTML
tabindex = "numero" Establece la posición del elemento en el orden de tabulación de la
página. Su valor debe estar comprendido entre 0 y 32.767
onfocus, onblur =Controlan los eventos JavaScript que se ejecutan cuando el elemento
obtiene o pierde el foco
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 30/34
Romero Méndez Iván Daniel Página 30
Cuando se pulsa repetidamente la tecla del tabulador sobre una página web, el navegador
selecciona de forma alternativa todos los elementos de la página que se pueden
seleccionar (principalmente los enlaces y los elementos de formulario). El atributo
tabindex permite alterar el orden en el que se seleccionan los elementos, por lo que es
muy útil cuando se quiere controlar de forma precisa cómo se seleccionan los campos de
un formulario complejo. Por su parte, el atributo accesskey permite establecer una teclapara acceder de forma rápida a cualquier elemento. Aunque la tecla de acceso rápido se
establece mediante HTML, la combinación de teclas necesarias para activar ese acceso
rápido depende del navegador. En el navegador Internet Explorer se pulsa la tecla ALT +
la tecla definida; en el navegador Firefox se pulsa Alt + Shift + la tecla definida; en el
navegador Opera se pulsa Shift + Esc + la tecla definida; en el navegador Safari se pulsa
Ctrl + la tecla definida
Etiquetas HTML
<HTML> … </HTML>
Delimita y engloba toda la página web, que consta de cabecera y cuerpo.
<HEAD> … </HEAD>
Delimita y engloba la cabecera de una página, que contiene un conjunto de informaciones
que no se muestran en la ventana, entre ellas el título de la página, pero que pueden
ayudar a los navegadores y a los buscadores para interpretar o a encontrar correctamente
la página.
<TITLE> … </TITLE>
Dentro de la cabecera (HEAD), lo que se incluye aquí se muestra en la barra del título dela ventana del navegador.
Metadatos
La cabecera admite otras muchas etiquetas.
<BODY> … </BODY>
Delimita y engloba el cuerpo de la página, que son el conjunto de informaciones (texto e
imágenes) que se muestran en la página, así como las indicaciones de cómo deben
mostrarse.
Admite atributos (ver jac 8 y apuente 5.3 y 14.3).
Formatos de párrafo
El texto de la página se puede estructurar en encabezamientos de los diferentes
apartados de la página, que pueden tener distintos niveles de 1 a 6 (siendo 1 el más
importante) y párrafos normales.
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 31/34
Romero Méndez Iván Daniel Página 31
<H1> ... </H1> o <H2> ... </H2> (hasta 6)
Párrafos que son encabezamientos (con distintos niveles).
<P>... </P>
Párrafos normales.
<P align="center">... </P>
El atributo align permite alinear el texto del párrafo. Se puede aplicar igual a las etiquetas
<H1>, <H2>, etc ...
<BR>
Permite partir un párrafo empezando una línea nueva pero sin dejar espacio.
<HR>
Pone una linea horizontal de separación. (admite atributos) (ver apuente 11.1).
<BLOCKQUOTE>…</BLOCKQUOTE>
Sangra el párrafo.
Formatos de texto
El formato de caracteres permite cambiar tanto el tipo de fuente como su tamaño y
aspecto.
Se pueden utilizar varias etiquetas HTML para dar distintos formatos a un grupo de
caracteres:
Formatos Físicos:
Negrita: <B>…</B>
Cursiva: <I>…</I>
Subrayado: <U>…</U>
Teletipo: <TT>…</TT>
Tachado: <STRIKE>…</STRIKE>
Grande: <BIG>…</BIG>
Pequeña: <SMALL>…</SMALL>
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 32/34
Romero Méndez Iván Daniel Página 32
Superíndice: <SUP>…</SUP>
Subíndice: <SUB>…</SUB>
Formatos Lógicos:
Cita: <CITE>…</CITE>
Código: <CODE>…</CODE>
Definición: <DFN>…</DFN>
Énfasis: <EM>…</EM>
Grueso: <STRONG>…</STRONG>
Palabras clave: <KEY>…</KEY>
Ejemplos: <SAMP>…</SAMP>
Usuario: <KBD>…</KBD>
Variables: <VAR>…</VAR>
Ejemplo literal: <XMP>...</XMP> (ignora las etiquetas HTML de dentro)
Posibilidad de combinar etiquetas (anidándolas, esto es, una dentro de otra):
<B>…<I>…</I>…</B> (Correcto)
<B>…<I>…</B>…</I> (Incorrecto)
<FONT COLOR="red"> ... </FONT>
Indicación expresa del tipo de letra a usar, en este caso el color (ver jac 8.2)
<FONT SIZE="+1"> ... </FONT>
Indicación expresa del tipo de letra a usar, en este caso el tamaño (ver jac 8.1-segunda
parte)
La etiqueta FONT permite combinaciones cualesquiera de los atributos COLOR, SIZE y
FACE
Caracteres especiales
Existe una serie de caracteres del ISO-LATIN-1 que no se pueden representar
directamente en un documento HTML, puesto que forman parte del propio vocabulario del
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 33/34
Romero Méndez Iván Daniel Página 33
lenguaje, como por ejemplo los símbolos <, >, &, etc. Adicionalmente, las vocales
acentuadas y algunos signos de puntuación deben ser especificados de forma distinta,
puesto que los navegadores pueden no entender el código del carácter utilizado y
convertirlo a otro diferente.
Los caracteres especiales más usados son:
á á
é é
í í
ó ó
ú ú
à à
ñ ñ
< <
> >
& &
ç ç
" “
espacio en blanco
(ver apuente 10.1)
Listas
(ver apuente 7)
<UL> ... </UL>
Lista numerada.
<OL> ... </OL>
Lista no numerada.
<LI> ... </LI>
Elementos de una lista.
8/16/2019 UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf
http://slidepdf.com/reader/full/unidad-2-romero-mendez-ivan-daniel-12011267-programacion-webpdf 34/34
Enlaces
Sirven para acceder desde una página a otra página o a otro recurso disponible (ver
apuente 15).
<a href="http://servidor/recurso.html">texto del enlace</a>
Enlace absoluto a una página
<a href="recurso.html">texto del enlace</a>
Enlace relativo a una página
<a name="marcador"> ... </a>
Marcador (enlace interno) dentro de una página
<a href="#marcador">texto del enlace</a>
Enlace a un marcador de la misma página
<a href="recurso.html#marcador">texto del enlace</a>
Enlace a un marcador de otra página (que puede darse con dirección absoluta o relativa)
<a href="recurso.html" target="_blank">texto del enlace</a>
Enlace a otra página (absoluta o relativa, con o sin marcador) que se abra en otra
ventana.
Imágenes
<img src="nombre.gif">