PÁRRAFOS Y ESPACIO EN BLANCO

HTML (Hyper Text Markup Language) es un lenguaje de programación sencillo pensado para
presentar información en la red, es decir, crear páginas WEB.
Las etiquetas son fragmentos de texto que permiten la definición de las distintas instrucciones de
HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje
Una etiqueta será un texto incluido entre los símbolos menor que<y mayor que>, el texto incluido
dentro de los símbolos será explicativo de la utilidad de la etiqueta. Pueden presentar modificadores que
llamaremos atributos, que permitirán definir diferentes posibilidades de la instrucción HTML, la mayoría de
las etiquetas deben de cerrarse.
La estructura básica de un documento HTML es:
<html>
<head>
<title>
Encabezado
</title>
</head>
<body>
Cuerpo del programa
</body>
</html>
1



<p> nuevo párrafo dejando una línea en blanco.
<br> nuevo párrafo sin dejar línea en blanco.
  deja un espacio en blanco, no es una etiqueta sino el carácter de espacio en blanco.



Son utilizados para resaltar palabras o frases.
Hay 6 tamaños de encabezados, el más grande es <h1></h1> y el más pequeño es <h6></h6>
Si quieres alinear el encabezado se utiliza el atributo align con la opción left(izquierda), center (centro)
right (derecha) o justify (justificado).
o <h1> encabezado grande </h1>
o <h1 align=center> encabezado grande alineado al centro </h1>


Para colocar el título de la ventana se utiliza la etiqueta <title></title>
La etiqueta debe de escribirse dentro del encabezado <head></head>

Las líneas son horizontales y pueden tener atributos de color, align(alineación), noshade (no muestra la
sombra), width(ancho) en % o pixeles y size (grosor) en pixeles.
Se utiliza la etiqueta <hr>
o <hr>
 Dibuja una línea horizontal de lado a lado de la página.
o <hr color=red align=left width=50% size=20>
 Línea en color rojo, alineación a la izquierda, ancho de 50%, grosor de 20 pixeles.


Los estilos más conocidos son con las siguientes etiquetas
o
o
o
o
o
o
o
o
<b> letra negrita </b>
<i> letra cursiva o itálica </i>
<u> letra subrayada </u>
<s> letra tachada </s>
<tt> letra tipo mecanografiado, es decir, tipo máquina de escribir </tt>
<sub> letra tipo subíndice </sub>
<sup> letra tipo superíndice </sup>
<blink> letra tipo parpadeo </blink>
2
La etiqueta que permite modificar la fuente es <font></font> y presenta atributos que nos permiten modificar el color del
texto, face que es la fuente, size que va desde 1 hasta 7, por defecto el tamaño es 3.
 <font color=blueface=”arial” size=1> color azul, fuente arial y tamaño 1 </font>
Para alinear el texto se utiliza la etiqueta <p></p> con el atributo de align.
 <p align=left> texto a la izquierda </p>
 <p align=center> texto al centro </p>
 <center> texto al centro </center>
 <p align=right> texto a la derecha </p>
 <p align=justify> texto justificado </p>
Se pueden aplicar dos tipos de fondo, el primero es de un solo color y se escribe en inglés o código hexadecimal, el
segundo es con una imagen, las imágenes soportadas son .jpg y .gif. La imagen debe estar guarda en la misma carpeta.
 <bodybgcolor=color>
 <body background= “nombredelarchivo.ext”</body>
Si se quiere colocar una imagen de fondo que sea estático, dentro de la etiqueta <head></head> se coloca el siguiente
codigo:
 <style type="text/css">
body {background:url('SOL.jpg') fixed;}
</style>
Ya completo queda así:

<html>
<head>
<title>FONDO</title>
<style type="text/css">
body {background:url('SOL.jpg') fixed;}
</style>
</head>
<body>
</body>
</html>
3
La inserción de una imagen dentro de la página WEB es mediante la etiqueta <img src…>

<img src=”nombredelarchivo.ext” alt=”nombrealternativo” align=”alineación” border=”#” width=”ancho” height=”alto”>

