UNIDAD I HTML Y HTML DINAMICO
Definición HTML.
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML)
Web
La palabra web (del inglés: red, malla, telaraña[1] ) puede referirse a:
• World Wide Web (también conocida como "la Web"), el sistema de documentos (o páginas web) interconectados por enlaces de hipertexto, disponibles en Internet.
• WorldWideWeb, el primer navegador web, más tarde renombrado a Nexus.
• Una página web: documento o fuente de información, generalmente en formato HTML y que puede contener hiperenlaces a otras páginas web. Dicha página web, podrá ser accesible desde un dispositivo físico, una intranet, o Internet.
• Un sitio web, que es un conjunto de páginas web, típicamente comunes a un dominio o subdominio en la World Wide Web.
• Un servidor web, un programa que implementa el protocolo HTTP para transferir lo que llamamos hipertextos, páginas web o páginas HTML. También se le da este nombre, al ordenador que ejecuta este programa.
• Web 2.0, término acuñado por Tim O'Reilly[2] en 2004 para referirse a una segunda generación de Web basada en comunidades de usuarios y una gama especial de servicios web, como las redes sociales, los blogs, los wikis o las folcsonomías, que fomentan la colaboración y el intercambio ágil de información entre los usuarios.
• Web 3.0: El término Web 3.0 apareció por primera vez en 2006 en un artículo de Jeffrey Zeldman, crítico de la Web 2.0 y asociado a tecnologías como AJAX. Actualmente existe un debate considerable en torno a lo que significa Web 3.0, y cuál es la definición acertada.
Elementos básicos de HTML.
Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (p.ej. ) y una etiqueta de cierre (p.ej. ). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (p.ej. Contenido). Algunos elementos, tales como
, no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML.
Una página web, también conocida como página de Internet, es un documento adaptado para la Web y que normalmente forma parte de un sitio web. Su principal característica son los hiperenlaces a otras páginas, siendo esto el fundamento de la Web.
Una página web está compuesta principalmente por información (sólo texto o multimedia) e hiperenlaces; además puede contener o asociar datos de estilo para especificar cómo debe visualizarse, o aplicaciones embebidas para hacerla interactiva.
Las páginas web son escritas en un lenguaje de marcado que provea la capacidad de insertar hiperenlaces, generalmente HTML.
El contenido de la página puede ser predeterminado ("página web estática") o generado al momento de visualizarla o solicitarla a un servidor web ("página web dinámica"). Las páginas dinámicas que se generan al momento de la visualización se hacen a través de lenguajes interpretados, generalmente JavaScript, y la aplicación encargada de visualizar el contenido es la que debe generarlo. La páginas dinámicas que se generan al ser solicitadas son creadas por una aplicación en el servidor web que alberga las mismas.
Respecto a la estructura de las páginas web algunos organismos, en especial el W3C, suelen establecer directivas con la intención de normalizar el diseño para facilitar y simplificar la visualización e interpretación del contenido.
HTML
Llegó el momento de hablar sobre HTML, el lenguaje con el que crean las páginas web.
HTML es el lenguaje con el que se definen las páginas web. Básicamente se trata de un conjunto de etiquetas que sirven para definir el texto y otros elementos que compondrán una página web.
Por adelantar un poco cómo se utiliza el HTML os diremos que el lenguaje consta de etiquetas que tienen esta forma o. Cada etiqueta significa una cosa, por ejemplo significa que se escriba en negrita (bold) o significa un párrafo, es un enlace, etc. Casi todas las etiquetas tienen su correspondiente etiqueta de cierre, que indica que a partir de ese punto no debe de afectar la etiqueta. Por ejemplo se utiliza para indicar que se deje de escribir en negrita. Así que el HTML no es más que una serie de etiquetas que se utilizan para definir el contenido del documento y algún estilo básico. Esto está en negrita.
Directivas
Piense en directivas ó etiquetas como hablar con el browser, o sea es la manera de darle instrucciones.
Abajo se dan los siguientes ejemplos de directivas:
La primera directiva es de inicio y la siguiente es una directiva del cierre.
Para hacer una directiva de cierre, simplemente agregan un signo / a la directiva de inicio.
La mayoría de directivas, pero no todas tienen una directiva del cierre.
Las directivas o comandos se pueden realizar en mayúsculas o minúsculas.
Directiva HTML
Indica a la computadora que se trata de un programa HTLM.
Todo programa HTML tiene dos partes El encabezado especificado por la directiva HEAD y el cuerpo indicado por la directiva BODY
• Peddinghaus Steel Fabrication Machinery Structural Beams, Plate, Angle
www.peddinghaus.comEnlaces patrocinados
Directiva HEAD
Dentro se colocan las directivas para proporcionar información de la página a los buscadores robóticos de Internet y otras directivas como TITLE, META, SCRIPT y STYLE que a continuación se describen:
Directiva TITLE
Enseña el nombre de la página que se muestra en la barra de título del navegador (Browser) y no el nombre con que se guarda el archivo.
TITLETitulo de la página/TITLE
Directiva META
Proporciona información para que los programas de búsqueda (como google.com, yahoo.com, altavista.com) encuentren nuestra página.
Directiva SCRIPT (Este no es lenguaje HTML, y solo se dará un ejemplo)
Es empleada cuando agregamos programas con el lenguaje JAVA SCRIP, para incluir efectos visuales en la página y acciones.
Ejemplo: Las instrucciones descritas abajo, cambian el texto de los enlaces a rojo al pasar el Mouse sobre ello.
style
/style
Directiva STYLE
Se utiliza para colocar Hojas de Estilo en Cascada (CSS),
Ejemplo: Las instrucciones descritas abajo, indican los atributos y características de la fuente de los textos de la página
STYLE
P {font-family:Arial; font-size:12pt; color:red; background-color:lime}
/STYLE
Escriba las siguientes instrucciones en un editor de textos simple como Word pad ó Write o block de notas.
Ejemplo 1: Saltos de línea y de párrafos
Alineación.
Un buen alineamiento y separación es una marca de buen diseño web. Ten por costumbre asegurar de que el espacio entre elementos es simétrico y relativo a sus tamaños. Aqui hay algunas reglas respecto a la alineación en la web.
• Usa texto alineado a la derecha o a la izquierda, pero no ambos. Texto a la derecha en una columna que está en la derecha provoca un rio de espacios en blanco que resulta horroroso. Si el cuerpo de tu página está alineado a la izquierda, usa la misma alineación para tu columna.
• Encabezados centrados son elegantes, cuerpos centrados no lo son. Dos ejemplos de cabeceras centradas y cuerpos alineados a la izquierda son McSweeney’s y A List Apart.
• Alinea con precisión tus elementos. Si tu cabecera está a 5px de distancia del borde izquierdo de la página, indenta el texto de la página 5px también. Se preciso, 5px no son 7px.
• Veamos en la cabecera de SXSW Bowling un buen ejemplo de como alinear elementos.
•
• Tiene 4 áreas diferentes en la cabecera, y todas están alineados para comunicar mejor el mensaje y producir el máximo efecto. Usa los bordes derecho e izquierdo de la imagen para alinear el texto y la imagen del fenix, ademas mantiene el mismo espaciado alrededor de los 4 elementos para la simetria, una técnica que deberia ser emulada.
•
• Alineación repetitiva y espacio simétrico son dos técnicas que puedes usar extensivamente en interfaces similares a la de los blogs, simplemente porque hay muchas oportunidades para agrupar elementos en algun widget o en áreas rectangulares.
Viñetas y Listas.
Listas
Con frecuencia se usan listas en los documentos. El lenguaje HTML incorpora unas listas con viñetas sencillas o también letras o números. Para dar más vistosidad a las páginas, se suelen emplear también imágenes que se colocan delante de cada párrafo. Vamos a ver algunas de las posibilidades que tenemos.
Listas con viñetas desordenadas
He aquí el ejemplo más sencillo de una de estas listas:
escribimos en html se verá como
ul
li Primer término de la lista
li Segundo término
li Tercer término
/ul • Primer término de la lista
• Segundo término
• Tercer término
Como ves, la lista se declara con la etiqueta UL y finaliza con el cierre de la misma /UL. También podemos modificar las viñetas por medio del atributo TYPE= circle, disc o square (círculo, disco o cuadrado) y añadir sublistas.
escribimos en html se verá como
ul
li type= discPrimer término de la lista
ul
liSublista
liOtro elemento
/ul
li type=circle Segundo término
li type=square Tercer término
/ul • Primer término de la lista
o Sublista
o Otro elemento
o Segundo término
Tercer término
Otro atributo interesante es compact para reducir el espacio entre los elementos
Listas con viñetas ordenadas
Estas listas se caracterizan porque aparecen números o ciertos caracteres que ordenan sus elementos. La etiqueta usada es OL junto con su correspondiente de cierre /OL. El atributo TYPE toma ahora los valores 1, a, A, i, I. Un ejemplo de estas listas es el siguiente
escribimos en html se verá como
ol type=i
li Primer término de la lista
li Segundo término
li Tercer término
li Cuarto
li Quinto
/ol i. Primer término de la lista
ii. Segundo término
iii. Tercer término
iv. Cuarto
v. Quinto
Listas de definición
Estas listas se forman con el elemento que se define y su definición. Las etiquetas son DL y /DL para la lista y dt y dd para los elementos y sus definiciones. Un ejemplo:
escribimos en html se verá como
Dl
dt Término 1º
dd Definición del elemento 1º
dt Término 2º
dd Definición del elemento 2º
dt Término 3º
dd Definición del elemento 3º
/dl Término 1º
Definición del elemento 1º
Término 2º
Definición del elemento 2º
Término 3º
Definición del elemento 3º
Listas
Junto con encabezados y párrafos, son otro de los elementos HTML más comunes. Pueden darse cinco tipos diferentes de listas, cada uno con tags distintas aunque con alguna en común:
2. Listas con viñetas o sin orden: Se engloban por las tags y cada elemento de la lista, también estará encabezado por la tag
. El resultado es que el navegador inserta viñetas (marcadores) delante de cada elemento.
- Menú: Englobadas por las tags
y cada elemento encabezado por la tag
- Directorio: Englobadas por las tags
y cada elemento encabezado por la tag
Listas de glosario: Cada elemento de la lista está compuesto por un término y una definición y cada una de estas partes tiene su propia tag. Estas listas se engloban con las tags
.Generalmente el navegador colocará término y definición en dos líneas diferentes pero esto se puede evitar añadiendo a la tag de apertura el atributo compact:
Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria sangre respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las tags: Las tags de la lista principal englobarán todo el conjunto de las listas y las tags de las listas secundarías se cerraran antes de volver a la lista principal. Ahora quizá le empiece a convenir sangrar el propio código conforme lo va escribiendo en HTML.
Formateo de texto
Cuando se utilizan etiquetas HTML de párrafo, encabezado y listas, estas etiquetas afectan al bloque de texto completo. Pero los estilos de carácter afectan a palabras o caracteres dentro de otras entidades HTML y modifican su aspecto para que de algún modo sea diferente del demás texto que les rodea (por ejemplo negritas o subrayado).
a) Estilos lógicos
Indican cómo se usa el texto, no cómo se despliega.
EM Indica que los caracteres se resaltarán de algún modo (por lo general en cursivas)
STRONG Los caracteres tendrán mayor resaltado que con EM (por ejemplo en negritas)
CODE Indica una muestra de código (en un tipo de letra de ancho fijo, como Courier en navegadores gráficos)
SAMP Indica texto de muestra y es similar a CODE
KBD Indica texto que escribirá el usuario
VAR Indica el nombre de una variable o entidad que se reemplazará por un valor real.
DFN Se usa para destacar una palabra que se definirá o que acaba de ser definida
CITE Esta etiqueta indica una cita breve
b) Estilos físicos
Se puede usar un conjunto de etiquetas de estilos físicos, para modificar el estilo de presentación real del texto. Las etiquetas de estilos físicos indican exactamente la manera como se debe formatear el texto, ya sea en negritas, subrayado, etcétera.
B Negritas
I Cursivas
TT Tipo de letra monoespaciada de máquina de escribir
U Subrayado (descontinuado en HTML 4.0)
S Tachado (descontinuado en HTML 4.0)
BIG Tamaño más grande que el del texto circundante
SMALL Tamaño más pequeño
SUB Subíndice
SUP Superíndice
SUP Exponente
Nota: Tenga en cuenta que si un navegador no puede manejar alguna de las etiquetas físicas la cambiará por otro formato o de plano la pasará por alto, aunque la mayoría de los navegadores actuales las aceptan. Además las etiquetas de carácter se pueden anidar.
Texto preformateado
Este tipo de texto lo muestra tal y como el usuario lo introduce en el editor de texto. Para utilizar texto preformateados, utilice PRE.
c) Líneas horizontales y saltos de línea
La etiqueta HR (que no tiene parte de cierre ni lleva texto asociado) crea una línea horizontal en la página ideal para separar secciones de una página web.
La etiqueta BR produce un salto de línea en el punto donde aparece.
NORB hace que el texto siempre esté en una misma línea.
WBR indica un punto adecuado de salto dentro de una línea. Se usa sólo cuando es apropiado hacerlo. Si la línea cabe bien en la pantalla se pasa por alto.
Direcciones y citas
La etiqueta ARDES se usa para las entidades de firma en las páginas web. Por lo general van al final de una página e indican quién la escribió, cómo ponerse en contacto con él, fecha, cualquier información de derechos de autor, etcétera.
La etiqueta BLOCKQUOTE se usa para crear citas extensas.
Alineación de texto
Para alinear un solo elemento o párrafo use el atributo ALIGN con la etiqueta de dicho elemento. Puede tomar tres valores: LEFT (izquierda), RIGHT (derecha) o CENTER (centro). Ejemplo: H1 ALIGN=CENTER.
Para alinear un conjunto de elementos utilice la etiqueta DIV (que también cuenta con el atributo ALIGN).
f) Tamaño y tipos de fuentes
La etiqueta FONT (descontinuado en HTML 4.0) se utiliza para controlar las características de una cadena de caracteres dada, no cubiertas por los estilos de carácter.
Utilice el atributo SIZE para indicar el tamaño como aparecerán las letras. Los valores son del 1 al 7, en donde el 3 es el predeterminado.
El atributo FACE toma como valor un conjunto de nombres de tipos de letra, escritos entre comillas y separados por comas. Cuando el navegador soporta el atributo busca en el sistema el primer tipo de letra indicado, si no lo encuentra busca el segundo y así hasta que encuentre uno especificado en la lista.
BLINK hace intermitente una parte del texto que se quiera llamar la atención dentro de una página. Pero ¡Cuidado!, y es que esta etiqueta llama demasiado la atención y a muchos les puede llegar a parecer irritante, feo y agresivo.
Vínculos
Para crear vínculos se utiliza la etiqueta A, y se utilizan los atributos NAME, HREF y TITLE. El que más utilizará será HREF que especifica la dirección URL a la que queremos que el texto cree el vínculo. Ejemplo: A HERF= “menu.html” Ir al menú /A.
Cuando especifica entre comillas el nombre de la ruta de acceso de un archivo vinculado, el visualizador lo busca en el mismo directorio en que se encuentra el archivo actual.
Sin embargo puede especificar la ruta de acceso de dos maneras: utilizando rutas de acceso relativas y rutas de acceso absolutas.
Las rutas absolutas solo indican los niveles en los que se encuentran los documentos a los que queremos vincularnos, sin especificar exactamente el nombre de los mismos. En cambio las rutas absolutas señalan los directorios y los nombres de estos donde se encuentra ubicado el archivo al que se establece el vínculo.
Ejemplo de ruta de acceso relativa: HREF=../../archivos/archivo.html” (El documento “archivo.html” está localizado dos niveles de directorio hacia arriba, en el directorio archivos: los dos puntos seguidos de diagonal significan que el documento está situado un subdirectorio arriba del nivel actual).
Ejemplo de ruta de acceso absoluta: HREF=”/Disco1/cluster/archivo.htm” (El documento “archivo.htm” está localizado en el directorio /Disco1/cluster).
Para hacer un vínculo a otra página de Internet (llamados documentos remotos) utilice de igual manera la etiqueta A y en el atributo HREF en lugar de poner la ubicación del archivo escriba la dirección URL del documento de web. Ejemplo: A HREF= “http://www.éstapáginanoexiste.com.ab Ir a ésta página no existe /A.
TABLAS SIMPLES:
Una tabla simple puede ser considerada como un grupo de filas donde cada una de ellas contiene un grupo de celdas, estas tablas, son definidas usando tags. Una tabla simple puede ser insertada en un documento HTML usando tres tags: El tag HTML table(principal contenedor), el tag HTMLtr(fila contenedora) y el tag td (celda simple).
Código
table border="1" summary="Ejemplo de tabla simple."
tr
tdCelda 1/td
tdCelda 2/td
tdCelda 3/td
/tr
tr
tdCelda 4/td
tdCelda 5/td
tdCelda 6/td
/tr
/table
TIPOS DE CELDAS:
Dos tipos de celdas pueden ser definidos en una tabla HTML. Una de ellas es la celda simple (tag HTML td), y la otra es un tipo de celda especial (tag HTML th) que contiene información de encabezado para todas las celdas en la columna (pertenecientes al mismo grupo horizontal).
Código
table border="1" summary="Ejemplo de tabla simple con celdas de encabezado."
tr
thColumna 1/th
thColumna 2/th
thColumna 3/th
/tr
tr
tdCelda 1/td
tdCelda 2/td
tdCelda 3/td
/tr
tr
tdCelda 4/td
tdCelda 5/td
tdCelda 6/td
/tr
/table
UNIFICANDO CELDAS
Para algunas tablas pueden necesitar unificar dos o mas celdas en una sola que tomara el lugar de aquellas afectadas. Estas unificaciones pueden lograrse mediante los atributos “rowspan” (para unificar verticalmente) y “colspan” (para unificar horizontalmente), ambos disponibles para celdas (tag HTML td y tag HTML th).
Código
table border="1" summary="Ejemplo de tabla simple con unificación de celdas de una fila."
tr
tdCampo 1/td
tdCampo 2/td
tdCampo 3/td
/tr
tr
td colspan="2">Campos 4 y 5tdCampo 6/td
/tr
tr
tdCampo 7/td
tdCampo 8/td
tdCampo 9/td
/tr
/table
La etiqueta FORM
Los formularios están delimitados con la etiqueta FORM ... /FORM, que permite reunir varios elementos 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 (para aprender más sobre los métodos POST y GET, consulte el artículo sobre protocolo HTTP)
• ACTION indica la dirección a la que se enviará la información (un script CGI o dirección de correo electrónico (mailto:dirección_de_correo_e@equipo))
Un atributo opcional de la etiqueta FORM es ENCTYPE, que especifica cómo se codifican los datos del formulario.
Esta es la sintaxis para la etiqueta FORM:
FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded"
... /FORM
Ejemplos de las etiquetas FORM:
FORM METHOD=POST ACTION="mailto:webmaster@commentcamarche.net"
FORM METHOD=GET ACTION="http://www.commentcamarche.net/cgi-bin/script.cgi"
Dentro de la etiqueta FORM
La etiqueta FORM actúa como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos.
Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto, botones, tablas y enlaces), 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
La etiqueta INPUT
La etiqueta INPUT es una etiqueta esencial para los formularios, ya que se usa para crear muchos elementos “interactivos”. La sintaxis de esta etiqueta es la siguiente:
INPUT type="Nombre de campo" value="Valor predeterminado" name="Nombre de elemento"
El atributo type se usa para especificar qué tipo de elemento se representa con la etiqueta INPUT. Estos son los valores posibles:
• checkbox: Las casillas de elección pueden adoptar uno de dos estados: checked (seleccionado) o unchecked (no seleccionado). Cuando la casilla es seleccionada, el par nombre/valor se envía al CGI.
• hidden: Este campo, que el navegador no muestra, es para definir una configuración única que se enviará al CGI como par nombre/valor.
• file: Un campo que permite al usuario especificar una ruta de archivo que lleva al archivo que se enviará con el formulario. Los tipos de archivo que pueden ser enviados deben especificarse utilizando el atributo ACCEPT de la etiqueta FORM.
• image: Un botón de envío personalizado que aparece cuando se ubica una imagen en la ubicación definida por el atributo SRC.
• password: Una casilla de texto donde los caracteres escritos aparecen como asteriscos para camuflar el texto de entrada.
• radio: Un botón que permite al usuario elegir entre varias opciones. Cada uno de estos botones debe tener el mismo atributo name. El par nombre/valor del botón radio seleccionado se enviará al CGI. Al aplicar el atributo checked para uno de estos botones se definirá como seleccionado de forma predeterminada.
• reset: Un botón de restauración para quitar todos los elementos en el formulario y restablecer sus valores predeterminados.
• submit: Un botón de envío para enviar el formulario. El texto en el botón puede definirse usando el atributo value.
• text: Una casilla de texto para escribir una línea de texto. El tamaño de la casilla puede definirse usando el atributo size y la extensión máxima del texto con el atributo maxlength.
Ejemplo de formulario
FORM method=post action="cgi-bin/script.pl"
Registro de un usuario
TABLE BORDER=0
TR
TDApellido/TD
TD
INPUT type=text name="apellido"
/TD
/TR
TR
TDNombre/TD
TD
INPUT type=text name="nombre"
/TD
/TR
TR
TDGénero/TD
TD
Hombre:
Mujer: INPUT type=radio name="género" value="M"
brMujer: INPUT type=radio name="género" value="F"
/TD
/TR
TR
TDOcupación/TD
TD
SELECT name="ocupación"
OPTION VALUE="profesor"Profesor/OPTION
OPTION VALUE="estudiante"Estudiante/OPTION
OPTION VALUE="ingeniero"Ingeniero/OPTION
OPTION VALUE="jubilado"Jubilado/OPTION
OPTION VALUE="otro"Otro/OPTION
/SELECT
/TD
/TR
TR
TDComentarios/TD
TD
TEXTAREA rows="3" name="comentarios"
Escriba aquí sus comentarios/TEXTAREA
Enviar
/TD
/TR
TR
TD COLSPAN=2
INPUT type="submit" value="Enviar"
/TD
/TR
/TABLE
/FORM
