SlideShare a Scribd company logo
1 of 1
Download to read offline
ÁREA DE TECNOLOGÍA E INFORMÁTICA
                      http://tecnologiaeinformatica-lissyvancelis.blogspot.com
Lenguaje HTML – Alineación y tamaños de fuente                                                   Guía No. 3
TEMAS: Alineación de textos (atributo ALIGN= LEFT/ RIGHT/ CENTER/JUSTIFY), Tamaños de fuente (Etiquetas
<BASEFONT>, <FONT> atributos SIZE y COLOR), y &lt; para < y &gt; para >.


1. Abra Bloc de notas, haga Ajuste de línea y escriba el siguiente código:


<HTML>
<HEAD><TITLE>Alineación y tamaños de fuente con HTML</TITLE></HEAD>
<BODY BGCOLOR="lightblue">
<H1>Etiquetas de Alineación y tamaños de fuente en HTML</H1>
<H2>Alineación de párrafos y títulos</H2>
<P>La alineación de texto puede controlarse con la programación HTML. A menos que se especifique, todos los
elementos del documento se alinean a la izquierda, con el margen derecho sin alinear. Muchos documentos se ven
bien de este modo; sin embargo, para tener una página diferente, puede elegirse la alineación izquierda, derecha,
centrada o justificada.
<P>Los párrafos largos, con texto centrado, suelen ser difíciles de leer, pero puede ser que el diseño de la página
Web en algunos casos lo requiera. Según las necesidades se puede alinear utilizando el atributo ALIGN= dentro de
las etiquetas de párrafo &lt;P&gt; y de título de nivel &lt;H1&gt;, &lt;H2&gt;, etc. Ejemplos:
<P ALIGN = RIGHT>
Este texto debe estar alineado a la derecha.
<P ALIGN = CENTER>
Este texto debe estar centrado en la página.
<P ALIGN = LEFT>
Este texto debe estar alineado a la izquierda.
<P ALIGN = JUSTIFY>
Este párrafo ocupa más de dos líneas de texto, para que se observe justificado (alineado tanto en el margen
izquierdo como en el derecho) debemos utilizar el atributo ALIGN e indicar que esa alineación será justificada
asignándole el valor JUSTIFY.
<H1 ALIGN = CENTER>
Título de primer nivel centrado</H1>
<H2 ALIGN = RIGHT>
Ejemplo de título de segundo nivel a la derecha</H2>
<HR SIZE=5>
<H2>Tamaños de Fuentes</H2>
<P>Para cambiar el tamaño del texto se puede especificar el tamaño de la fuente base o el tamaño de la fuente en
algunos lugares específicos.
<P>La etiqueta &lt;BASEFONT&gt; afecta el valor predeterminado usado para el texto desde donde se coloca la
etiqueta, aunque los estilos de los títulos de nivel anulan el tamaño de la fuente base. El valor predeterminado de
la fuente en las páginas es tres si no se especifica uno diferente con esta etiqueta; este tamaño es legible en la
mayoría de los documentos.
<P>La etiqueta &lt;FONT&gt; afecta el tamaño empleado en partes específicas del texto y se debe cerrar con la
etiqueta &lt;/FONT&gt; para continuar con el tamaño de fuente predeterminado o indicado con la etiqueta
&lt;BASEFONT&gt; (hay que recordar que los estilos de los títulos de nivel anulan este valor).
<P>El atributo para asignar el tamaño en estas dos etiquetas es SIZE.
<P>Observa los siguientes ejemplos que enseñan cómo se utilizan las etiquetas de tamaño de fuente, verificando
que cada párrafo cumpla lo que está enunciando:
<P>1) Este es el tamaño de la fuente por defecto, o sea 3, porque no se ha indicado algo diferente.
<BASEFONT SIZE=5>
<P>2) Aquí se le asignó a la fuente base el tamaño 5.
<P>Así cambiemos de párrafo el tamaño sigue siendo 5 porque BASEFONT asigna el tamaño desde donde se
colocó la etiqueta hasta que se realice un cambio.
<FONT SIZE=+1 COLOR=FF0000>
<P>3) Desde aquí cambiamos el color y aumentamos en uno el tamaño de la fuente indicado en BASEFONT hasta
aquí</FONT> y luego vuelve al tamaño de fuente asignado en BASEFONT y al color anterior.
<FONT SIZE=7>
<P>4) Este texto inicia con tamaño de fuente 7 sin importar qué se había asignado en BASEFONT</FONT> y ahora
vuelve a 5.
</BASEFONT>
<P>Este último párrafo debe tener tamaño 3 por haber cerrado la etiqueta BASEFONT.
<HR>
<P ALIGN=RIGHT><FONT SIZE=5 COLOR="royalblue">Nombres y curso</FONT>
<HR>
</BODY>
</HTML>



