1. TUTORIAL 2: UN POCO DE HTML
Vamos a estudiar en este tutorial las principales etiquetas y códigos HTML.
Lo esencial es comprender que todas las instrucciones
en HTML:
• Comienzan con una etiqueta de apertura
<ETIQUETA> (poniendo en "etiqueta" el valor
correspondiente)
• Terminan con una etiqueta de cierre
</ETIQUETA>
Recuerda que el objetivo
NO ES APRENDER A CREAR ESTAS ETIQUETAS SINO ENTENDERLAS
E IDENTIFICARLAS CUANDO APAREZCAN O HAYA QUE PEGAR ESTE
CÓDIGO
INDICE DE TEMAS:
• Formato de texto
• Interlineados
• Listas
• Hipervínculos,
• Tablas
• Imágenes
• Vídeos
• Insertar webs (iframe)

2. Formato de texto
Para escribir un texto en negrita, en cursiva o subrayado, las etiquetas usadas son:
o NEGRITA: <strong>text</strong>
o CURSIVA: <em> texto </em>
o SUBRAYADO: <span style="text-decoration:
underline;">texto</span>
Así quedaría el encabezado anterior, con sus etiquetas:
(En adelante omitiremos la etiqueta de cierre, para facilitar la lectura)
Cambiar de color es fácil:
rojo, verde, azul o negro tienen como etiquetas
<span style="color: #código del color correspondiente;"> texto coloreado </span>.
Los códigos de colores más usados son:
• rojo: #ff0000
• verde: #99cc00
• azul: #3366ff
• negro: # 000000
• el blanco tiene como etiqueta #FFFFFF
En esta web tienes todos los colores y puedes copiar los códigos correspondientes.

3. Interlineados y líneas
Los interlineados tienen como etiqueta <br> o <p> El espacio generado bajo la línea
anterior se ha conseguido mediante dos etiquetas <p> consecutivas:
<p></p>
<p></p>
Las líneas, para separar partes de textos tienen como etiqueta <hr>. Así, la línea que
separa este apartado del siguiente, tiene como código:
siendo "height", la altura en px; width: la anchura, en porcentaje o en pixeles.
Listas de items
Las listas de items aparecen con las etiquetas <ul> (unordered list), si no son
numeradas, separando cada línea con la etiqueta <li>. Así, la lista
• item 1
• item 2
• item 3
tiene la sintaxis
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
Mientras que las listas ordenadas tiene como etiqueta <ol> (ordered list) separando
también cada línea con etiquetas <li>, como en el ejemplo siguiente:
1. item 1
2. item 2
3. item 3
con sintaxis
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>

4. Hipervínculos
Son enlaces a páginas web u otros archivos. La dirección del recurso en Internet se
llama URL. Las etiquetas correspondientes son <a href="URL">texto a enlazar</a>.
Además se puede especificar el destino, intercalando la etiqueta target="destino", entre
"a" y "href".
Por ejemplo, si queremos ir a la página de la Escuela Oficial de Idiomas de Aranjuez,
escribiremos como sintaxis:
Los posibles destinos son:
• _blank: abre la página en una nueva ventana. Es la más usada.
• _self: abre la página en la ventana actual (reemplaza a la página actual)
• _top: abre la página en la ventana actual reemplazando a todas las páginas y
marcos que halla.
Tablas
En una tabla hay que especificar el número de filas y columnas.
Veamos la siguiente tabla. Las filas tiene la sintaxis <tr> y las columnas <td>. La tabla,
en su conjunto, tiene la etiqueta <table> y el cuerpo o contenido de la tabla se enmarca
entre etiquetas <tbody>
CABECERA CABECERA CABECERA
1 2 3
FILA 1 - FILA 1 - FILA 1 -
COLUMNA COLUMNA COLUMNA
1 2 3
FILA 2 - FILA 2 - FILA 2 -
COLUMNA COLUMNA COLUMNA
1 2 3
FILA 3 - FILA 3 - FILA 3 -
COLUMNA COLUMNA COLUMNA
1 2 3

5. Esta sería la sintaxis de esta tabla:
Observa que:
• Se fija la altura, anchura, alineación y grosor del borde de la tabla.
• Cellpadding es el espacio entre el texto y el borde la celda.
• Cellspacing, es el espacio entre celdas.
• Después se definen las columnas y, en cada una de ellas, las diferentes
tablas.

6. Insertar imágenes
¿Cómo se puede insertar esta imagen en una página?
Observemos primero los parámetros elegidos al
insertarla:
En esta imagen, hemos colocado el logo de la EOI de Aranjuez a la izquierda,
separándola del texto. 12 px en horizontal, y marcando un borde de 2px. Hemos dado
unas dimensiones horizontales de 190 px y de 66 px de altura.
Además hemos colocado una descripción a la imagen y un título, para facilitar la lectura
de la página para personas con discapacidad visual (se leería la descripción de la
imagen) y para que apareciera el rótulo del título en caso de que la imagen no se cargara
(por problemas de memoria, problemas en el servidor...) (puedes ver el título colocando
el ratón sin pulsar sobre la imagen)
Veamos la sintaxis:

7. • La etiqueta para cargar la imagen es <img src="URL DE LA IMAGEN"/>
• Alt, especifica la información de la imagen
• title, el título
• style="float:left" indica que la imagen está a la izquierda del texto. (right, a la
derecha; center, en el centro).
• margin-left:12px, la separación entre la imagen y el texto
• border: 2px; el grosor del borde. Si lo pones en "0" la imagen no muestra borde
• height="66" y width="190" son los valores de altura y anchura de la imagen.
Vídeos
Para insertar un vídeo, debes copiar el código "embed" o "insertar" y pegarlo como
HTML. Veamos como es el código para insertar un vídeo como el de siguiente
La sintaxis es:

8. De ellas solo nos fijamos en algunas etiquetas:
• <object><param name="movie" value="URL DEL
VIDEO"></param></object> nos define que hay un objeto tipo "video"
• <embed src="URL DEL VIDEO"></embed> nos inserta ese vídeo.
• width="560" height="315" son, como siempre, los valores de anchura y
altura del vídeo.
En las versiones actuales, se utiliza también el código iframe que veremos en el
próximo apartado.
Insertar webs - Iframe
Para insertar vídeos o páginas web completas se usa el código iframe. En el caso del
vídeo anterior el código sería:
• Fíjate que la etiqueta principal es <iframe>.
• src="URL" especifica la web a insertar
• width y height indican el ancho y la altura del marco insertado
• frameborder="0" el grosor del borde del marco.
Si queremos insertar la web
de un traductor online, por
ejemplo, habría que
transformar el código
anterior, sustituyendo la URL
anterior por la
correspondiente a esa web -
http://www.wordreference.co
m/-

9. El código ahora sería: