Clase 02 by EDDYE SANCHEZ

Escuela AcadĂŠmica Profesional de IngenierĂa de Sistemas

Ing. Sanchez Castillo Eddye Arturo eddiesanchez0710@gmail.com esanchezctl@ucvvirtual.edu.pe Eddyesanchez.ceneinnova.com

Escuela Académica Profesional de Ingeniería de Sistemas

 HTML 5

Escuela Académica Profesional de Ingeniería de Sistemas

 Que es HTML5  Aplicar HTML5 en el desarrollo de una pagina Web  Desarrolla una pagina Web aplicando Tablas, Formularios, Divisiones, Listas, Enlaces y otras etiquetas estándares.

Escuela Académica Profesional de Ingeniería de Sistemas

• Es la nueva versión del lenguaje de marcación HTML para desarrollo de páginas web. • Es un término que agrupa el uso de diversos conceptos relacionados al desarrollo web, como por ejemplo: animaciones, css3, jquery, multimedia, ajax, etc.

• Cuando vemos un sitio bonito, moderno, elegante, con animaciones, sonido, video, etc… seguro que pensamos: “Eso es html5”.

Escuela Académica Profesional de Ingeniería de Sistemas

¿Por qué utilizar HTML5? HTML5 nos permite una mayor interacción entre nuestras páginas web y contenido media (video, audio, entre otros) así como una mayor facilidad a la hora de codificar nuestro diseño básico.

Escuela Académica Profesional de Ingeniería de Sistemas

• • • •

1995 Netscape introduce JavaScript 1999 Microsoft introduce XML 2001-2006 XHTML1 y CSS2.1 2004-2007 WHATWG Web Hypertext Application Technology Working Group (grupo de Opera, Mozilla y Apple). Quieren potenciar aplicaciones web.

• 2007- ahora W3C World Wide Web Consortium Empiezan a desarrollar: HTML5 y CSS3

Escuela Académica Profesional de Ingeniería de Sistemas

• HTML5 todavía no es un estándar. • HTML5 es un lenguaje estable. • El 95% es estándar.

Mayo 2011

Finales 2011

HTML5 = se presenta como borrador, etapa estandar

HTML5 = se considerará estandar Oficialmente se podrá utilizar

2014 HTML5 = recomendación

Datos obtenidos de W3C

Escuela Académica Profesional de Ingeniería de Sistemas

Doctype en XHTML 1.1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa1.0//EN" "http://www.w3.org/MarkUp/...">

Doctype en HTML5: <!Doctype html>

Escuela Académica Profesional de Ingeniería de Sistemas

Meta en XHTML 1.1 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

Meta en HTML5: (sólo codificación de caracteres) <meta charset="UTF-8">

Escuela Académica Profesional de Ingeniería de Sistemas

Script en HTML4: <script type="text/javascript“ scr="jquery.js"></script>

Script en HTML5: <script scr="jquery.js"></script>

Escuela Académica Profesional de Ingeniería de Sistemas

Link stylesheet en HTML4: <link rel="stylesheet" type="text/css” href="style.css">

Link stylesheet en HTML5: <link rel="stylesheet" href="style.css">

Escuela Académica Profesional de Ingeniería de Sistemas

Un nuevo diseño para páginas web, reflejado en las etiquetas <header>,<footer>, <nav>,<section>,<article> las cuales están destinadas a remplazar la necesidad de tener una <div> para cada parte de la página, y en cambio, tener etiquetas específicas para ello

Escuela Académica Profesional de Ingeniería de Sistemas

La creación de un documento o pagina web con HTML requiere de la siguiente estructura:

Toda pagina web que se cree con HTML debe empezar con la etiqueta <HTML> y terminar con </HTML>

Escuela Académica Profesional de Ingeniería de Sistemas

Los editores son los programas donde se pueden escribir las instrucciones para crear las paginas Web. Un editor es el Bloc de Notas de Windows Sin importar el editor que utilice, siempre debe grabar documentos HTML con la extensión HTM o HTML

