fbpx
Volver a Curso

Curso profesional de HTML y CSS.

0% Completado
0/0 Steps
  1. Antes de empezar el curso.

    Grupos y foros.
  2. Módulo 1 - Desarrollo web
    1.1 Sitios Web
    4 Temas
    |
    1 Cuestionario
  3. 1.2 Lenguajes
    4 Temas
    |
    1 Cuestionario
  4. 1.3 Herramientas
    3 Temas
  5. Módulo 2 - HTML
    2.1 Estructura
    5 Temas
    |
    1 Cuestionario
  6. 2.2 Contenido
    6 Temas
    |
    1 Cuestionario
  7. Descargar material 1
  8. Módulo 3 - CSS
    3.1 Estilos
    2 Temas
  9. 3.2 Referencias
    2 Temas
  10. 3.3 Propiedades
    12 Temas
    |
    1 Cuestionario
  11. 4.1 Cajas
    1 Tema
    |
    1 Cuestionario
  12. Módulo 4 - Diseño web
    4.2 Modelo de caja tradicional
    4 Temas
    |
    1 Cuestionario
  13. 4.3 Modelo de caja flexible
    2 Temas
    |
    1 Cuestionario
  14. 5.1 Web móvil
  15. Despedida del curso
  16. Descargar material 2
  17. Descargar material 3
  18. Módulo 5 - Diseño web adaptable
    Proyecto 1 - Netflix
    13 Temas
  19. Final del curso
    Proyecto 2 - Azul Web
    6 Temas
  20. Proyecto final
    2 Temas
  21. Encuesta
Lección Progreso
0% Completado

Aunque cada elemento tiene en su nombre el fin para el que se va a utilizar  muchas veces nos encontramos con la necesidad de utilizar más de una vez el mismo tipo de elemento, y esto es mucho más visible con el elemento <div> que puede ser utilizado muchas veces en en la misma página. En HTML tenemos algunos atributos que podemos utilizar para crear identificadores personalizados:

id – Este atributo nos permite asignar un identificador único a un elemento.

class – Este atributo asigna el mismo identificador a un grupo de elementos.

Archivo index.html usado en el video.

<!DOCTYPE html>
<html lang="es">
	<head>
		<title>Mi primera pagina web.</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="CSS/style.css">
		<script type="text/javascript" src="JS/script.js"></script>
	</head>
	<body>	
		<header>
			Cursos y talleres.
		</header>
		<nav>
			Me 1 - Me 2 - Me 3 - Me 4
		</nav>
		<main>
			<section id="cursos" class="contenedor">
				<div class="programacion">
					Curso 1 de programación.
				</div>
				<div class="programacion">
					Curso 2 de programación.
				</div>
				<div class="programacion">
					Curso 1 de programación.
				</div>
				<div class="baseDeDatos">
					Curso 1 de BD.
				</div>
				<div class="baseDeDatos">
					Curso 2 de BD.
				</div>
			</section>
			<section id="talleres" class="contenedor">
				<div class="web">
					Taller 1 de web.
				</div>
				<div class="web">
					Taller 2 de web.
				</div>
			</section>
		</main>
	</body>
</html>

Archivo style.css usado en el video.

.programacion{
	color: red;
}

.baseDeDatos{
	color: blue;
}

.contenedor{
	background: #E8E4E4;
	text-align: center;
}