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?


6Evolucin del HTML y CSS


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


12

Estructura de un documento HTML


13

Estructura de una Etiqueta o Tag

.........

EtiquetaCie rre de et iquet a

Atribu toVa lo r


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:


16

Clasificacin segn su Funcin


17



18



19



20

Entidades

Si deseamos utilizar un caracter que no est presente en

el charset, podemos utilizar las denominadas Entidades.


&nbsp 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.


22

Estilo de Listas

Analizar el Ejemplo001.html


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


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:


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


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


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


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.



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).


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



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).


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.


35

Formularios


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



Software tiles para desarrollo Web

Kompozer

AmayaAptana

Komodo NetBeans GIMPDreamWeaver


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.


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.


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


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


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


43

Otras Operaciones tiles


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.


45

Utilizando Kompozer, disear una pgina web que muestre una tabla

como la que se muestra en la imagen.

Actividad 2


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


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/


Dudas?


HTML2

Documents

Transcript of HTML2