Tema 3. Conceptos Básicos de HTML
ETSI ICAI!
Departamento de Sistemas Informáticos!
Rafael Palacios Hielscher!
Cristina Puente Águeda!
Lenguajes de descripción!
– Grupo de lenguajes que describen cómo representar datos en
la pantalla.
– Establece especificaciones (como las fuentes y los tamaños),
pero deja la tarea de dibujar los caracteres y los gráficos al
dispositivo de salida.
– Independiente de la máquina.
– HTML, para páginas web, MathML o CML para ecuaciones,
SVG para imágenes vectoriales, X3D para representaciones
3D, etc.
HTML!
- HTML (Hyper-Text markup Language) es un lenguaje de
descripción de páginas derivado de otro mayor y más antiguo
(SGML).
- HTML no es más que una serie de instrucciones que permiten
especificar las características visuales de un documento.
- Se diferencia de otros lenguajes de descripción de página como
PostScript o PDF en:
– Tiene características hyper-texto (enlaces)
– Se adapta a las preferencias del usuario (resolución, tamaño
de letra...). No pretende que el resultado sea idéntico.
Estructura de un documento HTML!
– Se codifica a través de unas etiquetas especiales,
generalmente van en parejas, una de apertura y otra de cierre
• <nombre etiqueta> párrafo afectado </nombre etiqueta>
– Cada etiqueta puede poseer una serie de atributos que
modifiquen su contenido. Pueden ser obligatorios u
opcionales
• <body bgcolor="#FFFFFF" >
– En las etiquetas no hay distinción entre mayúsculas y
minúsculas
– Si la página contiene algún error HTML, no saldrá por pantalla
– Debe tener extensión .htm ó .html
Estructura de un documento HTML!
<html>
<title>
Primera WEB
</title>
<head>
</head>
<body>
CONTENIDO
</body>
</html>
Etiqueta de cabecera (<head>)!
– Comprende todo el código entre las etiquetas <head> y </head> y puede
contener:
• Titulo de la página <title> primera web </title>
• Etiqueta BASE <base href="http://www.upco.es/dweb/">
– define una URL que se tomará como base para todos las rutas Etiqueta
LINK <link href="estilos/estilos.css" rel="stylesheet" type="text/css">
– define relaciones concretas entre el documento actual y otros documentos
o ficheros relacionados con él
– href="url“ sirve para establecer la url del documento o fichero relacionado
con el actual.
– rel="relacion“ sirve para definir el tipo de relación existente entre el
documento actual y el referenciado mediante el atributo href.
• stylesheet que establece la relación con un fichero externo de declaraciones de
estilos (fichero CSS)
• shortcut icon para fijar un icono propio como imagen representativa de la
página cuando el usuario la incluya en su carpeta "Mis Favoritos".
Etiqueta de cabecera (<head>)!
• Etiqueta META <meta name="language" content="es">
– Proporciona información complementaria sobre el documento,
fundamental a la hora de conseguir que los buscadores de
Internet indexen nuestra página en sus bases de datos
• Etiqueta SCRIPT <script language="JavaScript"> </script>
– Para definir bloques de código de script que se deban ejecutar en
nuestra página
<script language="JavaScript">
function alerta(mensaje)
{
alert(mensaje)
}
</script>
Etiqueta de cuerpo de página (<body>)!
– Su contenido si es visible en la ventana del navegador y puede
contener los siguientes elementos:
• Elementos estándares HTML: párrafos, formularios, tablas, listas, etc.
• Capas definidas mediante etiquetas <div>…</div>, <span>…</span>
• Codigos de lenguajes en servidor: JSP, Java, ASP, PHP, etc.
• Objetos incrustados: Applets, animaciones Flahs, etc.
<body bgcolor="#FFFFFF" >
<div id="Layer1" style="position:absolute; left:0px; top:9px; width:773px; height:168px; z-
index:3">
<div align="left">
<table width="100%" height="178" border="0" cellpadding="0" cellspacing="0">
<tr>
height="154"></td>
</tr>
</table>
</div>
</body>
<td width="23%" rowspan="2"><img src="imagenes/logo.jpg" width="141"
Etiqueta de cuerpo de página (<body>)!
– Posee un grupo de atributos que determinan la apariencia del
fondo de la página:
• background="ruta_imagen“, que define una imagen de fondo para
la página web, y en donde "ruta_imagen" es la ruta en la que se
encuentra la imagen de fondo
• bgcolor="color“, que establece un color de fondo para la página, y
en donde "color" puede venir expresado mediante el nombre web
inglés estándar o mediante el código hexadecimal del color
– <body background="bgrnd64.gif“ bgcolor=“#0C4A0C”>
Etiqueta de cuerpo de página (<body>)!
– Se puede definir el color del texto de la página y de los enlaces:
• text="color", para el texto de la página.
• link="color", para los enlaces normales.
• alink="color", para los enlaces activos.
• vlink="color", para los enlaces visitados.
– <body background="bgrnd64.gif" text="#0C4A0C"
link="#0C4A0C" vlink="#0C4A0C" alink="#0C4A0C">
Organización del texto!
– Saltos de línea tabuladores y otros separadores (excepto los
espacios entre palabras) son ignorados por navegadores por lo
que hay que insertarlos mediante etiquetas
<html>
...........
<body>
EN
UN
LUGAR
DE LA
MANCHA...
</body>
</html>
Organización del texto!
– Salto de línea: <br>
– División de párrafos (mayor espacio que el salto de línea) <p>
– Alineación del texto
• Centrado <center>
• Derecha <p align=right>
• Izquierda <p align=right>
– Espacio  
– Sangrado de texto <blockquote>
– Subrayado <u>
– Subíndice <sub>
– Superíndice <sup>
Caracteres especiales!
Carácter
<
>
á
Á
é
É
í
Í
ó
Ó
ú
Ú
Ñ
Código
<
>
á
Á
é
É
í
Í
ó
Ó
ú
Ú
Ñ
Carácter
€
ç
Ç
ü
Ü
&
¿
¡
"
·
º
ª
¬
Código
€
ç
Ç
ü
Ü
&
¿
¡
"
·
º
ª
¬
Organización del texto!
<b>EN </b> <br>
<i>UN <p>
<u>LUGAR </u> <br>
DE LA <center>
<p>
<sub>MANCHA...
Organización del texto!
– Afecta al tipo de fuente que queramos aplicar sobre el texto.
– Permiten modificar más parámetros para modelar el texto a
nuestro gusto mediante las etiquetas <font> texto </font>
– <font size=número> el atributo size modifica el tamaño del texto
– Puede tomar valores entre 1 y 7
• <font size=3>Hola </font>
• <font size=5>a todos </font>
– <font color=“valor RGB”> para cambiar el color del texto
• <font color=“#FF0000” size=3 >Hola </font>
• <font color=“#0000FF” size=5 >a todos </font>
Organización del texto!
– <font face=“nombre de la fuente”> define el tipo de fuente que se
va a utilizar. Se pueden escribir varios tipos
• <font color="#993366" size="4" face="Comic Sans MS, Arial, MS
Sans Serif">
– <basefont> establece el tamaño y color y tipo de letra por defecto
para todo el texto
– No necesita etiqueta de cierre
• <basefont color="#006699" size="4" face="Arial">
Organización del texto!
- Ejemplo
<basefont color="#006699" size="4" face="Arial">
HOLA
<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">
A TODOS
Encabezados!
– <H número de
encabezado> Se utilizan
para crear títulos dentro de
una página
– La diferencia entre los
distintos tipos de
encabezado es el tamaño
de la letra, el tipo de
resaltado, y la separación
existente entre el texto y
los elementos que tiene
encima y debajo de él
– Se puede alinear el texto
mediante la propiedad align
<H2 align="center">
Marquesinas!
– <marquee> Las marquesinas son líneas de texto que pueden
desplazarse de un lado a otro de la ventana en forma de línea
– La marquesina, por defecto, se desplaza de derecha a izquierda
indefinidamente, pero se pueden variar estas propiedades
– A través del atributo direction puede modificarse la dirección en la
que se moverá el texto
• down, de arriba a abajo
• up, de abajo a arriba
• right, de derecha a izquierda o left de izquierda a derecha
– El atributo behaviour modifica el tipo de movimiento
• alternate, de lado a lado de la ventana, como si rebotara
• scroll, de un lado a otro, continuamente
• slide, de un lado a otro, pero una sola vez
Marquesinas!
– Mediante el atributo bgcolor se puede cambiar el color de fondo
• <marquee bgcolor="#006699" behavior="alternate" direction="right">
<font color="#FFFFCC" size="5">ejemplo de marquesina </font>
</marquee>
Crear cuenta
Comentarios de: Diseño y creación de páginas web: Tema3. Conceptos básico de HTML (0)
No hay comentarios