Descripción: Clase 5 de Programación, Prof. Gonzalo Müller,
Programación
Clase 5. HTML Prof. Gonzalo Müller
[email protected]
Facultad de Ingeniería Universidad Central de Venezuela
Clase Anterior
Expresiones Aritméticas: Operadores Aritméticos: +, – , *, /,\, % Expresiones Lógicas: Expresiones Lógicas Sencillas:
Operadores Relaciónales: >, =, . Siempre se usan en parejas.
/ indica el final del contenido de la etiqueta.
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 36
Etiquetas HTML
Pareja
TITULO CONTENIDO
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 37
Pareja
Pareja
Ejercicio
5.1. Construir un documento HTML que posea como título su nombre y el contenido todos los datos personales (nombre, edad, nº cédula, etc.).
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 38
Etiquetas HTML
Entre las principales etiquetas HTML se encuentran: Párrafo: Etiqueta
Función Salta a siguiente línea Inserta barra horizontal
Forma de uso: Texto Texto Programación – Prof. Gonzalo Müller – Clase 5 – GM - 39
Etiquetas HTML Texto: Etiqueta b i u small sub sup
Función Texto en negrita Texto en itálica Texto subrayado Texto pequeño Texto subíndice Texto superíndice
Forma de uso: Texto Programación – Prof. Gonzalo Müller – Clase 5 – GM - 40
Etiquetas HTML Ejemplo: Documento HTML 2 Linea 1 Negrita Linea 2Subindice Programación – Prof. Gonzalo Müller – Clase 5 – GM - 41
Etiquetas HTML
Negrita
Subíndice
Salida en Mozilla Programación – Prof. Gonzalo Müller – Clase 5 – GM - 42
Ejercicio
Construir un documento HTML que posea como título su nombre y el contenido todos los datos personales, con el nombre en negritas, la cédula subrayada y los correspondientes saltos de línea.
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 43
Caracteres Especiales Son caracteres que tiene un significado especial o que no pueden ser presentados de forma directa en el navegador. Para poder incluirlos correctamente en el navegador es necesario indicarlo de una forma especial:
&nemónico;
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 44
Caracteres Especiales Son caracteres que tiene un significado especial o que no pueden ser presentados de forma directa en el navegador. Para poder incluirlos correctamente en el navegador es necesario indicarlo de una forma especial:
&nemónico; Ejemplo: ü → ü Programación – Prof. Gonzalo Müller – Clase 5 – GM - 45
Caracteres Especiales Ejemplo: HTML de Müller Línea 1 Negrita Línea 2 Subíndice Programación – Prof. Gonzalo Müller – Clase 5 – GM - 46
Caracteres Especiales ü
í
Salida en Mozilla Programación – Prof. Gonzalo Müller – Clase 5 – GM - 47
Caracteres Especiales Carácter
Nemónico
á é í ó ú ñ ü > < " º
aacute eacute iacute oacute uacute ntilde uuml gt lt quot deg
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 48
Ejercicio
Construir un documento HTML que posea como título su nombre y el contenido todos los datos personales, con el nombre en negritas, la cédula subrayada y los correspondientes saltos de línea, acentos y tildes.
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 49
Etiquetas HTML
Combinando etiquetas: Al combinar etiquetas siempre se debe cerrar la última etiqueta abierta y así sucesivamente: Texto
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 50
Etiquetas HTML
Combinando etiquetas: Al combinar etiquetas siempre se debe cerrar la última etiqueta abierta y así sucesivamente: Texto
Incorrecto: Texto
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 51
Etiquetas HTML
Combinando etiquetas: Al combinar etiquetas siempre se debe cerrar la última etiqueta abierta y así sucesivamente: … Texto … Programación – Prof. Gonzalo Müller – Clase 5 – GM - 52
Etiquetas HTML Ejemplo: Documento HTML 3 1 Negrita 2 Subrayado y Negrita Programación – Prof. Gonzalo Müller – Clase 5 – GM - 53
Etiquetas HTML
Negrita
Negrita y Subrayado
Salida en Mozilla Programación – Prof. Gonzalo Müller – Clase 5 – GM - 54
Etiquetas HTML Ejemplo: Documento HTML 3 1 Negrita 2 Subrayado y Negrita Programación – Prof. Gonzalo Müller – Clase 5 – GM - 55
Ejercicio
Construir un documento HTML que posea como título su nombre y el contenido todos los datos personales, con el nombre en negritas, la edad en negritas e itálicas, la cédula subrayada y subíndice.
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 56
Atributos HTML
Existen etiquetas más complejas que contiene información adicional a través de atributos. Los atributos están contenidos en la etiqueta de apertura. El valor del atributo siempre se encuentra encerrado entre comillas …
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 57
Atributos HTML
Titulo: Es un atributo muy sencillo que puede ser aplicado a cualquier elemento el cual agrega un mensaje emergente al elemento. Forma de uso: …
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 58
Atributos HTML
Titulo: Es un atributo muy sencillo que puede ser aplicado a cualquier elemento el cual agrega un mensaje emergente al elemento. Forma de uso: …
Ejemplo: Lenguaje
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 59
Atributos HTML
Salida en Mozilla Programación – Prof. Gonzalo Müller – Clase 5 – GM - 60
Ejercicio
Construir un documento HTML que posea como título su nombre y el contenido todos los datos personales, con nombre en negritas y los correspondientes saltos de línea. Donde cada elemento tenga un título que indique el significado del mismo. Programación – Prof. Gonzalo Müller – Clase 5 – GM - 61
Atributos HTML
Estilos: Es un atributo muy utilizado que puede ser aplicado a cualquier elemento, modificando la apariencia de presentación del mismo. Se conoce también como estilo en línea. Forma de uso: …
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 62
Atributos HTML
Un estilo esta definido un conjunto de propiedades. “PROPIEDAD1: VALOR1; PROPIEDAD2: VALOR2; …”
Las propiedades se agrupan en 6 grupos, los principales son: Texto. Fuente. Fondo. Programación – Prof. Gonzalo Müller – Clase 5 – GM - 63
Atributos HTML
Texto: propiedades que define la apariencia del texto: Color: color: nombre nombre: blue, red, green, gray, cyan, peru, yellow, … color: rgb(#, #, #) #: 0…255 Decoración: text-decoration: decoración decoración: underline, overline, line-through, blink Programación – Prof. Gonzalo Müller – Clase 5 – GM - 64
Atributos HTML
Fuente: propiedades la fuente del texto: Familia:
font-family: ‘fuente’
Estilo:
font-style: estilo estilo: normal, italic
Tamaño:
font-size: #em
(1em ≡ 16px)
font-size: tamaño tamaño: x-small, small, large, x-large, … Peso:
font-weight: peso peso: bold, bolder, lighter, 100…900 Programación – Prof. Gonzalo Müller – Clase 5 – GM - 65
Atributos HTML
Fondo: propiedades del fondo: Color: background-color: nombre nombre: blue, red, green, gray, cyan, peru, yellow, … background-color : rgb(#, #, #) #: 0…255
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 66
Atributos HTML Ejemplo: Definir un estilo para un texto arial azul subrayado negritas con el doble del tamaño normal con fondo amarillo.
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 67
Atributos HTML Ejemplo: Definir un estilo para un texto arial azul subrayado negritas con el doble del tamaño normal con fondo amarillo. “font-family:‘Arial’; font-weight:bold; font-size:2em; color:blue; text-decoration:underline; backgroundcolor:yellow”
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 68
Atributos HTML Ejemplo: Definir un estilo para un texto arial azul subrayado negritas con el doble del tamaño normal con fondo amarillo. “font-family:‘Arial’; font-weight:bold; font-size:2em; color:blue; text-decoration:underline; backgroundcolor:yellow” Lenguaje Programación – Prof. Gonzalo Müller – Clase 5 – GM - 69
Atributos HTML
Salida en Mozilla Programación – Prof. Gonzalo Müller – Clase 5 – GM - 70
Atributos HTML Ejemplo: Definir un estilo para un texto arial azul subrayado negritas con el doble del tamaño normal con fondo amarillo. “font-family:‘Arial’; font-weight:bold; font-size:2em; color:blue; text-decoration:underline; backgroundcolor:yellow” Lenguaje Programación – Prof. Gonzalo Müller – Clase 5 – GM - 71
Etiquetas HTML
span: es una etiqueta para definir fragmentos de textos con un atributo específico. Forma de uso: Texto
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 72
Etiquetas HTML
span: es una etiqueta para definir fragmentos de textos con un atributo específico. Forma de uso: Texto
Ejemplo: Fragmento de Texto
Lenguaje Etiqueta Neutra Programación – Prof. Gonzalo Müller – Clase 5 – GM - 73
Etiquetas HTML
span: es una etiqueta para definir fragmentos de textos con un atributo específico. Forma de uso: Texto
Ejemplo: Atributo
Lenguaje Programación – Prof. Gonzalo Müller – Clase 5 – GM - 74
Etiquetas HTML
span: es una etiqueta para definir fragmentos de textos con un atributo específico. Forma de uso: Texto
Ejemplo: Atributo
Lenguaje
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 75
Etiquetas HTML
span: es una etiqueta para definir fragmentos de textos con un atributo(s) específico(s). Forma de uso: Texto
Ejemplo: Atributo
Atributo
Lenguaje Programación – Prof. Gonzalo Müller – Clase 5 – GM - 76
Etiquetas HTML
Salida en Mozilla Programación – Prof. Gonzalo Müller – Clase 5 – GM - 77
Ejercicio Construir un documento HTML que posea como título su nombre y semestre que cursa, en el contenido todas las materias cursadas. nota > 17 en color verde, negritas, parpadeante, el triple del tamaño y en Garamond. nota > 14 en color azul, el doble del tamaño y en Arial. nota > 9 con fondo amarillo y en Courier New. Otras con fondo rojo, en Courier New y subíndice. La nota debe estar en el atributo title. Programación – Prof. Gonzalo Müller – Clase 5 – GM - 78
Resumen
Programas. Sistemas Operativos: Funciones, Tipos. Lenguajes de Programación: Nivel: Alto, Medio, Bajo, Maquina. Ejecución: Compilados, Interpretados. JavaScript. HTML: Estructura Básica de un Documento HTML: Encabezado, Cuerpo. Etiquetas y Atributos HTML. HTML lienzo en blanco para comenzar la obra. Programación – Prof. Gonzalo Müller – Clase 5 – GM - 79
