Programación

Clase 5. HTML
Prof. Gonzalo Müller
gmullerb@mail.com

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: >, <, >=, <=, ==, !=

Expresiones Lógicas Compuestas:
Operadores Lógicos: &&, || Operador Negación: ! Considerar en Corridas en Frío

Precedencia de Operadores → Paréntesis. Operadores y precedencia dependen del lenguaje.
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 2

El Programador
Un programador es aquel: Tiene la capacidad para describir la solución a un problema a través de un secuencia de pasos. Es capaz de transformar esa secuencia de pasos a un lenguaje que la computadora puede efectuar. Conoce las características, el funcionamiento de la computadora y las tecnología asociadas. Establece los tipos de datos y diseña las estructuras de datos requeridas a utilizar en la resolución de un problema.
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 3

El Programador
Un programador es aquel: Tiene la capacidad para describir la solución a un problema a través de un secuencia de pasos. Es capaz de transformar esa secuencia de pasos a un lenguaje que la computadora puede efectuar. Conoce las características, el funcionamiento de la computadora y las tecnología asociadas. Establece los tipos de datos y diseña las estructuras de datos requeridas a utilizar en la resolución de un problema.
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 4

El Programador
Un programador es aquel: Tiene la capacidad para describir la solución a un problema a través de un secuencia de pasos. Es capaz de transformar esa secuencia de pasos a un lenguaje que la computadora puede efectuar. Conoce las características, el funcionamiento de la computadora y las tecnología asociadas. Establece los tipos de datos y diseña las estructuras de datos requeridas a utilizar en la resolución de un problema.
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 5

Programa
Es una colección de instrucciones, escritas en un lenguaje especializado el cual le indica al procesador que operaciones realizar en función de obtener un resultado.

void main() { float a, b, c; scanf(“%f”, &a); scanf(“%f”, &b); c = a + b; printf(“%f”, c); }

Program suma; Var a, b, c: Real; Begin Read(a); Read(b); c := a + b: WriteLn(c); End

Programación – Prof. Gonzalo Müller – Clase 5 – GM - 6

Sistema Operativo
Es el programa principal que se suministra servicios de gestión y administración de Proceso, encargándose básicamente de:
Ejecución de programas. Comunicación entre proceso.
Programas

Sistema Operativo

Computador
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 7

Sistema Operativo
Tipos de Sistema Operativo: Sistemas de un solo usuario y una sola tarea: DOS, Windows 3.1, etc. Sistemas de un solo usuario y múltiples tareas: OS/2, Windows 95/98, Windows NT Workstation, Windows XP, Windows 7, etc. Sistemas de múltiples usuarios y múltiples tareas: Unix, Linux, MacOs, Windows NT Server, Windows Server System, etc.
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 8

Lenguaje de programación
Constituye un juego de símbolos que manejado bajo ciertas reglas y combinados de forma adecuada, permite comunicarle un conjunto de instrucciones al computador. Se clasifican según:
Nivel. Ejecución.

Programación – Prof. Gonzalo Müller – Clase 5 – GM - 9

Lenguaje de programación
Lenguajes de Programación según su Nivel: :
Alto Nivel Nivel Medio Bajo Las instrucciones son expresadas en lenguaje natural: Basic, Pascal, etc. Permiten utilizar instrucciones de alto nivel y bajo nivel: C, C++ Las instrucciones son expresadas a través de mnemónicos: ensamblador

Nivel Lenguaje Las instrucciones son expresadas en de Maquina código binario: 0s y 1s
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 10

Lenguaje de programación
Lenguajes de Programación según su Ejecución: :

Interpretado Compilado

Menos dependiente del sistema Dependiente del sistema

Programación – Prof. Gonzalo Müller – Clase 5 – GM - 11

Lenguaje de programación Compilados
Compilados: Se traducen a código de maquina. El programa creado puede ser ejecutado en diferentes computadores con sistemas operativos similares al utilizado al crearlo.
Programas

Sistema Operativo
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 12

Lenguaje de programación Compilados
Computador 1

Programas

Sistema Operativo 1
Computador 2

Mismo Programa

Programas
Mismo Sistema Operativo

Sistema Operativo 1
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 13

Lenguaje de programación Compilados
Computador 1

Programas

Sistema Operativo 1
Computador 2

FUNCIONA!
Programas

