¡Hola Mundo! en HTML - ▷ Cursos de Programación de 0 a Experto © Garantizados (2023)

¡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:

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.

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 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 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++ 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: á, é, í, ó, ú, ü, ï, ö, ä, ë, ñ

¡Hola Mundo! en HTML - ▷ Cursos de Programación de 0 a Experto © Garantizados (1)¡Felicidades! Acabas de crear tu primer proyecto usando HTML. Continua aprendiendo HTML y CSS con nuestro curso gratis:

Curso gratis: Aprender HTML y CSS

FAQs

¿Qué tan difícil es programar en HTML? ›

Aprender HTML puede parecer una tarea difícil. Tienes que entender los fundamentos de lo que quieres conseguir y encontrar el programa adecuado que satisfaga tus necesidades. A menudo, puede parecer que estás aprendiendo un lenguaje completamente nuevo.

¿Qué es más difícil HTML o CSS? ›

Un sitio web suele estar desarrollado con multitud de lenguajes de programación web como pueden ser HTML, CSS, Javascript, ASP o PHP, entre otros. De entre todos estos lenguajes estaremos de acuerdo en que CSS es el lenguaje más sencillo.

¿Qué es el lenguaje HTML y ejemplos? ›

El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos.

¿Cómo crear tu primer código HTML? ›

Para hacer tu primera página web en HTML, escogimos el editor Atom. Pero puedes usar el que tengas instalado en tu computadora. Abre tu editor de texto y crea un nuevo documento, en el cual empezaremos a trabajar.

¿Cuánto tiempo se tarda en aprender HTML? ›

Podrías tardar 2 años o 6 meses, a dedicación completa.

¿Cuál es el lenguaje de programación más utilizado en el mundo? ›

Python. Python es uno de los lenguajes de programación más usados actualmente y su uso sigue creciendo. Posee unas características muy potentes: es de código abierto, tiene una sintaxis sencilla y es fácil de entender, por lo que ahorra tiempo y recursos.

¿Cómo se escribe el código HTML? ›

Para escribir texto dentro de un documento HTML simplemente tenemos que añadir texto al fichero que contenga nuestra página web. Así de simple. Solo añadimos el texto que queramos visualizar. Si bien deberemos de tener en cuenta algunos condicionantes.

¿Qué es más difícil HTML o JavaScript? ›

Se puede decir que JavaScript es más difícil de aprender que tecnologías relacionadas como HTML y CSS. Antes de intentar aprender JavaScript, se recomienda encarecidamente que te familiarices con al menos estas dos tecnologías primero, y quizás también con otras.

¿Cuál es el lenguaje de programación más difícil de aprender? ›

C++, un lenguaje difícil de aprender por su potencia

Aunque está basado en C, uno de los lenguajes que casi cualquier programador y, especialmente, aquellos que hacen programación de sistemas, conocen, es C++, uno de los lenguajes más demandados, tiene algunas particularidades que lo hacen complejo.

¿Qué es lo más difícil de aprender CSS? ›

Lo siguiente son los aspectos que considero más difíciles una vez aprendidos los fundamentos: Modelo de cajas: entender como funciona el display de cada elemento es fundamental. Esto te ayudará a entender porque algunos elementos se quedan en la misma linea y otros pasan a la siguiente, entre otras cosas.

¿Cómo hacer un Hola Mundo en javascript? ›

Se ha introducido el código JavaScript en el fichero html a través de la etiqueta <SCRIPT>. Lo que hace es que abre una ventana con el mensaje "Hola mundo". Siempre que, desde Javascript, queramos sacar un mensaje introduciremos la sentencia alert y poniendo entre paréntesis y comillas el mensaje que queremos mostrar.

¿Cómo hacer un Hola Mundo en bloc de notas? ›

Primero inicie su editor. Puede acceder al editor Bloc de notas desde el menú Inicio seleccionando Programas > Accesorios > Bloc de notas. Escriba el siguiente código en un documento nuevo: /** * La clase HelloWorldApp implementa una clase que * simplemente imprime "Hola mundo" a la salida estándar.

¿Cómo hacer un Hola Mundo en PHP? ›

php echo '<p>Hola Mundo</p>'; ?> Este programa es extremadamente simple y realmente no es necesario utilizar PHP para crear una página como esta. Lo único que muestra es: Hola mundo empleando la sentencia echo de PHP. Observe que el fichero no necesita ser ejecutable o especial de ninguna forma.

¿Cómo centrar el texto en HTML? ›

¿Cual es la etiqueta HTML para centrar el texto? Efectivamente existe una etiqueta que nos sirve para centrar el contenido que se encierre en su interior. El inconveniente de esta etiqueta es que está obsoleta, se puede usar pero lo correcto es usar la propiedad css “text-align: center;”​.

Top Articles
Latest Posts
Article information

Author: Patricia Veum II

Last Updated: 02/25/2023

Views: 5803

Rating: 4.3 / 5 (64 voted)

Reviews: 95% of readers found this page helpful

Author information

Name: Patricia Veum II

Birthday: 1994-12-16

Address: 2064 Little Summit, Goldieton, MS 97651-0862

Phone: +6873952696715

Job: Principal Officer

Hobby: Rafting, Cabaret, Candle making, Jigsaw puzzles, Inline skating, Magic, Graffiti

Introduction: My name is Patricia Veum II, I am a vast, combative, smiling, famous, inexpensive, zealous, sparkling person who loves writing and wants to share my knowledge and understanding with you.