Lecture 5 – Float, Layout Assignment & Introduction to JavaScript

Lecture 5 – Float, Layout Assignment & Introduction to JavaScript

Introduction

In the previous lecture, we learned:

  • CSS Text Properties
  • Background Properties
  • DIV Layers
  • CSS Positioning
  • CSS Selectors
  • Margin, Padding and Float Basics

In this lecture, we will learn:

  1. CSS Float
  2. Clear Property
  3. Clearing Float Using HTML
  4. Website Layout Assignment
  5. Border Radius
  6. Introduction to JavaScript
  7. JavaScript Events
  8. Window and Document Objects
  9. JavaScript Functions
  10. Alert Messages
  11. Script Tag
  12. Learning Path Ahead

1. CSS Float

Float is used to align elements horizontally on a webpage.

Normally, block elements appear one below another.

Example

Header

Content

Footer

Using float, elements can appear side by side.

Example

Sidebar    Content Area

Why Float is Used?

Float is commonly used to:

  • Create website layouts
  • Place content side by side
  • Convert block elements into inline-like elements
  • Create columns

Float Syntax

float:left;

or

float:right;

Possible Float Values

Left

Moves element toward the left side.

float:left;

Right

Moves element toward the right side.

float:right;

None

Removes float behavior.

float:none;

Inherit

Inherits float value from parent element.

float:inherit;

Example Layout

+-----------------------+
| Sidebar | Content     |
+-----------------------+

The sidebar may float left while the content area appears beside it.

2. Clear Property

Sometimes floated elements create layout problems.

To stop floating behavior, CSS provides the clear property.

clear:left

Stops elements from appearing beside left floated elements.

clear:left;

clear:right

Stops elements from appearing beside right floated elements.

clear:right;

clear:both

Stops elements from appearing beside either left or right floated elements.

clear:both;

Why Use Clear?

Without clearing floats:

Header

Sidebar    Content

Footer (May move upward)

With clear:

Header

Sidebar    Content

Footer

The footer stays in the correct position.

3. Clearing Float Using HTML

In older websites, developers often used the <br> tag to stop floating.

Example

<br clear="all">

Purpose

This forces the next content to appear below all floated elements.

Illustration

Sidebar    Content

<br clear="all">

Footer

Note

Modern developers usually prefer CSS:

clear:both;

However, you should know both techniques because many old websites still use them.

4. Assignment – Create a Website Layout

Your task is to design a simple webpage layout using everything learned so far.

Layout Requirements

Main Container

Create a main container having:

Width: 980px

The container will hold all webpage sections.

Header Area

Create a header section at the top.

Requirements:

  • Full width of container
  • Border around header
  • Suitable height

The header should represent the website title area.

Sidebar Area

Create a sidebar section.

Requirements:

Width: 250px

The sidebar should appear on the left side.

Possible content:

  • Home
  • About Us
  • Services
  • Contact Us

Content Area

Create a content section beside the sidebar.

Requirements:

Border: 2px
Padding: 10px

The content area should occupy the remaining available width.

Add sample text inside the content section.

Footer Area

Create a footer at the bottom.

The footer should contain three buttons:

Home
About Us
Contact Us

The footer must appear below both the sidebar and content area.

Assignment Goals

This assignment will help you practice:

  • DIV structure
  • Float
  • Clear
  • Width calculations
  • Padding
  • Borders
  • Layout design

5. Border Radius

Border Radius is used to create rounded corners.

Without border-radius:

+----------+
|          |
+----------+

With border-radius:

/----------\
|          |
\----------/

Syntax

border-radius:10px;

Example

button{
    border-radius:10px;
}

Different Values

Small Curve

border-radius:5px;

Medium Curve

border-radius:10px;

Large Curve

border-radius:20px;

Circle Shape

border-radius:50%;

6. Let’s Start JavaScript

Now we begin learning JavaScript.

JavaScript is one of the most popular programming languages used in web development.

What is JavaScript?

JavaScript is:

  • A programming language
  • A client-side language
  • Executed inside the browser
  • Used to create interactive webpages

What Can JavaScript Do?

JavaScript can:

  • Show messages
  • Validate forms
  • Respond to user actions
  • Change webpage content
  • Create animations
  • Communicate with servers

HTML + CSS + JavaScript

A webpage is built using:

HTML

Structure

Skeleton

CSS

Design

Appearance

JavaScript

Behavior

Actions and Interaction

7. JavaScript Events

Events occur when users interact with a webpage.

onClick Event

Triggered when user clicks an element.

onclick

Example:

Click a button
Show a message

onMouseOver Event

Triggered when mouse enters an element.

onmouseover

Example:

Mouse enters image
Image changes color

onMouseOut Event

Triggered when mouse leaves an element.

onmouseout

Example:

Mouse leaves image
Image returns to original color

onSubmit Event

Triggered when a form is submitted.

onsubmit

Example:

Validate form
Check required fields
Submit data

8. Reference Objects

JavaScript provides built-in objects.

Window Object

The browser window is represented by:

window

The window object controls browser-related functionality.

Document Object

The webpage itself is represented by:

document

JavaScript uses the document object to access HTML elements.

document.write()

Used to display output on a webpage.

Example

document.write("Hello");

Output

Hello

9. JavaScript Functions

Functions are reusable blocks of code.

Instead of writing the same code repeatedly, we place it inside a function.

Syntax

function functionName()
{
}

Example

function sayHello()
{
    alert('Hello');
}

Whenever the function is called, the alert message appears.

10. Alert Message

Alert is one of the simplest JavaScript functions.

It displays a popup message.

Example

alert('Hello');

Output

+----------------+
|     Hello      |
|       OK       |
+----------------+

11. Script Tag

JavaScript code is written inside the <script> tag.

Traditional Syntax

<script type="text/javascript" language="java">
</script>

Modern Syntax

<script>
</script>

Purpose

The script tag tells the browser:

JavaScript code starts here.

12. What Will We Learn Next?

We have now started JavaScript fundamentals.

Our learning roadmap is:

HTML
↓
CSS
↓
JavaScript
↓
PHP
↓
jQuery

Summary

In this lecture, we learned:

  • CSS Float
  • Float Values
  • Clear Property
  • Clearing Float with HTML
  • Website Layout Assignment
  • Border Radius
  • Introduction to JavaScript
  • JavaScript Events
  • Window Object
  • Document Object
  • document.write()
  • Functions
  • alert()
  • Script Tag
  • Future Learning Roadmap

In the next lecture, we will continue with JavaScript fundamentals and learn how JavaScript interacts with HTML elements and user actions.