1-Curso HTML Y CSS para principiantes

Curso html y css, para principiantes en el mundo de la informatica, quedate seguro que te interesa.

30
20
Compartir

Comenzamos, con lo más basico que podemos ver, a continuación:

<html>

<!-- COMENTARIO-->

<head>

<meta charset="utf-8">

<title>Título</title>

</head>

 

<body>

<p>Hola</p>

<p>It is a long established fact that a reader will <br>

be distracted by the <b>readable</b> content <strong>of a page</strong> when <u>looking</u> at <i>its layout</i>. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years.</p>

 

<div>Nueva capa</div>

 

<h1>Encabezado 1</h1>

<h2>Encabezado 2</h2>

<h3>Encabezado 3</h3>

<h4>Encabezado 4</h4>

</body>

</html>

En este apartado aprenderemos el estilo que podemos añadir al html. De diferentes formas, siempre dentro del html, tambien aprenderemos en otro archivo css mas adelante.

<html>

<!-- COMENTARIO-->

<head>

<meta charset="utf-8">

<title>Título</title>

</head>

 

<body>

 

<!--Ejemplo de estilo simple en etiqueta p (párrafo) -->

<p style="font-size:40px;">Hola</p>

 

<!--Ejemplo de estilo anidado en un div con span -->

<div style="font-weight: 600;">

Hola

<span style="font-size: 50px;">que</span>

tal

</div>


 

<!--Ejemplo de estilo anidado con divs (div ha saltar línea) -->

 

<div style="color:blue;">

Línea 1

<div style="font-weight: 600;">Línea 2</div>

Línea 3

</div>

 

<br><br>

 

<!-- Si coincide la propiedad del estilo se obtiene el más cercano -->

 

<div style="color:blue;">

Línea 1

<div style="color:red;">Línea 2</div>

Línea 3

</div>

 

<!-- Puede crearse un orden de etiquetas más complejo, los estilos se van sumando -->

 

<div style="font-weight: 600;">

Línea 1

<div style="color:red;">Línea 2 , esta es <span style="font-size:40px;">más larga </span></div>

Línea 3

</div>

 

</body>

</html>

 

Aquí podemos ver como modificar una misma frase, con distintos estilos, en principio copiara el estilo general que le pongas, y luego dentro de el, podeos cambiar en una misma frase solo una palabra, así:

<html>

<!-- COMENTARIO-->

<head>

<meta charset="utf-8">

<title>Título</title>

</head>

 

<body>

 

<!--Lo que hemos visto es colocar modificador style en la etiqueta (estilo en línea) -->

<p style="font-size:40px;">Hola</p>

 

<!-- El estilo se puede colocar con la etiqueta style, identificando la eitueda de 3 formas:

1- por nombre de etiqueta

2- por clase

3- por identificador.

-->

 

<!-- 1 Si indicamos nombre de la etiqueta afecta a todos los elementos con esa etiqueta-->

 

<div>Hola como estas?</div>

<div>Otro div</div>

 

<style>

div{ font-size: 80px; }

</style>

 

<!-- 2 Podemos crear una clase para unas determinadas etiquetas (en estilo con punto .)-->

 

<div>Hola como estas?</div>

<div class="maspeque">Otro div</div>

<div class="maspeque">Otro div 2</div>

 

<style>

.maspeque{ font-size: 20px; }

</style>


 

<!-- 3 Con id para la capa se nombra con # -->

 

<div>Hola como estas?</div>

<div class="maspeque">Otro div</div>

<div class="maspeque" id="capa3">Otro div 2</div>

<style>

#capa3{ font-size: 120px; color:blue; }

</style>

 

</body>

</html>

 

<html>

<!-- El ejemplo anterior pero con una estructura más correcta -->

<head>

<meta charset="utf-8">

<title>Título</title>

 

<!-- La etiqueta style se suele colocar en el head, ya que es definición -->

<!-- Todas las definiciones se pueden colocar en la misma etiqueta -->

<style>

div{ font-size: 80px; }

.maspeque{ font-size: 20px; }

#capa3{ font-size: 120px; color:blue; }

</style>

</head>

 

<body>


 

<p style="font-size:40px;">Hola</p>


 

<div>Hola como estas?</div>

<div>Otro div</div>


 

<div>Hola como estas?</div>

<div class="maspeque">Otro div</div>

<div class="maspeque">Otro div 2</div>


 

<div>Hola como estas?</div>

<div class="maspeque">Otro div</div>

<div class="maspeque" id="capa3">Otro div 2</div>

 

</body>

</html>

 

<html>

<!-- El ejemplo anterior pero con una estructura más correcta -->

<head>

<meta charset="utf-8">

<title>Título</title>

 

<!-- El estilo se suele guardar en un archivo css (estilo.css) y en el head se vincular el archivo

mediante la etiqueta link, con las opciones de href (archivo) rel (stylesheet) y tipo text/css -->

<link href="estilo.css" rel="stylesheet" type="text/css">

</head>

 

<body>


 

<p style="font-size:40px;">Hola</p>


 

<div>Hola como estas?</div>

<div>Otro div</div>



 

<div>Hola como estas?</div>

<div class="maspeque">Otro div</div>

<div class="maspeque">Otro div 2</div>


 

<div>Hola como estas?</div>

<div class="maspeque">Otro div</div>

<div class="maspeque" id="capa3">Otro div 2</div>

 

</body>

</html>

HOJA DE ESTILO CSS:

div{ font-size: 80px; }

.maspeque{ font-size: 20px; }

#capa3{ font-size: 120px; color:blue; }

Valora este artículo
0 5 1
El plan estrella de la temporada: Picnic al aire libre
tick image