Ejemplos de HTML

Curso HTML

Practicas o ejemplos de HTML

Ejemplo 1 : Pagina sencilla

• <HTML>• <HEAD> <!__Cabecera del documento>• <TITLE> Miprimera pagina </TITLE>

• <HEAD>• <BODY>• Entre estas etiquetas pondremos el contenido de nuestra pagina web• podremos incertar aqui tablas vinculos entre otros• (-.-) XDDDDDDDDD• </BODY>• </HTML>

Ejemplo 2: Párrafos

• <HTML>

• <HEAD> <TITLE> PARRAFOS </TITLE> </HEAD>

• <BODY>• <P> Esto es un parrafo dentro de una pagina web• <P> Este otro parrafo que esta separado del anterior por una linea en blanco• </BODY>

• </HTML>

Ejemplo 3: Encabezados

• <HTML>• • <HEAD><TITLE> Encabesados </TITLE></HEAD>

• <BODY>• <H1>Encabesado 1</H1> • <H2>Encabesado 2</H2> • <H3>Encabesado 3</H3> • <H4>Encabesado 4</H4> • <H5>Encabesado 5</H5>• <H6>Encabesado 6</H6>• </BODY>

• </HTML>

Ejemplo 4: Separador horizontal

• <HTML>• <HEAD> • <TITLE> SEPARADOR HORIZONTAL </TITLE> • </HEAD>• <BODY> • <CENTER><H1>CETis No.150 </H1></CENTER>• <HR NOSHADE SIZE="20">• Podemos utilisar una linia horizontal para separar distintas

partes de una pagina Web, y para ello utilizaremos esta etiqueta. • </BODY>• </HTML>

Ejemplo 5 : Color de fondo con separador horizontal

• <HTML>• <HEAD> • <TITLE>SEPARADOR HORIZONTAL </TITLE> • </HEAD>• <BODY bgcolor="#FFF300">• <CENTER> <H1>Cetis No. 150</H1> </CENTER>• <HR NOSHADE SIZE="20">• <H2>Podemos utilisar una linia horizontal para separar

distintas par tes de una pagina Web, y para ello utilizaremos esta etiqueta</H2>

• </BODY>• </HTML>

Ejemplo 6: Texto preformateado

• <HTML>• <HEAD><TITLE>TEXTO PREFORMATEADO</TITLE></HEAD>• <BODY>• Podemos crear un texto que aparezca escrito con• una maquina de escribir.• para ello utilizamos las etiquetas• el texto aparecera con el tipo de letra de las maquinas de • escribir antiguas• (tipo couler)• respetara los espacios en blanco y los saltos de linea sin• necesidad de incluir ninguna etiqueta mas• <HR>• <CENTER><H1><B><i>CETis No.150</i></B></H1></CENTER>• <CENTER><H1>PROGRAMACION</H1></CENTER>• <HR>• <PRE>• Podemos crear un texto que aparezca escrito con• una maquina de escribir.• para ello utilizamos las etiquetas• el texto aparecera con el tipo de letra de las maquinas de • escribir antiguas• (tipo couler)• respetara los espacios en blanco y los saltos de linea sin• necesidad de incluir ninguna etiqueta mas• </PRE>• </BODY>• </HTML>

Ejemplo 7: separador horizontal en diferentes posiciones (izquierda, derecha y centro)

• <HTML>• <HEAD>• <TITLE>SEPARADOR HORIZONTAL</TITLE>• </HEAD>• <BODY> • <HR WIDTH="50%" ALIGN="RIGHT">• <CENTER> CETis No.150 </CENTER>• <HR WIDTH="50%" ALIGN="LEFT">• <CENTER> PROGRAMACIóN </CENTER>• <HR WIDTH="50%" ALIGN="CENTER">• </BODY>• </HTML>

Ejemplo 8: Etiquetas anidadas

• <HTML>• <HEAD>• <TITLE>ETIQUETAS ANIDADAS</TITLE>• </HEAD>• <BODY>• ETIQUETAS ANIDADAS• <CENTER><H1>CETis No.150</H1></CENTER>• <CENTER><H2>PROGRAMACION</H2></CENTER> • <CENTER><H3>CURSO HTML</H3></CENTER>• <HR>• </BODY>• </HTML>

Ejemplo 9 : Salto de línea

• <HTML>• <HEAD>• <TITLE>SALTO DE LINEA</TITLE>• </HEAD>• <BODY>• SALTO DE LINEA• <BR>• <HR>• <CENTER><H1>CETis No.150</H1></CENTER>• <BR>• <BR>• <BR>• <CENTER><H2>PROGRAMACION</H2></CENTER>• <BR>• <BR>• <BR>• <HR>• </BODY>• </HTML>

Ejemplo 10 :Texto con tamaño menor

• <HTML>• <HEAD><TITLE>Texto con tamaño menor</TITLE></HEAD>• <BODY>• Texto con tamaño menor• <HR>• <CENTER><H1>CETIS No.150</H1></CENTER>• <HR>• <TT>• Podemos crear un texto que aparezca escrito con• una maquina de escribir.• para ello utilizamos las etiquetas• el texto aparecera con el tipo de letra de las maquinas de • escribir antiguas• (tipo couler)• respetara los espacios en blanco y los saltos de linea sin• necesidad de incluir ninguna etiqueta mas• </TT>• </BODY>• <HTML>

Ejemplo 11: Texto con tamaño mayor

• <HTML>• <HEAD><TITLE>Texto con tamaño mayor</TITLE></HEAD>• <BODY>• Texto con tamaño mayor• <HR>• <CENTER><H1>CETIS No.150</H1></CENTER>• <HR>• <BASEFONT SIZE="5">• Podemos crear un texto que aparezca escrito con• una maquina de escribir.• para ello utilizamos las etiquetas• el texto aparecera con el tipo de letra de las maquinas de • escribir antiguas• (tipo couler)• respetara los espacios en blanco y los saltos de linea sin• necesidad de incluir ninguna etiqueta mas• • </BODY>• <HTML>

Ejemplo 12 : Cita textual

• <HTML>• <HEAD><TITLE>Cita textual</TITLE></HEAD>• <BODY>• Cita textual• <HR>• <CENTER><H1><B><i>CETIS No.150</i></B></H1></CENTER>• <HR>• <BLOCKQUOTE>• Ismael hace años no importa cuantos• exactamente hallandome con poco o • ningun dinero en la bolsa y sin nada de• especial en interes que me mantuviera en tierra• pense que lo mejor seria darme a la mar por• una temporada para ver la paerte acuatica del mundo • </BLOCKQUOTE>• </BODY>• </HTML>

Ejemplo 13 : Lista con viñetas

• <HTML>• <HEAD><BODY>LISTA CON VIÑETAS</BODY></HEAD>• <BODY>• <HR>• LISTA CON VIÑETAS• <HR>• <BR>• <BR>• <UL>• <LI>CAPIYULO 1• <LI>CAPITULO 2• <LI>CAPITULO 3• </UL>• </BODY>• </HTML>

Ejemplo 14 : lista con viñetas cuadraticas

• <HTML>• <HEAD><BODY>LISTA CON VIÑETAS CUADRATICAS</BODY></HEAD>• <BODY>• <HR>• LISTA CON VIÑETAS CUADRATICAS• <HR>• <BR>• <BR>• <UL>• <LI>CAPITULO 1• <ULTYPE="square">• <L1>INICIO• <L1>DRAMA• <L1>DESENLACE• </UL>• <LI>CAPITULO 2• <LI>CAPITULO 3• </UL>• </BODY>• </HTML>

Ejemplo 15 : Imagen de fondo

• HTML>• <HEAD><TITLE>IMAGEN DE FONDO</TITLE></HEAD>• <BODY BACKGROUND="doge.jpg">• <HR>• IMAGEN DE FONDO• <HR>• <FONT FACE="ARIAL"SIZE="14">• <HR>• <CENTER>CETis No.150</CENTER>• <CENTER>PROGRAMACION</CENTER>• <HR>• EN ESTA PAGINA PONDREMOS UNA IMAGEN DE FONDO• </FONT>• </BODY>• </HTML>

Ejemplo 16 : imagen de botón

Ejemplo B• <HTML>• <HEAD><TITLE>IMAGEN DE

BOTON</TITLE></HEAD>• <BODY>• <FONT FACE="ARIAL"SIZE="14">• <HR>• <CENTER>CETis No.150</CENTER>• <CENTER>PROGRAMACION</CENTER>• <CENTER><img

src="510af5b3e5b65_620x0.jpg" WIDHT="144" HEIGHT="140"></CENTER>

• <HR>• </BODY>• <HTML>•

Ejemplo A• <HTML>• <HEAD><TITLE>IMAGEN DE BOTON</TITLE></HEAD>• <BODY>• <FONT FACE="ARIAL"SIZE="14">• <HR>• <CENTER>CETis No.150</CENTER>• <CENTER>PROGRAMACION</CENTER>• <CENTER><img src="510af5b3e5b65_620x0.jpg"

WIDHT="144" HEIGHT="140"><img src="1888Eiffeltorre chabelo.jpg" WIDHT="144" HEIGHT="140"></CENTER>

• <HR>• <img

src="cdf9f2de6056d965224ba6e5b39284db.png" WIDHT="144" HEIGHT="140">

• </BODY>• <HTML>•

Ejemplo 17 : Texto en diferentes lados de la imagen

• HTML>• <HEAD> <TITLE> Texto arriba </TITLE> </HEAD>• <BODY>• <P> CETis.150, especialidades:• Programacion, Contabilidad• <img src="Penguins.jpg"WIDTH="144"HEIGHT="140"ALIGN=TOP> • <HR>

• <P> CETis.150, especialidades:• Programacion, Contabilidad• <img src="Penguins.jpg"WIDTH="144"HEIGHT="140"ALIGN=BASELINE> • <HR>

