Vous êtes sur la page 1sur 79

Programacin

Clase 5. HTML
Prof. Gonzalo Mller
gmullerb@mail.com

Facultad de Ingeniera Universidad Central de Venezuela

Clase Anterior
Expresiones Aritmticas: Operadores Aritmticos: +, , *, /,\, % Expresiones Lgicas: Expresiones Lgicas Sencillas:
Operadores Relacinales: >, <, >=, <=, ==, !=

Expresiones Lgicas Compuestas:


Operadores Lgicos: &&, || Operador Negacin: ! Considerar en Corridas en Fro

Precedencia de Operadores Parntesis. Operadores y precedencia dependen del lenguaje.


Programacin Prof. Gonzalo Mller Clase 5 GM - 2

El Programador
Un programador es aquel: Tiene la capacidad para describir la solucin a un problema a travs de un secuencia de pasos. Es capaz de transformar esa secuencia de pasos a un lenguaje que la computadora puede efectuar. Conoce las caractersticas, el funcionamiento de la computadora y las tecnologa asociadas. Establece los tipos de datos y disea las estructuras de datos requeridas a utilizar en la resolucin de un problema.
Programacin Prof. Gonzalo Mller Clase 5 GM - 3

El Programador
Un programador es aquel: Tiene la capacidad para describir la solucin a un problema a travs de un secuencia de pasos. Es capaz de transformar esa secuencia de pasos a un lenguaje que la computadora puede efectuar. Conoce las caractersticas, el funcionamiento de la computadora y las tecnologa asociadas. Establece los tipos de datos y disea las estructuras de datos requeridas a utilizar en la resolucin de un problema.
Programacin Prof. Gonzalo Mller Clase 5 GM - 4

El Programador
Un programador es aquel: Tiene la capacidad para describir la solucin a un problema a travs de un secuencia de pasos. Es capaz de transformar esa secuencia de pasos a un lenguaje que la computadora puede efectuar. Conoce las caractersticas, el funcionamiento de la computadora y las tecnologa asociadas. Establece los tipos de datos y disea las estructuras de datos requeridas a utilizar en la resolucin de un problema.
Programacin Prof. Gonzalo Mller Clase 5 GM - 5

Programa
Es una coleccin de instrucciones, escritas en un lenguaje especializado el cual le indica al procesador que operaciones realizar en funcin 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

Programacin Prof. Gonzalo Mller Clase 5 GM - 6

Sistema Operativo
Es el programa principal que se suministra servicios de gestin y administracin de Proceso, encargndose bsicamente de:
Ejecucin de programas. Comunicacin entre proceso.
Programas

Sistema Operativo

Computador
Programacin Prof. Gonzalo Mller 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 mltiples tareas: OS/2, Windows 95/98, Windows NT Workstation, Windows XP, Windows 7, etc. Sistemas de mltiples usuarios y mltiples tareas: Unix, Linux, MacOs, Windows NT Server, Windows Server System, etc.
Programacin Prof. Gonzalo Mller Clase 5 GM - 8

Lenguaje de programacin
Constituye un juego de smbolos que manejado bajo ciertas reglas y combinados de forma adecuada, permite comunicarle un conjunto de instrucciones al computador. Se clasifican segn:
Nivel. Ejecucin.

Programacin Prof. Gonzalo Mller Clase 5 GM - 9

Lenguaje de programacin
Lenguajes de Programacin segn 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 travs de mnemnicos: ensamblador

Nivel Lenguaje Las instrucciones son expresadas en de Maquina cdigo binario: 0s y 1s


Programacin Prof. Gonzalo Mller Clase 5 GM - 10

Lenguaje de programacin
Lenguajes de Programacin segn su Ejecucin: :

Interpretado Compilado

Menos dependiente del sistema Dependiente del sistema

Programacin Prof. Gonzalo Mller Clase 5 GM - 11

Lenguaje de programacin Compilados


Compilados: Se traducen a cdigo de maquina. El programa creado puede ser ejecutado en diferentes computadores con sistemas operativos similares al utilizado al crearlo.
Programas

Sistema Operativo
Programacin Prof. Gonzalo Mller Clase 5 GM - 12

Lenguaje de programacin Compilados


Computador 1

Programas

Sistema Operativo 1
Computador 2

Mismo Programa

Programas
Mismo Sistema Operativo

Sistema Operativo 1
Programacin Prof. Gonzalo Mller Clase 5 GM - 13

Lenguaje de programacin Compilados


Computador 1

Programas

Sistema Operativo 1
Computador 2

FUNCIONA!
Programas

Mismo Programa

Mismo Sistema Operativo

Sistema Operativo 1
Programacin Prof. Gonzalo Mller Clase 5 GM - 14

