APRENDER A CREAR UNA PÁGINA WEB CON HTML

Transcripción

1 APRENDER A CREAR UNA PÁGINA WEB CON HTML Introducción a las páginas web

2 QUÉ ES UNA PÁGINA WEB? Definición de la Real Academia Española Documento situado en una red informática, al que se accede mediante enlaces de hipertexto. 2

3 CARACTERÍSTICAS DE UNA PÁGINA WEB Puede contener texto, imágenes, sonido Se adapta a la conocida World Wide Web (www). Se accede mediante una navegador. Se puede acceder a otras páginas web mediante enlaces. Están escritas por un lenguaje marcado, generalmente HTML. 3

4 CONCEPTOS BÁSICOS I Internet: red informática mundial, descentralizada, formada por la conexión directa entre computadoras mediante un protocolo especial de comunicación. Word Wide Web (www): sistema de documentos de hipertexto que se encuentran entre sí y a los que se accede por medio de Internet. IP: es la sigla de Protocolo de Internet. Se trata de un estándar que se emplea para el envío y recepción de información mediante una red que reúne paquetes conmutados. Dominio: es una dirección o alias de Internet. Esta dirección, es la traducción a caracteres alfanuméricos de una IP que en realidad es lo que entienden los router de Internet. Alojamiento web: es el servicio que permite a los usuarios de Internet un sistema para poder almacenar información con acceso web. 4

5 CONCEPTOS BÁSICOS II Cliente web: equipo que utiliza los recursos que le brinda otro (servidor). Servidor web: es un programa que procesa cualquier aplicación del lado del servidor realizando conexiones con el cliente generando una respuesta en el lado del cliente. Ejemplo de servidor web sería el Apache. INTERNET CLIENTE SERVIDOR 5

6 CONCEPTOS BÁSICOS III Sitio web: es un conjunto de páginas web que son accesibles desde un mismo dominio. Servidor local: es aquel servidor que reside en una red local al equipo de referencia. Se puede acceder desde un navegador web mediante la dirección Hiperenlace (enlace, vínculo): es un elemento de un documento electrónico que está relacionado con otro recurso. Los vínculos permiten que un usuario que está en una página web haga click en una palabra/s para trasladarse virtualmente hacia otra página. World Wide Web Consortium (W3C): establece directivas para normalizar el diseño de las páginas web. 6

7 CONCEPTOS BÁSICOS IV Pixel: superficie homogénea más pequeña de las que componen una imagen, que se define por su brillo y color. Colores en HTML: en HTML los colores se definirán de la siguiente manera #00000 Es es color definido de manera hexadecimal. Cada color tendrá un combinación de letras y números diferentes. En Internet, hay paletas de colores que nos proporcionan estos códigos para cada color. Por ejemplo, 7

8 ÁMBITO DE DESARROLLO Para desarrollar documentos HTML podemos usar distintos programas: Adobe Dreamweaver. Microsoft Expression Web CoffeeCup HTML Editor Notepad++ Es un editor de texto y de código fuente libre con soporte para varios lenguajes de programación. Incluye opciones más avanzadas que pueden ser útiles para usuarios avanzados como desarrolladores y programadores. La extensión de nuestro documento debe ser.html Como más adelante vamos a combinar código HTML con código PHP, se deberá poner la extensión.php 8

9 CREAR UN SERVIDOR LOCAL PARA PROBAR NUESTRAS APLICACIONES I Al final del curso, veremos como publicar una página web en Internet, de manera que pueda ser accesible para todos los usuarios. Pero mientras tanto, podremos probar nuestra página web en un servidor local. Antes para instalar un servidor local, había que instalar Apache (servidor), PHP y MYSQL por separado. Ahora hay programas que traen todo integrado como AppServ o Xampp. Web para descargar Appserv Web para descargar Xampp 9

10 CREAR UN SERVIDOR LOCAL PARA PROBAR NUESTRAS APLICACIONES II Una vez instalado el programa, hay que ejecutar el Apache. Para probar si nos funciona el programa, abriremos un navegador y ponemos o localhost. 10

11 CREAR UN SERVIDOR LOCAL PARA PROBAR NUESTRAS APLICACIONES III FUNCIONA!! 11

12 CREAR UN SERVIDOR LOCAL PARA PROBAR NUESTRAS APLICACIONES IV Dónde añadimos nuestros documentos HTML? Debemos buscar la carpeta xampp en el disco duro, y dentro de esta carpeta, una carpeta que puede llamarse htdocs o www. En el caso de este programa, se usa htdocs. Aquí dentro debemos poner nuestros documentos para que al poner en nuestro navegador coja los archivos correctos. Si ponemos , el programa va a buscar un documento llamado index.html o index.php Así que si ponemos a nuestra página inicial prueba.html no se abrirá, salvo que pongamos /prueba.html 12

13 ANEXO: RUTAS ABSOLUTAS Y RELATIVAS I Las rutas absolutas: incluyen todas las partes de la URL (protocolo, servidor y ruta). Las rutas relativas: prescinden de algunas partes de la URL como el protocolo y el servidor. Acceso a otros archivos usando rutas relativas Acceso a la misma carpeta Estoy en index y quiero acceder a ejemplo_p./ejemplo_p.php ejemplo_p.php Estoy en index.php y quiero acceder a la hoja de estilo./css/style.css 13

14 ANEXO: RUTAS ABSOLUTAS Y RELATIVAS II Acceso a un nivel superior (../) Estoy en style.css dentro de la carpeta css y quiero acceder a una imagen../img/imagen.jpg Acceso a dos niveles superiores (../../) Estoy en style.css y quiero acceder al listado de carpetas donde se encuentra htdocs. 14