SlideShare uma empresa Scribd logo
1 de 15
Introduction to HTML and
CSS
Lecture 3
Goals
CSS ID

CSS Border-box Model

HTML: Tables

  Tables

  Forms

Navigation Bars

Finish the Web Page
CSS IDs

Used for single unique elements

Use the ID attribute of an HTML element to specify
it’s ID

Name the selector by preceding it with a # symbol
CSS Box Model




       THANKS W3SCHOOLS.COM !!
CSS Box Model Cont...
Margin: The area around the outside of the border

  Has nothing to do with background color

Border: The border that goes around the padding
and the content

Padding: The area around the inside of the border.
This area separates the border and content.

  This is affected by the background color

Content: The content area
Box Model Notes

When you define the width and height of an
element you are specifying the size of its content
area

All HTML elements can be considered as boxes

The box model allows us to stylistically space
elements in relation to each other
HTML Tables

Used to display tabular data (ONLY!)

  Table based layout are in the past people...

Tables are divided into rows and each row is
divided into cells
HTML Tables Cont...

<th>: table header wrapped by <tr> tag

  These will appear bold

<tr>: table row wraps <th> and <td> tags

<td>: Table data is wrapped by <tr> tag

  A data cell
HTML Tables Cont...
<table border="1">
 <tr>
   <td><th>Heading 1</th></td>
   <td><th>Heading 2</ht></td>
 </tr>
 <tr>
   <td>row 1, cell 1</td>
   <td>row 1, cell 2</td>
 </tr>
 <tr>
   <td>row 2, cell 1</td>
   <td>row 2, cell 2</td>
 </tr>
</table>
HTML Forms
Used to pass data to a server

Common elements found in forms

  Text fields

  Checkbox

  Radio-buttons

  Selection Boxes

  Text Areas
HTML Forms Example
Navigation Bars


Unordered Lists are the standard html structure
used when building a navigation bar

Give the <li> a width and float it left
Navigation Example
Finish the Web Page
Helpful links

http://www.w3schools.com/html/html_forms.asp

http://www.w3schools.com/html/html_tables.asp

http://www.w3schools.com/css/css_id_class.asp

http://www.w3schools.com/css/css_navbar.asp

Mais conteúdo relacionado

Mais procurados

Lession 5 the columns of a table
Lession 5 the columns of a tableLession 5 the columns of a table
Lession 5 the columns of a table
Đỗ Đức Hùng
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTML
Aarti P
 
Lesson Four PowerPoint
Lesson Four PowerPointLesson Four PowerPoint
Lesson Four PowerPoint
markcoleman31
 

Mais procurados (20)

Lession 5 the columns of a table
Lession 5 the columns of a tableLession 5 the columns of a table
Lession 5 the columns of a table
 
Computer language - Html tables
Computer language - Html tablesComputer language - Html tables
Computer language - Html tables
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTML
 
Html tables
Html tablesHtml tables
Html tables
 
TYPES OF SHAPES
TYPES OF SHAPESTYPES OF SHAPES
TYPES OF SHAPES
 
6
66
6
 
Libre Office Writer Lesson 3: Using Styles and Templates
Libre Office Writer Lesson 3: Using Styles and TemplatesLibre Office Writer Lesson 3: Using Styles and Templates
Libre Office Writer Lesson 3: Using Styles and Templates
 
MS Excel - Charts
MS Excel - ChartsMS Excel - Charts
MS Excel - Charts
 
Solid geometry
Solid geometrySolid geometry
Solid geometry
 
Tutorial for EXCEL.pptx
Tutorial for EXCEL.pptxTutorial for EXCEL.pptx
Tutorial for EXCEL.pptx
 
Libre Office Writer Lesson 1
Libre Office Writer Lesson 1Libre Office Writer Lesson 1
Libre Office Writer Lesson 1
 
Pc package i excel
Pc package i   excelPc package i   excel
Pc package i excel
 
Lecture 5 html table
Lecture 5 html tableLecture 5 html table
Lecture 5 html table
 
Std 10 Computer Chapter 4 List and Table Handling in HTML(Part 1 List in HTML)
Std 10 Computer Chapter 4 List and Table Handling in HTML(Part 1 List in HTML)Std 10 Computer Chapter 4 List and Table Handling in HTML(Part 1 List in HTML)
Std 10 Computer Chapter 4 List and Table Handling in HTML(Part 1 List in HTML)
 
Microteaching
Microteaching Microteaching
Microteaching
 
MS 2003
MS 2003MS 2003
MS 2003
 
Lesson Four PowerPoint
Lesson Four PowerPointLesson Four PowerPoint
Lesson Four PowerPoint
 
HTML Tables
HTML TablesHTML Tables
HTML Tables
 
Css selectors
Css selectorsCss selectors
Css selectors
 
HTML TABLES
HTML TABLESHTML TABLES
HTML TABLES
 

Destaque

Introduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignIntroduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesign
ipmindthegap
 
Interactive Graphics using Javascript, HTML5 and CSS3
Interactive Graphics using Javascript, HTML5 and CSS3Interactive Graphics using Javascript, HTML5 and CSS3
Interactive Graphics using Javascript, HTML5 and CSS3
Lee Lundrigan
 
CSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box ModelCSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box Model
jamiecavanaugh
 
5.1 css box model
5.1 css box model5.1 css box model
5.1 css box model
Bulldogs83
 

Destaque (20)