Lenguaje de programacin Compilados


Computador 1

Programas

Sistema Operativo 1
Computador 2

Mismo Programa

Programas
Diferentes Sistemas Operativos

Sistema Operativo 2
Programacin Prof. Gonzalo Mller Clase 5 GM - 15

Lenguaje de programacin Compilados


Computador 1

Programas

Sistema Operativo 1

NO FUNCIONA!
Computador 2

Mismo Programa

Programas
Diferentes Sistemas Operativos

Sistema Operativo 2
Programacin Prof. Gonzalo Mller Clase 5 GM - 16

Lenguaje de programacin Compilados


Un error en una instruccin es detectado al ser construido el programa. Fortran, Basic, Pascal, C, C++, etc.

Programacin Prof. Gonzalo Mller Clase 5 GM - 17

Lenguaje de programacin Interpretados


Interpretados: Son Lenguajes de Alto Nivel. Un Interprete se encarga de traducir cada instruccin a cdigo de maquina a medida que se ejecuta el programa. Es necesario poseer el programa y el interprete para poder ejecutarlo. Programas
Interprete

Sistema Operativo
Programacin Prof. Gonzalo Mller Clase 5 GM - 18

Lenguaje de programacin Interpretados


Computador 1

Programas Interprete 1

Sistema Operativo 1
Computador 2

Mismo Programa

Programas Interprete 1

Mismo Sistema Operativo

Sistema Operativo 1
Programacin Prof. Gonzalo Mller Clase 5 GM - 19

Lenguaje de programacin Interpretados


Computador 1

Programas Interprete 1

Sistema Operativo 1
Computador 2

Mismo Programa

FUNCIONA!
Programas Interprete 1

Mismo Sistema Operativo

Sistema Operativo 1
Programacin Prof. Gonzalo Mller Clase 5 GM - 20

Lenguaje de programacin Interpretados


Computador 1

Programas Interprete 1

Sistema Operativo 1
Computador 2

Mismo Programa

Programas Interprete 2

Diferentes Sistemas Operativos

Sistema Operativo 2
Programacin Prof. Gonzalo Mller Clase 5 GM - 21

Lenguaje de programacin Interpretados


Computador 1

Programas Interprete 1

Sistema Operativo 1
Computador 2

Mismo Programa

FUNCIONA!
Programas Interprete 2

Diferentes Sistemas Operativos

Sistema Operativo 2
Programacin Prof. Gonzalo Mller Clase 5 GM - 22

Lenguaje de programacin Interpretados


Un error en una instruccin es detectado al ser ejecutada la misma. Java, C#, JavaScript, VBScript, etc.

Programacin Prof. Gonzalo Mller Clase 5 GM - 23

JavaScript
Es un lenguaje de Programacin 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 interaccin con el usuario. Solo puede ejecutarse en un entorno Web.
La ejecucin es automtica al carga la pagina Web en el explorador.

Posee un vocabulario reducido y de fcil uso.


Programacin Prof. Gonzalo Mller Clase 5 GM - 24

JavaScript
El Cdigo es Porttil. Todo explorador de internet trae incorporado un interpretador de JavaScript. Todo programa JavaScript o script se encuentra contenido en un archivo HTML.

Programacin Prof. Gonzalo Mller Clase 5 GM - 25

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

C-------

B-------

Programacin Prof. Gonzalo Mller Clase 5 GM - 26

Estructura Bsica de un Documento HTML


Documento HTML
(Vista en Navegador)

Documento HTML 1

Programacin Prof. Gonzalo Mller Clase 5 GM - 27

Estructura Bsica de un Documento HTML


Documento HTML
(Estructura interna) <html> <head> <title>TITULO</title> </head> <body> CONTENIDO </body> </html> (*.htm,*.html)
Programacin Prof. Gonzalo Mller Clase 5 GM - 28

Estructura Bsica de un Documento HTML


Encabezado: Le indica al navegador el ttulo que debe presentar y otros parmetros que el navegador puede emplear al presentar el documento.
<html> <head> <title>TITULO</title> </head> <body> CONTENIDO </body> </html>
Programacin Prof. Gonzalo Mller Clase 5 GM - 29

Estructura Bsica de un Documento HTML


Encabezado

Documento HTML 1

Salida en Mozilla
Programacin Prof. Gonzalo Mller Clase 5 GM - 30

Estructura Bsica de un Documento HTML


Cuerpo: Contiene toda la informacin presentar en el navegador.
<html> <head> <title>TITULO</title> </head> <body> CONTENIDO </body> </html>
Programacin Prof. Gonzalo Mller Clase 5 GM - 31

Estructura Bsica de un Documento HTML