<img src="02.jpg" alt=”Puente de Francia” align=”right” border=”3” width=”300”>
o
o
o
o
o
o
img src: es el nombre de la imagen con su extensión.
alt: letrero que aparecerá al pasar el puntero del mouse sobre la imagen.
align: permite alinear la imagen solo a la izquierda o derecha. Para alinear al centro utilizar etiqueta
<center></center>: <center><img src=”01.jpg”></center>
border: es un número que determina el ancho del borde alrededor de la imagen.
width: ancho de la imagen.
height: alto de la imagen.
4
Los enlaces o hipervínculos son losque nos permiten movernos dentro de la página, ir a otra de nuestras páginas, ir
a una página cualquiera de Internet, mandar un mail o descargar archivos, los enlaces tiene las siguientes formas:
Enlace a la misma página:
 <a href=#”nombre_marcador” title="comentario">texto o imagen</a>
 <a name=#”nombre_marcador”>texto</a>
enlace a otra página de mi sitio:
 <a href=”nombre_pagina.html” title="comentario">texto_imagen</a>
enlace a otra página de internet:
 <a href=”url” title="comentario">texto_imagen</a>
enlace para un correo:
 <a href=mailto:dirección_correo title="comentario">texto o imagen</a>
enlace para bajar un archivo a tu computadora:
 <a href=”nombre_archivo.ext” title="comentario">texto o imagen</a>
Las tablas son cuadriculas que permiten la representación de datos por columnas y filas como por ejemplo un
horario. Las tablas se definen con la etiqueta <table> </table> , además, cuenta con atributos y se utilizan en <table>,
en <rd> o <td>.

<tr>Etiqueta para colocar filas</tr>

<td>Etiqueta para colocar columnas</td>

align alineación de la tabla en la página, por defecto es izquierda.

border tamaño del borde, por defecto es 0.

cellspacing espacio entre las celdas, por defecto es 2.

cellpadding espacio entre el borde de la celda y el contenido de esta, por defecto es 1.

width ancho de la tabla, se puede indicar con # o %, se recomienda utilizar %.

height alto de la tabla, se puede indicar con # o %, se recomienda utilizar %.

colspan indica el número de columnas que ocupará la celda actual.

rowspan Indica el número de filas que ocupará está celda en la misma fila.
5
Una lista es un párrafo estructurado que contiene una serie de elementos. Pueden darse cuatro tipos diferentes de
listas, cada uno con etiquetas distintas aunque con alguna en común.
1. Listas numeradas u ordenadas: Se engloban por las etiquetas <ol>.....</ol> y cada elemento de la lista estará
encabezado por la etiqueta <li> que puede o no llevar la etiqueta de cierre </li> ej:
<ol>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ol>
2. Listas con viñetas o sin orden: Se engloban por las etiquetas <ul>.....</ul> y cada elemento de la lista, también
estará encabezado por la etiqueta <li>, ej:
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ul>
3. Listas de glosario: Cada elemento de la lista está compuesto por un término y definición, cada una de estas
partes tiene su propia etiqueta. Estas listas se engloban con las etiquetas <dl>.....</dl>. Para el término se usa la
etiqueta <dt> y para la definición la etiqueta <dd>.
<dl>
<dt>termino 1</dt>
<dd>definicion 1</dd>
<dt>termino 2</dt>
<dd>definicion 2</dd>
<dt>termino 3</dt>
<dd>definicion 3</dd>
</dl>
4. Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria dependa de la
principal. Las etiqueta de la lista principal englobarán todo el conjunto de las listas y las etiquetas de las listas
secundarías se cerraran antes de volver a la lista principal.
<ul>
<li>uno
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ul>
</li>
<li>dos
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ul>
<li>tres</li>
</ul>
6
Hay varios atributos utilizados únicamente en listas:
atributo
valor
type
(para listas ordenadas)
1
A
a
I
i
type
(para listas no ordenadas)
Disc
Circle
Square
Efecto visual
Números arábigos (predeterminado)
Letras mayúsculas
Letras minúsculas
Números romanos (I, II, III, IV ...)
Números romanos en minúsculas
Viñeta sólida, redonda (predeterminado)
Viñeta circular
Viñeta cuadrada
7

Download Report