2. Guarde con el nombre “Tamaños de fuente y alineación.html” en la carpeta correspondiente y
   ejecute la página Web con Internet Explorer observando la utilidad de cada etiqueta.

Próxima clase: traer el código de una página Web diseñada individualmente y con tema libre, digitada en una hoja
oficio marcada con nombre y curso, tamaño de letra 10 o 12, donde aplique lógica y estéticamente, las etiquetas
trabajadas hasta el momento. Esta página es inicio de su proyecto final de período por lo tanto adicionalmente,
guarde el texto con el nombre Index-su nombre.html y envíelo desde su correo al mío (tecnologiaokey@gmail.com)
para generar una copia y que la pueda usar en la clase. Recuerde que más adelante debe conseguir imágenes sobre
ese tema. EL ENVÍO POR CORREO NO REEMPLAZA LA ENTREGA IMPRESA, ES PARA QUE USTED TENGA LA COPIA.

More Related Content

What's hot (15)

Aprendiz
AprendizAprendiz
Aprendiz
 
Guia de html 3 y 4 periodo
Guia de html 3 y 4  periodoGuia de html 3 y 4  periodo
Guia de html 3 y 4 periodo
 
Presentación tbjos
Presentación tbjosPresentación tbjos
Presentación tbjos
 
Capítulo 9
Capítulo 9Capítulo 9
Capítulo 9
 
Revisión Nª 3
Revisión Nª 3Revisión Nª 3
Revisión Nª 3
 
Capítulo 9
Capítulo 9Capítulo 9
Capítulo 9
 
CSS
CSSCSS
CSS
 
Html Exposicion
Html ExposicionHtml Exposicion
Html Exposicion
 
Encabezados y pie de página
Encabezados y pie de páginaEncabezados y pie de página
Encabezados y pie de página
 
Diapositivas Html
Diapositivas HtmlDiapositivas Html
Diapositivas Html
 
Las Herramientas de Office
Las Herramientas de OfficeLas Herramientas de Office
Las Herramientas de Office
 
Informati caa (1)
Informati caa (1)Informati caa (1)
Informati caa (1)
 
Lista de cotejo para evaluar el cuadro en word
Lista de cotejo para evaluar el cuadro en wordLista de cotejo para evaluar el cuadro en word
Lista de cotejo para evaluar el cuadro en word
 
Informati caa (1) grupo 2
Informati caa (1) grupo 2Informati caa (1) grupo 2
Informati caa (1) grupo 2
 
Tablas de contenido!!
Tablas de contenido!!Tablas de contenido!!
Tablas de contenido!!
 

Viewers also liked (9)

9.columnas
9.columnas9.columnas
9.columnas
 
Html
HtmlHtml
Html
 
Formato de texto y caracteres especiales
Formato de texto y caracteres especialesFormato de texto y caracteres especiales
Formato de texto y caracteres especiales
 
como hacer una pagina web con bloc de notas
como hacer una pagina web con bloc de notascomo hacer una pagina web con bloc de notas
como hacer una pagina web con bloc de notas
 
Dispositivos comunicación
Dispositivos comunicaciónDispositivos comunicación
Dispositivos comunicación
 
Dispositivos De ComunicacióN
Dispositivos De ComunicacióNDispositivos De ComunicacióN
Dispositivos De ComunicacióN
 
Crear una pagina web con bloc de notas
Crear una pagina web con bloc de notasCrear una pagina web con bloc de notas
Crear una pagina web con bloc de notas
 
Etiquetas básicas de HTML
Etiquetas básicas de HTMLEtiquetas básicas de HTML
Etiquetas básicas de HTML
 
Cuidados del computador
Cuidados del computadorCuidados del computador
Cuidados del computador
 

Similar to Guia 3 de html alineacion y tamaños de fuente (20)

Etiquetas básicas en html
Etiquetas básicas en htmlEtiquetas básicas en html
Etiquetas básicas en html
 
Introhtml
IntrohtmlIntrohtml
Introhtml
 
Portales ud4 - lenguaje html
Portales   ud4 - lenguaje htmlPortales   ud4 - lenguaje html
Portales ud4 - lenguaje html
 
Html doc. descargado (reparado)
Html doc. descargado (reparado)Html doc. descargado (reparado)
Html doc. descargado (reparado)
 
Html
HtmlHtml
Html
 
Practicas html
Practicas htmlPracticas html
Practicas html
 
Encabezados h1 h6 p aplicar estilos parrafos etiqueta pre html var
Encabezados h1   h6 p aplicar estilos parrafos etiqueta pre html varEncabezados h1   h6 p aplicar estilos parrafos etiqueta pre html var
Encabezados h1 h6 p aplicar estilos parrafos etiqueta pre html var
 
Codigos HTML...paginas web
Codigos HTML...paginas webCodigos HTML...paginas web
Codigos HTML...paginas web
 
TAREA DEL CSS
TAREA DEL CSSTAREA DEL CSS
TAREA DEL CSS
 
Guia de repaso html11
Guia de repaso html11Guia de repaso html11
Guia de repaso html11
 
Conceptos Etiquetas de HTML
Conceptos Etiquetas de HTMLConceptos Etiquetas de HTML
Conceptos Etiquetas de HTML
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
Gordo
GordoGordo
Gordo
 
programacion
programacionprogramacion
programacion
 
Html-CSS
Html-CSSHtml-CSS
Html-CSS
 
Html apunte 2
Html apunte 2Html apunte 2
Html apunte 2
 
Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
 
Como crear una pagina web
Como crear una pagina webComo crear una pagina web
Como crear una pagina web
 
Etiquetas Html Udp
Etiquetas Html UdpEtiquetas Html Udp
Etiquetas Html Udp
 
Html basicccccccoooooooooooooo
Html basicccccccooooooooooooooHtml basicccccccoooooooooooooo
Html basicccccccoooooooooooooo
 

More from lisvancelis

Taller 1 pixel art con gimp
Taller 1 pixel art con gimpTaller 1 pixel art con gimp
Taller 1 pixel art con gimp
lisvancelis
 
Cuestionario de Herramientas Web
Cuestionario de Herramientas WebCuestionario de Herramientas Web
Cuestionario de Herramientas Web
lisvancelis
 
Evaluación final - Tablas y diagramas en Word
Evaluación final - Tablas y diagramas en WordEvaluación final - Tablas y diagramas en Word
Evaluación final - Tablas y diagramas en Word
lisvancelis
 
Actividad sobre el glosario de internet
Actividad sobre el glosario de internetActividad sobre el glosario de internet
Actividad sobre el glosario de internet
lisvancelis
 
Glosario de Internet
Glosario de InternetGlosario de Internet
Glosario de Internet
lisvancelis
 
Quinta clase novenos - Esquemas con formas
Quinta clase novenos - Esquemas con formasQuinta clase novenos - Esquemas con formas
Quinta clase novenos - Esquemas con formas
lisvancelis
 
Guía 5 de PowerPoint 2007
Guía 5 de PowerPoint 2007Guía 5 de PowerPoint 2007
Guía 5 de PowerPoint 2007
lisvancelis
 
GeoGebra Guía 0 Introducción
GeoGebra Guía 0 IntroducciónGeoGebra Guía 0 Introducción
GeoGebra Guía 0 Introducción
lisvancelis
 

More from lisvancelis (20)

Conceptos básicos en informática
Conceptos básicos en informáticaConceptos básicos en informática
Conceptos básicos en informática
 
Octavo grado taller 0 de excel 2010
Octavo grado taller 0 de excel 2010Octavo grado taller 0 de excel 2010
Octavo grado taller 0 de excel 2010
 
Octavo grado taller 1 de excel 2010
Octavo grado taller 1 de excel 2010Octavo grado taller 1 de excel 2010
Octavo grado taller 1 de excel 2010
 
Proyecto 2 en micromundos 07 abr2015
Proyecto 2 en micromundos   07 abr2015Proyecto 2 en micromundos   07 abr2015
Proyecto 2 en micromundos 07 abr2015
 
