Understanding HTML and CSS in a real project

About the project
This is just a scratch portfolio website built using HTML and CSS(internal CSS only by using elements)

It contains a header and four sections on this webpage. Whenever we want to create a webpage, we have to decide
How can we break it into small blocks first, which will make it easier to add style to the element

*What is the use of this scratch webpage *

<html>
    <head>
        <title> MANIKANDAN T </title>


    </head>

    <body>
        <header>
            <h1> MANIKANDAN T</h1>

            <ul>
                <li><a href="abc">About me </a></li>
                <li><a href="abc">project</a></li>
                <li><a href="abc">content</a></li>
                <li><a href="abc">login page</a></li>

            </ul>
        </header>

        <section>
            <h1>About Me</h1>
            <p>Iam a web developer </p>
        </section>

         <section>
            <h1>Project</h1>
            <p> Library management </p>
            <p>Library management is a sub-discipline of institutional management that focuses on specific issues faced by libraries and library management professionals.</p>
        </section>

         <section>
            <h1>Content</h1>
            <p>About me </p>
        </section>

         <section>
            <h1>Login page</h1>
            <p>user login </p>
        </section>

        <style>
            header{

                border: 1px solid black;
                background-color: dimgrey;

            }

            a{
                text-decoration: none;
                color:black;

            }
            ul{
                list-style-type:none;
                display: flex;
                gap: 40px;

                justify-content: center;
                font-size:large;

            }
           header h1{
                text-align: center;
                color:white;
            }

            section{
                width:60%;
                margin:auto;
                margin-top: 10px;
                padding-left: 10px;
                background-color: bisque;
                 border-radius: 10px;
                /* border:1px solid black; */


            }
            body{

            }

        </style>

    </body>
</html>

From this webpage, I have learned some elements and styles like

--> <ul>
The

Note

--> a tag
The a HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address

Note: when creating an anchor tag, it will be automatically
underlined in the text like

After using this CSS style, the anchor tag underline and
color of the anchor tag text is blue,for changing it we use
color style

--> h1
It is a heading tag , there are h1to h6 ,as the number

increase the size, reduce

Now you will have a doubt about why there is only 6 headings
tag, why not h7 because HTML has only six heading tags (h1 to h6) because a webpage doesn’t need more than six levels of titles, just like a book has a main title, chapters, and sub-sections. Search engines and screen readers also understand only these six levels. If you want a heading to look smaller or bigger than these, you simply use CSS to change the style instead of creating something like h7.

Output page

<p> Tag
A paragraph in HTML is simply a block of text enclosed within the

tag. The

tag helps divide content into manageable, readable sections. It’s the go-to element for wrapping text in a web page that is meant to be displayed as a distinct paragraph.

Syntax:<p> Some Content... </p>

DEV Community

Understanding HTML and CSS in a real project

Top comments (0)