ideas para una página webftorralbo/descargas/ideas-html.pdf · es el lenguaje...
Post on 22-May-2020
8 Views
Preview:
TRANSCRIPT
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.
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>
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>
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.
¿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>.
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>.
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>.
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>.
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 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.
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.
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.
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.
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>
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=“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>
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=“FranciscoTorralbo”>
<link type=“text/css” rel=“stylesheet”href=“hoja_estilo.css”>
<script type=“text/javascript”src=“programa.js”></script>
</head>
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=“FranciscoTorralbo”>
<link type=“text/css” rel=“stylesheet”href=“hoja_estilo.css”>
<script type=“text/javascript”src=“programa.js”></script>
</head>
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>
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>
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á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. . .
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. . .
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. . .
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. . .
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. . .
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. . .
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
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
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
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
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})
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})
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})
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})
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})
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})
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})
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.
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 cierre
I El valor de alt se mostrará cuando no sea posible cargar laimagen
I 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.
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
imagen
I 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.
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.
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.
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.
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>
<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>
<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>
<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>
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.
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í.
¿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 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 aexplicar aquí.
¿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 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 aexplicar aquí.
¿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 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 aexplicar 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 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;
}
¿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;
}
¿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;
}
¿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;
}
¿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”
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”
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”
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”
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”
Clases e identificadores
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.
Clases e identificadores
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).
Para seguir aprendiendo
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.
Para seguir aprendiendo
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.
Para seguir aprendiendo
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.
top related