Ejemplos de HTML
eduardodf47
1,609 views
23 slides
Feb 25, 2014
Slide 1 of 23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
About This Presentation
Practicas de HTML faciles para cualquiera
Slide Content
Curso HTML Practicas o ejemplos de HTML
Ejemplo 1 : P agina 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: S eparador 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>
E jemplo 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>
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 1,609
- Slides 23
- Age 4298 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views