Proyecto 1 en micromundos 24 mar2015
Proyecto 1 en micromundos   24 mar2015Proyecto 1 en micromundos   24 mar2015
Proyecto 1 en micromundos 24 mar2015
 
Evaluación final de excel para el primer período 2015
Evaluación final de excel para el primer período 2015Evaluación final de excel para el primer período 2015
Evaluación final de excel para el primer período 2015
 
Evaluación escrita de excel en el cuaderno 2015
Evaluación escrita de excel en el cuaderno   2015Evaluación escrita de excel en el cuaderno   2015
Evaluación escrita de excel en el cuaderno 2015
 
Taller 5 uso de funciones en excel - perímetros
Taller 5   uso de funciones en excel - perímetrosTaller 5   uso de funciones en excel - perímetros
Taller 5 uso de funciones en excel - perímetros
 
Taller 4 micromundos pro repite y otras instrucciones
Taller 4 micromundos pro   repite y otras instruccionesTaller 4 micromundos pro   repite y otras instrucciones
Taller 4 micromundos pro repite y otras instrucciones
 
Taller 4 referencias relativas y absolutas
Taller 4   referencias relativas y absolutasTaller 4   referencias relativas y absolutas
Taller 4 referencias relativas y absolutas
 
Taller 3 practicar fórmulas y series en excel
Taller 3   practicar fórmulas y series en excelTaller 3   practicar fórmulas y series en excel
Taller 3 practicar fórmulas y series en excel
 
Evaluación diagnóstica y nivelatoria de excel para novenos 2015
Evaluación diagnóstica y nivelatoria de excel para novenos   2015Evaluación diagnóstica y nivelatoria de excel para novenos   2015
Evaluación diagnóstica y nivelatoria de excel para novenos 2015
 
Taller 1 pixel art con gimp
Taller 1 pixel art con gimpTaller 1 pixel art con gimp
Taller 1 pixel art con gimp
 
Cuestionario de Herramientas Web
Cuestionario de Herramientas WebCuestionario de Herramientas Web
Cuestionario de Herramientas Web
 
Evaluación final - Tablas y diagramas en Word
Evaluación final - Tablas y diagramas en WordEvaluación final - Tablas y diagramas en Word
Evaluación final - Tablas y diagramas en Word
 
Actividad sobre el glosario de internet
Actividad sobre el glosario de internetActividad sobre el glosario de internet
Actividad sobre el glosario de internet
 
Glosario de Internet
Glosario de InternetGlosario de Internet
Glosario de Internet
 
Quinta clase novenos - Esquemas con formas
Quinta clase novenos - Esquemas con formasQuinta clase novenos - Esquemas con formas
Quinta clase novenos - Esquemas con formas
 
Guía 5 de PowerPoint 2007
Guía 5 de PowerPoint 2007Guía 5 de PowerPoint 2007
Guía 5 de PowerPoint 2007
 
GeoGebra Guía 0 Introducción
GeoGebra Guía 0 IntroducciónGeoGebra Guía 0 Introducción
GeoGebra Guía 0 Introducción
 

