PDF de programación - Diseño y creación de páginas web: Tema3. Conceptos básico de HTML

Imágen de pdf Diseño y creación de páginas web: Tema3. Conceptos básico de HTML

Diseño y creación de páginas web: Tema3. Conceptos básico de HTMLgráfica de visualizaciones

Publicado el 14 de Enero del 2017
367 visualizaciones desde el 14 de Enero del 2017
1,6 MB
20 paginas
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 &nbsp
–  Sangrado de texto <blockquote>
–  Subrayado <u>
–  Subíndice <sub>
–  Superíndice <sup>

Caracteres especiales!

Carácter

<
>
á
Á
é
É
í
Í
ó
Ó
ú
Ú
Ñ

Código
&lt;
&gt;
&aacute;
&Aacute;
&eacute;
&Eacute;
&iacute;
&Iacute;
&oacute;
&Oacute;
&uacute;
&Uacute;
&Ntilde;

Carácter


ç
Ç
ü
Ü
&
¿
¡
"
·
º
ª
¬

Código
&euro;
&ccedil;
&Ccedil;
&uuml;
&Uuml;
&amp;
&iquest;
&iexcl;
&quot;
&middot;
&ordm;
&ordf;
&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>
  • Links de descarga
http://lwp-l.com/pdf630

Comentarios de: Diseño y creación de páginas web: Tema3. Conceptos básico de HTML (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad