Diseño Web Estático PDF

HTML: HyperText Markup Language
Lenguaje de Marcas (etiquetas) de HiperTexto (páginas web)
➢ HTML es el lenguaje que usamos para crear páginas web, entre otros.
➢ Este lenguaje se basa en el uso de etiquetas. Las etiquetas no son más que
palabras clave rodeadas por corchetes angulares, o lo que es lo mismo el signo
menor que < y el signo mayor que >
➢ Las etiquetas son de dos tipos:

○ de inicio <etiqueta>
○ y de cierre </etiqueta>
➢ Casi todas las etiquetas de inicio deben llevar la correspondiente etiqueta de

cierre que tiene el mismo nombre pero con una barra / delante. Las etiquetas
que no tienen cierre son: <img> para insertar imágenes, para introducir un
salto de línea, <hr> para insertar un separador (línea horizontal)..., y unas pocas
más.
➢ En este documento explicaremos las etiquetas que vamos usando en clase.

Además estudiaremos algunos de los atributos que puede contener cada
etiqueta.
Los atributos son pares nombre-valor separados por un signo igual = y escritos
en la etiqueta de inicio detrás del nombre de dicha etiqueta. El valor del atributo
se pone entre comillas dobles.
➢ Toda página web tiene la siguiente estructura:

<html>
<head>
</head>
<body>
</body>
</html>
➢ La única etiqueta de la cabecera que hemos estudiado es <title> para

especificar el título que después aparece en la barra de títulos del navegador.
Por lo tanto si el título es Mi primera página web debo poner ese texto entre las
etiquetas:
<title>Mi primera página web</title>
➢ Todas las etiquetas que especificaremos a partir de ahora pertenecen al cuerpo

de nuestra página:
Para nuestras páginas vamos a seguir la siguiente estructura de carpetas o directorios:
● Crearemos una carpeta con el nombre de nuestra página web.

● En su interior crearemos una carpeta para el áudio, otra para las imágenes, para los
vídeos, documentos… Es decir una para cada tipo de archivos que formarán parte de
nuestra página web.
● Al mismo nivel que las carpetas de archivos estarán los archivos html: index.html y los
correspondientes a las páginas que creemos para enlazarlas entre ellas.
➢ Párrafos:
Los párrafos se especifican entre las etiquetas y .
Cuando redactamos un texto, cada párrafo debe acabar con un punto y aparte
que es lo que en un procesador de textos corresponde al carácter no imprimible
de final de párrafo ¶
Por ejemplo si tenemos el siguiente texto:
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho que vivía un

hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla algo
más de vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas
los viernes y algún palomino de añadidura los domingos, consumían las tres partes de su
hacienda.
El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de
lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino. Tenía en su casa
una ama que pasaba de los cuarenta y una sobrina que no llegaba a los veinte, y un mozo de
campo y plaza que así ensillaba el rocín como tomaba la podadera. Frisaba la edad de nuestro
hidalgo con los cincuenta años.
Era de complexión recia, seco de carnes, enjuto de rostro, gran madrugador y amigo de la caza.
Quieren decir que tenía el sobrenombre de «Quijada», o «Quesada», que en esto hay alguna
diferencia en los autores que deste caso escriben, aunque por conjeturas verosímiles se deja
entender que se llamaba «Quijana». Pero esto importa poco a nuestro cuento: basta que en la
narración dél no se salga un punto de la verdad.
El código html quedaría de la siguiente forma:
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho que vivía un
hacienda.
El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos
de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino. Tenía en su
casa una ama que pasaba de los cuarenta y una sobrina que no llegaba a los veinte, y un mozo
de campo y plaza que así ensillaba el rocín como tomaba la podadera. Frisaba la edad de
nuestro hidalgo con los cincuenta años.
Era de complexión recia, seco de carnes, enjuto de rostro, gran madrugador y amigo de la
caza. Quieren decir que tenía el sobrenombre de «Quijada», o «Quesada», que en esto hay
alguna diferencia en los autores que deste caso escriben, aunque por conjeturas verosímiles se
deja entender que se llamaba «Quijana». Pero esto importa poco a nuestro cuento: basta que en
la narración dél no se salga un punto de la verdad.
➢ Alineación de párrafos
Cuando quiero alinear los párrafos a la izquierda, a la derecha, al centro o
justificarlos, debo usar el atributo align dentro de la etiqueta de párrafo con
los valores left, right, center o justify respectivamente. Recuerda que el valor
del atributo lo ponemos entre comillas dobles.
Fíjate en los siguientes ejemplos.
Esto es un párrafo alineado a la izquierda. Esto es un párrafo

