Page 9 - Learn To Use HTML and CSS

So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page ix

Illustration Index

Free
Illustration 1: What goes into a Website...................................................................................................5
Illustration 2: My First Webpage...............................................................................................................8
Illustration 3: Russian Matryoshka dolls.................................................................................................10
Illustration 4: Including an Image on Your Page.....................................................................................17
Illustration 5: Page with Audio and Text..................................................................................................21
Illustration 6: Adding Video to Your Page...............................................................................................23
eBook
Illustration 7: My Colorful Page..............................................................................................................25
Illustration 8: Changing Fonts..................................................................................................................28
Illustration 9: Semantic Blocks................................................................................................................35
Illustration 10: Page with Flow................................................................................................................36
Illustration 11: Page with Phrasing.........................................................................................................39
Illustration 12: Uniform Resource Locator (URL)..................................................................................43
Edition
Illustration 13: Simple Page with Links...................................................................................................46
Illustration 14: Page with a Relative Link................................................................................................47
Illustration 15: Page with Many Types of Anchors..................................................................................49
Illustration 16: About Page......................................................................................................................50
Illustration 17: Page with External Style Sheet.......................................................................................55
Illustration 18: CSS Box Model...............................................................................................................59
Please support this work at
Illustration 19: CSS with Margins and Padding.......................................................................................64
Illustration 20: Centering Images and Text..............................................................................................67
Illustration 21: Ordered and Unordered lists............................................................................................72
Illustration 22: A Definition List (Glossary)............................................................................................74
http://syw2l.org
Illustration 23: Table with Caption and Headers.....................................................................................76
Illustration 24: Table with Row and Column Spanning...........................................................................78
Illustration 25: Floating Elements............................................................................................................84
Free
Illustration 26: Absolute Positioning an Element....................................................................................87
Illustration 27: Page with Background Images........................................................................................90
Illustration 28: Simple 2 Column Grid Layout.......................................................................................94
Illustration 29: Layout of the Three Grids..............................................................................................95
Illustration 30: Second Grid Example - Multiple Grids..........................................................................96
Illustration 31: Simple CSS Selectors....................................................................................................101
eBook
Illustration 32: CSS Combinators..........................................................................................................104
Illustration 33: Attribute Selector...........................................................................................................106
Illustration 34: Page with Media Rules - Screen...................................................................................111
Illustration 35: Page with Media Rules - Printed..................................................................................111
Illustration 36: Common Screen Sizes...................................................................................................112
Illustration 37: Page for Many Devices - Phone...................................................................................115
Edition
Illustration 38: Page for Many Devices - Tablet...................................................................................117
Illustration 39: Page for Many Devices - Wide.....................................................................................119
Illustration 40: Data Sent to a Server....................................................................................................122
Illustration 41: Company Picnic - Registration Form...........................................................................126
Illustration 42: Company Picnic - Registration Form Data..................................................................127
Illustration 43: Sample Form with Elements.........................................................................................130
Illustration 44: Sample Form - Data.....................................................................................................130