Otro editor que se puede utilizar es Dreamweaver.

Escuela Académica Profesional de Ingeniería de Sistemas

El ejemplo Nº 01 se ha escrito en bloc de notas y se ha grabado con el nombre de archivo Primera.html

Escuela AcadĂŠmica Profesional de IngenierĂa de Sistemas

Al grabar el archivo en la carpeta PRACTICA, dentro de mis documentos, se observara el archivo con el logo respectivo del navegador.

Escuela Académica Profesional de Ingeniería de Sistemas

El cuerpo de un documento empieza con la etiqueta <BODY> y termina con </BODY>.

Observe que se ha dejado varios espacios en blanco y todo el texto se ha escrito en 3 líneas.

Escuela Académica Profesional de Ingeniería de Sistemas

Sin embargo cuando se muestra el contenido de la pagina el texto ocupa una sola línea.

Escuela Académica Profesional de Ingeniería de Sistemas

Los documentos HTML s e encuentran estrictamente organizados . Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas. En esta parte del capítulo vamos a ver cómo construir la estructura global de un documento HTML y los nuevos elementos semánticos incorporados en HTML5.

<!DOCTYPE> En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo:

<!DOCTYPE html> IMPORTANTE: Esta línea debe ser la primera línea del archivo, sin espacios o líneas que la precedan. De esta forma, el modo estándar del navegador es activado y l as incorporaciones de HTML5 son interpretadas siempre que sea posible, o ignoradas en caso contrario.

Escuela Académica Profesional de Ingeniería de Sistemas

Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Como siempre, la estructura tipo árbol de este lenguaje tiene su raíz en el elemento <html>. Este elemento envolverá al resto del código: <!DOCTYPE html> <html lang=”es”> . . . . </html>

<!DOCTYPE html> <html lang="es"> <head>

</head>

</head> <body>

</html> </body> </html>

<head> va primero, por supuesto, y al igual que el resto de los elementos estructurales tiene una etiqueta de apertura y una de cierre: <body> es parte principal del documento HTML, es el cuerpo. Representa la parte visible de todo documento. Estas etiquetas tampoco han cambiado en relación con versiones previas de HTML.

Escuela Académica Profesional de Ingeniería de Sistemas

<!DOCTYPE html> <html lang="es"> <head> <meta charset="iso-8859-1" /> <meta name="description" content="Ejemplo de HTML5" /> <meta name="keywords" content="HTML5, CSS3, JavaScript" /> </head> <body> </body> </html>

Escuela Académica Profesional de Ingeniería de Sistemas

<title> simplemente especifica el título del documento, y no hay nada nuevo para comentar: <!DOCTYPE html> <html lang="es"> <head> <meta charset="iso-8859-1"> <meta name="description" content="Ejemplo de HTML5"> <meta name="keywords" content="HTML5, CSS3, JavaScript"> <title>Este texto es el título del documento</title> </head> <body> </body> </html>

Escuela Académica Profesional de Ingeniería de Sistemas

Escuela Académica Profesional de Ingeniería de Sistemas

La estructura del cuerpo (el código entre las etiquetas <body>) generará la parte visible del documento. Este es el código que producirá nuestra página web. HTML5 incorpora nuevos elementos que ayudan a identificar cada sección del documento y organizar el cuerpo del mismo. En HTML5 las secciones más importantes son diferenciadas y la estructura principal ya no depende más de los elementos <div> o <table>.

Escuela Académica Profesional de Ingeniería de Sistemas

representa un diseño común encontrado en la mayoría de los sitios webs estos días. A pesar del hecho de que cada diseñador crea sus propios diseños, en general podremos identificar las siguientes secciones en cada sitio web estudiado.

Escuela Académica Profesional de Ingeniería de Sistemas

1. 2. 3. 4. 5.

Cabecera Barra de Navegación Sección de Información Principal Barra Lateral El pie o la barra Institucional

Escuela Académica Profesional de Ingeniería de Sistemas

En la figura se muestra el típico diseño presentado anteriormente, pero esta vez con los correspondientes elementos HTML5 para cada sección (incluyendo etiquetas de apertura y cierre).

Escuela Académica Profesional de Ingeniería de Sistemas

Uno de los nuevos elementos incorporados en HTML5 es <header>. El elemento <header> no debe ser confundido con <head> usado antes para construir la cabecera del documento. La intención de <header> es proveer información introductoria (títulos, subtítulos, logos), usado solo para el cuerpo o secciones específicas dentro del cuerpo: <!DOCTYPE html> <html lang="es"> <head> <meta charset="iso-8859-1"> <meta name="description" content="Ejemplo de HTML5"> <meta name="keywords" content="HTML5, CSS3, JavaScript"> <title>Este texto es el título del documento</title> <link rel="stylesheet" href="misestilos.css"> </head> <body> <header> <h1>Este es el título principal del sitio web</h1> </header> </body> </html>

<nav>

Escuela Académica Profesional de Ingeniería de Sistemas

Es la Barra de Navegación. Esta barra es generada en HTML5. el elemento <nav> se encuentra dentro de las etiquetas <body> pero es ubicado después de la etiqueta de cierre de la cabecera (</header>), no dentro de las etiquetas <header>. Esto es porque <nav> no es parte de la cabecera si no una nueva sección. <!DOCTYPE html> <html lang="es"> <head> . . </head> <body> <header> <h1>Este es el título principal del sitio web</h1> </header> <nav> <ul> <li>principal</li> <li>fotos</li> <li>videos</li> <li>contacto</li> </ul> </nav> </body> </html>

Entre las etiquetas <nav> hay dos elementos que son utilizados para crear una lista. El propósito del elemento <ul> es definir la lista. Anidado entre las etiquetas <ul> encontramos varias etiquetas <li> con diferentes textos representando las opciones del menú. Las etiquetas <li>, como probablemente ya se ha dado cuenta, son usadas para definir cada ítem de la lista. El propósito de este libro no es enseñarle conceptos básicos sobre HTML, si necesita más información acerca de elementos regulares de este lenguaje visite nuestro sitio web y siga los enlaces correspondientes a este capítulo.

Escuela Académica Profesional de Ingeniería de Sistemas

La columna Información Principal contiene la información más relevante del documento y puede ser encontrada en diferentes formas (por ejemplo, dividida en varios bloques o columnas). Debido a que el propósito de estas columnas es más general, el elemento en HTML5 que especifica estas secciones se llama simplemente <section>: <!DOCTYPE html> <html lang="es"> <head> …… </head> <body> <header> <h1>Este es el título principal del sitio web</h1> </header> <nav> <ul> <li>principal</li> <li>fotos</li> <li>videos</li> <li>contacto</li> </ul> </nav> <section> </section> </body> </html>

Escuela Académica Profesional de Ingeniería de Sistemas

<aside> Llamada Barra Lateral se ubica al lado de la columna Información Principal. Es una columna o sección que normalmente contiene datos relacionados con la información principal pero que no son relevantes o igual de importantes . La información dentro de esta barra está relacionada con la información principal pero no es relevante por sí misma. Siguiendo el mismo ejemplo podemos decir que las entradas del blog son relevantes pero los enlaces y las pequeñas reseñas sobre esas entradas son solo una ayuda para la navegación pero no lo que al lector realmente le interesa. En HTML5 podemos diferenciar esta clase secundaria de información utilizando el elemento <aside>

Escuela Académica Profesional de Ingeniería de <!DOCTYPE html> Sistemas <html lang="es"> <head> <meta charset="iso-8859-1"> <meta name="description" content="Ejemplo de HTML5“ <meta name="keywords" content="HTML5, CSS3, JavaScr “> <title>Este texto es el título del documento</title <link rel="stylesheet" href="misestilos.css"> </head> <body> <header> <h1>Este es el título principal del sitio web</h1></header> <nav> <ul> <li>principal</li> <li>fotos</li> <li>videos</li> <li>contacto</li> </ul> </nav> <section> …. </section> <aside> <blockquote>Mensaje número uno</blockquote> <blockquote>Mensaje número dos</blockquote> </aside> </body> </html>

<footer> Para finalizar la construcción de la plantilla solo necesitamos un elemento más. Y lo único que nos queda por hacer es cerrar nuestro diseño para otorgarle un final al cuerpo del documento. HTML5 provee un elemento específico para es te propósito llamado <footer>.

Generalmente, el elemento <footer> representará el final del cuerpo, sin embargo, <footer> puede ser usado múltiples veces dentro del cuerpo para representar también el final de diferentes secciones.

Escuela Académica Profesional de Ingeniería de

<!DOCTYPE html> Sistemas <html lang="es"> <head> <meta charset="iso-8859-1"> <meta name="description" content="Ejemplo de HTML5“ <meta name="keywords" content="HTML5, CSS3, JavaScript"> <title>Este texto es el título del documento</title> <link rel="stylesheet" href="misestilos.css"> </head> <body> <header> <h1>Este es el título principal del sitio web</h1> </header> <nav> <ul> <li>principal</li> <li>fotos</li> <li>videos</li> <li>contacto</li> </ul> </nav> <section> ….. </section> <aside> <blockquote>Mensaje número uno</blockquote> <blockquote>Mensaje número dos</blockquote> </aside> <footer> Derechos Reservados &copy; 2016-2017 </footer> </body> </html>

<article> Los sitios Web normalmente presentan información relevante dividida en partes que comparten similares características. El elemento <article> nos permite identificar cada una de estas partes : <!DOCTYPE html> <html lang="es"> <head> <meta charset="iso-8859-1"> <meta name="description" content="Ejemplo de HTML5"> <meta name="keywords" content="HTML5, CSS3, JavaScript"> <title>Este texto es el título del documento</title> <link rel="stylesheet" href="misestilos.css"> </head> <body> <header> <h1>Este es el título principal del sitio web</h1> </header>

Escuela Académica Profesional de Ingeniería de Sistemas <nav> <ul> <li>principal</li> <li>fotos</li> <li>videos</li> <li>contacto</li> </ul> </nav> <section> <article> Este es el texto de mi primer mensaje </article> <article> Este es el texto de mi segundo mensaje </article> </section> <aside> <blockquote>Mensaje número uno</blockquote> <blockquote>Mensaje número dos</blockquote> </aside> <footer>Derechos Reservados &copy; 2010-2011</footer> </body> </html>

Escuela Académica Profesional de Ingeniería de Sistemas

El elemento <article> no está limitado por su nombre (no se limita, por ejemplo, a artículos de noticias). Este elemento fue creado con la intención de contener unidades independientes de contenido, por lo que puede incluir mensajes de foros, artículos de una revista digital, entradas de blog, comentarios de usuarios, etc… Lo que hace es agrupar porciones de información que están relacionadas entre sí independientemente de su naturaleza.

<article> <!DOCTYPE html> <html lang="es"> <head> <meta charset="iso-8859-1"> <meta name="description" content="Ejemplo de HTML5"> <meta name="keywords" content="HTML5, CSS3, JavaScript"> <title>Este texto es el título del documento</title> <link rel="stylesheet" href="misestilos.css"> </head> <body> <header> <h1>Este es el título principal del sitio web</h1> </header> <nav> <ul> <li>principal</li> <li>fotos</li> <li>videos</li> <li>contacto</li> </ul> </nav>

Escuela Académica Profesional de Ingeniería de Sistemas <section> <article> <header><h1>Título del mensaje uno</h1></header> Este es el texto de mi primer mensaje <footer><p>comentarios (0)</p></footer> </article> <article> <header> <h1>Titulo del mensaje dos</h1> </header> Este es el texto de mi segundo mensaje <footer> <p>comentarios (0)</p> </footer> </article> </section> <aside> <blockquote>Mensaje número uno</blockquote> <blockquote>Mensaje número dos</blockquote> </aside> <footer> Derechos Reservados &copy; 2010-2011 </footer> </body> </html>

