¡Aprendizaje! Html y Css desde cero
Aprenderemos Html y Css desde cero ¿Te apuntas?

¿Qué significa las siglas HTML?

HTML es un lenguaje que se utiliza para el desarrollo de páginas de Internet. Se trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formato de Documentos para Hipertexto.

HTML No es un lenguaje de programación, es un lenguaje de etiquetas, que se ejecuta secuencialmente.

-Vamos a necesitar un programa para escribir códigos HTML.

-Descargaremos este programa. https://code.visualstudio.com/download

-El programa en principio viene en idioma Ingles, para poder cambiarlo a español, se pulsa Control + Mayúsculas + P y escribes en el buscador configure display language y después seleccionar instar additional languages. Luego seleccionamos el lenguaje que queramos en este caso Spanish se instala se reinicia el programa y vuele al idioma que hemos seleccionado.

-Creamos una carpeta con nombre curso. Abrimos la carpeta en visual code del curso y creamos una carpeta desde visual code que se llame clase1. La carpeta se crea en el segundo botón dándole a + carpeta.

En la carpeta clase 1 creamos un nuevo archivo, que es el primer botón + carpeta.

Al archivo le llamamos de la siguiente forma: clase1_1.html

-En clase1_1.html ponemos Hola por ejemplo, guardamos y nos vamos a la carpeta guardada que nos lleva al navegador de Google, abrimos el archivo de la carpeta, y lleva al navegador. Se muestra lo que pusimos el texto hola.

Duplicamos el archivo y le ponemos el nombre de clase1_2.html

-En el 2 vamos a crear la estructura de un HTML normal.

El HTML es un lenguaje de etiquetas. Las etiquetas son de esta forma 

 <etiqueta>CONTENIDO</etiqueta>

Las estructura de un HTML es de esta forma.

 

<html>

    <head>

   

    </head>

    <body>

 

    </body>

</html>

 

Hay una etiqueta superior HTML y dentro de ella dos etiquetas head y body. La etiqueta head no se muestra inicialmente, sirve para definiciones  y cargas de archivos. Y body es lo que va mostrar la pagina.

Vamos hacer un nuevo archivo y vamos a crear un comentario. Los comentarios no se visualizan en la pagina. Y nos servirán para seguir con el curso.
<!-- Esto es un comentario -->

<html>

    <head>

   

    </head>

    <body>

 

    </body>

</html>

 

A partír de ahora las explicaciones la hacemos como comentarios.

 

Control + S es guardar.

br no se duplica porque es un salto de linea. No como por ejemplo p que si se duplica automáticamente. 

Si no hya (p) ni (br) seguiría escrito en la misma linea.
 

 

clase1_5.html

<!-- Dentro del body podemos crear otras etiquetas  -->


 

<html>

    <head>

        <title>Título</title>

    </head>

    <body>

        <p>Esto es un párrafo</p>

        <p>Esto es otro párrafo</p>

        <p>Esto es una línea<br>y esto es otra</p>

        <!-- Vemos distintos tipos de visualización de textos  -->


 

        <b>Negrita antigua</b>

        <strong>Negrita actual</strong>

        <i>Cursiva</i>

        <u>Subrayado</u>


 

    </body>

</html>



 

clase1_6.html

Creamos encabezados, que usan para titulos.

 

<!-- Encabezados - Títulos -->


 

<html>

    <head>

        <title>Título</title>

    </head>

    <body>

        <h1>Encabezado 1</h1>

        <h2>Encabezado 2</h2>

        <h3>Encabezado 3</h3>

        <h4>Encabezado 4</h4>

        <h5>Encabezado 5</h5>

        <h6>Encabezado 6</h6>


 

    </body>

</html>


 

clase1_7.html

 

<!-- Las páginas web se maquetan con la etiqueta div (capa)  -->


 

<html>

    <head>

        <title>Título</title>

    </head>

    <body>

        <div>

            Esta es una capa

        </div>

        <div>

            Esta es otra capa

        </div>

    </body>

</html>


 

clase1_8.html

<!--Incluimos estilo CSS por primera vez-->


 

<html>

    <head>

        <title>Título</title>

    </head>

    <body>

        <div style="display: inline-block ;">

            Esta es una capa

        </div>

        <div style="display: inline-block ;">

            Esta es otra capa

        </div>

    </body>

</html>


 

clase1_9.html

<!-- Incluimos más estilos como por ejemplo, cambio de letras, color, tamaño -->


 

<html>

    <head>

        <title>Título</title>

    </head>

    <body>

        <div style= "color:brown; border:1px solid #0000FF">

            Esta es una capa

        </div>

        <div style="font-size:20px; text-decoration: line-through;">

            Esta es otra capa

        </div>

    </body>

</html>

<!-- Las posibilidades de estilos son infinitas -->


 


 

clase1_10.html

<!-- Incluimos más estilos -->


 

<html>

    <head>

        <title>Título</title>

    </head>

    <body>

        <div style= "color:brown; border:1px solid #0000FF">

            Esta es una capa

            <div style= "font-size: 40px;">Esta es la capa hijo</div>

        </div>

        <div style="font-size:20px; text-decoration: line-through;">

            Esta es otra capa

        </div>

    </body>

</html>

<!-- Las capas heredan los estilos del padres -->

clase1_11.html

<!-- Los estilos se pueden incluir en el head, creando identificador de estilos -->


 

<html>

    <head>

        <title>Título</title>

        <style>

            .estilo1{color:brown; border:1px solid #0000FF;}

            .estilo2{font-size:20px; text-decoration: line-through;}

            .estilo11 {font-size: 40px;}

        </style>

    </head>

    <body>

        <div class="estilo1" >

            Esta es una capa

            <div class= "estilo11" >Esta es la capa hijo</div>

        </div>

        <div class= "estilo2" >

            Esta es otra capa

        </div>

    </body>

</html>

<!-- Las capas heredan los estilos del padres -->

clase1-12.html

<!-- En vez de usar clases podemos usar identificador, nombrado como # -->


 

<html>

    <head>

        <title>Título</title>

        <style>

            #estilo1{color:brown; border:1px solid #0000FF;}

            #estilo2{font-size:20px; text-decoration: line-through;}

            #estilo11 {font-size: 40px;}

        </style>

    </head>

    <body>

        <div id="estilo1" >

            Esta es una capa

            <div id= "estilo11" >Esta es la capa hijo</div>

        </div>

        <div id= "estilo2" >

            Esta es otra capa

        </div>

    </body>

</html>

<!-- Los identificadores se refieren a una única instancia

del objeto, las clases se pueden usar en distintos objetos -->