DOC

EDICIÓN HTML

By Vanessa Cook,2014-06-28 07:25
10 views 0
EDICIÓN HTML

EDICIÓN HTML

Curso de Edición HTML Página 1/236

    ÍNDICE

    Información General _______________________________________________________________________________________________ 5 Introducción - ?Qué es un hipertexto?_______________________________________________________________________________ 6 Introducción>>Normas de estilo: lo esencial _________________________________________________________________________ 9 Introducción>>Herramientas ______________________________________________________________________________________ 11 La base>>Entorno de trabajo ______________________________________________________________________________________ 18 La base>>Etiquetas html __________________________________________________________________________________________ 19 La base>>Estructura básica _______________________________________________________________________________________ 20 La base>>Texto - Tipos y Cuerpos _________________________________________________________________________________ 23 La base>>Colores y fondos de página ______________________________________________________________________________ 27 La base>>Imágenes de fondo ______________________________________________________________________________________ 33 La base>>Etiquetas meta __________________________________________________________________________________________ 35 Tablas>>Introducción _____________________________________________________________________________________________ 38 Tablas>>Crear tablas _____________________________________________________________________________________________ 40 Tablas>>Más opciones de las tablas _______________________________________________________________________________ 43 Multimedia>>Imagen ______________________________________________________________________________________________ 52 Multimedia>>Sonido ______________________________________________________________________________________________ 57 Vínculos>>Externos ______________________________________________________________________________________________ 59 Vínculos>>Internos _______________________________________________________________________________________________ 65 Vínculos>>Tablas de contenido ____________________________________________________________________________________ 71 Vínculos>>De descarga ___________________________________________________________________________________________ 73 Vínculos>>Correo ________________________________________________________________________________________________ 74 Vínculos>>Mapas sensibles _______________________________________________________________________________________ 78 Vínculos>>Enlaces antispam ______________________________________________________________________________________ 82 Curso de Edición HTML Página 2/236

    Vínculos>>Redireccionamiento con etiquetas meta _________________________________________________________________ 85 Validación ________________________________________________________________________________________________________ 86 Plantillas _________________________________________________________________________________________________________ 88 Formularios>>El contenedor principal ______________________________________________________________________________ 96 Formularios>>Tipos de campo _____________________________________________________________________________________ 99 Formularios>>Antispam __________________________________________________________________________________________ 110 Formularios>>Servicios gratuitos de procesado y env;o __________________________________________________________ 111 Marcos>>?Qué son? _____________________________________________________________________________________________ 112 Marcos>>Crear marcos __________________________________________________________________________________________ 113 Marcos>>El marco fantasma ______________________________________________________________________________________ 117 Marcos>>Vínculos _______________________________________________________________________________________________ 118 Marcos>>Iframes ________________________________________________________________________________________________ 122 XHTML __________________________________________________________________________________________________________ 125 Estilos>>Introducción ____________________________________________________________________________________________ 130 Estilos>>Primeros pasos _________________________________________________________________________________________ 132 Estilos>>Estilos para el texto _____________________________________________________________________________________ 152 Estilos>>Estilos para fuentes _____________________________________________________________________________________ 156 Estilos>>Fondos _________________________________________________________________________________________________ 160 Estilos>>Bordes _________________________________________________________________________________________________ 163 Estilos>>Márgenes y rellenos _____________________________________________________________________________________ 166 Estilos>>Listas __________________________________________________________________________________________________ 171 Estilos>>Diseño visual ___________________________________________________________________________________________ 174 Estilos>>Técnicas _______________________________________________________________________________________________ 181 Publicación>>gestor NVU ________________________________________________________________________________________ 184 Curso de Edición HTML Página 3/236

    Publicación>>Filezilla ____________________________________________________________________________________________ 191 Publicación>>Explorador Win98 __________________________________________________________________________________ 196 Publicación>>Windows XP _______________________________________________________________________________________ 198 Publicación>>gFTP ______________________________________________________________________________________________ 206 Recursos>>Web de cole __________________________________________________________________________________________ 209 Recursos>>Imágenes libres ______________________________________________________________________________________ 210 Recursos>>Bookmarlets _________________________________________________________________________________________ 211 Recursos>>Favicon ______________________________________________________________________________________________ 212 Recursos>>Extensiones _________________________________________________________________________________________ 213 Recursos>>Parche Ie7 ___________________________________________________________________________________________ 215 Recursos>>Estructuras __________________________________________________________________________________________ 216 Recursos>>Sitios para aprender CSS _____________________________________________________________________________ 218 Recursos>>Carácteres especiales ________________________________________________________________________________ 219 Recursos>>Referencias web _____________________________________________________________________________________ 221 Accesibilidad>>Directrices _______________________________________________________________________________________ 222 Accesibilidad>>Programas y recursos ____________________________________________________________________________ 223 Errores __________________________________________________________________________________________________________ 228 Curso de Edición HTML Página 4/236

     Información General

    A continuación encontrarás un conjunto de páginas WEB en las que se ha pretendido combinar un mínimo de teoría con el máximo posible de práctica, de forma que se genere un proceso de experimentación que te permita un aprendizaje autónomo. Los objetivos que se plantean son:

    ; Que conozcas la estructura básica de un documento HTML.

    ; Que aprendas a construir una página HTML utilizando los recursos elementales y algunos de nivel intermedio.

    ; Que adquieras las bases necesarias para poder continuar de forma autónoma el aprendizaje sobre elementos avanzados de lenguaje HTML. Para conseguir estos objetivos contamos con un tema central de trabajo: construir y publicar un sitio WEB de contenido educativo compuesto de varias páginas con sus correspondientes enlaces. Los recursos para llevar a cabo esta tarea los iremos trabajando paso a paso, pero deberías tenerla presente desde el momento de iniciar el curso.

    Los materiales que encontrarás recogen una serie de explicaciones sobre los diferentes elementos que constituyen las páginas WEB y un conjunto de

    ejercicios intercalados para ir practicando los conceptos explicados. La navegación por los contenidos del curso puede hacerse siguiendo una secuencia lineal, igual que si se fueran pasando una a una las páginas de un manual o bien de forma no secuencial para lo que se utilizará el menú que tendrás presente de forma constante en la zona izquierda de la pantalla. Puedes plantearte una división de los contenidos en dos fases:

    ; Una fase de de iniciación te permitirá tomar contacto con los elementos básicos del lenguaje HTML para crear las primeras páginas. Incluye los

    contenidos correspondientes a los apartados Introducción, Formato, Tablas, Multimedia (Imágenes), Vínculos y Publicación.

    ; Para adquirir una visión más completa se añadirían el resto de los módulos: Multimedia (Sonidos), Formularios, Marcos, Accesibilidad y, especialmente,

    Estilos.

    La sección de recursos te brinda una selección de algunas páginas desde las cuales puedes encontrar multitud de fuentes con las que completar y enriquecer tu aprendizaje.

    En cuanto a la presentación de la documentación, junto a las explicaciones mediante textos e imágenes encontrarás zonas del manual diferenciadas gráficamente:

    Crear una sitio WEB es algo más que amontonar información más o menos correctamente relacionada.

    Como en todo medio de comunicación se han ido desarrollando una serie de normas de estilo que será conveniente respetar. No pretendemos ser estrictos, pero ten en cuenta que la habilidad para navegar se adquiere gracias a que las páginas por las que pasamos respetan un conjunto similar de convenciones y no tenemos que ir descubriendo nuevos indicadores a cada paso.

