尊敬的 微信汇率:1円 ≈ 0.046166 元 支付宝汇率:1円 ≈ 0.046257元 [退出登录]
SlideShare a Scribd company logo
[Day Six]
Layouts, Head
Course: Web Design and Develop
Date: 2017/05/17
Lecturer: Mohammad Rafi Haidari
Last Lesson Conclusion!
• 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?
The HTML <head> Element
The <head> element is a container for metadata (data about
data) and is placed between the <html> tag and the <body> tag.
The following tags describe metadata:
 <title>
 <style>
 <meta>
 <link>
 <script>
HTML Layouts
<header> - Defines a header for a document or a section
<nav> - Defines a container for navigation links
<section> - Defines a section in a document
<article> - Defines an independent self-contained article
<aside> - Defines content aside from the content (like a
sidebar)
<footer> - Defines a footer for a document or a section
HTML Layout Techniques
 HTML tables
 CSS float property
 CSS framework
There are four different ways to create multicolumn layouts.
Each way has its pros and cons:
HTML Layout.
Work on last homework as
example.
The HTML <meta> Element
The <meta> element is used to specify which character set is
used, page description, keywords, author, and other metadata.
Metadata is used by browsers (how to display content), by search
engines (keywords), and other web services.
Define the character set used:
<meta charset="UTF-8">
Define a description of your web page:
<meta name="description" content="Free Web tutorials">
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML,
JavaScript">
Lesson Conclusion Game!
• Name two metadata?
• What come in your mind by the word Layouts?
• What is the purpose of <header> and <nav>?
• What is the purpose of <article> and <section>?
• What is the purpose of <aside> and <footer>?
ADD 2 matchsticks to the equation
above to make it true.
Solved Version!
Question?
Thank you!

More Related Content

What's hot

Web design using html
Web design using htmlWeb design using html
Web design using html
ElsaS7
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
Abhishek Kesharwani
 
HTML and CSS
HTML and CSSHTML and CSS
HTML and CSS
Ketan Ghumatkar
 
Content by query web part
Content by query web partContent by query web part
Content by query web part
IslamKhattab
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSS
SiddhantSingh980217
 
uptu web technology unit 2 Css
uptu web technology unit 2 Cssuptu web technology unit 2 Css
uptu web technology unit 2 Css
Abhishek Kesharwani
 
uptu web technology unit 2 Css
uptu web technology unit 2 Cssuptu web technology unit 2 Css
uptu web technology unit 2 Css
Abhishek Kesharwani
 
Boostrap basics
Boostrap basicsBoostrap basics
Boostrap basics
JTechTown
 
Planning your website
Planning your websitePlanning your website
Planning your website
Angela Torres
 
Intro to HTML, CSS & JS - Internship Presentation Week-3
Intro to HTML, CSS & JS - Internship Presentation Week-3Intro to HTML, CSS & JS - Internship Presentation Week-3
Intro to HTML, CSS & JS - Internship Presentation Week-3
Devang Garach
 
Web Development - Lecture 2
Web Development - Lecture 2Web Development - Lecture 2
Web Development - Lecture 2
Syed Shahzaib Sohail
 
Web Development - Lecture 5
Web Development - Lecture 5Web Development - Lecture 5
Web Development - Lecture 5
Syed Shahzaib Sohail
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSS
NYCSS Meetup
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
ShreyaShetty92
 
Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...
Aditya Dwivedi
 
Web programming css
Web programming cssWeb programming css
Web programming css
Uma mohan
 
Lecture 1
Lecture 1Lecture 1
Lecture 1
Neelum Adil
 
Dhtml
DhtmlDhtml
Dhtml
Sadhana28
 
Html & CSS
Html & CSSHtml & CSS
Html & CSS
JainilSampat
 
11 Quiz related to HTML, CSS, JS and WP
11 Quiz related to HTML, CSS, JS and WP11 Quiz related to HTML, CSS, JS and WP
11 Quiz related to HTML, CSS, JS and WP
Rashna Maharjan
 

What's hot (20)

