Html

Grupo de traballo – I.E.S. Ponteareas
Deseño de Páxinas web

Que é HTML?

• HTML = Hyper Text Markup Language
• HTML non é unha linguaxe de programación, senón de etiquetado.
• HTML emprega etiquetas para describir páxinas web.
• As etiquetas de HTML xeralmente veñen en pares, unha indicando o inicio e outra o
final: <etiqueta> texto ó que afecta </etiqueta>

Que se necesita para traballar con HTML?

Nada específico. Cun editor de texto (coma o Bloc de Notas) é suficiente.
Outros programas para edición web poden axudarnos a crear as nosas páxinas, pero
xeralmente fan máis complexa a súa edición posterior xa que o código que crean adoita ser
algo máis reiterativo.

Os programas específicos máis populares son:
• Expression Web (antes FrontPage) é un programa de pago da suite Microsoft Office.
• DreamWeaver é un programa de pago de Adobe.
• Writer da suite gratuita OpenOffice (http://es.openoffice.org/), dispoñible entre moitas
outras en castelán e galego, permite gardar os documentos como Pátinas web pero
produce un código bastante descoidado.
• KompoZer (http://kompozer.net/) é un programa gratuito sinxelo, pero só hai versión
en inglés.
• BlueFish (http://bluefish.openoffice.nl) é un programa gratuito e que ofrece recursos
incluso para deseñadores web avanzados, pero só hai versión en inglés.
• Quanta Plus (http://quanta.kdewebdev.org/) é un programa gratuito para entornos KDE
e GNOME. En inglés.
• SkEdit (http://www.skti.org/) é un programa de pago para Mac OS X. En inglés.

Exemplo de etiquetado:

<html>
<body>

<h1>Título</h1>

<p>O meu primeiro parágrafo.</p>

</body>
</html>

Gardar un arquivo

Os arquivos HTML deben ter extensión .htm ou .html
Ambas extensións cumpren a mesma función, e na actualidade non hai diferencia entre elas.
Se estás a empregar Bloc de Notas, no nome indica a extensión desexada e no tipo selecciona
"Todos os arquivos".

Deseño de páxinas web Páxina 1

Etiquetas básicas para a estructura dos parágrafos

<html> … </html> Indica o comezo e final do código HTML da nosa páxina. En xeral, serán
a primeira e a última etiqueta do código respectivamente.
<body> … </body> Indica o comezo e final do corpo da nosa páxina. Todo o contido que se
vaia a amosar directamente na pantalla estará etiquetado aquí.
<h1> … </h1> Cabeceiras ("header") de distintos niveis. Son moi útiles á hora de
ata organizar as nosas páxinas porque lles dan ós buscadores web a
<h6> … </h6> estructura da mesma.
<p> … </p> Indica cada un dos parágrafos da nosa web.
<br /> Quebra de liña sinxela ("break"), que se pode introducir dentro dun
parágrafo. Obsérvese a súa estructura diferente, xa que non hai unha
etiqueta de inicio e outra de final.
<hr /> Liña divisoria horizontal, que funciona de xeito análogo á etiqueta
anterior.
Obsérvese a estructura standard actual, aínda que moitos programas
de deseño web empregan un standard antigo.

Etiquetas de formato

<b> … </b> Negra ("bold").
<i> … </i> Cursiva ("italic").
<big> … </big> Tamaño de letra grande.
<small> … </small> Tamaño de letra pequeno.
<tt> … </tt> Formato teletipo.
<sup> … </sup> Superíndice.
<sub> … </sub> Subíndice.

Existen moitas outras etiquetas de formato, pero na maior parte dos navegadores o resultado
visual coincide cas anteriormente citadas.

Enlaces

<a href="URL"> … Cando queiramos enlazar unha páxina con outra, debemos indicar a
</a> dirección da mesma ("URL") co atributo href.
Se está no mesmo cartafol, basta con poñer o nome do arquivo (sen
olvidar a extensión, xa sexa .htm, .html ou outra).
Se está noutro cartafol, debemos indicar en cal, empregando o
símbolo "/" para entrar nun posterior e "../" para indicar que
queremos regresar a un previo.
Se está noutro servidor debe facilitarse a dirección completa
(comezando por "http://").
<a href="URL" En xeral, a nova páxina abrirase na mesma pestana do navegador.
target="destino"> … Se queremos que se abra noutra, teremos que indicar en cal.
</a> O valor "_blank" fará que de cada vez se abra nunha nova.


Imaxes

<img src="URL" /> De xeito análogo ó enlace de páxinas, ó engadir unha imaxe
debemos proporcionar a dirección da mesma.
<img src="URL" Os valores que asignemos ós atributos width e height son o ancho e
width="valor" alto cos que se amosará a imaxe. Pode indicarse en píxeles ou
height="valor" porcentaxe. Esto NON modifica o arquivo en absoluto, só o xeito en
alt="texto" /> que se ve na páxina.
Por outra banda, o texto alternativo que propoñamos en alt
amosarase cando a imaxe non poida cargarse.

Listas

<ol> … </ol> Lista ordeada ("ordered list"). Cada un dos elementos dentro da
lista irá marcado cun número.
<ul> … </ul> Lista non ordeada ("unordered list"). Cada un dos elementos dentro
da lista irá marcado cunha viñeta.
<li> … </li> Cada un dos elementos da lista ordeada ou non ordeada.
<dl> … </dl> Lista de definicións ("definition list"). Cada un dos elementos dentro
da lista consta de dúas partes: termo a definir e definición do
mesmo.
<dt> … </dt> Termo definido ("definition term"). Debe ir dentro dunha lista de
definicións.
<dd> … </dd> Definición ("definition description"). Tamén debe ir dentro dunha
lista de definicións; xeralmente a continuación do termo definido.

Táboas

<table> … </table> Indica o comezo e final dunha táboa. Dentro deberán ir as filas e
celas correspondentes.
Os atributos máis relevantes dunha táboa son o ancho do borde
(border="valor"), o espacio entre o borde da cela e o seu contido
(cellpadding="valor") e o espacio entre celas (cellspacing="valor").
<tr> … </tr> Dentro dunha táboa, indica o comezo e final de cada fila ("table
row").
<td> … </td> Dentro de cada fila, indica o comezo e final de cada cela ("table
data").
Se se queren unir varias celas da mesma columna pode facerse co
atributo rowspan="valor", e de xeito análogo para varias celas da
misma fila con colspan="valor".
<th> … </th> Cela que funciona como cabeceira da táboa ("table header"), cun
xeito de emprego idéntico ó da etiqueta anterior.


Formularios

<form> … </form> Indica o comezo e final dun formulario. O resto de etiquetas
relativas ó mesmo irán dentro desta.
A codificación dun formulario esixe o emprego doutro tipo de
linguaxes, como pode ser PHP ou ASP.
<input type="text" Campo de texto dunha liña.
name="nome" />
<input Campo de texto dunha liña que oculta o seu contido.
type="password"
name="nome" />
<input type="radio" Cada un dos elementos a seleccionar entre un número limitado, que
name="nome" aparecerán listados cun circuliño.
value="valor" />
<input Cada un dos elementos a seleccionar entre un número limitado,
type="checkbox" puidendo realizarse unha selección múltiple, que aparecerán listados
name="nome" cunha caixiña.
value="valor" />
<input type="submit" Botón para enviar o formulario.
value="Enviar" />
<select name="nome"> Campo desplegable. Poden engadirse tantas opcións como sexan
<option value="valor"> necesarias.
… </option>
</select>
<textarea Campo de texto que permite múltiples liñas.
name="nome"> …
</textarea>

Información da páxina

<head> … </head> Encabezamento da páxina. Forma parte do código HTML, pero debe
ir fóra do corpo ("body") da páxina. Contén as etiquetas que figuran
a continuación.
<title> … </title> Define o título da páxina, que poderá verse no navegador.
<meta Descrición da web. Non é visible na páxina, pero pode ser
name="description" empregada por buscadores, servicios webs ou navegadores.
content="descrición" />
<meta Palabras clave á hora de clasificar a paxina. Deben ir separadas por
name="keywords" comas. Tampouco son visibles na propia páxina.
content="termos" />
<meta name="author" Indica o autor da web.
content="autor" />
<meta http- Codificación de caracteres por defecto. A aquí indicada é a máis
equiv="Content-Type" frecuente para as linguas da Europa occidental.
content="text/html;
charset=ISO-8859-
1" />


Símbolos especiais

O conxunto de caracteres ISO-8859-1 é o que máis frecuentemente empregado na Europa
occidental.
Este inclúe unha serie de caracteres especiais que non darán problemas sempre que a
codificación de caracteres esté indicada no encabezamento da páxina e o usuario non a
modifique no navegador.
En xeral, é recomendable indicalos como caracteres especiais empregando o código
correspondente, xa que daquelas non haberá problema en ningún caso.

" &quote; < < > >
& & ñ ñ ç ç
é é è è ê ê
ë ë ¡ ¡ ¿ ¿

A táboa anterior é un brevísimo exemplo, pero hai moitos máis caracteres especiais de uso
frecuente, ademáis de caracteres en alfabeto grego e símbolos matemáticos que tamén
contemplan este mesmo recurso á hora de empregarse nunha web.
Véxase unha lista completa en: http://www.w3schools.com/tags/ref_entities.asp


Que é CSS?

• CSS = Cascading Style Sheets
• CSS define o xeito en que se amosan os elementos creados con HTML.
• Pode empregarse directamente sobre cada elemento, agruparse en follas de estilo
internas para toda a páxina ou como arquivos externos compartidos por varias páxinas.

Estilos con CSS nunha etiqueta

Para empregar o CSS directamente sobre un elemento, basta con engadirlle á etiqueta
correspondente o atributo style="..." onde incluiremos todos as propiedades (e os seus
respectivos valores) que queiramos, separados por un punto e coma.

<p style="text-align:center;">O meu primeiro parágrafo CENTRADO.</p>

Se o código ó que queremos aplicarlle a propiedade non se corresponde con ninguna etiqueta,
podemos empregar as xenéricas <div> … </div> e <span> … </span>.

Existen multitude de propiedades aplicables, con diferentes valores. Na táboa seguinte, os
máis empregados:

Propiedade Valores posibles Descrición
background-color Nome dun color (en inglés), Color de fondo.
valor RGB (por exemplo:
rgb(255,0,0)) ou código
hexadecimal (por exemplo:
#FF0000).
background-image url('URL_da_imaxe') Imaxe de fondo.
color Nome dun color (en inglés), Color do texto.
valor RGB (por exemplo:
rgb(255,0,0)) ou código
hexadecimal (por exemplo:
#FF0000).
text-align right, left, center, justify Aliñación horizontal do texto.
vertical-align baseline, top, middle, bottom Aliñación vertical do texto.
font-family Times, Courier, Verdana, Tipo de letra. Pode indicarse o
Arial, etc., ou serif, sans-serif, tipo concreto ou xenérico.
cursive, monospace, etc.
font-size Valor en píxeles (por exemplo, Tamaño do texto.
16px) ou proporción (1em).
font-style normal, italic Normal ou cursiva.
font-weight normal, bold Normal ou negra.
text-decoration underline, overline, line- Decoración do texto.
through, none
text-transform uppercase, lowercase, Maiúsculas, minúsculas,
capitalize versales.
text-indent Valor en píxeles (por exemplo, Sangrado da primeira liña.
10px).


Das específicos para un tipo concreto de etiquetas, merecen especial atención as relativas a
módulos "en caixa", como poden ser as táboas ou a etiqueta de sección <div> … </div>.

Propiedade Valores posibles Descrición
width Valor en píxeles (por exemplo, Ancho.
10px) ou porcentaxe (50%).
height Valor en píxeles (por exemplo, Alto.
border Ancho en píxeles (1px), tipo Características do borde.
(solid, double, dashed,
dotted) e color.
padding Valor en píxeles (por exemplo, Distancia do borde ó contido.
margin Valor en píxeles (por exemplo, Distancia do borde ós
10px) ou porcentaxe (50%). restantes elementos.

Follas de estilo con CSS

Ademáis de engadirse a unha determinada etiqueta, tamén poden crearse follas de estilo que
se apliquen a todas as etiquetas dun mesmo tipo ou a aquelas que nós indiquemos.
Para eso crearemos dentro da cabeceira da páxina un apartado adicado ó estilo.

<style type="text/css">
body {color:green;}
h1 {text-decoration:underline;}
</style>

Esto permite planificar dun xeito cómodo (e sinxelo de editar!) os aspectos de estilo xerais da
páxina, cunha certa independencia do contido.

Asimesmo, podemos identificar unha etiqueta concreta (mediante o atributo id="nome") ou
reunir varias delas que desexamos que compartan sempre o mesmo estilo (mediante o
atributo span="nome") e indicar as propiedades que desexamos aplicarlles.
Para eso, debemos referirnos ás primeiras coa referencia #nome, e ás segundas coa referencia
.nome na nosa folla de estilo. Este segundo caso, en particular, evitaranos a tarefa de asignar
repetitivamente o mesmo estilo.

<html>
<head>
<style type="text/css">
#taboa {font-weight:bold;}
.tipo1 {background-color:lightblue; color:black;}
.tipo2 {background-color:black; color:lightblue;}
</style>
</head>
<body>
<table id="taboa">
<tr><td class="tipo1">Cela 1</td><td class="tipo2">Cela 2</td></tr>
<tr><td class="tipo2">Cela 3</td><td class="tipo1">Cela 4</td></tr>
</table>
</body>
</html>


As vantaxes de aplicar un mesmo estilo a varios elementos dunha mesma páxina (e
modificalos todos dunha vez!) poden ampliarse se empregamos unha folla de estilo externa,
que nos permita ser aplicada a varias páxinas ó tempo.
Para facer eso, o único que necesitamos é colocar a folla de estilo nun arquivo externo (que
nomearemos con extensión .css). E no lugar da etiqueta <style> ... </style> teremos que
colocar agora unha indicación de onde se aloxa a nosa folla de estilo.

<link rel="stylesheet" type="text/css" href="estilo.css" />

Lista de cores

A lista de cores sorportados pola meirande parte de navegadores que poden introducirse de
xeito nominal é longuísima, pero o standar redúcese ós 16 seguintes: aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.

En calquer caso, non se limitan as posibilidades no que se refiere ás cores en RGB (máis de 16
millóns), e a meirande parte dos programas de edición de imaxes permitennos obter ese valor
nalgún ou ambos formatos aceptados por CSS.
Un listado de referencia moi completo pode atoparse en:
http://www.w3schools.com/css/css_colorsmore.asp


Html

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Html