• <P> CETis.150, especialidades:• Programacion, Contabilidad• <img src="Penguins.jpg"WIDTH="144"HEIGHT="140"ALIGN=MIDDLE> • <HR>

• <P> CETis.150, especialidades:• Programacion, Contabilidad• <img src="Penguins.jpg"WIDTH="144"HEIGHT="140"ALIGN=LEFT> • <HR>

• </FONT>• </BODY>• </HTML>• •

Ejemplo 18 : listas ordenadas

• <HTML>• <HEAD><TITLE>Prueba de listas ordenadas</TITLE></HEAD>• • <BODY>• <BR>• Prueba de listas ordenadas• <BR>• <CENTER><H1><B><I>CETis NO.150</I></B></H1></CENTER>• <CENTER><H1><B><I>PROGRAMACION</I></B></H1></CENTER>• <HR>• <OL>• <LI VALUE="20">ESTE SERA EL NUMERO 20</LI>• <LI>ESTE SERA EL NUMERO 21</LI>• <LI>ESTE SERA EL NUMERO 22 Y ASI SUCESIVAMENTE </LI>• </OL>• <OL>• <LI VALUE="1"> ROBERTO ASPAS</LI>• <L1> ESTABAN GERARDO RODRIGUEZ</LI>• <LI> IVAN DANIEL GARCIA </LI>• <L1> RICARDO RODRIGUEZ</LI>• <LI> ENRIQUE GARCIA </LI>• <LI> JUAN PABLO TORRES </LI>• </OL>• DOMINGUEZ FRANCO EDUARDO DANIEL 20/02/2014• • </BODY>• </HTML>

Ejemplo 19 : Marquesina

• <HTML>• <HEAD><TITLE>marquezina</TITLE></HEAD>

• <BODY>• • <MARQUEE BGCOLOR ="#006699" BEHAVIOR ="scroll" DIRECTION

"down">• <b><FONT COLOR ="FFFFCC" SIZE="5">ESTO ES UNA MARQUESINA

</FONT></b></MARQUEE>• • • </BODY>• </HTML>

Ejemplo 20 : Marquezina con comportamientos y imagenes

Ejemplo A• <HTML>• <HEAD><TITLE>marquezina</TITLE></

HEAD>

• <BODY>• • <MARQUEE

BGCOLOR="#FFFABF"WIDHT="50%"SCROLLDELAY="100"SCROLLAMOUNT="5"DIRECTION ="LEFT"LOOP="INFINITE" >Estas viendo el ejemplo que hemos hecho.</MARQUEE>

• • </BODY>• <!__ DOMINGUEZ FRANCO EDUARDO

DANIEL 21/021/2014__>• </HTML>

Ejemplo B• <HTML>• <HEAD><TITLE>marquezina</TITLE></HEAD>

• <BODY>• • <MARQUEE BGCOLOR="#FFFABF" WIDHT="50%"

SCROLLDELAY="100" SCROLLAMOUNT="5" DIRECTION ="LEFT" LOOP="INFINITE" >Estas viendo el ejemplo que hemos hecho.</MARQUEE>

• <P>• <MARQUEE

BGCOLOR="#FDFACF"WIDHT="70%"SCROLLDELAY="100"SCROLLAMOUNT="5"DIRECTION ="LEFT"LOOP="INFINITE" >

• <img src="doge.jpg" WIDHT="80" HEIGHT="80"><img src="510af5b3e5b65_620x0.jpg" WIDHT="144" HEIGHT="140"></MARQUEE>

• • </BODY>• <!__ DOMINGUEZ FRANCO EDUARDO DANIEL

21/021/2014__>• </HTML>

Ejemplo 21 : Marquezina vertical con imagen en ella

• <HTML>• <HEAD><TITLE>marquezina</TITLE></HEAD>• <BODY>

• <p><MARQUEE BGCOLOR="RED" HEIGHT=600 WIDTH=100 BEHAVIOR="ALTERNATE" DIRECTION ="UP" >EMPRESA NACIONAL DEL PERRO

• <img src="doge.jpg" WIDHT="80" HEIGHT="80"></MARQUEE></p>• • <HR ALIGN="LEFT" SIZE="10" NOSHADE>• <p>Empresa no creada el dia de hoy en apaseo• Apaseo El Alto GTO• </BODY>• </HTML>

• •

Ejemplo 22 : Efectos de texto y imagen

• <HTML>• <HEAD><TITLE>Efectos del texto </TITLE></HEAD>

• <BODY text="green"> • <pre>• Ejemplo basico:uso de etiquetas de formato y atributods basicos para la etiqueta body.• <strong>Negrita</strong>• <em>Cursiva</em>• <del>Subrayado</del>• <big>Grande</big>• <small>Pequeño</small>• Esto es un <sub>subindice</sub>• y esto es un <sup>Superindice</sup>• </pre>• <img src="doge.jpg" border="6">• <img src="doge.jpg" alt="perro fisgon"• </BODY>• </HTML>

Ejemplos de HTML

Education

Transcript of Ejemplos de HTML