Conceptos basicos de html PDF

Preview

Summary

Conceptos Básicos de HTML Departamento Ciencias de Computación Ana Nieves Rodríguez de Facultad de Ciencias Exactas y Tecnología Costilla Universidad Nacional de Tucumán Conceptos Básicos de HTML by Ana Nieves Rodriguez is licensed under a Creative Commons Reconocimiento-No comercial-Compartir bajo ...

Description

Conceptos Básicos de HTML

Departamento Ciencias de Computación Facultad de Ciencias Exactas y Tecnología Universidad Nacional de Tucumán

Ana Nieves Rodríguez de Costilla

Conceptos Básicos de HTML by Ana Nieves Rodriguez is licensed under a Creative Commons Reconocimiento-No comercial-Compartir bajo la misma licencia 2.5 Argentina License. Based on a work at unt-argentina.academia.edu

Cátedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumán

Contenidos CONTENIDOS ............................................................................................................... 2 EJEMPLOS..................................................................................................................... 3 INTERNET ..................................................................................................................... 4 ¿QUÉ ES LA WEB? .......................................................................................................... 4 EDITORES DE HTML .................................................................................................. 5 LENGUAJE HTML ....................................................................................................... 5 MANEJO DE CÓDIGO. ...................................................................................................... 6 Estructura de una página .......................................................................................... 6 Encabezado ............................................................................................................ 6 Cuerpo de la página ............................................................................................... 7 Comentarios ........................................................................................................... 7 PRIMERA PÁGINA DE EJEMPLO ....................................................................................... 7 En la siguiente figura se muestra cómo se verá la página en el browser:............ 10 INSTRUCCIONES HTML ............................................................................................... 10 Atributos del tag ........................................................................................ 11 COLORES ..................................................................................................................... 11 Color de Fondo de página ...................................................................................... 11 Formato de la instrucción .................................................................................... 11 FORMATO DEL TEXTO .................................................................................................. 12 Uso del tag FONT ............................................................................................... 14 Atributos del tag ......................................................................................... 16 Justificación del texto .......................................................................................... 16 LÍNEAS HORIZONTALES: ............................................................................................... 17 LISTAS: ........................................................................................................................ 18 Listas desordenadas (UL) ....................................................................................... 18 Listas ordenadas (OL)............................................................................................. 20 Lista de Definiciones:.............................................................................................. 21 INSERCIÓN DE IMÁGENES: ................................................................................... 22 PARÁMETROS DE CONFIGURACIÓN ............................................................................... 22 IMAGEN COMO FONDO DE PANTALLA: .......................................................................... 23 MARQUESINA ............................................................................................................ 24 ENLACES HIPERTEXTUALES (LINKS) ............................................................... 25 Servicio: ............................................................................................................... 25 Máquina:puerto .................................................................................................... 26 Ruta...................................................................................................................... 26 Gráfico como vínculo: ......................................................................................... 26 Dirección de mail como vínculo: ........................................................................ 26 Vínculos hacia marcadores de la misma página (anclas) ...................................... 26 Vínculos hacia marcadores de la otra página ........................................................ 27 MANEJO DE TABLAS ............................................................................................... 27

Pag. 2

Ing. Ana Nieves Rodríguez

Cátedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumán Atributos de tabla .................................................................................................... 28 Atributos de Celda................................................................................................... 28 MARCOS O FRAMES ................................................................................................ 32 Etiqueta ..................................................................................... 33 Frames anidados .................................................................................................. 34 Acceso a otros marcos: ........................................................................................ 35

Ejemplos Figura 1: código HTML en bloc de notas .......................................................................... 8 Figura 2: Guardar como en bloc de notas. ....................................................................... 8 Figura 3: Explorador de windows ..................................................................................... 9 Figura 4: Vista en el browser ............................................................................................ 9 Figura 5: ingreso de los tags y ......................................................................... 10 Figura 6: vista en el browser de salto de línea ............................................................... 10 Figura 7: Uso de color en body ....................................................................................... 12 Figura 8: Títulos .............................................................................................................. 12 Figura 9: Vista en el browser de diferentes niveles de títulos ....................................... 13 Figura 10: Combinación de tags ..................................................................................... 14 Figura 11: vista en el browser de combinación de tags ................................................. 14 Figura 12: uso del tag FONT............................................................................................ 15 Figura 13: color en FONT ................................................................................................ 15 Figura 14: vista en el browser......................................................................................... 16 Figura 15: Uso de DIV ..................................................................................................... 17 Figura 16: Vista en el browser de uso del DIV ................................................................ 17 Figura 17: Ejemplo de listas, vista en el browser y código HTML .................................. 19 Figura 18: vista en el browser de lista con circle............................................................ 19 Figura 19: Ejemplo de Listas ordenadas ......................................................................... 20 Figura 20: Ejemplo de listas ordenadas con números romanos .................................... 21 Figura 21: Inserción de imagenes ................................................................................... 22 Figura 22: Img vista en el browser.................................................................................. 23 Figura 23: Imagen como fondo de pantalla ................................................................... 23 Figura 24: Vista en el browser de imagen como fondo.................................................. 24 Figura 25: Tabla .............................................................................................................. 29 Figura 26: Diseño de la plantilla con tablas con border ................................................. 32 Figura 27: plantilla con borde de tablas =0 .................................................................... 32 Figura 28: Ejemplo de uso de frame ............................................................................... 33 Figura 29: Ejemplo de frame tipo fila ............................................................................. 33 Figura 30: vista en el browser de frames anidados........................................................ 35 Tabla 1: tabla comparativa entre editores ....................................................................... 5 Tabla 2: estructura de una pagina HTML ......................................................................... 7 Tabla 3: saltos de línea y párrafo...................................................................................... 9 Tabla 4: cuadro de tags en texto .................................................................................... 13

Pag. 3

Ing. Ana Nieves Rodríguez

Cátedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumán

Internet El inicio de Internet, también conocida como la Red de redes, se remonta a fines de los años ’60 en los Estados Unidos con la red ARPANET (Advanced Research Project Agency – Proyectos Avanzados de Investigación), luego esta red fue utilizada por el Departamento de Defensa así como por otras dependencias gubernamentales, universidades y centros de investigación de ese país. En esa época apareció el protocolo llamado TCP/IP (Transmisión Control Protocol / Internet Protocol protocolo de control de transmisión o protocolo Inter-redes). El protocolo TCP/IP es la forma que utilizan las máquinas conectadas en la red para poder comunicarse a través de distintos medios físicos como líneas telefónicas, satélite, radio, etc. Pero el gran despegue nace en el año 1985 con la NSFNET creado por la National Science Foundation (Fundación Nacional de Ciencias) que instaló varias supercomputadoras en algunas universidades de EEUU que tenían por objetivo conectar otras universidades y centros de investigación. La NFSNET tuvo sus vaivenes y en 1991 ya se encontraban conectadas 3500 subredes de todo el mundo, por ello se convirtió en el “gran tronco” principal de lo que hoy se conoce como Internet

¿Qué es la Web? Web es la forma en que nos referimos a la WWW (World Wide Web) también conocida como “la gran telaraña del mundo”, es uno de los servicios más conocidos de Internet por ser muy fácil de usar. Una página Web es un archivo guardado en una computadora conectada a Internet, este archivo puede contener imágenes, texto, sonido, vínculos a otras páginas o sitios, etc. Un sitio Web está compuesto por varias páginas de hipertexto, que se conectan entre sí y con páginas ubicadas en otros sitios, formando una especie de "telaraña" (de ahí el uso de la palabra Web, que en inglés significa red, telaraña, enredo, trama). Las páginas Web están escritas en un lenguaje llamado HTML (Hyper-text Markup Language) es un lenguaje basado en tags o marcas. Los HTML son archivos de texto que pueden ser editados libremente con el Notepad de Windows, aunque para hacerlo de esta manera, es necesario conocer la estructura del lenguaje. Sintetizando lo que se dijo anteriormente, una página Web posee texto, gráficos, elementos multimediales y enlaces. El texto puede tener los formatos más comunes, como negrita, itálica y subrayado, pudiendo modificarse su tamaño, color y justificación con respecto al resto de la página. Los enlaces, Links o vínculos son muy importantes porque convierten a la Web en esa especie de "telaraña" permitiendo la conexión entre diferentes páginas y sitios propios o remotos. Un enlace en texto se diferencia de un texto común porque aparece subrayado y de color diferente, cuando movemos el mouse por encima de un enlace, el cursor cambia su forma por el de una mano, y en la parte inferior de la ventana aparece la dirección a la que apunta el enlace.

Pag. 4

Ing. Ana Nieves Rodríguez

Cátedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumán Una página web puede contener, además, otros elementos que se fueron agregando a medida que el formato HTML fue progresando, como hojas de estilo en cascada, módulos en javascript, etc. Existen utilitarios para editar páginas, que emplean la filosofía WYSIWYG (What You See ls What You Get, lo que usted ve es lo que usted obtiene). De esta manera, no es necesario conocer en profundidad el lenguaje HTML, basta con saber usar estos sencillos programas, cuya función es 'traducir' a lenguaje HTML la página que hacemos en pantalla. El manejo de estos programas no es más complicado que el de un procesador de textos. Los editores de tipo WYSIWYG facilitan el trabajo, pero en muchos casos, cuando hay modificaciones, es necesario consultar el código fuente para realizar correcciones. Los códigos "fuente" de las páginas en Internet están disponibles (y sin Copyright). Es entonces posible inspirarse en ellas para utilizar el proceso sin tener que "inventar nada nuevo".

Editores de HTML WYSIWYG (What You See Is What You Get) son programas de fácil utilización que permiten ver lo que se está creando “lo que ves es lo que se obtienes”. A medida que se va diseñando, el editor genera código HTML en segundo plano. Otra alternativa es la de trabajar con editores de texto que resaltan los códigos HTML, como el Note++, que facilitan la detección en errores de sintaxis. Existen dos tendencias al momento de crear una página web: por un lado están aquellas personas que prefieren crear las páginas programando el HTML y por otro, las personas que utilizan editores HTML. Algunas diferencias entre hacerlo de un modo u otro son las siguientes:

!

"

#

Tabla 1: tabla comparativa entre editores

Cada uno debe escoger el camino que más le convenga o el que le parezca más atractivo. De todos modos siempre se puede empezar de un modo y luego pasar al otro modo sin ningún tipo de problema. Incluso, por adelantarnos a los acontecimientos, diríamos que cuando una persona profundiza en el diseño de páginas web llega un momento en el que le hace falta conocer las dos maneras de construir webs. A los programadores en HTML les hará falta aprender un editor porque eso aumentará su productividad y los que utilizan editores necesitarán aprender un poco de HTML para arreglar alguna cosa que el editor ha hecho mal o realizar alguna cosa que el editor no puede hacer

Lenguaje HTML El HTML es un lenguaje descriptivo con el que es posible codificar un hipertexto de manera tal que los programas navegadores lo entiendan. Pag. 5

Ing. Ana Nieves Rodríguez

Cátedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumán Esta codificación se lleva a cabo a través de determinadas marcas conocidas como tags que dan forma al documento. En este punto veremos cuál es la función que cumple cada uno de los tags y las distintas aplicaciones que tienen.

Manejo de código. Los archivos HTML son documentos de texto ASCII (como los TXT), con marcas que funcionan como comandos. Generar un archivo HTML es muy sencillo: se escribe todo en el Bloc de Notas y se graba como documento de texto, pero con la extensión HTM o HTML en lugar de TXT. Por ejemplo, "programador.html". Para ver cómo va quedando la página, simplemente se graba y se ejecuta, al hacer algún cambio en la página, habrá que "actualizar" su contenido mediante el botón actualizar (F5), aunque esto dependerá del navegador que se esté usando. Las tags son expresiones que se codifican incluyendo la "instrucción" dentro de los símbolos "", por ejemplo: . Sin embargo, no todas las marcas funcionan de la misma manera. Algunas sólo se abren y otras se abren y se cierran. Haciendo una comparación con Word en el que para escribir el texto en Negrito, el procedimiento sería: • Presionar el botón negrita para activar la opción. • Escribir el texto deseado. • Presionar el botón negrita para desactivar la opción En lenguaje HTML como se trabaja con marcas llamadas tags, sería: • Abrir el tag negrita. • Escribir el texto deseado. • Cerrar el tag negrita. Que se codifica de la siguiente manera: Texto deseado

Estructura de una página En principio, las páginas HTML cuentan con una estructura determinada. En caso de no cumplir con la misma, es muy probable que la página no se reproduzca con fidelidad a la hora de incluirla en un navegador. Todas las páginas cuentan con dos secciones básicas: • Encabezado - • Cuerpo - Encabezado Todas las páginas comienzan con el tag . Dicho tag le indica al navegador que el documento está codificado en ese lenguaje. A continuación se incluye el encabezado, que comienza con el tag (cabeza) y que luego cuenta con otras marcas antes de cerrarlo con . En suma, el inicio de un documento HTML será:

( ... Texto correspondiente al encabezado de la página...)

Dentro del encabezado, se incluyen los llamados "META TAGS", que cumplen, en su mayoría, una función meramente informativa.

Pag. 6

Ing. Ana Nieves Rodríguez

Cátedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumán Dentro de esa información se incluyen datos como: autor, fecha de expiración, descripción de la página y algunas palabras clave. Los "meta tags" son completamente optativos, es decir que, en caso de que no se incluyan, la página se verá correctamente en el browser. Otro de los tags que forman parte del encabezado es el del título de la página. Por ejemplo, si se está trabajando sobre una página acerca de La Carrera de Programador Universitario, un título podría ser "Carrera de Programador Universitario", y la manera de incluirlo en la página es:

Carrera de Programador Universitario

Cuerpo de la página El cuerpo de la página es la parte que se verá luego en el browser de la Web. Comienza con el tag , que se utiliza para abrir el cuerpo de la página y el tag , que se usa para cerrarlo. Todo lo que haya entre estas dos marcas será lo que se ve cuando se cargue la página desde cualquier browser, el título asignado se verá en la barra de título del browser. Por último, y para cerrar el documento HTML, habrá que cerrar el primer tag abierto, el . Estructura básica de un documento HTML:

Titulo de la pagina

Lo que deseo que se vea….

Tabla 2: estructura de una pagina HTML

Comentarios Antes de abocarnos a la creación de páginas, diremos que los comentarios se realizan en cualquier parte de la página con el siguiente formato: .

Primera Página de ejemplo En el bloc de notas escriba el siguiente texto:

Pag. 7

Ing. Ana Nieves Rodríguez

Cátedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumán

Figura 1: código HTML en bloc de notas

Ahora ...