Html es el "lenguaje" con el que escribimos un texto y el navegador web. Una página Web, es un simple documento de texto sin formato, que contiene etiquetas (h1, p, img), esas etiquetas le dicen al contenido (texto, imágenes, etc) como posicionarse en el espacio del navegador Web.
Cada página que has visitado, está basada en este concepto, ya sea Youtube, Facebook, Instagram, Wikipedia, todo se basa en archivos que el navegador web lee e interpreta para que lo veamos como una página.
Fuente: W3Schools.com/html
Manos a la obra!
Un documento HTML se puede crear con el bloc de notas (o cualquier editor de textos básico) agregando etiquetas.
Vamos a usar un ejemplo abstracto, a derecha podemos ver la imagen de la botella que tiene 2 etiquetas <botella> es donde empieza la botella y </botella> es donde termina la botella.
Para un documento web primero definimos las etiquetas <html> y </html> dentro de éste podemos 2 nuevas áreas llamadas <head> </head> (la cabecera del documento) y el <body> </body> el cuerpo del documento).
Si entienden el chiste de la foto, vamos bien.
Dentro de la sección de la cabecera (<head></head>) agregaremos el título del documento con la etiqueta <title> titulo </title>.
Salvamos el documento como HTML, o sea agregando la extensión .html al final del nombre de archivo. Luego hacemos hacer doble click en el archivo para que nuestro navegador web cargue el documento.
Por ahora sólo usaremos la cabecera para dar nombre a la ventana o solapa del documento html, en futuras clases usaremos la cabecera para dar formato y agregar scripts.
AGREGAR TEXTOS
Como hicimos antes para definir las "zonas" del documento, también definiremos los elementos del documento. Para poner un título usaremos la etiqueta <h1>PIKACHU</h1>
A continuación buscaremos un texto para aplicar como párrafo y usarlo entre etiquetas <p> y </p> de ésta forma:
Podemos agregar tantos Titulos <h1></h1> y párrados <p></p> como queramos, en éste ejemplo agregué información sobre RAICHU.
AGREGAR IMÁGENES
Para agregar imágenes usamos una etiqueta BASICA <img> dentro de la cual va la información de la imagen. Si la imagen está el la misma carpeta que el archivo html, debemos poner el nombre de la siguiente manera:
<img src="pikachu.jpg">
Haciendo Trabajos Prácticos
Utilizaremos documentos Web para realizar prácticos de diversos temas incorporando nuevas formas para dar color, cambiar el tipo de letra, y dar estilo a los documentos.
En el ejemplo de abajo se usó un título y párrafo de la wikipedia del 2 de abril para crear un documento Web, se le pide a los alumnos que armen su propio documento.
Código que aprendimos hoy:
<head>
<title> titulo de la solapa </title>
</head>
<body>
<h1> Titulo del documento </h1>
<p> En éste espacio va el párrafo </p>
<img src="soldados.jpg" >
</body>
</html>
