Manual Terico Practico Lenguaje HTML

1 SECUNDARIA

LENGUAJE HTML
Qu es el Lenguaje HTML? HTML, siglas de HyperText Markup Language (lenguaje de marcado de hipertexto), es el lenguaje de marcado predominante para la elaboracin de pginas web. Es usado para describir la estructura y el contenido en forma de texto, as como para complementar el texto con objetos tales como imgenes. HTML se escribe en forma de etiquetas, rodeadas por corchetes angulares (<,>). HTML tambin 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. Primeras especificaciones: La primera descripcin de HTML disponible pblicamente fue un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. Describe 22 elementos comprendiendo el diseo inicial y relativamente simple de HTML. Trece de estos elementos todava existen en HTML 4. Berners-Lee consideraba a HTML una ampliacin de SGML, pero no fue formalmente reconocida como tal hasta la publicacin de mediados de 1993, por la IETF, de una primera proposicin para una especificacin de HTML: el boceto Hypertext Markup Language de Berners-Lee y Dan Connolly, el cual inclua una Definicin de Tipo de Documento SGML para definir la gramtica. El boceto expir luego de seis meses, pero fue notable por su reconocimiento de la etiqueta propia del navegador Mosaic usada para insertar imgenes sin cambio de lnea, reflejando la filosofa del IETF de basar estndares en prototipos con xito. Similarmente, el boceto competidor de Dave Raggett HTML+ (Hypertext Markup Format) (Formato de marcaje de hipertexto), de 1993 tardo, sugera, estandarizar caractersticas ya implementadas tales como tablas. HTML consta de varios componentes vitales, incluyendo elementos y sus atributos, tipos de data y la declaracin de tipo de documento. Elementos Los elementos son la estructura bsica de HTML. Los elementos tienen dos propiedades bsicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere vlido al documento HTML.

Autor: Gerardo Javier Caldern Hernndez

Manual Terico Practico Lenguaje HTML

1 SECUNDARIA

Un elemento generalmente tiene una etiqueta de inicio (<nombre-de-elemento>) y una etiqueta de cierre (</nombre-de-elemento>). Los atributos del elemento estn contenidos en la etiqueta de inicio y el contenido est ubicado entre las dos etiquetas (<nombre-de-elemento atributo="valor">Contenido</nombre-deelemento>). Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML. Atributos La mayora de los atributos de un elemento son pares nombre-valor, separados por un signo de igual = y escritos en la etiqueta de comienzo de un elemento, despus del nombre de ste. El valor puede estar rodeado por comillas dobles o simples, aunque ciertos tipos de valores pueden estar sin comillas en HTML (pero no en XHTML). De todas maneras, dejar los valores sin comillas es considerado poco seguro. En contraste con los pares nombre-elemento, hay algunos atributos que afectan al elemento simplemente por su presencia (tal como el atributo ismap para el elemento img). Qu es una pagina web? Una pgina de Web es un archivo escrito en lenguaje Hyper Text Markup Language HTML, publicado a travs de un servidor de Internet, que proporciona informacin o servicios, a determinada comunidad en el mundo o todo el mundo. Cules son las partes de una pgina web?

En la actualidad las paginas web, reciben otro nombre, que se llama servidor web. Qu es una etiqueta HTML? Las etiquetas o tags de HTML se insertar dentro de la estructura de una pagina web, hay que tener en cuenta el orden de estas etiquetas en la estructura, por que sino, por una etiqueta que se cruce, no tendr resultado o sus etiquetas no respondern, existen dos tipos de etiquetas abiertas y cerradas:

Autor: Gerardo Javier Caldern Hernndez

Manual Terico Practico Lenguaje HTML

1 SECUNDARIA

1. Abiertas.- Son etiquetas que no contienen al final un duplicado de ella misma. Sintaxis: <ETIQUETA> 2. Cerradas.- Son etiquetas que contienen inicio y fin, pero dando a conocer que al final, se antepone dentro de la etiqueta el smbolo slash(/). Sintaxis: <ETIQUETA> Texto o Dibujo </ETIQUETA> Nota: Cada etiqueta tiene parmetros, que te permite ingresar a las propiedades de cada una. Los parmetros se ingresan dentro de la etiqueta inicio. Ejemplo: <ETIQUETA PARMETRO=Contenido> Texto </ETIQUETA> Estructura de una pagina web: Antes de crear una pgina web, tendr que tener en cuenta algo muy importante, que es el cuerpo de la pgina, a continuacin se le visualizara: Precaucin: Antes de ingresar un contenido en el cuerpo de nuestra pagina web, tendremos que tener en cuenta, que podremos ingresar etiquetas siempre en cuando no se crucen, por ejemplo: Correcto:

Autor: Gerardo Javier Caldern Hernndez

Manual Terico Practico Lenguaje HTML Incorrecto:

1 SECUNDARIA

Guardando un documento web: Al ingresar al programa de Editor de cdigo Bloc de Notas, hacer lo siguiente: Clic en el men Archivo. Clic en la opcin Guardar Como... Clic en la opcin Guardar en..., para ubicar donde se va a guardar. Luego ingresar el nombre de la pgina web, pero con una extensin especial para paginas web. Paginaweb1.HTML o Paginaweb1.HTM Por ultimo clic en el botn Guardar, tal como se muestra:

Autor: Gerardo Javier Caldern Hernndez

Manual Terico Practico Lenguaje HTML

1 SECUNDARIA

Nota: No se preocupes, si al hacer estos pasos su estructura esta vaca, pero si debe tener en cuenta, que en cada modificacin de la pagina se deber guardar, ya no en Guardar como... sino en la opcin Guardar, para poder actualizar la pagina. Etiqueta HTML: Es la etiqueta que define el inicio del documento html, le indica al navegador que todo lo que viene a continuacin debe tratarlo como una serie de cdigos html. Sintaxis: <HTML> ... Estructura de la Pagina Web. </HTML> Etiqueta HEAD: Define la cabecera del documento html, esta cabecera suele contener informacin sobre el documento que no se muestra directamente en el navegador Sintaxis: <HEAD> ... Definiciones de cabecera HTML </HEAD> Etiqueta TITLE: Define el ttulo de la pgina. Por lo general, el ttulo aparece en la barra de ttulo encima de la ventana Sintaxis: <TITLE> Titulo de la Pagina Web </TITLE> Etiqueta BODY: Define el contenido principal o cuerpo del documento, esta es la parte del documento html que se muestra en el navegador. Sintaxis: <BODY> ... Cuerpo de la pgina Web </BODY>
Autor: Gerardo Javier Caldern Hernndez

Manual Terico Practico Lenguaje HTML

1 SECUNDARIA

Esta etiqueta tiene dos interesante parmetros, como por ejemplo: Background y Bgcolor. El Background te permite poner una imagen de fondo y el Bgcolor te permite poner un color de fondo. Para poder realizarlo, tendremos que ubicarnos dentro de la etiqueta de inicio del BODY, para poder digitar su parmetro, como se muestra en la sintaxis siguiente: Sintaxis: (BACKGROUND) <BODY BACKGROUND="images.jpg"> ... Cuerpo de la pgina Web </BODY> Sintaxis: (BGCOLOR) <BODY BGCOLOR="#0000FF"> ... Cuerpo de la pgina Web </BODY> Nota: El parmetro trabaja con colores en ingles, pero hay browsers o navegadores que no lo detectan o no estn instalados los colores, que se piden, para eso es recomendable trabajar con colores Hexadecimales. PRACTICA 01: Crear una web, que me permita mostrar el titulo llamado: MI PRIMERA PAGINA WEB.

Autor: Gerardo Javier Caldern Hernndez

Manual Terico Practico Lenguaje HTML Cdigo fuente: <html> <head> <title> MI PRIMERA PAGINA WEB </title> </head> <body> </body> </html>

1 SECUNDARIA

Apuntes:
____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ PRACTICA 02: Crear una web, que me permita ingresar una imagen de fondo.

Cdigo fuente: <html> <head>

Autor: Gerardo Javier Caldern Hernndez

Manual Terico Practico Lenguaje HTML <title> MI SEGUNDA PAGINA WEB </title> </head> <body background="img02.jpg"> </body> </html>

1 SECUNDARIA

Apuntes:
____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ PRACTICA 03: Crear una web, que me permita ingresar un color de fondo.

Cdigo fuente: <html> <head> <title> MI TERCERA PAGINA WEB </title> </head>
Autor: Gerardo Javier Caldern Hernndez

Manual Terico Practico Lenguaje HTML <body bgcolor="#0AB59F"> </body> </html>

1 SECUNDARIA

Apuntes:
____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ Etiqueta CENTER: Esta etiqueta te permite centrar el texto o imagen en la pagina o servidor web, tiene etiqueta de cierre. Sintaxis: <CENTER> TEXTO o IMAGEN en la Web. </CENTER> Etiqueta FONT: Esta etiqueta te permite formatear el texto como por ejemplo: tipo de fuente, tamao, color, etc. Tiene etiqueta de cierre. Relacionado al tamao, su mayor tamao es el 7 y el menor tamao es el 1. Relacionado al color, se trabaja con hexadecimales o en ingles. Relacin al tipo, se debe digitar la fuente, que se necesite, claro esta deber digitar, tal como se observa y siempre en cuando este instalada en la computadora.

