Clase 1 - Electivo I (Modo de Compatibilidad)

ELECTIVO I
APLICACIONES WEB CON SOFTWARE LIBRE

TEMA: FUNDAMENTOS DE HTML
DOCENTE: GMEZ HURTADO HEBER
AGENDA
1. HTML
2. Etiquetas de HTML
3. Tablas
4. Frames
5. 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 pgina Web.
Este lenguaje es interpretado por los distintos
navegadores. No necesita compilarse
HTML
Usa etiquetas que determinan cada elemento
Texto
Imgenes
Enlaces
Tablas
Las etiquetas pueden tener atributos que a su
vez determinan el formato de cada elemento
Tamao
Alineamiento
Color
Ejemplo
<font size=8>Este texto tiene tamao 8</font>
Generacin de pginas HTML
Existen herramientas que ayudan a la
generacin de pginas web (editores HTML)
Pueden crearse mediante cualquier programa
de edicin de texto
Para comprobar los resultados puede usarse
cualquier navegador web
Formato de una pgina
Un documento bsico 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 ms elementos adems del
ttulo
Etiquetas de contenido
<meta name=description
content=Descripcin del contenido de
la pagina>
Cdigo de scripts con funciones que
podrn ser usadas en el documento
Javascript
Cuerpo (<body>)
En la etiqueta se pueden especificar atributos
de la pgina 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
Diseo de paginas web
Como ya hemos dicho, podemos usar tablas para
disear nuestras paginas web
Primero debemos realizar un boceto de la
estructura que queremos que tenga
Despus adecuaremos la estructura a una tabla
Diseo pginas Web
Para ajustar la tabla a la pgina Web usamos
nuevos atributos en la etiqueta body
Mrgenes de la pgina
Leftmargin
Topmargin
Rightmargin
Bottommargin
ETIQUETAS DE HTML
(FORMATO DE DOCUMENTO)
Formato de texto
Ttulos
<h1>, <h2>, , <h6>
A menor nmero, mayor tamao
Fuentes
Negrita <b>
Itlica <i>
Subrayado <u>
Marca <font>
Size: tamao
Face: tipo
Color: color, se especifica igual que en casos
anteriores
Formato de texto
Nuevas lneas
<br>: no tiene etiqueta de finalizacin,
inserta una nueva lnea
Lneas separadoras
<hr>: linea de separacin horizontal
Align: alineacin
Width: ancho
Size: alto
Color: color
Parrafos
<p></p>
Align: alineacin (right, left, center, justify)
Listas
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: cmo numera (1, I, )
<li>: cada uno de los elementos
Imgenes
<img src=localizacin de la imagen>
Alt=texto que aparece al colocarnos sobre la
imagen
Align=alineacin (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)
Permiten establecer llamadas de una
pgina a otra
Tambin se pueden enlazar otros
archivos
<a href=localizacin de la pgina
web></a>
Se puede poner texto o imgenes
Localizacin puede ser
Dentro de la propia pgina (anclas)
A otra pgina (Mucho cuidado!!)
Dentro de mi ordenador
externa
Enlaces (II)
Localizacin de destinos (rutas)
Absoluta: especificamos la ubicacin exacta dnde 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 ubicacin en funcin
de dnde se encuentran pgina origen y archivo
destino
Supongamos que la pgina 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)
Atributo target
Me permite determinar dnde 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 ubicacin de elementos
en la pgina Web
En muchos casos es la nica manera que
tenemos de asegurarnos de que la pgina Web
tiene una determinada disposicin
En muchos casos el diseo de las pginas 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: tamao 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: alineacin horizontal
Valign: alineacin 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: nmero 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 mltiples, que pueden ser
ventanas o subventanas independientes.
Por ejemplo, dentro de una misma ventana, un
marco podra mostrar un grfico esttico, un
segundo marco un men de navegacin, y un
tercero el documento principal que puede ser
desplazado, o reemplazado al navegar por el
segundo marco.
Marcos (II)
Divisin 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 validacin de los
datos, slo se centra en el diseo 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 dnde
van a enviarse los datos
Pueden enviarse por correo
Pueden enviarse a una pgina web activa
Atributo method: modo en el que se
van a enviar los datos (post, get)
Mtodo
POST: sin limitacin de datos, mensaje
ms largo.
GET: limitacin de datos, transaccin
ms sencilla.
Campos de entrada
Etiqueta input <input type= >
Tipo de dato a introducir (type)
Text
Name: nombre del campo
Maxlenght: numero mximo de caracteres
Size: tamao que se mostrar en pantalla
Value: valor inicial
Password
Campos de entrada II
Checkbox: es una caja de seleccin.
Value: valor por defecto
Checked: por defecto aparecer seleccionada
Radio: varias opciones para seleccionar. Slo 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 insercin de texto
<textarea name=></textarea>
Cols: nmero de columnas
Rows: nmero de filas
Desplegable de seleccin
Permite seleccionar entre varias
opciones
<select name= >
<option>opcion 1</option>
<option>opcion 2</option>
</select>
Desplegable de seleccin II
Etiqueta select
Name: nombre
Size: elementos visibles
Multiple: permite la seleccin 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 una sitio web utilizando los contenidos
explicados en la sesin.

Clase 1 - Electivo I (Modo de Compatibilidad)

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Clase 1 - Electivo I (Modo de Compatibilidad)

Diunggah oleh

Hak Cipta:

Format Tersedia

ELECTIVO I

APLICACIONES WEB CON SOFTWARE LIBRE

Anda mungkin juga menyukai