Lecture5 web design and development
•
0 likes•88 views
This is lecture five of web design and development series.
![[Day Five]
Class Attribute, Iframes &
File Paths
Course: Web Design and Develop
Date: 2017/05/16
Lecturer: Mohammad Rafi Haidari](https://image.slidesharecdn.com/lecture5webdesignanddevelopment-170516122942/85/lecture5-web-design-and-development-1-320.jpg)
Recommended
More Related Content
What's hot
What's hot (14)
Similar to Lecture5 web design and development
Similar to Lecture5 web design and development (20)
More from Rafi Haidari
More from Rafi Haidari (16)
Recently uploaded
Recently uploaded (20)
Lecture5 web design and development
- 1. [Day Five] Class Attribute, Iframes & File Paths Course: Web Design and Develop Date: 2017/05/16 Lecturer: Mohammad Rafi Haidari
- 2. 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?
- 3. 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> <div class="cities"> <p>TWO</p> </div> <div class="cities"> <p>THREE</p> </div>
- 4. <html> <head> <style> div.cities { background-color: black; color: white; margin: 20px 0 20px 0; padding: 20px; } </style> </head> <body> <div class="cities"> <h2>London</h2> <p>London is the capital of England.</p> </div> Example
- 5. <div class="cities"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="cities"> <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…
- 6. 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>
- 7. 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
- 8. 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
- 9. 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
- 10. MOVE 2 matchsticks to make the above equation true.
- 11. Solved Version!
- 12. 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?
- 13. Question?
- 14. Thank you!