Informática aplicada a la Traducciónmural.uv.es/vigonan/PáginasWeb.pdf · 2007-11-08 · 1....

Páginas Web

1. PARTE TEÓRICAConceptos fundamentalesComponentes de HTML

2. PARTE PRÁCTICAEtiquetas HTMLElementosAtributosEntidadesListasTablasGráficosEnlacesColoresCSS

Parte teórica

Páginas Web y Enlaces

Página Web► Sinónimo de documento HTML► Simples ficheros de texto con extensión propia► Tiene la extensión *.html o *.htm► Un conjunto de páginas web forman un sitio web► Puede contener texto, gráficos, formularios,

archivos de audio y video, aplicaciones interactivas (p.e. juegos) etc.

Enlace (Link)► Enlaza una página web con otra mediante un URL

Navegador (Browser)

Navegadores más comunes: InternetExplorer, Mozilla Firefox, Opera► interpretan las etiquetas de y las utilizan para representar contenido en la pantalla► Cada navegador interpreta el código HTML a su manera=> aspecto diferente de la misma página web dependiendo del navegador

Servidor web y HTTP

(Web-)Server / Host► Ordenador en el que se guardan las páginas web

y los archivos necesarios y que está conectado permanentemente a Internet

► Se puede acceder a ese contenido mediante un Web-Client (Navegador) a través del Protocolo HTTP

Protocolo HTTP (Hypertext Transfer Protocol)► Posibilita la comunicación e interacción entre el

navegador y el servidor► Controla cómo los navegadores solicitan páginas

web y cómo los servidores han de reaccionar ante tales solicitudes.

¿Qué es HTML?

HTML► Hypertext Markup Language► Lenguaje de marcación, no es un lenguaje de

programación► Funcionalidad: estructurar y cohesionar textos,

gráficos y cualquier otro tipo de información► Se caracteriza por una sintaxis y unas reglas

determinadas

Código fuente / Source-Code► Instrucciones en HTML que son interpretadas

por el navegador, que las convierte en una página web con el aspecto deseado.

Hipertexto e Hipermedia

Documento hipertexto. Es un texto con enlaces a otros textos. Estos enlaces pueden referenciar a partes del mismo documento o a otro diferente.HTML. El HyperText Markup Language es el lenguaje en el que se escriben los hipertextos.

Etiquetas <> </>Hipermedia. Es un generalización del hipertexto. Cualquier medio con enlaces a otros medios, donde podemos entender como medio:

- textos, imágenes, sonidos, animaciones, realidad virtual... Página Web. Un documento hipermediacodificado en HTML

Página interpretada

Código fuente

Componentes de HTML

Elementos► Se componen de “etiquetas” (tags) predefinidas

que especifican los elementos de una página web: <html></html>, <body></body>, <img>, <br>

Atributos► Determinan características adicionales de un

elemento, p.e. <img src="bild.jpg">, <a href=“mipagina.htm">

Entidades► Representan símbolos no incluidos en el código

ASCII, p.e. el símbolo €, letras con diéresis o la ßalemana

Etiquetas

Elementos► Un elemento está formado por una o dos

etiquetasPara descripción de contenido, p.e. títulos, párrafos, tablas► Se utiliza un par de etiquetas, que consisten en

Etiqueta Inicio <tag> (“Abrir”) yEtiqueta de fin </tag> (“Cerrar“)

Para añadir, p.e. gráficos, enlaces, saltos de línea► Se utiliza una sola etiqueta<tag>

Etiquetas

Una etiqueta de inicio o una etiqueta sola se compone de

► el símbolo “menor que” <► el nombre de la etiqueta, p.e. html► el símbolo “mayor que“ >

<html>Una etiqueta de fin se compone de► el símbolo “menor que” <► una barra (“Slash”) /► el nombre de la etiqueta, p.e. html► el símbolo “mayor que“ >

</html>

Atributos

Atributos

► Modifican o amplían las características de un elemento/etiqueta

► Pueden ser obligatorios u opcionales► Cada etiqueta tiene unos atributos asignados; (casi) todos