<hgroup> para evitar generar múltiples secciones durante la interpretación del documento por parte del navegador, estas etiquetas deben ser agrupadas juntas. Por esta razón, HTML5 provee el elemento <hgroup>: <!DOCTYPE html> <html lang="es"> <head> <meta charset="iso-8859-1"> <meta name="description" content="Ejemplo de HTML5"> <meta name="keywords" content="HTML5, CSS3, JavaScript"> <title>Este texto es el título del documento</title> <link rel="stylesheet" href="misestilos.css"> </head> <body> <header> <h1>Este es el título principal del sitio web</h1> </header> <nav> <ul> <li>principal</li> <li>fotos</li> <li>videos</li> <li>contacto</li> </ul> </nav>

Escuela Académica Profesional de Ingeniería de Sistemas <section> <article> <header> <hgroup> <h1>Título del mensaje uno</h1> <h2>Subtítulo del mensaje uno</h2> </hgroup> <p>publicado 10-12-2015</p> </header> Este es el texto de mi primer mensaje <footer> <p>comentarios (0)</p> </footer> </article> <article> <header> <hgroup> <h1>Título del mensaje dos</h1> <h2>Subtítulo del mensaje dos</h2> </hgroup> <p>publicado 15-12-2011</p> </header> Este es el texto de mi segundo mensaje <footer> <p>comentarios (0)</p> </footer> </article> </section> <aside> <blockquote>Mensaje número uno</blockquote> <blockquote>Mensaje número dos</blockquote> </aside> <footer> Derechos Reservados &copy; 2015-2016 </footer> </body> </html>

<figure> y <figcaption> El elemento <figure> normalmente unidades de información como imágenes o videos son descritas con un corto texto debajo. HTML5 provee un elemento para ubicar e identificar estos títulos descriptivos. Las etiquetas <figcaption> encierran el texto relacionado con <figure> y establecen una relación entre ambos elementos y su contenido. <section> <article> <header> <hgroup> <h1>Título del mens aje uno</h1> <h2>Subtítulo del mensaje uno</h2> </hgroup> <p>publicado 10-12-2011</p> </header> Este es el texto de mi primer mensaje <figure> <img src=”http://minkbooks.com/content/myimage.jpg”> <figcaption>Esta es la imagen del primer mensaje</figcaption> </figure> <footer> <p>comentarios (0)</p></footer> </article>

Escuela Académica Profesional de Ingeniería de Sistemas <article> <header> <hgroup> <h1>Título del mensaje dos</h1> <h2>Subtítulo del mensaje dos</h2> </hgroup> <p>publicado 15-12-2011</p> </header> Este es el texto de mi segundo mensaje <footer> <p>comentarios (0)</p> </footer> </article> </section> <aside> <blockquote>Mensaje número uno</blockquote> <blockquote>Mensaje número dos</blockquote> </aside> <footer> Derechos Reservados &copy; 2015-2016 </footer> </body> </html>

Escuela Académica Profesional de Ingeniería de Sistemas

En HTML se pueden usar secuencias de caracteres o etiquetas para el tratamiento de lo textos que se desean mostrar en una pagina web y se explican a continuación: &nbsp: Permite dejar más de un espacio en blanco entre palabras. <P>: Se utiliza para realizar un salto de párrafo, a diferencia del salto de línea <BR>, el salto de párrafo deja una línea en blanco.

Escuela Académica Profesional de Ingeniería de Sistemas

Los comentarios son textos que se pueden insertar dentro de un documento HTML con la finalidad de ir explicando la forma como se va desarrollando la pagina web. También se utiliza para indicar el nombre de la persona que diseño la pagina así como la fecha y otros datos que se crean convenientes. Los comentarios de un documento HTML se escriben utilizando la siguiente sintaxis:

<!- Texto del comentario ->

Escuela Académica Profesional de Ingeniería de Sistemas

