Como crear un "Hola Mundo" con HTML y CSS
¿Te gustaría crear contenido web que puedas ver con tu navegador favorito?
En esta publicación te explico lo esencial que necesitas saber para crear un "Hola Mundo" con los lenguajes HTML y CSS.
Empecemos por definir algunos conceptos importantes:
Es el nombre que se le da al primer programa que se crea cuando se esta aprendiendo un lenguaje de programación. Este programa mostrará el texto "Hola Mundo" en pantalla.
Dicho esto comencemos a crear nuestra página:
Al presionar "enter" ya podrás ver en pantalla tu "Hola Mundo". 😄
Si quieres aprender HTML y CSS te recomiendo abrir una cuenta en Sololearn y comenzar a hacer los cursos. Otra muy buena opción son los cursos de w3schools.
Aquí te dejo los link de ambas páginas:
https://www.sololearn.com/
https://www.w3schools.com/
Espero te haya sido útil el contenido de esta página. De ser así no olvides seguirme para estar al día con mis publicaciones o déjame tus comentarios.
En esta publicación te explico lo esencial que necesitas saber para crear un "Hola Mundo" con los lenguajes HTML y CSS.
Empecemos por definir algunos conceptos importantes:
Hola Mundo
Es el nombre que se le da al primer programa que se crea cuando se esta aprendiendo un lenguaje de programación. Este programa mostrará el texto "Hola Mundo" en pantalla.
HTML
Es el lenguaje que se utiliza para crear la parte visible en pantalla de los elementos que conforman una página web.
Es un lenguaje de diseño gráfico que combinado con el HTML permite definir y crear la presentación de la página web.CSS
Donde escribir el código
Para escribir el código puedes usar cualquier programa editor de texto como por ejemplo "bloc de notas" o "Gedit"; incluso puedes usar "Word". Lo ideal es escribirlo en un programa editor de código como "Visual Studio Code" o "Sublime Text" porque estos cuentan con ayudas visuales que te permiten diferenciar los elementos del código.Dicho esto comencemos a crear nuestra página:
Paso 1: Crear carpeta y archivos
- Crea una carpeta con el nombre "Hola Mundo" .
- Ingresa al programa donde escribirás el código y crea dos archivos dentro de la carpeta "Hola Mundo" . A un archivo le colocas el nombre " holamundo.html " y al otro " holamundo.css ".
Paso 2: Escribir el HTML
En el archivo " holamundo.html " escribe y guarda las siguientes lineas de código:
<!DOCTYPE html>
<html>
<head>
<title>Hola Mundo</title>
<link rel="stylesheet" type="text/css" href="holamundo.css">
</head>
<body>
<h1>"Hola Mundo"</h1>
</body>
</html>
Paso 3: Dar estilo con CSS
En el archivo " holamundo.css " escribe y guarda las siguientes lineas de código:
body{
background-color: #f06060;
color:white;
padding:20% 5% 20% 5%;
}
h1{
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
font-size: 1000%;
}
Paso 4: Ingresar a la página
Para ver el resultado de tu código en el navegador (Chrome, FireFox, etc) coloca en el buscador la ruta completa en donde esta guardado tu archivo " holamundo.html " . Por ejemplo en mi caso la ruta seria : /home/rosa/Codigos/HolaMundo/holamundo.html
Al presionar "enter" ya podrás ver en pantalla tu "Hola Mundo". 😄
Si quieres aprender HTML y CSS te recomiendo abrir una cuenta en Sololearn y comenzar a hacer los cursos. Otra muy buena opción son los cursos de w3schools.
Aquí te dejo los link de ambas páginas:
https://www.sololearn.com/
https://www.w3schools.com/
Espero te haya sido útil el contenido de esta página. De ser así no olvides seguirme para estar al día con mis publicaciones o déjame tus comentarios.
Comentarios
Publicar un comentario