đź’ˇMini Intro al HTMLđź’ˇ
‌
Las siglas de HTML en ingles significan: HyperText Markup Language o lenguaje de marcado de Hipertexto en nuestro idioma.
‌El HTML, es el lenguaje base con el que se hacen las páginas web.
‌No es un lenguaje de programación, sino un lenguaje descriptivo, una serie de etiquetas 🏷️ que el navegador reconoce para mostrar el contenido en la pantalla 💻.
‌Estructura básica de una página Web
Una página o documento HTML contiene unas etiquetas que son indispensables:
‌<!doctype> es el tipo de documento, desde la versiòn de html5 el tipo de documento se colocala con la siguiente etiqueta: <!doctype html>
‌<html> Aquà irá todo el contenido de nuestra página, esta etiqueta puede tener el atributo lang, que especifica el lenguaje de la página </html>
‌Dentro de las etiquetas anteriores (<html></html>) van dos pares de etiquetas muy importantes:
‌<head> Son etiquetas cabecera del documento, contienen información sobre la página, estas contienen unos meta tag que brindan información adicional del documento, ademas en estas pueden ser incluidos alguos tags como: <title></title>, <link>, <script></head>
‌<body> Estas etiquetas son el cuerpo del documento, aquà es donde incluimos todas las etiquetas para nuestro contenido, como: <div></div><p></p>, entre otras</body>
Todas las etiquetas deben cerrarse. Hay etiquetas que tienen una que abre y cierra como esta: <p></p>
y hay otras etiquetas que no requieren un par, se puede hacer el cierre en una sola, como: <img />
‌Sintaxis de un elemento
Un elemento de un documento HTML, tiene una representaciòn o significado semántico. El <title></title> representa el titulo del documento y solo se incluye en el <head</<head> del documento.
‌La mayoria de etiquetas tienen un tag o etiqueta de inicio y de cierre, y pueden contener atributos, que definen unas propiedades adicionales. Por ejemplo:
Anidamiento (Nesting)
Las etiquetas pueden contener en su interior otras etiquetas. Si creamos dos etiquetas tipo parrafo, y dentro de cada una de ellas incluimos mas etiquetas, las dos etiquetas <p></p>, estarian al mismo nivel y serian hermanas (siblings) y las etiquetas internas dentro de cada una, se convertirian en etiquetas padres que anidan otras etiquetas o tienen etiquetas hijas.
Comentarios
Los comentarios se incluyen en el marcado para hacer las etiquetas faciles de entender. Puede ser de ayuda para quien este leyendo tu documento HTML, para entender que estas haciendo Estos no se visualizan en el documento. Los comentarios inician con <! — y terminan con →.
Tipos de elementos del HTML
Los elementos del HTML se pueden colocar en dos grupos, los elementos de bloque (block) y los elementos en lĂnea (inline). Los de bloque ocupan el 100% del ancho disponible para este y hacen un salto de lĂnea. Los elementos en lĂnea, se colocan en la misma lĂnea uno seguido del otro, ocupan el ancho de su contenido.
‌En bloque: <div></div>, <p></p>, <h1></h1> hasta <h6></h6>, <form></form>, <ol></ol>, <ul></ul>, <li></li>, <section></section>, <article></article>, entre otras.
‌En lĂnea: <img />, <a></a>, <span></span>, <strong></strong>, <i></i>, <input />, <button></button>
‌Es recomendable por semántica no colocar elementos en bloque dentro de los inline.
‌Existen muchas etiquetas, las cuales puedes ampliar la información en el siguiente link, en él puedes encontrar atributos de estas etiquetas, más etiquetas de acuerdo a su significado, con sus respectivos ejemplos: mdn.
Te invito a seguirme en twitter con el handle: @vanessamarely
