práctica profesional html. is 185profesor: molina, carlos html no es necesario saber nada de...

Práctica Práctica ProfesionalProfesional

HTML

IS 185IS 185 Profesor: MOLINA, CarlosProfesor: MOLINA, Carlos

HTMLHTMLNO ES NECESARIO SABER NADA DE

LENGUAJE HTMLPARA CREAR UNA PÁGINA WEB

Una página Web es un conjunto de órdenes o instrucciones que le dicen a nuestra PC qué es lo que tiene que hacer o mostrar, estas órdenes son traducidas por el navegador de Internet.


HTMLHTMLLa idea es sencilla: cualquier cosa que se represente en una página web (texto, imágenes, etc) debe ir entre 2 etiquetas o TAGS, la primera indica que empieza el elemento y la segunda indica que dicho elemento termino.

Ejemplo:TEXTO Hola, este es el texto FINTEXTO

HTMLHTMLLas etiquetas se representan de una manera especial:

Entre 2 símbolos <> para comenzar. Y para terminar </>.

<TEXTO> Hola, este es el texto </TEXTO>

HTMLHTMLCada etiqueta posee un nombre, este suele ser el nombre del elemento en inglés. Ejemplo, una tabla se representa con:

<TABLE> </TABLE>

Las páginas web son ficheros de texto en el que se incluyen una serie de etiquetas que definen zonas, formatos y características de los elementos que contienen y que el navegador se encarga de traducir a un formato gráfico, que es lo que finalmente vemos en pantalla.


HTMLLos tildes se realiza mediante el símbolo & seguido de la letra que queremos acentuar (a, e, i, o, u) y seguido de la palabra acute;

á á é é

í í ó ó

ú ú ñ ñ

espacio ª ª

HTMLHTMLLas etiquetas se pueden combinar. Si queremos escribir un texto en negrita y cursiva, utilizaremos:

 párrafo.B de bold, negrita en inglés. I de italic, cursiva en inglés.

 Hola, bienvenidos al Curso

HTMLHTMLPara indicar Las propiedades del texto como tamaño, tipo de letra, alineación, color, etc.

Sintaxis: Hola, aqui va el texto

Partes de una paginaPartes de una paginaLas etiquetas <HTML></HTML>, indican al navegador que el documento que se está recibiendo se tiene que visualizar como un documento de internet.Una página web la forman 2 partes:

CabeceraCompuesta por los tags <HEAD></HEAD> que se colocan a continuación de la etiqueta <HTML>, define todas las características relacionadas con la página.

Partes de una páginaPartes de una páginaCuerpo Encerrado por los Tags <BODY></BODY>, situado inmediatamente después de la cabecera, se definen todos los objetos que aparecen (o no) en pantalla. <HTML><HEAD><TITLE>Título de la página</TITLE></HEAD><BODY> Mensaje dentro del cuerpo del documento.</BODY></HTML>


Editores de HTMLEditores de HTML

Dreamweaver (de Macromedia) Sin duda es superior a otros por sus bondades, a primera vista puede parecer algo complicado. Pero su manejo visual facilita la creación de la página, con manejo de tablas, capas, imágenes, formularios, etc.

Otros Editores: FrontPage FrontPage Express Netscape Composer .


Diseño web, ajustes y Diseño web, ajustes y colorescolores

Elegido el tema, los contenidos y los detalles de la página web es hora de diseñar.

Es recomendable que nuestras páginas tengan una apariencia similar, es decir, que todas las paginas posean estilos similares.

Es conveniente tener varias páginas pequeñas manejadas por un buen índice, que una grande, la cual provocará cargas lentas.


Diseño web, ajustes y Diseño web, ajustes y colorescolores

Ni todo es texto, ni todo son imágenes. Lo más conviene es una mezcla equilibrada.

Los navegadores y los sistemas operativos ponen a nuestro servicio gráficos con millones de colores y alta resolución.

Es bueno que las imágenes tengan una buena definición (pero el tamaño del archivo puede provocar cargas lentas).


Imágenes y animaciones Imágenes y animaciones Un elemento a incluir en nuestras páginas son los archivos de imágen. Los navegadores admiten prácticamente cualquier formato de imágenes, pero en la práctica los diseñadores utilizan sólo dos: JPEG y GIF.


Imágenes y animacionesImágenes y animaciones

Ambos formatos comprimen la imagen para reducir su tamaño y conseguir que el tiempo de carga sea inferior. JPEG tienen una profundidad de color de 16 millones de colores, reduce el tamaño de la imágen sacrificando calidad.

GIF no pierden calidad. Es capaz de almacenar máscaras y de reproducir animaciones. Sólo tiene una profundidad de 256 colores.

Imágenes y animacionesImágenes y animacionesSintaxis<img src="..." width="..." height="..."

border="..." alt="..." align="..." >

src es obligatorio, indica el archivo de imagen a insertar. Width y height no deben ser modificadas manualmente ya que desfigurará la imagen.

El fondo de la página El fondo de la página

En el fondo de nuestra página podemos colocar una imagen o animación. Si la imagen es más pequeña que el fondo, la imagen se repetirá en modo de mosaico hasta cubrirlo.

Para insertar una imagen de fondo debemos modificar la etiqueta <BODY> y poner en su lugar:

<body background="archivodeimagen">

Añadir musica de fondoAñadir musica de fondoUn elemento multimedia que podemos incluir en nuestra página es el sonido.

No es muy aconsejable. Se puede reproducir cualquier archivo de sonido, el más convenientes es el MIDI dado su reducido tamaño. Lo que escuchemos dependerá exclusivamente de la tarjeta de sonido.Sintaxis<bgsound src="archivo MIDI" Loop = "nº de veces">

LinksLinks

A una página de nuestro mismo dominioSintaxis<a href="destino"> Texto o imágen que posee el hipervículo </a>El atributo href apunta al destino del hipervínculo.

Los links a un archivo en nuestro mismo dominio NUNCA incluyen la ruta del directorio, sólo indicaremos el subdirectorio donde se encuentra el archivos.

LinksLinksA una parte concreta de nuestra páginaPara poder implementar este links se utiliza un objeto llamado anchor o link interno. Sintaxis:<a name="nombredelamarca"> Aquí puede ir (o no) texto o una imágen </a>

Y para invocarla desde un link se utiliza:#nombredelamarca

LinksLinks

A páginas de otros dominiosSe utiliza la misma sintaxis HTML de un link a una página de nuestro dominio. Pero se incluye la ruta completa, que siempre empieza con http://

<a href="http://destino"> Texto o imágen que posee el hipervículo </a>

E-mails como links

Que nuestros visitantes puedan comunicarse puede ser bastante útil.La forma más sencilla es mediante e-mail. Opción I: Poner nuestra dirección de correo al final de la página.Opción II: utilizando el comando:

<a href="mailto:destinatario"> Esta sentencia habilita el programa de correo predeterminado, listo para escribir un nuevo mensaje, donde ya figura nuestra dirección de email.


Distribución de archivosDistribución de archivosHay 2 formas de distribuir archivos a nuestros visitantes: HTTP o FTP.Mediante HTTP Es como cualquier link a una página web normal. En un texto o una imágen añadiremos un link al archivo, consiguiendo que al clickear sobre el enlace, se guarde el archivo en la máquina del visitante.Mediante FTPEl protocolo FTP es algo más complicado para nuestros propósitos.


Internet Explorer muestra :


Netscape Navigator despliega:


Distribución de archivosDistribución de archivosUna vez abierta la ventana, debemos elegir la opción Guardar en disco, hecho esto nos preguntará el directorio en donde guardarlo y listo.

NOTA: comprobar antes que todos los archivos que van a distribuirse ESTEN LIBRES DE VIRUS.


FramesFrames

Permite presentar en una página múltiples documentos en diferentes vistas. Estas vistas permitirán, fijar en una de ellas el índice, el logotipo, mientras que en la otra mostramos el contenido seleccionado.

En realidad, una página web con frames, no es más que un pequeño fragmento en HTML que carga una página web en cada una de las vistas que hayamos definido.


FramesFrames

Se divide la pantalla como una tabla, o sea, en filas y columnas.

Cada celda muestra una parte de la página.

Combinaciones más usuales


Capas (Draw Layer)Capas (Draw Layer)Una capa es un contenedor HTML, o sea, un elemento que agrupa a otros elementos.

Permite tratar a todos los elementos como si fueran un todo, pudiendo crear efectos visuales utilizando poco código.Las capas en la pantalla tienen coordenadas X, Y, Z, largo y ancho.Z define la superposición de las capas. Una capa de orden superior ocultará a otra de orden inferior.


Capas (Draw Layer).Capas (Draw Layer).Puede contener cualquier objeto: texto, imágenes, plug-in, applets e incluso otra capa.

Se definen mediante las etiquetas DIV o SPAN (otras formas LAYER e ILAYER).

práctica profesional html. is 185profesor: molina, carlos html no es necesario saber nada de...

Documents