Práctica Profesional HTML
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.
TEXTO Hola, este es el texto FINTEXTO 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
<TEXTO> Hola, este es el texto </TEXTO> HTML Las etiquetas se representan de una manera especial: Entre 2 símbolos <> para comenzar. Y para terminar </>. <TEXTO> Hola, este es el texto </TEXTO>
<TABLE> </TABLE> HTML Cada 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.
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 ª ª
HTML Las etiquetas se pueden combinar. Si queremos escribir un texto en negrita y cursiva, utilizaremos: <P></P> párrafo. <B></B> B de bold, negrita en inglés. <I></I> I de italic, cursiva en inglés. <P> <B><I>Hola, bienvenidos al Curso </I></B> </P>
HTML Para indicar Las propiedades del texto como tamaño, tipo de letra, alineación, color, etc. Sintaxis: <P size=“1” align=“left” face=“Arial”> <B>Hola, aqui va el texto<B> </P>
Partes de una pagina Las 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: Cabecera Compuesta 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ágina Cuerpo 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 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 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.
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).
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 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 animaciones Sintaxis <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 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 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 <bgsound src="archivo MIDI" Loop = "nº de veces">
Links A una página de nuestro mismo dominio Sintaxis <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.
Links A una parte concreta de nuestra página Para 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
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 http:// <a href="http://destino"> Texto o imágen que posee el hipervículo </a>
<a href="mailto:destinatario"> 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 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.
Internet Explorer muestra :
Netscape Navigator despliega:
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.
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.
Combinaciones más usuales 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
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). 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).