Dentro de la página Web que tendrán que confeccionar se debe poner información sobre 2 de los temas que el profesor eligió en clase la última semana de clase.
Estos temas son:
Robótica
Alimentos transgénicos
Nanobots
Calentamiento global
Energías no convencionales
El trabajo consiste en crear una página Web con 2 links sobre los temas ya elegidos, y 2 tablas (o 3 dependiendo de cuantos temas eligieron) las cuales contendran la información sobre el tema
Debe hacerse en un block de notas…
Más abajo va información sobre como trabajar con páginas Web y los tipos de comandos que hay.
Guía de Etiquetas Html
Conceptos Previos
HTML (HyperText Markup Language) lenguaje muy sencillo que permite presentar texto de forma estructurada y agradable, también permite mostrar imágenes, y otros objetos multimediales que revisaremos más adelante.
Los objetos que se presentan en una página Web se estructuran por medio de etiquetas (tags, en inglés), que definen el efecto que se desea. Las etiquetas están formadas por códigos que se delimitan con los signos <>, y con la barra / cuando se trata de la de cierre. Por ejemplo:
Un documento HTML comienza con la etiqueta , y termina con . Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas: el encabezamiento, delimitado por y , que sirve para definir diversos valores válidos en todo el documento; y el cuerpo, delimitado por y , donde reside la información del documento.
La única utilidad del encabezamiento en la que nos detendremos es la directiva
El cuerpo de un documento HTML contiene el texto que, con la presentación y los efectos que se decidan, se presentará en el navegador. Dentro del cuerpo son aplicables todos los efectos que se van a mencionar en el resto de esta guía. Dichos efectos se especifican exclusivamente a través de etiquetas. Esto quiere decir que los espacios, tabulaciones y retornos de carro que se introduzcan en el fichero fuente no tienen ningún efecto a la hora de la presentación final del documento. Por ejemplo, escribiendo:
Estas
palabras
forman una
frase.
Producimos exactamente lo mismo que con:
Estas palabras forman una frase.
En resumen, la estructura básica de un documento HTML queda de la forma siguiente:
Texto del documento, menciones a gráficos, enlaces, etc.
Incluir Texto en una Web
Para incluir texto en una página basta teclear éste entre las etiquetas y ; sin embargo, podemos hacer uso de etiquetas para mejorar la apariencia de la información. Las etiquetas que se utilizan con mayor frecuencia para dar formato al texto son:
| Etiquetas | Función |
| | Texto en negrilla |
| | Texto en itálica |
| | Texto subrayado |
| | Etiqueta de párrafo (no lleva etiqueta de termino, es análoga al Enter en Word) |
| | Etiqueta para introducir saltos de línea (no lleva etiqueta de termino.) |
| | Etiqueta para introducir sangría |
| | Fuente |
La etiqueta Font tiene atributos que se usan para, por ejemplo: Cambiar color al texto, cambiar el tipo de letra o el tamaño. Los atributos que permiten hacer modificaciones sobre la tipografía se incluyen en la etiqueta ; a continuación mostramos los atributos de esta etiqueta.
| Atributo | Función |
| FACE="x" | Para definir el tipo de letra |
| COLOR="x" | Color de la fuente |
| SIZE="x" | Tamaño de la letra. |
Ejemplo:
Este es un texto sin algún tipo de formato
Cambia la letra a Arial, el tamaño a 4 y el color a azul.
Para poner TÍTULOS
Mucha importancia
Mucha importancia
Menos importancia
Menos importancia
Mucha menos importancia
Mucha menos importancia
Para hacer link a otras páginas
El uso de link permite enlazar diferentes páginas, ya sean de un mismo sitio, o bien, hacia otro lado en Internet. A los link que se encuentran en un mismo sitio se le llaman absolutos, los que se encuentran fuera de éste se llaman relativos.
La etiqueta para hacer los enlaces o link es la siguiente:
Y tiene varios atributos, entre ellos HREF y TARGET.
HREF
El texto que se pone en el atributo href es el nombre del documento al cual nos queremos enlazar. La información que se desplegará en pantalla para indicar a dónde irá el link se escribe entre las dos etiquetas.
Eduteca
Cuando una página es muy larga podemos crear enlaces entre ella misma, para ello es necesario utilizar dos link. El primero indica la palabra a la cual saltará el texto y la segunda sirve para identificar dicha palabra como un "ancla".
También existen link hacia una dirección de email.
TARGET
El atributo target se utiliza para indicar la ventana en la cual se desplegará el contenido del link que se ha activado.
| Atributo | Función |
| TARGET="_blank" | se desplegará en una ventana nueva |
| TARGET="_Parent" | se desplegará en la ventana original |
| TARGET="_self" | se desplegará en la misma ventana que estamos utilizando |
| TARGET="_top" | se desplegará en una ventana superior |
| TARGET="nombre_de_frame" | se desplegará en la ventana indicada (se utiliza cuando empleamos frames) |
Las Imágenes
Las páginas en Internet intentan ser llamativas visualmente y para lograrlo es necesario introducir imágenes y combinar éstas con la información que se desea dar al usuario.
La etiqueta para insertar imágenes en un documento es:
| Etiqueta | Función |
|
| Insertar imágenes |
Las imágenes trabajan de manera similar a los link, de modo que si no hacemos la referencia correcta, es decir no escribimos bien el nombre y/o su extensión, además de la ruta; la imagen no aparecerá. Al insertar una imagen, es importante escribir el nombre de la misma exactamente igual que como aparece en el archivo, de lo contrario no será posible verla; así mismo, se recomienda que el nombre de las imágenes estén en minúsculas y que no contengan acentos o caracteres especiales ya que los sistemas Unix tienen problemas al leer estos datos.
Algunos de los atributos de las imágenes son:
| Atributo | Función |
| WIDTH="X" | Ancho de la imagen. |
| HEIGHT="X" | Altura de la imagen. |
| ALIGN="X" | Alineamiento de la imagen. |
Los primeros dos atributos pueden expresarse en pixeles o en el porcentaje de espacio que ocupará la imagen en la pantalla. El atributo ALIGN alineará el objeto, ya sea al centro, a la derecha o a la izquierda
Ejemplo:
Las imágenes acompañadas de texto alterno son una buena elección en la forma de presentar información. Para ello podemos alinear el texto en un extremo de la pantalla y la imagen en el lado contrario.
El atributo ALIGN tiene tres opciones: top, middle y bottom (arriba, abajo y enmedio, respectivamente).
Importante
Algunas consideraciones y consejos para insertar imágenes en una página son:
Los formatos más utilizados son el JPEG y GIF aunque existe tambien el PNG.
Los formatos gif soportan 256 colores mientras que los JPEG soportan 16.5 millones de colores.
No hay comentarios:
Publicar un comentario