¿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
Las estructura de un HTML es de esta forma.
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.
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
<html>
<head>
<title>Títulotitle>
head>
<body>
<p>Esto es un párrafop>
<p>Esto es otro párrafop>
<p>Esto es una línea<br>y esto es otrap>
<b>Negrita antiguab>
<strong>Negrita actualstrong>
<i>Cursivai>
<u>Subrayadou>
body>
html>
clase1_6.html
Creamos encabezados, que usan para titulos.
<html>
<head>
<title>Títulotitle>
head>
<body>
<h1>Encabezado 1h1>
<h2>Encabezado 2h2>
<h3>Encabezado 3h3>
<h4>Encabezado 4h4>
<h5>Encabezado 5h5>
<h6>Encabezado 6h6>
body>
html>
clase1_7.html
<html>
<head>
<title>Títulotitle>
head>
<body>
<div>
Esta es una capa
div>
<div>
Esta es otra capa
div>
body>
html>
clase1_8.html
<html>
<head>
<title>Títulotitle>
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
<html>
<head>
<title>Títulotitle>
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>
clase1_10.html
<html>
<head>
<title>Títulotitle>
head>
<body>
<div style= "color:brown; border:1px solid #0000FF">
Esta es una capa
<div style= "font-size: 40px;">Esta es la capa hijodiv>
div>
<div style="font-size:20px; text-decoration: line-through;">
Esta es otra capa
div>
body>
html>
clase1_11.html
<html>
<head>
<title>Títulotitle>
<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 hijodiv>
div>
<div class= "estilo2" >
Esta es otra capa
div>
body>
html>
clase1-12.html
<html>
<head>
<title>Títulotitle>
<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 hijodiv>
div>
<div id= "estilo2" >
Esta es otra capa
div>
body>
html>
