UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf

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



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)




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 ]




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




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 :




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.




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

http://2.bp.blogspot.com/-_fZkFSIw8Ac/VVFJlpZH2EI/AAAAAAAAAyQ/GfRaCmDhD04/s1600/5.png




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




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>

http://3.bp.blogspot.com/-T4PUr5Um-LQ/VVJoWF_WuTI/AAAAAAAAAyk/t4KRtLzWjfE/s1600/2.jpg






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.




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>




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.




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




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




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:




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é




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




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,




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>




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




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




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




Atributos de etiquetas form y tipos de entrada

http://3.bp.blogspot.com/-ekaZYWKM0dU/VRRXpu322zI/AAAAAAAAAd0/-qdXzx1mcqM/s1600/html2.png




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




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>




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




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>




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




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.




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




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




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.



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

Documents

UNIDAD-2-ROMERO-MENDEZ-IVAN-DANIEL-12011267-PROGRAMACION-WEB.pdf