Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Prepara tus exámenes
Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Prepara tus exámenes con los documentos que comparten otros estudiantes como tú en Docsity
Encuentra los documentos específicos para los exámenes de tu universidad
Estudia con lecciones y exámenes resueltos basados en los programas académicos de las mejores universidades
Responde a preguntas de exámenes reales y pon a prueba tu preparación
Consigue puntos base para descargar
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Comunidad
Pide ayuda a la comunidad y resuelve tus dudas de estudio
Ebooks gratuitos
Descarga nuestras guías gratuitas sobre técnicas de estudio, métodos para controlar la ansiedad y consejos para la tesis preparadas por los tutores de Docsity
Asignatura: Fundamentos de Programación, Profesor: Otros Apuntes, Carrera: Ingeniería Informática, Universidad: UHU
Tipo: Apuntes
1 / 109
Esta página no es visible en la vista previa
¡No te pierdas las partes importantes!
http://www.pacoarce.com 1
2 Francisco J. Arce AnguianoX
El lenguaje de HTML se basa en el uso de etiquetas también llamadas marcas, directivas o comandos ( tags ). Estas etiquetas son fragmentos de texto delimitados por los signos menor que < y mayor que >. Estas etiquetas indican al navegador, la forma de representar los elementos (texto, gráficos, etc.…) que contiene el documento; en este manual, nos referiremos a estas ordenes con la palabra etiqueta. Existe normalmente una etiqueta de inicio **** y otra de final , algunos comandos solo disponen de la de inicio, como es el caso del salto de línea . Todos los elementos que sean situados entre etiquetas o a partir de la de inicio, serán afectados ya sea por texto, o más etiquetas. Las etiquetas que estén mal escritas o que sean desconocidas para el navegador, son ignoradas. Estructuración de un documento. Un documento HTML esta definido por una etiqueta de inicio **** y una terminación . Otras dos partes fundamentales de un documento HTML son la cabecera o encabezamiento, comprendido entre las etiquetas **** y **** y el cuerpo , entre **** y ****.
Definiciones de la cabecera del documento
Cuerpo del documento HTML que se va a visualizar
La cabecera La cabecera de un documento viene delimitada por las etiquetas **** y **** y contiene información sobre el documento. Todas ellas son opcionales, pero es recomendable el uso de la etiqueta ****.
4 Francisco J. Arce AnguianoX Para finalizar, tenemos la etiqueta que permite incluir comentarios dentro de nuestro código fuente, . Es recomendable usarlo en documentos extensos o complejos, ya que permite introducir anotaciones para revisiones posteriores del código.
Para identificar el formato en que ha sido desarrollado un código fuente, se utiliza la etiqueta **** , su contenido de esta permite saber que versión de HTML ha sido utilizada en el documento.
El cuerpo El cuerpo de un documento HTML contiene el texto de la página. Las etiquetas de inicio y fin son **** y **** , y entre ellas se debe situar todo el código restante del documento. Ejemplo de código fuente que utiliza las etiquetas explicadas anteriormente:
Código de ejemplo estructura básica HTML
COLORES Y FONDO DEL DOCUMENTO La etiqueta **** tiene una serie de atributos que permiten establecer una serie de características generales para todo el documento, como puede ser el color del texto, de los enlaces o del fondo del documento. Hay dos maneras de indicar los colores: en formato hexadecimal o referenciados por su nombre preestablecido.
http://www.pacoarce.com 5 Para indicar los colores en formato hexadecimal, se deberá indicar la proporción de rojo, verde y azul correspondiente para formar el color deseado. El valor RGB del color estará determinado por RR, GG y BB para los niveles de Rojo, Verde y Azul, con los valores entre 0 y FF (de 0 a 255). El número es “#000000” corresponde al color negro, “#FF0000” al rojo, “#00FF00” al verde, “#0000FF” al azul, “#FFFFFF” al blanco, y así muchos más. Es más fácil indicar el nombre del color en ingles como: black, teal, blue, navy, lime, white, purple, yellow, olive, red, marron, gray, fucsia, green, silver y aqua. Los atributos que podrán añadirse a la etiqueta **** son los siguientes: BGCOLOR=”#rrggbb o nombre del color”, para indicar el color del fondo del documento. TEXT=”#rrggbb o nombre del color”, para especificar el color general del texto. LINK=”#rrggbb o nombre del color”, para especificar el color del texto de los enlaces. VLINK=”#rrggbb o nombre del color”, para indicar el color del texto de los enlaces ya visitados. ALINK=”#rrggbb o nombre del color”, para indicar el color en que se pondrá el texto del enlace en el momento de su activación. También existe la opción de usar imágenes para el fondo de los documentos HTML. La imagen se mostrará debajo del texto y de las imágenes, y si no es lo suficientemente grande para rellenar el fondo del documento. Será reproducida tantas veces como sea necesario hasta completarlo. El atributo que se utiliza para determinar la imagen de fondo es: BACKGROUND=”nombre del archivo gráfico”. Ejemplos de códigos HTML que utilizan los atributos anteriores.
Ejemplo 1 de aplicación de la etiqueta BODY
http://www.pacoarce.com 7 Cabeceras y separadores. Las cabeceras se emplean para dividir los documentos en secciones, es decir, para marcar los títulos de estas secciones. La etiqueta para las cabeceras es ** y ** donde n varía de 1 a 6. El valor de 1 correspondería con una letra muy grande y el de 6 con una muy pequeña. Al utilizar esta etiqueta, se genera automáticamente un salto de línea similar al utilizado con la etiqueta .
Este libro esta dirigido a aquellos que quieren aprender... El efecto puede observarse en la figura 1. **Páginas interactivas con JavaScript**
Este libro esta dirigido a aquellos que quieren aprender... Figura 1.3 Ejemplo de distintos tipos de cabeceras. Para poder separar partes del documento, la etiqueta
dibuja una barra horizontal que divide la pantalla con un grosor y una longitud determinada a través de sus atributos. El atributo SIZE permite especificar el grosor de dicha barra, mientras que WIDTH indica la longitud o el porcentaje relativo con respecto al ancho de la página. Para la alineación de la barra se utilizara ALIGN con los valores left, right, center, justify o el porcentaje adecuado. NOSHADE elimina la sombra de la barra. Ejemplo de código que utiliza de manera variada, las etiquetas anteriores.Listado de ejemplo de cabeceras y separadores
8 Francisco J. Arce AnguianoX
Texto con Nivel 1 Texto con Nivel 2 Texto con Nivel 3 Texto con Nivel 4 Texto con Nivel 5 Texto con Nivel 6
El resultado puede observarse en la figura 1.4. Figura 1.4. Distintos ejemplos de cabeceras y separadores. Texto con formato preestablecido
10 Francisco J. Arce AnguianoX **** Texto pequeño, el menor tamaño de fuente. **** Superíndice. **** Subíndice. **** Emplearemos esta etiqueta para mostrar un bloque de texto en cursiva. Generalmente se utiliza para marcar una dirección o firma. **** Etiqueta que define un bloque de texto como una cita de otra fuente. Se suele representar con una tabulación y en cursiva. **** Muestra el texto como si fuese una cita. **** Se utiliza para representar una etiqueta HTML o código de programa. **** Presenta el contenido de un bloque de texto enfatizado. Texto más enfatizado que el caso anterior. Negrita. **** Texto tachado. **** Texto grande respecto al tamaño normal. **** Texto pequeño respecto al tamaño normal. **** Centra el texto en la pantalla. **** Cambio de línea similar en tamaño al generado con **** Se marca un conjunto de palabras a las que se les puede aplicar un Determinado estilo con el atributo style. (Esta etiqueta no genera cambio de línea) Ejemplo de código para texto con formato.
Ejemplo de diversos textos con formatos
Subtitulo con H2
Párrafo de texto marcado con P, centrado y con cambios de línea generados con BR.
Texto aumentado con BIG Texto reducido con SMALLTexto con palabras en negrita , Itálica , Subrayada y con los tres estilos .
Un poco de texto marcado con TT: Programa P1 var i=0;
Para terminar, unas formulas: E=mc 2 a k+1 = a k +
http://www.pacoarce.com 11 El resultado puede observarse en la figura 1. Figura 1.6. Apariencia de algunos formatos aplicables al texto de una página HTML. Fuentes La etiqueta **** permite controlar casi totalmente el estilo de un bloque de texto. Podremos establecer el tamaño de la fuente mediante el atributo SIZE , la fuente de texto mediante FACE y el color de la misma con el atributo COLOR. Debe cerrarse mediante . Los tamaños del texto van del 1 al 7. El tamaño normal es el 3. Texto en tamaño 5 Texto en tamaño 1 También podemos cambiar el tamaño de la fuente tomando como referencia el tamaño normal de la fuente. Texto más pequeño Texto más grande Texto mucho más grande Para cambiar el color de un fragmento de texto: Este texto está en azul
http://www.pacoarce.com 13 en otro color (generalmente azul) y subrayado. Si se trata de una imagen con borde, éste aparecerá de color azul. Un enlace será toda zona de la página Web sobre la que al pasar éste cambia de aspecto, y aparecerá en la parte inferior del navegador el lugar al que se accederá. La estructura básica de un enlace: Texto indicativo del enlace Tipos de enlaces Ejemplo A. Enlace a un punto de la misma página En documentos extensos o índices suelen ponerse enlaces desde el principio del documento, al final del mismo y viceversa. El primer paso consiste en marcar las distintas zonas del documento a las que se desea poder acceder de manera inmediata; en este caso el inicio y final del documento. Para el principio del documento añadiremos la línea del código siguiente:
Hemos marcado como inicio un punto en el comienzo del documento. Ahora para el final del documento, pondremos esta línea:
Una vez marcadas las distintas zonas del documento, vamos a situar en el mismo los enlaces que nos permitirán ir de arriba abajo la página. En el inicio y final del documento añadiremos las siguientes líneas:
Pulsa aquí para ir al final de esta pagina
Pulsa aquí para ir al principio de esta Ejemplo B. Enlaces a otras paginas Cuando se dispone de varias páginas, es normal que desde una de ellas se pueda acceder a otra y, desde esta otra a una tercera, etc. El procedimiento es similar al anterior, pero en esta es necesario especificar el nombre del archivo que contiene la página a la que se quiere acceder. Vamos a suponer que tenemos dos páginas llamadas principal.html y secundaria.html
14 Francisco J. Arce AnguianoX Para crear un enlace de la primera a la segunda, deberemos escribir: Pulsa aquí para acceder a mi otra página Si el enlace se quisiese conectar con un punto concreto de la página de marcado como opciones , la estructura del código sería la siguiente: Pulsa aquí para ver las opciones de mi otra pagina Ejemplo C. Enlaces a otros sitios Los siguientes ejemplos ilustran distintos modelos de enlaces:
dirección correo del autor [email protected]
Pulsa aquí para ver una foto Ejemplo de código HTML que trabaja con distintas opciones de enlaces:
Listado de ejemplo de enlaces
Opciones disponibles en esta página
Relación de enlaces disponibles Colección de fotografías
El Tercer Mundo. [No disponible] Todo en música Biblioteca de los seres vivos
Fotografía erótica. [No disponible] [email protected]
16 Francisco J. Arce AnguianoX Ejemplo de listado.
Capitulo 1 Capitulo 2 Capitulo 3
Apartado 3. Apartado 3.
Capitulo 4
Figura 1.8. Ejemplo de utilización de listas desordenadas Listas ordenadas Este tipo de lista se utiliza para relacionar elementos con un orden determinado y precedido de un número que se incrementa automáticamente. Las etiquetas son ** y .** Recordemos que la etiqueta **** , es la encargada de señalar los distintos elementos de una lista. Las listas ordenadas siempre comienzan por 1 y van aumentando progresivamente, pero estas características se pueden controlar mediante los atributos TYPE y START. El atributo TYPE determina el formato de la marca encargada de numerar según la siguiente relación: Letras mayúsculas (TYPE=A) Letras minúsculas (TYPE=a) Números romanos mayúscula (TYPE=I) Números romanos mayúscula (TYPE=i) Números (TYPE=1) START especifica el número del primer elemento de la lista, para valores distintos a 1 (tomado por efecto). El orden se da siempre en números independientemente del tipo de marca seleccionada. Ejemplo de código § Capítulo 1 § Capítulo 2 § Capítulo 3
http://www.pacoarce.com 17
Introducción a Dynamic HTML Brece recorrido por HTML Breve recorrido por JavaScript
Dynamic HTML Hojas de estilo en cascada
parámetro CLASS
Apéndice A. Referencia HTML 4. Apéndice B. Referencia JavaScript Figura 1.9. Ejemplo de listas ordenadas Listas de definición Las listas de definición, son apropiadas para glosarios, catálogos, etc.. Los elementos deben ir englobados entre las etiquetas ** y ** y están formadas por un primer elemento, al que podríamos denominar termino o título concretado con la etiqueta , y un segundo llamad definición señalado con la etiqueta . Ejemplo de código.
HTML Hyper Text MarkUp Language JavaScript Lenguaje orientado a objetos desarrollado para aplicaciones de Internet
IMÁGENES Para incluir imágenes en documentos HTML se emplea la etiqueta **** junto con un atributo imprescindible: SRC.
http://www.pacoarce.com 19 Alineación MIDDLE Alineación BOTTOM Alineación LEFT Alineación RIGHT
Figura 1.10. Ejemplo de alineación de imágenes. Tamaño y borde de una imagen Para poner un marco o borde a una imagen se deberá utilizar el atributo BORDER.
Ejemplo de bordes en imágenes
20 Francisco J. Arce AnguianoX
Figura 1.11. Utilización del atributo BORDER trabajando con imágenes También podemos redefinir el tamaño de una imagen mediante los atributos WIDTH y HEIGHT (anchura y altura) con los que podemos redimensionar una imagen para adaptarla a nuestras necesidades.
Ejemplo de redimensionado de imagen
Imagen a tamaño real Imagen redimensionada
