Edicin de Pginas Web en el Lenguaje de Programacin HTML

Introduccin al HTML Cuando tu programa navegador (cliente) pide una pgina web al servidor, ste le enva un fichero de texto (con extensin htm o html) en lenguaje html que tu programa (Netscape o explorer) se encarga de "traducir" para que puedas visualizar correctamente en el navegador la pgina web solicitada incluyendo texto, fondos, grficos, etc.El HTML (HipertText Markup Language) o Lenguaje de enlaces hipertexto es un sistema que se encarga de definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El trmino HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas.Como cualquier pgina web est soportada por un fichero de texto, se pueden elaborar, editar o modificar directamente con el bloc de notas o aunque existen programas editores de pginas web.

Elementos del lenguaje HTML Caracteres:Cualquier cadena de caracteres imprimibles que no represente un marcado se representa literalmente, aunque los espacios y tabuladores se reducen a un solo carcter cuando no estn dentro de un bloque pre formateado. Marcadores, marcas o etiquetas (tags): Los marcadores delimitan elementos de un documento como cabeceras, prrafos, etc. La mayora de los marcadores constan de una marca inicial < ...> , que da el nombre y atributos del elemento, seguida del contenido o secuencia de caracteres y una marca final.Las marcas iniciales se escriben entre los smbolos "" (menor y mayor) y las finales entre "" (menor barra y mayor). Por ejemplo, Contenido, indica que "Contenido" es una cabecera de nivel uno. Algunos elementos slo tienen una marca inicial (por ejemplo la marca que representa una lnea horizontal) y otros, aunque disponen de ambas, se suelen expresar slo con la inicial.

Nombres de etiquetas: Los nombres consisten en una letra seguida de letras, dgitos, puntos o guiones. Los ejemplos H1 y HR anteriores son ejemplos de nombres de etiquetas. La longitud de un nombre est limitada a 72 caracteres en la definicin del HTML. Los nombres de elementos y atributos no distinguen entre maysculas y minsculas, pero los nombres de entidades (la representacin alternativa de los caracteres) s.En las marcas, el nombre del elemento debe comenzar inmediatamente despus del est sealando una parte de la pgina web en la que empieza el grueso del texto de la pgina. Esta etiqueta se visualiza dentro del cdigo html pero no tiene una traduccin hacia el formato final. Es decir, no se visualiza en el navegador cliente y slo se puede ver si utilizamos la opcin Ver/Origen de la Pgina (en Netscape)

Creacin de documentos HTML Los documentos HTML son archivos de texto legibles ASCII con cdigos de composicin especiales embebidos o incorporados en el texto. Esto significa que los archivos HTML contienen letras, nmeros, signos de puntuacin, etc., ms los cdigos de composicin HTML. Insistimos, se pueden leer o modificar directamente desde el bloc de notas.Aunque no es obligatorio, es muy til utilizar la extensin .HTM al archivar el documento HTML desde el bloc de notas. As podrs saber luego de que tipo de documento se trata. Si utilizas un procesador de texto normal debes utilizar la opcin Guardar como texto ASCII.

Aspecto de documentos HTML: Lo que distingue a un archivo HTML de cualquier otro archivo de texto es la presencia de cdigos de composicin, denominados marcadores HTML. Estos cdigos se incluyen en el documento y sirve para controlar el formato y la presentacin del documento final. Los cdigos tambin sirven para crear hipervnculos con otros documentos.Los cdigos de composicin se acotan con unos caracteres especiales, que permiten diferenciarlos del texto del documento propiamente dicho. Estos smbolos son los corchetes angulares < y >. Estos cdigos no distinguen entre maysculas y minsculas aunque la mayora de los autores utilizan maysculas para distinguirlos del resto del texto.Los distintos navegadores muestran sus documentos de formas distintas: vara el color, el tipo de fuente, el tamao, etc. Por lo tanto debes pensar en tu documento como una entidad lgica y no fsica, reconociendo que el aspecto fsico puede variar de un visor a otro y de un PC a otro. Por ejemplo, si introduces tipos de letra especiales (que se salgan de los corrientes que tienen todos los PCs, en Arial, Courier, Times o Helvetica) dentro de tu pgina web, cuando alguien la "vea" en Internet, visualizar esos tipos de letra si estn instalados en su PC, si no los ver con el tipo de letra que tenga cargado por defecto en su navegador.Marcadores o etiquetas HTML obligatorios: Marcador : todos y cada uno de los documentos HTML deben empezar y terminar con este marcador que sirve para indicar que se trata de un documento HTML. En el marcador de cierre es obligatoria la barra inclinada (/HTML).Marcadores : los documentos HTML se dividen en dos partes, la cabecera y el cuerpo. Los navegadores Web necesitan distinguir entre cabecera y cuerpo para poder interpretar correctamente los documentos. En general la cabecera del documento (head) incluye la informacin general sobre el documento. Este marcador tienen su marcador de terminacin con la barra inclinada (/HEAD). Marcadores : incluye el contenido real del documento (body o cuerpo). Este marcador tiene tambin su marcador de terminacin con la barra inclinada .En el caso del marcador body puede ir acompaado, no obligatoriamente, del atributo BGOLOR (Background color) junto con un numero de expresin hexadecimal que determina un color de fondo plano para la pgina web. Esta funcin, como veremos ms adelante con el color de los textos est automatizada en la mayora de editores de pginas web (incluido Netscape Composer).

Cabecera del documentoContiene informacin general sobre el documento HTML. Es obligatorio incluir el marcador , el resto de los marcadores son opcionales. Marcador : los navegadores muestran el ttulo de cada uno de los documentos HTML que encuentran. El ttulo que aparece se toma del contenido de este marcador. Este marcador debe aparecer con su pareja con la barra inclinada y dentro de la seccin

Creacin de encabezados, estilos y prrafos Creacin de encabezados: Los encabezados se emplean para dividir los documentos en secciones, o ms concretamente para marcar los ttulos de esas secciones. Los marcadores son del tipo Ttulo, donde # puede ser un numero cualquiera entre 1 (mayor tamao) y 6 (menor tamao).Es recomendable usar los niveles en orden, es decir, despus de un encabezado de nivel uno deberemos usar encabezados de nivel dos para las subsecciones y no saltar directamente al tres o al cuatro, por ejemplo.La representacin de los encabezados depende del visor, generalmente se representan en negrita y van cambiando de tamao y espacios antes y despus, de ms a menos, en funcin del nivel. Introducen normalmente un salto de lnea automtico. Etiquetas de caracteres y tipos de letra: El lenguaje HTML permite asignar formatos de tipos de letra y caracteres. Los navegadores leen estos marcadores lgicos de tipos de letra de los documentos HTML y los interpretan conforme a sus capacidades.Existen multitud de marcadores para indicar que una palabra o frase tiene una connotacin especial y es obligatorio poner los marcadores de cierre al final del texto afectado. Estos son algunos de los ms utilizados LENGUAJE HTMLRESULTADO en navegadortexto en negritatexto en cursiva o itlica texto subrayadocombinando las tres anterioresfuente tipo de mquina de escribir

Formateo de prrafos o bloques: Cada navegador decide en funcin de las posibilidades grficas de cada ordenador las lneas de documento que va a presentar y es posible que ignore los caracteres fin de lnea introducidos. De la misma manera aunque hayas introducido lneas en blanco en tu documento fuente intentando marcar el final de prrafos, los navegadores las ignorarn. Tienes que marcar explcitamente los prrafos.El marcador de prrafo es y se coloca al principio de cada nuevo prrafo, excepto cuando ya hay algn otro salto de lnea. El marcador final es opcional .Aunque no son propiamente para definir bloques, hay marcadores para representar saltos de lnea y para insertar una lnea horizontal. Ambas permiten dividir el texto, por lo que las hemos incluido aqu.Marcador
: este elemento slo tiene marca inicial y se usa para que el visor termine la lnea en el punto en el que encuentre. Realiza por lo tanto un salto de lnea sin que aparezca una lnea en blanco como en el caso de los prrafos.Marcador : slo consta de una marca inicial y se emplea para presentar una lnea horizontal en el texto, ya sea usando caracteres o un grfico, dependiendo del visor.Cdigos Html

Como hacer que una imagen crezca al pasar el mouse por encima

mipaginaweb/INICIO.jpg" Ubicacin donde est la imagenonMouseOver="this.width=174;this.height=51;" el tamao que queremos que crezca la imagen, en este caso esta expresado en pixeles tambin puede ser expresado en porcentaje.onMouseOut="this.width=161;this.height=41;" cuando dejemos de pausar el mouse a que tamao queremos que regrese.width="161" height="41" alt="inicio" /> el tamao inicial que veremos la imagen.

Cuadro con texto animado Aqui puedes poner el mensaje que decees

Como insertar video a nuestra pgina web HTMLPara insertar videos a nuestra pgina web podemos hacerla de 2 formas; 1 atreves de los videos de YouTube y la otra subir un video desde nuestra pc Insertar videos de YouTube: para insertar un video hacemos los siguiente vamos al video que queremos insertar en nuestra pgina web, a continuacin daremos clip derecho y le damos en obtener cdigo de insercin copiamos el cdigo que nos aparece y pegamos en nuestra pgina.

Insertar video desde nuestra PCEscribimos la etiqueta EMBED Bueno la etiqueta height y width son para el largo y ancho del video los cuales podemos modificar al tamao que deseamos.

Insertar google map a nuestra pgina HTMLIngresamos y marcamos nuestra ubicacin del lugar que queremos mostrar copiamos el cdigo de insercin y pegamos en nuestro dreawever.

Insertar caja de comentarios de Facebook

Este el cdigo el cual cambiaremos la direccin de la web por nuestra pgina.

// document.write(""); //]]>

El que est marcado de color rojo es el que vamos a reemplazar.

Insertar mensajera: podemos enviar la pgina web atreves de mensaje va Facebook

El siguiente cdigo al cual cambiamos la direccin url

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Insertar botn de like y compartir de Facebook

El cdigo es el siguiente igual que las anteriores modificamos

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Creacin de la maqueta de nuestra pgina web Ejecutamos el programa Adobe Dreamweaver CS6 y nos dirigimos a diseo

Ahora nos vamos a insertar, objetos de diseo, div pa

Nos aparecer un cuadro al cual podemos desplazarlo al lugar que queramos y darle el tamao deseado

Sucesivamente insertamos esa opcin para darle forma a la pginaComo hacer que la imagen se acople al cuadro realizadoNos vamos a insertar imagen y le ponemos un id y precedemos a estos pasos

Luego seleccionamos nuestro cuadro y ponemos el ID que le pusimos a la imagen y nos quedara de la siguiente manera

Para insertar nuestro texto hacemos clip dentro del cuadro y escribimos nuestro texto

Luego nos dirigimos a cdigo para poder modificar el tamao tipo de letra y color ya con los cdigos estudiados

Crear un sliderEjecutamos el programa hi slider y damos en crear

En la parte superior esta para determinar el tamao de nuestro slider expresado en pixeles y en lado izquierdo en el logo de una imagen con el signo ms daremos clip ah para agregar nuestras imgenes

Luego daremos ok para luego publicar

Eso es todo a realizar.

Luego de eso hay que copiar los cdigos y ubicarlos en el lugar que queremos que se muestre en nuestra pgina web HTML

Lenguaje HTML

2