ckportfolio.com - Layout Construction via HTML

Layout Construction via HTML

Layout Construction

We are going to be using a new tag called <div> to construct a more complex layout, illustrated below:

It is important for us to break this layout down into large chunks before delving into code. From the way I see it, the layout largely consists of the following parts:

Layout components

1. Title
2. Intro
  • 2a. Intro left (image)
  • 2b. Intro right (text)
3. Gallery
  • 3a. Item 1 (image and text)
  • 3b. Item 2 (image and text)
  • 3c. Item 3 (Image and text)
4. Footer

Notice that I was able to derive a tangible list of elements that we can now translate to code. After setting up your index.html file as described last week, complete with CSS integration, start to build the layout "scaffolding" using the following screenshot as a guide:

<div> elements are simply divisions in the layout --- nothing more, nothing less. Note that we now have four boxes, each of them equipped with its own ID, and all these boxes are conveniently contained in a larger box named "container." Note that I have used identation (tab key) to indicate a level of hierarchy between these elements as well.

Let's continue to address the additional divisions. While "title" and "footer" do not contain any subdivisions, "intro" and "gallery" do. We can further illustrate this using the following:

Note that the two <div>s under "intro" have their own IDs, while the three <div>s under "gallery" share a single class name. This is because I can foresee that the two "intro" subdivisions will be sufficiently different from one another --- while the other group of "gallery" subdivisions will more or less be the same, and can be treated as three identically styled elements.

With the scaffolding completed, we can now proceed with fleshing out these placeholder components with CSS.

Screencast Recording

https://drive.google.com/file/d/1KWweBFPZKfnNvqBxr95g1oO3STFj4fA-/view?usp=drive_link

(Updated October 26, 2023)

Code Sample: HTML

<!doctype html>
<html>

    <head>
        <link rel="stylesheet" href="css/style.css">
        <title>Week 2</title>
    </head>

    <body>

        <div id="container">

            <div id="title">
            </div>

            <div id="intro">

                <div id="intro_left"></div>
                <div id="intro_right"></div>

            </div>

            <div id="gallery">

                <div class="gallery_item"></div>
                <div class="gallery_item"></div>
                <div class="gallery_item"></div>

            </div>

            <div id="footer">
            </div>

        </div>

    </body>

</html>
Fin