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>
</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>
escribir antiguas
(tipo couler)
</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><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>
<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>
escribir antiguas
(tipo couler)
</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">
escribir antiguas
(tipo couler)
</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

Ejemplo A

•
•

•
•

•
•
•
•
•
•

•
•
•
•

<HTML>
<HEAD><TITLE>IMAGEN DE
BOTON</TITLE></HEAD>
<BODY>
<HR>
<CENTER><img
src="510af5b3e5b65_620x0.jpg"
WIDHT="144" HEIGHT="140"></CENTER>
<HR>
</BODY>
<HTML>

•
•
•
•
•
•

•
•
•
•
•

<HTML>
<HEAD><TITLE>IMAGEN DE
BOTON</TITLE></HEAD>
<BODY>
<HR>
<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>

•
•
•
•

<img src="Penguins.jpg"WIDTH="144"HEIGHT="140"ALIGN=BASELINE>
<HR>

•
•
•
•

<img src="Penguins.jpg"WIDTH="144"HEIGHT="140"ALIGN=MIDDLE>
<HR>

•
•
•
•

<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

Ejemplo B

•
•

•
•

•
•
•

•
•
•
•

<HTML>
<HEAD><TITLE>marquezina</TITLE></HEAD>
<BODY>
<MARQUEE
BGCOLOR="#FFFABF"WIDHT="50%"SCROLLD
ELAY="100"SCROLLAMOUNT="5"DIRECTION
="LEFT"LOOP="INFINITE" >Estas viendo el
ejemplo que hemos hecho.</MARQUEE>

</BODY>
<!__ DOMINGUEZ FRANCO EDUARDO
DANIEL 21/021/2014__>
</HTML>

•
•
•

•
•
•
•
•
•
•

<HTML>
<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"SCR
OLLAMOUNT="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>
<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

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Ejemplos de HTML

Más de eduardodf47

Último

Ejemplos de HTML