MIRTA VARGAS DE ARGENTINA MEDIA 9 CALZADA Cat B 2° grupo 1ª Actividad
HTML2
-
Upload
victor-blanco -
Category
Documents
-
view
216 -
download
2
description
Transcript of HTML2
-
El lenguaje de marcas
Universidad Nacional de Salta
Sede Regional Orn
Ctedra: Seminario de Computacin
-
Para reflexionar
Lo escuche y lo olvid.
Lo vi y lo entend.
Lo hice y lo aprend.
Confucio: Filsofo chino
(551 a. C. - 479 a. C.)
-
3Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
Arquitectura Cliente-Servidor
-
4Estructura general de una Pgina Web
Estructura
Contenido
Apariencia
Comportamiento
HTML
CSS
Javascript
Colores Tipografas Alineacin
Efectos Validaciones Automatizacin
Prrafos Encabezados Listas
Tablas Capas Etc.
Textos Imgenes Enlaces
Fondos Tamaos Etc.
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
5Que es la W3C?
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
6Evolucin del HTML y CSS
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
Conceptos
HTML (Hyper Text Markup Language)
Lenguaje con el que se escriben paginas web.
Es un lenguaje de hipertexto.
Permite escribir texto de forma estructurada.
Compuesto por etiquetas (marcan el inicio y fin de cada elemento del documento)
Documento hipertexto contiene texto, imgenes sonido y video (documento multimedia).
-
Navegadores o Browsers
Interpretan el cdigo HTML de la pgina.
Internet Explorer, Chrome, Firefox, Safari,
Opera, entre otros.
-
Editores
Programa que permite redactar documentos. Editores visuales. Evitan la escritura de cdigo
HTML.
Editores de texto. La pagina se crea a travs del cdigo HTML.
-
Editores Visuales: (generan basura)
Macromedia Dreamweaver, Microsoft Frontpage,
Adobe Pagemill, NetObjects Fusion, CutePage,
HotDog Proffesional, Netscape Composer y
Arachnophilia
Editores de texto.(solo lo necesario)
Wordpad o el Bloc de notas
Ejemplos
-
11
Ejemplo de una pgina HTML
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
12
Estructura de un documento HTML
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
13
Estructura de una Etiqueta o Tag
.........
EtiquetaCie rre de et iquet a
Atribu toVa lo r
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
14
Etiquetas para definir la estructura
Etiquetas para definir la Estructura general de una pgina:
Etiqueta Para qu sirve
-
15
La etiqueta
La etiqueta body es la que encierra todo el contenido
de la pgina.
Todo lo que vemos en la pgina est escrito en alguna
parte del body.
La etiqueta body acepta una serie de atributos que
permiten su personalizacin.
Puede contener las siguientes etiquetas o tag:
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
16
Clasificacin segn su Funcin
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
17
Clasificacin segn su Funcin
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
18
Clasificacin segn su Funcin
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
19
Clasificacin segn su Funcin
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
20
Entidades
Si deseamos utilizar un caracter que no est presente en
el charset, podemos utilizar las denominadas Entidades.
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
  espacio en blanco
-
21
Listas
Una lista es un prrafo estructurado que contiene una serie de elementos.
Las listas pueden ser:
- Numeradas .
- No numeradas .
- De glosario (definicin). .
* Las listas se pueden anidar y combinar numeradas y no numeradas.
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
22
Estilo de Listas
Analizar el Ejemplo001.html
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
23
ImgenesUna imagen vale ms que mil palabras (No abusar de esta ventaja).Con la etiqueta (No tiene cierre) podemos insertar una imagen.
Los navegadores reconocen numerosos formatos grficos, aunque los
ms utilizados son tres: GIF (Graphics Interchange Format) y JPEG
(Joint Photographics Experts Group). PNG (Portable Network Graphics).
Atributos:
SRC=ruta_de_la_imagen/nombre.gif" (La ruta puede ser una direccin de Internet)
ALT="comentario"
HEIGHT="altura"
WIDTH="ancho"
BORDER="grosor"
ALIGN="alineacin" (top, bottom, left, right, middle)
VSPACE=Margen vertical alrededor de la imagen (pixeles)
HSPACE=Margen horizontal alrededor de la imagen (pixeles)
Ejemplo:
Analizar el Ejemplo 002
Si incluimos junto con la imagen la
informacin de sus dimensiones el
navegador podr reservar espacio para
ellas con slo leer el cdigo
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
24
Mapa de imagen
Etiqueta y
La etiqueta map permite crear un mapa de imagen con diferentes zonas de
manera que, al pulsar sobre ellas, se enlaza a diferentes destinos. Cada
mapa de imgenes se determina con un nombre (atributo name="...").
Entre la apertura y el cierre se definen las reas del mapa por medio de la
etiqueta y que tiene a su vez estos atributos:
shape="..." : Forma del rea de enlace: circular, rectangular, o poligonal.
coords="..." : Coordenadas de localizacin del rea en la imagen.
href= "..." :Direccin del enlace.
Ejemplo:
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
25
EnlacesLa incorporacin del hipertexto fue una de las claves del xito del
lenguaje HTML.
El elemento principal del hipertexto es el "hiperenlace", tambin llamado "enlace Web" o simplemente "enlace".
El enlace comienza en un recurso y apunta hacia otro recurso llamado ancla".
Se pueden relacionar no solo pginas Web, sino tambin otros recursos como imgenes, documentos y archivos en general.
Las etiquetas de apertura y cierre son:
Estructura de los enlaces
Texto indicativo del enlace
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
26
Tipos de Enlaces Enlaces dentro de la misma pgina:
Texto
y en el sitio a donde queremos saltar:
Enlaces con otra pgina de nuestro Sitio
-
27
Una capa es un contenedor que tiene la peculiaridad fundamental de
poder situarse en cualquier punto de nuestra pgina Web.
Una capa puede contener cualquier elemento HTML, texto, tablas,
imgenes, incluso otras capas.
Tambin podemos superponer variar capas, de tal manera que la capa
que est por encima ocultar a la de abajo.
Otra propiedad de las capas es la visibilidad, como consecuencia de un
evento, podemos mostrar u ocultar el contenido de una capa.
Por todas estas caractersticas, las capas tienen dos utilidades
fundamentales:
1. Servir de contenedoras para situar una parte de documento en
cualquier posicin de la pgina.
2. Con la ayuda de cdigo Javascript que se desencadena por eventos,
permitir efectos dinmicos.
Capas
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
28
Etiquetas y
Estas etiquetas permiten el uso de las capas.
Todas las etiquetas HTML comprendidas entre las correspondientes
etiquetas de apertura y cierre configuran la capa.
La etiqueta DIV dispone del modificador id que permite dar un nombre
a la capa lo cual permite posteriormente acceder a ella.
Las caractersticas de la capa se establecen con un estilo (style)
dentro de la etiqueta DIV de apertura.
El uso de la etiqueta DIV y SPAN es similar, la diferencia es que la
etiqueta DIV genera un salto de lnea anterior y posterior a su
contenido, mientras que la etiqueta SPAN no. La etiqueta SPAN se
utiliza para, por ejemplo, crear una capa que contenga algo y se
alinee entre dos palabras de un prrafo.
Crear capa
Cambiar profundidad a la capa
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
29
Dividiendo en secciones una pginaUtilizando la etiqueta , podemos marcar las "divisiones" o zonas de la
pgina, segn la funcin que cumple cada "bloque" dentro de la pgina: men,
cabezal, pie, contenido, etc.
Analizar el Ejemplo 004
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
30
Tablas Una tabla se define entre las etiquetas:
y
Se puede poner titulo a la tabla con las etiquetas
y .
Cada fila de la Tabla se define con las etiquetas:
y (table row).
Dentro de cada fila se definen las celdas que forman esa fila (columnas) con las etiquetas:
y (table data).
Se pueden definir ttulos y cabeceras de celdas
que se distinguen por estar el texto en negrita y centrado con las etiquetas:
y (table header).
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
31
Atributos de
width: ancho de la tabla (absoluta o en %).
border: ancho de los bordes de la tabla.
cellspacing: espaciado entre celdas.
cellpadding: espacio entre el borde de cada celda y los
elementos incluidos en ella.
Atributos de
align: alineacin del contenido de las celdas de la fila.
valign: posicin vertical del contenido de las celdas de la fila.
Atributos de y
rowspan: n de filas que debe abarcar la celda actual.
colspan: n de columnas de la fila que abarcar la celda.
align: alineacin del contenido de la celda.
valign: posicin vertical del contenido de la celda.
Tablas - Atributos
Analizar el Ejemplo 005
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
32
La etiqueta iframePermite crear un frame (marco) 'interno' o incrustado dentro de un
documento HTML, pudiendo contener otro documento HTML
especificado en el atributo src.
Ejemplo:
El atributo target de los enlaces, deben tener el valor igual al id del
iframe.
-
33
Formularios
Los formularios permiten interaccin entre los
usuarios y el servidor:
Consultas a bases de datos
Solicitudes de documentacin
Envo de Informacin
Por medio de:
Introduccin de texto
casillas de verificacin
listas de seleccin
El tratamiento de los datos recibidos en el servidor
desde los formularios lo hace un programa llamado
CGI (Common Gateway Interface).
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
34
Formularios
Campos de entrada por teclado.
Botones de seleccin.
Casillas de marca.
Botones de proceso.
Botones de inicializacin (reset).
Imgenes sensibles al ratn.
Listas desplegables de valores.
Listas fijas de valores.
Ventanas de escritura libre.
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
35
Formularios
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
36
Etiquetas Avanzadas:
Fieldset: Agrupa temticamente campos del formulario, el navegador muestra por defecto un borde resaltado para cada agrupacin.
Legend: se incluye dentro de cada etiqueta y establece el ttulo que muestra el navegador para cada agrupacin de elementos.
Optgroup: permite agrupar lgicamente opciones
relacionadas dentro de una lista desplegable.
Formularios
Analizar el Ejemplo 006
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
Software tiles para desarrollo Web
Kompozer
AmayaAptana
Komodo NetBeans GIMPDreamWeaver
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
38
Kompozer
Qu es KompoZer?
-Es un editor de pginas web WYSIWYG (What you see is what you
get Lo que ves es lo que recibes).
-Es un derivado de NVU.
-Su objetivo es facilitar el desarrollo de pginas web.
-Posee distintas formas de visualizacin disponibles en su interfaz
como: cdigo fuente, ventana WYSIWYG, visin con tags de HTML
realzados.
-Presenta caractersticas como el soporte integrado de CSS y mejor
gestin del soporte FTP para actualizacin de los archivos, soporte
de marcos, formularios, tablas, plantillas de diseo, etc.
- Est disponible para diversas plataformas: Windows, Mac OS, y
Linux.
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
39
Herramientas destacadas
Administrador de sitios FTP: Cualquier sitio que el usuario haya
especificado en sus Opciones de Publicacin, podr ser navegado y
actualizado en una barra lateral.
Nuevos selector de colores: Se podr elegir entre el selector de
colores verde, azul y rojo para crear la tonalidad deseada y tambin
podremos elegir el color deseado con el mouse.
Pestaas: El uso de pestaas brinda la posibilidad de realizar
acciones de manera ms fluida. Se podr utilizar la herramienta
Deshacer y Rehacer independientemente en cada una de las
pestaas.
Barras de tareas personalizables: Se pueden elegir los botones
que aparezcan o desaparezcan de las barras segn las
necesidades.
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
40
El entorno de Trabajo
Barra de Men
Barra de Herramientas
Barra de Titulo
Barras de Formato
Administracin de Sitios
Explorador del DOM
Ventana de rea de edicin
Barra de modo de Edicin
Barra de Estado
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
41
Creando un sitio web
KompoZer nos permitir trabajar directamente sobre el sitio web en
Internet (servidor externo) o con archivos en el sistema local.
Para mantener organizados todos los archivos, es necesario crear un
sitio web.
Seleccionar:
Men Editar Configuracin de Publicacin o
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
42
Propiedades de la Pgina
Es recomendable ingresar
estos datos ya que algunos
buscadores lo usan para
indexar la pgina a su Base
de Datos.
Podemos indicar si esta
pgina se trata de una
plantilla que usaremos en
futuros diseos.
Formato Titulo y propiedades de la pgina
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
43
Otras Operaciones tiles
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
44
Actividad 1
1. Iniciar el programa Kompozer
2. Crear un sitio nuevo
3. Abrir un documento en blanco
4. Escribir algn texto en el modo Diseo
5. Cambiar el tamao de las letras
6. Cambiar el color de las letras
7. Guardar los cambios
8. Ponerle un ttulo
9. Ver y analizar el cdigo generado usando el modo Cdigo fuente del navegador.
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
45
Utilizando Kompozer, disear una pgina web que muestre una tabla
como la que se muestra en la imagen.
Actividad 2
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
46
Crear una pgina Web que incluya:
Ttulos, prrafosUna imagen
Un men con enlaces a otras pginas realizado con una
lista desordenada
Etctera
Actividad 3
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
47
ReferenciasWorld Wide Web Consortium (W3C): http://www.w3.org
Validar el cdigo: http://www.validator.w3.org/
Test de Accesibilidad Web: http://www.tawdis.net
Wikipedia: http://es.wikipedia.org/wiki/XHTML
Algunas definiciones: http://www.usabilidadweb.com.ar/sgml_html_xml.php
Librosweb: http://www.librosweb.es/xhtml/index.html
Wikipedia: http://es.wikipedia.org/wiki/Accesibilidad_web
AMAYA: http://www.w3.org/Amaya/
Kompozer: http://www.difundefirefox.com/kompozer
APTANA Estudio 3: http://www.aptana.com/products/studio3/download
HTML4.01: http://html.conclase.net/w3c/html401-es/index/elements.html
Hosting Gratuito: www.000webhost.com
Registrar Dominio: www.nic.ar
Plantillas gratis: http://www.oswt.co.uk/
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
-
Dudas?
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn