Lecture5 web design and development

[Day Five]
Class Attribute, Iframes &
File Paths
Course: Web Design and Develop
Date: 2017/05/16
Lecturer: Mohammad Rafi Haidari

Last Lesson Conclusion!
• Name three tags which can go under Table tag?
• Attributes for merging rows and columns?
• What is nested table and how we can use it?
• Name two block level elements and two inline level?
• How we can change the background color a <div>?
• <span> is a block level element, is it true?

HTML The class Attribute
The HTML class attribute makes it possible to define equal styles
for elements with the same class name.
Here we have three <div> elements that point to the same class
name:
<div class="cities">
<p>ONE</p>
</div>
<p>TWO</p>
</div>
<p>THREE</p>
</div>

<html>
<head>
<style>
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
Example

<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo
Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
Continued…

Using The class Attribute on
Inline Elements
The HTML class attribute can also be used for inline elements:
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>

HTML Iframes
An iframe is used to display a web page within a web page.
Iframe Syntax
<iframe src="URL"></iframe>
Iframe - Height & Width
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
Iframe - Remove the Border

HTML File Paths
A file path describes the location of a file in a web site's folder
structure.
Path Description
<img src="picture.jpg"> picture.jpg is located in the same folder as the
current page
<img src="images/picture.jpg"> picture.jpg is located in the images folder
located in the current folder
<img src="/images/picture.jpg"> picture.jpg is located in the images folder
located at the root of the current web
<img src="../picture.jpg"> picture.jpg is located in the folder one level up
from the current folder

HTML File Paths
File paths are used when linking to external files like:
 Web pages
 Images
 Style sheets
 JavaScripts
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
<img src="/images/picture.jpg" alt="Mountain">
<img src="../images/picture.jpg" alt="Mountain">
Absolute File Paths
Relative File Paths
One Level Above

MOVE 2 matchsticks to make the
above equation true.

Lesson Conclusion Game!
• Name attribute makes it possible to define equal styles
for elements?
• How can you display a webpage inside another page?
• How can you remove border of an <iframe>?
• When we use file paths?
• How can you load a picture which is located one level up?

Lecture5 web design and development

More Related Content

What's hot

Similar to Lecture5 web design and development

More from Rafi Haidari

Recently uploaded

Lecture5 web design and development