HTML – building your first markup

After wrapping our heads around the concept of tags and attributes its time to dive into some HTML code(Yeeey!).

 

But wait, where will I code?

Before getting started, it is a good idea to choose a code editor, this is where we will type our code. There are several good editors like Atom, Brackets, Sublime Text to name a few but for now we’ll use Microsoft’s Visual Studio Code. Download and install the code editor.

 

Getting started

We first need to create a folder where we will put our files. You can name it anything you want. Right-click on the folder and choose Open with Code(assuming that you have already installed the editor). Create a new file and name it index.html. You can name it anything you want but must have a .html extension. For now, we’ll name it as the index.

Open the index.html and paste this code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>HTML Intro</title>
  </head>
  <body>
  </body>
</html>

 

Breaking down the commonly used tags

Let’s break the code above to understand it much further

doctype – This instructs the browser about the version of the document. This should always be on top of your document. You can learn more about document versions here.
html – This is the document’s root tag. This contains all the elements in the document except for the doctype. This contains 2 tags which are the head and the body tag.
head – This is where you will put head elements like style, meta information, title etc.
meta – This provides some metadata to your document.
title – This is where you put the title of your page.
body – This contains your markup. All html tags that are related to the document’s markup goes here.

 

Adding the content

We’ll create a simple markup where there is a header with a logo and navigation, a hero section, portfolio, about section and a footer.

 

Header

Let’s start with the header. Put this code inside the body tag. Inside the header, we added a logo, a navigation and a hero section with tagline.

You might also noticed the way I name my classes like hero__tagline, this is a CSS naming convention called BEM(Block, Element, Modifier). You can name your classes any way you want but using BEM makes more manageable in the future.

<header id="home" class="home">
    <nav id="navigation" class="navigation section">
        <img src="images/logo.png" alt="" class="logo">
        <ul class="menu">
            <li><a href="#home">Home</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </nav>
    <section id="hero" class="hero section">
        <h1 class="hero__tagline">my first html website</h1>
    </section>
</header>

 

Portfolio & About

Next are the portfolio and about section where we put some portfolio pictures and some information about the website. This is also the main content of the website thus we use a main tag. Inside the main tag, we created 2 section tags for portfolio and about with titles using the h3 tag.

<main>
    <section id="portfolio" class="section portfolio">
        <h3 class="section__title">portfolio</h3>
        <div class="portfolio__row">
             <div class="portfolio__col"><img src="images/p1.jpg" alt="" class="portfolio__image" alt="portfolio image"></div>
             <div class="portfolio__col"><img src="images/p2.jpg" alt="" class="portfolio__image" alt="portfolio image"></div>
             <div class="portfolio__col"><img src="images/p3.jpg" alt="" class="portfolio__image" alt="portfolio image"></div>
        </div>
        <div class="portfolio__row">
             <div class="portfolio__col"><img src="images/p4.jpg" alt="" class="portfolio__image" alt="portfolio image"></div>
             <div class="portfolio__col"><img src="images/p5.jpg" alt="" class="portfolio__image" alt="portfolio image"></div>
             <div class="portfolio__col"><img src="images/p6.jpg" alt="" class="portfolio__image" alt="portfolio image"></div>
        </div>
    </section>
    <section id="about" class="about">
        <h3 class="section__title">about</h3>
        <p class="about__description">Your custom about description </p>
    </section>
</main>

 

Footer

And finally, the footer.

<footer class="footer">
    <div class="section">
        <p class="footer__copyright">@copyright 2017 MY FIRST WEBSITE</p>
    </div>
</footer>

 

Final Markup

Your final markup should look like this:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>HTML Intro</title>
    </head>
    <body>
        <header id="home" class="home">
            <nav id="navigation" class="navigation section">
                <img src="images/logo.png" alt="" class="logo">
                <ul class="menu">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
            </nav>
            <section id="hero" class="hero section">
                <h1 class="hero__tagline">my first html website</h1>
            </section>
        </header>
        <main>
            <section id="portfolio" class="section portfolio">
                <h3 class="section__title">portfolio</h3>
                <div class="portfolio__row">
                    <img src="images/p1.jpg" alt="" class="portfolio__image" alt="portfolio image">
                    <img src="images/p2.jpg" alt="" class="portfolio__image" alt="portfolio image">
                    <img src="images/p3.jpg" alt="" class="portfolio__image" alt="portfolio image">
                </div>
                <div class="portfolio__row">
                    <img src="images/p4.jpg" alt="" class="portfolio__image" alt="portfolio image">
                    <img src="images/p5.jpg" alt="" class="portfolio__image" alt="portfolio image">
                    <img src="images/p6.jpg" alt="" class="portfolio__image" alt="portfolio image">
                </div>
            </section>
            <section id="about" class="about">
                <h3 class="section__title">about</h3>
                <p class="about__description">Your custom about description </p>
            </section>
        </main>
        <footer class="footer">
            <div class="section">
                <p class="footer__copyright">@copyright 2017 MY FIRST WEBSITE</p>
            </div>
        </footer>
    </body>
</html>

 

Logo and images

You must also create a folder named images the same level as your index.html and put the logo and the other images that are referenced in the markup. The images are named logo.png and p1-6.jpg but you can also name the images anything you want, just change the reference in the img tag.

 

Conclusion

In this article, we created a simple and basic html file. We divided it into a header, main content and a footer. We used some common HTML tags for markups, images, navigation, and links.

You can now save and open the index.html file to view the result. As of now, the file looks like a bunch of text and images stacked together. Don’t worry, in the next article, we will start shaping it and add some style using CSS or Cascading Style Sheets.

Responses

18 − thirteen =

This site uses Akismet to reduce spam. Learn how your comment data is processed.