Diferencia entre revisiones de «DAO»
| Línea 16: | Línea 16: | ||
La estructura de las etiquetas es: | La estructura de las etiquetas es: | ||
<nowiki><nombre_etiqueta> etiqueta de entrada </nombre_etiqueta> etiqueta de cierre</nowiki> | <nowiki><nombre_etiqueta> etiqueta de entrada</nowiki> | ||
<nowiki></nombre_etiqueta> etiqueta de cierre</nowiki> | |||
Las etiquetas pueden tener '''atributos '''(detalles a aplicar en las etiquetas). Aparecen en las etiquetas de apertura con la siguiente estructura: | Las etiquetas pueden tener '''atributos '''(detalles a aplicar en las etiquetas). Aparecen en las etiquetas de apertura con la siguiente estructura: | ||
'''<nowiki><nombre_etiqueta tipo de atributo = "valor del atributo">.</nowiki>''' | '''<nowiki><nombre_etiqueta tipo de atributo = "valor del atributo">.</nowiki>''' | ||
Si hay más de un atributo, se utilizan espacios entre los atributos. | Si hay más de un atributo, se utilizan espacios entre los atributos. | ||
Revisión del 18:33 23 ene 2013
¿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
- Crear una carpeta dentro de nuestra carpeta de DAO, denominada html_2_bachb_nombre
- Abrir el bloc de notas (Menú Inicio /Programas /Accesorios)
- Escribir en el bloc de notas el documento HTML
- 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).
- 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:
- Abrir la pagina con el navegador correspondiente (Internet Explorer por ejemplo).
- Abrir el documento desde el Explorador de Windows con el Block de Notas.
- Dentro del bloc de notas podremos realizar las oportunas modificaciones.
- Guardamos los cambios efectuados mediante el menú Archivo / Guardar.
- Cerramos el bloc de notas, si no queremos seguir modificando el documento.
- 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:
<Hl>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 </Hl>
<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="centerl1>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="RIGHTri>Aquí vá un segundo párrafo alineado a la derecha.
</BODY>
</HTML>
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>
