ideas para una página webftorralbo/descargas/ideas-html.pdf · es el lenguaje...

Ideas para una página web

Francisco Torralbo

Departamento de Geometría y TopologíaUniversidad de Granada

2 de DiciembreAcción formativa y plan de mejora docente

Contenido

El lenguaje HTML¿Qué es HTML?Un vistazo rápido a la sintaxis

CSS: las hojas de estilo¿Por qué son útiles?Un vistazo a la sintaxisEl modelo de caja

Para seguir aprendiendo

El objetivo

I Nuestro objetivo es echar una rápida ojeada a loslenguajes HTML y CSS que son la base del diseño de unapágina web.

I Cuando terminemos espero que seamos capaces deadaptar una plantilla a nuestras necesidades específicas.

Pero, ¿qué es HTML?

HTML (HyperText Markup Language)

Es el lenguaje de marcado predominante para la elaboraciónde páginas web. Es usado para:

1. describir la estructura y el contenido en forma de texto,

2. complementar el texto con objetos tales como imágenes,tablas, enlaces a otros documentos,. . .

HTML se escribe en forma de etiquetas, rodeadas porcorchetes angulares (<,>).

<etiqueta>contenido</etiqueta>

Una etiqueta puede tener además atributos y valores:<etiqueta atributo1=“valor1”atributo2=“valor2”>contenido</etiqueta>

¿Cómo creo y edito un documento HTML?

I Un documento HTML es simplemente un documento detexto llano con extensión .html o .htm que podemoseditar con cualquier editor de texto.

I Vamos a aprovechar nuestro conocimiento de LATEX paraacelerar el proceso de aprendizaje.

Estructura de un documento HTMLTipo de documento

La primera línea de un archivo HTML debe definir el tipo dedocumento que se está editando.

\documentclass

article, book,. . .

DOCTYPE

Lo define la W3C (worldwide web consortion)

Para nuestros propósitos esta línea será siempre la misma:<!DOCTYPE html PUBLIC“-//W3C//DTD HTML 4.01 Strict//EN”“http://www.w3.org/TR/html4/strict.dtd”>A continuación del DOCTYPE todo el documento debe ir entrela etiqueta <html>.



\documentclass

article, book,. . .

DOCTYPE


Para nuestros propósitos esta línea será siempre la misma:<!DOCTYPE html PUBLIC“-//W3C//DTD HTML 4.01 Strict//EN”“http://www.w3.org/TR/html4/strict.dtd”>

A continuación del DOCTYPE todo el documento debe ir entrela etiqueta <html>.



\documentclass

article, book,. . .

DOCTYPE


Para nuestros propósitos esta línea será siempre la misma:<!DOCTYPE html PUBLIC“-//W3C//DTD HTML 4.01 Strict//EN”“http://www.w3.org/TR/html4/strict.dtd”>A continuación del DOCTYPE todo el documento debe ir entrela etiqueta <html>.

Estructura de un documento HTMLCabecera y cuerpo

Preámbulo

Se trata de las instruccionescomprendidas entre el\documentclass y elinicio del documento

<head>

Dentro se especificandiversas opciones deldocumento.

\begin{document}

Inicio del documento LATEXpropiamente dicho.

<body>

Dentro de esta etiquetadebe ir todo el contenido.

Estructura de un documento HTMLPlantilla

Nuestra plantilla básica para un documento HTML sería lasiguiente:<!DOCTYPE html PUBLIC“-//W3C//DTD HTML 4.01 Strict//EN”“http://www.w3.org/TR/html4/strict.dtd”><html>

<head></head><body></body>

</html>

Añadiendo información a la cabeceraEtiquetas que van dentro de <head>

<title> define el título de la página. Por lo general, el títuloaparece en la barra de título encima de la ventana.

<link> para vincular el sitio a hojas de estilo o iconos.<link rel=“stylesheet”href=“/style.css” type=“text/css”>

<style> para colocar el estilo interno de la página usandoCSS

<meta> para metadatos como la autoría, la licencia, elidioma, la codificación de caracteres, las palabrasclave. . .

