HTML : Conceptos Básicos.

 Hola Bloggerosssssssssss! Hemos vuelto chicos! Y con más ganas que nunca! Pero, se acabó. Esto es lo último que probablemente vamos a publicar. No lloros por favor! Es parte del ciclo de la vida. 😧😮


Bueno, vamos a empezar con HTML! Comencemos por lo básico : 


  •  <head>... </head> = poner aquí los apartados de <style>. Y nombrar a la página web. Entonces, dentro de esta se coloca : 

- <style>...</style> = utilizado para cambiar por ejemplo, colores de las letras o del fondo. Dentro de esto pueden haber muchos tipos : 

  1. h2 {} = para todos los encabezados que sean h2 u otros, puedes poner :
- color : rgb(n,n,n); = para cambiar el color de la letra a tu antojo, sino puedes poner simplemente el color que quieres. (color : green;) 
- background-color: rgb(n,n,n); = igual pero en este caso cambiamos el fondo de la página. Para cambiar el color de la página entera : 

body{
      background-color: rgb(n,n,n);
}

     2. #nombre {} =  cambiar el color o el fondo de una cosa en especifico. Para esta, es necesario el uso del id :

Llamamos a, por ejemplo un título de esta forma : <h1 id="nombre"> y a continuación, escribimos en el apartado de <style> : #nombre{ y dentro ponemos si queremos que cambie el color o el fondo de ese texto en específico. Ejemplo :

        <head>
        <style>
        #rabbits-info-heading {
            background-color: purple;
        }
        </style>
    </head>
    <body>
    
    <h2 id="rabbits-info-heading">Basic info</h2>

    </body>

   3.   .nombre{} = similiar al id, el ejercicio te dira si hacerlo con identificador o con class. Para este, utilizamos el <h2 class="nombre"> Ejemplo : 

<head>
<style>

 .song-lyrics {
            background-color: yellow;
        }
        
        </style>
    </head>
    <body>
    
    <p class="song-lyrics">Little Bunny Foo Foo, <br>
I don't want to see you <br>
scooping up the field mice <br>
and bopping them on the head!
     </p>
    
    <p class="song-lyrics">And down came the Good Fairy <br>
And she said <br>
"Little bunny Foo Foo <br>
I don't like you're attitude <br>
Scooping up the field mice <br>
And bopping 'em on the head" <br>
    </p>
</body>


  • <body>...</body> = poner aquí los títulos (h1,h2...), parrafos (p,br...) Se ponen los siguientes elementos :

- <h1>...</h1> = Sirve para poner titulos, cada vez que vamos aumentando de número, el título se va haciendo más pequeño (h1 = título, h2 = subtitulo...) 

- <p>...</p> = Sirve para poner texto. 

- <br> = Sirve para separar las distintas lineas del párrafo. 

- <strong>...</strong> = para poner una parte del texto en negrita. 

- <em>...</em> = para poner una parte del texto en cursiva. 

- <ul>...</ul> = para poner una lista SIN numeración. Para poner los puntos en la lista, usamos <li>...</li>

- <ol>...</ol> = para poner una lista CON numeración. Para ir enumerando la lista, usamos también el <li>...</li>

- <img src="" alt="" width=""> = para poner una imagen, dentro de esta se encuentra también el termino alt, que sirve para por si acaso falla el programa al cargar la imagen, podamos tener una idea de lo que contenía esa imagen gracias al alt (osea que no es necesario) y el width es usado para cambiar el tamaño de la imagen. 











Comentarios

Publicar un comentario