Clase Programación 5

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.
El Programador
El Programador
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
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
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.
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.
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

Lenguajes de Programacin segn su Ejecucin: :
Interpretado Compilado
Menos dependiente del sistema Dependiente del sistema
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

Computador 1
Programas
Sistema Operativo 1
Computador 2
Mismo Programa
Programas
Mismo Sistema Operativo
Sistema Operativo 1

Computador 1
Programas
Sistema Operativo 1
Computador 2
FUNCIONA!
Programas
Mismo Programa
Sistema Operativo 1

Computador 1
Programas
Sistema Operativo 1
Computador 2
Mismo Programa
Programas
Diferentes Sistemas Operativos
Sistema Operativo 2

Computador 1
Programas
Sistema Operativo 1
NO FUNCIONA!
Computador 2
Mismo Programa
Programas
Sistema Operativo 2

Un error en una instruccin es detectado al ser construido el programa. Fortran, Basic, Pascal, C, C++, etc.
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

Computador 1
Programas Interprete 1
Sistema Operativo 1
Computador 2
Mismo Programa
Sistema Operativo 1

Computador 1
Sistema Operativo 1
Computador 2
Mismo Programa
FUNCIONA!
Sistema Operativo 1

Computador 1
Sistema Operativo 1
Computador 2
Mismo Programa
Sistema Operativo 2

Computador 1
Sistema Operativo 1
Computador 2
Mismo Programa
FUNCIONA!
Sistema Operativo 2

Un error en una instruccin es detectado al ser ejecutada la misma. Java, C#, JavaScript, VBScript, etc.
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.

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.
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-------
Estructura Bsica de un Documento HTML

Documento HTML
(Vista en Navegador)
Documento HTML 1

Documento HTML
(Estructura interna) <html> <head> <title>TITULO</title> </head> <body> CONTENIDO </body> </html> (*.htm,*.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>

Encabezado
Documento HTML 1
Salida en Mozilla

Cuerpo: Contiene toda la informacin presentar en el navegador.
Documento HTML 1
Cuerpo
Salida en Mozilla

Ejemplo:
<html> <head> <title>Documento HTML</title> </head> <body> Documento HTML 1 </body> </html>

Ttulo Contenido
Documento HTML 1
Salida en Mozilla
Etiquetas HTML
<html> <head> <title>TITULO</title> </head> <body> CONTENIDO </body> </html> Etiquetas HTML
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.
Etiquetas HTML
Pareja
Pareja
Pareja
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.).
Etiquetas HTML
Entre las principales etiquetas HTML se encuentran: Prrafo:
Etiqueta <hr/> Funcin Salta a siguiente lnea Inserta barra horizontal
Texto Texto <hr/>
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>
Forma de uso:
Etiquetas HTML
Ejemplo:
<html> <head> <title>Documento HTML 2</title> </head> <body> Linea 1 Negrita Linea 2Subindice </body> </html>
Etiquetas HTML
Negrita
Subndice
Salida en Mozilla
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.
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;
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: ü

Ejemplo:
<html> <head> <title>HTML de Müller</title> </head> <body> Línea 1 Negrita Línea 2 Subíndice </body> </html>
Salida en Mozilla
Carcter Nemnico
> < "
aacute eacute iacute oacute uacute ntilde uuml gt lt quot deg
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.
Etiquetas HTML
Combinando etiquetas: Al combinar etiquetas siempre se debe cerrar la ltima etiqueta abierta y as sucesivamente:
<etiqueta1><etiqueta2>Texto</etiqueta2></etiqueta1>
Etiquetas HTML
Incorrecto:
Etiquetas HTML
<etiqueta1> <etiqueta2> <etiquetaN> Texto </etiquetaN> </etiqueta2> </etiqueta1>
Etiquetas HTML
Ejemplo:
<html> <head> <title>Documento HTML 3</title> </head> <body> 1 Negrita 2 Subrayado y Negrita </body> </html>
Etiquetas HTML
Negrita
Negrita y Subrayado
Salida en Mozilla
Etiquetas HTML
Ejemplo:
<html> <head> <title>Documento HTML 3</title> </head> <body> 1 Negrita 2 Subrayado y Negrita </body> </html>
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.
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>
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>
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:
Lenguaje
Atributos HTML
Salida en Mozilla
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.
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>
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.
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
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
(1em 16px)
Atributos HTML
Fondo: propiedades del fondo: Color: background-color: nombre nombre: blue, red, green, gray, cyan, peru, yellow, background-color : rgb(#, #, #) #: 0255
Atributos HTML
Ejemplo: Definir un estilo para un texto arial azul subrayado negritas con el doble del tamao normal con fondo amarillo.
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
Atributos HTML
Lenguaje
Atributos HTML
Salida en Mozilla
Atributos HTML
Lenguaje
Etiquetas HTML
span: es una etiqueta para definir fragmentos de textos con un atributo especfico. Forma de uso:
Texto
Etiquetas HTML
Ejemplo:
Fragmento de Texto
Lenguaje Etiqueta Neutra

Etiquetas HTML
Ejemplo:
Atributo
Lenguaje

Etiquetas HTML
Ejemplo:
Atributo
Lenguaje
Etiquetas HTML
span: es una etiqueta para definir fragmentos de textos con un atributo(s) especfico(s). Forma de uso:
Texto
Ejemplo:
Atributo Atributo
Lenguaje

Etiquetas HTML
Salida en Mozilla
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.
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.

Clase Programación 5

Cargado por

Información del documento

Derechos de autor

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Clase Programación 5

Cargado por

Copyright:

Programacin

Facultad de Ingeniera Universidad Central de Venezuela

Expresiones Lgicas Compuestas:

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

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

Programacin Prof. Gonzalo Mller Clase 5 GM - 9

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

Menos dependiente del sistema Dependiente del sistema

Programacin Prof. Gonzalo Mller Clase 5 GM - 11

Lenguaje de programacin Compilados

Lenguaje de programacin Compilados

Lenguaje de programacin Compilados

Mismo Sistema Operativo

Lenguaje de programacin Compilados

Lenguaje de programacin Compilados

Lenguaje de programacin Compilados

Programacin Prof. Gonzalo Mller Clase 5 GM - 17

Lenguaje de programacin Interpretados

Lenguaje de programacin Interpretados

Mismo Sistema Operativo

Lenguaje de programacin Interpretados

Mismo Sistema Operativo

Lenguaje de programacin Interpretados

Diferentes Sistemas Operativos

Lenguaje de programacin Interpretados

Diferentes Sistemas Operativos

Lenguaje de programacin Interpretados

Programacin Prof. Gonzalo Mller Clase 5 GM - 23

Posee un vocabulario reducido y de fcil uso.

Programacin Prof. Gonzalo Mller Clase 5 GM - 25

Programacin Prof. Gonzalo Mller Clase 5 GM - 26

Estructura Bsica de un Documento HTML

Programacin Prof. Gonzalo Mller Clase 5 GM - 27

Estructura Bsica de un Documento HTML

Estructura Bsica de un Documento HTML

Estructura Bsica de un Documento HTML

Estructura Bsica de un Documento HTML

Estructura Bsica de un Documento HTML

Estructura Bsica de un Documento HTML

Estructura Bsica de un Documento HTML

Programacin Prof. Gonzalo Mller Clase 5 GM - 36

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

Programacin Prof. Gonzalo Mller Clase 5 GM - 37

Programacin Prof. Gonzalo Mller Clase 5 GM - 38

Programacin Prof. Gonzalo Mller Clase 5 GM - 43

Programacin Prof. Gonzalo Mller Clase 5 GM - 44

&nemnico; Ejemplo: &uuml;

> < "

aacute eacute iacute oacute uacute ntilde uuml gt lt quot deg

Programacin Prof. Gonzalo Mller Clase 5 GM - 48

Programacin Prof. Gonzalo Mller Clase 5 GM - 49

Programacin Prof. Gonzalo Mller Clase 5 GM - 50

Programacin Prof. Gonzalo Mller Clase 5 GM - 51

Programacin Prof. Gonzalo Mller Clase 5 GM - 56

Programacin Prof. Gonzalo Mller Clase 5 GM - 57

Programacin Prof. Gonzalo Mller Clase 5 GM - 58

Programacin Prof. Gonzalo Mller Clase 5 GM - 59

Programacin Prof. Gonzalo Mller Clase 5 GM - 62

Programacin Prof. Gonzalo Mller Clase 5 GM - 66

Programacin Prof. Gonzalo Mller Clase 5 GM - 67

Programacin Prof. Gonzalo Mller Clase 5 GM - 68

Programacin Prof. Gonzalo Mller Clase 5 GM - 72

<span>Lenguaje</span> Etiqueta Neutra

<span style=font-family:Arial; fontweight:bold; font-size:2em; color:blue; text-decoration:underline;background-color: yellow>Lenguaje</span>

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

&nemnico; Ejemplo: ü