<script> para agregar contenido dinámico a la páginausando el lenguaje de programación webjavascript.

Estructura de la cabecera

<head><meta http-equiv=“Content-Type”

content=“text/html; charset=iso-8859-1”>

<title>Título de la página</title><meta name=“keywords” content=“palabras

clave separadas por comas”><meta name=“description”

content=“descripción de la página”><meta name=“author” content=“Francisco

Torralbo”><link type=“text/css” rel=“stylesheet”

href=“hoja_estilo.css”><script type=“text/javascript”

src=“programa.js”></script></head>



content=“text/html; charset=iso-8859-1”><title>Título de la página</title>

<meta name=“keywords” content=“palabrasclave separadas por comas”>

<meta name=“description”content=“descripción de la página”>

<meta name=“author” content=“FranciscoTorralbo”>

<link type=“text/css” rel=“stylesheet”href=“hoja_estilo.css”>

<script type=“text/javascript”src=“programa.js”></script>

</head>



content=“text/html; charset=iso-8859-1”><title>Título de la página</title><meta name=“keywords” content=“palabras

clave separadas por comas”>

<meta name=“description”content=“descripción de la página”>




</head>





content=“descripción de la página”>




</head>






Torralbo”>



</head>







href=“hoja_estilo.css”>


</head>







href=“hoja_estilo.css”><script type=“text/javascript”

src=“programa.js”></script></head>

Dar forma al cuerpo de la páginaEtiquetas básicas

Como pusimos de manifiesto anteriormente el contenido de lapágina debe ir entre las etiquetas <body></body>.

<p>: Párrafos.<p>Esto es un párrafo.</p><p>Y este es otro párrafo.</p>

Esto es un párrafo.Y este es otro párrafo.

<br>: Salto de línea (similar a \\ en LATEX). No tiene etiquetade cierre.Esta es la primera línea.<br>Esta es otra línea del documen-to.

Esta es la primera línea.Esta es otra línea del documen-to.

<hi>, i = 1,2,3,4,5,6: Determinan las secciones en eldocumento:<h1> → Título<h2> → Sección<h3> → Subsección. . .


Como pusimos de manifiesto anteriormente el contenido de lapágina debe ir entre las etiquetas <body></body>.<p>: Párrafos.

<p>Esto es un párrafo.</p><p>Y este es otro párrafo.</p>






Como pusimos de manifiesto anteriormente el contenido de lapágina debe ir entre las etiquetas <body></body>.<p>: Párrafos.<p>Esto es un párrafo.</p><p>Y este es otro párrafo.</p>








<br>: Salto de línea (similar a \\ en LATEX). No tiene etiquetade cierre.

Esta es la primera línea.<br>Esta es otra línea del documen-to.



Dar forma al cuerpo de la páginaEtiquetas básicas II

<ul>: Listas (similar a \begin{itemize})

<ul><li>Leche</li><li>Huevos</li><li>Pan</li></ul>

I Leche

I Huevos

I Pan

<ol>: Listas numeradas (similar a \begin{enumerate})<ol><li>Leche</li><li>Huevos</li><li>Pan</li></ol>

1. Leche

2. Huevos

3. Pan


<ul>: Listas (similar a \begin{itemize})<ul><li>Leche</li><li>Huevos</li><li>Pan</li></ul>

I Leche

I Huevos

I Pan


1. Leche

2. Huevos

3. Pan



I Leche

I Huevos

I Pan

<ol>: Listas numeradas (similar a \begin{enumerate})

<ol><li>Leche</li><li>Huevos</li><li>Pan</li></ol>

1. Leche

2. Huevos

3. Pan



I Leche

I Huevos

I Pan


1. Leche

2. Huevos

3. Pan

Dar forma al cuerpo de la página<em>: Cursiva. Ejemplo: <em>Texto en cursiva</em>

<strong>: Negrita. Ejemplo: <strong>Texto encursiva</strong>

<del>: Texto tachado. Ejemplo: <del>Texto en negrita</del>

