HTML Conceptos básicos
World Wide Web El servicio World Wide Web también conocido como WWW o simplemente Web, es un sistema de información distribuido por Internet basado en la tecnología hipertexto/hipermedia que proporciona una interfaz común a los distintos formatos de datos (texto, grafico, video, audio, etc.) y a los servicios de Internet existentes. Todos esto hace que el Servicio Web sea el más utilizado
Documento hipertexto Es un texto en que cualquier palabra puede ser especificada como enlace a otros documentos que contienen más información sobre dicha palabra, por lo que la lectura del documento hipertexto no es secuencial o lineal, sino que se puede acceder a la información que nos interese desde otros conceptos relacionados y de esta forma avanzar de documento en documento hasta encontrar la información deseada.
Documento hipermedia Es un hipertexto pero que no incluye solo información textual sino también información hipermedia (gráficos, video, sonido)
HTML (Lenguaje de marcas hipertexto) Es un lenguaje muy sencillo que permite describir documentos hipertexto. La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc.), así como los diferentes efectos que se quieren dar a los elementos insertados.
¿Por dónde comenzar? 1. Utilizar programas creados para desarrollo de páginas WEB, entre los que podemos citar: Microsoft Front Page Dreamweaber Microsoft Internet Assistant Microsoft Office 97 2. Utilizar un editor de texto y crear nuestro propio código, el mismo que ya no contendría código basura. (Bloc de Notas)
ETIQUETA Una etiqueta cumple su función de la siguiente manera: <nombre de la etiqueta> Apertura de una etiqueta siempre entre “< >” texto/gráfico/etiquetas A la cual se aplica la etiqueta </nombre de la etiqueta Cierra de la etiqueta siempre entre “</ >”
Partes de un documento html Un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales: El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de índole informativo como por ejemplo el titulo de nuestra página. El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.
Estructura de un documento html <html> <head> Etiquetas y contenidos del encabezado Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo, palabras clave,... </head> <body> Etiquetas y contenidos del cuerpo Parte del documento que será mostrada por el navegador: Texto e imágenes </body> </html> Cabecera Cuerpo
Ejemplo 1: <html> <head> </head> <body> Bienvenidos al curso de PPW </body> </html>
Etiqueta: <title> </title> Esta etiqueta va en la parte del encabezamiento de la página web, es decir en el HEAD, y define en su contenido el título de la página web, mismo que aparecerá en la parte superior izquierda de la pantalla de su navegador. Ejemplo 2: <html> <head> <title>Curso de PPW</title> </head> <body> Bienvenidos al curso de PPW </body> </html>
Etiqueta <body> </body> Todo el texto, las imágenes y el formato visibles al usuario deben encontrarse entre las etiquetas <body>...</body>. Esta etiqueta cuenta con los siguientes atributos: Bgcolor define el color de fondo de la página Text define el color del texto de la página Link define el color de los vínculos en la página Alink define el color del vínculo actual o activado en la página Vlink define el color del vínculo ya visitado Background define el archivo gráfico que será desplegado como fondo Bgsound define el archivo de audio que se tocará en la página. Bgproperties define el movimiento vertical del fondo. Los atributos se incluyen en la etiqueta de apertura, separados por un espacio.
¿Cómo se utilizan los colores en HTML? Se pueden llegar a tener 16 millones de colores en una página web. Existen dos formas para aplicar colores a una página web: 1. Se especifica el color deseado directamente con el nombre del color en ingles: Ej: blue,green, yellow 2. Se especifica el color deseado mediante números hexadecimales mediante la siguiente estructura: #RRVVAA El color tiene un signo de numeral # antecediendo a los 6 números. Existen dos números para cada color principal: rojo, verde y azul. Cada uno de los números varía hexadecimalmente {0,1,2....,9,A,B,...F}.
Ejemplos de colores #RRVVAA Color #FFFFFF #000000 #FF0000 #00FF00 Blanco Negro Rojo Verde Azul Magenta Cyan #FFFF00 #70DB93 #000080 #FF7F00 #A62A2A #C0C0C0 #4F2F4F Amarillo Agua Marino Azul Marino Coral Café Plomo Violeta
Ejemplo 3: <html> <head> <title>Curso de HTML</title> </head> <body bgcolor=”#C0D9D9” text=”#000000”> Bienvenidos al curso de PPW </body> </html>
Etiqueta <br> La etiqueta <br> instruye al navegador cliente que inserte un salto de línea en un documento HTML. La etiqueta <BR> tiene el mismo efecto que un retorno de carro en una máquina de escribir. Es una etiqueta especial, pues no precisa de etiqueta de cierre.
Etiqueta <hr> La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineada automáticamente, con una apariencia de tercera dimensión. Esta etiqueta especial, por que no necesita de cierre, tiene los siguientes atributos: Align establece que la regla se alinee a la izquierda, centro o derecha LEFT,CENTER o RIGHT NOSHADE quita el sombreado predeterminado de la regla WIDTH permite especificar el ancho de la regla (en pixeles o porcentaje) SIZE permite especificar el alto de la regla (en pixeles)
Ejemplo 4: <html> <head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000"> Bienvenidos al curso de HTML<br> <hr align=center width=50%><br> Cuando la temperatura es menor a 15°c hace bastante frío.<br> <hr align=left width=25% size=5><br> Este es un ejemplo de página WEB :)<br> </body> </html>
encabezados Las etiquetas <h1> </h1> al <h6> </h6> (acrónimos de “heading 1..6”) son encabezados del cuerpo del texto. El encabezamiento <h1> nos proporciona las letras de mayor tamaño. Notará que si usamos una etiqueta de encabezamiento, automáticamente se incluirá un retorno de carro al final del mismo. La etiqueta tiene el siguiente atributo: Align Permite ubicar el encabezamiento a la izquierda, centro o derecha de la pantalla (LEFT, CENTER,RIGHT)
Ejemplo 5: <html> <head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000"> <h1 align="center"> Bienvenidos al curso de HTML </h1><br> <hr align=center width=50%><br> <h2>Bienvenidos</h2> Cuando la temperatura es menor a 15°c hace bastante frío.<br> <hr align=left width=25% size=5><br> Este es un ejemplo de página WEB :)<br> </body> </html>
EJEMPLO 6 <html> <head> <title>Ejercicio con imagenes</title> </head> <body bgcolor="#C0D9D9" text="#000000"> <CENTER> <H1> Imágenes </H1> </CENTER> <H2> En este ejercicio se muestran los diferentes usos de imágenes en una pagina Web <br> <h3> Insertar una imágen </h3> <br> <h3> Modificar el tamaño de una imágen </h3><br> <h3> Poner bordes a una imágen </h3> <br> <h3> Alinear el texto a una imágen </h3> <br> <h3> Imágen con texto alternativo</h3> <br> <h3> Usar imágenes como enlace </h3> <br> </body> </html>
<IMG SRC=“imagen2.gif”> Etiqueta img Se utiliza para la inclusión de imágenes Utilizando el siguiente formato: <IMG SRC=“imagen.jpg”></IMG> Ejemplo: <IMG SRC=“imagen2.gif”>
aJUSTar tamaño de imagen Si no se especifica ningún atributo las imágenes aparecerán en su tamaño original Para modificar el tamaño de las imágenes se utilizan los modificadores en la etiqueta <IMG>: WIDTH: Especifica el ancho de la imagen HEIGTH: Especifica el alto de la imagen Ejemplo: <IMG SRC=“imagen2.gif” width=100 height=80>
Aplicar bordes a una imagen Mediante el modificador BORDER se pueden añadir bordes a las imágenes. Ejemplo: <IMG SRC=“imagen2.gif” Border="3">
Alineacion de texto a la imagen Se realiza mediante el modificador ALIGN Los valores pueden ser: TOP, TEXTOP, CENTER, ABSCENTER, MIDDLE, BOTTOM, LEFT, RIGTH Ejemplo: <IMG SRC=“imagen2.gif” ALING=TOP>
USO DE IMÁGENES COMO ENLACES Para utilizar una imagen como enlace a otra parte de la página o a una página externa hay que introducirlas dentro de la referencia <A HREF> de la siguiente manera: <A HREF=“enlace”><IMG SRC=imagen”></A> Ejemplo: <A HREF="http://www.google.com"><IMG SRC=“imagen2.gif”> </A>
Imágenes con texto alternativo Cuando no se puede mostrar una imagen se puede mostrar un te|xto donde se indique que se puede encontrar en la imagen Ejemplo: <IMG SRC=“imagen2.gif” ALT=“descripcion">
Imágenes como fondo de un documento Para poder establecer una imagen como fondo de una página Web, se hace a través del atributo BACKGROUND dentro de la etiqueta BODY Ejemplo: <body background="imagen1.jpg“>
Enlaces locales <html> <head> <title> Ejercicio Enlaces Locales </title> </head> <body> <h2> Enlaces locales </h2> <h3> <A name=“indice”> Indice </A> </h3> <ul> <li><A href=“#uno”> Seccion uno </A> <li><A href=“#dos”> Seccion dos </A> <li><A href=“#tres”> Seccion tres </A> </ul> <h3> <A name=“uno”> Seccion uno </A> </H3> <p> Esta es la sección 1 de la pagina de enlaces locales </p> <p> Click aqui para <A href=“#indice”> volver al indice </A> <h3> <A name=“dos”> Seccion dos </A> </H3> <p> Esta es la sección 2 de la pagina de enlaces locales </p> <h3> <A name=“tres”> Seccion tres </A> </H3> <p> Esta es la sección 3 de la pagina de enlaces locales </p> </body> </html>
Enlaces a otras paginas <html> <head> <title> Ejercicio Enlaces a otras páginas</title> </head> <body> <h1> Enlaces a otras páginas </h1> <h2> Referencias relativas </h2> <p> Se puede referenciar a un archivo localizado en el mismo directorio, como por ejemplo, al <A href=“ejemplo6.html”> Imágenes</A> <h2> Referencias absolutas </h2> <h3> Algunos servicios Web de correo de busqueda</h3> <p> La <A href=“http://www.google.com”> Buscador de Google </A> que permite el acceso a la localizacion de informacion de cualquier tipo </p> </body> </html>
Enlaces a una zona de otra pagina <html> <head> <title> Enlaces a zonas de otras páginas </title> </head> <body> <h1> Enlaces a zonas de otras paginas </h1> <p> Enlazamos a la <A href="ejemplo6.html#tres"> la sección 3 del ejemplo 6 </A>. </P> </body> </html>