alineado a la izquierda. Esto es un párrafo alineado a la izquierda. Esto es un
párrafo alineado a la izquierda. Esto es un párrafo alineado a la izquierda. Esto
es un párrafo alineado a la izquierda. Esto es un párrafo alineado a la
izquierda.
Quedaría:
Esto es un párrafo alineado a la izquierda. Esto es un párrafo alineado a la
izquierda. Esto es un párrafo alineado a la izquierda. Esto es un párrafo alineado
a la izquierda. Esto es un párrafo alineado a la izquierda. Esto es un párrafo
alineado a la izquierda. Esto es un párrafo alineado a la izquierda.
Esto es un párrafo alineado a la derecha. Esto es un párrafo

alineado a la derecha. Esto es un párrafo alineado a la derecha. Esto es un
párrafo alineado a la derecha. Esto es un párrafo alineado a la derecha. Esto es
un párrafo alineado a la derecha. Esto es un párrafo alineado a la derecha.
Quedaría:
Esto es un párrafo alineado a la derecha. Esto es un párrafo alineado a la

derecha. Esto es un párrafo alineado a la derecha. Esto es un párrafo alineado a
la derecha. Esto es un párrafo alineado a la derecha. Esto es un párrafo
alineado a la derecha. Esto es un párrafo alineado a la derecha.
Esto es un párrafo centrado. Esto es un párrafo centrado.

Esto es un párrafo centrado. Esto es un párrafo centrado. Esto es un párrafo
centrado. Esto es un párrafo centrado. Esto es un párrafo centrado. Esto es un
párrafo centrado. Esto es un párrafo centrado. Esto es un párrafo centrado. Esto
es un párrafo centrado.
Quedaría:
Esto es un párrafo centrado. Esto es un párrafo centrado. Esto es un párrafo

es un párrafo centrado. Esto es un párrafo centrado. Esto es un párrafo
centrado.
Esto es un párrafo justificado. Esto es un párrafo justificado.

Esto es un párrafo justificado. Esto es un párrafo justificado. Esto es un párrafo
justificado. Esto es un párrafo justificado. Esto es un párrafo justificado. Esto es
un párrafo justificado. Esto es un párrafo justificado. Esto es un párrafo
justificado. Esto es un párrafo justificado.
Quedaría:
Esto es un párrafo justificado. Esto es un párrafo justificado. Esto es un párrafo

un párrafo justificado.
Pero ya que vamos a basar el formato de nuestra página web en estilos, en vez
del atributo align, usaremos el atributo style. Los valores del atributo style están
formados por el par propiedad-valor separados por el signo dos puntos : y un
espacio en blanco. A su vez, cada par finalizado con el símbolo punto y coma ;.
Podemos aplicar diferentes propiedades a la vez en un atributo style, como por
ejemplo, text-align, color, background-color, width, height…
Por lo tanto, para especificar la alineación de párrafos anterior equivalente

usando el atributo style, lo haríamos de la siguiente forma:
Esto es un párrafo alineado a la izquierda. Esto es

un párrafo alineado a la izquierda. Esto es un párrafo alineado a la izquierda.
Esto es un párrafo alineado a la izquierda. Esto es un párrafo alineado a la
izquierda. Esto es un párrafo alineado a la izquierda. Esto es un párrafo alineado
a la izquierda.
Esto es un párrafo alineado a la derecha. Esto es

un párrafo alineado a la derecha. Esto es un párrafo alineado a la derecha. Esto
es un párrafo alineado a la derecha. Esto es un párrafo alineado a la derecha.
Esto es un párrafo alineado a la derecha. Esto es un párrafo alineado a la
derecha.
Esto es un párrafo centrado. Esto es un párrafo

es un párrafo centrado. Esto es un párrafo centrado. Esto es un párrafo
centrado. Esto es un párrafo centrado.
Esto es un párrafo justificado. Esto es un párrafo

un párrafo justificado. Esto es un párrafo justificado.
➢ Negrita
Para poner el texto en negrita, usamos la etiqueta de bold o . Son
equivalentes. Por lo tanto el siguiente código:
Este texto está en negrita
quedaría de la siguiente forma:

Este texto está en negrita
El código equivalente sería:

