<!DOCTYPE html>
<html>
<!-- head-->
<head>
<!-- Links and Scripts-->
<link rel="stylesheet" type="text/css" href="custom.css">
<title> <!-- title--> </title>
<style>
/* CSS Code*/
</style>
</head>
<body>
<!-- Container for content-->
<div>
<!-- Content-->>
Hi! I am a piece of content!
</div>
</body>
</html>
➼ <div> is a type
of container. Containers hold content. <div>s (and other containers) are used
to organize and display content.
➼ Content can be any part of the user's
experience using your website or application.
Think about the last website you visited or the last game you played. What did you experience?
Text, pictures, videos and sounds are some example of content.
Div tags:
✶ Are content containers
✶ Hold a block of content
✶ Divide content into sections
✶ Insert line breaks before and after the container
Block Elements: A div is example of a block element. This means it takes up all the space of its parent container. It creates a block of content.
Most web layouts are made by CSS formatted divs.
Let's use this page as an example. The main content on this page is divided into 3 columns.
Columns divide content vertically.
✶ The first column on this page holds the 'Quick Copy Boxes'. It is 25% of the page width (on a computer screen).
✶ The second column holds the lesson content. That includes what you are reading right now.
This section is 50% of the page width (on a computer screen).
✶ The third column holds my side bar. I have not made the sidebar yet, but suspect it will
be present by the time you are reading this. It will probably include links to resources related to this
lesson, such as Github code or a YouTube video. It takes up 25% of the page width (on a computer screen).
CSS formatted divs make up the main layout of my pages.