¿Que es html y para que sirve?
En este articulo se vera html5 básico, pero para eso tenemos que entender que hmtl5 es un lenguaje markup que sirve para codificar o “diseñar” la estructura o esqueleto de una pagina web. Los navegadores web interpretan este lenguaje por lo que se entiende que html pude ser un lenguaje miltiplataforma, ya que los sistemas operativos (Windows, Mac, Linux, etc.) pueden ejecutar un navegador.
Aprender html5 básico
Bien ahora veremos una estructura básica para ir conociendo los elemento o también conocidas como etiquetas de html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
Antes de explicar que significa cada elemento quiero que entiendan la estructura de cada etiqueta así luego entenderán con mas facilidad cuando se las explique.
Existen dos tipos de etiqueta con apertura y cierre por separado y con la apertura pero sin cierre (se lo interpreta como que en la misma apertura hace el cierre) en la misma etiqueta.
<!-- Etiqueta con apertura y cierre --> <nombreEtiqueta> <!-- Usual mente de coloca mas código html en medio --> </nombreEtiqueta> <!-- Etqueta sin cierre --> <nombreEtiqueta2> <!-- O --> <nombreEtiqueta3/>
El “nombreEtiqueta” no existe solo lo puse para ejemplificar pero con esto ya nos vamos dando cuenta que va a tener varias etiquetas que mencionaremos algunas en este articulo.
También vamos a tener atributo la mayoría de las etiquetas si no es que todas pueden tener atributos estos sirven tanto para diferenciar ya que varias etiquetas se pueden repetir, para darles valor y también dales estilo o apariencia.
<!-- Este es un atributo en una etiqueta --> <nombreEtiqueta nombreAtributo="ValorParaElAtributo" ></nombreEtiqueta> <!-- Ejemplo Con una etiqueta real --> <input type="text">
Ya sabiendo como se compone un a etiqueta vamos a ver para que sirven las mas importantes.
Tipo de etiquetas
Información que quizá no sea visible para nosotros.
<!DOCTYPE html> : Con esta etiqueta le decimos al navegador que interprete la versión 5 de HTML.
<html lang=“en”></html> : Aquí tenemos nuestra primera etiqueta que nos indica el comienzo del esqueleto y del código html y veremos que aqui ya usamos un atributo que le dice al navegador que nuestra pagina esta en idioma ingles pero podemos cambiarlo a nuestro idioma en nuestro caso “es”.
<head></head> : En esta sección se especifican metadatos, información de la pagina la mayoría no se vera.
<meta charset=“UTF-8”> : Podemos notar que en este meta le especifica en su atributo que nuestra pagina va a soportar caracteres especiales como la Ñ y vocales con acento.
Los metas según los atributos le vamos dando información a nuestra web, y ¿quienes ven esta información?
Los datos de los meta los ven tanto el navegador como los buscadores como los de google mas adelante veremos a detalle cada uno.
<title>Document</title> : Esta etiqueta es el titulo de la pagina pero no visible si no el que aparece en la pestaña del navegador.
Información que si sera visible en tu pagina.
<body></body>: En medio de estas etiquetas se empieza a escribir código que sera visible en nuestra pagina web.
<div></div>: Esta etiqueta actúa mas que nada como un contenedor este sirve para colocar un bloque de código HTML y luego poder modificar todo el bloque con algún aspecto por lo usual a esta etiqueta se le coloca estilos de posicionamiento en la pantalla.
Las siguientes etiquetas son exactamente igual al div pero representan una diferencia especialmente par los buscadores.
<header></header>: Si bien en estas etiqueta podrían ir cualquier código HTML es preferible poner Titulo principal o información del contenido logo o eslogan etc.
<nav></nav>: Esta etiqueta sera el contenedor de elementos de navegación para tu pagina.
<section></section>: Este va a especificar una sección de contenido de información en tu pagina.
<article></article>: este usualmente se encontrara dentro de la etiqueta sectoin este sirve para ordenar tu contenido dentro de una sección.
<aside></aside>: Aquí podrás colocar información que haga referencia a otros artículos o secciones de tu pagina publicidad enlaces externos etc.
<footer></footer>: Esta sección indica el pie de la pagina información de contacto copy rigth etc. A veces también se vuelve a poner rutas de navegación de tus paginas.
Así se vería la estructura sin acomodar con estilos.
y así debería verse la estructura con estilos (Enseñare como colocar estilos en un articulo de css básico).
Unas de las etiquetas mas usadas son las h1, h2. h3, h4, h5, h6 que sirven para hacer titulos y subtitulos.
Estos titulos van de mayor relevancia <h1>Titulo<h1/> a menor relevancia <h6></h6>.
Como Usar HTML5
Bien ahora que sabemos que etiquetas conforman la parte básica para crear una pagina vamos a crear una, y para ello vamos a seguir estos simples pasos.
Por ser la primera vez lo crearemos de una forma poco y no recomendad de usar solo para que hagan su primer ejemplo mas adelante veremos que podemos crearlas fácilmente con editores de texto especializados.
- Crear archivo de texto.
- cambiarle la extensión a .html.
- ábrelo en el block de notas u algún editor de texto que tengas en tu sistema operativo y copian el siguiente código.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mi primera pagina web</title>
</head>
<body>
<header>
<h1>Mi primera pagina web</h1>
</header>
</body>
</html>
Finalmente lo abrimos en el navegador si no aparece de forma predeterminada click derecho abrir con y eligen su navegador preferido quedaría algo como esto.
Bueno ahora solo te queda practicar muéstrame en los comentarios el resultado de tu ejemplo, espero te halla servido y mas adelante escribiré cosas un poco mas avanzadas Adiós.
El artículo es fuertemente excelente y lo voy a aconsejar y a usar para mi igualmente.
lo voy a extender en Twitter si no hay adversidad y ciertamente almaceno este vínculo