Este texto está en negrita
Las etiquetas y son de utilidad cuando queremos resaltar una
palabra o una frase. En cambio, si queremos resaltar un párrafo, lo haremos de
forma equivalente con estilos.
Esto es un párrafo en negrita
➢ Cursiva
Para poner el texto en cursiva, usamos la etiquetas de italic (o si os resulta
más fácil recordarlo de inclinado) o de énfasis (emphasis). Son
equivalentes. Por lo tanto el siguiente código:
Este texto está en cursiva o itálica

Este texto está en cursiva o itálica
El código equivalente sería:

Este texto está en negrito
Igual que en el caso de la negrita, para los párrafos usaremos el atributo style
con la propiedad correspondiente:
Esto es un párrafo en cursiva
➢ Subrayado
Para poner el texto subrayado, usamos la etiquetas de underline. Por lo
tanto el siguiente código:
Este texto está subrayado

Este texto está subrayado
En el caso del párrafo con el atributo style:
Esto es un párrafo subrayado
Las etiquetas se pueden anidar (poner unas dentro de otras) y de esta forma se
van aplicando las características correspondientes. Por ejemplo un código como
el siguiente:
Texto con varios formatos

Texto con varios formatos
Fíjate en que la última etiqueta de inicio que aplicamos (en el ejemplo ) es la
primera etiqueta de cierre que debemos poner ( en el ejemplo), así
sucesivamente. No podemos cambiar el orden de las etiquetas de cierre. Queda
establecido por el orden elegido al indicar las etiquetas de inicio. Por lo tanto el
orden de las etiquetas debe ser simétrico.
En el caso del párrafo, para especificar un formato equivalente basado en

estilos, lo haríamos de la siguiente forma:


Esto es un párrafo con varios formatos
➢ Cabeceras
Para especificar los apartados o cabeceras de nuestra página y así estructurar el
contenido, lo haremos con las etiquetas <hnum> siendo estas, h1, h2, h3, h4, h5
y h6. La cabecera h1 es la más importante. A medida que aumenta la
numeración, disminuye la importancia.
➢ Imágenes
Para especificar una imagen se usa la etiqueta <img> que no tiene la

correspondiente etiqueta de cierre. Para esta etiqueta hemos estudiado los
atributos:
src del inglés source (fuente) para indicar dónde está almacenada la imagen.
Conviene especificar las imágenes relativas a la carpeta donde almacenamos
nuestra página web. De esta forma si movemos la carpeta de sitio no habrá
ningún problema para localizar dicha imagen y por lo tanto cargarla en el
navegador.
Imagina que la carpeta donde tenemos nuestra página web se llama web y
dentro de ella es donde están todas nuestras páginas .html (index.html,
presentacion.html…) y las carpetas imagen, audio y video para almacenar los
archivos correspondientes.
Si en la página index.html queremos insertar la imagen quijote.jpg (que está en
la carpeta imagen), el código correspondiente será algo así:
<img src=”imagen/quijote.jpg” …>
Si la imagen quijote.jpg en vez de estar en la carpeta imagen está junto a los

archivos .html (que no es lo más aconsejable), el código anterior sería:
<img src=”quijote.jpg” …>
title para especificar el texto a mostrar cuando el puntero del ratón esté sobre la
imagen.
alt para especificar el texto alternativo que se mostrará en el navegador cuando
no se pueda cargar la imagen.
width para especificar el ancho de la imagen (normalmente en píxeles, px)

height para especificar la altura de la imagen (normalmente en píxeles, px)
Aunque estos dos últimos atributos se suelen especificar mediante el atributo

style, convirtiéndose en propiedades de style. Quedaría de la siguiente forma,
suponiendo que se trata de una imagen 300x200:
<img src=”quijote.jpg” style=”width: 300px; height: 200px;”…>
➢ Tablas
Para especificar una tabla usamos la etiqueta <table>
Las tablas están compuestas de filas y columnas. Para especificar las filas
usaremos la etiqueta <tr> del inglés table row (fila de la tabla) y para las
columnas la etiqueta <td> del inglés table data (los datos de la tabla).
Por lo tanto en nuestro código tendremos tantas etiquetas <tr> con su
correspondiente </tr> como filas tenga la tabla y dentro de cada etiqueta <tr>
tantas etiquetas <td> con su correspondiente </td> como columnas tenga la
tabla.
La estructura de la tabla queda de la siguiente manera:
<table>
<tr>
<td> … </td>
<td> … </td>
...
<td> … </td>
</tr>
<tr>
<td> … </td>
<td> … </td>
<td> … </td>
</tr>
...
<tr>
<td> … </td>
<td> … </td>
<td> … </td>
</tr>
</table>
No consideraremos las etiquetas <tbody> y </tbody>. Se pueden omitir.
Si tenemos una tabla como la siguiente:
Castellón Valencia Alicante
Magdalena Fallas Hogueras
El código correspondiente sería:

<table>
<tr>
<td>Castellón</td>
<td>Valencia</td>
<td>Alicante</td>
</tr>
<tr>
<td>Magdalena</td>
<td>Fallas</td>
<td>Hogueras</td>
</tr>
</table>
En la etiqueta <table> hemos estudiado los siguientes atributos:
width para especificar la anchura de la tabla (en píxeles)

height para especificar la altura de la tabla (en píxeles)
Nuevamente estos dos atributos se suelen especificar como propiedades del
atributo style.
align para especificar la alineación (left, right, center…) de la tabla.
border para indicar el grosor del borde de la tabla. Si ponemos como valor el 0
no habrá borde.
cellspacing: Este atributo permite determinar o especificar la distancia entre las
celdas y entre las celdas y el margen exterior de la tabla. El valor de este
atributo se mide en píxeles y es válido para todas las celdas.
cellpadding: Este atributo nos permite especificar la distancia entre el margen
interior de la celda y su contenido. En el caso de este atributo, si su valor es en
píxeles, los cuatro bordes de la celda deberían estar a la distancia indicada del
contenido. En cambio si el valor es un porcentaje, los bordes superior e inferior
estarán separados a una distancia porcentual del valor disponible verticalmente
y lo mismo para los bordes derecho e izquierdo que estarán separados al
porcentaje indicado del espacio disponible horizontalmente.
En la etiqueta <td> el atributo más significativo es:

colspan para combinar el número de celdas indicadas en este atributo.
<table>
<tr>
<td colspan=”3”>Fiestas</td>
</tr>
<tr>
<td>Magdalena</td>
<td>Fallas</td>
<td>Hogueras</td>
</tr>
</table>
➢ Listas
Hay varios tipos de listas pero aquí sólo estudiaremos las numeradas y las no
numeradas (viñetas).
Para las listas numeradas (conocidas también como listas ordenadas) usaremos
la etiqueta <ol> del inglés ordered list
Para las listas no numeradas (conocidas también como listas desordenadas por
no seguir un orden) usaremos la etiqueta <ul> del inglés unordered list
En ambos casos para indicar las entradas de las listas usaremos la etiqueta <li>
del inglés list item
Por ejemplo para una lista ordenada como la siguiente:
1. Encender el ordenador
2. Entrar en Google Drive
3. Identificarse
4. Acceder al documento compartido
Deberíamos usar el siguiente código:
<ol>
<li>Encender el ordenador</li>
<li>Entrar en Google Drive</li>
<li>Identificarse</li>
<li>Acceder al documento compartido</li>
</ol>
Para una lista desordenada como la siguiente:
● Deportes
● Actualidad
● Cultura
● Sociedad
Usamos el siguiente código:
<ul>
<li>Deportes</li>
<li>Actualidad</li>
<li>Cultura</li>
<li>Sociedad</li>
</ul>
Tanto en la etiqueta <ol> como en la <ul> podemos usar el atributo type para
especificar las características de la lista.
Para la etiqueta <ol> los valores del atributo pueden ser:
a: letras minúsculas
A: letras mayúsculas
1: números arábigos (opción por defecto)
i: números romanos en minúsculas
I: números romanos en mayúsculas
Para la etiqueta <ul> los valores del atributo pueden ser:

circle: para usar el símbolo ￮
disk: para usar el símbolo ● (opción por defecto)
square: para usar el símbolo ￭
Si queremos anidar listas tan solo debemos especificar otra lista entre las
etiquetas <li> y </li> del apartado correspondiente. Por ejemplo si tenemos una
lista como la siguiente:
1. Primer plato
● Macarrones
● Gazpacho
● Judías pinta
2. Segundo plato
● Pollo al ajillo
● Merluza a la plancha
3. Postre
● Fruta
● Yogur
● Café

