DAO

De Portfolio Academico

¿Qué es el HTML?

Para publicar información y distribuirla globalmente, se necesita un lenguaje entendido universalmente, una especie de lengua franca de publicación que todas las computadoras puedan comprender potencialmente. El lenguaje de publicación usado por la World Wide Web es el HTML (acrónimo de HyperText Markup Language, Lenguaje para el Formato de Documentos de Hipertexto). El HTML es un lenguaje descriptivo ("esto es un titular"', "aquí va una imagen"...). No es un lenguaje de programación.

El HTML da a los autores las herramientas para:

  • Publicar documentos en línea con encabezados, textos, tablas, listas, fotos, etc.
  • Obtener información en línea a través de vínculos de hipertexto.
  • Diseñar formularios para realizar transacciones con servicios remotos, para buscar información, hacer reservas, pedir productos, etc.
  • Incluir hojas de cálculo, videoclips, sonidos, y otras aplicaciones directamente en sus documentos.

El lenguaje HTML

Un documento HTML es un fichero de texto en el que se incluye el texto que se desea mostrar por pantalla. Además de este texto hay que introducir ciertas instrucciones o comandos, también denominadas etiquetas, que indicarán al navegador cómo se debe visualizar el documento en pantalla.

La estructura de las etiquetas es:

<nombre_etiqueta> etiqueta de entrada
</nombre_etiqueta> etiqueta de cierre

Las etiquetas pueden tener atributos (detalles a aplicar en las etiquetas). Aparecen en las etiquetas de apertura con la siguiente estructura:
<nombre_etiqueta tipo de atributo = "valor del atributo">.
Si hay más de un atributo, se utilizan espacios entre los atributos.

Estructura básica de un documento HTML

Aquí tenemos un ejemplo de un documento HTML sencillo:

<HTML>
<HEAD>
<TITLE>Mi primer documento HTML</TITLE>
</HEAD>
<BODY>
¡Hola mundo!
</BODY>
</HTML>

Todo documento HTML está dividido en una serie de bloques que forman su estructura:

  • <HTML> y </HTML> indica que el texto contenido entre estas dos etiquetas está escrito en lenguaje HTML.
  • <HEAD> y </HEAD> información del documento que no se muestra, suele contener el título de la página Web, que visualizará la barra de título del navegador.
  • <BODY> y </BODY> definen la parte principal o el cuerpo del documento, que se mostrará en la ventana del navegador.

La estructura básica del documento HTML queda de esta manera:

<HTML>
<HEAD>
<TITLE> Título de la página. El elemento TITLE no se considera parte del flujo de texto. Debería ser mostrado, por ejemplo, como el encabezado de la página o como el título de la ventana. Se requiere exactamente un título por documento.</TITLE>
</HEAD>
<BODY>
[Aquí van las etiquetas que visualizan la página]
</BODY>
</HTML>

Como crear un documento HTML

  1. Crear una carpeta dentro de nuestra carpeta de DAO, denominada html_2_bachb_nombre
  2. Abrir el bloc de notas (Menú Inicio /Programas /Accesorios)
  3. Escribir en el bloc de notas el documento HTML
  4. Guardar el documento anterior (Menú Archivo /Guardar como) en la carpeta creada anteriormente, teniendo en cuenta estos asuntos:
    • El nombre del documento tiene que tener la extension .htm o mejor .html (p.ej: primera_pagina_web.html).
    • En tipo de archivo: todos los archivos.
    • En codificación, elegir UTF-8 (para poder trabajar texto en distintos idiomas sin problemas).
  5. Para abrir la página web creada basta con ir a la carpeta creada y hacer doble clic sobre el fichero PaginaWeb

Ejemplo:

<HTML>
<HEAD>
<TITLE> Mi primera página Web </TITLE>
</HEAD>
<BODY>
Hola. Soy xxxx y ésta es mi primera página web.
¡Bienvenidos al mund@!
</BODY>
</HTML>

Modificar una página web anteriormente creada

Para modificar una página web:

  1. Abrir la pagina con el navegador correspondiente (Internet Explorer por ejemplo).
  2. Abrir el documento desde el Explorador de Windows con el Block de Notas.
  3. Dentro del bloc de notas podremos realizar las oportunas modificaciones.
  4. Guardamos los cambios efectuados mediante el menú Archivo / Guardar.
  5. Cerramos el bloc de notas, si no queremos seguir modificando el documento.
  6. Dentro del navegador: activar el menú Ver y elegir la opción Actualizar o pulsar F5 o el botón correspondiente.

El texto en HTML

El lenguaje HTML marca de manera concisa la categoría del texto escrito gracias a las etiquetas de título, que establecen secciones en el texto. Veamos algunas de estas etiquetas de título.

Encabezados

Se utiliza para destacar un texto. Existen seis niveles de encabezados, descritos por las siguientes etiquetas:

'''<H1>'''Encabezado de Tamaño 1'''</H1>''' Encabezado de mayor tamaño

'''<H2>'''Encabezado de Tamaño 2'''</H2>'''

'''<H3>'''Encabezado de Tamaño 3'''</H3>'''

'''<H4>'''Encabezado de Tamaño 4'''</H4>'''

'''<H5>'''Encabezado de Tamaño 5'''</H5>'''

'''<H6>'''Encabezado de Tamaño 6'''</H6>''' Encabezado de menor tamaño

Atributos:

ALIGN=left/center/right: Definen el alineamiento del encabezado. Por defecto es left.

Ejemplos: Hay que poner esto dentro del BODY o cuerpo del documento HTML

<H1 ALIGN = “center”> Encabezado de mayor tamaño, alineado al centro </H1>

<H6 ALIGN = “right”> Encabezado de menor tamaño, alineado a la derecha </H6>

Párrafos

La separación entre párrafos (dejando una línea en blanco) la conseguimos colocando la etiqueta <P> al inicio de cada uno. Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla, veremos que éste se acomoda a ella, sin considerar los retornos del carro en el documento fuente.

Atributos:

ALIGN=left/center/right/justify: Definen el alineamiento del párrafo. Por defecto es left.

Nota: Con los párrafos no es necesario colocar la etiqueta de final de párrafo </P>

Ejemplo:

<HTML>
<HEAD>
<TITLE>Mi página web - 2</TITLE>
</HEAD>
<BODY>
<H1 align="center">Mi segunda página</Hl>
<P>Esta es una página muy sencilla. Estoy probando con las etiquetas de título para organizar bien el texto que escribo.
<P ALIGN="RIGHT">Aquí va un segundo párrafo alineado a la derecha.
</BODY>
</HTML>

Crear líneas horizontales

Para crear líneas horizontales debemos utilizar ¡a etiqueta <HR>

Al igual que con los párrafos, no es necesario poner la etiqueta de fin de línea </HR>


Ejemplo:

<HTML>
<HEAD>
<TITLE>Mi página web - 3</TITLE>
</HEAD>
<BODY>
<H1 align="center">Mi tercera página</H1>
<P> A continuación aparecerá una línea horizontal
<HR>
 </BODY>
</HTML>

Formato físico

El texto formateado de esta manera se verá igual en todos los navegadores. Recuerda que HTML se encarga de la estructura del contenido, no del aspecto.

<pre> </pre> sirve para dar formato al párrafo (para que aparezca respetando los intros y espacios escritos).

<br> </br> introduce línea en blanco, salto de línea.

<em> énfasis. Suele verse en cursiva.

<strong> énfasis más fuerte. Sueie verse en negrita.

<B>[Texto]</B> Texto en negrita. No se aconseja.

<I>[Texto]</l> Texto en cursiva. No se aconseja.

<U>[Texto]</U> Texto Subrayado.

<STRIKE>[Texto]</STRIKE> Texto tachado.

<TT>[Texto]</TT> Texto tipo máquina de escribir y con tamaño menor.

<SUB>[Texto]</SUB> Texto como Subíndice.

<SUP>[Texto]</SUP> Texto como Superíndice.

Imágenes

La etiqueta <img> inserta imágenes en línea, importantes para el contenido, no sólo como decoración.

Los tres tipos de imágenes que soportan una página Web son:

  • Imágenes GIF (soportan hasta 256 colores), utilizado para dibujos, gráficos,...
  • Imágenes JPEG/JPG (más de 256 colores y degradados), utilizado principalmente para fotografías.
  • Imágenes PNG. Sustitutivo de GIF. Más sofisticado. No es soportado por algunas versiones dé los navegadores.

Estos formatos de imagen utilizan algoritmos de compresión que permiten reducir significativamente el tamaño de la imagen a comparación de otros formatos gráficos, lo que permite una carga más rápida.

Un aspecto muy importante a tener en cuenta, es el tamaño de las imágenes, pues una imagen grande supone un archivo grande, y esto puede resultar en un tiempo excesivo de carga, con el consiguiente riesgo de que quien esté intentando cargar nuestra página se canse de esperar, y desista de ello.

Para tener una imagen en nuestra página hay que cumplir 2 requisitos:

  1. Tener guardada la imagen en una carpeta de nombre "images" que esté guardada en la misma carpeta donde esté nuestra página.
  2. Incluir la etiqueta siguiente dentro del BODY de nuestra página web: <IMG SRC="images/foto.gif"> (caso de llamarse nuestra imagen "foto" y ser de tipo GIF)

Atributos:

  • SRC: indica la ubicación de ¡a imagen y su nombre.
  • ALT: es el texto alternativo a la imagen (descripción -una palabra o una frase breve- indicativa de la imagen, que aparece cuando el puntero del ratón se posiciona dentro de la imagen o durante el proceso de carga de la imagen). Si la imagen no se llegara a ver en algún navegador, figuraría el texto alternativo.

<IMG SRC=" images/foto.gif" ALT="descripción">

  • ALIGN: se puede elegir la posición de la imagen con respecto al texto:

<IMG SRC="images/foto.gif" ALIGN="TOP"> Texto alineado arriba

<IMG SRC="¡mages/foto.gif" ALIGN="MIDDLE"> Texto alineado en medio

<IMG SRC="¡mages/foto.gif" ALIGN="BOTTOM"> Texto alineado abajo <IMG SRC="¡mages/foto.gif" ALIGN="RIGHT"> Texto alineado a la derecha

<IMG SRC="images/foto.gif" ALIGN="LEFT"> Texto alineado izquierda

  • WIDTH y HEIGHT: se especifica la anchura y altura en píxeles con las que se va a mostrar la imagen. Es muy importante que figuren ios atributos de anchura y altura, porque eso permite al navegador que reserve un espacio para la imagen y continúe cargando e¡ resto de la página aunque no haya recibido completamente la imagen. No sirve para modificar-escalar el tamaño de la imagen, esto habrá que editarlo anteriormente en Photoshop.

Nota: Para poder saber el alto y ancho en píxeles de una imagen hay que pulsar el botón derecho sobre el archivo de imagen y elegir Propiedades.

Ejemplo:

<IMG SRC="images/foto.jpg" WIDTH="28" HEIGHT=”25" ALlGN="center" ALT="marca de aviso"> .

Otras cosas

Ejemplo de fondo por css puro

<html> <head> <title>La cocina sana y natural</title> <style type="text/css"> body {background-image: url (images/fondo.jpg); background-color:#e3e3e3}</style> </head> <body> <h1>Cocina sana</h1> <img src="images/ANIMA.gif" width="106" heigth="146"> <h2><img src="images/PRIMEROS.gif" width="196" heigth="26" alt="Primeros platos"></h2> <P>En esta sección encontrará una larga lista con entrantes, ensaladas y otras posibilidades. Todas con una gran presentacion para impresionar a sus invitados. <h2><img src="images/SEGUNDOS.gif" width="196" heigth="26" alt="Segundos platos"></h2> <P>Es la hora del plato fuerte: carnes, pescados, mariscos, etc. <P>Cocine de forma sana, sin demasiadas grasas, pero con todo el sabor tradicional. <h2><img src="images/POSTRES.gif" width="196" heigth="26" alt="Postres"></h2> <p>Los postres no tienen porque ser siempre dulces. Compruebe como disfrutar de la fruta y de los frutos secos desde otra persperctiva. Se sorprenderá... <h2><img src="images/SECRETOS.gif" width="254" heigth="26" alt="Los secretos de la abuela"></h2> <p>No se los diga a nadie... Los secretos son secretos y la abuela puede enfadarse si sabe que se los he contado. </body> </html>

Obtenido de «https://inigo.sendino.org/academico/index.php?title=DAO&oldid=1417»