More than Just Lines on a Map: Best Practices for U.S Bike Routes
Pablo MartíNez Portela Daniel Santomé Gallego
1. Introducción á elaboración de páxinas web.-
Pablo Martínez Portela – Daniel Santomé Gallego
Etiquetas de HTML
Marcas básicas:
<html> Todo o documento </html>
<head> Cabeceira do documento </head>
Para crear a cabeceira utilizaranse as seguintes etiquetas:
<title> Indica o título da páxina para o navegador </title>
<meta> Metainformación (descripción da páxina que facilita una mellor
identificación e indexación da mesma polos motores de búsqueda
Hai tres tipos desta etiqueta:
<meta name=”Descripción” content=”Frase descriptiva dos
contidos da páxina”>
<meta name=”Palabras clave” content=”Palabras clave que
resumen a temática dos contidos da páxina”>
<meta name=”Autor” content=”Nome do autor (ou autores) da
páxina”>
A etiqueta que segue a head é body.
<body> Contidos do documento </body>
.- </body> vai colocado xusto antes de </html>
Propiedades da páxina
A etiqueta <body> pode levar incluída información sobre as propiedades da
páxina:
<body bgcolor=” AABBCC”> define a cor do fondo da páxina.
<body text=” AABBCC”> define a cor do texto na páxina.
<body link=” AABBCC”> define a cor dos enlaces.
<body vlink=” AABBCC”> define a cor dos enlaces visitados.
<body alink=” AABBCC”> define a cor dos enlaces activos.
<body background=”imaxe.gif”> establece una imaxe para o fondo da páxina.
Todos estos parámetros pode ir agrupados nunha única etiqueta do seguinte xeito:
<body bgcolor=”AABBCC” text=” AABBCC” link=” AABBCC” vlink=” AABBCC”
alink=” AABBCC”>
.-<!--Comentarios --> Serve para anotar aclaricións do autor da páxina. O que se escribe
dentro da etiqueta é ignorado polo navegador, e non é mostrado na páxina.
1
2. Introducción á elaboración de páxinas web.-
Formato de texto
<b> … </b> ou <strong> … </strong> Letra en negrita.
<i> … </i> ou <em> … </em> Letra en cursiva.
<u> … </u> Subliñado.
<font size=”K”> …</font> Marca o tamaño dos caracteres, onde K é un valor do 1 ó 7.
<font color=”#AABBCC”>…</font> Define a cor do texto, onde AABBCC é un valor
formado por letras e números que indica a cor elixida.
<font face=”Times New Roman”>…</font> Determina o tipo de fonte que se vai
utilizar. A etiqueta <font> pode incluír ós tres parámetros:
<font size=K color=#AABBCC face=Times New Roman>…</font>
Formato de parágrafos
<p> … </p> Salto de parágrafo
<br> … </br> Salto de liña
<blockquote> … </blockquote> Sangrado
<center> … </center> Centrado de texto
<p align=left> … </p align=left> Aliña texto á esquerda
<p align=right> … </p align=right> Aliña texto á dereita
Creación de listas
Lista non numerada
<ul> Abre a lista
<li> Primeiro elemento da lista </li>
<li> Segundo elemento da lista </li>
.
.
.
<li> n elemento da lista </li>
</ul> Cerra a lista
Lista numerada
<ol> Abre a lista
<li> Primeiro elemento da lista </li>
<li> Segundo elemento da lista </li>
.
.
.
<li> n elemento da lista </li>
</ol> Cerra a lista
2
3. Introducción á elaboración de páxinas web.-
Lista de definición
<dl> Abre a lista
<dt> Termo que se vai definir </dt>
<dd> Definición do termo </dd>
</dl> Cerra a lista
Liñas horizontais separadoras
<hr> Liña horizontal
<hr width=”K%”> Ancho da liña especificado en porcentaxe
<hr width=K> Alto da liña en píxeles
<hr size=K> Alto da liña en píxeles
<hr align=center> Aliñar no centro da páxina
<hr align=left> Aliñar á esquerda da páxina
<hr align=right> Aliñar á dereita da páxina
<hr noshade> Liña sen efecto de sombra
Imaxes
<img src=”dirección da imaxe”> Indica a ruta do arquivo da imaxe
<img … border=”K”> Crea un bloque de K píxeles entorno á imaxe
<img … height=”KK” width=”AA”> Establece o tamaño da imaxe en píxeles
<img … alt=”texto explicativo”> Mostra un texto ó por o cursor sobre a imaxe
<img … align=”bottom”> Aliñar a imaxe na parte inferior do texto
<img … align=”top”> Aliñar a imaxe na parte superior do texto
<img … align=”left”> Aliña a imaxe na parte esquerda do texto
<img … align=”right”> Aliña a imaxe na parte dereita do texto
<img … hspace=K> Deixa un espacio horizontal entre a imaxe e o texto
<img … vspace=K> Deixa un espacio vertical entre a imaxe e o texto
Táboas
<table> … </table> Determina os puntos onde comeza e remata a táboa
<table width=”KK%”> Determina o ancho da táboa en tanto por cento
<table width=”KK”> Determina o ancho da táboa en píxeles
<table heigth=”KK”> Determina a altura da táboa en píxeles
<table border=”K”> Establece en píxeles o grosor do borde da táboa
<table cellspacing=”K”> Determina o espacio entre as celdas en píxeles
<table cellpadding=”K”> Determina o espacio que separa o texto dos bordes
<tr> … </tr> Marca o inicio e o final de cada unha das filas da táboa
<td> … </td> Marca o inicio e o final de cada unha das columnas dentro da fila
3
4. Introducción á elaboración de páxinas web.-
Exemplo de táboa de 2 filas e 1 columna:
<table width=quot;100%quot; height=quot;200quot; border=quot;1quot; cellspacing=quot;3quot; cellpadding=quot;5quot;>
<tr>
<td>primeira columna da fila 1</td>
</tr>
<tr>
<td>primeira columna da fila 2</td>
</tr>
</table>
<td rowspan=quot;2quot;> </td> Une dúas celdas de dúas filas adxacentes
<td colspan=quot;2quot;> </td> Une dúas celdas de dúas columnas adxacentes
Creación de enlaces
<a href=”http://...> Enunciado do enlace </a>
<a href=mailto:dirección de mail> Vínculo a una dirección de correo electrónico
<a name=”marcador”> Define un marcador (ancla, punteiro, etc) nun punto
específico da páxina para poder ser enlazado posteriormente con outro
<a href=”#marcador”> Dirixe un enlace interno ó punto onde está o marcador
<a href=”dirección páxina#marcador”> Dirixe ó enlace a un punto concreto doutra
páxina
Páxina con marcos (non leva body)
<html>
<head>
<title> Título da páxina </title>
</head>
<frameset cols=”20%, 80%”> Divide a páxina en dous marcos en forma de
columna, cada una delas co ancho correspondente á porcentaxe especificada
<frame src=quot;menu.htmquot; name=quot;navegacionquot;> Arquivo menú.htm que corresponde
ó marco da esquerda, denominado navegación, o cal ten un 20% de ancho
<frame src=quot;principal.htmquot; name=quot;contidosquot;> Arquivo principal.htm que
corresponde ó marco da dereita, denominado contidos, o cal ten un 80% de ancho
</frameset>
</html>
As páxinas tamén se poden dividir en marcos horizontais con:
<frameset rows=quot; , quot;>
frameborder=quot;NOquot; evita que se vea el borde entre los marcos
framespacing=quot;2quot; establece 2 pixels de separación entre los marcos
scrolling=quot;NOquot; evita que aparezca una barra de scroll dentro del marco
scrolling=quot;autoquot; mostrará la barra de scroll sólo si es necesario
4
5. Introducción á elaboración de páxinas web.-
Exemplo dunha páxina con tres marcos en forma de filas. A superior e a inferíos
teñen un tamaño fixo de 80 píxeles; a do centro é adaptable. Non se mostran os bordes
entre os marcos.
<frameset rows=quot;80,*,80quot; frameborder=quot;NOquot; border=quot;0quot; framespacing=quot;0quot;>
<frame src=quot;navegacion_up.htmquot; name=quot;topFramequot; scrolling=quot;NOquot;>
<frame src=quot;principal.htmquot; name=quot;mainFramequot;>
<frame src=quot; navegacion_down.htm quot; name=quot;bottomFramequot; scrolling=quot;NOquot;>
</frameset>
5