Mismo Programa

Mismo Sistema Operativo

Sistema Operativo 1
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 14

Lenguaje de programación Compilados
Computador 1

Programas

Sistema Operativo 1
Computador 2

Mismo Programa

Programas
Diferentes Sistemas Operativos

Sistema Operativo 2
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 15

Lenguaje de programación Compilados
Computador 1

Programas

Sistema Operativo 1

NO FUNCIONA!
Computador 2

Mismo Programa

Programas
Diferentes Sistemas Operativos

Sistema Operativo 2
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 16

Lenguaje de programación Compilados
Un error en una instrucción es detectado al ser construido el programa. Fortran, Basic, Pascal, C, C++, etc.

Programación – Prof. Gonzalo Müller – Clase 5 – GM - 17

Lenguaje de programación Interpretados
Interpretados: Son Lenguajes de Alto Nivel. Un Interprete se encarga de traducir cada instrucción a código de maquina a medida que se ejecuta el programa. Es necesario poseer el programa y el interprete para poder ejecutarlo. Programas
Interprete

Sistema Operativo
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 18

Lenguaje de programación Interpretados
Computador 1

Programas Interprete 1

Sistema Operativo 1
Computador 2

Mismo Programa

Programas Interprete 1

Mismo Sistema Operativo

Sistema Operativo 1
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 19

Lenguaje de programación Interpretados
Computador 1

Programas Interprete 1

Sistema Operativo 1
Computador 2

Mismo Programa

FUNCIONA!
Programas Interprete 1

Mismo Sistema Operativo

Sistema Operativo 1
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 20

Lenguaje de programación Interpretados
Computador 1

Programas Interprete 1

Sistema Operativo 1
Computador 2

Mismo Programa

Programas Interprete 2

Diferentes Sistemas Operativos

Sistema Operativo 2
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 21

Lenguaje de programación Interpretados
Computador 1

Programas Interprete 1

Sistema Operativo 1
Computador 2

Mismo Programa

FUNCIONA!
Programas Interprete 2

Diferentes Sistemas Operativos

Sistema Operativo 2
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 22

Lenguaje de programación Interpretados
Un error en una instrucción es detectado al ser ejecutada la misma. Java, C#, JavaScript, VBScript, etc.

Programación – Prof. Gonzalo Müller – Clase 5 – GM - 23

JavaScript
Es un lenguaje de Programación Interpretado. Desarrollado por Netscape y Sun a finales de 1995. Surge a partir de la necesidad de extender la capacidades de las paginas web en busca de mayor interacción con el usuario. Solo puede ejecutarse en un entorno Web.
La ejecución es automática al carga la pagina Web en el explorador.

Posee un vocabulario reducido y de fácil uso.
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 24

JavaScript
El Código es Portátil. Todo explorador de internet trae incorporado un interpretador de JavaScript. Todo programa JavaScript o script se encuentra contenido en un archivo HTML.

Programación – Prof. Gonzalo Müller – Clase 5 – GM - 25

HTML
Es un lenguaje (no de programación) que permite dar un formato especial a los documentos a ser desplegados en un explorador. Es desarrollado como un estándar para crear y compartir archivos en internet.
A------D-------

C-------

B-------

Programación – Prof. Gonzalo Müller – Clase 5 – GM - 26

Estructura Básica de un Documento HTML
Documento HTML
(Vista en Navegador)

Documento HTML 1

Programación – Prof. Gonzalo Müller – Clase 5 – GM - 27

Estructura Básica de un Documento HTML
Documento HTML
(Estructura interna) <html> <head> <title>TITULO</title> </head> <body> CONTENIDO </body> </html> (*.htm,*.html)
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 28

Estructura Básica de un Documento HTML
Encabezado: Le indica al navegador el título que debe presentar y otros parámetros que el navegador puede emplear al presentar el documento.
<html> <head> <title>TITULO</title> </head> <body> CONTENIDO </body> </html>
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 29

Estructura Básica de un Documento HTML
Encabezado

Documento HTML 1

Salida en Mozilla
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 30

Estructura Básica de un Documento HTML
Cuerpo: Contiene toda la información presentar en el navegador.
<html> <head> <title>TITULO</title> </head> <body> CONTENIDO </body> </html>
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 31

Estructura Básica de un Documento HTML

Documento HTML 1

