Scribd
Cargar
32 vistas35 páginas

Tema 2 - HTML

Este documento trata sobre los lenguajes de marcas para elaborar páginas web. Explica etiquetas básicas de HTML para estructurar documentos, formatear texto e imágenes y añadir enlaces, listas y tablas.

Cargado por

Diego López Baeza
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
32 vistas35 páginas

Tema 2 - HTML

Este documento trata sobre los lenguajes de marcas para elaborar páginas web. Explica etiquetas básicas de HTML para estructurar documentos, formatear texto e imágenes y añadir enlaces, listas y tablas.

Cargado por

Diego López Baeza
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 35

TEMA 2:

ELABORACIÓN DE PÁGINAS WEB


CON LENGUAJES DE MARCAS
ÍNDICE

1. Introducción
2. Lenguaje HTML
3. Lenguaje XHTML (eXtensible HTML)
4. Hojas de Estilo (CSS)
5. Integración de Scripts (JavaScript)
1. INTRODUCCIÓN

Los lenguajes de marcas no son equivalentes a los lenguajes de programación


aunque se definan igualmente como lenguajes, son sistemas de descripción de
información.

Para ello se utilizan etiquetas o marcas encerradas entre los signos “<” y “>”.

Podemos definir un lenguaje de marcas como una forma de codificar un documento


donde, junto al texto, se incorporan etiquetas, marcas o anotaciones con información
relativa a la estructura del texto, a su presentación o a información del propio
documento.
2. LENGUAJE HTML – ETIQUETAS Y ATRIBUTOS

El lenguaje HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup


Language) permite la creación de páginas web.
2.1 NORMAS HTML

 Los nombres de las etiquetas no son sensibles a mayúsculas o minúsculas.


 Los nombres de las etiquetas no deben contener espacios en blanco.
 Las etiquetas pueden anidarse
<b><i>Esto va en negrita</i> y en cursiva</b>
2.2 ESTRUCTURA BÁSICA DE UN DOC. HTML
Los documentos HTML están delimitados por las etiquetas <html> y </html>.
Dentro del documento se distinguen 2 partes:
 La cabecera (head) → etiquetas <head> y </head>. Contiene la identificación e
información del documento.
Dentro se pone el título de la página (<title>Título de la página</title>), que
aparecerá en la barra de título de la ventana/pestaña del navegador.
 El cuerpo (body) → etiquetas <body> y </body>. Contiene el contenido de lo que se
visualiza en pantalla (tablas, texto, imágenes...).

Los archivos HTML tienen la extensión .htm o .html


2.2 ESTRUCTURA BÁSICA DE UN DOC. HTML

<html>
<head>
<title>Título </title>
</head>
<body>
Aquí va el resto de la página (texto, imágenes...).
</body>
</html>
2.3 FORMATEO DE TEXTO
 Etiquetas de cabecera:
 <h1>...</h1> → Cabecera de nivel 1 (esta es la más grande)
 <h2>...</h2> → Cabecera de nivel 2
 <h3>...</h3> → Cabecera de nivel 3
 <h4>...</h4> → Cabecera de nivel 4
 <h5>...</h5> → Cabecera de nivel 5
 <h6>...</h6> → Cabecera de nivel 6 (Esta es la más pequeña)

 Etiquetas de texto:
 <b>Negrita</b>
 <i>Cursiva</i>
 <sup>Superíndice</sup>
 <sub>Subíndice</sub>
2.3 FORMATEO DE TEXTO
 Etiquetas de párrafo:
 <p>Párrafo</p>

 <div align=”x”>...</div> → Crea una división en la página, se utiliza para agrupar etiquetas y
aplicar estilos. Se escribe texto y salta líneas. Todo lo incluido en “div” se puede justificar a la
izquierda (left), a la derecha (right), centrado (center) o justificado (justify).

 <span>...</span> → Similar a “div” pero no admite atributos, se usa para las hojas de estilo.

Ejercicio 1. Formateo de texto


2.3 FORMATEO DE TEXTO
 Otras etiquetas:
 <hr> → inserta una barra horizontal
 <hr size”tamaño”> → Inserta una barra horizontal como indica el tamaño
<hr size=10>
 <br> → Salto de línea
 <!-- … --> → Comentarios

También es posible utilizar la etiqueta align para centrar, alinear a la izquierda o a la


derecha
<h1 align=“center”> Cabecera 1 centrada </h1>
<h2 align=“right”> Cabecera 2 a la derecha </h2>
2.3 FORMATEO DE TEXTO
 Etiquetas de color y tamaño:
 <font color=”código color”>...</font> → En “código color” se escribe el código del color en
hexadecimal o el nombre del color.
Ejemplos:
 Azul = #000080
 Verde = #BEF781

 <font size=”tamaño”>...</font> → Con el atributo size se especifica el tamaño, es un número


entre 1 y 7, por defecto es el 3.

 <font face=”nombre_fuente”>...</font> → Cambia al tipo de fuente especificada.


 <body bgcolor=”color”>...</body> → Color al texto del documento.

Ejercicio 2. Formateo de texto y colores


2.4 LISTAS. NUMERACIÓN Y VIÑETAS

HTML dispone de 3 tipos de listas:


 Descriptivas: Su finalidad es que aparezca una descripción asociada a cada uno de los
elementos de la lista.
<dl>
<dt>elemento1</dt>
<dd>descripción1</dd>
<dt>elemento2</dt>
<dd>descripción2</dd>
</dl>
2.4 LISTAS. NUMERACIÓN Y VIÑETAS
 Numeradas: Permiten indicar cuál será el valor de comienzo en el primer elemento y qué
tipo de numeración se va a usar indicándose en la etiqueta.
<ol start=”valor” type=”tipo”>
<li>elemento</li>
</ol>

“Tipo” puede ser:


 “A” (letras mayúsculas: A, B, C, D…),
 “a” (letras minúsculas: a, b, c, d…),
 “i” (numeración romana minúscula: i, ii, iii, iv…),
 “I” (numeración romana mayúscula: I, II, III, IV…),
 “1” (numeración con números: 1, 2, 3, 4…). Esta es la opción por defecto.
2.4 LISTAS. NUMERACIÓN Y VIÑETAS
 No Numeradas: Son listas tipo “viñeta”
<ul >
<li>elemento</li>
</ul>

Para cambiar entre diferentes viñetas. podemos utilizar el atributo style en línea con los
siguientes valores:
 <ul style="list-style-type:circle">
 <ul style="list-style-type:square">
 <ul style="list-style-type:disc">

Ejercicio 3. Lista numerada y Ejercicio 4. Lista no numerada


2.5 ENLACES, LINKS O HIPERVÍNCULOS
Para incluir enlaces se utiliza la etiqueta <a> </a>.
 <a href=”http://dirección”>Texto del enlace</a> → “dirección” es la URL de la página que
vamos a enlazar.
 <a href=”actividad2.html”>Actividad</a> → Página web del directorio donde se encuentran
nuestras páginas
 <a href=”foto.formato”>Foto</a> → Para enlazar ficheros dentro de la carpeta en la que está
la web.
 <a href=“mailto:[email protected]”>Contactar</a> → Enviar e-mail a la dirección
nombrada.
 <a href=”#parrafo”>Saltar al ancla</a> → Para saltar a otra zona dentro del documento; el
párrafo ha de aparecer en algún lugar de la siguiente forma: <a name=”parrafo”>texto</a>.
A estos links se les llama anclas.

Ejercicio 5. Enlaces
2.5 IMÁGENES
Para insertar una imagen en una página web se utiliza la etiqueta <img src=”imagen”>, por
ejemplo “<img src=”dibujo.jpg”>. La imagen tendrá que estar guardada en la misma carpeta
que la página.

También se puede utilizar una imagen dentro de un enlace, por ejemplo:


<a href=”listanonumerada.html”><img src=”dibujo.jpg”></a>

Los formatos más utilizados son “.gif”, “.png” y “.jpg” porque ocupan poco espacio y se
cargan rápidamente.
2.5 IMÁGENES
La etiqueta img admite los siguientes atributos:

Atributo Uso
width = ”ancho” Ancho de la imagen.
height = “alto” Alto de la imagen.
Alineación de la imagen, puede ser: top (arriba), bottom
align = “alineación”
(abajo), left (izda.), right (dcha.), center (centrado)
Define un texto alternativo que se verá si el ratón pasa por la
alt o title = “comentario”
imagen o si el navegador no puede cargar la imagen.
border = “tamaño” Tamaño del borde de la imagen.

Ejercicio 6. Imágenes
2.6 TABLAS
Las tablas vienen delimitadas por las etiquetas <table> ... </table>. Cada fila está
delimitada por las etiquetas <tr> ... </tr> y, dentro de las filas, las columnas vienen
delimitadas por las etiquetas <td> ... </td>.

Dentro de las columnas se coloca el texto o imágenes que contiene la celda.

Para poner títulos a las columnas se utiliza la etiqueta <th> ... </th>.

IMPORTANTE: Las tablas se codifican por filas, es decir, hasta que no se termina la primera
fila, no se comienza con la segunda.
2.6 TABLAS
<table border="1">
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
</tr>
<tr>
<td>fila2, col. 1</td>
<td>fila2, col 2</td>
</tr>
<tr>
<td>fila 3, col 1</td>
<td>fila 3, col 2</td>
</tr>
</table>
2.6 TABLAS
Atributos utilizados para las tablas:

Atributo Uso
bgcolor=”color” Color del fondo de la tabla, de la fila o de la celda
bordercolor=”color” Color del borde de la tabla, la fila o la celda
Alinea verticalmente el contenido de las celdas: top (arriba),
valign=”valor”
bottom (abajo), left (izda.), right (dcha.), center (centrado)
align = “valor” Alinea el texto: left, center o right
background=”imagenfondo” Colocar un fondo para la tabla
Define en px el espacio entre los bordes de la celda y el
cellpadding=”número”
contenido
height=”número” Define altura de tabla en px o %
width=”número” Define anchura de tabla en px o %

Ejercicio 7. Tabla.
2.6 TABLAS
Combinar celdas

Se deben colocar en las marcas <th> o <td> los siguientes atributos:

 rowspan=”valor”, para indicar el número de filas que se quiere combinar,


verticalmente.

 colspan=”valor”, para indicar el número de columnas que se quiere combinar,


horizontalmente.

Ejercicio 8. Combinar celdas y Ejercicio 9. Tablas avanzadas


2.7 FORMULARIOS
Están formados por cajas de texto y botones que permiten introducir datos.
Para definir un formulario se utilizan las etiquetas <form> ... </form>.
Entre estas dos etiquetas se colocan todos los campos y botones que componen el
formulario.
Dentro de la etiqueta <form> se pueden especificar algunos atributos:

Atributo Uso
Tipo de acción a llevar a cabo con el formulario. Si no se pone
action=”acción a realizar”
action los datos del formulario no se envían a ningún sitio.
Forma en la que el formulario es enviado. Normalmente,
method=”post” o “get”
daremos siempre el valor post.
2.7 FORMULARIOS
El caso más habitual tendrá el siguiente aspecto:

<form action=”programa.php” method=”post”>  Envía los datos a un fichero del


servidor llamado “programa.php”

Los datos del formulario, no se envían a ningún


<form action=”#” method=”post”>  servidor. Sirve para aprender formulario y hacer
pruebas.

La mayoría de los controles de un formulario, se crean con la etiqueta <input>.

Un atributo común a todos es “name” para dar nombre al control, y es recomendable usarlo
siempre. Otro, también común a todos, es “align”.
2.7.1 Cajas de texto.
En las cajas de texto se envía al servidor texto introducido por el usuario.
<input type=”text” name=”mitexto”>

Atributo Uso
Determina la anchura de la caja de texto (valor por defecto:
size=”número de caracteres”
20).
Determina el número máximo de caracteres que entran. Si no
maxlength=”número”
se pone no hay límite.
Sirve para especificar un texto por defecto antes de que el
value=”texto”
usuario escriba nada.
Muestra un bocadillo informativo cuando se pasa el cursor por
title=”texto”
encima.
Texto que se muestra en la caja de texto antes de que el
placeholder=”texto”
usuario inserte cualquier texto.

Ejercicio 10. Formulario Cajas de Texto


2.7.2 Cajas de contraseña.

En ocasiones es conveniente pedir al usuario información oculta como puede ser una
clave de acceso o password (contraseña).

Para ello usaremos <input type=”password” name=”clave”>


2.7.3 Botones de elección o radio buttons.

Permiten elegir una entre varias opciones, excluyentes entre sí.

Se puede especificar que una opción esté seleccionada por defecto insertando el
atributo “checked”.

Para indicar que una serie de botones pertenecen a un mismo grupo se hace con el
atributo “name”, que debe ser el mismo para todo el grupo, y usaremos el atributo
“value” para dar un nombre distinto a cada uno de los botones.

La etiqueta es <input type=”radio” name=“nombre” value=“texto”> .


