clase 1 - electivo i (html).ppt
Post on 22-Oct-2015
34 Views
Preview:
TRANSCRIPT
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>
<td>celda 3</td><td>celda 4</td>
</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>
<td>celda 1</td><td>celda 2</td>
</tr><tr>
<td>celda 3</td><td>celda 4</td>
</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.
top related