<u>: Texto subrayado. Ejemplo: <u>Texto en subrayado</u>

<dl>: Listas descriptivas (similar a \begin{description})<dl><dt>Geometría</dt><dd>Estudio de las propieda-des. . .</dd><dt>Álgebra</dt><dd>Parte de las matemáti-cas. . .</dd></dl>

Geometría Estudio de laspropiedades. . .

Álgebra Parte de lasmatemáticas. . .

<blockquote>: Citar un texto (similar a \begin{quote})





<dl>: Listas descriptivas (similar a \begin{description})

<dl><dt>Geometría</dt><dd>Estudio de las propieda-des. . .</dd><dt>Álgebra</dt><dd>Parte de las matemáti-cas. . .</dd></dl>








<dl>: Listas descriptivas (similar a \begin{description})<dl><dt>Geometría</dt><dd>Estudio de las propieda-des. . .</dd><dt>Álgebra</dt><dd>Parte de las matemáti-cas. . .</dd></dl>




Tablas

<table> <caption>Título de la tabla</caption><tr>

<td>Mes</td><td>Gasto</td>

</tr><tr>

<td>Enero</td><td>10$</td>

<tr><tr>

<td>Febrero</td><td>13$</td><tr><tr><td>Total</td><td>23$</td></tr></table>

Mes GastosEnero 10$

Febrero 13$Total 23$

Imágenes: la etiqueta <img>

Para incluir una imagen en un documento existe una etiquetaespecial: <img>. Su uso es el siguiente:

<img>

<img src=“dirección” alt=“texto alternativo”align=“top|bottom|middle|left|right”>

I No tiene etiqueta de cierreI El valor de alt se mostrará cuando no sea posible cargar la

imagenI El valor src es una dirección url

I El valor de align determina la alineación de la imagen conrespecto al texto.

I Los archivos de imagen comunmente soportados son:.jpg, .png, .gif.



<img>


I No tiene etiqueta de cierre

I El valor de alt se mostrará cuando no sea posible cargar laimagen

I El valor src es una dirección url





<img>



imagen

I El valor src es una dirección url





<img>



imagenI El valor src es una dirección url



Enlaces: la etiqueta <a>

<a>

<a href=“direccion” title=“Infoextra”>Enlace</a>

I El valor de href puede ser una dirección web (p.e.http://www.ugr.es) o bien un enlace dentro deldocumento.

I El valor de title se muestra al mantener el ratón sobre elenlace y sirve para indicar al usuario más información.

I El contenido de la etiqueta <a> puede ser texto o unaimagen.

Enlaces: la etiqueta <a>Enlaces dentro de la misma página

Para enlazar a una parte determinada de una página primerodebemos marcarla con un nombre para luego hacer referenciaa ella (compárese con \label y \ref en LATEX).

Esto se hace usando el atributo id en cualquier etiqueta.

Ejemplo:<h1 id=“inicio”>Bienvenido a mi página</h1>texto ...

<a href=“#inicio”>Volver al inicio</a>

También podemos enlazar a una sección determinada desdeotra página:<a href=“mipagina.html#inicio”>Ir a laetiqueta marcada como inicio en mi página</a>

Enlaces: la etiqueta <a>Enlaces dentro de la misma página

Para enlazar a una parte determinada de una página primerodebemos marcarla con un nombre para luego hacer referenciaa ella (compárese con \label y \ref en LATEX).Esto se hace usando el atributo id en cualquier etiqueta.

Ejemplo:<h1 id=“inicio”>Bienvenido a mi página</h1>texto ...

<a href=“#inicio”>Volver al inicio</a>

También podemos enlazar a una sección determinada desdeotra página:<a href=“mipagina.html#inicio”>Ir a laetiqueta marcada como inicio en mi página</a>

Etiquetas sin significado semántico

Existen ciertas etiquetas que, aunque no tengan contenidosemántico, nos ayudan a dar formato. Éstas son dos:

<div>

Se trata de una etiqueta que se usa para englobar partes deuna página en un mismo bloque, como puede ser un menú

<span>

Se usa principalmente para agregar un estilo a un elemento enparticular.

¿Que es una hoja de estilo?CSS (Cascade Style Sheet)

CSS es un lenguaje usado para definir la presentación de undocumento estructurado escrito en HTML o XML.La idea que se encuentra detrás del desarrollo de CSS esseparar la estructura de un documento de su presentación.

Existen tres formas aplicar las reglas de estilo:

Estilo en línea: Indicar la regla de estilo mediante el atributostyle en cualquier etiqueta.

Hoja de estilo interna: Mediante la etiqueta<style type=“text/css”rel=“stylesheet”src=“hoja_estilo.css”></style>dentro de la cabecera (<head>) del documento.

Hoja de estilo externa: Es la mejor opción y es la que vamos aexplicar aquí.



Existen tres formas aplicar las reglas de estilo:Estilo en línea: Indicar la regla de estilo mediante el atributo

style en cualquier etiqueta.

Hoja de estilo interna: Mediante la etiqueta<style type=“text/css”rel=“stylesheet”src=“hoja_estilo.css”></style>dentro de la cabecera (<head>) del documento.




Existen tres formas aplicar las reglas de estilo:Estilo en línea: Indicar la regla de estilo mediante el atributo

style en cualquier etiqueta.Hoja de estilo interna: Mediante la etiqueta

<style type=“text/css”rel=“stylesheet”src=“hoja_estilo.css”></style>dentro de la cabecera (<head>) del documento.


¿Cómo creo y edito una hoja de estilos?I Una hoja de estilo CSS es simplemente un documento de

texto llano con extensión .css que podemos editar concualquier editor de texto.

I La sintaxis básica de dicho archivo es la siguiente:etiqueta {

propiedad1:valor1;propiedad2:valor2;

}

.clase {propiedad1:valor1;propiedad2:valor2;

}

#identificador {propiedad1:valor1;propiedad2:valor2;

}

Clases e identificadores

Podemos aplicar las reglas de estilo a:

I Todas las etiquetas de un tipo determinado de nuestrodocumento.p {

margin-bottom:10px;}coloca un margen en la parte inferior de cada párrafo de unaanchura de 10px.I Un grupo de etiquetas (que pueden ser de distinto tipo)determinado. Para ello debemos marcarlas con un nombre(p.e. miclase) usando el atributo class. Por ejemplo:.miclase{

color:red;}pone el texto en rojo de cualquier etiqueta marcada con elatributo class=“miclase”


Podemos aplicar las reglas de estilo a:I Todas las etiquetas de un tipo determinado de nuestrodocumento.

p {margin-bottom:10px;

}coloca un margen en la parte inferior de cada párrafo de unaanchura de 10px.I Un grupo de etiquetas (que pueden ser de distinto tipo)determinado. Para ello debemos marcarlas con un nombre(p.e. miclase) usando el atributo class. Por ejemplo:.miclase{



Podemos aplicar las reglas de estilo a:I Todas las etiquetas de un tipo determinado de nuestrodocumento.p {

margin-bottom:10px;}coloca un margen en la parte inferior de cada párrafo de unaanchura de 10px.

I Un grupo de etiquetas (que pueden ser de distinto tipo)determinado. Para ello debemos marcarlas con un nombre(p.e. miclase) usando el atributo class. Por ejemplo:.miclase{




margin-bottom:10px;}coloca un margen en la parte inferior de cada párrafo de unaanchura de 10px.I Un grupo de etiquetas (que pueden ser de distinto tipo)determinado. Para ello debemos marcarlas con un nombre(p.e. miclase) usando el atributo class. Por ejemplo:

.miclase{color:red;

}pone el texto en rojo de cualquier etiqueta marcada con elatributo class=“miclase”



margin-bottom:10px;}coloca un margen en la parte inferior de cada párrafo de unaanchura de 10px.I Un grupo de etiquetas (que pueden ser de distinto tipo)determinado. Para ello debemos marcarlas con un nombre(p.e. miclase) usando el atributo class. Por ejemplo:.miclase{



I Una etiqueta determinada: Para ello debemos marcar laetiqueta con un identificador (que debe ser único) mediante elatributo id:

#menu {border:1px solid black;

}rodea la etiqueta marcada con el atributo id=“menu” con unmarco de color negro y 1 pixel de grosor.


I Una etiqueta determinada: Para ello debemos marcar laetiqueta con un identificador (que debe ser único) mediante elatributo id:#menu {

border:1px solid black;}rodea la etiqueta marcada con el atributo id=“menu” con unmarco de color negro y 1 pixel de grosor.

El modelo de caja en CSSTodos los elementos de una página web son cajasrectangulares

Hay dos tipos de cajas: block (insertan un salto de línea, p.e.los párrafos <p>) y inline (no insertan un salto de línea, p.e. lacursiva <em>).Las propiedades más importantes de una caja son: width(ancho), height (alto), padding (relleno), border (borde) ymargin (margen).

El modelo de caja en CSSTodos los elementos de una página web son cajasrectangularesHay dos tipos de cajas: block (insertan un salto de línea, p.e.los párrafos <p>) y inline (no insertan un salto de línea, p.e. lacursiva <em>).

Las propiedades más importantes de una caja son: width(ancho), height (alto), padding (relleno), border (borde) ymargin (margen).

El modelo de caja en CSSTodos los elementos de una página web son cajasrectangularesHay dos tipos de cajas: block (insertan un salto de línea, p.e.los párrafos <p>) y inline (no insertan un salto de línea, p.e. lacursiva <em>).Las propiedades más importantes de una caja son: width(ancho), height (alto), padding (relleno), border (borde) ymargin (margen).


La mejor forma de aprender CSS es mirando ejemplos hechospor otras personas.

Todos los navegadores permiten visualizar el código fuente deuna página web y su hoja de estilos con lo cual podemos verqué etiquetas ha usado el diseñador y qué estilo le ha aplicadopara hacer un diseño determinado (p.e. un menú,. . . ).La siguiente lista de enlaces puede servirnos para comenzar aaprender mejor estos dos lenguajes web.


La mejor forma de aprender CSS es mirando ejemplos hechospor otras personas.Todos los navegadores permiten visualizar el código fuente deuna página web y su hoja de estilos con lo cual podemos verqué etiquetas ha usado el diseñador y qué estilo le ha aplicadopara hacer un diseño determinado (p.e. un menú,. . . ).

La siguiente lista de enlaces puede servirnos para comenzar aaprender mejor estos dos lenguajes web.


La mejor forma de aprender CSS es mirando ejemplos hechospor otras personas.Todos los navegadores permiten visualizar el código fuente deuna página web y su hoja de estilos con lo cual podemos verqué etiquetas ha usado el diseñador y qué estilo le ha aplicadopara hacer un diseño determinado (p.e. un menú,. . . ).La siguiente lista de enlaces puede servirnos para comenzar aaprender mejor estos dos lenguajes web.

Enlaces de interés

I World Wide Web Consortium: Entidad encargada demantener las especificaciones técnicas sobre HTML yCSS.

I W3School, en particular su tutorial sobre HTML y sututorial sobre CSS.

I Guía breve de XHTML, de la sección española del W3C.I Guía breve de CSS, de la sección española del W3C.I Especificación completa de CSS 2.0I HTML Ya: Tutorial bastante bueno con el que prácticar en

línea sobre HTML.I CSS Ya: Tutorial bastante bueno con el que prácticar en

línea sobre CSS.I Layouts Iron Myers: Plantillas sencillas que pueden

servirnos como punto de partida para nuestros diseños.

http://www.w3c.es/

http://www.w3schools.com/

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/css/default.asp

http://www.w3c.es/divulgacion/guiasbreves/XHTML

http://www.w3c.es/divulgacion/guiasbreves/hojasestilo

http://www.w3.org/TR/CSS2/

http://www.htmlya.com.ar/

http://www.cssya.com.ar/

http://layouts.ironmyers.com/

ideas para una página webftorralbo/descargas/ideas-html.pdf · es el lenguaje...

Documents