<HTML> <HEAD> <TITLE> Mi primera Pagina Web </TITLE> </HEAD> <BODY> <H1 Align=Center> Esto es un titulo Nº 1 </H1> <H2 Align=Right> Esto es un titulo Nº 2 </H2> <H3> Esto es un titulo Nº 3 </H3> <H4 Align=Left> Esto es un titulo Nº 4 </H4> <H5> Esto es un titulo Nº 5 </H5> <H6> Esto es un titulo Nº 6 </H6> </BODY> </HTML>

La etiqueta desde <H1> </H1> hasta <H6> </H6> permite asignar títulos dentro de una pagina web. Podemos usar el atributo Aling para alinear el titulo a la Derecha (Right), Izquierda (Left) o Centro (Center).

Escuela Académica Profesional de Ingeniería de Sistemas

La etiqueta desde <H1> </H1> hasta <H6> </H6> permite asignar títulos dentro de una pagina web.

Escuela Académica Profesional de Ingeniería de Sistemas

<HTML> <HEAD> <TITLE> Mi primera Pagina Web </TITLE> </HEAD> <BODY> <H1 Align=Center> Esto es un titulo Nº 1 </H1> <H2 Align=Right> Esto es un titulo Nº 1 </H2> <H3> Esto es un titulo Nº 1 </H3> <H4 Align=Left> Esto es un titulo Nº 1 </H4> <H5> Esto es un titulo Nº 1 </H5> <H6> Esto es un titulo Nº 1 </H6> </BODY> </HTML>

Escuela Académica Profesional de Ingeniería de Sistemas

La etiqueta <HR> permite dibujar una línea horizontal y al mismo tiempo realiza un salto de párrafo. La etiqueta <HR> acepta los siguientes parámetros: Align: para alinear la línea horizontal.

Size: Se utiliza para asignar un grosor de la línea. Noshade: Para indicar que la línea no tenga sombra

Width: Se utiliza para indicar el ancho de la línea.

Escuela Académica Profesional de Ingeniería de Sistemas

Existe la etiqueta <FONT> </FONT> cuyos parámetros permiten asignar tipos y tamaños de letras así como colores:

Size: Permite establecer el tamaño de la letra mediante un numero que varia de 1 a 7. El valor predeterminado es 3.

Face: Permite establecer el tipo de letra.

Color: Permite asignarle colores a las letras.

Escuela Académica Profesional de Ingeniería de Sistemas

Sintaxis:

Size: <FONT> SIZE=6> Este es un ejemplo de tamaño de letra </FONT>

Face: <FONT FACE=“Arial”>El tipo de Letra</FONT>

Color: <FONT COLOR=“Red”>La letra es de color Rojo</FONT> <FONT COLOR=#FF0000>La letra es de color Rojo</FONT>

Escuela Académica Profesional de Ingeniería de Sistemas

También se permite asignar ciertos estilos de letras a los textos que deseamos mostrar en una pagina web como negrita, subrayado, cursiva, etc. Los siguientes son llamados estilos físicos en HTML:

<B> </B> : Permite poner en negrita un texto <I> </I> : Permite poner en cursiva un texto <U> </U> : Permite poner un texto subrayado

Escuela Académica Profesional de Ingeniería de Sistemas

También existen estilos lógicos en HTML, para resaltar los textos que se desea mostrar en una pagina Web. <ADDRESS> </ADDRESS> : Se puede utilizar para mostrar direcciones electrónicas. <BLOCKQUOTE> </BLOCKQUOTE>: destaca un texto. Deja espacio antes y después de mostrar el texto realizando saltos de párrafo. <CITE> </CITE> : Para mostrar títulos o citas de libros. <CODE> </CODE>: Para mostrar el código fuente de un lenguaje de programación.

Escuela Académica Profesional de Ingeniería de Sistemas

También existen estilos lógicos en HTML, para resaltar los textos que se desea mostrar en una pagina Web. <DFN> </DFN> : Se puede utilizar para mostrar alguna definición. <EM> </EM>: Se puede mostrar texto en letra cursiva y enfatizada. <KBD> </KBD> : Se puede utilizar para representar texto que se introduce por el teclado. <SAMP> </SAMP>: Se puede utilizar para mostrar información de ejemplos.

