¡Descarga Lenguaje-de-programacion-HTML-1 y más Apuntes en PDF de Informática solo en Docsity!
Lenguajes de programación HTML y CSS
Parte 1: Conceptos básicos de HTML 5
¿Cómo crear páginas web?
¿Nunca has oído hablar de HTML, o sólo vagamente del mismo?
No te asustes, las explicaciones vienen desde el primer capítulo ... la práctica sigue justo después.
Empezamos por la presentación de cómo funcionan los sitios web, entonces vamos a descargar todos los programas (gratis) para trabajar bien.
Al final de esta sección, sabrás insertar texto, enlaces e imágenes.
¿Cómo puedo crear sitios web?
El primer capítulo de esta documentación para principiantes, te enseñará a crear un sitio.
Vamos a pasar algún tiempo juntos, todo dependerá de lo rápido que aprendas. Si lees esta documentación regularmente y a buen ritmo, terminarás en una o dos semanas. Pero si necesitas un poco más de tiempo, no te preocupes: la principal es que vayas a tu propio ritmo, con preferencia en pasar un buen rato.
Te sugiero que comiences con las preguntas más sencillas, pero también las más importantes:
Funcionamiento de sitios web
¿Cómo funcionan los sitios web? No tengas miedo de hacer preguntas, incluso si piensas que son absurdas. Es muy importante hablar un poco antes de entrar de lleno en el diseño del sitio. Estoy seguro de que visitas sitios web a diario. Para ello, se ejecuta un programa llamado navegador web, (Chrome, Firefox, Opera, …) haciendo clic en uno de los iconos que se muestran en la siguiente figura y que es habitual que estén disponibles en la mayoría de ordenadores.
Con el navegador, se puede visitar cualquier sitio web. Por ejemplo, un explorador muestra sitios como Wikipedia, un periódico de la ciudad en que resido o mi página en la Universidad de Murcia.
Hoy en día, cualquier persona sabe acceder a la Web ... pero ¿quién sabe realmente cómo funciona internet? ¿Cómo crear páginas web como esta?
Has oído hablar de HTML y CSS, ¿tiene esto que ver con el funcionamiento de sitios web? ¡Por supuesto! Estos son los lenguajes de programación que permiten crear sitios web. Todos los sitios web se basan en estos lenguajes, que son la base de los sitios de internet. HTML fue inventado por Tim Berners Lee en 1991, quien todavía sigue de cerca la evolución de la Web. Creó el World Wide Web Consortium (W3C), que define las nuevas versiones de internet relacionadas con los.lenguajes de programación También ha creado más recientemente, la
Las funciones de HTML y CSS
Para explicar al ordenador lo que quieres hacer, tendrás que utilizar un lenguaje de programación que comprendas. Y es aquí donde las cosas se ponen difíciles, porque vas a tener que aprender dos.
¿Por qué se crearon dos? Uno habría bastado, ¿no? Manejar dos lenguajes será el doble de complejo y el doble de tiempo para aprender ... pero no es el caso. Lo aseguro, si hay dos lenguajes es, en cambio, para facilitar las cosas. Vamos a tratar con dos lenguajes que son complementarios, ya que tienen funciones diferentes:
HTML ( HyperText Markup Language ): apareció por primera vez en 1991 en el lanzamiento de la Web. Su función es la gestión y organización del contenido. Así que en HTML puedes escribir lo que deseas mostrar en la página: texto, enlaces, imágenes …
Se podría decir: "Este es mi título, este es mi menú, aquí está el texto principal de la página, aquí hay una visualización de la imagen, etc. ".
CSS ( Cascading Style Sheets , también conocidas como hojas de estilo): el papel de CSS es gestionar la apariencia de la página web (diseño, posicionamiento, colores, tamaño de texto ...). Este lenguaje ha complementado el código HTML desde 1996.
También puedes haber oído hablar de XHTML. Esta es una variante de HTML que es más rigurosa y que es un poco más complicada de manejar.
En pocas palabras, el HTML apareció por primera vez en 1991. A principios de 2000, la organización W3C lanzó el XHTML indicando que sería el futuro ..., pero no se difundió como se esperaba. En 2009 XHTML salió de la W3C y decidió regresar a HTML para hacerlo evolucionar.
Hay mucha confusión en torno a estos lenguajes, ya que son muy similares. No es uno mejor que el otro, hay dos maneras de hacer las cosas. Aquí vamos a trabajar con la última versión de HTML (HTML5) que ahora es el lenguaje del futuro, que todos estáis invitados a utilizar.
Se puede crear un sitio web únicamente en HTML, pero no va a quedar muy estético por la forma como aparecerá la información. Esta es la razón por la que CSS siempre lo completa.
Para hacerse una idea, la figura siguiente muestra cómo se ve la misma página sin CSS y con CSS.
HTML define el contenido, CCS permite organizar el contenido y definir la presentación: el color, la imagen de fondo, los márgenes, el tamaño del texto … Como te puedes imaginar, CSS necesita una página HTML para funcionar. Es por eso que lo primero que se aprende son los conceptos básicos de HTML antes de lograr el cuidado de la decoración en CSS.
Las primeras páginas no serán las más agradables estéticamente, pero a quién le importa. Esto no durará mucho tiempo.
Diferentes versiones de HTML y CSS
Con el tiempo, HTML y CSS han evolucionado. La primera versión de HTML (HTML 1.0) ni siquiera ofrecía la posibilidad de mostrar las imágenes.
Una muy breve historia de estos lenguajes para conocimiento general:
HTML 1: es la primera versión creada por Tim Berners Lee en 1991. HTML 2: la segunda versión de HTML apareció en 1994 y se terminó en 1996 con la aparición de HTML 3.0, esta es la versión que en realidad plantea las bases de las siguientes versiones de HTML. Las reglas y el funcionamiento de esta versión están dadas por el W3C (mientras que la primera versión fue creada por una persona).
pueden crear sitios web sin tener que aprender el lenguaje en particular. Entre los más conocidos destaca Dreamweaver, su principal inconveniente es a menudo la bastante mala calidad del código HTML y CSS que se genera de forma automática mediante estas herramientas. Un diseñador de sitios web de buena calidad, tarde o temprano precisará conocimientos de HTML y CSS. No es recomendable el uso de estas herramientas.
Editores de texto : se trata de programas dedicados a la escritura de código. Uno por lo general, puede utilizarlos para varios lenguajes, no sólo HTML y CSS. Han demostrado ser poderosos aliados para los diseñadores sitios de web. Invitamos a usar un editor de texto en este curso.
Algunos consejos, si estás frente a un ordenador con Windows, Mac OS X o Linux
Windows
Hay muchos editores de textos, aquí no puedo presentar todos. Sin embargo, te invito a mirar Notepad + +, uno de los más usados entre los disponibles para Windows. Este software es sencillo y gratuito.
Para descargarlo (recuerda sólo hay versión para Windows), accede a Notepad ++ en el sitio http://notepad plus plus.org/. Aparecerá la opción download y accediendo a ella, aparecerá la pantalla mostrada a continuación, desde la que se iniciará el proceso de instalación como cualquier programa de Windows.
Una vez instalado se ejecuta accediendo en el escritorio al icono Notepad++, apareciendo el programa tal como se muestra a continuación:
Sugiero que hagas la siguiente operación: ir a menú>lenguaje>HTML. Esto permitirá que el software sepa que vas a escribir código HTML, pues este lenguaje es uno de entre los muchos de los que permite Notepad++.
Cuando se utiliza el software , será el color de tu código (figura siguiente), el que permitirá identificaciones más fácilmente.
Por ahora, no te preocupes por lo que significa todo este galimatías. Solo quería dar una visión
navegador mostrará los títulos en rojo.
El papel del explorador es esencial. Uno no lo haría, pero un navegador es un programa extremadamente complejo. De hecho, la comprensión del código HTML y CSS es una hazaña. El principal problema, que rápidamente te das cuenta es que los diferentes navegadores no muestran exactamente el mismo sitio de la misma manera. Has de tener el hábito de comprobar con regularidad que el sitio trabaja correctamente en la mayoría de los navegadores.
Los navegadores en ordenadores tipo PC
Es aconsejable instalar varios navegadores en el ordenador para asegurarse de que el sitio funciona correctamente en cada uno de ellos. En general, recomiendo probar el sitio web sobre una base regular por lo menos Google Chrome, Mozilla Firefox, Opera e Internet Explorer.
La siguiente figura muestra una visión general del resultado producido por algunos de los principales navegadores en la página de Google.
Entender las diferencias entre navegadores
Como se ha visto antes, los navegadores no siempre muestran el mismo sitio exactamente de la misma manera. ¿Por qué? Esto es porque los navegadores no siempre saben las últimas características de HTML y CSS. Por ejemplo, Internet Explorer (como es habitual en los productos Microsoft) siempre ha quedado a la zaga en algunas de las características de CSS (y paradójicamente, fue también por delante de algunas otras). Para complicar las cosas, coexisten múltiples versiones del navegador:
Firefox 2, Firefox 3.5, Firefox 3.6, Firefox 4, … Firefox 18; Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Internet Explorer 9; Chrome 8, Chrome 9, Chrome 10, …. Chrome 25; etc.
Cada versión es compatible con las nuevas características, pero si los usuarios no actualizan su navegador, la situación se convierte en un problema para los creadores de sitios web.
Chrome y Firefox han resuelto en gran medida el problema mediante la creación de actualizaciones automáticas, sin intervención del usuario. En Internet Explorer, los usuarios están aún menos incentivados para actualizar sus navegadores pues requieren actualizar a las últimas versiones del sistema operativo Windows (Internet Explorer 9 no está disponible para Windows XP, por ejemplo).
Sitios como When can I use http://caniuse.com/ incluyen una lista de características compatibles con CSS de las diferentes versiones de cada navegador, como se indica en la siguiente figura.
Características gestionadas por los diferentes navegadores
Como puedes ver, es ... complicado. La mayor parte de las preocupaciones más a menudo provienen de las versiones anteriores de Internet Explorer (IE6, IE7, IE8). En este caso has de verificar cómo el sitio se presenta como las versiones anteriores ... ¡Espera lo inesperado! Comprueba especialmente que se muestre el sitio sin errores, sin tratar de obtener exactamente la misma representación en las versiones anteriores de estos navegadores.
Hay un programa para Windows llamado IETester (http://www.my debugbar.com/wiki/IETester). Se puede consultar el sitio debido a las diferentes versiones de Internet Explorer. Ten en cuenta que este programa es relativamente inestable (se bloquea a menudo), pero tiene el mérito de existir.
Los navegadores en el teléfono móvil celular
HTML: Puedes escribir y organizar el contenido de la página (párrafos, encabezados ...); CSS permite dar formato a la página (color, tamaño ...).
Ha habido varias versiones de HTML y CSS. Las últimas versiones son HTML5 y CSS3.
El navegador web es un programa que muestra los sitios Web. Se lee el código HTML y CSS para saber lo que que debe mostrar.
Hay varios navegadores web: Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera ...
Cada uno muestra la página web de forma ligeramente diferente de otros navegadores.
En este curso vamos a aprender a usar HTML y CSS. Vamos a trabajar en un programa llamado "editor de texto" (Aptana, Notepad + +, jEdit, vim ...).
Tu primera página web en HTML
Todo lo necesario es que hayas instalado algún software. Debes tener un editor de textos para crear el sitio (como Notepad ++ o Aptana) y probar varios navegadores (Mozilla Firefox, Google Chrome, Opera ...).
En este capítulo vamos a empezar a practicar. Vamos a descubrir los fundamentos de HTML y editar nuestra primera página web. Así que, por supuesto, no esperamos lograr incluso una página web excepcional en este segundo capítulo, pero ten paciencia … que vendrá.
Crear una página web con el editor
Vamos a entrar en posición. Como he dicho, vamos a crear nuestro sitio en un editor de textos. El software tiene un objetivo simple: que puedas escribir texto.
Al seguir este curso, voy a trabajar en principio con Notepad++ y más adelante con Aptana. Ya vimos previamente como se empezaba a trabajar con Notepad++.
Bueno, ¿qué hacemos ahora? ¿Qué está escrito en esa hoja en blanco? Vamos a hacer una pequeña prueba. Invito a escribir, puedes escribir la misma frase que yo o la que quieras, el objetivo es escribir algo.
Ahora, grabar el archivo. Para ello, es muy simple: como en todos los programas, tiene un menú Archivo> Guardar (o Ctrl S). Un cuadro de diálogo preguntará dónde deseas guardar el archivo y con qué nombre. Guardar en el lugar donde se desee. Da el nombre del archivo que quieras, que termine en .html, pon prueba.html,por ejemplo.
Recomiendo crear una carpeta nueva con los documentos que contienen los archivos de tu sitio. Por mi parte, he creado una carpeta de prueba donde puse mi archivo prueba.html.
Ahora abre el explorador de archivos en la carpeta donde guardaste la página. Visualiza el archivo que acabas de crear. El archivo en el explorador de Windows se visualiza:
El icono que representa el archivo depende del navegador web por defecto. En este caso, el icono es el de Opera, mi navegador por defecto bajo Windows, pero el archivo puede tener otro. Tales iconos aparecen cuando el navegador principal es Firefox o Chrome, por ejemplo. Simplemente haz doble clic en este archivo y ... el navegador se abre y, en la siguiente figura,
Esto no es un título de Este es un título </ title> Esto es sin título
Etiquetas huérfanas
Estas son las etiquetas que más se utilizan para insertar un elemento en un lugar específico (por ejemplo, una imagen). No es necesario delimitar el principio y el fin de la imagen, sólo significa que el equipo "Inserte una imagen aquí."
Una etiqueta huérfana se escribe así:
<image />
Nota que al final / no es obligatorio en HTML5. Podrías escribir <image>. No obstante, para evitar el confundirse con el primer tipo de etiqueta, los diseñadores recomiendan este complemento barra diagonal (/) al final de las etiquetas huérfanas.
Atributos
Los atributos son unas etiquetas referentes a opciones. Se complementan para proporcionar información adicional. El atributo se coloca después del nombre de la etiqueta y tiene el mayor valor, así:
<etiqueta atributo="valor">
¿De qué sirve? Toma la etiqueta <image /> que acabamos de ver. Sólo que no se utiliza mucho. Se podría agregar un atributo que especifique el nombre de la imagen a mostrar:
<image nom="foto.jpg" />
El ordenador entonces entiende que debe mostrar la imagen contenida en el archivo foto.jpg.
En el caso del funcionamiento de etiquetas "pares", se ponen los atributos en la etiqueta de apertura y no en la etiqueta de cerrado. Por ejemplo, este código indica que la cita es de Neil Armstrong y del 21 de julio de 1969:
<quote autor="Neil Armstrong" date="21/07/1969"> Este es un pequeño paso para el hombre, un salto gigante para la la humanidad.</ quote>
Las etiquetas tienen nombres reales en Inglés, que descubrirás más adelante.
Estructura básica de una página HTML
Volviendo a nuestro editor de texto. Os invito a escribir o copiar y pegar el código fuente mostrado a continuación. Este código corresponde a una página web en HTML5:
Código HTML:
Página de prueba HTML5. Rafael Barzanallana </ title> </ head> <body> </body> </html>
Debes poner espacios al principio de algunas líneas para desplazar las etiquetas. No es obligatorio y no tienen impacto en la visualización en pantalla, pero hace que el código fuente sea más legible. Esto se llama sangría. En el editor, basta con pulsar la tecla de tabulación (Tab) para obtener el mismo resultado.
Te darás cuenta que las etiquetas se abren y cierran en un orden específico. Por ejemplo, el <html> es el primero que se abre y es también el último que se cierra (al final del código con </ html>). Las etiquetas deben ser cerradas en el orden inverso de su apertura. Ejemplo:
<html> <body> </body> </html>
Correcto. Una etiqueta que está abierta en el interior de otra también debe estar cerrada la interior.
<html> <body> </html> </body>
etiquetas incorrectas, se entremezclan.
¿No podrías dar una explicación de todas las etiquetas que acabas de copiar en el editor? Por supuesto, no tengas miedo de ver todas estas etiquetas a la vez, voy a explicar su papel.
Codificación ( charset )
Esta etiqueta especifica la codificación utilizada en el archivo .html. Sin entrar en detalles, ya que esto puede convertirse rápidamente en complicado, la codificación indica cómo se guarda el archivo. Determina la forma en que los caracteres especiales se mostrarán (acentos, ideogramas chinos y caracteres japoneses, árabes, etc.).
Existen varias técnicas de codificación con nombres extraños, el lenguaje utilizado es según la norma ISO 8859 15, 775 OEM, Windows 1253 ... Sin embargo, uno debe ser utilizado en la actualidad tanto como sea posible: UTF 8. Este método de codificación muestra sin ningún tipo de problemas prácticamente todos los símbolos de todas las lenguas de nuestro planeta. Es por eso que pongo UTF 8 en esta etiqueta.
También se requiere que el archivo se guarde correctamente en UTF 8. Este es el caso con mayor frecuencia en Linux por defecto, pero, en Windows, debes decírselo al software en general.
Por si no lo haces para cada nuevo archivo, sugiero que vayas en Notepad++ al menú Configuración>Preferencias> Archivo nuevo/Carpeta predeterminada. y selecciona UTF 8 sin BOM en la lista. Si tienes un problema de visualización en la página web, hay un problema con codificación. Asegúrate de que la etiqueta indica UTF 8 y que el archivo se guarda en UTF 8 (el editor de texto es capaz de decirle, Notepad++ lo hace en el menú de codificación).
Título principal de la página
Este es el título de la página, probablemente el más importante. Cada página debe tener un título que describe lo que contiene. Es aconsejable mantener el título lo suficientemente corto (menos de 100 caracteres en general).
El título no aparece en la página visualizada, pero sí en la parte superior del mismo (a menudo en la pestaña del navegador). Guarda la página web y ábrela en tu navegador. Verás que el título aparece en la parte superior del navegador. Debes saber que el título también aparece en los resultados de búsqueda, por lo tanto la elección del título adecuado es importante.
Comentarios
Hemos aprendido a crear nuestra primera página HTML real en este capítulo. Antes de concluir, me gustaría introducir el principio de los comentarios.
Es un texto que simplemente sirve como nota. No se muestra, no es leído por el ordenador, no hace alterar la visualización de la página. En pocas palabras, ¿es inútil?, bueno, si.
Esto es para que el programador y la gente que lee el código fuente de la página, pueda usar los comentarios para dejar información sobre el funcionamiento de la página.
¿Qué interés? Esto te ayudará a recordar cómo está elaborada tu página si regresas al código fuente después de un largo tiempo de ausencia. No te rías, nos sucede a todos los desarrolladores.
Insertar un comentario
Un comentario es una etiqueta HTML con una forma muy especial:
< Esto es un comentario >
Puedes ponerlo donde quieras dentro del código fuente: no tiene ningún impacto en la página, pero se puede utilizar para ayudar a identificar en el código fuente (sobre todo si es largo).
< Encabezado >
Página de prueba HTML5. Rafael Barzanallana </ title> </head> < Fin de la cabecera >
<body> </ body>
</ html>
Cualquiera puede ver tus comentarios ... y todo el código.
Un punto importante: que todos pueden ver el código HTML de la página cuando se publique en una web. Simplemente haciendo clic botón derecho sobre la página y seleccionando "Ver código fuente de la página" (el texto indicado puede cambiar dependiendo del navegador). Se puede probar esta manipulación en cualquier sitio web, que sea funcional, 100% garantizado.
Esto se explica fácilmente: el navegador debe obtener el código HTML para lo que deseas
