HTML es un lenguaje que se utiliza para la creación de páginas en la WWW(Internet). Por página entenderemos el documento que aparece en el visualizador(Internet Explorer).HTML se compone de una serie de comandos, que son interpretados por el visualizador.
HTML Significa HYPER TEXT MARKUP LANGUJE
QUE SE REQUIERE PARA CREAR UNA PAGINA WEB
- Un editor de texto, El Bloc de Notas: aqui se escriben todos los comando html para ejecutar en la página Web
- Un navegador de Internet: con este se explora o se visualiza la pagina Web creada
CARACTERÍSTICAS GENERALES DEL LENGUAJE
Marcas y atributos
HTML se estructura utilizando marcas o etiquetas o comandos
La forma general de una marca es la de un comando HTML encerrado entre dos signos de menor y mayor:
<marca [atributos]> ............. ........[</marca>]
<marca atrib1=“valor1” atrib2=“valor2”.........>
Las marcas se pueden anidar o encadenar una a continuación de otra, de forma que se pueden aplicar simultáneamente varias propiedades a una misma porción de documento.
<marca1><marca2> texto</marca2></marca1>
CUATRO NORMAS FUNDAMENTALES A TENER EN CUENTA
- Una página Web es un archivo de texto
- No reconoce mayúsculas y minúsculas
- No importa las tabulaciones y saltos de paginas
- Caracteres especiales
ESTRUCTURA DE UN PROGRAMA HTML
Un documento HTML, no es más que el texto definido entre las marcas:
<HTML>
.....................
</HTML>
Un documento HTML siempre se compone de las siguientes 2 partes:
<HTML>
<HEAD> Cabecera del documento
</HEAD>
<BODY> Contenido del documento
</BODY>
</HTML>
PARA GUARDAR: se hace con la siguiente secuencia
Archivo, Guardar, Seleccionar la ubicación, Tipo archivo, Seleccionar Todos los archivos, colocar un Nombre al archivo con extensión html (un punto y la sigla html) , Guardar
COMANDOS BÁSICOS DE HTML
Títulos de encabezamiento H#
HTML dispone de seis cabeceras, o tipos de letra predefinidos de distinto tamaño, que se utilizan para marcar los títulos o resaltes en las páginas. Se activan con el comando <Hn> y se desactivan con </Hn>, donde n es un número de 1 a 6. siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1.
<H1>Nivel de encabezado 1</H1>
<H2>Nivel de encabezado 2</H2>
<H3>Nivel de encabezado 3</H3>
<H4>Nivel de encabezado 4</H4>
<H5>Nivel de encabezado 5</H5>
<H6>Nivel de encabezado 6</H6>
Definición de párrafos: P
La marca <P> sirve para separar párrafos en HTML. Además de introducir un retorno de carro, fuerza un segundo retorno de carro para dejar una línea en blanco entre un párrafo y el siguiente. De esta manera los párrafos quedan más espaciados y el texto se vuelve más legible
En esta marca la etiqueta de fin es opcional.
Por defecto, el párrafo de un documento HTML está justificado a la izquierda. Pero podemos modificar la alineación horizontal de un párrafo mediante el atributo ALIGN de la marca <P>, que puede tomar los valores siguientes.
· LEFT: el párrafo es justificado a la izquierda. Valor por defecto.
· CENTER: el párrafo es centrado.
· RIGHT: el párrafo es justificado a la derecha
Rupturas de líneas BR
La marca <BR> introduce un salto de línea en el punto del documento en el que es colocada. Es equivalente al punto y aparte de un texto normal.
Esta marca es vacía de manera que no necesita de la etiqueta de fin de marca.
Estilos
Las marcas de estilo de texto especifican el tipo de letra (negrita, cursiva, ..), tamaño, color que se desea que aparezca el texto.
<B>Negrita (Bold)</B>
<I>Cursiva (Italic)</I>
<BLINK>Parpadeante (Blink)</BLINK>
<TT>Tamaño fijo (TypeWriter)</TT>
<EM>énfasis (Emphasis)</EM>
<STRONG>Gran énfasis (Strong)</STRONG>
<U>Subrayado (Underline)</U>
Para modificar el tamaño se utiliza el atributo SIZE de la marca <FONT>, de la manera siguiente:
<FONT SIZE="tamaño">Texto</FONT>
El comando <FONT> requiere la etiqueta de cierre.
HTML define siete tamaños de letra distintos, siendo el tamaño 3 el que se adopta por defecto. Sin embargo, la mayoría de los navegadores permiten establecer cuál es la correspondencia real del tamaño 3. Así, se puede hacer que el tamaño 3 corresponda a una fuente Arial de 16, o a una Times de 8.
Existen dos formas de establecer el tamaño de un trozo de texto.
· Tamaño de texto absoluto.
<FONT SIZE=”argumento”>Texto</FONT>
donde argumento es un número entre 1 y 7
· Tamaño de letra relativos.
<FONT SIZE=”argumento”>Texto</FONT>
donde argumento es una cadena de caracteres que nos indica, con un signo + ó -, el número de veces que esa fuente va ser
mayor o menor que el tamaño de la fuente por defecto
Colores del texto.
Para dar color a un texto se utiliza el comando siguiente:
<FONT COLOR="color">Texto</FONT>
Para dar color a todo el texto del documento podemos hacerlo con:
<BODY TEXT=“blue”>
Para especificar el color de fondo del documento deberemos utilizar:
<BODY BGCOLOR=“yellow”>
Listas ordenadas: OL.
También llamadas listas numeradas.
La marca para crear una lista ordenada es <OL> .... </OL>. Son obligatorias las etiquetas de comienzo y fin de estas marcas.
Cada elemento de la lista ordenada se identifica escribiéndolo dentro de la marca <LI> .... </LI>. La etiqueta de fin puede ser omitida.
Es posible especificar el tipo de numeración que se dará (números arábigos, números romanos, letras, etc.), por defecto se sigue la numeración árabe.
Listas desordenadas: UL.
También llamadas listas no numeradas o viñetas
La forma de especificar una lista desordenada es mediante la marca <UL>. Las etiquetas de comienzo y fin de esta marca son obligatorias.
Texto preformateado PRE
Coloca el texto tal como se lo digitamos
<PRE>texto preformatedo tal como esta escrito en esta linea</PRE>
Centrar texto
Para centrar una parte del documento, se delimita lo que se desea centrar mediante el comando <CENTER> ... </CENTER>.
líneas horizontales HR
La marca <HR> permite trazar una líneas horizontales para separar distintas secciones de una página HTML.
Enlaces A
Permite ir dentro del documento de una sección a otra o a una dirección Internet o a otra página propia.
<A HREF=”dirección”>Texto del enlace</A>
donde:
· dirección: es el destino del enlace.
· texto del enlace: es el texto indicativo del enlace que aparece en la pantalla normalmente con color especial y subrayado.
<A> requiere de la marca de fin.
Enlace a una zona de otra pagina
Para este tipo de enlaces se utiliza una mezcla de las dos formas anteriores. Se indica el URL de la página a referenciar, luego un signo # y luego el nombre de la zona a referenciar.
Imágenes
La etiqueta que se utiliza para la inclusión de imágenes en una página Web es la siguiente:
<IMG SRC=”imagen.jpg”></IMG>
donde imagen.jpg es un archivo de imagen
Tamaño de las imágenes.
Si no especificamos nada más, las imágenes aparecerán en el navegador con el tamaño que tienen originalmente.
Para modificar el tamaño de las imágenes se utilizan los siguientes modificadores en la etiqueta <IMG>:
· WIDTH: especifica la anchura en pixels de la imagen.
· HEIGTH: especifica el número de pixels que tendrá de alto la imagen.
Bordes de la imagen.
Mediante el modificador BORDER se puede añadir bordes a nuestras imágenes.
Alineación de texto con las imágenes.
La alineación del texto con las imágenes se realiza mediante el modificador ALIGN. Los valores que este modificador puede tomar son: TOP, TEXTOP, CENTER, ABSCENTER, MIDDLE, ABSMIDDLE, BOTTOM, LEFT, y RIGTH.
Además podemos especificar la distancia que queremos establecer entre el gráfico y el texto. Si este parámetro no se establece, el texto es situado justo a continuación de la imagen. Para introducir espacios horizontales y verticales a continuación de la imagen se utilizan los modificadores VSPACE y HSPACE.
Imágenes con texto alternativo.
<IMG SRC="nombre_imagen" ALT="Texto_alternativo">
Tablas
Una tabla en HTML se entiende como un conjunto de filas (fila=horizontal), apiladas una sobre otra. Cada fila contiene a su vez un conjunto de celdas, puestas una al lado de la otra.
Una tabla se declara usando el comando <TABLE> ... </TABLE>. Dentro de la tabla, se usa <TR>.. </TR>para indicar una fila y dentro de una fila, <TD> ... </TD> para delimitar el contenido de una celda. El elemento de cierre de fila y de celda es optativo.
Ejercicio
· Digitar <TABLE>
<TR><TD>Celda A1</TD><TD>Celda B1</TD><TD>Celda C1</TD></TR>
<TR><TD>Celda A2</TD><TD>Celda B2</TD><TD>Celda C2</TD></TR>
<TR><TD>Celda A3</TD><TD>Celda B3</TD><TD>Celda C3</TD></TR>
</TABLE>
· Guardar
· Visualizar con el Explorador
Para colocarle nombre a la tabla
<TABLE>
<CAPTION> Nombre de la tabla </CAPTION>
</TABLE>
Para cambiar el ancho del borde
<TABLE BORDER="1">
……….
</TABLE>
Para cambiar el ancho de la tabla
<TABLE WIDTH="anchura"> ……… </TABLE>
Por defecto, la tabla quedará justificada a la izquierda. La forma de centrarla es mediante la etiqueta <CENTER>.
· CELLPADDING: establece la distancia mínima en pixels entre los bordes de cada celda y el texto que va encerrado en ellas. Su valor por defecto es 1.
· CELLSPACING: establece la anchura en pixels de los bordes de cada celda.
Justificación del texto de las celdas.
HTML permite justificar horizontal y verticalmente el texto dentro de cada celda. Para ello implementa los modificadores ALIGN y VALIGN dentro de la etiqueta <TD>. La forma de hacerlo es:
<TABLE>
<TR>
<TD ALIGN=”horizontal” VALIGN=”vertical”>
…..
</TD>
</TR>
……….
</TABLE>
donde:
· horizontal puede tomar los valores CENTER, LEFT y RIGHT. Por defecto vale LEFT.
vertical: puede tomar los valores TOP, MIDDLE, BOTTOM, y BASELINE. Por defecto vale CENTER
Color de cada celda.
Para especificar el color de cada celda de la tabla se utiliza el modificador BGCOLOR en la etiqueta <TD>. Como formato de colores se acepta el hexadecimal o una cadena de caracteres.