Web design using html
Web design using htmlWeb design using html
Web design using html
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
HTML and CSS
HTML and CSSHTML and CSS
HTML and CSS
 
Content by query web part
Content by query web partContent by query web part
Content by query web part
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSS
 
uptu web technology unit 2 Css
uptu web technology unit 2 Cssuptu web technology unit 2 Css
uptu web technology unit 2 Css
 
uptu web technology unit 2 Css
uptu web technology unit 2 Cssuptu web technology unit 2 Css
uptu web technology unit 2 Css
 
Boostrap basics
Boostrap basicsBoostrap basics
Boostrap basics
 
Planning your website
Planning your websitePlanning your website
Planning your website
 
Intro to HTML, CSS & JS - Internship Presentation Week-3
Intro to HTML, CSS & JS - Internship Presentation Week-3Intro to HTML, CSS & JS - Internship Presentation Week-3
Intro to HTML, CSS & JS - Internship Presentation Week-3
 
Web Development - Lecture 2
Web Development - Lecture 2Web Development - Lecture 2
Web Development - Lecture 2
 
Web Development - Lecture 5
Web Development - Lecture 5Web Development - Lecture 5
Web Development - Lecture 5
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSS
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...
 
Web programming css
Web programming cssWeb programming css
Web programming css
 
Lecture 1
Lecture 1Lecture 1
Lecture 1
 
Dhtml
DhtmlDhtml
Dhtml
 
Html & CSS
Html & CSSHtml & CSS
Html & CSS
 
11 Quiz related to HTML, CSS, JS and WP
11 Quiz related to HTML, CSS, JS and WP11 Quiz related to HTML, CSS, JS and WP
11 Quiz related to HTML, CSS, JS and WP
 

Similar to Lecture6 web design and development

Html
HtmlHtml
Appdev appdev appdev app devAPPDEV 1.2.pptx
Appdev appdev appdev app devAPPDEV 1.2.pptxAppdev appdev appdev app devAPPDEV 1.2.pptx
Appdev appdev appdev app devAPPDEV 1.2.pptx
ArjayBalberan1
 
Introduction to whats new in css3
Introduction to whats new in css3Introduction to whats new in css3
Introduction to whats new in css3
Usman Mehmood
 
Bootcamp - Web Development Session 2
Bootcamp - Web Development Session 2Bootcamp - Web Development Session 2
Bootcamp - Web Development Session 2
GDSCUniversitasMatan
 
Html & Html5 from scratch
Html & Html5 from scratchHtml & Html5 from scratch
Html & Html5 from scratch
Ahmad Al-ammar
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
 
Web technologies-course 02.pptx
Web technologies-course 02.pptxWeb technologies-course 02.pptx
Web technologies-course 02.pptx
Stefan Oprea
 
Html-meeting1-1.pptx
Html-meeting1-1.pptxHtml-meeting1-1.pptx
Html-meeting1-1.pptx
YoussefAbobakr
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSS
TJ Stalcup
 
INTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdfINTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdf
DineshKumar522328
 
DIGITAL MARKETING.pptx
DIGITAL MARKETING.pptxDIGITAL MARKETING.pptx
DIGITAL MARKETING.pptx
NeerajThakur369308
 
Web Page Designing
Web Page DesigningWeb Page Designing
Web Page Designing
Amit Mali
 
web development presentation computer science
web development presentation computer scienceweb development presentation computer science
web development presentation computer science
girijasharma7777
 
Html:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)
Thinkful
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
vardanyan99
 
HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 Fundamental
Lanh Le
 
Week 2-intro-html
Week 2-intro-htmlWeek 2-intro-html
Week 2-intro-html
Shawn Calvert
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
Rahul Mishra
 
Web essentials
Web essentials Web essentials
Web essentials
Fadwa Gmiden
 

Similar to Lecture6 web design and development (20)

Html
HtmlHtml
Html
 
