This document provides an overview of HTML and CSS content covered in a web development class. It includes slides on topics like the structure of HTML pages, common HTML tags, lists, links, images, and tables. It also discusses introducing CSS and how to work with CSS selectors and properties. The slides are from a textbook on JavaScript and are copyrighted. Homework assignments are mentioned, including refactoring CSS code and applying styles to a table.
5. Recap
• Introductions
• Class Objectives
• XAMPP Review
• Stuff about WWW & HTML
• HTML Crash Course sections
– Introduction to HTML
– How to code a Web Page (partial)
6. Agenda
• Continue HTML Crash Course sections
– How to code a Web Page
– How to code tables
• CSS Crash Course sections
– Introduction to CSS
– How to work with CSS
– How to code selectors
– How to work with text & lists
16. A little more about Lists
1. Go to a breakfast meeting. <ol>
2. Get a haircut at lunch. <li>Go to a breakfast meeting.</li>
3. Go shopping after work and <li>Get a haircut at lunch.</li>
buy: <li>Go shopping after work and buy:
• French’s Frogs’ Legs <ul>
• Spamburger Helper <li>French's Frogs' Legs</li>
• Chemical Cola <li>Spamburger Helper</li>
• Bucket of Lowfat Lard <li>Chemical Cola</li>
<li>Bucket of Lowfat Lard</li>
</ul>
</li>
</ol>
31. More on Document Relative Links
Document-relative links use directions from the source page to the destination
page.
Creating hyperlinks from sourcepage.html to other pages in the
site when Destination page is in the same directory folder as
source page
<a href="page1.html">Go To Page 1</a>
Adapted from MediaCollege.com
32. More on Document Relative Links
Document-relative links use directions from the source page to the destination
page.
Creating hyperlinks from sourcepage.html to other pages in the
site when Destination page is in a folder inside the source
page's folder
<a href="directory2/page2.html">Go To Page 2</a>
Adapted from MediaCollege.com
33. More on Document Relative Links
Document-relative links use directions from the source page to the destination
page.
Creating hyperlinks from sourcepage.html to other pages in the
site when destination page is in a folder outside the source
page's folder using special instruction (../)
<a href="../directory3/page3.html">Go To Page 3</a>
<a href="../../index.html">Go To The Index Page</a>
Adapted from MediaCollege.com
34. Site-Root Relative Links
Site-root-relative links use a single forward-slash ( / ) to signify the instruction
The link begins at the same level as your domain (mysite.com)
and works down the path
<a href="/main-directory/directory4/page4.html">Go To
Page 4</a>
Adapted from MediaCollege.com
48. A little more on Tables
Tables are built horizontally, one row at a time
– Rows get divided into columns
The content of a table is not shown until the entire table is
loaded
– If you have extremely long pages, you should divide it into two or
more tables - allows the user to start reading the upper content while
the rest of the page is loading.
60. Web Technology Stack
Data – What does it know?
Behavior – What does it do?
Behavior – What does it do?
Presentation – What does it look like?
Structure – What does this logically mean?
Richness
of the
Experience
61. Quiz: Logical or Presentation
source: P. Griffiths, "HTML Dog: The Best-Practice Guide to XHTML&CSS, " New Raider, 2007
62. Quiz: Logical or Presentation
source: P. Griffiths, "HTML Dog: The Best-Practice Guide to XHTML&CSS, " New Raider, 2007
63. The stillbirth of
Cascading Style Sheets
• Created and did not published)
style sheet language when
inventing HyperText Markup
Language in 1990
– Fundamental belief: User will want
to control the styling
64.
65.
66. Reasons why CSS is the bastard child
• Browsers implemented CSS incorrectly and
patchy CSS support creates inconsistencies
• Authors' lack of familiarity with CSS syntax and
required techniques
• Poor support from authoring tools
80. CSS Media (Device) Type
Type Description
all All media type devices
aural Speech and sound synthesizers
braille Braille tactile feedback devices
embossed Paged braille printers
handheld Small or handheld devices
print Printers
projection Projected presentations (slides)
screen Computer screens
tty Fixed-pitch character grid devices (teletypes and terminals)
tv Television-type devices
Separation of presentation and structure (CSS and HTML);Separation of behavior and structure (JavaScript and HTML);Separation of behavior and presentation (JavaScript and CSS)