DEV Community

Cover image for Html And The Mystery Of The Skeletons
Manu Martinez
Manu Martinez

Posted on • Updated on

Html And The Mystery Of The Skeletons

Ready? Round 2! ❤️

Hi! Remember when in the previous post I told you what HTML was, what it looked like and what the attributes were? well, it's time to start playing with it. So grab paper and pencil and let's get started!

Ok, we know that the tags look like this:

    <p> ....... some content .....</p>
Enter fullscreen mode Exit fullscreen mode

But we must take into account the following points

  1. It is not the same <h1> as <H1>.
  2. Tags are generally always lowercase.
  3. We must close the tags so that they always work.

But how do you compose them to create an HTML document?

Well this is the basic structure :


         <!DOCTYPE html>
            <html>
                  <head>
                       <meta charset="utf-8">
                       <meta name="viewport" content="width=device-width">
                       <title>Hello World</title>    
                  </head>
                  <body>
                        <!-- All the content here -->
                  </body>
            </html>

Enter fullscreen mode Exit fullscreen mode

htmlSimpleStructure.png

Don't worry if at the beginning you don't understand too, it's normal, later I will explain you how each tag works.
Trying to compare HTML basic structure with a body, with head, body and limbs, and HTML works as if they were the bones, in which the rest of the document, photos, videos, etc.. is supported.

Everything that appears in the body section what will be displayed on the page are.

Well, and as they say:

You will not learn how to code keeping you ass in your sofa 😃.

I advise you to use this playground to practice what you have just learnt today

Code pen

In the section that says HTML you are going to paste the code that I proposed you in basic structure, and inside where it says body you are going to write the following tags:

     <p>Hello world</p>
Enter fullscreen mode Exit fullscreen mode

There you go, you are creating a HTML code like any good programmer who respects himself! 😉

But I do not want you to stay with the desire for more so I pass a series of tags and their functionalities for you to play a while and go testing little by little.


<h1>...</h1> => Create a title

<img src =" URL "> => Insert an image in the document.  

<p>...</p> => Insert a paragraph in the document

<ul> => create a list of points 
        <li></li>  
        <li></li> => you fill that list with this tag
</ul> 


Enter fullscreen mode Exit fullscreen mode

Well I leave you with the task:

Create a document which you put a picture of a puppy and a description in, also, you should try to include a few items inside a list.

In the next post we will learn how to improve this so stay tuned!
Well friends!! That's all for the moment, you have for a while, and remember:

Do what you love every day and try to be the best version of you!

Discussion (0)