Las encontrarás en este tipo de recuadros.

    Curso de Edición HTML Página 5/236

Detrás de cada página WEB hay unos códigos que permiten que la veamos tal como se presenta en nuestra pantalla.

    Aunque trabajarás fundamentalmente en un entorno gráfico en el que las herramientas que utilices irán construyendo el código hay algunos momentos en los que se hace imprescindible recurrir a la edición manual del mismo.

La presentación en pantalla será como la de este bloque.

    El tercer tipo de cuadros será el correspondiente a las prácticas.

    Siempre encontrarás un número identificativo de la actividad que te permitirá localizar rápidamente los ejercicios.

    Este tipo de señal te avisará de alguna cuestión relevante. Puede tratarse de un detalle que puede alterar la forma de llevar a cabo un procedimiento o

    provocar un error, de alguna advertencia importante respecto a códigos o estilos o, en general, alguna nota que te puede evitar más de un quebradero de cabeza.

    La secuencia de prácticas se inicia trabajando con el bloc de notas o cualquier editor de texto plano si estás trabajando con Linux. Si ya has tenido algún

    contacto con alguna otra herramienta de diseño de páginas WEB puede parecerte que esta fase sobra. Como autor del curso considero que es un recurso metodológico necesario para hacer patentes las características del lenguaje HTML y por ello los tres primeros ejercicios son de este tipo. A partir de la cuarta práctica iniciaremos el trabajo con el editor gráfico.

    SEGUIMIENTO Y DESARROLLO DEL CURSO

    El seguimiento y desarrollo del curso implica la lectura detenida de la documentación del mismo, así como la realización de los ejercicios que en él se proponen LOS EJERCICIOS

    Los ejercicios prácticos proponen, de forma guiada, todas las actuaciones que el alumno ha de llevar a cabo.

    Se aconseja a los alumnos y alumnas crear una carpeta o subdirectorio de trabajo en el ordenador del usuario para ir guardando en un mismo sitio el resultado de los ejercicios realizados cuando la actividad lo requiera.

USO Y CONSULTA DE LOS DOCUMENTOS

    Este material está optimizado para una configuración de pantalla de 1024 x 768 con 16 bits de colores, por lo que si se utilizan configuraciones distintas pueden producirse algunas variaciones en la presentación en pantalla de la información. Introducción - ?Qué es un hipertexto?

    ?Qué es un hipertexto?

    Curso de Edición HTML Página 6/236

    El concepto de hipertexto responde, fundamentalmente, a una forma de concebir el acceso a la información. El texto impreso podría considerarse un modelo de presentación de la información de manera lineal: la página 2 sucede a la 1, y así sucesivamente, del prólogo al epílogo.

    Sin embargo existen, incluso en soporte impreso, materiales en los que el lector es quien establece la secuencia de acceso a la información. Podemos

    mencionar ejemplos entre grandes obras literarias, como "Rayuela" de Julio Cortázar, en modestas obras de literatura infantil, del estilo "Construye tu propia aventura" o, en el entorno más cotidiano, la información contenida en un diario.

    Posiblemente sea el modelo del diario el que más fácilmente nos pueda dar pistas sobre lo que es un hipertexto. Prácticamente nadie lee un periódico desde la primera a la última página: seleccionamos la información que consideramos más interesante a partir de lo que aparece en portada y es a ese artículo al que

    acudimos en primer lugar. Esta posibilidad de seleccionar el itinerario que vamos a seguir es uno de los elementos que definen al hipertexto.

    Ahora bien, aunque pueda servirnos para asimilar de forma intuitiva el concepto de hipertexto, tendremos que considerar un segundo elemento para definirlo: la posibilidad de incluir, junto a la información escrita y la imagen fija, el sonido y la imagen en movimiento. Aunque es posible seguir buscando signos identificativos del hipertexto podemos dejar esta primera aproximación en este punto. Por tanto, a los efectos de este curso, consideraremos hipertexto al conjunto de información en soporte multimedia que se estructura mediante enlaces entre los diversos elementos, de forma que el usuario pueda acceder a ella de forma ágil y teniendo la posibilidad de establecer su propio itinerario de "lectura". ?Qué es el HTML?

    Una de las primeras preguntas que se hace uno al acercarse a la creación de páginas WEB es qué significa eso de HTML. Las siglas HTML son las iniciales de la expresión en inglés HyperText Markup Language. Traducido al castellano sería Lenguaje de Etiquetas de Hipertexto.

    Se trata de un conjunto de etiquetas que se van intercalando entre el texto de forma que los programas que utilizamos para navegar por la Red sepan qué es lo que tienen que mostrar cuando accedemos a una página y cómo deben presentarlo en la pantalla. Dada la constante evolución de Internet, el lenguaje HTML ha ido igualmente evolucionando de forma rápida e incorporando especificaciones a través de las

    sucesivas versiones del mismo.

    Existe un organismo internacional independiente ( World Wide Web Consortium o W3C) que se encarga de ir fijando cuáles son las etiquetas válidas pero, a pesar de ello, la batalla comercial que se ha desarrollado en torno a los navegadores para Internet ha originado situaciones en las que han aparecido etiquetas propietarias de un determinado programa.

    Llamamos etiquetas propietarias a aquellas que sólo son interpretadas correctamente por un navegador, mientras que el resto de los navegadores las ignora.

    Como consecuencia de ello hay efectos que se pueden ver cuando se visita una página con el navegador Internet Explorer de Microsoft y que no aparecen con

    otros navegadores o viceversa.

    Curso de Edición HTML Página 7/236

    Antes de ponernos a trabajar con nuestras páginas WEB tendremos que considerar que algunas de las cosas que nos resultan muy sencillas de hacer con un procesador de texto no lo van a ser tanto cuando estemos creando una página para la Red. El motivo es que el lenguaje HTML surgió con la finalidad de permitir organizar de forma estructurada la información (fundamentalmente textual) para su consulta por la red, pero no tenía intención de preocuparse por el aspecto gráfico de dicha información. Por ello echarás de menos algunos de los recursos que nos ofrece un procesador de textos de alto nivel como el MS Word, el OpenOffice.org o el Corel WordPerfect, por ejemplo, aunque en el nivel de profundización podrás comprobar cómo las hojas de estilo en cascada (CSS) sí nos permiten definir de forma bastante flexible la apariencia.

    Conceptos de Servidores y Clientes WEB

    Tras este primer acercamiento a lo que es una página WEB veremos qué hay que hacer para que la información recogida en ella se convierta en algo público y accesible en Internet, o en una Intranet en el interior de nuestro centro de trabajo. Para lograr que nuestras páginas WEB estén disponibles en Internet son necesarios varios requisitos:

    1. Que se encuentren en un ordenador permanentemente conectado a Internet.

    2. Que dispongamos de una dirección IP fija y conocida por los ordenadores que se encargan de traducir las peticiones de los internautas a direcciones IP.

    3. Que el ordenador en el que se alojan nuestras páginas disponga del software adecuado para recibir conexiones exteriores y sea capaz de poner a

    disposición de los visitantes aquello que solicitan.

    Los requisitos que acabamos de mencionar, aunque no exclusivos, son algunos de los que necesitamos para considerar que una máquina es un Servidor WEB. Ya empieza a ser posible que un usuario particular disfrute de condiciones que le permitan cumplir el primer requisito, pero es bastante más difícil que se cumpla el tercero. Tengamos en cuenta que el software del servidor debe ser capaz de prestar el servicio a quien lo solicite, pero tiene también que disponer de las medidas adecuadas para evitar los accesos no autorizados y proteger la información que tiene almacenada el equipo en el que está instalado. Una buena política de seguridad requiere un alto nivel de capacitación técnica, por lo que lo más frecuente es que recurramos a una institución, pública o privada, que nos ofrezca espacio para alojar nuestras páginas, lo cual nos permitirá aprovechar su infraestructura técnica. En el caso de las Intranets, donde el acceso sigue siendo público pero limitado al entorno de la propia institución, la preparación de un servidor WEB resulta menos problemática, ya que no requiere la configuración de seguridad exigida por un servidor abierto a Internet.

    El otro extremo del hilo comunicativo lo establece cada uno de los usuarios que quiere consultar una página WEB. Para ello utilizará un software especializado en recibir la información ofrecida por el ordenador que hace las funciones de servidor. Se trata del Cliente WEB , Agente de usuario o navegador. El empleo del término "navegador" obedece a dos motivos: por una parte la metáfora de Internet como un mar de contenidos nos lleva a aplicar el nombre de "navegador" al programa cuya misión es transportarnos por ese mar. Por otra parte, el término es en parte una generalización por extensión del nombre del programa más utilizado durante la fase inicial de la expansión de Internet: el Navigator de Netscape. Así pues, ya tenemos definida la estructura de relación entre ordenadores necesaria para que la WEB funcione: establecer un par Cliente-Servidor. ?Cómo funciona el par Cliente-Servidor?

    Curso de Edición HTML Página 8/236

    El proceso de distribución de información almacenada en páginas WEB se realiza en las siguientes etapas :

    1. Un internauta solicita una determinada información tecleando el URL de la página o haciendo clic en un enlace.

    2. El proveedor de acceso del internauta consulta a su servidor de nombres de dominio (DNS), traduce la petición recibida del navegador a la dirección IP

    del servidor correspondiente y se pone en contacto con dicho ordenador.

    3. El servidor WEB recibe la petición y comprueba que la información solicitada existe y está disponible. Si es así envía la página solicitada al ordenador

    que le ha realizado la petición.

    4. El navegador del internauta recibe, a través de su proveedor de acceso, los recursos que constituyen la página solicitada y los organiza para

    presentarlos en la pantalla según las instrucciones que contiene el código HTML de la página. Dichos recursos están formados por el texto y los

    elementos multimedia que componen la página: imágenes fijas, sonidos, imágenes en movimiento, pequeños programas. Todos hemos visto páginas que tardan una barbaridad en cargarse hasta que se presentan en pantalla.

    Habitualmente, el contenido textual y los códigos de definición de una página tienen un tamaño bastante reducido. Pero no debemos olvidar que la página está compuesta también por el resto de elementos multimedia. La cantidad de información necesaria para presentar completamente una página es lo que constituye su "peso".

    ?No lo dudes!: Si quieres garantizar la pérdida de visitas diseña tus páginas cargándolas con elementos multimedia irrelevantes o mal trabajados que aumenten innecesariamente el peso de las mismas. Si los visitantes no huyen desesperados por la lentitud de carga tienes el 99% de posibilidades de que no incluyan tu URL entre sus favoritos.

     Introducción>>Normas de estilo: lo esencial

    Unas cuantas ideas esenciales

    ?Cuántas veces hemos oído aquello de que el sentido común acaba por ser el menos común de los sentidos? Si este aforismo es, desgraciadamente, bastante acertado en la mayoría de los campos de nuestra existencia, parece que acrecentara su validez cuando se trata de una actividad en la que intervienen

    ordenadores. Es como si supusiéramos que la potencia de cálculo del ordenador va a ser capaz de suplantar nuestra capacidad de crear, pensar y organizar. Por ello quiero recordar algunos principios esenciales que, debido posiblemente a su obviedad, suelen acabar olvidándose.

    Para comunicar hay que tener algo que decir

    Desde luego, cuando no hay nada que contar lo máximo que podemos lograr, si dominamos la técnica para ello, es crear brillantes y atractivas burbujas vacías. El primer paso que hemos de dar para crear nuestro sitio WEB es aclarar nuestras ideas sobre lo que pretendemos comunicar a través de sus páginas.

    Curso de Edición HTML Página 9/236

Una buena idea puede escribirse con mala caligrafía...

    Podemos afirmar sin lugar a duda que todos los grandes genios de la literatura tuvieron que aprender a manejar un lápiz. Y es casi seguro que más de uno hizo sus primeras intentonas literarias con caligrafías temblorosas que, a pesar de todo, no ocultaban el talento que había tras esos trazos.

    El lenguaje HTML va a ser la herramienta con la que plasmaremos nuestras ideas para publicarlas en Internet. Como ocurre con cualquier herramienta, la calidad de los trabajos realizados con ella dependerá de la familiarización que seamos capaces de adquirir con su manejo ... y eso tiene mucho que ver con la práctica.

    ...aunque es preferible que la caligrafía acompañe

    Si atendemos a lo dicho en los párrafos anteriores puede ocurrir que desequilibremos la balanza hacia el platillo del fondo en detrimento del platillo de la forma. Aunque es verdad que el predominio de la forma nos acerca peligrosamente a los fuegos de artificio, no es conveniente que abandonemos un cierto grado de preocupación por la constante superación de nuestra "caligrafía".

    En muchas ocasiones hay aspectos, que parecen meramente formales, cuya incidencia sobre la legibilidad y facilidad de transmisión de los contenidos los alejan del campo del adorno para llevarlos al terreno de la arquitectura del mensaje. En el fondo tenemos gustos similares

    Cuando hago esta afirmación no me refiero a los aspectos estéticos, donde está claro que encontraríamos casi tantos matices como seres humanos. Pensemos el entorno en el que nos estamos moviendo: navegación por Internet en un entorno educativo. Hay algunas coordenadas que son comunes a la mayoría de los que trazamos esta singladura:

    ; Nos gusta movernos rápido.

    ; Nos impulsa la búsqueda de información relevante.

    ; Agradecemos que nos brinden sistemas cómodos de navegación.

    ; Nos molestan las visitas a sitios en obras (Me refiero a esos que lo único que tienen es un cartel que nos lo dice, porque la verdad es que una buena

    WEB siempre debería estar en obras).

    ; ?Imágenes y sonidos? Todos los que pida el contenido, pero optimizados, que el que paga la conexión telefónica soy yo y no todos tenemos conexiones

    a velocidades de vértigo.

    ; ...

    Seguro que encontramos bastantes más puntos de coincidencia. Así que ?por qué no nos planteamos lo que pensaríamos del autor si fuéramos visitantes de la WEB que estamos creando? Por cierto, cuando intentes responder esta pregunta olvida las horas de esfuerzo que le has tenido que dedicar a lo que tienes en tu pantalla ;-)

    Curso de Edición HTML Página 10/236

Report this document

For any questions or suggestions please email
cust-service@docsford.com