SlideShare una empresa de Scribd logo
1 de 23
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

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"></CENTER>
<HR>
</BODY>
<HTML>

•
•
•
•
•
•

•
•
•
•
•

<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

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>
<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"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>
<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>

Más contenido relacionado

La actualidad más candente

HTML5 - Forms
HTML5 - FormsHTML5 - Forms
HTML5 - Forms
tina1357
 
CSS - Text Properties
CSS - Text PropertiesCSS - Text Properties
CSS - Text Properties
hstryk
 
Div tag presentation
Div tag presentationDiv tag presentation
Div tag presentation
alyssa_lum11
 

La actualidad más candente (20)

XML
XMLXML
XML
 
Basic html
Basic htmlBasic html
Basic html
 
Intro to html, css & sass
Intro to html, css & sassIntro to html, css & sass
Intro to html, css & sass
 
Css Specificity
Css SpecificityCss Specificity
Css Specificity
 
HTML5 - Forms
HTML5 - FormsHTML5 - Forms
HTML5 - Forms
 
Css
CssCss
Css
 
Forms in html5
Forms in html5Forms in html5
Forms in html5
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohan
 
Document object model
Document object modelDocument object model
Document object model
 
Html ppt
Html pptHtml ppt
Html ppt
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
 
CSS - Text Properties
CSS - Text PropertiesCSS - Text Properties
CSS - Text Properties
 
How to Tutorial: Google Form
How to Tutorial: Google FormHow to Tutorial: Google Form
How to Tutorial: Google Form
 
Div tag presentation
Div tag presentationDiv tag presentation
Div tag presentation
 
Dynamic HTML (DHTML)
Dynamic HTML (DHTML)Dynamic HTML (DHTML)
Dynamic HTML (DHTML)
 
Ms office practical
Ms office practicalMs office practical
Ms office practical
 
Cse html ppt
Cse html pptCse html ppt
Cse html ppt
 
CSS
CSSCSS
CSS
 
Html
HtmlHtml
Html
 

Destacado

Tarea06 3p 10programacion
Tarea06 3p 10programacionTarea06 3p 10programacion
Tarea06 3p 10programacion
guestd5974a6
 
Practico html
Practico htmlPractico html
Practico html
lucascen
 
3p 10cjm Millercuaran Programacion Practica01
3p 10cjm Millercuaran Programacion Practica013p 10cjm Millercuaran Programacion Practica01
3p 10cjm Millercuaran Programacion Practica01
guestd5974a6
 
Tema 1, práctica 1ª
Tema 1, práctica 1ªTema 1, práctica 1ª
Tema 1, práctica 1ª
monrroe8
 
Tarea07 3p 10programacion
Tarea07 3p 10programacionTarea07 3p 10programacion
Tarea07 3p 10programacion
guestd5974a6
 
Tarea04 Cuento Inedito Millercuaran
Tarea04 Cuento Inedito MillercuaranTarea04 Cuento Inedito Millercuaran
Tarea04 Cuento Inedito Millercuaran
guestd5974a6
 

Destacado (20)

Tarea06 3p 10programacion
Tarea06 3p 10programacionTarea06 3p 10programacion
Tarea06 3p 10programacion
 
Practico html
Practico htmlPractico html
Practico html
 
Curso html
Curso   htmlCurso   html
Curso html
 
Tags en html
Tags en htmlTags en html
Tags en html
 
Optimización On-Site para Wordpress | Wordcamp Lima 2014
Optimización On-Site para Wordpress | Wordcamp Lima 2014Optimización On-Site para Wordpress | Wordcamp Lima 2014
Optimización On-Site para Wordpress | Wordcamp Lima 2014
 
3p 10cjm Millercuaran Programacion Practica01
3p 10cjm Millercuaran Programacion Practica013p 10cjm Millercuaran Programacion Practica01
3p 10cjm Millercuaran Programacion Practica01
 
Tema 1, práctica 1ª
Tema 1, práctica 1ªTema 1, práctica 1ª
Tema 1, práctica 1ª
 
Guia SEO para redacción de artículos.
Guia SEO para redacción de artículos.Guia SEO para redacción de artículos.
Guia SEO para redacción de artículos.
 
Tarea07 3p 10programacion
Tarea07 3p 10programacionTarea07 3p 10programacion
Tarea07 3p 10programacion
 
Tarea04 Cuento Inedito Millercuaran
Tarea04 Cuento Inedito MillercuaranTarea04 Cuento Inedito Millercuaran
Tarea04 Cuento Inedito Millercuaran
 
3 curso php
3 curso php3 curso php
3 curso php
 
Sitio web (html) ejemplos 02
Sitio web (html) ejemplos 02Sitio web (html) ejemplos 02
Sitio web (html) ejemplos 02
 
