SlideShare a Scribd company logo
www.afghanhost.af - info@afghanhost.af
Instructor: Mohammad Rafi Haidari25-May-2014
HTML (Day 3)
 Tables
 Blocks
 Layouts
HTML Tables
Tables are defined with the <table> tag.
A table is divided into rows with the <tr> tag. (tr stands for table row)
A row is divided into data cells with the <td> tag. (td stands for table data)
A row can also be divided into headings with the <th> tag. (th stands for table
heading)
The <td> elements are the data containers in the table.
The <td> elements can contain all sorts of HTML elements like text, images, lists,
other tables, etc.
The width of a table can be defined using CSS.
HTML Tables
<table>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML Tables(Border)
Table with a Border Attribute
If you do not specify a border for the table, it will be displayed without
borders.
<table border="1" >
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML Tables(Headings)
Table Headings
Table headings are defined with the <th> tag.
By default, all major browsers display table headings as bold and centered:
<table border="1" >
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML Blocks
HTML <div> Element
The HTML <div> element is a block level element that can be used as a
container for grouping other HTML elements.
The <div> element has no special meaning. Except that, because it is a block
level element, the browser will display a line break before and after it.
When used together with CSS, the <div> element can be used to set style
attributes to large blocks of content.
Another common use of the <div> element, is for document layout. It replaces
the "old way" of defining layout using tables. Using <table> elements for
layout is not the correct use of <table> . The purpose of the <table> element is
to display tabular data.
<div style="color:gray">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
HTML Blocks
HTML <span> Element
The HTML <span> element is an inline element that can be used as a container
for text.
The <span> element has no special meaning.
When used together with CSS, the <span> element can be used to set style
attributes to parts of the text.
<p>My son has <span style="color:blue">blue</span> eyes.</p>
HTML Layouts
Most websites have put their content in multiple columns (formatted like a
magazine or newspaper).
Multiple columns are created by using <div> or <table> elements. CSS are
used to position elements, or to create backgrounds or colorful look for the
pages.
HTML Layouts - Using <div> Elements
The div element is a block level element used for grouping HTML elements.
The following example uses five div elements to create a multiple column
layout, creating the same result as in the previous example: (Next slide)
HTML Layouts
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-
color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-
color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
HTML Layouts
The HTML code above will produce the following result:
HTML Layouts
HTML Layouts - Using Tables
A simple way of creating layouts is by using the HTML <table> tag.
Multiple columns are created by using <div> or <table> elements. CSS are used to
position elements, or
The following example uses a table with 3 rows and 2 columns - the first and last row
spans both columns using the colspan attribute: to create backgrounds or colorful look
for the pages.
HTML Layouts
<html>
<body>
<table width="500">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">Content goes here</td></tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">Copyright ©
W3Schools.com</td></tr>
</table>
</body>
</html>
HTML Layouts
The HTML code above will produce the following result:
Html_Day_Three(W3Schools)

More Related Content

What's hot

HTML Table
HTML TableHTML Table
HTML Table
Rao Mubashar
 
Tables and Forms in HTML
Tables and Forms in HTMLTables and Forms in HTML
Tables and Forms in HTML
Marlon Jamera
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
KushagraChadha1
 
Html tutorials by www.dmdiploma.com
Html tutorials by www.dmdiploma.comHtml tutorials by www.dmdiploma.com
Html tutorials by www.dmdiploma.com
ShwetaAggarwal56
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTML
Aarti P
 
Css
CssCss
Css Basics
Css BasicsCss Basics
Css Basics
Jay Patel
 
CSS in HTML
CSS in HTMLCSS in HTML
CSS in HTML
Vineet Kumar Saini
 
Html table tags
Html table tagsHtml table tags
Html table tags
eShikshak
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
Joseph Gabriel
 
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)
Jishan Ali
 
Html training slide
Html training slideHtml training slide
Html training slide
villupuramtraining
 
HTML Table Tags
HTML Table TagsHTML Table Tags
HTML Table Tags
Kainat Ilyas
 
CSS notes
CSS notesCSS notes
CSS notes
Rajendra Prasad
 
Lecture3
Lecture3Lecture3
Lecture3
Lee Lundrigan
 
Cascading Style Sheet | CSS
Cascading Style Sheet | CSSCascading Style Sheet | CSS
Cascading Style Sheet | CSS
MSA Technosoft
 
Css introduction
Css introductionCss introduction
Css introduction
Sridhar P
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
Michael Jhon
 