<ol>
<li>
Primer plato
<ul>
<li>Macarrones</li>
<li>Gazpacho</li>
<li>Judías pinta</li>
</ul>
</li>
<li> Segundo plato
<ul>
<li>Pollo al ajillo</li>
<li>Merluza a la plancha</li>
</ul>
</li>
<li>
Postre
<ul>
<li>Fruta</li>
<li>Yogur</li>
<li>Café</li>
</ul>
</li>
</ol>
➢ Fuente
Para establecer el tipo de letra, tamaño y color, lo haremos mediante el atributo
style con las propiedades font-family, font-size y color respectivamente.
Para especificar el color (tanto de primer plano, color, como de fondo,
background-color, empleamos números hexadecimales siguiendo esta
estructura:
#RRGGBB
Es decir el sistema RGB (Red, Green, Blue) en el cual especificamos el nivel de
rojo en los dos primeros números, el de verde en los dos siguientes y el de azul
en los dos últimos. En función de la cantidad de cada color que especifiquemos
podremos conseguir cualquiera de los colores que conocemos. Como si
fuéramos un pintor con su paleta.
Los números hexadecimales son 16 valores {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D,
E, F} siendo el 0 el menor y la F el mayor. Cuando combinamos dos números el
menor sería el 00 y el mayor el FF. La serie seria 00, 01, 02...0F, 10, 11, 12,
13...1F...F1, F2, F3...FF
Por lo tanto una especificación de color como la siguiente #FF0000 significa que
queremos el color rojo a la máxima intensidad sin usar el verde ni el azul.
➢ Enlaces
Para especificar los enlaces usamos la etiqueta <a> con los siguientes atributos:
href para especificar el destino del enlace, que puede ser:
➔ una página creada por nosotros: nombre.html
➔ la URL de una página web ya creada: http://www.
➔ un marcador interno de la propia página: #marca
id para colocar un marcador (o anclaje) y así poder crear un enlace interno (que
nos lleve a una parte de nuestra página web)
Por ejemplo si en una página tenemos un índice y queremos poner un enlace a
cada palabra del índice para que nos lleve al apartado correspondiente
haríamos:
Crear un anclaje donde empieza el apartado:
<a id=”marca1”> </a>
Y luego creamos el enlace asociado a la palabra del índice que apunte al

anterior marca o anclaje:
<a href=”#marca1”> apartado1 </a>
target para especificar dónde se abre el enlace. Si no usamos este atributo, el

enlace se abrirá en una nueva página en la misma ventana en la que estamos.
Nosotros lo usaremos para que nuestras páginas se carguen en el iframe. En
ese caso el valor del atributo target es el nombre del iframe.
➢ Iframe
Un iframe del inglés inline frame (marco incorporado) nos permite incorporar o
incrustar un documento html dentro de otro. Usaremos la etiqueta <iframe> con
los siguientes atributos:
src para especificar la página html que se debe cargar por defecto en el marco
(iframe)
name para especificar el nombre del iframe el cual usaremos en el atributo
target de la etiqueta <a> para que dicho enlace se abra en el iframe.
width para especificar el ancho del iframe (en píxeles)
height para especificar la altura del iframe (en píxeles)
align para especificar la alineación del iframe respecto al contexto que lo rodea.
frameborder para indicar si queremos o no borde alrededor del iframe. En
nuestras prácticas usamos este atributo con valor 0 para que no se muestre el
borde.
➢ Estilo interno o aplicado a todos los elementos del mismo tipo.
Si aplicamos el formato mediante el atributo style de manera interna junto a la

etiqueta correspondiente, como por ejemplo el siguiente código asociado al
párrafo:
Esto es un párrafo con formato
el código fuente de nuestra página acabará siendo más farragoso puesto que
mezclamos el contenido con el formato aplicado. Por lo tanto, siempre que sea
posible, separaremos el contenido del formato, especificando el estilo a todos los
elementos del mismo tipo en la cabecera del código entre las etiquetas <style> y
</style>. Entre esas etiquetas podemos establecer tantas reglas como
queramos asociadas cada una de ellas a una etiqueta diferente. La regla tiene
dos partes: un selector y la declaración. A su vez la declaración está compuesta
por propiedades con su valor correspondiente. El código anterior equivalente
siguiendo esta nomenclatura sería:
p{
font-family: “Arial”;
font-size: 16px;
text-align: justify;
color: #3366FF;
}
siendo p el selector y lo que està entre { y } la declaración con sus propiedades.
Pero si lo que queremos es aplicar formato a una sola palabra o a una frase
dentro de un párrafo más extenso, lo haremos mediante la etiqueta con
el atributo style, por ejemplo:
En un lugar de la Mancha , de cuyo nombre no quiero acordarme, no ha mucho que
vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla
algo más de vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados,
lentejas los viernes y algún palomino de añadidura los domingos, consumían las tres partes de
su hacienda.
Quedaría:
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho que vivía un

hacienda.

Diseño Web Estático PDF

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño Web Estático PDF

Cargado por

Copyright:

Formatos disponibles

HTML: HyperText Markup Language

Lenguaje de Marcas (etiquetas) de HiperTexto (páginas web)

➢ Las etiquetas son de dos tipos:

➢ Casi todas las etiquetas de inicio deben llevar la correspondiente etiqueta de

➢ En este documento explicaremos las etiquetas que vamos usando en clase.

➢ Toda página web tiene la siguiente estructura:

➢ La única etiqueta de la cabecera que hemos estudiado es <title> para

<title>Mi primera página web</title>

➢ Todas las etiquetas que especificaremos a partir de ahora pertenecen al cuerpo

Para nuestras páginas vamos a seguir la siguiente estructura de carpetas o directorios:

● Crearemos una carpeta con el nombre de nuestra página web.

Por ejemplo si tenemos el siguiente texto:

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho que vivía un

El código html quedaría de la siguiente forma:

<p align=”left”>Esto es un párrafo alineado a la izquierda. Esto es un párrafo

<p align=”right”>Esto es un párrafo alineado a la derecha. Esto es un párrafo

Esto es un párrafo alineado a la derecha. Esto es un párrafo alineado a la

<p align=”center”>Esto es un párrafo centrado. Esto es un párrafo centrado.

Esto es un párrafo centrado. Esto es un párrafo centrado. Esto es un párrafo

<p align=”justify”>Esto es un párrafo justificado. Esto es un párrafo justificado.

Esto es un párrafo justificado. Esto es un párrafo justificado. Esto es un párrafo

Por lo tanto, para especificar la alineación de párrafos anterior equivalente

<p style=”text-align: left;”>Esto es un párrafo alineado a la izquierda. Esto es

<p style=”text-align: right;”>Esto es un párrafo alineado a la derecha. Esto es

<p style=”text-align: center;”>Esto es un párrafo centrado. Esto es un párrafo

<p style=”text-align: justify;”>Esto es un párrafo justificado. Esto es un párrafo

quedaría de la siguiente forma:

El código equivalente sería:

<p style=”font-weight: bold;”>Esto es un párrafo en negrita</p>

quedaría de la siguiente forma:

El código equivalente sería:

<p style=”font-style: italic;”>Esto es un párrafo en cursiva</p>

quedaría de la siguiente forma:

En el caso del párrafo con el atributo style:

<p style=”text-decoration: underline;”>Esto es un párrafo subrayado</p>

quedaría de la siguiente forma:

En el caso del párrafo, para especificar un formato equivalente basado en

<p style=”font-weight: bold; font-style: italic; text-decoration: underline;”>

Para especificar una imagen se usa la etiqueta <img> que no tiene la

<img src=”imagen/quijote.jpg” …>

Si la imagen quijote.jpg en vez de estar en la carpeta imagen está junto a los

<img src=”quijote.jpg” …>

width para especificar el ancho de la imagen (normalmente en píxeles, px)

Aunque estos dos últimos atributos se suelen especificar mediante el atributo

<img src=”quijote.jpg” style=”width: 300px; height: 200px;”…>

No consideraremos las etiquetas <tbody> y </tbody>. Se pueden omitir.

Si tenemos una tabla como la siguiente:

Castellón Valencia Alicante

Magdalena Fallas Hogueras

El código correspondiente sería:

En la etiqueta <table> hemos estudiado los siguientes atributos:

width para especificar la anchura de la tabla (en píxeles)

En la etiqueta <td> el atributo más significativo es:

Deberíamos usar el siguiente código:

Usamos el siguiente código:

Para la etiqueta <ul> los valores del atributo pueden ser:

El código correspondiente sería:

Y luego creamos el enlace asociado a la palabra del índice que apunte al

<a href=”#marca1”> apartado1 </a>

target para especificar dónde se abre el enlace. Si no usamos este atributo, el

➢ Estilo interno o aplicado a todos los elementos del mismo tipo.

Si aplicamos el formato mediante el atributo style de manera interna junto a la