Escuela Académica Profesional de Ingeniería de Sistemas

También existen estilos lógicos en HTML, para resaltar los textos que se desea mostrar en una pagina Web. <STRIKE> </STRIKE> : Permite mostrar un texto tachado. <STRONG> </STRONG>: Permite mostrar un texto resaltado con negrita. <VAR> </VAR> : Se puede utilizar para representar variables en una página Web.

Escuela Académica Profesional de Ingeniería de Sistemas

HTML permite asignar atributos en toda la pagina web, para ello debe asignar valores a los atributos de en momento de crear el cuerpo (BODY) de la pagina. Al crear el cuerpo de la pagina se puede utilizar los siguientes atributos:

BACKGROUND Se utiliza para establece una imagen de fondo a la pantalla. Si el tamaño de la imagen no ocupa todo el fondo de la pagina esta se multiplicara hasta llenar todo el fondo.

BGCOLOR Se utiliza para asignar un color de fondo a toda la pagina Web.

Escuela Académica Profesional de Ingeniería de Sistemas

Las listas son un conjunto de elementos que se pueden crear con el lenguaje HTML para mostrarlas en una pagina Web. Hay 3 tipos de listas:

 Listas No Ordenadas  Listas Ordenadas  Listas de Definición Icono: El icono es una palabra que indica lo que va a acompañar a cada elemento de la lista y puede ser: o disc (predeterminado) o circle o square

LISTAS NO ORDENADAS SINTAXIS: <UL TYPE = “icono”> <LH> Titulo de la Lista </LH> <LI> Elemento Nº 01 <LI> Elemento Nº 02 <LI> Elemento Nº 03 . . . <LI> Elemento Nº n </UL>

Escuela Académica Profesional de Ingeniería de Sistemas

Las LISTAS ORDENADAS se caracterizan porque cada elemento va enumerada. START: Es opcional , indica la primera numeración, se indica con el valor n. TYPE: Indica el tipo de numeración, que puede ser; A: Letra Mayúsculas a: Letra Minúscula I: romanos en mayúsculas i: romanos en minúscula 0: números enteros.

LISTAS ORDENADAS SINTAXIS: <OL START = “n” TYPE = “valor”> <LH> Titulo de la Lista </LH> <LI> Elemento Nº 01 <LI> Elemento Nº 02 <LI> Elemento Nº 03 . . . <LI> Elemento Nº n </OL>

Escuela Académica Profesional de Ingeniería de Sistemas

Las LISTAS DE DEFINICIÓN permiten escribir un termino y su definición. <LH> Es opcional, se utiliza para establecer un TITULO a la lista.

<DT> Se utiliza para escribir un termino que deseamos definir. <DD> Se utiliza para describir el termino.

LISTAS DE DEFINICION SINTAXIS: <DL> <LH> Titulo de la Lista </LH> <DT> Termino Nº 01 <DD> Definición Nº 01 <DT> Termino Nº 02 <DD> Definición Nº 02 . . . <DT> Termino Nº n <DD> Definición Nº n </DL>

Escuela Académica Profesional de Ingeniería de Sistemas

Una tabla es un conjunto de filas Y columnas que se pueden crear en HTML. La creación de una Tabla empieza con la etiqueta <TABLE> y termina con </TABLE>. La etiqueta <TABLE> se puede utilizar en forma opcional atributos cuyos valores y características afectaran a toda la tabla y son los siguientes:

Escuela AcadĂŠmica Profesional de IngenierĂa de Sistemas

BORDER Se utiliza para establecer el grosor del borde de una tabla, la forma predeterminada es 0= no borde.

CELLSPACING Se utiliza para establecer es espacio entre cada celda de la tabla, el valor predeterminada es 2.

WIDTH Se utiliza para establecer el ancho de la tabla que se desea crear, el valor puede esta en porcentajes.

HEIGHT Se utiliza para establecer la altura de la tabla que se desea crear, el valor puede esta en porcentajes. <TABLE BORDER=3 WIDTH=50% CELLPADDING=2> </TABLE>

Escuela Académica Profesional de Ingeniería de Sistemas

</CAPTION>

Esta etiqueta es opcional y permite establecer un titulo a la tabla que deseamos crear. Podemos agregarle el atributo de ALIGN y asignarle valores de TOP o BOTTOM. <TABLE BORDER=5> <CAPTION ALIGN=TOP> Titulo de la Tabla </CAPTION> </TABLE>

Escuela Académica Profesional de Ingeniería de Sistemas

<TR>

</TR>

Esta etiqueta permite crear una fila dentro de una tabla, y tiene los siguientes atributos: ALIGN Para indicar la alineación Horizontal del contenido y sus valores son: Left (izquierda) Right (Derecha) o Center (Centro). VALIGN Se utiliza para la alineación vertical del contenido y sus valores sn: Top (Arriba) Middle (Mitad) o Botton (Abajo). BGCOLOR Se utiliza para indicar el color de fondo de las celdas.

Escuela Académica Profesional de Ingeniería de Sistemas

<TH>

</TH>

Esta etiqueta se debe escribir dentro de <TR> </TR> y permite crear columnas de cabecera, es decir columnas en la primera fila de la tabla, y tiene los siguientes atributos: ALIGN Para indicar la alineación Horizontal del contenido y sus valores son: Left, Right, Center, Justify o Decimal. VALIGN Se utiliza para la alineación vertical del contenido y sus valores son: Top, Middle o Botton. WIDTH Se utiliza para indicar el ancho de la columna en %.

Escuela Académica Profesional de Ingeniería de Sistemas

BGCOLOR Se utiliza para indicar el color de fondo de las celdas. ROWSPAN Se utiliza para indicar en número de filas que ocupará la celda. COLSPAN Se utiliza para indicar el numero de columnas que ocupara la celda. NOWRAP Al usar este atributo el ancho de la celda se extenderá de acuerdo al ancho que ocupa el texto. Si no se utiliza el texto pasara a la siguiente línea cuando ocupe el ancho establecido para la columna.

Escuela Académica Profesional de Ingeniería de Sistemas

<TD>

</TD>

Esta etiqueta permite crear dentro de una fila, columnas que contendrán datos. Esta etiqueta se deberá utilizar a partir de la segunda fila si la tabla contiene cabecera.

Escuela Académica Profesional de Ingeniería de Sistemas

En HTML también se puede insertar imágenes en una pagina Web, normalmente las imágenes deben ser GIF o JPG. Se recomienda GIF para mostrar imágenes pequeñas como iconos y JPG para imágenes grandes y reales como una fotografía. SINTAXIS: <IMG SRC=“Ruta\Nombre del Archivo”> <IMG SRC=“URL\Nombre del Archivo”>

Escuela AcadĂŠmica Profesional de IngenierĂa de Sistemas

ALT Con este atributo se indica un texto el cual se visualizara cuando pase el puntero del Mouse por la imagen.

Escuela Académica Profesional de Ingeniería de Sistemas

ALIGN Se utiliza cuando queremos que la imagen vaya acompañada de un texto. Left: Izquierda Right: Derecha Top: Primera Línea del texto Arriba. Bottom: Primera línea del texto abajo Middle: Primera línea del texto al medio.

Escuela Académica Profesional de Ingeniería de Sistemas

Son llamados también enlaces o Link y como su nombre lo indica, permiten enlazar i ir en forma directa a otra parte de la misma pagina Web o a otra pagina.

SINTAXIS: (Enlaces al mismo documento) <A NAME=Nombre de la sección> contenido </A> Para enlazar a la sección creada se utiliza la etiqueta <A REF>

<A REF=#Nombre de la sección> texto </A>

Escuela Académica Profesional de Ingeniería de Sistemas