Introducción a las Páginas Web

Una web o página web es en realidad un sitio web (website) formado por varias páginas web enlazadas entre sí. Los documentos que componen el sitio web son archivos y carpetas que contienen texto, imágenes, botones, animaciones, tablas, gráficos, videos, etc .. Para acceder a las páginas web usamos un navegador (Google Chrome, Internet Explorer, Mozilla Firefos, etc.), que se encarga de comunicar nuestro ordenador con el servidor que alberga la página web.

Lenguajes y Protocolos Web

Lenguaje HTML

HTML (HyperText Markup Language o Lenguaje de Marcado de Hipertexto) es el lenguaje que se utiliza para crear los documentos que componen el sitio web ... Este lenguaje indica a los navegadores cómo deben mostrar el contenido de una página web. Nos permite enlazar y navegar por Internet. El lenguaje HTML contiene dos partes: el contenido, que es el texto que se verá en la pantalla de un ordenador, y las etiquetas y atributos que estructuran el texto de la página web en encabezados, párrafos, listas, enlaces, etc. y normalmente no se muestra en pantalla. Los archivos HTML deben tener una extensión htm o html (ej. miweb.htm o miweb.html). Una página web se puede crear directamente escribiendo en HTML (en el editor de texto y guardándolo con la extensión .htmlo .html) o mediante programas editores de páginas web (Adobe Dreamweaver, MicrosoftExpression Web, Kompozer, etc.)

HTML Programa editor de páginas web El código queda más limpio Es más fácil reutilizar código Se necesita aprender el lenguaje HTML El aprendizaje es más difícil Crear una página lleva más tiempo El código no es tan limpio El aprendizaje es sencillo Crear una página es más rápido

Protocolo HTTP

HTTP (Protocolo de Transferencia de Hipertexto) es el conjunto de reglas a seguir para publicar páginas web o HTML. Al visitar una página web, la información que sigue a "http" se denomina el URL, que no es más que la dirección que estamos visitando. Generalmente estas direcciones comienzan con www, que quiere decir "World Wide Web", pero existen muchas otras extensiones posibles.

Servidor FTP

FTP (Protocolo de Transferencia de Archivos). Es un sistema que permite enviar y recibir ficheros entre ordenadores a través de la red Internet. Para usar el FTP de un servidor necesitas un programa de FTP (FileZilla, FireFTP, GoFTP, etc.).

Páginas Web Estáticas y Dinámicas

Paginas estáticas: Son paginas enfocadas principalmente a mostrar una información permanente, se crean mediante el lenguaje HTML. HTML Páginas Dinámicas: Se construyen haciendo uso de otros lenguajes de programación, siendo el más utilizado de todos el PHP. Permiten la creación de aplicaciones dentro de la propia Web, ofrecen también una mayor interactividad con los usuarios que la visiten. PHP 1TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena Mª Jesús Saiz Permiten insertar aplicaciones como encuestas y votaciones, foros de soporte, libros de visita, envío de e-mails inteligentes, reserva de productos, pedidos on-line, atención al cliente de manera personalizada, etc. La creación de una página web dinámica es más compleja, ya que se requiere de conocimientos específicos de lenguajes de programación y gestión de bases de datos.

Accesibilidad Web

Tiene como objetivo lograr que las páginas web sean utilizables por el máximo número de personas, independientemente de sus conocimientos o capacidades personales e independientemente de las características técnicas del equipo utilizado para acceder a la Web. Seguir estas pautas permite crear un contenido más accesible para un mayor número de personas con discapacidad, incluyendo ceguera y baja visión, sordera y deficiencias auditivas, deficiencias del aprendizaje, limitaciones cognitivas, limitaciones de la movilidad, deficiencias del habla, fotosensitividad y combinaciones de las anteriores. Seguir estas pautas puede a menudo ayudar a que el contenido Web sea más usable para cualquier tipo de usuario. Algunas de estas pautas son:

• Una web se tiene que poder ver en todos los navegadores
• Separar el contenido del diseño
• Scripts que corren en el servidor. (Los scripts son pequeños programas que se insertan en la página web y pueden ejecutarse dentro de la página o en el servidor).
• Texto claro y de tamaño fácilmente leíble.
• Texto alternativo en las imágenes

Cómo tener una Página Web en Internet

Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar. Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya, además de incorporar publicidad en nuestra página. Cuando hayas terminado de diseñar tu página web sólo tendrás que subirla a tu servidor manteniendo la estructura creada. Es decir, deberás subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organización de las carpetas. Si no lo haces de este modo, tu sitio experimentará fallos y enlaces que no funcionarán. No debes utilizar caracteres especiales como acentos o eñes, ni espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojes en él. Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también, los nombres en minúscula.

Páginas Web con HTML: Configuración de Notepad++

Para crear un archivo HTML solo hace falta un editor de texto, como el block de notas de Windows. Nosotros vamos a descargar y utilizar el editor freeNotepad++, por ser algo más completo: Notepad++ E:\chus\MJESUS\TIC\TIC_1bach\programacion_html\ej1.html - Notepad+ + [Administrator] Archivo Editar Buscar Vista Codificación Lenguaje Configuracion Macro Ejecutar Plugins Ventana 7 x change log x ej1.html X 1 C 2 D A 4 5 web MJS 6 7 - 1 HTML 8 - J 9 10

Hola a todos KIXtart 11

Pagina de pru L 12 y de reprueba- M 13 > Página de prue N 14 y de reprueba 15

Objective-C 16 P A 17 R 18 C 1 T V XMI 2 F A Gui4Cli H Haskell - Vamos a abrir un archivo nuevo y vamos a decirle que trabaje en el lenguaje html https://notepad-plus-plus-org × A BatchTICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena Mª Jesús Saiz - Después elegiremos el idioma (tipo de codificación) para no tener problemas con algunas letras y signos de nuestro idioma (ñ, acentos, ... ) Elegiremos el sistema de codificación UTF-8 sin BOM. Unicode es un set de caracteres universal, en el que se definen todos los caracteres necesarios para la escritura de la mayoría de los idiomas hablados en la actualidad que se usan en el ordenador. Codificación Codificar en ANSI . Codificar en UTF-8 sin BOM Codificar en UTF-8 Codificar en UCS-2 Big Endian Codificar en UCS-2 Little Endian Juego de caracteres > Convertir a ANSI Convertir a UTF-8 sin BOM Convertir a UTF-8 Convertir a UCS-2 Big Endian Convertir a UCS-2 Little Endian - Cierre automatico de etiquetas HTML Para tener esta función debemos instalar unplugin: vamos a la pestaña plugins ------ plugin manager ------ Show Plugin Manager, aquí nos aparecerá una lista de plugins, deberemos buscar este "TextFXCharacters" y lo instalamos, despues se reiniciara el programa y en la parte superior veremos que hay una nueva pestaña llamada TextFX. Entramos en nuestra nueva pestaña y pulsamos las dos opciones de la imagen: Plugin Manager Available Updates Installed Plugin Category Available Version Stability 1 Tags Jump Others 1.4 Good TagsView Others 1.0.3 Good TakeNotes Others 1.1.1 Good Task List Others 2.0 Good TextFX Characters Others 0.2.6 Good TFS Work Item Others 1.0 Good Tidy2 Others 0.2 Good ToolBucket Others 1.3 Good TopMost Others 1.3 Good < TextFX includes numerous features to transform selected text. Featuring: * Interactive Brace Matching # Quote handling * Character case alternation * Text rewrap " Column Lineup * Fill Text Down * Insert counter text down * Text to code conversion * Numeric Conversion * URI & HTML encoding *HTML to text conversion * Submit text to W3C * Text sorting * Ascii Chart * Leading whitespace repair * Autoclose HTML & braces Homepage: http://textfx.no-ip.com/textfx/ Install Settings Close ar TextFX Plugins Ventana ? TextFX Characters ABC TextFX Quick TextFX Edit TextFX Convert TextFX Insert TextFX HTML Tidy TextFX Tools TextFX Viz TextFX Viz Settings el TextFX Settings +Cancel Overwrite Mode moving from current line › +Autoclose XHTML/XML THEME_NAME) ; ? ></ > +Autoclose {([Brace

Estructura de una Página Web: Etiquetas

Las páginas Web se escriben como etiquetas que hay que abrir y cerrar. Las etiquetas son cajas contenedoras de la información. Las etiquetas se abren o cierran mediante los símbolos<> y </>: Abre la etiqueta Cierra la etiqueta La estructura de la página web debe Lenguaje html Información técnica para el navegador Contenido que aparecerá en la página web E:\chus\MJESUS\TIC\TIC_1bach\programacion_html\ ej0.html - Notepad++ X Archivo Editar Buscar Vista Codificación Lenguaje Configuración Macro Ejecutar TextFX Plugins Ventana ? X 1 [ Indica al navegador que abre un archivo HTML. Apertura de la cabecera del documento. No se muestra en la pantalla. 2 3 4 5 Título de la pagina que se muestra en la barra del navegador. No es obligatorio. 6 Cierre de la cabecera del documento 7 8 Apertura del cuerpo del documento. Esta sección aparece en la pantalla. 9 Texto que va a ser mostrado por el navegador. 10 Cierre del cuerpo del documento 11 12 Indica al navegador que cierra el archivo HTML. D change.log x ej 1 .html x ej0.html x new X llevar siguientes etiquetas: las ha movido o no existe!", THEM úsqueda. . . ".