Cuerpo

Salida en Mozilla
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 32

Estructura Básica de un Documento HTML
Ejemplo:
<html> <head> <title>Documento HTML</title> </head> <body> Documento HTML 1 </body> </html>
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 33

Estructura Básica de un Documento HTML
Título Contenido

Documento HTML 1

Salida en Mozilla
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 34

Etiquetas HTML

<html> <head> <title>TITULO</title> </head> <body> CONTENIDO </body> </html> Etiquetas HTML
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 35

Etiquetas HTML
Indican al navegador alguna función especial. Están definidas por un nombre. Siempre están encerradas entre < y >. 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

<html> <head> <title>TITULO</title> </head> <body> CONTENIDO </body> </html>

Pareja

Pareja

Programación – Prof. Gonzalo Müller – Clase 5 – GM - 37

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 <br/> <hr/> Función Salta a siguiente línea Inserta barra horizontal
Texto <br/> Texto <hr/>
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 39

Forma de uso:

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
<etiqueta>Texto</etiqueta>
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 40

Forma de uso:

Etiquetas HTML
Ejemplo:
<html> <head> <title>Documento HTML 2</title> </head> <body> <b>Linea 1 Negrita</b> <br/> Linea 2<sub>Subindice</sub> </body> </html>
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: ü → &uuml;
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 45

Caracteres Especiales
Ejemplo:
<html> <head> <title>HTML de M&uuml;ller</title> </head> <body> <b>L&iacute;nea 1 Negrita</b> <br/> L&iacute;nea 2<sub> Sub&iacute;ndice </sub> </body> </html>
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:
<etiqueta1><etiqueta2>Texto</etiqueta2></etiqueta1>

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:
<etiqueta1><etiqueta2>Texto</etiqueta2></etiqueta1>

Incorrecto:
<etiqueta1><etiqueta2>Texto</etiqueta1></etiqueta2>

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:
<etiqueta1> <etiqueta2> … <etiquetaN> Texto </etiquetaN> … </etiqueta2> </etiqueta1>
Programación – Prof. Gonzalo Müller – Clase 5 – GM - 52

Etiquetas HTML
Ejemplo:
<html> <head> <title>Documento HTML 3</title> </head> <body> 1<b> Negrita</b> <br/> <b>2<u> Subrayado</u> y Negrita</b> </body> </html>
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:
<html> <head> <title>Documento HTML 3</title> </head> <body> 1<b> Negrita</b> <br/> <b>2<u> Subrayado</u> y Negrita</b> </body> </html>
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
<etiqueta atributo1=“valor” atributo2=“valor”> …</etiqueta>

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:
<etiqueta title=“mensaje”>…</etiqueta>

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:
<etiqueta title=“mensaje”>…</etiqueta>

Ejemplo:
<b title = “C++”>Lenguaje</b>

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:
<etiqueta style=“ESTILO”>…</etiqueta>

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: Estilo: Tamaño: font-family: ‘fuente’ font-style: estilo estilo: normal, italic font-size: #em 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

(1em ≡ 16px)

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”
<b title = “C++” style = “font-family:‘Arial’; font-weight:bold; font-size:2em; color:blue; text-decoration:underline; background-color: yellow”>Lenguaje</b>
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”
<b title = “C++” style = “font-family:‘Arial’; font-weight:bold; font-size:2em; color:blue; text-decoration:underline; background-color: yellow”>Lenguaje</b>
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:
<span atributo=“valor”>Texto</span>

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:
<span atributo=“valor”>Texto</span>

Ejemplo:
Fragmento de Texto

<span>Lenguaje</span> 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:
<span atributo=“valor”>Texto</span>

Ejemplo:
Atributo

<span style=“font-family:‘Arial’; fontweight:bold; font-size:2em; color:blue; text-decoration:underline;background-color: yellow”>Lenguaje</span>
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:
<span atributo=“valor”>Texto</span>

Ejemplo:
Atributo

<span title = “C++”>Lenguaje</span>

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:
<span atributo1=“valor” atributo2=“valor” …atributoN=“valor”>Texto</span>

Ejemplo:
Atributo Atributo

<span title = “C++” style=“font-family:‘Arial’; font-weight:bold; font-size:2em; color:blue; text-decoration:underline;background-color: yellow”>Lenguaje</span>
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

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.