Sintaxis: (TAMAO DE FUENTE) <FONT SIZE="2">TEXTO</FONT> Sintaxis: (COLOR DE FUENTE) <FONT COLOR="#FF0000">TEXTO</FONT> Sintaxis: (TIPO DE FUENTE) <FONT FACE="VERDANA">TEXTO</FONT>

Autor: Gerardo Javier Caldern Hernndez

Manual Terico Practico Lenguaje HTML Etiqueta HR:

1 SECUNDARIA

Esta etiqueta te permite insertar una lnea horizontal en la pagina o servidor web, no tiene etiqueta de cierre. Se puede ubicar esta etiqueta antes o despus del texto o imagen, segn como desea que se visualice. Sintaxis: <Hr> BIENVENIDOS A LA WEB. Etiqueta BR: Esta etiqueta te permite dar un salto de lnea entre el texto, no tiene etiqueta de cierre. Sintaxis: BIENVENIDOS A LA WEB. <BR> Etiqueta P: Esta etiqueta te permite dar un salto de lnea entre el prrafo, no tiene etiqueta de cierre. Sintaxis: <P> BIENVENIDOS A LA WEB. Nota: Tambin se puede combinar la etiqueta P y BR, las veces que desee. Ejemplo: <P><BR>(1 SALTO GRANDE) <P><BR>(2 SALTOS GRADES) PRACTICA 04: Crear una web, que me permita ingresar una historia o cuento. Cdigo fuente: <html> <head> <title> MI CUARTA PAGINA WEB </title> </head>
Autor: Gerardo Javier Caldern Hernndez

10

Manual Terico Practico Lenguaje HTML <body> <center><h1>EL SOLDADITO PLOMO</h1></center>

1 SECUNDARIA

<hr> Erase una vez, un soldadito llamado Plomo, que perteneca a la guardia del rey, en un reino muy lejano.<p> Plomo, tena ya 60 aos, era el jefe de los 3 soldados que formaban la guardia y se encargaba de que el rey fuera protegido en todo momento.<br> Un da, Plomo, sali fuera del castillo para reunir a todos sus hombres y les dijo: Tengo una misin para vosotros. Tienen que resolver el siguiente enigma y el que lo resuelva ocupar mi puesto en la guardia, ya que yo me voy a jubilar.<p> El enigma es el siguiente: Si tengo 17 sombreros de soldado y tengo que repartirlos entre vosotros 3, cmo puedes repartirlos para que todos queden contentos?.<p> Los soldaditos empezaron a contestar uno por uno, los dos primeros contestaron que no se poda hacer, ya que al dividir 17 entre 3, quedan decimales, y los sombreros no se pueden dividir.<br> Despus, contest el ltimo soldado, y dijo: Si le pido prestado un sombrero a un comerciante ya tendra 18 sombreros, y si ahora lo divido entre los 3 soldaditos que somos, nos quedamos cada uno con 6 sombreros, y en compensacin por el prstamo que nos hizo el comerciante, cada uno de nosotros le regalaremos un sombrero, de esta forma cada uno de los soldados tendr 5 sombreros.<br> Todos se quedaron con la boca abierta, y el sol dadito Plomo le dijo: Sin duda, tu respuesta es la ms inteligente de todas, y has resuelto el enigma.<br> Y cuando todos felicitaban al soldado por su inteligencia, el soldadito Plomo aadi fulminantemente: Por cierto, ninguno de vosotros ser mi sucesor.<br> Todos se quedaron callados, y el soldado que haba re suelto el enigma dijo: Pero, si lo he adivinado, por qu no ser tu sucesor?.<p> <hr> </body> </html>
Autor: Gerardo Javier Caldern Hernndez

11

Manual Terico Practico Lenguaje HTML

1 SECUNDARIA

Apuntes:
____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________

Etiqueta B: Esta etiqueta te permite darle negrita al texto seleccionado. Sintaxis: <B> BIENVENIDOS A LA WEB </B> Etiqueta U: Esta etiqueta te permite darle subrayado al texto seleccionado.
Autor: Gerardo Javier Caldern Hernndez

12

Manual Terico Practico Lenguaje HTML Sintaxis: <U> BIENVENIDOS A LA WEB </U> Etiqueta I: Esta etiqueta te permite darle cursiva al texto seleccionado. Sintaxis: <I> BIENVENIDOS A LA WEB </I> Etiqueta HN:

1 SECUNDARIA

Esta etiqueta te permite formatear el texto a un encabezado, esta comprendido por H1 ... H6, tiene etiqueta de cierre. El H1 representa al mayor tamao del encabezado y el H6 al menor tamao del encabezado. Sintaxis: <H1> TEXTO en la Web. </H1> COLORES HEXADECIMALES 01:

Autor: Gerardo Javier Caldern Hernndez

13

Manual Terico Practico Lenguaje HTML COLORES HEXADECIMALES 02:

1 SECUNDARIA

PRACTICA 05: Crear una web, que me permita mostrar los encabezados de texto.

Autor: Gerardo Javier Caldern Hernndez

14

Manual Terico Practico Lenguaje HTML Cdigo fuente:

1 SECUNDARIA

<html> <head> <title> MI QUINTA PAGINA WEB </title> </head> <body> <center><h1>TAMAO DE FUENTE</h1></center> <hr><p><br> <center><h1>TAMAO DE FUENTE MUY GRANDE</h1></center> <center><h2>TAMAO DE FUENTE MAS GRANDE</h2></center> <center><h3>TAMAO DE FUENTE GRANDE</h3></center> <center><h4>TAMAO DE FUENTE INTERMEDIA</h4></center> <center><h5>TAMAO DE FUENTE PEQUEA</h5></center> <center><h6>TAMAO DE FUENTE MAS PEQUEA</h6></center><p><br> <hr> </body> </html>

Apuntes:
____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ Etiqueta TT: Esta etiqueta te permite darle al texto seleccionado un formato tipo maquina de escribir. Sintaxis: <TT> BIENVENIDOS A LA WEB </TT> Etiqueta S: Esta etiqueta te permite darle un tachado al texto seleccionado. Sintaxis: <S> BIENVENIDOS A LA WEB </S>

Autor: Gerardo Javier Caldern Hernndez

15

Manual Terico Practico Lenguaje HTML Etiqueta SUP: Esta etiqueta te permite darle al texto seleccionado un Super ndice. Sintaxis: 3X <SUP> 3Y </SUP> Etiqueta SUB: Esta etiqueta te permite darle al texto seleccionado un Sub ndice. Sintaxis: H <SUB> 2 </SUB> O Etiquetas de Efectos Especiales:

1 SECUNDARIA