Appdev appdev appdev app devAPPDEV 1.2.pptx
Appdev appdev appdev app devAPPDEV 1.2.pptxAppdev appdev appdev app devAPPDEV 1.2.pptx
Appdev appdev appdev app devAPPDEV 1.2.pptx
 
Introduction to whats new in css3
Introduction to whats new in css3Introduction to whats new in css3
Introduction to whats new in css3
 
Bootcamp - Web Development Session 2
Bootcamp - Web Development Session 2Bootcamp - Web Development Session 2
Bootcamp - Web Development Session 2
 
Html & Html5 from scratch
Html & Html5 from scratchHtml & Html5 from scratch
Html & Html5 from scratch
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Web technologies-course 02.pptx
Web technologies-course 02.pptxWeb technologies-course 02.pptx
Web technologies-course 02.pptx
 
Html-meeting1-1.pptx
Html-meeting1-1.pptxHtml-meeting1-1.pptx
Html-meeting1-1.pptx
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSS
 
INTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdfINTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdf
 
DIGITAL MARKETING.pptx
DIGITAL MARKETING.pptxDIGITAL MARKETING.pptx
DIGITAL MARKETING.pptx
 
Web Page Designing
Web Page DesigningWeb Page Designing
Web Page Designing
 
web development presentation computer science
web development presentation computer scienceweb development presentation computer science
web development presentation computer science
 
Html:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 Fundamental
 
Week 2-intro-html
Week 2-intro-htmlWeek 2-intro-html
Week 2-intro-html
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
Web essentials
Web essentials Web essentials
Web essentials
 

More from Rafi Haidari

Lecture9 web design and development
Lecture9 web design and developmentLecture9 web design and development
Lecture9 web design and development
Rafi Haidari
 
Lecture8 web design and development
Lecture8 web design and developmentLecture8 web design and development
Lecture8 web design and development
Rafi Haidari
 
Lecture7 web design and development
Lecture7 web design and developmentLecture7 web design and development
Lecture7 web design and development
Rafi Haidari
 
Lecture5 web design and development
Lecture5 web design and developmentLecture5 web design and development
Lecture5 web design and development
Rafi Haidari
 
Lecture4 web design and development
Lecture4 web design and developmentLecture4 web design and development
Lecture4 web design and development
Rafi Haidari
 
Lecture3 web design and development
Lecture3 web design and developmentLecture3 web design and development
Lecture3 web design and development
Rafi Haidari
 
Lecture2 web design and development
Lecture2 web design and developmentLecture2 web design and development
Lecture2 web design and development
Rafi Haidari
 
Lecture1 Web Design and Development
Lecture1 Web Design and DevelopmentLecture1 Web Design and Development
Lecture1 Web Design and Development
Rafi Haidari
 
Bootstrap day3
Bootstrap day3Bootstrap day3
Bootstrap day3
Rafi Haidari
 
Bootstrap day2
Bootstrap day2Bootstrap day2
Bootstrap day2
Rafi Haidari
 
Bootstrap day1
Bootstrap day1Bootstrap day1
Bootstrap day1
Rafi Haidari
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)
Rafi Haidari
 
CSS_Day_Two (W3schools)
CSS_Day_Two (W3schools)CSS_Day_Two (W3schools)
CSS_Day_Two (W3schools)
Rafi Haidari
 
CSS_Day_Three (W3schools)
CSS_Day_Three (W3schools)CSS_Day_Three (W3schools)
CSS_Day_Three (W3schools)
Rafi Haidari
 
Html_Day_One (W3Schools)
Html_Day_One (W3Schools)Html_Day_One (W3Schools)
Html_Day_One (W3Schools)
Rafi Haidari
 
Html_Day_Three(W3Schools)
Html_Day_Three(W3Schools)Html_Day_Three(W3Schools)
Html_Day_Three(W3Schools)
Rafi Haidari
 
HTML_Day_Two(W3Schools)
HTML_Day_Two(W3Schools)HTML_Day_Two(W3Schools)
HTML_Day_Two(W3Schools)
Rafi Haidari
 

More from Rafi Haidari (17)

Lecture9 web design and development
Lecture9 web design and developmentLecture9 web design and development
Lecture9 web design and development
 
Lecture8 web design and development
Lecture8 web design and developmentLecture8 web design and development
Lecture8 web design and development
 
Lecture7 web design and development
Lecture7 web design and developmentLecture7 web design and development
Lecture7 web design and development
 
Lecture5 web design and development
Lecture5 web design and developmentLecture5 web design and development
Lecture5 web design and development
 
Lecture4 web design and development
Lecture4 web design and developmentLecture4 web design and development
Lecture4 web design and development
 
Lecture3 web design and development
Lecture3 web design and developmentLecture3 web design and development
Lecture3 web design and development
 
Lecture2 web design and development
Lecture2 web design and developmentLecture2 web design and development
Lecture2 web design and development
 
Lecture1 Web Design and Development
Lecture1 Web Design and DevelopmentLecture1 Web Design and Development
Lecture1 Web Design and Development
 
Bootstrap day3
Bootstrap day3Bootstrap day3
Bootstrap day3
 
Bootstrap day2
Bootstrap day2Bootstrap day2
Bootstrap day2
 
Bootstrap day1
Bootstrap day1Bootstrap day1
Bootstrap day1
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)
 
CSS_Day_Two (W3schools)
CSS_Day_Two (W3schools)CSS_Day_Two (W3schools)
CSS_Day_Two (W3schools)
 
CSS_Day_Three (W3schools)
CSS_Day_Three (W3schools)CSS_Day_Three (W3schools)
CSS_Day_Three (W3schools)
 
Html_Day_One (W3Schools)
Html_Day_One (W3Schools)Html_Day_One (W3Schools)
Html_Day_One (W3Schools)
 
Html_Day_Three(W3Schools)
Html_Day_Three(W3Schools)Html_Day_Three(W3Schools)
Html_Day_Three(W3Schools)
 
HTML_Day_Two(W3Schools)
HTML_Day_Two(W3Schools)HTML_Day_Two(W3Schools)
HTML_Day_Two(W3Schools)
 

Recently uploaded

intra-mart Accel series 2024 Spring updates_En
intra-mart Accel series 2024 Spring updates_Enintra-mart Accel series 2024 Spring updates_En
intra-mart Accel series 2024 Spring updates_En
NTTDATA INTRAMART
 
Day 4 - Excel Automation and Data Manipulation
Day 4 - Excel Automation and Data ManipulationDay 4 - Excel Automation and Data Manipulation
Day 4 - Excel Automation and Data Manipulation
UiPathCommunity
 
CTO Insights: Steering a High-Stakes Database Migration
CTO Insights: Steering a High-Stakes Database MigrationCTO Insights: Steering a High-Stakes Database Migration
CTO Insights: Steering a High-Stakes Database Migration
ScyllaDB
 
Cyber Recovery Wargame
Cyber Recovery WargameCyber Recovery Wargame
Cyber Recovery Wargame
Databarracks
 
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
AlexanderRichford
 
ScyllaDB Real-Time Event Processing with CDC
ScyllaDB Real-Time Event Processing with CDCScyllaDB Real-Time Event Processing with CDC
ScyllaDB Real-Time Event Processing with CDC
ScyllaDB
 
DynamoDB to ScyllaDB: Technical Comparison and the Path to Success
DynamoDB to ScyllaDB: Technical Comparison and the Path to SuccessDynamoDB to ScyllaDB: Technical Comparison and the Path to Success
DynamoDB to ScyllaDB: Technical Comparison and the Path to Success
ScyllaDB
 
Discover the Unseen: Tailored Recommendation of Unwatched Content
Discover the Unseen: Tailored Recommendation of Unwatched ContentDiscover the Unseen: Tailored Recommendation of Unwatched Content
Discover the Unseen: Tailored Recommendation of Unwatched Content
ScyllaDB
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
ScyllaDB Leaps Forward with Dor Laor, CEO of ScyllaDB
ScyllaDB Leaps Forward with Dor Laor, CEO of ScyllaDBScyllaDB Leaps Forward with Dor Laor, CEO of ScyllaDB
ScyllaDB Leaps Forward with Dor Laor, CEO of ScyllaDB
ScyllaDB
 
Facilitation Skills - When to Use and Why.pptx
Facilitation Skills - When to Use and Why.pptxFacilitation Skills - When to Use and Why.pptx
Facilitation Skills - When to Use and Why.pptx
Knoldus Inc.
 
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
DanBrown980551
 
Radically Outperforming DynamoDB @ Digital Turbine with SADA and Google Cloud
Radically Outperforming DynamoDB @ Digital Turbine with SADA and Google CloudRadically Outperforming DynamoDB @ Digital Turbine with SADA and Google Cloud
Radically Outperforming DynamoDB @ Digital Turbine with SADA and Google Cloud
ScyllaDB
 
Call Girls Kochi 💯Call Us 🔝 7426014248 🔝 Independent Kochi Escorts Service Av...
Call Girls Kochi 💯Call Us 🔝 7426014248 🔝 Independent Kochi Escorts Service Av...Call Girls Kochi 💯Call Us 🔝 7426014248 🔝 Independent Kochi Escorts Service Av...
Call Girls Kochi 💯Call Us 🔝 7426014248 🔝 Independent Kochi Escorts Service Av...
dipikamodels1
 
CNSCon 2024 Lightning Talk: Don’t Make Me Impersonate My Identity
CNSCon 2024 Lightning Talk: Don’t Make Me Impersonate My IdentityCNSCon 2024 Lightning Talk: Don’t Make Me Impersonate My Identity
CNSCon 2024 Lightning Talk: Don’t Make Me Impersonate My Identity
Cynthia Thomas
 
Guidelines for Effective Data Visualization
Guidelines for Effective Data VisualizationGuidelines for Effective Data Visualization
Guidelines for Effective Data Visualization
UmmeSalmaM1
 
Automation Student Developers Session 3: Introduction to UI Automation
Automation Student Developers Session 3: Introduction to UI AutomationAutomation Student Developers Session 3: Introduction to UI Automation
Automation Student Developers Session 3: Introduction to UI Automation
UiPathCommunity
 
Chapter 5 - Managing Test Activities V4.0
Chapter 5 - Managing Test Activities V4.0Chapter 5 - Managing Test Activities V4.0
Chapter 5 - Managing Test Activities V4.0
Neeraj Kumar Singh
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
UiPathCommunity
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
Enterprise Knowledge
 

Recently uploaded (20)

intra-mart Accel series 2024 Spring updates_En
intra-mart Accel series 2024 Spring updates_Enintra-mart Accel series 2024 Spring updates_En
intra-mart Accel series 2024 Spring updates_En
 
Day 4 - Excel Automation and Data Manipulation
Day 4 - Excel Automation and Data ManipulationDay 4 - Excel Automation and Data Manipulation
Day 4 - Excel Automation and Data Manipulation
 
CTO Insights: Steering a High-Stakes Database Migration
CTO Insights: Steering a High-Stakes Database MigrationCTO Insights: Steering a High-Stakes Database Migration
CTO Insights: Steering a High-Stakes Database Migration
 
Cyber Recovery Wargame
Cyber Recovery WargameCyber Recovery Wargame
Cyber Recovery Wargame
 
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
 
ScyllaDB Real-Time Event Processing with CDC
ScyllaDB Real-Time Event Processing with CDCScyllaDB Real-Time Event Processing with CDC
ScyllaDB Real-Time Event Processing with CDC
 
DynamoDB to ScyllaDB: Technical Comparison and the Path to Success
DynamoDB to ScyllaDB: Technical Comparison and the Path to SuccessDynamoDB to ScyllaDB: Technical Comparison and the Path to Success
DynamoDB to ScyllaDB: Technical Comparison and the Path to Success
 
Discover the Unseen: Tailored Recommendation of Unwatched Content
Discover the Unseen: Tailored Recommendation of Unwatched ContentDiscover the Unseen: Tailored Recommendation of Unwatched Content
Discover the Unseen: Tailored Recommendation of Unwatched Content
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
ScyllaDB Leaps Forward with Dor Laor, CEO of ScyllaDB
ScyllaDB Leaps Forward with Dor Laor, CEO of ScyllaDBScyllaDB Leaps Forward with Dor Laor, CEO of ScyllaDB
ScyllaDB Leaps Forward with Dor Laor, CEO of ScyllaDB
 
Facilitation Skills - When to Use and Why.pptx
Facilitation Skills - When to Use and Why.pptxFacilitation Skills - When to Use and Why.pptx
Facilitation Skills - When to Use and Why.pptx
 
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
 
Radically Outperforming DynamoDB @ Digital Turbine with SADA and Google Cloud
Radically Outperforming DynamoDB @ Digital Turbine with SADA and Google CloudRadically Outperforming DynamoDB @ Digital Turbine with SADA and Google Cloud
Radically Outperforming DynamoDB @ Digital Turbine with SADA and Google Cloud
 
Call Girls Kochi 💯Call Us 🔝 7426014248 🔝 Independent Kochi Escorts Service Av...
Call Girls Kochi 💯Call Us 🔝 7426014248 🔝 Independent Kochi Escorts Service Av...Call Girls Kochi 💯Call Us 🔝 7426014248 🔝 Independent Kochi Escorts Service Av...
Call Girls Kochi 💯Call Us 🔝 7426014248 🔝 Independent Kochi Escorts Service Av...
 
CNSCon 2024 Lightning Talk: Don’t Make Me Impersonate My Identity
CNSCon 2024 Lightning Talk: Don’t Make Me Impersonate My IdentityCNSCon 2024 Lightning Talk: Don’t Make Me Impersonate My Identity
CNSCon 2024 Lightning Talk: Don’t Make Me Impersonate My Identity
 
Guidelines for Effective Data Visualization
Guidelines for Effective Data VisualizationGuidelines for Effective Data Visualization
Guidelines for Effective Data Visualization
 
Automation Student Developers Session 3: Introduction to UI Automation
Automation Student Developers Session 3: Introduction to UI AutomationAutomation Student Developers Session 3: Introduction to UI Automation
Automation Student Developers Session 3: Introduction to UI Automation
 
Chapter 5 - Managing Test Activities V4.0
Chapter 5 - Managing Test Activities V4.0Chapter 5 - Managing Test Activities V4.0
Chapter 5 - Managing Test Activities V4.0
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
 

Lecture6 web design and development

  • 1. [Day Six] Layouts, Head Course: Web Design and Develop Date: 2017/05/17 Lecturer: Mohammad Rafi Haidari
  • 2. Last Lesson Conclusion! • 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?
  • 3. The HTML <head> Element The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. The following tags describe metadata:  <title>  <style>  <meta>  <link>  <script>
  • 4. HTML Layouts <header> - Defines a header for a document or a section <nav> - Defines a container for navigation links <section> - Defines a section in a document <article> - Defines an independent self-contained article <aside> - Defines content aside from the content (like a sidebar) <footer> - Defines a footer for a document or a section
  • 5. HTML Layout Techniques  HTML tables  CSS float property  CSS framework There are four different ways to create multicolumn layouts. Each way has its pros and cons:
  • 6. HTML Layout. Work on last homework as example.
  • 7. The HTML <meta> Element The <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata. Metadata is used by browsers (how to display content), by search engines (keywords), and other web services. Define the character set used: <meta charset="UTF-8"> Define a description of your web page: <meta name="description" content="Free Web tutorials"> Define keywords for search engines: <meta name="keywords" content="HTML, CSS, XML, JavaScript">
  • 8. Lesson Conclusion Game! • Name two metadata? • What come in your mind by the word Layouts? • What is the purpose of <header> and <nav>? • What is the purpose of <article> and <section>? • What is the purpose of <aside> and <footer>?
  • 9. ADD 2 matchsticks to the equation above to make it true.
  翻译: