clase 1 - electivo i (html).ppt

ELECTIVO IELECTIVO IAPLICACIONES WEB CON SOFTWARE LIBRE

TEMA: FUNDAMENTOS DE HTML

DOCENTE: ASCON VALDIVIA OSCAR

AGENDA

1. HTML2. Etiquetas de HTML3. Tablas4. Frames5. Formularios

HTML(HYPERTEXT MARKUP LANGUAGE)

Qué es HTML

HyperText Markup Language

Lenguaje de marcado que nos permite especificar la

manera en la que se muestran y organizan los datos

en una página Web.

Este lenguaje es interpretado por los distintos

navegadores. No necesita compilarse

HTML

Usa etiquetas que determinan cada elemento Texto Imágenes Enlaces Tablas

Las etiquetas pueden tener atributos que a su vez determinan el formato de cada elemento Tamaño Alineamiento Color

Ejemplo <font size=“8”>Este texto tiene tamaño 8</font>

Generación de páginas HTML

Existen herramientas que ayudan a la generación de páginas web (editores HTML)

Pueden crearse mediante cualquier programa de edición de texto

Para comprobar los resultados puede usarse cualquier navegador web

Formato de una página

Un documento básico HTML consta de dos partes Cabecera Cuerpo

Ejemplo<html>

<head>

<title>Titulo</title>

…

</head>

<body>

Contenido de la pagina

</body>

<html>

Cabecera (<head>)

Puede contener más elementos además del título Etiquetas de contenido

<meta name=“description” content=“Descripción del contenido de la pagina>

Código de scripts con funciones que podrán ser usadas en el documento

Javascript

Cuerpo (<body>)

En la etiqueta se pueden especificar atributos de la página web Bgcolor: color de fondo

Blue, red, green,… Formato RGB en hexadecimal #rrggbb

Text: color del texto de la pagina Link: color de los enlaces Vlink: color de los enlaces ya visitados Alink: color de los enlaces al seleccionarlos Background: imagen de fondo

Diseño de paginas web

Como ya hemos dicho, podemos usar tablas para diseñar nuestras paginas web

Primero debemos realizar un boceto de la estructura que queremos que tenga

Después adecuaremos la estructura a una tabla

Diseño páginas Web

Para ajustar la tabla a la página Web usamos nuevos atributos en la etiqueta body

Márgenes de la página Leftmargin Topmargin Rightmargin Bottommargin

ETIQUETAS DE HTML(FORMATO DE DOCUMENTO)

Formato de textoFormato de texto

Títulos <h1>, <h2>, …, <h6>

A menor número, mayor tamaño Fuentes

Negrita <b> Itálica <i> Subrayado <u> Marca <font>

Size: tamaño Face: tipo Color: color, se especifica igual que en casos anteriores

Formato de textoFormato de texto

Nuevas líneas <br>: no tiene etiqueta de finalización, inserta

una nueva línea Líneas separadoras

<hr>: linea de separación horizontal Align: alineación Width: ancho Size: alto Color: color

Parrafos <p></p>

Align: alineación (right, left, center, justify)

ListasListas

Listas sin orden <ul>: designa el inicio de la lista

<li>: cada uno de los elementos Type: tipo de casilla (circle, square, disc,…)

Se pueden anidar

Listas ordenadas <ol> : designa el inicio de la lista

Type: cómo numera (1, I, …) <li>: cada uno de los elementos

ImágenesImágenes

<img src=“localización de la imagen”> Alt=texto que aparece al colocarnos sobre la

imagen Align=alineación (top, middle, bottom, left, right Width= ancho (tanto por ciento, pixels) Height= alto Border= borde Hspace= espacio horizontal entre imagen y texto Vspace= espacio vertical entre imagen y texto

Enlaces (I)Enlaces (I)

Permiten establecer llamadas de una página a otra

También se pueden enlazar otros archivos <a href=“localización de la página

web”></a> Se puede poner texto o imágenes

Localización puede ser Dentro de la propia página (anclas) A otra página (¡¡Mucho cuidado!!)

Dentro de mi ordenador externa

Enlaces (II)Enlaces (II)

Localización de destinos (rutas) Absoluta: especificamos la ubicación exacta dónde se

encuentra el archivo. C:\directorioLocal\archivo_destino.extension (¡¡NO

FUNCIONARÁ AL PUBLICAR EN LA WEB!!) http://www.midominio.com/archivo_destino.extension

Relativa: especificamos la ubicación en función de dónde se encuentran página origen y archivo destino Supongamos que la página origen se encuentra en

C:\directorioLocal\origen.html

Y la destino se encuentra en C:\directorioLocal\otroDirectorio\destino.html

El enlace debe apuntar a: ./otroDirectorio/destino.html

Enlaces (III)Enlaces (III)

Atributo target Me permite determinar dónde abrir la nueva pagina

_blank: nueva ventana _parent: la que abrió nuestra ventana Por defecto en la ventana actual

Ejemplo <a href=“./ejemplo2.html” target=“_blank”>enlace</a>

Es necesario tener un control sobre los enlaces que existen en nuestro sitio web Mapa del web

TABLAS(ORGANIZACION DE DOCUMENTO)

Tablas

Nos permiten realizar la ubicación de elementos en la página Web

En muchos casos es la única manera que tenemos de asegurarnos de que la página Web tiene una determinada disposición

En muchos casos el diseño de las páginas está basado en tablas

Tablas (II)

<table><tr>

<td>celda 1</td><td>celda 2</td>

</tr><tr>


</tr></table>

Etiqueta Table

<table></table> Pueden anidarse tablas Atributos

Border: tamaño del borde en pixels Width: ancho de la tabla (en pixels o en tanto por

ciento) Height: alto de la tabla (en pixels o en tanto por

ciento) Cellspacing: espacio entre celdas (por defecto es 2) Cellpadding: espacio entre el borde y contenido de

las celdas (por defecto es 1) Align: alinea la tabla a izquierda (left), derecha

(right) o centro (center)

Etiqueta tr

Se refiere a cada una de las filas de la tabla

Atributos Width: ancho de la fila Height: alto de la fila Align: alineación horizontal Valign: alineación vertical Bgcolor: color de fondo

Etiqueta td

Se refiere a cada una de las columnas de cada fila

Se identifica con cada una de las celdas de la fila

Atributos Los mismo que tr Colspan: número de columnas que

abarca

Otras etiquetas

Se puede usar la etiqueta th que resalta en negrita su contenido, suele usarse como encabezado de la tabla<table>

<tr><th>Titulo 1</th><th>Titulo 2</th>

<\tr><tr>


</tr><tr>


</tr></table>

FRAMES(DIVIDIR LA VENTANA)

Marcos

Los marcos HTML permiten presentar documentos con vistas múltiples, que pueden ser ventanas o subventanas independientes.

Por ejemplo, dentro de una misma ventana, un marco podría mostrar un gráfico estático, un segundo marco un menú de navegación, y un tercero el documento principal que puede ser desplazado, o reemplazado al navegar por el segundo marco.

Marcos (II)

División ventana en regiones que son ventanas. <FRAMESET> ...</FRAMESET>

Border <FRAME>

NORESIZE SCROLLING

<a href="" Target="">...</a>

Frames (III)

Valores predefinidos para TARGET

_self

_blank

_parent

_top

FORMULARIOS

Formularios

Los formularios nos permiten tomar datos por parte del cliente

Un formulario puede contener diferentes estructuras

No aporta medios de validación de los datos, sólo se centra en el diseño de los mismos

Etiquetas de un formulario

Un formulario se define mediante la etiqueta form

<form action=“mailto:direccion@correo” method=“post” enctype=“text/plain”>…</form>

Etiquetas de formulario (II)

Atributo action: nos indica a dónde van a enviarse los datos Pueden enviarse por correo Pueden enviarse a una página web activa

Atributo method: modo en el que se van a enviar los datos (post, get)

Método POST: sin limitación de datos, mensaje más

largo. GET: limitación de datos, transacción más

sencilla.

Campos de entrada

Etiqueta input <input type=“…” …> Tipo de dato a introducir (type)

Text Name: nombre del campo Maxlenght: numero máximo de caracteres Size: tamaño que se mostrará en pantalla Value: valor inicial

Password Name: nombre del campo

Campos de entrada II

Checkbox: es una caja de selección. Name: nombre del campo Value: valor por defecto Checked: por defecto aparecerá seleccionada

Radio: varias opciones para seleccionar. Sólo se puede tomar una de las opciones Name: nombre del campo. ATENCION: el nombre es

el mismo para un grupo. Value: valor del campo al ser seleccionado Checked: por defecto aparece seleccionado

Campos de entrada III

Hidden: variable oculta, no se mostrará por el navegador

Botones Submit: enviar Reset: resetear el formulario

Áreas de texto

Permite la inserción de texto <textarea name=“…”…></textarea> Name: nombre del campo Cols: número de columnas Rows: número de filas

Desplegable de selección

Permite seleccionar entre varias opciones<select name=“…” …><option>opcion 1</option><option>opcion 2</option>…</select>

Desplegable de selección II

Etiqueta select Name: nombre Size: elementos visibles Multiple: permite la selección multiple

Etiqueta option Value: valor Selected: seleccionada por defecto

Actividades

Mapa Conceptual sobre HTML 5. Cuadro comparativo entre HTML 4 y 5. Crear una pagina usando las nuevas etiquetas de

HTML 5 Elaborar un sitio web utilizando los contenidos

explicados en la sesión.

clase 1 - electivo i (html).ppt

Documents