los elementos HTML tienen más de un atributo► Los valores asignados son en parte predefinidos y en parte

determinados por el usuario► Los valores de los atributos se ponen entre comillas “ “p.e.: <a href="http://www.uv.es/laurapo"> (valor

determinado por el usuario) o<p align="center"> (valor predefinido)

Entidades

Entidades► Símbolos no incluidos en el código ASCII (€, ä ö

ü, ß etc.) se escriben como cadenas especiales de caracteres (entidades)

► El navegador interpreta estas entidades y las sustituye por el símbolo correspondiente,

p.e. € -> €&szlig -> ß&Ouml -> Ö

EspeficicaciónHTML: Versión 4.01► Determina qué elementos y atributos pueden utilizarse y combinarse► Con versiones anteriores de HTML no sólo se estructuraba, sino que

también se determinaba el formato► Debido a los límites de formato se desarrolló un nuevo lenguaje de

formateoCSS (Cascading Style Sheets)

Estándares HTML► HTML Transitional: contempla elementos de formato anteriores► HTML Strict: no contiene ningún elemento de formateo, sino que es

necesario el uso de CSS► HTML Frameset: contiene “Marcos”, es decir, la posibilidad de que se

pueda ver más de una página web en una ventana del navegador

¿Cómo crear una página Web?

► Editor WYSIWYG (“What You See Is What You Get”)+ Podemos ver el resultado final (aproximado) mientras estamos haciendo la página+ Nos ahorra gran parte del trabajo de picar el texto y ofrece una gran cantidad de herramientas- El usuario no tiene el conocimiento suficiente de HTML para resolver posibles problemas del código

► Editor simple (p.e. Windows Editor/Notepad)+ Disponible en cualquier PC con Windows+ Ayuda a comprender el mecanismo de creación de páginas Web, por lo que se recomienda empezar así antes de trabajar con un editor WYSIWYG+ Mayor control sobre el resultado final- Se ha de introducir a mano cada línea, lo que puede llegar a ser muy pesado si la página es muy grande

► Editor de HTML (p.e. PSPad)+ Hay muchos editores gratuitos que se pueden descargar de Internet+ Permite ver de forma inmediata una vista previa de la página+ Actúan como gestores de contenido al poderse crear proyectos de páginas web+ Hay una marcación en color de las etiquetas, para que la programación sea más sencilla

Los pilares de una página en HTML

<html><head>

<title>Mi primera página de Internet </title></head><body>Mis primeros pasos en la creación de Webs. ¿Cómo acabará esto?</body>

</html>

<html><head>

<title>Mi primera página de Internet </title></head><body>Mis primeros pasos en la creación de Webs. ¿Cómo acabará esto?</body>

</html>

► <html>…</html> define el documento como documento HTML► <head>…</head> es la cabecera del documento HTML. Aquí se

inclye, entre otros elementos, el título, que luego aparece en la barra de título del navegador

► <body>…</body> comprende el contenido de la página

Anidación de etiquetas<html>

<head><title>Mi primera página de Internet </title>

</head><body>Mis primeros pasos en la creación de Webs. ¿Cómo acabará esto?</body>

</html>

► Las parejas de etiquetas pueden “anidarse” (estructura en capas)

► Las etiquetas abiertas se han de cerrar en orden inverso ►p.e. <tag1><tag2>Texto</tag2></tag1>

!!!Y no <tag1><tag2>Text</tag1></tag2> !!!

Parte práctica

Etiquetas HTML

Algunas etiquetas importantes (Estructura)

► <br> fuerza un salto de línea (=> como si pulsáramos la tecla Enter)

► <i>Texto</i> formatea el texto en cursiva► <b>Texto</b> formatea el texto en negrita► <u>Texto</u> subraya el texto

Cuidado: Por regla general, sólo se subrayan los links (y esto lo hace de forma automática el navegador) => No recomendable, pues puede confundir al usuario

► <p>Párrafo</p> define un párrafo► <h1-6>Título</h1-6> indica que el texto tiene un

nivel de título 6

Entidades

