La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

Práctica Profesional HTML. IS 185Profesor: MOLINA, Carlos HTML NO ES NECESARIO SABER NADA DE LENGUAJE HTML PARA CREAR UNA PÁGINA WEB Una página Web es.

Presentaciones similares


Presentación del tema: "Práctica Profesional HTML. IS 185Profesor: MOLINA, Carlos HTML NO ES NECESARIO SABER NADA DE LENGUAJE HTML PARA CREAR UNA PÁGINA WEB Una página Web es."— Transcripción de la presentación:

1 Práctica Profesional HTML

2 IS 185Profesor: MOLINA, Carlos HTML NO ES NECESARIO SABER NADA DE LENGUAJE HTML PARA 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.

3 IS 185Profesor: MOLINA, Carlos HTML La 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

4 IS 185Profesor: MOLINA, Carlos HTML Las etiquetas se representan de una manera especial: Entre 2 símbolos <> para comenzar. Y para terminar. Hola, este es el texto

5 IS 185Profesor: MOLINA, Carlos HTML Cada etiqueta posee un nombre, este suele ser el nombre del elemento en inglés. Ejemplo, una tabla se representa con: 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.

6 IS 185Profesor: MOLINA, Carlos HTML Los 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ªª

7 IS 185Profesor: MOLINA, Carlos HTML Las 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

8 IS 185Profesor: MOLINA, Carlos HTML Para indicar Las propiedades del texto como tamaño, tipo de letra, alineación, color, etc. Sintaxis: Hola, aqui va el texto

9 IS 185Profesor: MOLINA, Carlos Partes de una pagina Las etiquetas, 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: Cabecera Compuesta por los tags que se colocan a continuación de la etiqueta, define todas las características relacionadas con la página.

10 IS 185Profesor: MOLINA, Carlos Partes de una página Cuerpo Encerrado por los Tags, situado inmediatamente después de la cabecera, se definen todos los objetos que aparecen (o no) en pantalla. Título de la página Mensaje dentro del cuerpo del documento.

11 IS 185Profesor: MOLINA, Carlos Editores 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.

12 IS 185Profesor: MOLINA, Carlos Diseño web, ajustes y colores 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.

13 IS 185Profesor: MOLINA, Carlos Diseño web, ajustes y colores 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).

14 IS 185Profesor: MOLINA, Carlos 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.

15 IS 185Profesor: MOLINA, Carlos Imá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.

16 IS 185Profesor: MOLINA, Carlos Imágenes y animaciones Sintaxis src es obligatorio, indica el archivo de imagen a insertar. Width y height no deben ser modificadas manualmente ya que desfigurará la imagen.

17 IS 185Profesor: MOLINA, Carlos 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 y poner en su lugar:

18 IS 185Profesor: MOLINA, Carlos Añadir musica de fondo Un 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

19 IS 185Profesor: MOLINA, Carlos Links A una página de nuestro mismo dominio Sintaxis Texto o imágen que posee el hipervículo 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.

20 IS 185Profesor: MOLINA, Carlos Links A una parte concreta de nuestra página Para poder implementar este links se utiliza un objeto llamado anchor o link interno. Sintaxis: Aquí puede ir (o no) texto o una imágen Y para invocarla desde un link se utiliza: #nombredelamarca

21 IS 185Profesor: MOLINA, Carlos Links A páginas de otros dominios Se 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 Texto o imágen que posee el hipervículo

22 IS 185Profesor: MOLINA, Carlos s como links Que nuestros visitantes puedan comunicarse puede ser bastante útil. La forma más sencilla es mediante . Opción I: Poner nuestra dirección de correo al final de la página. Opción II: utilizando el comando: Esta sentencia habilita el programa de correo predeterminado, listo para escribir un nuevo mensaje, donde ya figura nuestra dirección de .

23 IS 185Profesor: MOLINA, Carlos Distribución de archivos Hay 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 FTP El protocolo FTP es algo más complicado para nuestros propósitos.

24 IS 185Profesor: MOLINA, Carlos Internet Explorer muestra :

25 IS 185Profesor: MOLINA, Carlos Netscape Navigator despliega:

26 IS 185Profesor: MOLINA, Carlos Distribución de archivos Una 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.

27 IS 185Profesor: MOLINA, Carlos Frames 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.

28 IS 185Profesor: MOLINA, Carlos Frames 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

29 IS 185Profesor: MOLINA, Carlos 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.

30 IS 185Profesor: MOLINA, Carlos 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).


Descargar ppt "Práctica Profesional HTML. IS 185Profesor: MOLINA, Carlos HTML NO ES NECESARIO SABER NADA DE LENGUAJE HTML PARA CREAR UNA PÁGINA WEB Una página Web es."

Presentaciones similares


Anuncios Google