Lenguaje de Marcas de Hipertexto - HTML

COLEGIO AMERICAS UNIDAS INSTITUCION EDUCATIVA BARTOLOME LOBOGUERRERO AREA DE TECNOLOGIA E INFORMATICA AYUDAS BASICAS DE HTML
Contenido 1. INTRODUCCION ....................................................................................... 2 2. COMANDOS BASICOS ............................................................................. 2 3. CODIGO PARA CREAR PGINAS INDIVIDUALES CON DEGRADADO................................................................................................... 5 4. CODIGO PAGINA TITULO ...................................................................... 8 5. CODIGO PGINA DE INTRODUCCION ................................................ 9 6. CODIGO PGINA DE IMGENES ........................................................ 10 7. CODIGO PGINA PRINCIPAL .............................................................. 11 8. CODIGO PARA CREAR UNA TABLA .................................................. 12 9. CODIGO PARA CREAR UNA TABLA CON DIVISIONES ................. 13 10. PARA ESTABLECER DIVISIONES DENTRO DE UNA PAGINA WEB 15
ING. WILLIAM QUINTERO ALVAREZ - EDINSON QUINTERO ALVAREZ WWW.CONTICQ.BLOGSPOT.COM CALI COLOMBIA Pgina 1 de 15
1. INTRODUCCION
El Lenguaje de Marcas de Hipertexto, tuvo su origen en los aos ochenta cuando IBM an determinaba la mayora de los estndares en el mundo de las computadoras. Utilizado para el diseo de pginas WEB.
PARA CREAR UNA PAGINA WEB: Se requiere de un editor de texto (WordPad o Bloc de Notas) PARA GRABAR UNA PAGINA: Se ubica el lugar donde se va a guardar, se le da nombre seguido de .html, el tipo de este archivo debe de ser documento de texto
2. COMANDOS BASICOS
<HTML> ... </HTML>: Para indicar el comienzo y final de una pagina Web. <HEAD> ... </HEAD>: Indica el inicio y final del encabezado de una pagina Web. <BODY> ... </BODY>: Indica el inicio y final del cuerpo de la pagina Web. <TITLE> ... </TITLE>: Indica el inicio y final de un titulo <H#> ... </H#>: Determinaba el tamao de la fuente para el encabezado o titulo. .. : Establece el tamao de la fuente : Establece el color de la fuente. ... : Para la negrilla ... : Para la cursiva. .. : Subraya texto. <S> ... </S>: Tacha texto. <CENTER> ... </CENTER>: Centra texto. .. : Salto de prrafo. : Salto de lnea. <HR>: Lnea horizontal. <BODY BGCOLOR = Red>: Establece el color del fondo.
<BODY BACKGROUND = Fondo02.gif>: Establece el fondo, utilizando una imagen como fondo. <BGSOUND SRC= cancin.mp3 loop = 1> : Establece una cancin de fondo a una pgina Web <IMG SRC = Bart.gif> : Para insertar r una imagen en una pagina web <TABLE BORDER> ... </TABLE>: Comienzo y final de una tabla. <TR> ... </TR>: Define la fila de una tabla. <TD>... </TD>: Define la columna de una tabla. <FRAMESET COLS = 30%,20%,50%> ... </FRAMESET>: Indica el inicio y final de un framet. <FRAMESET ROWS = 30%,20%,50%> ... </FRAMESET>: Indica el inicio y final de un framet. <FRAME SRC = P100.HTML>: Invoca una pagina Web. <UL> <LI> ... </UL>: Establece listas desordenadas. <LH> .. </LH>: Establece la cabecera de una lista. <OL> <LI>.. </OL>: Establece listas ordenadas. <MENU> <LI> ... </MENU>: Establece listas de men. <ALIGN = RIGHT>: Alinea el texto a la derecha. <MARQUEE> ... </MARQUEE>: Para desplazar el texto de una lado a otro. 1. MARQUESINA DESPLAZANDOSE HACIA LA DERECHA <MARQUEE WIDTH="90%" DIRECTION="RIGHT"> GRAN CONCIERTO DE REGGETON</MARQUEE> 2. MARQUESINA CON TEXTO DESPLAZANDO HACIA ARRIBA <MARQUEE DIRECTION="UP" HEIGHT="60" WIDTH="100%" ONMOUSEOUT="THIS.START()" ONMOUSEOVER="THIS.STOP()"><CENTER> SHAKIRA JUANES CABAS </MARQUEE> 3. MARQUESINA DESPLAZANDO HACIA ABAJO <MARQUEE DIRECTION="DOWN" HEIGHT="60" WIDTH="100%" ONMOUSEOUT="THIS.START()" ONMOUSEOVER="THIS.STOP()"> <CENTER>NAVILANDIA</MARQUEE> 4.MARQUESINA CON UNA IMAGEN DENTRO DE ELLA <MARQUEE DIRECTION="DOWN"><CENTER><IMG SRC="DROGAS1.JPG" WIDTH=40 HEIGHT=40></MARQUEE> 5.MARQUESINA CON TEXTO ALTERNADO Y EN DIRECCIN HACIA ARRIBA
<MARQUEE BEHAVIOR="ALTERNATE" DIRECTION="UP" WIDTH=80%><MARQUEE DIRECTION="RIGHT" BEHAVIOR="ALTERNATE" >CENTRO COMERCIAL CHIPICHAPE</MARQUEE></MARQUEE> 6.MARQUESINA ALTERNADA CON DIRECCION HACIA ARRIBA Y CON UNA IMAGEN HACIA LA DERECHA <MARQUEE BEHAVIOR="ALTERNATE" DIRECTION="UP" WIDTH=80%><MARQUEE DIRECTION="RIGHT" BEHAVIOR="ALTERNATE" ><IMG SRC="DROGAS1.JPG" WIDTH=80 HEIGHT=80></MARQUEE></MARQUEE> : Establece el tipo de fuente. <PRE> ... </PRE>: Para formatear texto <A HREF = P100.HTML> ..</A>: Para enlazar o anclar paginas. WIDTH = # : Establece el ancho HEIGTH = #: Establece el alto HR = Establece regla horizontal, determinada por su color y grosor <FORM METHOD = POST ACTION = P100.HTML> <INPUT TYPE = SUBMIT VALUE = PRUEBA>: Establece botones de accin. <EMBED SRC="HISTORIA.SWF" POOL="1" HEIGHT=500 WIDTH=500> : Codigo para insertar un video en una pagina web, se requiere que el video lleve extensin SWF </EMBED>
3. CODIGO PARA CREAR PGINAS INDIVIDUALES CON DEGRADADO

Esta paginas llevan degradado en su fondo, divisiones e imgenes con bordes redondeados, se requiere la rutina de degrade de java
<html> <head> <title>Antivirus</title> <script src="Javascript/Degraded.js" type="text/javascript"></script> <link rel="shortcut icon" href="Images/AntiIco.png" type="image/x-icon" /> <style> /*Etiqueta para borde de imagen*/ img {margin:10px;-moz-border-radius: 15px;-webkit-border-radius:15px;box-shadow: #ADFF2F 0 0 5px 1px;} /*Estilo para el contenedor*/ #Content {background:#90EE90;-moz-border-radius: 15px;-webkit-borderradius:15px;width:900px;heigth:250px;padding:15px; padding-top:2px;box-shadow: #98FB98 0 0 5px 1px;} </style> </head> <body> <marquee id="Marquee" direction="UP" height="60"><center>Antivirus</center></marquee> <script>document.getElementById("Marquee").width = document.body.clientWidth - 33;</script> <hr color="#32CD32" size=4> <div align="center"> <div id="Content"> 
<img src="Images/Anti1.jpg" width=200 height=200 align="left">En informtica los antivirus son programas cuyo objetivo es detectar y/o eliminar virus informticos. Nacieron durante la dcada de 1980. Con el transcurso del tiempo, la aparicin de sistemas operativos ms avanzados e Internet, ha hecho que los antivirus hayan evolucionado hacia programas ms avanzados que no slo buscan detectar virus informticos, sino bloquearlos, desinfectarlos y prevenir una infeccin de los mismos, y actualmente ya son capaces de reconocer otros tipos de malware, como spyware, rootkits, etc. Mtodos de contagio Existen dos grandes grupos de propagacin: los virus cuya instalacin el usuario en un momento dado ejecuta o acepta de forma inadvertida, o los gusanos, con los que el programa malicioso acta replicndose a travs de las redes. <img src="Images/Anti3.jpeg" width=180 height=180 align="right"> En cualquiera de los dos casos, el sistema operativo infectado comienza a sufrir una serie de comportamientos anmalos o no previstos. Dichos comportamientos son los que dan la traza del problema y tienen que permitir la recuperacin del mismo. Dentro de las contaminaciones ms frecuentes por interaccin del usuario estn las siguientes: * Mensajes que ejecutan automticamente programas (como el programa de correo que abre directamente un archivo adjunto). * Ingeniera social, mensajes como: Ejecute este programa y gane un premio. * Entrada de informacin en discos de otros usuarios infectados. <img src="Images/Anti2.gif" width=300 height=200 align="left" style="box-shadow: #90EE90 0 0 5px 1px;"> * Instalacin de software que pueda contener uno o varios programas maliciosos. * Unidades extrables de almacenamiento (USB). Seguridad y mtodos de proteccin Existen numerosos medios para combatir el problema; Sin embargo, a medida que nuevos programas y sistemas operativos se introducen en el mercado, ms difcil es tener controlados a todos y ms sencillo va a ser que a alguien se le ocurran nuevas formas de infectar sistemas. Ante este tipo de problemas, estn los softwares llamados antivirus. Estos antivirus tratan de descubrir las trazas que ha dejado un software malicioso para detectarlo o eliminarlo, y en algunos casos contener o parar la contaminacin (cuarentena). Los mtodos para contener o reducir los riesgos asociados a los virus pueden ser los denominados activos o pasivos. Tipos de vacunas CA:Slo deteccin: Son vacunas que solo actualizan archivos infectados sin embargo no pueden eliminarlos o desinfectarlos. CA:Deteccin y desinfeccin: son vacunas que detectan archivos infectados y que pueden desinfectarlos. CA:Deteccin y aborto de la accin: son vacunas que detectan archivos infectados y detienen las acciones que causa el virus CB:Comparacin por firmas: son vacunas que comparan las firmas de archivos sospechosos para saber si estn infectados. CB:Comparacin de firmas de archivo: son vacunas que comparan las firmas de los atributos guardados en tu equipo. 
<img src="Images/Anti4.png" width=180 height=180 align="left"> CB:Por mtodos heursticos: son vacunas que usan mtodos heursticos para comparar archivos. CC:Invocado por el usuario: son vacunas que se activan instantneamente con el usuario. CC:Invocado por la actividad del sistema: son vacunas que se activan instantneamente por la actividad del sistema windows xp/vista Copias de seguridad (pasivo) Mantener una poltica de copias de seguridad garantiza la recuperacin de los datos y la respuesta cuando nada de lo anterior ha funcionado. As mismo las empresas deberan disponer de un plan y detalle de todo el software instalado para tener un plan de contingencia en caso de problemas. </div> </div> </html>
4. CODIGO PAGINA TITULO
<HTML> <BODY BGCOLOR="BLACK"> <CENTER> C U L T U R A AFROCOLOMBIANA </CENTER> </HTML>
5. CODIGO PGINA DE INTRODUCCION
<HTML> <BODY BACKGROUND="GATO.JPG"> <CENTER> NUESTRA CIUDAD</CENTER> LA CIUDAD DE SANTIAGO DE CALI ESTA UBICADA EN LA REGIN ANDINA, AL SUDOESTE DE LA CIUDAD DE BOGOT Y ES LA CAPITAL DEL DEPARTAMENTO DEL VALLE DEL CAUCA EN COLOMBIA. <CENTER><EMBED SRC="HISTORIA.SWF" POOL="1" HEIGHT=500 WIDTH=500> </CENTER> </EMBED> </HTML>
6. CODIGO PGINA DE IMGENES
<HTML> <BODY BGCOLOR="#FF3333"> <CENTER> <A HREF="GASTRONOMIA.HTML" TARGET="MAINFRAME"> <IMG SRC="SENA.JPG" WIDTH=90 HEIGHT=90 STYLE="MARGIN-RIGHT:15PX;-MOZ-BORDER-RADIUS: 15PX;-WEBKIT-BORDER-RADIUS:15PX;BOX-SHADOW: #DDD 0 0 5PX 1PX;"> </A> GASTRONOMIA <A HREF="EDUCACION.HTML" TARGET="MAINFRAME"> <IMG SRC="GATO.JPG" WIDTH=90 HEIGHT=90 STYLE="MARGIN-RIGHT:15PX;-MOZ-BORDER-RADIUS: 15PX;-WEBKIT-BORDER-RADIUS:15PX;BOX-SHADOW: #DDD 0 0 5PX 1PX;"> </A> EDUCACION </HTML>
7. CODIGO PGINA PRINCIPAL
<HTML> <HEAD> <FRAMESET COLS=15%,*> <FRAME SRC="IMAGENES.HTML" NAME="LEFTFRAME"> <FRAMESET ROWS=20%,*> <FRAME SRC="TITULO.HTML" NAME="TOPFRAME"> <FRAME SRC="INTRODUCCION.HTML" NAME="MAINFRAME"> </FRAMESET> </FRAMESET> </HTML>
8. CODIGO PARA CREAR UNA TABLA
<HTML> <BODY BGCOLOR=#333300> <CENTER>ESCENARIOS DEPORTIVOS</CENTER> <HR SIZE=6 COLOR="#33FFCC"> <CENTER> <TABLE BORDER=6 BGCOLOR="#CC0000" WIDTH=60%> <TR> <TD><A HREF="GATO.HTML"><IMG SRC="GATO.JPG" WIDTH =80 HEIGHT=80></A></TD> <TD><A HREF="SEBASTIAN.HTML"><IMG SRC="SEBASTIAN.JPG" WIDTH =80 HEIGHT=80></A></TD> <TD><A HREF="SENA.HTML"><IMG SRC="SENA.JPG" WIDTH =80 HEIGHT=80></A></TD> <TD><A HREF="ANTI3.HTML"><IMG SRC="MULI.JPG" WIDTH =80 HEIGHT=80></A></TD> </TR> <TR> <TD><CENTER>GATO TEJADA</CENTER></TD> <TD><CENTER>SEBASTIAN</CENTER></TD> <TD><CENTER>SENA</CENTER></TD> <TD><CENTER>MULTIMEDIA</CENTER></TD> </TR> </TABLE> </HTML>
9. CODIGO PARA CREAR UNA TABLA CON DIVISIONES
<HTML> <HEAD> <TITLE>POETAS-ESCRIORES COLOMBIANOS</TITLE> </HEAD> <BODY BGCOLOR ="#000000"> <CENTER>POETAS Y ESCRITORES COLOMBIANOS</CENTER> <HR SIZE = 4 COLOR = "#00ff00"> <BODY> <CENTER> <TABLE BORDER = 4 BGCOLOR ="#3300ff" WIDTH = 80%> <TR><TD BGCOLOR= "#CC33FF" COLSPAN = 2 WIDTH = 100 HEIGHT = 100><CENTER>GABRIEL GARCIA MARQUEZ</CENTER></TD></TR> <TR><TD><CENTER><IMG SRC = "GABO.JPG" WIDTH =200 HEIGHT = 300></CENTER></TD> <TD> Gabriel Garca Mrquez naci en Aracataca (Magdalena), el 6 de marzo de 1927. Creci como nio nico entre sus abuelos maternos y sus tas, pues sus padres, el telegrafista Gabriel Eligio Garca y Luisa Santiaga Mrquez, se fueron a vivir, cuando Gabriel slo contaba con cinco aos, a la poblacin de Sucre, donde don Gabriel Eligio mont una farmacia y donde tuvieron a la mayora de sus once hijos. Los abuelos eran dos personajes bien particulares y marcaron el periplo literario del futuro Nobel: el coronel Nicols Mrquez, veterano de la guerra de los Mil Das, le contaba al pequeo Gabriel infinidad de historias de su juventud y de las guerras civiles del siglo XIX, lo llevaba al circo y al cine, y fue su cordn umbilical con la historia y con la realidad. Doa Tranquilina Iguarn, su cegatona abuela, se la pasaba siempre contando fbulas y leyendas familiares, mientras organizaba la vida de los miembros de la casa de acuerdo con los mensajes que reciba en sueos: ella fue la fuente de la visin mgica, supersticiosa y sobrenatural de la realidad. Entre sus tas la que ms lo marc fue Francisca, quien teji su propio sudario para dar fin a su vida. Gabriel Garca Mrquez aprendi a escribir a los cinco aos, en el colegio Montessori de Aracataca, con la joven y bella profesora Rosa Elena Fergusson, de quien se enamor: fue la primera mujer que lo perturb. Cada vez que se le acercaba, le daban ganas de besarla: le inculc el gusto de ir a la escuela, slo por verla, adems</TD></TR>
<TR><TD BGCOLOR= "#CC33FF" COLSPAN = 2 WIDTH = 100 HEIGHT = 100><CENTER> GABRIEL GARCIA MARQUEZ</CENTER></TD></TR> <TR><TD><CENTER><IMG SRC = "GABO.JPG" WIDTH =200 HEIGHT = 300></CENTER></TD> <TD> ESCRIBIR EL TEXTO </TD></TR> REPETIR ESTE CODIGO PARA LOS DEMAS POETAS </TABLE> <CAPTION>Elaborado por: William Quintero Grado 8-1 Corporacion Colegio Americas Unidas - Cali </CAPTION> </CENTER> </BODY> </HTML>
10.PARA ESTABLECER DIVISIONES DENTRO DE UNA PAGINA WEB
<HTML> <HEAD> <TITLE>PASCUAL GUERRERRO</TITLE> <script src="Degraded.js" type="text/javascript"></script> </head> <body onLoad="Degraded('#00ff00', '#00FF66', getWindowData())"> </body> <CENTER>OLIMPICO PASCUAL GUERRERO</B</CENTER> <MARQUEE DIRECTION="ALTERNATE"><CIENTER>CALI SURAMERICA</B</CENTER></MARQUEE> <DIV ALIGN="CENTER" STYLE="WIDTH:90%;" > <DIV STYLE="WIDTH:800PX;HEIGHT:500PX;BACKGROUND:#00FFCC;-MOZ-BORDER-RADIUS: 30PX;-WEBKIT-BORDER-RADIUS:30PX;PADDING:30PX; PADDING-TOP:2PX;BOX-SHADOW: #DDD 0 0 5PX 1PX;"> <IMG SRC="IMAGES/PASCUAL.JPG" WIDTH=300 HEIGHT=250 ALIGN="LEFT" STYLE="MARGIN-RIGHT:15PX;-MOZ-BORDER-RADIUS: 15PX;-WEBKIT-BORDER-RADIUS:15PX;BOX-SHADOW: #DDD 0 0 5PX 1PX;"> ESCRIBIR EL TEXTO </DIV> </BODY> </HTML>
ING. WILLIAM QUINTERO ALVAREZ - EDINSON QUINTERO ALVAREZ WWW.CONTICQ.BLOGSPOT.COM CALI COLOMBIA
COLOMBIA
Pgina 15 de 15

Lenguaje de Marcas de Hipertexto - HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Lenguaje de Marcas de Hipertexto - HTML

Cargado por

Copyright:

Formatos disponibles

COLEGIO AMERICAS UNIDAS INSTITUCION EDUCATIVA BARTOLOME LOBOGUERRERO AREA DE TECNOLOGIA E INFORMATICA AYUDAS BASICAS DE HTML

3. CODIGO PARA CREAR PGINAS INDIVIDUALES CON DEGRADADO

4. CODIGO PAGINA TITULO

5. CODIGO PGINA DE INTRODUCCION

6. CODIGO PGINA DE IMGENES

7. CODIGO PGINA PRINCIPAL

8. CODIGO PARA CREAR UNA TABLA

9. CODIGO PARA CREAR UNA TABLA CON DIVISIONES

10.PARA ESTABLECER DIVISIONES DENTRO DE UNA PAGINA WEB

También podría gustarte