Acentos► É É í í etc.► à à ò ò etc.► î î Û Û etc.Otros símbolos:► < < > > & &► € €► Fuerza espacio: ► Ü => Ü ü => ü etc.► ß => ß

Listas

Listas sin ordenar (“unordered list“)► Con viñetas► <ul> Principio de lista► <li>Elemento de lista</li>► </ul> Final de listaListas ordenadas (“ordered list“)► Con numeración► <ol> Principio de lista► <li>Elemento de lista</li>► </ol> Final de lista

Atributos

Listas sin ordenar► El atributo type define el tipo de símbolo de viñeta

Círculo relleno: <ul type="disc"> (valor predeterminado)Cuadrado relleno: <ul type="square">Círculo vacío: <ul type="circle">

Alineación de contenidos► Muchos elementos de HTML tienen un atributo align,

p.e. <p> o <h1-6>► align suele tener estos valores:

left (valor predeterminado) para alinear a la izquierdacenter para centrarright para alinear a la derechaP.e. <p align="right"> o <h3 align="center">

Tablas

Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla.Es necesario insertar las etiquetas <tr> y </tr>por cada una de las filas de la tabla Es necesario insertar las etiquetas <td> y </td>por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habráque insertar esas etiquetas entre las etiquetas <tr> y </tr>.

Tablas

<table border="1"><tr>

<td>Sabado</td><td>Domingo</td>

</tr><tr>

<td>Curso HTML</td><td>Curso Dreamweaver</td>

</tr><tr>

<td>Curso Frontpage</td><td>Curso Flash</td>

</tr></table>

Otras etiquetas y atributos HTML

Citas en bloque► <blockquote>Contenido</blockquote>► se utiliza para citas largas y sirve para destacarlas► el texto entre etiquetas se alinea a la izquierda con una sangría

Barras horizontales► <hr> sirve para destacar de forma óptica áreas determinadas► sólo puede ponerse en una línea separada► hay cuatro atributos para crear una barra

width para el ancho, en píxels o con porcentajesize para la altura, en píxelsalign para la alineación de la barranoshade para hacer desaparece el sombreado

<hr width="50%" size="3" align="center" noshade>

EnlacesEnlaces a páginas Web► <a href=“URL de destino" target=“Ubicación de

destino">Enlace</a>► Atributos:

href contiene el URL de destino (obligatorio)target determina la ubicación dónde se mostrará la página websolicitada, p.e. en la página actual (_self) o en una nueva ventana (_blank) <a href="http://www.uv.es" target="_blank">Universitat</a>

Diferencia entre enlaces relativos y absolutos► Un enlace absoluto se compone de un URL completo,

p.e. <a href=http://www.uv.es>Universitat</a>, es decir, enlaza con otro sitio web

► Los enlaces relativos enlazan páginas web del mismo sitio<a href="fotos.html" target="_self">Mis Fotos</a>

En este ejemplo, el archivo fotos.html se encuentra en la misma carpeta que la página web desde la que lo estamos llamando

GráficosFormatos adecuadosGIF (Graphics Interchange Format; Extensión: *.gif)► + Menor tamaño => se carga antes► + Puede representar animaciones► + Transparencia► - Representa cómo máximo 256 colores► Apropiado para imágenes sencillas (Cliparts, iconos, formas etc.)JPEG (Joint Photographic Experts Group; Extensión: *.jpg / *.jpeg)► + Representa 16,7 millones de colores► + Diferentes niveles de compresión para regular el tamaño del

archivo (influencia en la calidad)► - No puede representar ni animaciones ni transparencias► - Los archivos son más grandes => mayor tiempo de carga► Apropiado para fotos

Insertar Gráficos

Añadir un gráfico► <img src="URL" width=“Ancho" height=“Altura">► Atributos:

src para indicar el URL o ruta de la imagen (obligatorio)width y height definen las medidas de la imagen y reservan un lugar en la representación gráfica (en píxeles)alt determina un texto alternativo que se mostrará si la imagen no puede encontrarse o mostrarsealign determina la alineación relativa al texto circundante

p.e. <img src="london2005.jpg" width="100" height="50" alt=“Londres" align="left">

