Creación de páginas Webdi002.edv.uniovi.es › ~gonzalezaloignacio › cmsSIAP › data › files...

Creación de páginas Web

1Ignacio González Alonso. 2009

HTML HTML es el lenguaje utilizado para crear páginas Web

Una página Web no es más que un archivo de texto, generalmente con extensión .html

Una página Web es un formato universal para presentar información


¿Qué se va a ver hoy? Artículo (comentado en equipo formato 4x4) repaso

tema anterior e introducción este tema.

¿Qué es el Lenguaje de marcado de Hipertexto (HTML)?

Ejemplo de una página editada con HTML

Ejercicio práctico que permita practicar lo aprendido:

Crear carta de presentación (ejercicio que se puso en un examen el año pasado)

Ignacio González Alonso. 2008 3

noticiaElMundo15122009.jpg

Características de HTML HyperText MarkUP Language: Es un lenguaje de

“marcas” ó etiquetas para crear documentos de Hyper-Texto

Las etiquetas definen la estructura del documento

El navegador determina la presentación en base a esas etiquetas


Etiquetas HTML Las etiquetas HTML encierran elementos del

documento para definir su estructura

Se presentan por pares, una abre una sección y otra la cierra. Por ejemplo <html> …. </html>

Algunas etiquetas pueden tener atributos, para darvalor a alguna de sus propiedades


Estructura de un documento Un documento HTML tiene dos partes: El encabezado: <head> …. </head>

El cuerpo: <body> …. </body>

Las dos partes están contenidas en el documento:<html>

<head> …. </head>

<body> …. </body>

</html>


El encabezado Generalmente contiene información relativa al

documento (su autor, idioma, etc.)

Un elemento habitual en el encabezado es el título. En el caso de Windows se utiliza como título para la ventana del navegador:

<head>

<title>Ejemplo de título de documento</title>

</head>


El cuerpo Contiene la parte visible del documento cuando lo

abrimos en el navegador:

<body>

Este es el texto de mi primera página Web

</body>


Ejemplo de documento<html>

<head>

<title>Ejemplo de título de documento</title>

</head>

<body>Este es el texto de mi primera página Web

</body>

</html>


Visualización del Ejemplo Creamos un archivo de texto, con un editor (Bloc de

Notas), y le damos extensión .html:


Visualización del Ejemplo Abrimos el archivo “ejemplo.html” con Internet

Explorer:

Título

Contenido


Contenido del documento El cuerpo puede contener elementos con distintos

formatos:

Párrafos: Con distintas alineaciones

Títulos: De diferentes niveles

Listas: Numeradas ó con viñetas

Tablas: Con datos en filas y columnas

Imágenes …


Párrafos Su contenido se delimita con las etiquetas <p> y

</p> Se puede definir su alineación con el atributo align

y los valores left right center Justify

Se puede introducir un “salto de línea” mediante la etiqueta <br /> o <br></br>


Ejemplo de párrafo<html>

<body>

<p align=“center”>

Esto es un párrafo centrado

</p>

</body>

</html>


Estilos de texto Podemos cambiar el estilo de porciones de texto, con

los más habituales:

Negrita: <b> … </b>

Cursiva: <i> … </i>

Subrayado: <u> … </u>

Subíndice: <sub> … </sub>

Superíndice: <sup> … </sup>


Ejemplo de estilos<html><body><p><b>Texto en negrita</b> <br><i>Texto en cursiva</i> <br><u>Texto subrayado</u> <br>Superíndice: m<sup>2</sup> <br><u><b><i>En negrita, cursiva y subrayado</i></b></u>

</p></body></html>


Títulos Podemos utilizarlos dentro del documento para

identificar secciones

Hay tres niveles de título, del más general al más específico

Se comportan como párrafos y por lo tanto es posible cambiar su alineación


Títulos Su contenido se delimita con las etiquetas <hn> y

</hn>

n: Indica el nivel del texto, de 1 a 6 (aunque los más importantes serán los 3 primeros.

<h1>Contenido del título</h1>


Ejemplos de título<html>

<body>

<h1>Ingeniería Topográfica</h1>

<h2>IngenieríaInformática</h2>

<h3>Internet</h3>

</body>

</html>


Listas Pueden ser numeradas (ordenadas) ó no numeradas

(con viñetas)

Las numeradas se definen con las etiquetas <ol> y </ol>. Las no numeradas con <ul> y </ul>

Cada elemento aparece en una línea, precedido por una viñeta ó un número. Se define con las etiquetas <li> y </li>


Ejemplo de lista numerada<html><body>

<h1>Lista numerada</h1><ol>

<li>Elemento 1</li><li>Elemento 2</li><li>Elemento 3</li>

</ol></body></html>


Ejemplo de lista con viñetas<html><body>

<h1>Lista no numerada</h1><ul>

<li>Primer elemento</li><li>Segundo elemento</li><li>Tercer elemento</li>

</ul></body></html>


Tablas Permiten disponer datos en filas y columnas

Cada una de las celdas puede ser de datos ó de encabezamiento

Pueden tener ó no borde


Seguir aquí

Tablas Se delimitan con las etiquetas <table> y </table>

Cada fila está incluida entre las etiquetas <tr> y </tr>

Una celda de datos se define con <td> y </td>

Una celda de título se define con <th> y </th>

Para que la tabla tenga borde, se incluye el atributo border en la etiqueta <table>


Ejemplo de tabla<html><body>

<table border><tr>

<th>Título 1</th> <th>Título 2</th></tr><tr>

<td>Dato 1</td> <td>Dato 2</td></tr>

</table></body></html>


Imágenes Se pueden introducir en cualquier punto del

documento.

Están soportados los formatos más habituales:

GIF

JPEG

PNG

Se incluyen mediante la etiqueta <img> con la ruta y el nombre del archivo


Ejemplo de imagen La etiqueta IMG referencia al archivo de la imagen, con su

ruta y nombre:

<html>

<body>

<h1>Escuela Universitaria de Ingenierías Técnicas</h1>

<p><img src="euitm.png"><br>

Campus de Mieres

</p>

</body>

</html>


Enlaces Los enlaces ó hipervínculos permiten enlazar unos

documentos con otros

Cuando el usuario hace “clic” sobre ellos, el navegador carga otra página

Se definen con la etiqueta <a> y el URL de la página de destino


Enlaces El enlace incluye un elemento visible para el

usuario. Puede ser texto ó una imagen.

Este elemento se incluye entre las etiquetas <a> y </a>. Aparece en azul y subrayado

La etiqueta <a> incluye un atributo href con el URL de destino

Por ejemplo:<a href=“http://mieres.uniovi.es”>Campus de Mieres</a>


Ejemplo de enlace<html>

<body>

<p>

<img src="euitm.png">

<a href="http://www.mieres.uniovi.es">Campus de Mieres</a>

</p>

</body>

</html>


Ejemplo de Enlace Enlace a una dirección de correo:

El URL contiene una dirección de e-mail

Al accionarlo se abre el cliente de correo

<a href=“mailto:[email protected]>Mándame un correo</a>


Ejercicio: Prepárese una carta de presentación en formato

HTML. Utilícense al menos:

Encabezados de dos tipos.

Una tabla.

Título de la página: “Carta de presentación: DniDelAlumno”

2 Párrafos.

Una imagen.


Resumen de lo que se ha visto Hemos visto que es HTML (Hyper text markup

language)

Se ha comentado un ejemplo resuelto.

Se ha realizado una práctica para aprender a usar HMTL.


Creación de páginas Webdi002.edv.uniovi.es › ~gonzalezaloignacio › cmsSIAP › data › files...

Documents

Transcript of Creación de páginas Webdi002.edv.uniovi.es › ~gonzalezaloignacio › cmsSIAP › data › files...