28/10/2019

Lesson 7 - Page Layout

Block-level Elements or Inline-level Elements

Block-level Elements
<h1~h6>, <div>, <p>, <ul>,<ol>
Inline-level Elements
<span>, <strong>, <a>

Div tag

<div> means division.

Definition and Usage

The <div> tag defines a division or a section in an HTML document.

The <div> element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.

Page Layout

HTML template

EXAMPLE



<html>

<head>
</head>
<body>

<header>
</header>

<main>

</main>

<footer>
</footer>
</body>

</html>


  

Inside <body> is displayed. We usually seeing are all <body> contents

Let's use Grid Sytem

About Grid System

Change your web site to 2 coloums by using Grid System.

EXAMPLE



<div class="container">
  <div class="row">
    <div class="col-6">
    col-6 = width 50%
    </div>
    <div class="col-6">
    col-6 = width 50%
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-9">
    col-9 = width 75%
    </div>
    <div class="col-3">
    col-3 = width 25%
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-3">
    col-3 = width 25%
    </div>
    <div class="col-9">
    col-9 = width 75%
    </div>
  </div>
</div>

  

result

col-6 = width 50%
col-6 = width 50%
col-9 = width 75%
col-3 = width 25%
col-3 = width 25%
col-9 = width 25%