A continuacin se mostrara etiquetas hacia el texto, para una mayor apariencia. Sintaxis: (Primera letra en mayscula) <SPAN STYLE="TEXT-TRANSFORM:CAPITALIZE">texto</SPAN> Sintaxis: (Color de fondo) <SPAN STYLE=BACKGROUND:COLOR>TEXTO</SPAN> Sintaxis: (Sombra) <TABLE STYLE=FILTER:DROPSHADOW>TEXTO</TABLE> Sintaxis: (Brillo) <TABLE STYLE=FILTER:GLOW>TEXTO</TABLE> Sintaxis: (Sombra alargada) <TABLE STYLE=FILTER:SHADOW>TEXTO</TABLE> <TABLE STYLE=FILTER:SHADOW(COLOR:RED,STRENGTH:#)> TEXTO </TABLE> Sintaxis: (Brillo y Sombra) <TABLE STYLE="FILTER:GLOW DROPSHADOW"> TEXTO 1

Autor: Gerardo Javier Caldern Hernndez

16

Manual Terico Practico Lenguaje HTML </TABLE> <TABLE STYLE="FILTER:DROPSHADOW GLOW"> TEXTO 2 </TABLE> <TABLE STYLE="FILTER:SHADOW GLOW"> TEXTO 3 </TABLE> PRACTICA 06: Crear una web, que me permita mostrar efectos de texto.

1 SECUNDARIA

Cdigo fuente: <html> <head> <title> MI SEXTA PAGINA WEB </title> </head> <body> <center><h1>EFECTOS DE TEXTO</h1></center>

Autor: Gerardo Javier Caldern Hernndez

17

Manual Terico Practico Lenguaje HTML

1 SECUNDARIA

<hr><p> <span style="text-transform:capitalize">texto 1</span><p> <span style=background:yellow>texto 2</span><p> <table style=filter:dropshadow>texto 3</table><p> <table style=filter:glow>texto 4</table><p> <table style=filter:shadow>texto 5</table><p> <table style=filter:shadow(color:red,strength:10)>texto 6</table><p> <table style=filter:glow dropshadow>texto 7</table><p> <table style=filter:dropshadow glow>texto 8</table><p> <table style=filter:shadow glow>texto 9</table><p> <hr> </body> </html>

Apuntes:
____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ Etiqueta UL: Esta etiqueta te permite agregar listas no ordenadas (vietas). Sintaxis: <UL> <LI>Perro <LI>Gato <LI>Conejo <LI>Tortuga <LI>Ratn </UL> Etiqueta OL: Esta etiqueta te permite agregar listas ordenadas (numeracin). Sintaxis: <OL>
Autor: Gerardo Javier Caldern Hernndez

18

Manual Terico Practico Lenguaje HTML <LI>Cuaderno</LI> <LI>Lpiz</LI> <LI>Borrador</LI> <LI>Regla</LI> </OL> Sangria:

1 SECUNDARIA

Para poder realizar un salto de carcter, se utiliza el cdigo &nbsp, claro esta, este cdigo solo da un salto, si se desea mas saltos, solo se deber repetir dicho cdigo. Sintaxis: &nbsp; (un salto de carcter). &nbsp;&nbsp;&nbsp; ( tres saltos de caracteres). PRACTICA 07: Crear una web, que me permita mostrar una lista no ordenada.

Cdigo fuente: <html> <head> <title>LISTA NO ORDENADA</title> </head> <body> <center> <font size="6" color="blue"> MIS ANIMALES FAVORITOS </font><p> </center> <hr><p><br>
Autor: Gerardo Javier Caldern Hernndez

19

Manual Terico Practico Lenguaje HTML <ul> <li>El perro. <li>El gato. <li>El conejo. <li>La tortuga. <li>El koala. <li>El pato. <li>El pollo. </ul> </body> </html>

1 SECUNDARIA

Apuntes:
____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ PRACTICA 08: Crear una web, que me permita mostrar una lista ordenada y no ordenada.

Cdigo fuente: <html> <head> <title>MI OCTAVA PRACTICA WEB</title> </head>

Autor: Gerardo Javier Caldern Hernndez

20

Manual Terico Practico Lenguaje HTML <body> <center> <font size="6" color="red"> MI FAMILIA </font><p> </center> <hr><p><br> <ol> <li><b>MIS PADRES:</b><p> <ul> <li>Nombre de mi madre. <li>Nombre de mi padre.<p> </ul> <li><b>MIS HERMANOS:</b><p> <ul> <li>Nombre de mi primer hermano. <li>Nombre de mi segundo hermano. <li>Nombre de mi tercer hermano. </ul> </ol> </body> </html> PRACTICA 09: Examen 01.

1 SECUNDARIA

Cdigo fuente: <html> <head> <title>PRACTICA MENSUAL</title>

Autor: Gerardo Javier Caldern Hernndez

21

Manual Terico Practico Lenguaje HTML </head> <body> <center><h1>Instituto Superior Tecnologico</h1></center><p> <center><h4>"EXCLUSIVE CLASS"</h4></center><p> <b>Alumno (a):</b> Candy Huillca Loayza<p>

1 SECUNDARIA

<b>Grado:</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3 Secundaria<p> <b>Tema:</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Las formulas<p> <ol> <li><b>Formula Quimica:</b><p> <ul> <li>Agua: H₂O <li>Metano: C₆H₆<p> </ul> <li><b>Fomrula Matematica:</b><p> <ul> <li>X1=-(b+(ac-b2)^1/2)/2a <li>X1=+(b+(ac-b2)^1/2)/2a </ul> </ol> </body> </html>

Apuntes:
____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________

Autor: Gerardo Javier Caldern Hernndez

22

Manual Terico Practico Lenguaje HTML PRACTICA 10: Examen 02.

1 SECUNDARIA

Comienza en Orden

Codigo fuente: <html> <head> <title>EXCLUSIVE CLASS</title> </head> <body> <center><h1>RELACION DE CURSOS</h1></center><p> <hr><p> <ul> <li><b>1^er ciclo:</b> <ul> <li>Introduccion a la computacin <ul> <li>Mana <li>Tarde <li>Noche </ul> <li>Tecnicas de Programacion I. <ul> <li>Mana
Autor: Gerardo Javier Caldern Hernndez

23

Manual Terico Practico Lenguaje HTML <li>Tarde <li>Noche </ul> <li>Matematicas I. </ul> <li><b>2^do ciclo:</b> <ul> <li>Tecnicas de programacion II <li>Visual Fox-Pro <li>Aplicativos (Office) </ul> <li><b>3^er ciclo:</b> <li><b>4^to ciclo:</b> <li><b>5^to ciclo:</b> <li><b>6^to ciclo:</b> </ul> </body> </html> Etiqueta MARQUEE:

1 SECUNDARIA

Esta etiqueta te permite que un texto o imagen se despliegue en una determinada direccin. Adems tiene los siguientes parmetros: Sintaxis:(Simple) <MARQUEE>Texto en Marquesina</MARQUEE> Sintaxis:(Con Color de Fondo) <MARQUEE BGCOLOR=Color> Texto en Marquesina con Color </MARQUEE> Sintaxis:(Desplazamiento Horizontal) <MARQUEE DIRECTION=Left o Right> Texto en Marquesina con direccin1 </MARQUEE>

Autor: Gerardo Javier Caldern Hernndez

24

Manual Terico Practico Lenguaje HTML Sintaxis:(Desplazamiento Vertical) <MARQUEE DIRECTION=Up o Down> Texto en Marquesina con direccin2 </MARQUEE> Sintaxis:(En forma Alternada) <MARQUEE BEHAVIOR=Alternate> Texto en Marquesina con direccin Alternada </MARQUEE> Sintaxis:(Modificar Velocidad) <MARQUEE SCROLLAMOUNT="50"> Texto en Marquesina con velocidad 50 </MARQUEE> PRACTICA 11: Crear una web, que me permita mostrar una variedad de marquesinas.

1 SECUNDARIA

FIN 01 Codigo fuente: <html> <head> <title>DECIMA PRIMERA PRACTICA WEB</title> </head>
Autor: Gerardo Javier Caldern Hernndez

25

Manual Terico Practico Lenguaje HTML <body> <center><h1>MARQUESINAS</h1></center><p> <hr><p> <marquee>EXCLUSIVE CLASS</marquee><br> <marquee bgcolor=yellow>EXCLUSIVE CLASS</marquee><br> <marquee direction=right>EXCLUSIVE CLASS</marquee><br> <marquee direction=left>EXCLUSIVE CLASS</marquee><br> <marquee direction=up>EXCLUSIVE CLASS</marquee><br> <marquee direction=down>EXCLUSIVE CLASS</marquee><br> <marquee behavior=alternate>EXCLUSIVE CLASS</marquee><br> <marquee scrollamount="150">EXCLUSIVE CLASS</marquee><br> </body> </html>

1 SECUNDARIA

Apuntes:
____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ Etiqueta IMG: Esta etiqueta te permite incrustar una imagen en la pagina web, no tiene etiqueta de cierre. Pero tiene que trabajar necesariamente con sus parmetros o propiedades: La etiqueta <IMG> posee los siguientes parmetros: Src = imagen.extension Indica el nombre de archivo grafico a mostrar. Alt = Texto Mostrara el texto indicado cuando se posicione el puntero del mouse. Border = ## Indica el grosor del borde de dicha imagen. Height = num% o ### Indica el alto de la imagen en porcentaje o puntos. Width = num% o ### 26

Autor: Gerardo Javier Caldern Hernndez

Manual Terico Practico Lenguaje HTML Indica el ancho de la imagen en porcentaje o puntos. Sintaxis:(Simple) <IMG SRC=imagen.jpg> Sintaxis:(Completa)

1 SECUNDARIA

<IMG SRC=imagen.jpg WIDTH=50% HEIGHT=50% ALT=Hola> Nota: Al utilizar el width (ancho) y el height (alto), solo modificara la forma de la imagen, pero no afectara a la imagen original. PRACTICA 12: Crear una web, que me permita mostrar una imagen centrada.

Codigo fuente: <html> <head> <title>DECIMA SEGUNDA PRACTICA WEB</title> </head> <body> <img src="img01.jpg" width="99%" height="99%" alt="Alumnos de los domingos de EXCLUSIVE CLASS" border=1>

Autor: Gerardo Javier Caldern Hernndez

27

Manual Terico Practico Lenguaje HTML </body> </html>

1 SECUNDARIA

Apuntes:
____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ Etiqueta A: Esta etiqueta te permite incluir un en enlace o hipervnculo. Un hipervnculo es un elemento de la pagina que hace que el navegador acceda a otro recurso (objeto). Para incluir un Hipervnculo se utiliza la etiqueta <A> que significa ancla (anchor). El texto o imagen que se encuentre dentro de los limites de esta etiqueta ser sensible, esto quiere decir que se realizamos un clic sobre el, nos llevara al recurso enlazado. Esta etiqueta, tambin tiene que trabajar con sus parmetros. La etiqueta <A> posee los siguientes parmetros: Href = direccin web o archivo.extension El significado es referencia de un hipervnculo, que nos permite desplazarnos a una direccin web o objeto. Sintaxis: <A HREF= www.hotmail.com>Pulsar aqu...</A> Title = Mensaje Permite mostrar con mas detalle el recurso utilizado, mostrando un mensaje cuando desplacemos el puntero sobre el enlace. Sintaxis :(Simple) <A HREF= www.latinchat.com TITLE=LatinChat> Pagina oficial de Latinchat... </A> PRACTICA 13: Crear una web, que me permita mostrar un hipervnculo, que me lleve a otra pagina.
Autor: Gerardo Javier Caldern Hernndez

28

Manual Terico Practico Lenguaje HTML

1 SECUNDARIA

Codigo fuente: <html> <head> <title>DECIMA TERCERA PRACTICA WEB</title> </head> <body> <p><br>

Autor: Gerardo Javier Caldern Hernndez

29

Manual Terico Practico Lenguaje HTML <center> <img src="img01.jpg" width="75%" height="75%" border=1> </center> <p> <center> <a href="historia.html">PAGINA OFICIAL</a> </center> </body> </html> Codigo fuente: <html> <head> <title>DECIMA TERCERA PRACTICA WEB</title> </head> <body> <center> <h1>AVRIL LAVIGNE</h1> </center><p>

1 SECUNDARIA

<hr><p> Avril Ramona Lavigne nacida el 27 de septiembre de 1984 en Belleville, Ontario, Canad, es una cantante, compositora, diseadora de moda y actriz canadiense.<br> Algunos medios de comunicacin y crticos se refieren a ella como la princesa del pop punk. Comenz su carrera musical en diciembre de 2001, cuando despus de una presentacin en una feria country, despert el inters del productor L.A. Reid y firm para Arista Records. A mediados de 2009, y luego del lanzamiento de tres lbumes de estudio, Let Go, Under My Skin y The Best Damn Thing, Lavigne haba vendido ms de 35 millones de copias y 18 millones de sencillos en todo el mundo. Avril es tambin, segn Forbes, una de las personas jvenes ms ricas del mundo, con una fortuna estimada en ms de 70 millones de dlares.<br> En una encuesta creada por la revista Rolling Stone para elegir las 100 mejores canciones y lbumes entre los aos 2000 y 2009, la cancin Complicated y el lbum Let Go obtuvieron la octava y cuarta posicin, respectivamente. La cantante es tambin poseedora del rcord guinness como la cantante femenina ms joven en llevar un lbum debut a las listas de popularidad del Reino Unido, con 18 aos y 106 das de edad, el 11 de enero de 2003, ya que estuvo 18 semanas en el nmero uno de dicha lista, con su lbum Let Go. El mismo estuvo tambin en la posicin 162 de la lista de los mejores lbumes del Saln de la Fama del Rock.<br> Segn la revista Billboard, Lavigne se encuentra en la lista de los 100 artistas ms populares de la dcada del 2000 en los Estados Unidos, ubicndose en la posicin 28.<br> </body> </html>
Autor: Gerardo Javier Caldern Hernndez

30

Manual Terico Practico Lenguaje HTML

1 SECUNDARIA

Apuntes:
____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ Etiqueta TABLE: ____________________________________________________________________ Esta etiqueta te permite insertar una tabla en la pgina web. Se deber trabajar con sus Subetiquetas: <TR> y <TD>. 1. Etiqueta <TR> El atributo row de la tabla, crea una fila horizontal de celdas y contiene los encabezados de la tabla y los datos de la tabla. 2. Etiqueta <TD> El atributo data se incluye dentro de la etiqueta <TABLE> que indica una celda normal, el numero de celdas en una fila determinara cuantas columnas se visualizaran en el navegador. La etiqueta <TABLE> posee los siguientes parmetros: Border = ## Indica el grosor del borde la tabla. Align = Left o Center o Right Posiciona la tabla a la derecha, centro e izquierda. Background = archivo.extension Visualiza un fondo a la tabla. BgColor = Color Visualiza un color a la tabla, grupo de celdas o celda. Width = num o num% Indica el ancho de una tabla. Height = num o num% Indica el alto de una tabla.

Autor: Gerardo Javier Caldern Hernndez

31

Manual Terico Practico Lenguaje HTML PRACTICA 14: Crear una web, que me permita mostrar una tabla con hipervnculos.

1 SECUNDARIA

Codigo fuente: <html> <head> <title>DECIMA CUARTA PRACTICA WEB</title> </head> <body> <p><br> <center> <font size="7" color="blue">BUSCADORES</h1> </center> <p><hr><p><br> <center> <table border=1> <tr> <td> <center><a href="http:\\www.google.com.pe"><h2>Google</h2></a></center>
Autor: Gerardo Javier Caldern Hernndez

32

Manual Terico Practico Lenguaje HTML </td> <td>

1 SECUNDARIA

<center><a href="http:\\www.ask.com"><h2>Ask</h2></a></center> </td> </tr> <tr> <td> <center><a href="http:\\www.altavista.com"><h2>Altavista</h2></a></center> </td> <td> <center><a href="http:\\es.yahoo.com"><h2>Yahoo</h2></a></center> </td> </tr> </table> </center> </body> </html>

Apuntes:
____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ TIPS: Si se desea combinar celdas, entonces usar los siguientes cdigos: Colspan = num Te permite combinar columnas o campos. Rowspan = num Te permite combinar filas o registros. Nota: Al combinar numero celdas (filas o columnas), tener en cuenta, que se deber borrar el data, es decir la etiqueta <TD>, que ya no se este trabajando.
Autor: Gerardo Javier Caldern Hernndez

33

Manual Terico Practico Lenguaje HTML PRACTICA 15: Crear una web, que me permita mostrar una tabla con imgenes.

1 SECUNDARIA

Codigo fuente: <html> <head> <title>DECIMA QUINTA PRACTICA WEB</title> </head> <body> <p><br> <center> <font size="7" color="blue">EQUIPOS DE PER</h1> </center> <p><hr><p><br> <center> <table border=0> <tr> <td colspan="3"> <center><h4>Mis equipos favoritos</h4></center> </td> </tr> <tr> <td> <center><img src="img01.png" width="100" heigth="100"></center> </td> <td>
Autor: Gerardo Javier Caldern Hernndez

34

Manual Terico Practico Lenguaje HTML <center><img src="img02.jpg" width="100" heigth="100"></center> </td> <td> <center><img src="img03.jpg" width="100" heigth="100"></center> </td> </tr> </table> </center> </body> </html>

1 SECUNDARIA

Apuntes:
____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ PRACTICA 16: Crear un formulario que me permita enviar informacin hacia mi correo electrnico. Ingresar la pgina web: http://www.emailmeform.com. Clic en le boton llamado: Signup Now for free (Registrese ahora gratis). En el formulario que se muestra, ingresar sus datos, como por ejemplo:

Posiblemente, sino recibe el correo, entonces deber ingresar a su correo y hacer clic en Correo no deseado.
Autor: Gerardo Javier Caldern Hernndez

35

Manual Terico Practico Lenguaje HTML

1 SECUNDARIA

Ingresar al mensaje y activar su servicio.

Estar seleccionado la etiqueta llamado: Date created.

Clic en el boton llamado: Add form.

Se mostrara dos opciones, elegir la primera opcion llamado: Go to the template section (Ir a la seccion de plantillas).

Clic en el boton llamado: Customize (Personalizar). Clic en capa campo, como por ejemplo: Contact form y se visualizara en el lado izquierdo, un panel para modificar el campo.

Repetir los pasos, para el campo 1 hasta el campo 4.

Autor: Gerardo Javier Caldern Hernndez

36

Manual Terico Practico Lenguaje HTML

1 SECUNDARIA

Clic en el botn llamado: Save form.

Clic en la segunda opcin llamado: Modif. Email notificacions for this form (modificar las notificaciones de correo electrnico de este formulario). Activar la primera opcin llamado: Send emails in plain text. Clic en el botn llamado Save (Guardar).

Autor: Gerardo Javier Caldern Hernndez

37

Manual Terico Practico Lenguaje HTML

1 SECUNDARIA

Clic en la tercera opcin llamado: Take me back to the form manager (Comenzemos por el administrador de formulario).

En el administrador de formulario, clic en el botn llamado: Code (Codigo).

Clic en el vinculo llamado: HTML with Javascript/CSS. Copiar el cdigo.

Autor: Gerardo Javier Caldern Hernndez

38

Manual Terico Practico Lenguaje HTML

1 SECUNDARIA

Pegar en nuestra pagina web. Crear una pagina web, como base la estructura y pegar el cdigo, para que el diseo quede de la siguiente manera:

Luego revisar su correo electrnico. PRACTICA 17: Crear la siguiente pagina web, sobre un tema libre, pero utilizando casi todas las etiquetas y parmetros aprendidos.

Fin de HTML. Practica lo aprendido en casa.

FIN 02
Autor: Gerardo Javier Caldern Hernndez

39