2.7.3 Botones de elección o radio buttons.

<div align=”center”>
<h3 align=”center”>Seleccione el país de procedencia:</h3>
<form>
<p><input type=”radio” name=”pais” value=”esp” checked>España</p>
<p><input type=”radio” name=”pais” value=”port”>Portugal</p>
<p><input type=”radio” name=”pais” value=”fr”>Francia</p>
</form>
</div>

Ejercicio 11. Formulario Radio Buttons


2.7.4 Cajas de selección o checkbox.

Permiten seleccionar varias opciones de una lista.

Cada caja de selección es independiente de las demás y por tanto el valor del atributo
“name” debe ser diferente en cada una.

La etiqueta es <input type=”checkbox” name=“nombre”> .


2.7.4 Cajas de selección o checkbox.

<div align=”center”>
<h3 align=”center”>Selecciones su(s) nacionalidad(es):</h3>
<form>
<p><input type=”checkbox” name=”esp”>España</p>
<p><input type=”checkbox” name=”ita”>Italiana</p>
<p><input type=”checkbox” name=”fr”>Francesa</p>
</form>
</div>

Ejercicio 12. Formulario Checkbox


2.7.5 Botones de envío y borrado.
 Los botones de envío se utilizan para enviar los datos del formulario. Deberá incluirse
esta etiqueta:
<input type=”submit” value=”texto del botón” name=”nombre del botón”>

 HTML dispone de un control que permite borrar los datos actuales de los campos del
formulario y restablecer los valores por defecto, se llaman botón de borrado o
reseteado.
<input type=”reset” name=”nombre” value=”Texto del botón”>.
2.7.6 Botón genérico.

Este botón no tiene ninguna función específica, es decir, podemos darle la función que
se estime oportuna.
<input type=”button” value=”Pulse para continuar”>.

Las acciones que debe llevar a cabo este botón al ser pulsado deben indicarse con un
lenguaje de script(javascript), para ello usaremos el atributo “onclick”.
<input type=”button” value=”texto botón” onclick=”código de script”>
2.7.6 Botón genérico.

Ejemplos onClick:

<input type=”button” value=”Cerrar ventana”


onclick=”window.close();”>

<input type=”button” value=”Pulse para ver el mensaje”


onclick=”alert (‘Has pulsado el botón!!‘);”>

<input type=”button” value=”Cargar página en la misma ventana”


onclick=”window.location.replace(‘formulario1.html’);”>

<input type=”button” value=” Cargar página en otra ventana”


onclick=”window.open (‘formulario1.html’);”>

Ejercicio 13. Botones


2.7.7 Etiqueta <select>.
Mediante esta etiqueta se puede definir una entrada de datos en forma de lista
desplegable que presenta varias opciones de elección y el usuario puede elegir una de
ellas.
Si queremos establecer una opción por defecto usaremos el parámetro “selected”.
El parámetro value fija el valor asociado al parámetro name cuando se envíe el formulario.
Este valor debe ser único para cada opción.

<select name=”milista”>
<option value=”uno”>Uno</option>
<option value=”dos”>Dos</option>
<option value=”tres”>Tres</option>
<option value=”cuatro” selected>Cuatro</option>
<option value=”cinco”>Cinco</option>
</select>

Ejercicio 14. Select


2.7.8 Otros atributos.

 Required: este atributo obliga a que el campo se rellene, si no, el navegador mostrará
un mensaje.
<input type=”text” name=”nombre” required>

 Autofocus: al cargar el formulario el foco se coloca en el elemento que contiene esta


propiedad.
<input type=”text” name=”nombre” required autofocus>
2.7.9 Otros tipos de entrada.
No todos los navegadores soportan todos los tipos de entrada, aunque se pueden ursar. Si no son
compatibles, se comportán como cajas de texto normales:

• color • date • range


• email • datetime • number
• url • month

<form action="" method="post">


Elige color: <input type="color" name="micolor"><br>
Fecha de nacimiento: <input type="date" name="fechanac"><br>
E-mail: <input type="email" name="correo"><br>
Elige el mes: <input type="month" name="mes"><br>
Teclea URL: <input type="url" name="misitio"><br>
Teclea cantidad (entre 1 y 50): <input type="number"
name="cantidad" min="1" max="50"><br>
Rango: <input type="range" name="rango" min="1" max="20"><br>
<input type="submit">
</form>

También podría gustarte