Clase Programación 5 A

Programación

Clase 5A. HTML en la Web Prof. Gonzalo Müller [email protected]

Facultad de Ingeniería Universidad Central de Venezuela

Clase Anterior


HTML:
Estructura Básica de un Documento HTML: Encabezado
Cuerpo.



Etiquetas y Atributos HTML. Etiquetas: html, head, body, title, br, hr, b, i, u, small, sub, sup, span, script
Atributos: title, style



HTML lienzo en blanco para comenzar la obra.

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

HTML HyperText Markup Language, lenguaje de marcado de hipertexto.


Hipertexto: documento digital contiene información y conduce a otro texto.


La idea original del HTML era presentar texto y vincularlo a otros textos de interés.


El Hipervínculo es la base principal del HTML. Programación – Prof. Gonzalo Müller – Clase 5A – GM - 3

HTML


Hipervínculo: constituyen los enlaces dentro del documento que conducen a:
Secciones dentro del mismo documento • A… • ENLACE • Z…

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

HTML


Hipervínculo: constituyen los enlaces dentro del documento que conducen a:
Secciones dentro del mismo documento • A… • ENLACE • Z…


Otros documentos dentro del mismo sitio web • A… • ENLACE

• B… • C…

• Z…

• W…

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

HTML


Hipervínculo: constituyen los enlaces dentro del documento que conducen a:
Secciones dentro del mismo documento • A… • ENLACE • Z…


Otros documentos dentro del mismo sitio web • A… • ENLACE

• B… • C…

• Z…

• W…


Documentos en otros sitios web en internet • A… • ENLACE

• W… • Q…

• Z…

• D…

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

Etiquetas HTML


a: es una etiqueta HTML para definir un hiperenlace. Forma de uso: Texto

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

Etiquetas HTML


a: es una etiqueta HTML para definir un hiperenlace. Forma de uso: Texto

Atributo que indica la dirección a donde esta dirigido este hiperenlace

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

Etiquetas HTML


a: es una etiqueta HTML para definir un hiperenlace. Forma de uso: Texto

Dirección a donde esta dirigido este hiperenlace

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

Etiquetas HTML


a: es una etiqueta HTML para definir un hiperenlace. Forma de uso: Texto

Texto que ve el lector del documento identificando el hiperenlace

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

Etiquetas HTML


a: es una etiqueta HTML para definir un hiperenlace. Forma de uso: Texto


Documentos en otros sitios web en internet Texto

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

Etiquetas HTML


a: es una etiqueta HTML para definir un hiperenlace. Forma de uso: Texto


Documentos en otros sitios web en internet Texto

Ejemplo: clases Programación – Prof. Gonzalo Müller – Clase 5A – GM - 12

Etiquetas HTML


a: es una etiqueta HTML para definir un hiperenlace. Forma de uso: Texto


Otros documentos dentro del mismo sitio web Texto

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

Etiquetas HTML


a: es una etiqueta HTML para definir un hiperenlace. Forma de uso: Texto


Otros documentos dentro del mismo sitio web Texto

Ejemplo: ejercicio1

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

Etiquetas HTML Ejemplo: ejercicio1 clases ejercicio1 clases

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

ejercicios.html

Diagrama del Sitio


Diagrama o mapa del sitio: Constituyen una descripción gráfica de la organización de las páginas del sitio
Se representa los vínculos entre las diferentes páginas
Se utilizan


Rectángulos para representar las páginas




Líneas para representar las relaciones


Solidas: hiperenlaces internos




Segmentas: hiperenlaces externos Programación – Prof. Gonzalo Müller – Clase 5A – GM - 16

Diagrama del Sitio


Diagrama o mapa del sitio: Constituyen una descripción gráfica de la organización de las páginas del sitio Home ejercicios.html

Clases http://www.scribd.com/gmullerb

Ejercicio 1 desejerc01.html

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

Ejercicio

Construir un documento HTML que posea como título su nombre, el contenido sus datos personales y hiperenlaces a páginas con los datos personales de sus familiares (al menos 2 familiares). Construir las pagina web con título el nombre de su familiar y los datos personales correspondientes en el contenido. Fase 1: Análisis y Diseño: Construir DS Programación – Prof. Gonzalo Müller – Clase 5A – GM - 18

Ejercicio

Construir un documento HTML que posea como título su nombre, el contenido sus datos personales y hiperenlaces a páginas con los datos personales de sus familiares (al menos 2 familiares). Construir las pagina web con título el nombre de su familiar y los datos personales correspondientes en el contenido. Agregar un enlace de regreso. Fase 1: Análisis y Diseño: Construir DS Programación – Prof. Gonzalo Müller – Clase 5A – GM - 19

Etiquetas HTML


a: es una etiqueta HTML para definir un hiperenlace. Forma de uso: Texto


Secciones dentro del mismo documento Texto

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

Etiquetas HTML


a: es una etiqueta HTML para definir un hiperenlace. Forma de uso: Texto


Secciones dentro del mismo documento Texto

?

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

Etiquetas HTML


a: es una etiqueta HTML para definir un hiperenlace. Forma de uso: Texto


Secciones dentro del mismo documento Texto


id: es un atributo HTML que identifica un elemento del documento de forma única. Forma de uso: … Programación – Prof. Gonzalo Müller – Clase 5A – GM - 22

Etiquetas HTML


a: es una etiqueta HTML para definir un hiperenlace. Forma de uso: Texto


Secciones dentro del mismo documento Texto

Ejemplo: … El ejercicio 1 …

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

Etiquetas HTML


a: es una etiqueta HTML para definir un hiperenlace. Forma de uso: Texto


Secciones dentro del mismo documento Texto

Ejemplo: ejercicio1 … El ejercicio 1 …

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

Etiquetas HTML


a: es una etiqueta HTML para definir un hiperenlace. Forma de uso: Texto


Secciones dentro del mismo documento Texto

Ejemplo: ejercicio1 … El ejercicio 1 …

Atributo que identifica de forma “única” un elemento del documento Programación – Prof. Gonzalo Müller – Clase 5A – GM - 25

Etiquetas HTML


a: es una etiqueta HTML para definir un hiperenlace. Forma de uso: Texto


Secciones dentro del mismo documento Texto

Ejemplo: ejercicio1 … El ejercicio 1 … id es uno de los atributos HTML más utilizados Programación – Prof. Gonzalo Müller – Clase 5A – GM - 26

Ejercicio

Construir un documento HTML que posea una lista de enlaces a números: 1 2 3 … 10

Uno …

Diez

10 saltos de líneas font-size:4em 10 saltos de líneas 10 saltos de líneas font-size:4em Programación – Prof. Gonzalo Müller – Clase 5A – GM - 27

Ejercicio

Construir un documento HTML que posea una lista de enlaces a números y de los número a la lista: 1 2 3 … 10

Uno …

Diez

10 saltos de líneas font-size:4em 10 saltos de líneas 10 saltos de líneas font-size:4em Programación – Prof. Gonzalo Müller – Clase 5A – GM - 28

Publicando la pagina Web 1º Registrarse en un proveedor de hospedaje web

http://www.awardspace.net http://x10hosting.com http://www.ismywebsite.com

http://freehostia.com http://www.atspace.com

http://www.hosthelpers.com http://ultimatesitehost.com/hosting.html

http://www.000webhost.com/

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

Publicando la pagina Web 1º Registrarse en un proveedor de hospedaje web

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

Publicando la pagina Web Usualmente al registrarse tiene la posibilidad de escoger su dominio

Dominio: dirección en internet de nuestro sitio web

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

Publicando la pagina Web Una vez registrado puede acceder a su cuenta

Dominio

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

Publicando la pagina Web En ocasiones es necesario obtener en un dominio gratis

http://www.nic.cz.cc Programación – Prof. Gonzalo Müller – Clase 5A – GM - 33

Publicando la pagina Web 1º Registrarse en un proveedor de hospedaje web 2º Utilizar una herramienta para administrar su sitio web

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

Publicando la pagina Web 1º Registrarse en un proveedor de hospedaje web 2º Utilizar una herramienta para administrar su sitio web


Una de las herramientas más populares es el cPanel
Esta herramienta es una aplicación web que casi todos los proveedores ofrecen.
Muy sencilla de usar y segura. Acceder desde su cuenta

Acceder directamente https://lotus.x10hosting.com:2083/

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

Publicando la pagina Web 1º Registrarse en un proveedor de hospedaje web 2º Utilizar una herramienta para administrar su sitio web


Una de las herramientas más populares es el cPanel
Esta herramienta es una aplicación web que casi todos los proveedores ofrecen.
Muy sencilla de usar y segura. 3º Subir los archivos de su sitio web al servidor web del proveedor

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

Subiendo Archivos con cPanel 1º Acceder a la Administración de Archivos

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

Subiendo Archivos con cPanel 1º Acceder a la Administración de Archivos

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

Subiendo Archivos con cPanel 2º Abrir el directorio Web Root

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

Subiendo Archivos con cPanel 2º Abrir el directorio Web Root→carpeta public_html

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

Subiendo Archivos con cPanel 2º Abrir el directorio Web Root→carpeta public_html

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

Subiendo Archivos con cPanel 3º Cargar archivos

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

Subiendo Archivos con cPanel 3º Cargar archivos

Buscar archivo a cargar

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

Subiendo Archivos 3º Cargar archivos

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

Subiendo Archivos 3º Cargar archivos

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

Subiendo Archivos con cPanel

Listo!

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

Subiendo Archivos con cPanel

Listo!

• mipágina.html

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

Subiendo Archivos con cPanel

Listo!

• mipágina.html

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

Home.html


La página principal de sitio web debe llamarse home.html o index.html.

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

Home.html


La página principal de sitio web debe llamarse home.html o index.html.


El servidor web hará la búsqueda de este archivo para enviarlo al navegador, pero si este no se encuentra se presentará el contenido del directorio del sitio web. Contenido del directorio web

• mipágina.html

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

Home.html


La página principal de sitio web debe llamarse home.html o index.html.


Si el servidor web encuentra este archivo lo envía al navegador:

Página home.html

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

Publicando la pagina Web - Carpetas

dominio ↓

domino/subcarpeta subcarpeta

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

Publicando la pagina Web - Carpetas domino/subcarpeta subcarpeta

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

Publicando la pagina Web - Carpetas domino/subcarpeta subcarpeta

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

Publicando la pagina Web - Carpetas domino/subcarpeta subcarpeta

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

Publicando la pagina Web - Subdominios

dominio ↓

subdomino.domino subdomino.

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

Publicando la pagina Web - Subdominios subdomino.domino subdomino.

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

Publicando la pagina Web - Subdominios subdomino.domino subdomino.

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

Publicando la pagina Web - Subdominios subdomino.domino subdomino.

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

Publicando la pagina Web - Subdominios subdomino.domino subdomino.

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

Publicando la pagina Web - Subdominios subdomino.domino subdomino.

http://www.atspace.com

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

Publicando la pagina Web - Subdominios subdomino.domino subdomino.

http://www.atspace.com

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

Subdominio y carpetas

¿Cuál es la diferencia entre subdominio y carpeta? Programación – Prof. Gonzalo Müller – Clase 5A – GM - 63

Subdominio y carpetas Ambos se utilizan para organizar el sitio Web ¿Cuál es la diferencia entre subdominio y carpeta? Subdominio ≡ Especie de Prefijo Carpeta ≡ Especie de Sufijo Es una diferencia Estética Programación – Prof. Gonzalo Müller – Clase 5A – GM - 64

Subdominio y carpetas Ambos se utilizan para organizar el sitio Web ¿Cuál es la diferencia entre subdominio y carpeta? Subdominio ≡ Especie de Prefijo Está disponible más rápidamente

Carpeta ≡ Especie de Sufijo Es una diferencia Estética Programación – Prof. Gonzalo Müller – Clase 5A – GM - 65