Css introduction
Css  introductionCss  introduction
Css introduction
vishnu murthy
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
Sanjeev Kumar
 

What's hot (20)

HTML Table
HTML TableHTML Table
HTML Table
 
Tables and Forms in HTML
Tables and Forms in HTMLTables and Forms in HTML
Tables and Forms in HTML
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
 
Html tutorials by www.dmdiploma.com
Html tutorials by www.dmdiploma.comHtml tutorials by www.dmdiploma.com
Html tutorials by www.dmdiploma.com
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTML
 
Css
CssCss
Css
 
Css Basics
Css BasicsCss Basics
Css Basics
 
CSS in HTML
CSS in HTMLCSS in HTML
CSS in HTML
 
Html table tags
Html table tagsHtml table tags
Html table tags
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)
 
Html training slide
Html training slideHtml training slide
Html training slide
 
HTML Table Tags
HTML Table TagsHTML Table Tags
HTML Table Tags
 
CSS notes
CSS notesCSS notes
CSS notes
 
Lecture3
Lecture3Lecture3
Lecture3
 
Cascading Style Sheet | CSS
Cascading Style Sheet | CSSCascading Style Sheet | CSS
Cascading Style Sheet | CSS
 
Css introduction
Css introductionCss introduction
Css introduction
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
Css introduction
Css  introductionCss  introduction
Css introduction
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 

Viewers also liked

Historia juegos olimpicos
Historia juegos olimpicosHistoria juegos olimpicos
Historia juegos olimpicos
anagarridoaroz99
 
เกรดมัธยมปลาย
เกรดมัธยมปลายเกรดมัธยมปลาย
เกรดมัธยมปลายsarwsw
 
Ssrn id2587282
Ssrn id2587282Ssrn id2587282
Ssrn id2587282
Abhishek Kumar
 
Захисник України: бібліографічний список літератури
Захисник України: бібліографічний список літературиЗахисник України: бібліографічний список літератури
Захисник України: бібліографічний список літератури
РОМЦ БКР
 
Провісники нашої волі. З історії гімну України
Провісники нашої волі. З історії гімну УкраїниПровісники нашої волі. З історії гімну України
Провісники нашої волі. З історії гімну України
РОМЦ БКР
 
Us healthcare industry upload
Us healthcare industry uploadUs healthcare industry upload
Us healthcare industry upload
Tony Richards
 
Research Paper
Research PaperResearch Paper
Research Paper
Shannon Chambers
 
Historia juegos olimpicos
Historia juegos olimpicosHistoria juegos olimpicos
Historia juegos olimpicos
anagarridoaroz99
 
Prevencions%20i%20lesions%2
Prevencions%20i%20lesions%2Prevencions%20i%20lesions%2
Prevencions%20i%20lesions%2GuilleJackson123
 
Open Educational Resources: what is this all about?
Open Educational Resources: what is this all about?Open Educational Resources: what is this all about?
Open Educational Resources: what is this all about?
Fiona Wallace
 
Зарубіжні твори ювіляри 2015 року
Зарубіжні твори ювіляри 2015 рокуЗарубіжні твори ювіляри 2015 року
Зарубіжні твори ювіляри 2015 року
РОМЦ БКР
 
Prevencionsilesions
PrevencionsilesionsPrevencionsilesions
Prevencionsilesions
GuilleJackson123
 

Viewers also liked (17)

Historia juegos olimpicos
Historia juegos olimpicosHistoria juegos olimpicos
Historia juegos olimpicos
 
เกรดมัธยมปลาย
เกรดมัธยมปลายเกรดมัธยมปลาย
เกรดมัธยมปลาย
 
Ssrn id2587282
Ssrn id2587282Ssrn id2587282
Ssrn id2587282
 
K4
K4K4
K4
 
Захисник України: бібліографічний список літератури
Захисник України: бібліографічний список літературиЗахисник України: бібліографічний список літератури
Захисник України: бібліографічний список літератури
 
Провісники нашої волі. З історії гімну України
Провісники нашої волі. З історії гімну УкраїниПровісники нашої волі. З історії гімну України
Провісники нашої волі. З історії гімну України
 
Us healthcare industry upload
Us healthcare industry uploadUs healthcare industry upload
Us healthcare industry upload
 
Research Paper
Research PaperResearch Paper
Research Paper
 
Historia juegos olimpicos
Historia juegos olimpicosHistoria juegos olimpicos
Historia juegos olimpicos
 
Pat5
Pat5Pat5
Pat5
 
Blog
BlogBlog
Blog
 
Prevencions%20i%20lesions%2
Prevencions%20i%20lesions%2Prevencions%20i%20lesions%2
Prevencions%20i%20lesions%2
 
Open Educational Resources: what is this all about?
Open Educational Resources: what is this all about?Open Educational Resources: what is this all about?
Open Educational Resources: what is this all about?
 
Зарубіжні твори ювіляри 2015 року
Зарубіжні твори ювіляри 2015 рокуЗарубіжні твори ювіляри 2015 року
Зарубіжні твори ювіляри 2015 року
 
tugas 8
tugas 8tugas 8
tugas 8
 
Prevencionsilesions
PrevencionsilesionsPrevencionsilesions
Prevencionsilesions
 
Blog
BlogBlog
Blog
 

Similar to Html_Day_Three(W3Schools)

Html Table
Html TableHtml Table
Html Table
nehashinde41
 
Session on common html table
Session on common html tableSession on common html table
Session on common html table
Rahul Kumar
 
Intodcution to Html
Intodcution to HtmlIntodcution to Html
Intodcution to Html
Taha Malampatti
 
belajar HTML 3
belajar HTML 3belajar HTML 3
Html html html html html html html html html
Html html html html html html html html htmlHtml html html html html html html html html
Html html html html html html html html html
riturajbhujel103
 
Unit 1wt
Unit 1wtUnit 1wt
Unit 1wt
vamsi krishna
 
Lect# 1 html part ii
Lect# 1 html part iiLect# 1 html part ii
Lect# 1 html part ii
MuhammadAbdulSattarC
 
Unit 1wt
Unit 1wtUnit 1wt
Unit 1wt
vamsitricks
 
Html tables
Html tablesHtml tables
PPT-203105353-1.pdf
PPT-203105353-1.pdfPPT-203105353-1.pdf
PPT-203105353-1.pdf
PINTUCHAUHAN8
 
HTML Notes for new begginers for HTML CSS
HTML Notes for new begginers for HTML CSSHTML Notes for new begginers for HTML CSS
HTML Notes for new begginers for HTML CSS
RajChauhan226834
 
Web Design Basics: HTML Essentials for begginer
Web Design Basics: HTML Essentials for begginerWeb Design Basics: HTML Essentials for begginer
Web Design Basics: HTML Essentials for begginer
RajChauhan226834
 
HTML Tables in Omeka
HTML Tables in OmekaHTML Tables in Omeka
HTML Tables in Omeka
American Antiquarian Society
 
Html 5
Html 5Html 5
29042023.pptx
29042023.pptx29042023.pptx
29042023.pptx
srinivasa gowda
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
DipaliJagtap6
 
utsav1.pptxjxnclbshjdcn;kJDucbnsD>NVzljfbmlzl
utsav1.pptxjxnclbshjdcn;kJDucbnsD>NVzljfbmlzlutsav1.pptxjxnclbshjdcn;kJDucbnsD>NVzljfbmlzl
utsav1.pptxjxnclbshjdcn;kJDucbnsD>NVzljfbmlzl
utsavsingh265
 
Html
HtmlHtml
Html
NithyaD5
 
Intro webtechstc
Intro webtechstcIntro webtechstc
Intro webtechstc
cmcsubho
 
HTML CODES
HTML CODESHTML CODES

Similar to Html_Day_Three(W3Schools) (20)

Html Table
Html TableHtml Table
Html Table
 
Session on common html table
Session on common html tableSession on common html table
Session on common html table
 
Intodcution to Html
Intodcution to HtmlIntodcution to Html
Intodcution to Html
 
belajar HTML 3
belajar HTML 3belajar HTML 3
belajar HTML 3
 
Html html html html html html html html html
Html html html html html html html html htmlHtml html html html html html html html html
Html html html html html html html html html
 
Unit 1wt
Unit 1wtUnit 1wt
Unit 1wt
 
Lect# 1 html part ii
Lect# 1 html part iiLect# 1 html part ii
Lect# 1 html part ii
 
Unit 1wt
Unit 1wtUnit 1wt
Unit 1wt
 
Html tables
Html tablesHtml tables
Html tables
 
PPT-203105353-1.pdf
PPT-203105353-1.pdfPPT-203105353-1.pdf
PPT-203105353-1.pdf
 
HTML Notes for new begginers for HTML CSS
HTML Notes for new begginers for HTML CSSHTML Notes for new begginers for HTML CSS
HTML Notes for new begginers for HTML CSS
 