► Otros atributos:hspace y vspace determinan la distancia entre la imagen y otros contenidos como texto (en píxeles)border determina el marco (en píxeles)

Colores

Métodos para determinar el color► Nombres predefinidos de colores,

p.e. black, white, red, green, o blue

(apenas se utilizan)► Códigos hexadecimales, p.e.

#000000, #FFFFFF, #FF0000,#008000 o #0000FF

CSS: Cascading Style Sheets

CSS► Se utilizan para el formatear la estructura HTML► Permiten un control más exhaustivo del diseño web► Tiene una sintaxis determinada► Puede utilizarse dentro del mismo documento HTML o en un

documento separado con la extensión *.css► Las pueden interpretar todo los navegadores actuales

Principios básicos de la sintaxis CSS► Reglas de estilo: selector {propiedad: valor}► Selector es el elemento que se va a modificar, p.e. <p>► Propiedad: valor corresponde al par atributo-valor y le dota al

selector de unas características determinadas► Todas las instrucciones para un selector se escriben entre claves {…}► Puede escribirse un número indeterminado de instrucciones separadas

por punto y coma ;

Sintaxis de CSSCSS en un documento HTML► Se incluye en el encabezado del documento► Las reglas de estilo se incluyen en el elemento <style>

<head><title>CSS</title><style type="text/css">

body {background-color: #FF0000}h2 {

font-family: Arial, Verdana;font-size: 17pt;}

</style></head>

Sintaxis de CSSAlgunas particularidades de CSS para el color y las fuentes► color: generalmente, en código hexadecimal► font-family define el tipo de fuente, p.e. Arial► font-size define el tamaño de la fuente, en píxeles (px) o

puntos (pt)► font-style para áreas en cursiva (italic)► font-weight para áreas en negrita (bold)► background-color determina un color de fondo determinadoEjemplo:

body {background-color: #FF0000}h2 {

font-family: Arial, Verdana;font-size: 17pt;

}

Sintaxis de CSS

Clases de estilo► se utilizan cuando sólo se quiere modificar instancias

determinadas de un elemento HTML

Ejemplo:p {font-size: 10pt}p.firma {font-style: italic}

► Anteriormente se habrá definido en HTML con el atributo class, p.e.

<p class=“firma">Ejemplo</p>

► Las clases de estilo no es necesario que estén asociadas a ningún elemento espefícico

.aviso {color: #FF0000}

Hojas de estilo externasHojas de estilo externas

► Las reglas de estilo se encuentran en un archivo separado (extensión *.css)

► Se incluyen en el documento HTML con la etiqueta <link>► Ventaja: Se pueden utilizar para más de un archivo HTML<head><title>Incluir una CSS </title><link rel="stylesheet" type="text/css"

href="styles.css"></head>

Ejemplo de styles.css:h2 {

font-family: Arial, Verdana;}

Checklist para HTML¿He cerrado todas las etiquetas que había abierto?¿He anidado correctamente las etiquetas?¿Están todos los atributos entre comillas?¿Tiene mi documento HTML una estructura válida?

(<html>, <head><title> usw.)¿Los símbolos están codificados como entidades?¿Los elementos y los valores correspondientes que he añadido a una etiqueta, pueden utilizarse en ese elemento? ¿He utilizado sólo etiquetas que pueden interpretar los navegadores estándares?

Reglas de oro para la creación de páginas web

Conocer muchas etiquetas HTML no significa tener que utilizarlas todasEsto es válido también para colores y fuentes: la legibilidad y la estética tienen prioridad!Coloca fotos de forma sensata: ¡el tamaño de la página se ha de mantener en tiempos de carga razonables! Compara, antes de publicar la página, el aspecto de tu página en diferentes navegadores.Escribe el código de forma estructurada y ordenadaSeñala los enlaces de forma clara (con color o subrayados)Utiliza un título claro y contundente para tu página

Informática aplicada a la Traducciónmural.uv.es/vigonan/PáginasWeb.pdf · 2007-11-08 · 1....

Documents

Transcript of Informática aplicada a la Traducciónmural.uv.es/vigonan/PáginasWeb.pdf · 2007-11-08 · 1....