Guia 3 de html alineacion y tamaños de fuente

  • 1. ÁREA DE TECNOLOGÍA E INFORMÁTICA http://tecnologiaeinformatica-lissyvancelis.blogspot.com Lenguaje HTML – Alineación y tamaños de fuente Guía No. 3 TEMAS: Alineación de textos (atributo ALIGN= LEFT/ RIGHT/ CENTER/JUSTIFY), Tamaños de fuente (Etiquetas <BASEFONT>, <FONT> atributos SIZE y COLOR), y &lt; para < y &gt; para >. 1. Abra Bloc de notas, haga Ajuste de línea y escriba el siguiente código: <HTML> <HEAD><TITLE>Alineación y tamaños de fuente con HTML</TITLE></HEAD> <BODY BGCOLOR="lightblue"> <H1>Etiquetas de Alineación y tamaños de fuente en HTML</H1> <H2>Alineación de párrafos y títulos</H2> <P>La alineación de texto puede controlarse con la programación HTML. A menos que se especifique, todos los elementos del documento se alinean a la izquierda, con el margen derecho sin alinear. Muchos documentos se ven bien de este modo; sin embargo, para tener una página diferente, puede elegirse la alineación izquierda, derecha, centrada o justificada. <P>Los párrafos largos, con texto centrado, suelen ser difíciles de leer, pero puede ser que el diseño de la página Web en algunos casos lo requiera. Según las necesidades se puede alinear utilizando el atributo ALIGN= dentro de las etiquetas de párrafo &lt;P&gt; y de título de nivel &lt;H1&gt;, &lt;H2&gt;, etc. Ejemplos: <P ALIGN = RIGHT> Este texto debe estar alineado a la derecha. <P ALIGN = CENTER> Este texto debe estar centrado en la página. <P ALIGN = LEFT> Este texto debe estar alineado a la izquierda. <P ALIGN = JUSTIFY> Este párrafo ocupa más de dos líneas de texto, para que se observe justificado (alineado tanto en el margen izquierdo como en el derecho) debemos utilizar el atributo ALIGN e indicar que esa alineación será justificada asignándole el valor JUSTIFY. <H1 ALIGN = CENTER> Título de primer nivel centrado</H1> <H2 ALIGN = RIGHT> Ejemplo de título de segundo nivel a la derecha</H2> <HR SIZE=5> <H2>Tamaños de Fuentes</H2> <P>Para cambiar el tamaño del texto se puede especificar el tamaño de la fuente base o el tamaño de la fuente en algunos lugares específicos. <P>La etiqueta &lt;BASEFONT&gt; afecta el valor predeterminado usado para el texto desde donde se coloca la etiqueta, aunque los estilos de los títulos de nivel anulan el tamaño de la fuente base. El valor predeterminado de la fuente en las páginas es tres si no se especifica uno diferente con esta etiqueta; este tamaño es legible en la mayoría de los documentos. <P>La etiqueta &lt;FONT&gt; afecta el tamaño empleado en partes específicas del texto y se debe cerrar con la etiqueta &lt;/FONT&gt; para continuar con el tamaño de fuente predeterminado o indicado con la etiqueta &lt;BASEFONT&gt; (hay que recordar que los estilos de los títulos de nivel anulan este valor). <P>El atributo para asignar el tamaño en estas dos etiquetas es SIZE. <P>Observa los siguientes ejemplos que enseñan cómo se utilizan las etiquetas de tamaño de fuente, verificando que cada párrafo cumpla lo que está enunciando: <P>1) Este es el tamaño de la fuente por defecto, o sea 3, porque no se ha indicado algo diferente. <BASEFONT SIZE=5> <P>2) Aquí se le asignó a la fuente base el tamaño 5. <P>Así cambiemos de párrafo el tamaño sigue siendo 5 porque BASEFONT asigna el tamaño desde donde se colocó la etiqueta hasta que se realice un cambio. <FONT SIZE=+1 COLOR=FF0000> <P>3) Desde aquí cambiamos el color y aumentamos en uno el tamaño de la fuente indicado en BASEFONT hasta aquí</FONT> y luego vuelve al tamaño de fuente asignado en BASEFONT y al color anterior. <FONT SIZE=7> <P>4) Este texto inicia con tamaño de fuente 7 sin importar qué se había asignado en BASEFONT</FONT> y ahora vuelve a 5. </BASEFONT> <P>Este último párrafo debe tener tamaño 3 por haber cerrado la etiqueta BASEFONT. <HR> <P ALIGN=RIGHT><FONT SIZE=5 COLOR="royalblue">Nombres y curso</FONT> <HR> </BODY> </HTML> 2. Guarde con el nombre “Tamaños de fuente y alineación.html” en la carpeta correspondiente y ejecute la página Web con Internet Explorer observando la utilidad de cada etiqueta. Próxima clase: traer el código de una página Web diseñada individualmente y con tema libre, digitada en una hoja oficio marcada con nombre y curso, tamaño de letra 10 o 12, donde aplique lógica y estéticamente, las etiquetas trabajadas hasta el momento. Esta página es inicio de su proyecto final de período por lo tanto adicionalmente, guarde el texto con el nombre Index-su nombre.html y envíelo desde su correo al mío (tecnologiaokey@gmail.com) para generar una copia y que la pueda usar en la clase. Recuerde que más adelante debe conseguir imágenes sobre ese tema. EL ENVÍO POR CORREO NO REEMPLAZA LA ENTREGA IMPRESA, ES PARA QUE USTED TENGA LA COPIA.