2

HTML5 The Old Manuscript

 2 years ago
source link: https://dev.to/whitehatdevv/html5-the-old-manuscript-51p1
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

HTML+CSS Professional πŸ› (4 Part Series)

Hello Everyone πŸ˜„!

As every Wednesday, I bring you a new post about HTML! But it's time to go deeper and deeper in order to create our first website.

I know, you have already read all the data staff about basic HTML tags, so you don't need anything else, you need to focus on understand how a website is composed by and trying to understand how HTML works.

Ok πŸ˜™, let's going to check an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
       <body>
           <!-- All data staff -->
       </body>
</html>

Enter fullscreen mode

Exit fullscreen mode

All data staff needs to show in your page you must include inside <body> tag.

*That's clear, isn't it? *

But how should we organise it πŸ˜‡ ?

Thinking in real life, how would you organise objects in your house?
I'm sure you have a lot of furnitures, then you group all your personal objects inside these furnitures, you always try to be tidy 😀, or I hope it πŸ˜‚.
Working with HTML is the same thing, you need to organise your website content inside containers, inside tags which are focus in divided all your content strategically. I'm really glad to meet you <div> tag.

Let's see some examples:

<div>

Wow, OMG!!! πŸ€“

What SHIT is a div?

  • It's one of the most useful tag, it allow us to divide our content in different parts, mainly the div has no other meaning, it's only a unique content organiser: 
<div></div>

Enter fullscreen mode

Exit fullscreen mode

Mainly, it isn't shown in the document unless we give it styles. To have some reference is the equivalent of putting a post-it in our class notes.

<div>
     <p> Hello World </p>
</div>

Enter fullscreen mode

Exit fullscreen mode

This in turn can not be inserted inside an inline tag or a text block but inside a table or inside another div.

DIVS! DIVS! DIVS! πŸ₯°

As I said before the div tag can be nested "as I mentioned in another post, an HTML document is nothing more than a composition of nested tags" to create blocks of content.

<div>
     <div> 
            <p> Hello World Again! XD </p> 
     </div>
</div>

Enter fullscreen mode

Exit fullscreen mode

When not to use <div>?

Although they are very useful we must avoid using them unnecessarily 🀀, for example when we have several elements it is not necessary to nest them inside divs.

Tables!

Another way to organise the information are the tables, YES! 🀀 as in EXCEL,
and the way to create it is with the tag:

<table></table>

Enter fullscreen mode

Exit fullscreen mode

This is defined under a series of tags that are :

<td or th> (for cells)

Enter fullscreen mode

Exit fullscreen mode

Where

is used for normal cells and also in the header cells, and intended primarily for the headers as these give a bold style to the content within it.
<tr> (for rows)

Tables can also have as in HTML , head, body and feet, defined as follows:

<thead>
<tbody>
<tfooter>

They can also have legends which are nothing more than a text above the table to clarify the content. This is created with the tag:

<caption>

This is what a table would look like in code:

<table>
    <tbody>
        <tr>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Here is an outline for your guidance:

Curious Fact πŸ€ͺ:

In the old days tables were used to completely create the website, so making websites was much more complex than it is now , that there are new ways to organize information and allow to make a html document more visual!

To finish today's post which is a lot XD πŸ˜‚ I want to announce that during the week you will have the pdf with the tags so you can use it as a reference as a cheatsheet.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK