Menu

Principios de HTML

html - June 22, 2020 por Carlos Rojas | Edita este Post.
html5

HTML significa Hyper Text Markup Language y funciona con algo llamada etiquetas HTML.

Para entender un poco en la importancia del HTML, pensemos por un momento en la realización de un edificio, cuando se esta construyendo uno nuevo se comienza por la estructura o los cimientos.

De la misma forma utilizamos el HTML en nuestros proyectos, nos va a permitir dar los lineamientos sobre los que se construira todo nuestro sitio Web.

Usualmente las etiquetas se abren con y se cierran con .

<tagname>Contenido...</tagname>

El DOCTYPE es la primera linea en nuestro documento HTML y le dice al navegador que especificación vamos a utilizar. Miremos el siguiente ejemplo sencillo.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

</body>
</html>

Esto seria todo lo que necesitarias para crear un documento HTML simple y el navegador lo entenderia. Graficamente lo podemos ver asi:

Podemos ver que <html></html> contiene todo nuestro documento y existén dos grandes bloques <head></head> y <body></body>.

El <head></head> es un elemento que nos permite brindar información sobre la metadata (información sobre lo que contiene) de nuestro documento.

<head> es un contenedor para los elementos , <meta />, <style>, <script> y <base />.</script></style>

<head>
  <title>Page Title</title>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">  
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">  
  <meta name="author" content="John Doe">
  <link rel="stylesheet" href="mystyle.css">
</head>

En el <body> definimos los elementos que van a ser visibles en nuestro documento tales como headings, paragraphs, images, hyperlinks, tables, lists, etc. Los elementos que se encuentrén aqui son los elementos visibles en el navegador.

<body>  
    <heade>
        <nav>About | Resume | Works | Blog | Contact </nav>  
    </header>  
    <main>
        <section>
            <div></div>
            <div></div>
            <div></div>
        </section>    
        <section>
            <article></article>  
            <article></article>  
            <article></article>
            <article></article>
            <article></article>
        </section>
        <section>
            <article>
                <section>
                    <article></article>
                    <article></article>
                    <article></article>
                </section>
                <section>
                    <article></article>
                    <article></article>
                    <article></article>
                </section>
            </article>    
            <article></article>    
        </section>
        <section>
            <article></article>
        </section>
        <section>
            <article></article>
        </section>
        <section>
            <article></article>
            <article></article>
        </section>
    </main> 
</body>

Con esta información ya puedes crear un documento simple en HTML y debe ser visible en cualquier navegador.

Si este contenido te parece útil y me quieres ayudar a hacer mas, considera apoyarme en Patreon.

Bueno eso es todo por ahora. Espero sea de utilidad :)

¡Compártelo!

Artículos relacionados: