Scribd
Cargar
13 vistas20 páginas

Cap 03

El documento aborda los conceptos básicos de HTML, un lenguaje de descripción de páginas web que permite especificar características visuales mediante etiquetas. Se detalla la estructura de un documento HTML, incluyendo las etiquetas <head> y <body>, así como atributos y elementos que afectan la presentación del contenido. Además, se mencionan características como la organización del texto, encabezados, y el uso de marquesinas para crear efectos visuales en la página.

Cargado por

antong8rc5a
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
13 vistas20 páginas

Cap 03

El documento aborda los conceptos básicos de HTML, un lenguaje de descripción de páginas web que permite especificar características visuales mediante etiquetas. Se detalla la estructura de un documento HTML, incluyendo las etiquetas <head> y <body>, así como atributos y elementos que afectan la presentación del contenido. Además, se mencionan características como la organización del texto, encabezados, y el uso de marquesinas para crear efectos visuales en la página.

Cargado por

antong8rc5a
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/ 20

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>
<head>
<title>
Primera WEB
</title>
</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>
<td width="23%" rowspan="2"><img src="imagenes/logo.jpg" width="141"
height="154"></td>
</tr>
</table>
</div>
</body>
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 &nbsp
– Sangrado de texto <blockquote>
– Subrayado <u>
– Subíndice <sub>
– Superíndice <sup>
Caracteres especiales!

Carácter Código Carácter Código

< &lt; € &euro;

> &gt; ç &ccedil;

á &aacute; Ç &Ccedil;

Á &Aacute; ü &uuml;

é &eacute; Ü &Uuml;

É &Eacute; & &amp;

í &iacute; ¿ &iquest;

Í &Iacute; ¡ &iexcl;

ó &oacute; " &quot;

Ó &Oacute; · &middot;

ú &uacute; º &ordm;

Ú &Uacute; ª &ordf;

Ñ &Ntilde; ¬ &not;
Organización del texto!
<b>EN </b> <br>
<i>UN <p>
<u>LUGAR </u> <br>
DE &nbsp;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>

También podría gustarte