Ideas para una página web
Anuncio
Ideas para una página web
Francisco Torralbo
Departamento de Geometría y Topología
Universidad de Granada
2 de Diciembre
Acció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 sintaxis
El modelo de caja
Para seguir aprendiendo
El objetivo
I
Nuestro objetivo es echar una rápida ojeada a los
lenguajes HTML y CSS que son la base del diseño de una
página web.
El objetivo
I
Nuestro objetivo es echar una rápida ojeada a los
lenguajes HTML y CSS que son la base del diseño de una
página web.
I
Cuando terminemos espero que seamos capaces de
adaptar una plantilla a nuestras necesidades específicas.
Pero, ¿qué es HTML?
HTML (HyperText Markup Language)
Es el lenguaje de marcado predominante para la elaboración
de 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,. . .
Pero, ¿qué es HTML?
HTML (HyperText Markup Language)
Es el lenguaje de marcado predominante para la elaboración
de 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 por
corchetes angulares (<,>).
<etiqueta>contenido</etiqueta>
Pero, ¿qué es HTML?
HTML (HyperText Markup Language)
Es el lenguaje de marcado predominante para la elaboración
de 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 por
corchetes 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 de
texto llano con extensión .html o .htm que podemos
editar con cualquier editor de texto.
¿Cómo creo y edito un documento HTML?
I
Un documento HTML es simplemente un documento de
texto llano con extensión .html o .htm que podemos
editar con cualquier editor de texto.
I
Vamos a aprovechar nuestro conocimiento de LATEX para
acelerar el proceso de aprendizaje.
Estructura de un documento HTML
Tipo de documento
La primera línea de un archivo HTML debe definir el tipo de
documento que se está editando.
Estructura de un documento HTML
Tipo de documento
La primera línea de un archivo HTML debe definir el tipo de
documento que se está editando.
\documentclass
DOCTYPE
article, book,. . .
Lo define la W3C (world
wide web consortion)
Estructura de un documento HTML
Tipo de documento
La primera línea de un archivo HTML debe definir el tipo de
documento que se está editando.
\documentclass
DOCTYPE
Lo define la W3C (world
wide 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”>
article, book,. . .
Estructura de un documento HTML
Tipo de documento
La primera línea de un archivo HTML debe definir el tipo de
documento que se está editando.
\documentclass
DOCTYPE
Lo define la W3C (world
wide 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 entre
la etiqueta <html>.
article, book,. . .
Estructura de un documento HTML
Cabecera y cuerpo
Preámbulo
<head>
Se trata de las instrucciones
comprendidas entre el
\documentclass y el
inicio del documento
Dentro se especifican
diversas opciones del
documento.
Estructura de un documento HTML
Cabecera y cuerpo
Preámbulo
<head>
Se trata de las instrucciones
comprendidas entre el
\documentclass y el
inicio del documento
Dentro se especifican
diversas opciones del
documento.
\begin{document}
<body>
Inicio del documento LATEX
propiamente dicho.
Dentro de esta etiqueta
debe ir todo el contenido.
Estructura de un documento HTML
Plantilla
Nuestra plantilla básica para un documento HTML sería la
siguiente:
<!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 cabecera
Etiquetas que van dentro de <head>
<title> define el título de la página. Por lo general, el título
aparece en la barra de título encima de la ventana.
Añadiendo información a la cabecera
Etiquetas que van dentro de <head>
<title> define el título de la página. Por lo general, el título
aparece 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”>
Añadiendo información a la cabecera
Etiquetas que van dentro de <head>
<title> define el título de la página. Por lo general, el título
aparece 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 usando
CSS
Añadiendo información a la cabecera
Etiquetas que van dentro de <head>
<title> define el título de la página. Por lo general, el título
aparece 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 usando
CSS
<meta> para metadatos como la autoría, la licencia, el
idioma, la codificación de caracteres, las palabras
clave. . .
Añadiendo información a la cabecera
Etiquetas que van dentro de <head>
<title> define el título de la página. Por lo general, el título
aparece 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 usando
CSS
<meta> para metadatos como la autoría, la licencia, el
idioma, la codificación de caracteres, las palabras
clave. . .
<script> para agregar contenido dinámico a la página
usando el lenguaje de programación web
javascript.
Estructura de la cabecera
<head>
<meta http-equiv=“Content-Type”
content=“text/html; charset=iso-8859-1”>
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>
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”>
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”>
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”>
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”>
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>
Dar forma al cuerpo de la página
Etiquetas básicas
Como pusimos de manifiesto anteriormente el contenido de la
página debe ir entre las etiquetas <body></body>.
Dar forma al cuerpo de la página
Etiquetas básicas
Como pusimos de manifiesto anteriormente el contenido de la
página debe ir entre las etiquetas <body></body>.
<p>: Párrafos.
Dar forma al cuerpo de la página
Etiquetas básicas
Como pusimos de manifiesto anteriormente el contenido de la
pá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.
Dar forma al cuerpo de la página
Etiquetas básicas
Como pusimos de manifiesto anteriormente el contenido de la
pá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 etiqueta
de cierre.
Dar forma al cuerpo de la página
Etiquetas básicas
Como pusimos de manifiesto anteriormente el contenido de la
pá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 etiqueta
de cierre.
Esta es la primera línea.<br>
Esta es otra línea del documento.
Esta es la primera línea.
Esta es otra línea del documento.
Dar forma al cuerpo de la página
Etiquetas básicas
Como pusimos de manifiesto anteriormente el contenido de la
pá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 etiqueta
de cierre.
Esta es la primera línea.<br>
Esta es otra línea del documento.
Esta es la primera línea.
Esta es otra línea del documento.
<hi>, i = 1, 2, 3, 4, 5, 6: Determinan las secciones en el
documento:
<h1> → Título
<h2> → Sección
<h3> → Subsección. . .
Dar forma al cuerpo de la página
Etiquetas básicas II
<ul>: Listas (similar a \begin{itemize})
Dar forma al cuerpo de la página
Etiquetas 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
Dar forma al cuerpo de la página
Etiquetas 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})
Dar forma al cuerpo de la página
Etiquetas 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
Dar forma al cuerpo de la página
<em>: Cursiva. Ejemplo: <em>Texto en cursiva</em>
Dar forma al cuerpo de la página
<em>: Cursiva. Ejemplo: <em>Texto en cursiva</em>
<strong>: Negrita. Ejemplo: <strong>Texto en
cursiva</strong>
Dar forma al cuerpo de la página
<em>: Cursiva. Ejemplo: <em>Texto en cursiva</em>
<strong>: Negrita. Ejemplo: <strong>Texto en
cursiva</strong>
<del>: Texto tachado. Ejemplo: <del>Texto en negrita</del>
Dar forma al cuerpo de la página
<em>: Cursiva. Ejemplo: <em>Texto en cursiva</em>
<strong>: Negrita. Ejemplo: <strong>Texto en
cursiva</strong>
<del>: Texto tachado. Ejemplo: <del>Texto en negrita</del>
<u>: Texto subrayado. Ejemplo: <u>Texto en subrayado</u>
Dar forma al cuerpo de la página
<em>: Cursiva. Ejemplo: <em>Texto en cursiva</em>
<strong>: Negrita. Ejemplo: <strong>Texto en
cursiva</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})
Dar forma al cuerpo de la página
<em>: Cursiva. Ejemplo: <em>Texto en cursiva</em>
<strong>: Negrita. Ejemplo: <strong>Texto en
cursiva</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 propiedades. . . </dd>
<dt>Álgebra</dt>
<dd>Parte de las matemáticas. . . </dd>
</dl>
Geometría Estudio de las
propiedades. . .
Álgebra Parte de las
matemáticas. . .
Dar forma al cuerpo de la página
<em>: Cursiva. Ejemplo: <em>Texto en cursiva</em>
<strong>: Negrita. Ejemplo: <strong>Texto en
cursiva</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 propiedades. . . </dd>
<dt>Álgebra</dt>
<dd>Parte de las matemáticas. . . </dd>
</dl>
Geometría Estudio de las
propiedades. . .
Álgebra Parte de las
matemáticas. . .
<blockquote>: Citar un texto (similar a \begin{quote})
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>
Mes
Gastos
<tr>
Enero
10$
<tr>
Febrero
13$
<td>Total</td>
Total
23$
<td>23$</td>
</tr>
</table>
Imágenes: la etiqueta <img>
Para incluir una imagen en un documento existe una etiqueta
especial: <img>. Su uso es el siguiente:
<img>
<img src=“dirección” alt=“texto alternativo”
align=“top|bottom|middle|left|right”>
Imágenes: la etiqueta <img>
Para incluir una imagen en un documento existe una etiqueta
especial: <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 cierre
Imágenes: la etiqueta <img>
Para incluir una imagen en un documento existe una etiqueta
especial: <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 cierre
I
El valor de alt se mostrará cuando no sea posible cargar la
imagen
Imágenes: la etiqueta <img>
Para incluir una imagen en un documento existe una etiqueta
especial: <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 cierre
I
El valor de alt se mostrará cuando no sea posible cargar la
imagen
I
El valor src es una dirección url
Imágenes: la etiqueta <img>
Para incluir una imagen en un documento existe una etiqueta
especial: <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 cierre
I
El valor de alt se mostrará cuando no sea posible cargar la
imagen
I
El valor src es una dirección url
I
El valor de align determina la alineación de la imagen con
respecto al texto.
Imágenes: la etiqueta <img>
Para incluir una imagen en un documento existe una etiqueta
especial: <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 cierre
I
El valor de alt se mostrará cuando no sea posible cargar la
imagen
I
El valor src es una dirección url
I
El valor de align determina la alineación de la imagen con
respecto al texto.
I
Los archivos de imagen comunmente soportados son:
.jpg, .png, .gif.
Enlaces: la etiqueta <a>
<a>
<a href=“direccion” title=“Info
extra”>Enlace</a>
Enlaces: la etiqueta <a>
<a>
<a href=“direccion” title=“Info
extra”>Enlace</a>
I
El valor de href puede ser una dirección web (p.e.
http://www.ugr.es) o bien un enlace dentro del
documento.
Enlaces: la etiqueta <a>
<a>
<a href=“direccion” title=“Info
extra”>Enlace</a>
I
El valor de href puede ser una dirección web (p.e.
http://www.ugr.es) o bien un enlace dentro del
documento.
I
El valor de title se muestra al mantener el ratón sobre el
enlace y sirve para indicar al usuario más información.
Enlaces: la etiqueta <a>
<a>
<a href=“direccion” title=“Info
extra”>Enlace</a>
I
El valor de href puede ser una dirección web (p.e.
http://www.ugr.es) o bien un enlace dentro del
documento.
I
El valor de title se muestra al mantener el ratón sobre el
enlace y sirve para indicar al usuario más información.
I
El contenido de la etiqueta <a> puede ser texto o una
imagen.
Enlaces: la etiqueta <a>
Enlaces dentro de la misma página
Para enlazar a una parte determinada de una página primero
debemos marcarla con un nombre para luego hacer referencia
a ella (compárese con \label y \ref en LATEX).
Enlaces: la etiqueta <a>
Enlaces dentro de la misma página
Para enlazar a una parte determinada de una página primero
debemos marcarla con un nombre para luego hacer referencia
a ella (compárese con \label y \ref en LATEX).
Esto se hace usando el atributo id en cualquier etiqueta.
Enlaces: la etiqueta <a>
Enlaces dentro de la misma página
Para enlazar a una parte determinada de una página primero
debemos marcarla con un nombre para luego hacer referencia
a 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>
Enlaces: la etiqueta <a>
Enlaces dentro de la misma página
Para enlazar a una parte determinada de una página primero
debemos marcarla con un nombre para luego hacer referencia
a 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 desde
otra página:
<a href=“mipagina.html#inicio”>Ir a la
etiqueta marcada como inicio en mi página</a>
Etiquetas sin significado semántico
Existen ciertas etiquetas que, aunque no tengan contenido
semántico, nos ayudan a dar formato. Éstas son dos:
<div>
Se trata de una etiqueta que se usa para englobar partes de
una página en un mismo bloque, como puede ser un menú
Etiquetas sin significado semántico
Existen ciertas etiquetas que, aunque no tengan contenido
semántico, nos ayudan a dar formato. Éstas son dos:
<div>
Se trata de una etiqueta que se usa para englobar partes de
una página en un mismo bloque, como puede ser un menú
<span>
Se usa principalmente para agregar un estilo a un elemento en
particular.
¿Que es una hoja de estilo?
CSS (Cascade Style Sheet)
CSS es un lenguaje usado para definir la presentación de un
documento estructurado escrito en HTML o XML.
La idea que se encuentra detrás del desarrollo de CSS es
separar la estructura de un documento de su presentación.
¿Que es una hoja de estilo?
CSS (Cascade Style Sheet)
CSS es un lenguaje usado para definir la presentación de un
documento estructurado escrito en HTML o XML.
La idea que se encuentra detrás del desarrollo de CSS es
separar 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 atributo
style en cualquier etiqueta.
¿Que es una hoja de estilo?
CSS (Cascade Style Sheet)
CSS es un lenguaje usado para definir la presentación de un
documento estructurado escrito en HTML o XML.
La idea que se encuentra detrás del desarrollo de CSS es
separar 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 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.
¿Que es una hoja de estilo?
CSS (Cascade Style Sheet)
CSS es un lenguaje usado para definir la presentación de un
documento estructurado escrito en HTML o XML.
La idea que se encuentra detrás del desarrollo de CSS es
separar 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 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.
Hoja de estilo externa: Es la mejor opción y es la que vamos a
explicar aquí.
¿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 con
cualquier editor de texto.
¿Cómo creo y edito una hoja de estilos?
I
I
Una hoja de estilo CSS es simplemente un documento de
texto llano con extensión .css que podemos editar con
cualquier editor de texto.
La sintaxis básica de dicho archivo es la siguiente:
etiqueta {
propiedad1:valor1;
propiedad2:valor2;
}
¿Cómo creo y edito una hoja de estilos?
I
I
Una hoja de estilo CSS es simplemente un documento de
texto llano con extensión .css que podemos editar con
cualquier editor de texto.
La sintaxis básica de dicho archivo es la siguiente:
etiqueta {
propiedad1:valor1;
propiedad2:valor2;
}
¿Cómo creo y edito una hoja de estilos?
I
I
Una hoja de estilo CSS es simplemente un documento de
texto llano con extensión .css que podemos editar con
cualquier editor de texto.
La sintaxis básica de dicho archivo es la siguiente:
etiqueta {
propiedad1:valor1;
propiedad2:valor2;
}
.clase {
propiedad1:valor1;
propiedad2:valor2;
}
¿Cómo creo y edito una hoja de estilos?
I
I
Una hoja de estilo CSS es simplemente un documento de
texto llano con extensión .css que podemos editar con
cualquier editor de texto.
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:
Clases e identificadores
Podemos aplicar las reglas de estilo a:
I Todas las etiquetas de un tipo determinado de nuestro
documento.
Clases e identificadores
Podemos aplicar las reglas de estilo a:
I Todas las etiquetas de un tipo determinado de nuestro
documento.
p {
margin-bottom:10px;
}
coloca un margen en la parte inferior de cada párrafo de una
anchura de 10px.
Clases e identificadores
Podemos aplicar las reglas de estilo a:
I Todas las etiquetas de un tipo determinado de nuestro
documento.
p {
margin-bottom:10px;
}
coloca un margen en la parte inferior de cada párrafo de una
anchura 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:
Clases e identificadores
Podemos aplicar las reglas de estilo a:
I Todas las etiquetas de un tipo determinado de nuestro
documento.
p {
margin-bottom:10px;
}
coloca un margen en la parte inferior de cada párrafo de una
anchura 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 el
atributo class=“miclase”
Clases e identificadores
I Una etiqueta determinada: Para ello debemos marcar la
etiqueta con un identificador (que debe ser único) mediante el
atributo id:
Clases e identificadores
I Una etiqueta determinada: Para ello debemos marcar la
etiqueta con un identificador (que debe ser único) mediante el
atributo id:
#menu {
border:1px solid black;
}
rodea la etiqueta marcada con el atributo id=“menu” con un
marco de color negro y 1 pixel de grosor.
El modelo de caja en CSS
Todos los elementos de una página web son cajas
rectangulares
El modelo de caja en CSS
Todos los elementos de una página web son cajas
rectangulares
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. la
cursiva <em>).
El modelo de caja en CSS
Todos los elementos de una página web son cajas
rectangulares
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. la
cursiva <em>).
Las propiedades más importantes de una caja son: width
(ancho), height (alto), padding (relleno), border (borde) y
margin (margen).
Para seguir aprendiendo
La mejor forma de aprender CSS es mirando ejemplos hechos
por otras personas.
Para seguir aprendiendo
La mejor forma de aprender CSS es mirando ejemplos hechos
por otras personas.
Todos los navegadores permiten visualizar el código fuente de
una página web y su hoja de estilos con lo cual podemos ver
qué etiquetas ha usado el diseñador y qué estilo le ha aplicado
para hacer un diseño determinado (p.e. un menú,. . . ).
Para seguir aprendiendo
La mejor forma de aprender CSS es mirando ejemplos hechos
por otras personas.
Todos los navegadores permiten visualizar el código fuente de
una página web y su hoja de estilos con lo cual podemos ver
qué etiquetas ha usado el diseñador y qué estilo le ha aplicado
para hacer un diseño determinado (p.e. un menú,. . . ).
La siguiente lista de enlaces puede servirnos para comenzar a
aprender mejor estos dos lenguajes web.
Enlaces de interés
I
World Wide Web Consortium: Entidad encargada de
mantener las especificaciones técnicas sobre HTML y
CSS.
I
W3School, en particular su tutorial sobre HTML y su
tutorial 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.0
I
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.
