Introducción
🧑💻 ¿Eres nuevo en Linux o en LabEx? Te recomendamos comenzar con el curso Quick Start with Linux.
Hola, bienvenido a LabEx. En este primer laboratorio, aprenderás el clásico programa "Hello, World!" en CSS.
Haz clic en el botón Continuar a continuación para comenzar el laboratorio.
Hola CSS
Ya hemos creado el archivo index.html en el WebIDE. Abrámoslo y agreguemos algo de código HTML.
<!doctype html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello HTML</h1>
</body>
</html>
Luego, haz clic en el botón Go Live en la esquina inferior derecha. Esto iniciará un servidor web local en el puerto 8080.
Ahora, puedes cambiar a la pestaña Web 8080 y hacer clic en el botón de actualizar para ver los cambios.
Agregar CSS
Agreguemos algo de código CSS al archivo index.html.
<!doctype html>
<html>
<head>
<title>My First Web Page</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello HTML</h1>
</body>
</html>
Cambia a la pestaña Web 8080 y haz clic en el botón de actualizar para ver los cambios.
Usar CSS externo
Ya hemos creado el archivo style.css en el WebIDE. Abrámoslo y agreguemos algo de código CSS.
h1 {
color: red;
}
p {
color: blue;
}
Luego, cambia el archivo index.html para que use el archivo CSS externo.
<!doctype html>
<html>
<head>
<title>My First Web Page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
Cambia a la pestaña Web 8080 y haz clic en el botón de actualizar para ver los cambios.
Resumen
¡Felicidades! Has completado tu primer laboratorio en LabEx.
Si quieres aprender más sobre LabEx y cómo usarlo, puedes visitar nuestro Centro de Soporte. O puedes ver el vídeo para conocer más sobre LabEx.
La programación es un largo camino, pero el Siguiente Laboratorio está a solo un clic de distancia. ¡Empecemos!
