Introduccion a la programación en HTML Tema 02 trabajando con texto en html

1. Modulo: Herramientas Tecnológicas de Programación
Asignatura: Introducción a la Programación HTML
Tema 02 Trabajando con texto en HTML
• Dar formato al texto en HTML
Objetivo de aprendizaje:
Lic. Salomón Aquino / salomonaquino77@gmail.com

2. Caracteres especiales y espacios en blanco
• Los caracteres < y > son dos
caracteres especiales que
indican inicio y fin de etiqueta.
• Pero, si se desea insertar estos
caracteres como texto hay que
escribir el nombre que los
representa:
• < Se representa con &lt;
• > Se representa con &gt;
• Siempre que se inserta texto en
HTML hay que tener en cuenta
que si se escriben varios
espacios en blanco seguidos
solamente se mostrará uno en el
navegador.
• Para conseguir que se muestren
varios espacios en blanco
seguidos puede sustituirse cada
uno de ellos por &nbsp;.

3. Otros caracteres especiales

4. Ejemplo
&iexcl;Bienvenidos, esta es mi&nbsp;&nbsp;&nbsp;1&ordf;&nbsp;&nbsp;&nbsp;p&aacute;gina!
Habría que escribir:
Por ejemplo, para insertar el texto:
¡Bienvenidos, esta es mi 1ª página!

5. Los comentarios
• En ocasiones podemos
desear añadir comentarios
aclaratorios dentro del
código, de manera que no
sean visualizados en el
navegador, pero sí a la hora
de editar el documento.
• Para insertar comentarios
dentro del código, basta
con insertar el texto entre
<!-- y //-->.
• Todo el código que se
inserte entre estos
símbolos no será
visualizado en los
navegadores.
<!-- A continuación aparecerá una línea de texto//-->
&iexcl;Bienvenidos, esta es mi 1&ordf; p&aacute;gina!
Habría que escribir:
¡Bienvenidos, esta es mi 1ª página!
Por ejemplo, para insertar el texto siguiente con un
comentario:

6. Alineación del texto
• Los párrafos delimitados
por etiquetas <p> pueden
ser fácilmente justificados
a la izquierda, centro o
derecha especificando
dicha justificación en el
interior de la etiqueta por
medio de un atributo
align.
• Un atributo no es más que
un parámetro incluido en
el interior de la etiqueta
que ayuda a definir el
funcionamiento de la
etiqueta de una forma
más personal.
Para justificar a la derecha:
<p align="right">Texto alineado a la derecha</p>
Para alinear al centro:
<p align="center">Texto alineado al centro</p>
Para introducir un texto alineado a la izquierda escribiríamos:
<p align="left">Texto alineado a la izquierda</p>

7. El atributo “align”
• En cada caso el atributo align toma determinados valores que son
escritos entre comillas.
• En algunas ocasiones necesitamos especificar algunos atributos para
el correcto funcionamiento de la etiqueta. En otros casos, el propio
navegador toma un valor definido por defecto.
• Para el caso de align, el valor por defecto es left (alinear a la
izquierda)
• El atributo align no es exclusivo de la etiqueta <p>. Tambien se usa en
otras etiquetas.

8. La etiqueta DIV:
• La etiqueta <div> se emplea para definir un
bloque de contenido o sección de la página, para
poder aplicarle diferentes estilos e incluso para
realizar operaciones sobre ese bloque específico.
• Imaginemos un texto relativamente largo donde
todos los párrafos están alineados a la izquierda
(por ejemplo). Una forma de simplificar nuestro
código y de evitar introducir continuamente el
atributo align sobre cada una de nuestras
etiquetas es utilizando la etiqueta <div>.
• Esta etiqueta por si sola no sirve para nada. Tiene
que estar acompañada del atributo align y lo que
nos permite es alinear cualquier elemento
(párrafo o imagen) de la manera que nosotros
deseemos.

9. Ejercicio práctico 1:
•2 Párrafos centrados
•3 Párrafos alineados a la derecha
•1 salto de línea triple
•1 párrafo alineado a la izquierda
•3 líneas divisorias horizontales
Construir un
documento
HTML que
contenga los
siguientes
elementos:

10. Los encabezados HTML
Las etiquetas de encabezado, o
comúnmente conocidas como
"cabeceras HTML" (Heading Tag
en inglés) son etiquetas HTML
que se usan para definir la
cabecera o título de una página.
Las cabeceras se definen con
<Hn> donde n es un número
entre 1 y 6 que determina el
orden de la cabecera.
<h1>Nivel 1 Texto muy grande</h1>
<h2>Nivel 2 Texto grande</h2>
<h3>Nivel 3 Texto algo más grande de lo normal</h3>
<h4>Nivel 4 Texto normal</h4>
<h5>Nivel 5 Texto pequeño</h5>
<h6>Nivel 6 Texto muy pequeño</h6>

11. Otras etiquetas de formato de Texto en HTML
Existen más etiquetas que
permiten dar formato al texto,
para ver su funcionamiento debes
agregarlas a un documento HTML.

12. Ejercicio práctico 2:
<H1>Tim Berners-Lee</H1>
<DIV style="color: #040; font-style: italic">
<P>Timothy "Tim" John Berners-Lee es un científico de la
computación británico, conocido por ser el padre de la Web.
Estableció la primera comunicación entre un cliente y un
servidor usando el protocolo HTTP en noviembre de 1989.</P>
<P>En octubre de 1994 fundó el Consorcio de la World Wide
Web (W3C) con sede en el MIT, para supervisar y estandarizar
el desarrollo de las tecnologías sobre las que se fundamenta la
Web y que permiten el funcionamiento de Internet.</P>
</DIV>
Escribe y
prueba el
siguiente
código
HTML

13. La clase ha
terminado,
gracias por
su asistencia.
SalomonAquino77@gmail.com