Web Design Basics: HTML Essentials for begginer
Web Design Basics: HTML Essentials for begginerWeb Design Basics: HTML Essentials for begginer
Web Design Basics: HTML Essentials for begginer
 
HTML Tables in Omeka
HTML Tables in OmekaHTML Tables in Omeka
HTML Tables in Omeka
 
Html 5
Html 5Html 5
Html 5
 
29042023.pptx
29042023.pptx29042023.pptx
29042023.pptx
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
utsav1.pptxjxnclbshjdcn;kJDucbnsD>NVzljfbmlzl
utsav1.pptxjxnclbshjdcn;kJDucbnsD>NVzljfbmlzlutsav1.pptxjxnclbshjdcn;kJDucbnsD>NVzljfbmlzl
utsav1.pptxjxnclbshjdcn;kJDucbnsD>NVzljfbmlzl
 
Html
HtmlHtml
Html
 
Intro webtechstc
Intro webtechstcIntro webtechstc
Intro webtechstc
 
HTML CODES
HTML CODESHTML CODES
HTML CODES
 

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
 
Lecture6 web design and development
Lecture6 web design and developmentLecture6 web design and development
Lecture6 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
 
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_Two(W3Schools)
HTML_Day_Two(W3Schools)HTML_Day_Two(W3Schools)
HTML_Day_Two(W3Schools)
Rafi Haidari
 

More from Rafi Haidari (16)

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
 
Lecture6 web design and development
Lecture6 web design and developmentLecture6 web design and development
Lecture6 web design and development
 
Lecture5 web design and development
Lecture5 web design and developmentLecture5 web design and development
Lecture5 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_Two(W3Schools)
HTML_Day_Two(W3Schools)HTML_Day_Two(W3Schools)
HTML_Day_Two(W3Schools)
 

Recently uploaded

Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Neo4j
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 

Recently uploaded (20)

Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 

Html_Day_Three(W3Schools)

  • 1. www.afghanhost.af - info@afghanhost.af Instructor: Mohammad Rafi Haidari25-May-2014 HTML (Day 3)  Tables  Blocks  Layouts
  • 2. HTML Tables Tables are defined with the <table> tag. A table is divided into rows with the <tr> tag. (tr stands for table row) A row is divided into data cells with the <td> tag. (td stands for table data) A row can also be divided into headings with the <th> tag. (th stands for table heading) The <td> elements are the data containers in the table. The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc. The width of a table can be defined using CSS.
  • 4. HTML Tables(Border) Table with a Border Attribute If you do not specify a border for the table, it will be displayed without borders. <table border="1" > <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
  • 5. HTML Tables(Headings) Table Headings Table headings are defined with the <th> tag. By default, all major browsers display table headings as bold and centered: <table border="1" > <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
  • 6. HTML Blocks HTML <div> Element The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements. The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it. When used together with CSS, the <div> element can be used to set style attributes to large blocks of content. Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using <table> elements for layout is not the correct use of <table> . The purpose of the <table> element is to display tabular data. <div style="color:gray"> <h3>This is a heading</h3> <p>This is a paragraph.</p> </div>
  • 7. HTML Blocks HTML <span> Element The HTML <span> element is an inline element that can be used as a container for text. The <span> element has no special meaning. When used together with CSS, the <span> element can be used to set style attributes to parts of the text. <p>My son has <span style="color:blue">blue</span> eyes.</p>
  • 8. HTML Layouts Most websites have put their content in multiple columns (formatted like a magazine or newspaper). Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages. HTML Layouts - Using <div> Elements The div element is a block level element used for grouping HTML elements. The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example: (Next slide)
  • 9. HTML Layouts <html> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <div id="menu" style="background- color:#FFD700;height:200px;width:100px;float:left;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background- color:#EEEEEE;height:200px;width:400px;float:left;"> Content goes here</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> Copyright © W3Schools.com</div> </div> </body> </html>
  • 10. HTML Layouts The HTML code above will produce the following result:
  • 11. HTML Layouts HTML Layouts - Using Tables A simple way of creating layouts is by using the HTML <table> tag. Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute: to create backgrounds or colorful look for the pages.
  • 12. HTML Layouts <html> <body> <table width="500"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>Main Title of Web Page</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#EEEEEE;height:200px;width:400px;">Content goes here</td></tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;">Copyright © W3Schools.com</td></tr> </table> </body> </html>
  • 13. HTML Layouts The HTML code above will produce the following result: