Tamaños y tipos de letra en HTML Para definir distintos tamaños de letra, en HTML se utiliza el elemento lleno donde x es un número que puede variar entre.

Presentación del tema: "Tamaños y tipos de letra en HTML Para definir distintos tamaños de letra, en HTML se utiliza el elemento lleno donde x es un número que puede variar entre."— Transcripción de la presentación:

1 Tamaños y tipos de letra en HTML Para definir distintos tamaños de letra, en HTML se utiliza el elemento lleno donde x es un número que puede variar entre 1 y 6, siendo 1 el tamaño mayor. Se escribirán así: Texto de prueba (H1). Texto de prueba (H2) Texto de prueba (H3) Texto de prueba (H4) Texto de prueba (H5) Texto de prueba (H6)

2 Texto de prueba (H1) Texto de prueba (H2) Texto de prueba (H3) Texto de prueba (H4) Texto de prueba (H5) Texto de prueba (H6)

3 Otra forma de cambiar los tamaños de letra es utilizar el elemento con el atributo VALOR, que es un número entre 1 y 7. El valor por defecto del texto es 3. La gran diferencia de esta notación respecto a la anterior es que no se produce un salto de párrafo después de cada cambio, por lo que pueden hacerse cosas como esta: A A A

4 AAAAAAAAAAAAAAAAAA

5 Texto en color Se puede controlar el color del texto utilizando el elemento con el atributo COLOR="xxx", donde "xxx" es el nombre en inglés del color que se desea. Hay que tener presente que algunos no se verán o se verán mal si la máquina no soporta, por lo menos, 256 colores.

6 Texto ROJO Texto AZUL Texto AZUL MARINO Texto VERDE Texto OLIVA Texto AMARILLO Texto LIMA Texto MAGENTA Texto PURPURA Texto CYAN Texto MARRON Texto NEGRO Texto GRIS Texto TEAL Texto BLANCO

7

8 */Ejercicio 1: Tamaños de fuente El tamaño base de letra es 4 Esta frase tiene un tamaño de letra 6 Esta frase tambien tiene un tamaño de letra 6 (4+2)

9 */Ejercicio 2: Colores Colores Ejemplo 1 Ejemplo 2

10 Existen dos tipos de formato para los caracteres: Los formatos físicos y los formatos lógicos Son los que ordenan como se va a presentar el texto. Son formatos físicos por ejemplo la negrita, el subrayado... Negrita... M Subíndice... Cursiva... M Superíndice... Subrayado... Máquina escribir... Tachado

11 Formatos físicos Este texto esta en negrita en cambio este esta en cursiva tambien se puede subrayar y tachar Se pueden usar varios a la vez Ejemplo de superíndice: 6 2 = 36 Ejemplo de subíndice: X 1 + X 2 = Z

12 Son los que dan una cierta calidad al texto y se apreciarán dependiendo del navegador. Aquí tenemos una lista de algunos de ellos... Texto con formato cita... Texto con formato definición... Texto con formato código... Texto con formato teclado... Texto con formato ejemplo... Texto con formato variable

13 Salto de línea cambio de línea y no de párrafo. El comando "br" produce un "line feed" o nos mueve a la próxima línea. En realidad las dos formas no son equivalentes pues en el primer caso se deja una línea entre la primera frase y la segunda Pagina Prueba Taller de Verano para Estudiantes de Nuevo Ingreso al Programa de Matemáticas Computacionales

14 Un párrafo puede alinearse a la izquierda, centro, derecha o justificarlo. El párrafo en cuestión debe estar contenido entre las etiquetas.... Ejemplo: Este texto está alineado a la izquierda Este texto está centrado Este texto está alineado a la derecha Este texto está justificado

15 Bgcolor: Asignamos un color de fondo a la página mediante un número hexadecimal, o el nombre del color en inglés O

16 text="número hexadecimal / nombre del color". Atributo usado para definir el color del texto por defecto es negro mediante un número hexadecimal, (#2233ff) o el nombre del color en inglés (red). link="número hexadecimal / nombre del color".Parámetro usado para especificar el color de los enlaces de texto. Color por defecto azul. vlink="número hexadecimal / nombre del color". Parámetro usado para especificar el color de los enlaces de texto ya visitados. Color por defecto morado. alink="número hexadecimal / nombre del color". Parámetro usado para especificar el color de los enlaces de texto activo. Color por defecto rojo...... Ejemplo:

17 El lenguaje HTML proporciona un modo sencillo de representar elementos en forma de lista. Dentro de una lista se puede incluir cualquiera de los elementos HTML, e igualmente una lista puede incluirse dentro de formularios, tablas, etc Existen principalmente tres tipos de listas: las listas no ordenadas, las listas ordenadas y las listas de definiciones.

18 Este tipo de lista se usan para enumerar elementos que no tengan un orden definido. Se especificará con el elemento, todo lo que se incluya dentro de esta etiqueta y la de cierre formará la lista. Con los elementos se indicarán cada uno de los componentes de la lista. El formato es el siguiente Titulo Elemento 1 Elemento 2 Elemento 3 Este será el caso básico de lista no ordenada. Se podrán incluir tantos elementos como se deseen y estos podrán ser texto normal, texto resaltado con alguno de los estilos, imágenes, etc

19 Elemento 1 Elemento 2 Elemento 3.1 Elemento 3.2 Elemento 4 Ahora definimos una lista anidada, es decir una lista dentro de una lista, basta con incluir el nuevo elemento UL dentro del elemento UL de la lista original. En este ejemplo también usamos distintos elementos definibles con TYPE, para indicar los componentes de la lista.

20 Estas listas serán similares al caso anterior pero en este se usa un número para indicar el orden de cada elemento de la lista. El ser ordenada no significa que ordene los elementos alfabéticamente sino que los elementos guardan un orden que es el número que indexa la lista Titulo de la lista Elemento 1 Elemento 2... Elemento n

21 El punto de comienzo siempre será el 1 si no se indica en START con otro valor de comienzo y el tipo de numeración puede seleccionarse con el atributo TYPE. Sus posibles valores son: A : Letras mayúsculas. a : Letras minúsculas. I : Número romanos en mayúsculas. i : Número romanos en minúsculas. 0 : Números (es por defecto por tanto no hay que indicarlo). Elemento 1 Elemento 2 Elemento 3 Elemento 1 Elemento 2 Elemento 3.1 Elemento 3.2 Elemento 4

22 En esta lista existirán dos elementos la definición y el termino, se usará principalmente para listas en las que se incluirán una palabra o frase y su definición (diccionario). El termino aparecerá pegado en el borde izquierdo y la definición aparecerá ligeramente tabulada a partir del borde izquierdo Titulo de la lista Termino 1 Definición 1 Termino 2 Definición 2... Termino N Definición N Coche Vehículo de cuatro ruedas Moto Vehículo de dos ruedas

23 permite indicar zonas de texto o imágenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual. Un hiperenlace igualmente podrá definirse dentro de cualquier elemento HTML: listas, párrafos de texto, tablas, formularios

24 Son los enlaces con documentos externos al actual Texto del Hiperenlace Igualmente se puede indicar una imagen como enlace y también texto En este caso aparecerá la imagen con el borde resaltado para indicar que es un hiperenlace

25 Una de las características principales del lenguaje HTML y de la WWW es la introducción de elementos multimedia, en este apartado veremos como introducir gráficos y ficheros de imágenes en un documento HTML.

26 Permite la representación de datos por filas y columnas, en forma tabular. La definición es muy flexible indicando solo los elementos que forman cada fila y columna, calculándose de forma automática el tamaño que deben tener las celdas. En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes, enlaces, texto, listas, cabeceras, formularios, etc No es necesario definir inicialmente el número de filas o columnas ya que estas se calculan según se va definiendo la tabla. En el caso que una fila tenga más columnas que otra, en las otras filas las columnas se representarán vacias, no siendo necesario que todas las filas sean iguales

27 Para definir una tabla usaremos la etiqueta, que tiene el siguiente formato:... Definición de la tabla... 1 2 3 4 5 6

28 Demostración de TH, COLSPAN y ROWSPAN: Numeros Num 1 2 3 4 5 6

29 Demostración de Múltiples Cabeceras: Datos1 Datos2 Datos1.1 Datos1.2 Datos2.1 Datos2.2 1 2 3 4 5 6 7 8

30 Tabla sin Borde: 1 2 3 4 5 6

31 Tabla con Borde=15: 1 2 3 4 5 6

32 Ejemplos con CELLPADDING y CELLSPACING: 1 2 3 4 5 6

33

34

35 Ejemplos de alineaciones ALIGN: Cabecera de Titulo 1 Cabecera de Titulo 2 Cabecera de Titulo 3 Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6

36 Ejemplos de alineaciones verticales VALIGN: Cabecera de Titulo 1 Cabecera de Titulo 2 Cabecera de Titulo 3 Cabecera de Titulo 4 Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 7 Celda 8 Celda 9 Celda 10 Celda 12

37 Cabecera de Titulo 1 Cabecera de Titulo 2 Cabecera de Titulo 3 Celda 1Celda 2Celda 3 Celda 4Celda 5Celda 6 Ejemplos de colores de fondo de las celdas BGCOLOR: (Solo para el Netscape 3.0 e Internet Explorer) Cabecera de Titulo 1 Cabecera de Titulo 2 Cabecera de Titulo 3 Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6

38 Distintos tamaños de tablas: WIDHT=10%

39 Muy bien muchachos aquí les paso algunas etiquetas con ejemplos que les ayudaran en la realización de sus practica y al mismo tiempo también de el examen Etiqueta para poder insertar una imagen en una tabla, y al mismo tiempo para poder modificar la imagen de tamaño Y para poder insertar una imagen en una tabla se utiliza de la siguiente manera la etiqueta: igual se aplica también lo de los tamaños de la imagen de la etiqueta mencionada anteriormente #FF0000 #4383CC #DF01D7 #47BC6A #2E2EFE #0B610B #FFFF00 #F78181 #8A0808 #9A2EFE