Basics of Web Design
description
Transcript of Basics of Web Design
![Page 1: Basics of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022070404/56813c24550346895da59e35/html5/thumbnails/1.jpg)
Basics of Basics of Web Web
DesignDesign
1Copyright © 2016 Pearson Education, Inc., Hoboken NJ
![Page 2: Basics of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022070404/56813c24550346895da59e35/html5/thumbnails/2.jpg)
Learning Outcomes
2Copyright © 2016 Pearson Education, Inc., Hoboken NJ
![Page 3: Basics of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022070404/56813c24550346895da59e35/html5/thumbnails/3.jpg)
HTML Table
3Copyright © 2016 Pearson Education, Inc., Hoboken NJ
![Page 4: Basics of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022070404/56813c24550346895da59e35/html5/thumbnails/4.jpg)
HTML Table Elements
4Copyright © 2016 Pearson Education, Inc., Hoboken NJ
![Page 5: Basics of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022070404/56813c24550346895da59e35/html5/thumbnails/5.jpg)
The Table Element<table>
5Copyright © 2016 Pearson Education, Inc., Hoboken NJ
![Page 6: Basics of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022070404/56813c24550346895da59e35/html5/thumbnails/6.jpg)
HTMLTable Example
6
Birthday List
Copyright © 2016 Pearson Education, Inc., Hoboken NJ
![Page 7: Basics of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022070404/56813c24550346895da59e35/html5/thumbnails/7.jpg)
HTMLTable Example 2
7
Using the <th> Element
Copyright © 2016 Pearson Education, Inc., Hoboken NJ
![Page 8: Basics of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022070404/56813c24550346895da59e35/html5/thumbnails/8.jpg)
8Copyright © 2016 Pearson Education, Inc., Hoboken NJ
![Page 9: Basics of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022070404/56813c24550346895da59e35/html5/thumbnails/9.jpg)
HTMLcolspan Attribute
9Copyright © 2016 Pearson Education, Inc., Hoboken NJ
![Page 10: Basics of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022070404/56813c24550346895da59e35/html5/thumbnails/10.jpg)
HTMLrowspan Attribute
10Copyright © 2016 Pearson Education, Inc., Hoboken NJ
![Page 11: Basics of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022070404/56813c24550346895da59e35/html5/thumbnails/11.jpg)
Accessibility and Tables
Copyright © 2016 Pearson Education, Inc., Hoboken NJ
![Page 12: Basics of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022070404/56813c24550346895da59e35/html5/thumbnails/12.jpg)
Accessibility:headers & id
Attributes<table><caption> Word Schedule</caption><tr> <th id="day">Day</th> <th id="hours">Hours</th></tr><tr> <td headers="day">Monday</td> <td headers="hours">4</td></tr><tr> <td headers="day">Tuesday</td> <td headers="hours">3</td></tr><tr> <td headers="day">Total</td> <td headers="hours">7</td></tr></table>
Copyright © 2016 Pearson Education, Inc., Hoboken NJ
![Page 13: Basics of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022070404/56813c24550346895da59e35/html5/thumbnails/13.jpg)
Using CSS to Style a TableHTML
AttributeCSS Property
align Align a table: table { width: 75%; margin: auto; }Align within a table cell: text-align
bgcolor background-color
cellpadding padding
cellspacing border-spacing or border-collapse
height height
valign vertical-align
width width
border border, border-style, or border-spacing
--- background-image
--- caption-side
Copyright © 2016 Pearson Education, Inc., Hoboken NJ
![Page 14: Basics of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022070404/56813c24550346895da59e35/html5/thumbnails/14.jpg)
Pseudo-class Purpose
:first-of-type Applies to the first element of the specified type.
:first-child Applies to the first child of an element. (CSS2
selector)
:last-of-type Applies to the last element of the specified type.
:last-child Applies to the last child of an element
:nth-of-type(n) Applies to the “nth” element of the specified
type.
Values: a number, odd, or even
p:nth-of-type(odd) {background: #ff0000;}14Copyright © 2016 Pearson Education, Inc., Hoboken NJ
![Page 15: Basics of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022070404/56813c24550346895da59e35/html5/thumbnails/15.jpg)
Table Row Groups
<table><caption>Work Schedule</caption> <thead> <tr> <th>Day</th> <th>Hours</th> </tr> </thead> <tbody> <tr> <td>Monday</td> <td>4</td> </tr> <tr> <td>Tuesday</td> <td>3</td> </tr> </tbody> <tfoot> <tr> <td>Total</td> <td>7</td> </tr> </tfoot></table>
Copyright © 2016 Pearson Education, Inc., Hoboken NJ
![Page 16: Basics of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022070404/56813c24550346895da59e35/html5/thumbnails/16.jpg)
Summary
16Copyright © 2016 Pearson Education, Inc., Hoboken NJ