Google's Principle's of Mobile Website Design
Google's Principle's of Mobile Website DesignGoogle's Principle's of Mobile Website Design
Google's Principle's of Mobile Website Design
 
Introduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignIntroduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesign
 
Next Steps in Responsive Design
Next Steps in Responsive DesignNext Steps in Responsive Design
Next Steps in Responsive Design
 
Interactive Graphics using Javascript, HTML5 and CSS3
Interactive Graphics using Javascript, HTML5 and CSS3Interactive Graphics using Javascript, HTML5 and CSS3
Interactive Graphics using Javascript, HTML5 and CSS3
 
Webdesign New
Webdesign NewWebdesign New
Webdesign New
 
10 Design and Layout Principles Guaranteed to Improve Your Website V2
10 Design and Layout Principles Guaranteed to Improve Your Website V210 Design and Layout Principles Guaranteed to Improve Your Website V2
10 Design and Layout Principles Guaranteed to Improve Your Website V2
 
CSS Dasar #6 : Background
CSS Dasar #6 : BackgroundCSS Dasar #6 : Background
CSS Dasar #6 : Background
 
CSS Layout Techniques
CSS Layout TechniquesCSS Layout Techniques
CSS Layout Techniques
 
How to Make HTML and CSS Files
How to Make HTML and CSS FilesHow to Make HTML and CSS Files
How to Make HTML and CSS Files
 
CSS Layouting #5 : Position
CSS Layouting #5 : PositionCSS Layouting #5 : Position
CSS Layouting #5 : Position
 
CSS Box Model Presentation
CSS Box Model PresentationCSS Box Model Presentation
CSS Box Model Presentation
 
CSS Box Model
CSS Box ModelCSS Box Model
CSS Box Model
 
Css box model
Css  box modelCss  box model
Css box model
 
CSS Layouting #3 : Box Model
CSS Layouting #3 : Box ModelCSS Layouting #3 : Box Model
CSS Layouting #3 : Box Model
 
CSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box ModelCSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box Model
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
 
5.1 css box model
5.1 css box model5.1 css box model
5.1 css box model
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
 
10 Design & Layout Principles Guaranteed To Improve
10 Design & Layout Principles Guaranteed To Improve10 Design & Layout Principles Guaranteed To Improve
10 Design & Layout Principles Guaranteed To Improve
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
 

Semelhante a Lecture3

web unit 2_4338494_2023_08_14_23_11.pptx
web unit 2_4338494_2023_08_14_23_11.pptxweb unit 2_4338494_2023_08_14_23_11.pptx
web unit 2_4338494_2023_08_14_23_11.pptx
Chan24811
 

Semelhante a Lecture3 (20)

CSS
CSSCSS
CSS
 
HTML Tables.ppt
HTML Tables.pptHTML Tables.ppt
HTML Tables.ppt
 
HTML Basic
HTML BasicHTML Basic
HTML Basic
 
Internet and Web Technology (CLASS-3) [HTML & CSS]
Internet and Web Technology (CLASS-3) [HTML & CSS] Internet and Web Technology (CLASS-3) [HTML & CSS]
Internet and Web Technology (CLASS-3) [HTML & CSS]
 
HTML (Hyper Text Markup Language) by Mukesh
HTML (Hyper Text Markup Language) by MukeshHTML (Hyper Text Markup Language) by Mukesh
HTML (Hyper Text Markup Language) by Mukesh
 
Organizing Content with Lists and Tables
Organizing Content with Lists and TablesOrganizing Content with Lists and Tables
Organizing Content with Lists and Tables
 
WEP4 and 5.pptx
WEP4 and 5.pptxWEP4 and 5.pptx
WEP4 and 5.pptx
 
29042023.pptx
29042023.pptx29042023.pptx
29042023.pptx
 
Html_Day_Three(W3Schools)
Html_Day_Three(W3Schools)Html_Day_Three(W3Schools)
Html_Day_Three(W3Schools)
 
HTML CSS.pdf
HTML CSS.pdfHTML CSS.pdf
HTML CSS.pdf
 
Lecture4 web design and development
Lecture4 web design and developmentLecture4 web design and development
Lecture4 web design and development
 
Table and Form HTML&CSS
Table and Form HTML&CSSTable and Form HTML&CSS
Table and Form HTML&CSS
 
CSS - LinkedIn
CSS - LinkedInCSS - LinkedIn
CSS - LinkedIn
 
CSS Part I
CSS Part ICSS Part I
CSS Part I
 
Html and css
Html and cssHtml and css
Html and css
 
web unit 2_4338494_2023_08_14_23_11.pptx
web unit 2_4338494_2023_08_14_23_11.pptxweb unit 2_4338494_2023_08_14_23_11.pptx
web unit 2_4338494_2023_08_14_23_11.pptx
 
Html Table
Html TableHtml Table
Html Table
 
Ia css
Ia  cssIa  css
Ia css
 
PPT-203105353-1.pdf
PPT-203105353-1.pdfPPT-203105353-1.pdf
PPT-203105353-1.pdf
 
Html starting
Html startingHtml starting
Html starting
 

Último

Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
PECB
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Krashi Coaching
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
 

Último (20)

Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Disha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfDisha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdf
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
General AI for Medical Educators April 2024
General AI for Medical Educators April 2024General AI for Medical Educators April 2024
General AI for Medical Educators April 2024
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajan
 

Lecture3

Notas do Editor