¡Hola Mundo!

¡Hola! Te doy la bienvenida a la sección de aprender html y css, donde encontrarás la forma más fácil de aprender HTML y CSS en línea. Solo necesitas tu computadora con una conexión a internet para tener acceso a nuestros cursos online, e irás aprendiendo acerca de CSS y HTML de una forma divertida e interactiva, mediante diversos ejemplos y ejercicios.

El aprender lenguaje de etiquetas HTML y CSS, es parte esencial para la formación de cualquier desarrollador web; y esto no requiere necesariamente que tengas que saber cómo programar páginas web usando JavaScript u otro lenguaje de programación; sin embargo es necesario que sepas HTML para poder desarrollar una página web en conjunto con cualquier otro lenguaje de programación, ya que el HTML será el que albergue dentro de sí cualquier otro tipo de lenguaje de programación, o de desarrollo web. Así que podemos decir y afirmar que el lenguaje HTML es la base fundamental de cualquier página web que esté bien realizada, y además, te da los cimientos para posteriormente desarrollar tu página web en otros aspectos, como de programación o de diseño web.

Empecemos con nuestra primera página web

Antes de comenzar, te recomendaría que empieces descargando un IDE de HTML y CSS. En lo personal mi favorito es el IDE de JetBrains. Puedes descargar PyCharm Community Edition gratis, que tiene un soporte de desarrollo de HTML, CSS y JavaScript realmente bueno, junto con todas las ventajas que ofrece un buen IDE: integración de código fuente, refactorización de código, sangría automática, resaltado de sintaxis, comparación herramienta, etc.

Un entorno de desarrollo integrado ( IDE ) es una aplicación de software que proporciona instalaciones integrales a los programadores informáticos para el desarrollo de software . Un IDE normalmente consta de un editor de código fuente , herramientas de automatización de compilación y un depurador . La mayoría de los IDEs modernos tienen código inteligente completado.

¿HTML es un lenguaje de programación?

HTML es genial. Define la estructura de las páginas web y determina cómo se muestran los datos en línea. Lo que estás viendo ahora mismo es código HTML, leído e interpretado por tu navegador. Pero esto no hace de HTML un lenguaje de programación.

HTML es un tipo de lenguaje de marcado o etiquetas. Encapsula o “marca” datos dentro de etiquetas HTML, que definen los datos y describen su propósito en la página web. El navegador lee e interpreta el HTML, que le dice cosas como qué partes son encabezados, qué partes son párrafos, qué partes son enlaces, etc. El HTML describe los datos al navegador web y éste los muestra en la pantalla del usuario.

Aquí hay una lista de editores de HTML, CSS y JavaScript que puede elegir:

• JetBrains PyCharm Community Edition (gratis) -( https://www.jetbrains.com/pycharm/download/):

PyCharm es un entorno de desarrollo integrado (IDE) utilizado en la programación de computadoras , específicamente para el lenguaje Python . Es desarrollado por la compañía checa JetBrains . Proporciona análisis de código, un depurador gráfico, un probador de unidades integrado, integración con sistemas de control de versiones (VCS) y admite el desarrollo web con Django .

PyCharm es multiplataforma, con versiones de Windows, macOS y Linux. La Edición de la Comunidad se publica bajo la Licencia de Apache , y también hay una Edición Profesional lanzada bajo una licencia propietaria , esto tiene características adicionales.

• JetBrains WebStorm (Comercial) – https://www.jetbrains.com/webstorm/
• Atom (Gratis) – https://atom.io/

Atom es un editor de código; este mismo es de fuente de código abierto para macOS, Linux, y Windows.Con soporte para plug-ins escritos en Node.js y control de versiones Git integrado, desarrollado por GitHub.

• Sublime Text (Comercial) – https://www.sublimetext.com/

Sublime Text está creado a partir de componentes personalizados, proporcionando una capacidad de respuesta inigualable. Desde un potente kit de herramientas de interfaz de usuario multiplataforma personalizado hasta un motor de sintaxis de resaltado inigualable, Sublime Text establece la barra para el rendimiento. Este IDE es otro de mis favoritos.

• Brackets – http://brackets.io/

Brackets es un editor de código abierto escrito en HTML, CSS y JavaScript con un enfoque principal en el desarrollo web. Fue creado por Adobe Systems, con licencia bajo la licencia MIT, y actualmente se mantiene en GitHub. Brackets está disponible para la descarga multiplataforma en Mac, Windows y Linux.

• Notepad ++ (solo para Windows) – https://notepad-plus-plus.org/download/v7.html

Notepad++ es un editor de texto y de código fuente libre con soporte para varios lenguajes de programación. De soporte nativo a Microsoft Windows.

Se parece al Bloc de notas en cuanto al hecho de que puede editar texto sin formato y de forma simple. No obstante, incluye opciones más avanzadas que pueden ser útiles para usuarios avanzados como desarrolladores y programadores.

Puedes elegir el que mejor se adapte a tus necesidades. Si no cuentas con un IDE no te preocupes, para empezar puedes hacer un documento de texto que tenga extensión .htm o .html, por ejemplo “Mi_primer_proyecto_en_HTML.html”, o “index.html”; y simplemente debes editar el código HTML dentro de este documento de texto que quieras escribir, luego presionas “Archivo” -> “Guardar como” y elegirás la carpeta donde guardarás tu proyecto, pero en “Tipo:” debes elegir la opción “Como todos los archivos” y simplemente guardas este documento de texto. Y para visualizarlo lo ejecutas con tu navegador web de preferencia. Sin embargo, esta opción; si bien es para salir de apuros, no resaltará la sintaxis del código que escribes, como bien lo hacen los IDE como Sublime Text por ejemplo, así que te recomiendo que preferiblemente cuentes con un IDE a la mano para así facilitarte la vida cuando estés desarrollando tu código HTML, ya que realmente notarás la diferencia entre uno y otro.

En Linux, o en software libre; puedes hacer esto mismo también para empezar; normalmente, en estos casos el editor de texto se llama Gedit, e igualmente te resalta la sintaxis de tu código con colores llamativos, pero no te ayudará en la autocompletación del texto o en otros aspectos que te ofrecen los IDE. Solo debes crear el archivo de texto y colocarle la extensión .html

Introducción

El HyperText Markup Language (o mejor conocido como HTML, por sus siglas en inglés), es un estándar desarrollado a lo largo de los años para transmitir información a través de Internet mediante el uso de “hipervínculos”, o simplemente enlaces tal como los conocemos hoy en día. A diferencia de un PDF, una página en HTML tiene una naturaleza mucho más dinámica, lo que le permite navegar por la web haciendo clic en los enlaces e interactuando con la página. Los enlaces pueden llevarlo a una ubicación diferente dentro de la página actual o a una página diferente a través de Internet.

La última versión de HTML es HTML 5.0, que tiene muchas más capacidades de las que la web tenía como meta originalmente. HTML 5 es una plataforma extremadamente completa que permite crear una interfaz de usuario de alta gama. Esto se hace trabajando junto con el poder de CSS y JavaScript. HTML 5 es tan poderoso que ha logrado desplazar de cierta forma a Adobe Flash, Silverlight de Microsoft y casi todos los complementos HTML; como reproductores de video, applets de Java, entre otros recursos que ya actialmente se consideran “anticuados”.

Entonces, recapitulando, ¿Cuál es la diferencia entre HTML, CSS y JavaScript? En primer lugar, todos se pueden encapsular dentro de una página HTML, lo que significa que el navegador comienza cargando en la página el código HTML, y solo entonces sabe qué cargar desde allí.

• Una página HTML es un documento escrito en lenguaje HTML que define el contenido de la página utilizando un marcado especial, o etiquetas especiales, muy similar a XML.
• Una hoja de estilo CSS define el estilo de los elementos HTML en la página. Se embebe dentro de una página HTML o se carga con la etiqueta.
• JavaScript es el lenguaje de programación utilizado para interactuar con la página HTML a través de una API llamada el DOM (Document Object Model). En otras palabras, los enlaces DOM son el pegamento entre el lenguaje de programación y la página HTML que se cargó inicialmente en el navegador.

Los conceptos básicos de este tutorial cubren tanto desde HTML hasta CSS. Sin embargo, las secciones avanzadas también asumen conocimientos básicos en programación, y en JavaScript.

En este curso también usaremos un framework de CSS llamado Bootstrap por Twitter, la biblioteca o librería CSS más común que existe hoy en día. Los principios básicos de una biblioteca CSS son prácticamente los mismos: todos se basan en el “sistema de cuadrilla”, que es una manera fácil de definir el diseño de una página HTML, una metodología que se desarrolló a lo largo de los años para facilitar el desarrollo web.

Realizando tu primera página en HTML

Vamos a comenzar por ayudarte a crear una página escrita en HTML simple. Una página HTML tiene la siguiente sintaxis básica en su diseño:

<!DOCTYPE>
<lang="es">
<html>
 <head>
 <title>Aquí va el título de la página</title>
 <!-- Aquí va la información del head de tu página web, tales como enlaces, escripts, o los meta -->
 </head>
 <body>
 <!-- Aquí va el contenido de tu página web -->
 </body>
</html>

 

Vamos a comenzar creando una página con un contenido simple que contenga la frase “¡Hola, Mundo!” en el cuerpo o sección <body> de la página web y que lo muestre en tu navegador. La página también tendrá un título: Me refiero al texto que aparece en el título de la pestaña en tu navegador web. El elemento o etiqueta que define el título de la página HTML es la etiqueta:<title>

El elemento o etiqueta que define un “párrafo” dentro de tu página web, o un bloque de texto que tiene una pequeña cantidad de espacio entre su parte superior e inferior es la etiqueta <p>

Observa cómo las etiquetas tienen una etiqueta de inicio y una etiqueta de finalización denotada con una barra inclinada (/), por ejemplo la etiqueta body tiene su apertura <body> y su cierre </body>.Y todo lo que quede en el medio es el contenido que posee la etiqueta que estemos trabajando. El contenido de una etiqueta generalmente puede tener etiquetas HTML adicionales dentro de ellos, sin embargo debes estar pendiente a la hora de abrir y cerrar etiquetas, ya que si dejas alguna etiqueta abierta esto puede interpretarse como un error en tu página HTML.</p>

 

<!DOCTYPE>
<lang="es">
<html>
 <head>
 <title>Título de ejemplo</title>
 <!-- Aquí va la información del head de tu página web, tales como enlaces, escripts, o los meta -->
 </head>
 <body>
 <!-- Aquí va el contenido de la página -->
 </body>
</html>

 

 

También puedes copiar y pegar este código en un archivo nuevo en tu editor de texto o IDE, y guardar el archivo como “index.html”. El archivo “index.html” es el archivo predeterminado que buscará un servidor web al acceder a un sitio web. Después de guardar el archivo, puedes hacer doble clic para abrirlo con tu navegador predeterminado.

Ahora que conocemos la estructura básica de una página HTML, probemos.

Ejercicio

• Colócale en el título de tu página web “¡Hola Mundo!”, recuerda que este va dentro de la etiqueta <title></title>
• Agregale un párrafo a tu página web dentro del cuerpo, o etiqueta <body></body> que contenga el texto “¡Hola, mundo!”, recuerda que cada párrafo va dentro de una etiqueta <p></p>

Solución al ejercicio propuesto

<!DOCTYPE>
<lang="es">
<html>
 <head>
 <title>¡Hola Mundo!</title>
 <!-- Aquí va la información del head de tu página web, tales como enlaces, escripts, o los meta -->
 </head>
 <body>
 

¡Hola Mundo!

 </body>
</html>

 

Salida en pantalla:

¡Hola Mundo!

Nota: Si tu página web en HTML no te acepta los caracteres especiales como la “ñ”, por ejemplo, o los caracteres acentuados, ingresa el siguiente meta dentro del la etiqueta <head> de tu página web: <meta charset=”utf-8″> Debería quedarte de la siguiente manera:

 

<!DOCTYPE>
<lang="es">
<html>
 <head>
 <title>Ejemplo con caracteres especiales</title>
 <meta charset="utf-8">
 </head>
 <body>
 

Caracteres especiales: á, é, í, ó, ú, ü, ï, ö, ä, ë, ñ

 </body>
</html>

El resultado que se te mostrará en pantalla será el siguiente:

Caracteres especiales: á, é, í, ó, ú, ü, ï, ö, ä, ë, ñ

 

¡Felicidades! Has terminado la primera parte de este curso, ya creaste tu primer proyecto usando HTML, te dije que sería muy fácil; ahora continúa con el siguiente capítulo de este curso.