Documento HTML 1

Cuerpo

Salida en Mozilla
Programacin Prof. Gonzalo Mller Clase 5 GM - 32

Estructura Bsica de un Documento HTML


Ejemplo:
<html> <head> <title>Documento HTML</title> </head> <body> Documento HTML 1 </body> </html>
Programacin Prof. Gonzalo Mller Clase 5 GM - 33

Estructura Bsica de un Documento HTML


Ttulo Contenido

Documento HTML 1

Salida en Mozilla
Programacin Prof. Gonzalo Mller Clase 5 GM - 34

Etiquetas HTML

<html> <head> <title>TITULO</title> </head> <body> CONTENIDO </body> </html> Etiquetas HTML
Programacin Prof. Gonzalo Mller Clase 5 GM - 35

Etiquetas HTML
Indican al navegador alguna funcin especial. Estn definidas por un nombre. Siempre estn encerradas entre < y >. Siempre se usan en parejas.
/ indica el final del contenido de la etiqueta.

Programacin Prof. Gonzalo Mller Clase 5 GM - 36

Etiquetas HTML

Pareja

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

Pareja

Pareja

Programacin Prof. Gonzalo Mller Clase 5 GM - 37

Ejercicio

5.1. Construir un documento HTML que posea como ttulo su nombre y el contenido todos los datos personales (nombre, edad, n cdula, etc.).

Programacin Prof. Gonzalo Mller Clase 5 GM - 38

Etiquetas HTML
Entre las principales etiquetas HTML se encuentran: Prrafo:
Etiqueta <br/> <hr/> Funcin Salta a siguiente lnea Inserta barra horizontal
Texto <br/> Texto <hr/>
Programacin Prof. Gonzalo Mller Clase 5 GM - 39

Forma de uso:

Etiquetas HTML
Texto:
Etiqueta b i u small sub sup Funcin Texto en negrita Texto en itlica Texto subrayado Texto pequeo Texto subndice Texto superndice
<etiqueta>Texto</etiqueta>
Programacin Prof. Gonzalo Mller 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>
Programacin Prof. Gonzalo Mller Clase 5 GM - 41

Etiquetas HTML

Negrita

Subndice

Salida en Mozilla
Programacin Prof. Gonzalo Mller Clase 5 GM - 42

Ejercicio

Construir un documento HTML que posea como ttulo su nombre y el contenido todos los datos personales, con el nombre en negritas, la cdula subrayada y los correspondientes saltos de lnea.

Programacin Prof. Gonzalo Mller 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:

&nemnico;

Programacin Prof. Gonzalo Mller 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:

&nemnico; Ejemplo: &uuml;


Programacin Prof. Gonzalo Mller 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>
Programacin Prof. Gonzalo Mller Clase 5 GM - 46

Caracteres Especiales

Salida en Mozilla
Programacin Prof. Gonzalo Mller Clase 5 GM - 47

Caracteres Especiales
Carcter Nemnico

> < "

aacute eacute iacute oacute uacute ntilde uuml gt lt quot deg

Programacin Prof. Gonzalo Mller Clase 5 GM - 48

Ejercicio

Construir un documento HTML que posea como ttulo su nombre y el contenido todos los datos personales, con el nombre en negritas, la cdula subrayada y los correspondientes saltos de lnea, acentos y tildes.

Programacin Prof. Gonzalo Mller 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>

Programacin Prof. Gonzalo Mller 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>

Programacin Prof. Gonzalo Mller 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>
Programacin Prof. Gonzalo Mller 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>
Programacin Prof. Gonzalo Mller Clase 5 GM - 53

Etiquetas HTML

Negrita

Negrita y Subrayado

Salida en Mozilla
Programacin Prof. Gonzalo Mller 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>
Programacin Prof. Gonzalo Mller Clase 5 GM - 55

Ejercicio

Construir un documento HTML que posea como ttulo su nombre y el contenido todos los datos personales, con el nombre en negritas, la edad en negritas e itlicas, la cdula subrayada y subndice.

Programacin Prof. Gonzalo Mller Clase 5 GM - 56

Atributos HTML
Existen etiquetas ms complejas que contiene informacin adicional a travs de atributos. Los atributos estn contenidos en la etiqueta de apertura. El valor del atributo siempre se encuentra encerrado entre comillas
<etiqueta atributo1=valor atributo2=valor> </etiqueta>

Programacin Prof. Gonzalo Mller 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>

Programacin Prof. Gonzalo Mller 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>

Programacin Prof. Gonzalo Mller Clase 5 GM - 59

Atributos HTML

Salida en Mozilla
Programacin Prof. Gonzalo Mller Clase 5 GM - 60

Ejercicio

Construir un documento HTML que posea como ttulo su nombre y el contenido todos los datos personales, con nombre en negritas y los correspondientes saltos de lnea. Donde cada elemento tenga un ttulo que indique el significado del mismo.
Programacin Prof. Gonzalo Mller Clase 5 GM - 61

Atributos HTML
Estilos: Es un atributo muy utilizado que puede ser aplicado a cualquier elemento, modificando la apariencia de presentacin del mismo. Se conoce tambin como estilo en lnea. Forma de uso:
<etiqueta style=ESTILO></etiqueta>

Programacin Prof. Gonzalo Mller 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.
Programacin Prof. Gonzalo Mller 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(#, #, #) #: 0255 Decoracin: text-decoration: decoracin decoracin: underline, overline, line-through, blink
Programacin Prof. Gonzalo Mller Clase 5 GM - 64

Atributos HTML
Fuente: propiedades la fuente del texto: Familia: Estilo: Tamao: font-family: fuente font-style: estilo estilo: normal, italic font-size: #em font-size: tamao tamao: x-small, small, large, x-large, Peso: font-weight: peso peso: bold, bolder, lighter, 100900
Programacin Prof. Gonzalo Mller 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(#, #, #) #: 0255

Programacin Prof. Gonzalo Mller Clase 5 GM - 66

Atributos HTML
Ejemplo: Definir un estilo para un texto arial azul subrayado negritas con el doble del tamao normal con fondo amarillo.

Programacin Prof. Gonzalo Mller Clase 5 GM - 67

Atributos HTML
Ejemplo: Definir un estilo para un texto arial azul subrayado negritas con el doble del tamao normal con fondo amarillo. font-family:Arial; font-weight:bold; font-size:2em; color:blue; text-decoration:underline; backgroundcolor:yellow

Programacin Prof. Gonzalo Mller Clase 5 GM - 68

Atributos HTML
Ejemplo: Definir un estilo para un texto arial azul subrayado negritas con el doble del tamao 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>
Programacin Prof. Gonzalo Mller Clase 5 GM - 69

Atributos HTML

Salida en Mozilla
Programacin Prof. Gonzalo Mller Clase 5 GM - 70

Atributos HTML
Ejemplo: Definir un estilo para un texto arial azul subrayado negritas con el doble del tamao 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>
Programacin Prof. Gonzalo Mller Clase 5 GM - 71

Etiquetas HTML
span: es una etiqueta para definir fragmentos de textos con un atributo especfico. Forma de uso:
<span atributo=valor>Texto</span>

Programacin Prof. Gonzalo Mller Clase 5 GM - 72

Etiquetas HTML
span: es una etiqueta para definir fragmentos de textos con un atributo especfico. Forma de uso:
<span atributo=valor>Texto</span>

Ejemplo:
Fragmento de Texto

<span>Lenguaje</span> Etiqueta Neutra


Programacin Prof. Gonzalo Mller Clase 5 GM - 73

Etiquetas HTML
span: es una etiqueta para definir fragmentos de textos con un atributo especfico. 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>


Programacin Prof. Gonzalo Mller Clase 5 GM - 74

Etiquetas HTML
span: es una etiqueta para definir fragmentos de textos con un atributo especfico. Forma de uso:
<span atributo=valor>Texto</span>

Ejemplo:
Atributo

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

Programacin Prof. Gonzalo Mller Clase 5 GM - 75

Etiquetas HTML
span: es una etiqueta para definir fragmentos de textos con un atributo(s) especfico(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>


Programacin Prof. Gonzalo Mller Clase 5 GM - 76

Etiquetas HTML

Salida en Mozilla
Programacin Prof. Gonzalo Mller Clase 5 GM - 77

Ejercicio
Construir un documento HTML que posea como ttulo su nombre y semestre que cursa, en el contenido todas las materias cursadas. nota > 17 en color verde, negritas, parpadeante, el triple del tamao y en Garamond. nota > 14 en color azul, el doble del tamao y en Arial. nota > 9 con fondo amarillo y en Courier New. Otras con fondo rojo, en Courier New y subndice. La nota debe estar en el atributo title.
Programacin Prof. Gonzalo Mller Clase 5 GM - 78

Resumen
Programas. Sistemas Operativos: Funciones, Tipos. Lenguajes de Programacin: Nivel: Alto, Medio, Bajo, Maquina. Ejecucin: Compilados, Interpretados. JavaScript. HTML: Estructura Bsica de un Documento HTML: Encabezado, Cuerpo. Etiquetas y Atributos HTML. HTML lienzo en blanco para comenzar la obra.
Programacin Prof. Gonzalo Mller Clase 5 GM - 79