Webcongress Lima 2015 | Seo Onsite
Webcongress Lima 2015 | Seo OnsiteWebcongress Lima 2015 | Seo Onsite
Webcongress Lima 2015 | Seo Onsite
 
Primera clase de HTML
Primera clase de HTMLPrimera clase de HTML
Primera clase de HTML
 
practicas de html
practicas de htmlpracticas de html
practicas de html
 
Introduccion a programacion html
Introduccion a programacion htmlIntroduccion a programacion html
Introduccion a programacion html
 
Curso css
Curso   cssCurso   css
Curso css
 
Diseño de páginas Web con HTML
Diseño de páginas Web con HTMLDiseño de páginas Web con HTML
Diseño de páginas Web con HTML
 
Introducción al lenguaje HTML
Introducción al lenguaje HTMLIntroducción al lenguaje HTML
Introducción al lenguaje HTML
 
HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?
 

Similar a Ejemplos de HTML (20)

MEJORES - Curso-HTML-+-CSS.pdf
MEJORES - Curso-HTML-+-CSS.pdfMEJORES - Curso-HTML-+-CSS.pdf
MEJORES - Curso-HTML-+-CSS.pdf
 
Curso-HTML--CSS.pdf
Curso-HTML--CSS.pdfCurso-HTML--CSS.pdf
Curso-HTML--CSS.pdf
 
Nuevas etiquetas en html5
Nuevas etiquetas en html5Nuevas etiquetas en html5
Nuevas etiquetas en html5
 
Nuevas etiquetas en html5
Nuevas etiquetas en html5Nuevas etiquetas en html5
Nuevas etiquetas en html5
 
Paginas web
Paginas webPaginas web
Paginas web
 
Manual html
Manual htmlManual html
Manual html
 
Html power
Html powerHtml power
Html power
 
Diseño de paginas con html1
Diseño de paginas con html1Diseño de paginas con html1
Diseño de paginas con html1
 
Presentación CSS y HTML en Gummurcia
Presentación CSS y HTML en GummurciaPresentación CSS y HTML en Gummurcia
Presentación CSS y HTML en Gummurcia
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Prácticas en HTML
Prácticas en HTMLPrácticas en HTML
Prácticas en HTML
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Publicación en SlideShare
Publicación en SlideSharePublicación en SlideShare
Publicación en SlideShare
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 

Más de eduardodf47 (6)

Out (2)
Out (2)Out (2)
Out (2)
 
Separador horizontal HTML
Separador horizontal HTMLSeparador horizontal HTML
Separador horizontal HTML
 
El texto HTML
El texto HTMLEl texto HTML
El texto HTML
 
Definiciones de HTML
Definiciones de HTMLDefiniciones de HTML
Definiciones de HTML
 
Encabezados,color de fondo y separador horizontal en HTML
Encabezados,color de fondo y separador horizontal en HTMLEncabezados,color de fondo y separador horizontal en HTML
Encabezados,color de fondo y separador horizontal en HTML
 
Estructura basica de HTML
Estructura basica de HTMLEstructura basica de HTML
Estructura basica de HTML
 

Último

🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
EliaHernndez7
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
El Fortí
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
jlorentemartos
 

Último (20)

🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxCONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
 
semana 4 9NO Estudios sociales.pptxnnnn
semana 4  9NO Estudios sociales.pptxnnnnsemana 4  9NO Estudios sociales.pptxnnnn
semana 4 9NO Estudios sociales.pptxnnnn
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literario
 
Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSSEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdf
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
 
FUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.pptFUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
 
EL HABITO DEL AHORRO en tu idea emprendedora22-04-24.pptx
EL HABITO DEL AHORRO en tu idea emprendedora22-04-24.pptxEL HABITO DEL AHORRO en tu idea emprendedora22-04-24.pptx
EL HABITO DEL AHORRO en tu idea emprendedora22-04-24.pptx
 

Ejemplos de HTML

  • 1. Curso HTML Practicas o ejemplos de HTML
  • 2. 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>
  • 3. 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>
  • 4. 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>
  • 5. 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>
  • 6. 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>
  • 7. 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>
  • 8. 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>
  • 9. 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>
  • 10. 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>
  • 11. 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>
  • 12. 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>
  • 13. 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>
  • 14. 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>
  • 15. 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>
  • 16. 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>
  • 17. Ejemplo 16 : imagen de botón Ejemplo B 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"></CENTER> <HR> </BODY> <HTML> • • • • • • • • • • • <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>
  • 18. 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>
  • 19. 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>
  • 20. 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>
  • 21. 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> <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"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>
  • 22. 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>
  • 23. 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>