diff --git a/case1/mi_pricing.html b/case1/mi_pricing.html new file mode 100644 index 0000000..2047939 --- /dev/null +++ b/case1/mi_pricing.html @@ -0,0 +1,150 @@ + + + + + + + + Marlin Internet + + + + + + +
+ Marlin Internet + +
+ +
+

Accelerate with No Speed Traps

+

How do you use the web? Whether it's just you on your PC or your extended + family simultaneously accessing the Internet for gaming, movie watching, + surfing, or music; we have the speed for you — with no hidden fees, + service charges, or other traps. Marlin Internet provides a broad variety + of access plans at affordable prices with our exclusive ITIS 2.0 technology. + We provide more than fast access. Take advantage of our 24/7 customer support + (personal help is always on the line), free security tools, email accounts + for the whole family, and exclusive online content.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Select a Plan Starter Prime Prime Plus Ultra
$19.95
per month 		$29.95
per month 		$49.95
per month 		$69.95
per month
Summary Just the speed you need to send emails, download map directions, and search the Internet for restaurant reviews. A great speed at a great price for the family: kids can play games, adults can pay bills, and everyone can surf at the same time. Super speeds for multiple tasks that require more broadband capacity; ideal for gamers who need fast response times. Perfect for a small business running multiple media streams, demanding reduced lag time and fast data delivery.
Download Speed 3 Mbps 15 Mbps 25 Mbps 50 Mbps
Upload Speed 512 Kbps 6 Mbps 10 Mbps 20 Mbps
Cloud Storage 2 GB 5 GB 15 GB 40 GB
Email Accounts 2 Accounts 3 Accounts 5 Accounts 10 Accounts
24/7 Support Yes Yes Yes Yes
+ +
+ + + + + diff --git a/case1/mi_pricing_txt.html b/case1/mi_pricing_txt.html index 127737d..75e7fd4 100644 --- a/case1/mi_pricing_txt.html +++ b/case1/mi_pricing_txt.html @@ -7,18 +7,18 @@ Case Problem 1 Marlin Internet Pricing - Author: - Date: + Author: Zac F and Lane D + Date: Filename: mi_pricing.html --> - + Marlin Internet - + @@ -35,21 +35,21 @@ - +

Accelerate with No Speed Traps

How do you use the web? Whether it's just you on your PC or your extended family simultaneously accessing the Internet for gaming, movie watching, surfing, or music; we have the speed for you — with no hidden fees, service charges, or other traps. Marlin Internet provides a broad variety - of access plans at affordable prices with our exclusive ITIS 2.0 technology. + of access plans at affordable prices with our exclusive ITIS 2.0 technology. We provide more than fast access. Take advantage of our 24/7 customer support (personal help is always on the line), free security tools, email accounts for the whole family, and exclusive online content.

- - + +
- + - \ No newline at end of file + diff --git a/case1/mi_tables.css b/case1/mi_tables.css new file mode 100644 index 0000000..497e1a8 --- /dev/null +++ b/case1/mi_tables.css @@ -0,0 +1,65 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML and CSS + Tutorial 6 + Case Problem 1 + + Tables Style Sheet + Author: Zac F and Lane D + Date: 11/26/18 + + Filename: mi_tables.css + +*/ + +/* Table Styles */ + +table { + background-image: linear-gradient(to bottom, rgb(190, 215, 255), black); + border: 5px solid gray; +} + +th, td { + border: 3px solid gray; + line-height: 1.4em; + padding: 8px; +} + +th { + background-color: black; + color: rgb(130, 210, 255); + font-weight: normal; +} + +td { + color: white; + font-size: 0.9em; + vertical-align: top ; +} + +/* Column Styles */ + +col#firstCol { + width: 24%; +} + +col#dataCols { + width: 19%; +} + +thead > tr { + height: 60px; +} + + +/* Table Header Styles */ + +thead tr:first-of-type th:first-of-type { + font-size: 2em; +} + +thead tr:first-of-type th:not(:first-of-type) { + background-color: transparent; + color: black; +} diff --git a/case1/mi_tables_txt.css b/case1/mi_tables_txt.css index db9e6bc..af4c6ad 100644 --- a/case1/mi_tables_txt.css +++ b/case1/mi_tables_txt.css @@ -6,8 +6,8 @@ Case Problem 1 Tables Style Sheet - Author: - Date: + Author: Zac F and Lane D + Date: Filename: mi_tables.css @@ -22,14 +22,3 @@ /* Table Header Styles */ - - - - - - - - - - - diff --git a/case2/jpf_sudoku.css b/case2/jpf_sudoku.css new file mode 100644 index 0000000..7fb4d24 --- /dev/null +++ b/case2/jpf_sudoku.css @@ -0,0 +1,59 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 6 + Case Problem 2 + + Sudoku Style Sheet + Author: Zac F and Lane D + Date: 11/26/18 + + Filename: jpf_sudoku.css + +*/ + +/* Table Styles */ + +table.spuzzle { + border-collapse: collapse; + margin-top: 0px; + margin-bottom: 0px; + margin-left: auto; + margin-right: auto; + width: 90%; +} + +td { + border: 5px outset gray; + width:33.3%; +} + +th { + color: gray; + padding-right: 10px; + padding-bottom: 10px; +} + +/* Inner Table Styles */ + +table.subTable { + border-collapse: collapse; + width: 100%; +} + +table.subTable td { + color: blue; + box-shadow: 0px 0px 15px inset; + border: 1px solid black; + height: 40px; + text-align: center; +} + +td.goldBox { + background-color: rgb(228, 199, 42); +} + +td.greenBox { + background-color: rgb(203, 229, 130); +} diff --git a/case2/jpf_sudoku.html b/case2/jpf_sudoku.html new file mode 100644 index 0000000..34948f7 --- /dev/null +++ b/case2/jpf_sudoku.html @@ -0,0 +1,378 @@ + + + + + + + + The Sudoku Puzzle + + + + + + +
+ Japanese Puzzle Factory + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sudoku
1 2 3 4 5 6 7 8 9
A + + + + + + + + + + + + + + + + + + + + + + + +
4
3 5
+ 		+ + + + + + + + + + + + + + + + + + + + + + + +
5 3
+ 		+ + + + + + + + + + + + + + + + + + + + + + + +
7
3 1
2
+
B
C
D + + + + + + + + + + + + + + + + + + + + + + + +
6 9
4 7 2
+ 		+ + + + + + + + + + + + + + + + + + + + + + + +
2
9
+ 		+ + + + + + + + + + + + + + + + + + + + + + + +
9 3 7
4 8
+
E
F
G + + + + + + + + + + + + + + + + + + + + + + + +
1
4 5
6
+ 		+ + + + + + + + + + + + + + + + + + + + + + + +
8 1
+ 		+ + + + + + + + + + + + + + + + + + + + + + + +
5 2
7
+
H
I
+
+ +
+

To Play

+

Sudoku is played on a 9x9 grid with nine 3x3 boxes + placed within the grid. Enter a digit from 1 to 9 in + each table cell. A few starting numbers have been + supplied for you. The digits from 1 to 9 can appear + only once each in every row, column, and box in the + table (diagonals don't count). Every Sudoku puzzle + has a unique solution. +

+

Good luck!

+
+ + + + + diff --git a/case3/lht_columns.css b/case3/lht_columns.css new file mode 100644 index 0000000..6469298 --- /dev/null +++ b/case3/lht_columns.css @@ -0,0 +1,41 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML and CSS, 7th Edition + Tutorial 6 + Case Problem 3 + + Columns Style Sheet + Author: Lane and Zac + Date: 11/27/18 + + Filename: lht_columns.css + +*/ + + + +/* Column Styles */ + + article { + -moz-column-width: 260px; + -webkit-column-width: 260px; + column-width: 260px; + + -moz-column-gap: 20px; + -webkit-column-gap: 20px; + column-gap: 20px; + + -moz-column-rule: 1px solid rgb(154, 64, 31); + -webkit-column-rule: 1px solid rgb(154, 64, 31); + column-rule: 1px solid rgb(154, 64, 31); + + widows: 2; + orphans: 2; + } + + article h1 { + -moz-column-span: all; + -webkit-column-span: all; + column-span: all; + } diff --git a/case3/lht_feb.html b/case3/lht_feb.html new file mode 100644 index 0000000..ffccddf --- /dev/null +++ b/case3/lht_feb.html @@ -0,0 +1,415 @@ + + + + + + + + Lyman Hall Theater in February + + + + + + + +
+ The Lyman Hall Theater + +
+ +
+

Coming Up at the Lyman Hall Theater

+

February will be another banner month at the Lyman Hall + Theatre with three performances of the Tony Award winning + musical, West Side Story by the Broadway Touring Company. + Tickets are going fast, so order yours today. +

+ +

Celebrate Valentine's Day with the Chamberlain Symphony and + their special selection of classical music for lovers. Later that + week, exercise your mind by attending the Charles Dickens classic, + The Mystery of Edwin Drood. Can you solve Dickens' + unfinished mystery? +

+ +

Jazz lovers have a lot to celebrate in February with a visit + from the Jazz Masters on February 21st, and then on February + 24th, enjoy the music of The Duke with an Ellington Tribute + performed by the Jazz Company of Kansas City. +

+ +

Pins, bottles, plates, and chairs are flying at the Chamberlain + Civic Center in February. The Taiwan Acrobats return on + February 2nd with another amazing performance. We close out the + month with a visit from the Madtown Jugglers and their unique + blend of comedy, juggling, and madness. +

+ +

Enjoy a classical brunch every Sunday in February with music + provided by the Carson Quartet. Seating is limited, so please order + your table in advance. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
February 2018 Calendar
Sun Mon Tue Wed Thu Fri Sat
+

28

+
+
Carson Quartet
+
1 PM
+
$12
+
+ 		+

29

+
+
Harlem Choir
+
8 PM
+
$18/$24/$32
+
+ 		+

30

+
+
+
+
+
+ 		+

31

+
+
+
+
+
+ 		+

1

+
+
+
+
+
+ 		+

2

+
+
Taiwan Acrobats
+
8 PM
+
$24/$32/$48
+
+ 		+

3

+
+
Joey Gallway
+
8 PM
+
$24/$32/$48
+
+
+

4

+
+
Carson Quartet
+
1 PM
+
$12
+
+ 		+

5

+
+
+
+
+
+ 		+

6

+
+
Ralph Williams
+
8 PM
+
$24/$36/$42
+
+ 		+

7

+
+
+
+
+
+ 		+

8

+
+
West Side Story
+
7 PM
+
$36/$48/$64
+
+ 		+

9

+
+
West Side Story
+
7 PM
+
$36/$48/$64
+
+ 		+

10

+
+
West Side Story
+
7 PM
+
$36/$48/$64
+
+
+

11

+
+
Carson Quartet
+
1 PM
+
$12
+
+ 		+

12

+
+
+
+
+
+ 		+

13

+
+
+
+
+
+ 		+

14

+
+
Chamberlain Symphony
+
8 PM
+
$18/$24/$32
+
+ 		+

15

+
+
+
+
+
+ 		+

16

+
+
Edwin Drood
+
8 PM
+
$36/$48/$58
+
+ 		+

17

+
+
Edwin Drood
+
8 PM
+
$36/$48/$58
+
+
+

18

+
+
Carson Quartet
+
1 PM
+
$12
+
+ 		+

19

+
+
+
+
+
+ 		+

20

+
+
+
+
+
+ 		+

21

+
+
Jazz Masters
+
8 PM
+
$18/$24/$32
+
+ 		+

22

+
+
+
+
+
+ 		+

23

+
+
The Yearling
+
7 PM
+
$12/$18/$24
+
+ 		+

24

+
+
An Ellington Tribute
+
8 PM
+
$24/$38/$48
+
+
+

25

+
+
Carson Quartet
+
time
+
$12
+
+ 		+

26

+
+
+
+
+
+ 		+

27

+
+
+
+
+
+ 		+

28

+
+
Madtown Jugglers
+
8 PM
+
$12/$16/$20
+
+ 		+

1

+
+
Othello
+
8 PM
+
$24/$36/$48
+
+ 		+

2

+
+
Othello
+
8 PM
+
$24/$36/$48
+
+ 		+

3

+
+
Othello
+
8 PM
+
$24/$36/$48
+
+
+ + + + diff --git a/case3/lht_tables.css b/case3/lht_tables.css new file mode 100644 index 0000000..9bbea49 --- /dev/null +++ b/case3/lht_tables.css @@ -0,0 +1,119 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML and CSS, 7th Edition + Tutorial 6 + Case Problem 3 + + Calendar Style Sheet + Author: Lane and Zac + Date: 11/27/18 + + Filename: lht_tables.css + +*/ + +/* =============================== + Mobile Styles: 0px to 640px + =============================== +*/ + +@media only screen and (max-width: 640px) { + + table, tbody, tr, td, th, caption { + display: block; + } + + td h1, thead{ + display: none; + } + + caption { + color: white; + background-color: rgb(73, 74, 74); + font-size: 1.5em; + line-height: 2em; + } + + td { + border: 1px dotted gray; + color: rgb(11, 12, 145); + position: relative; + padding-left: 40%; + min-height: 40px; + } + + tr:nth-of-type(odd) { + background-color: rgb(255, 235, 178); + border: 2px solid gray; + } + + td::before { + content: attr(data-date); + position: absolute; + left: 0px; + top:0px; + width: 40%; + padding: 5px; + } + +} + + +/* ============================================= + Tablet and Desktop Styles: greater than 640px + ============================================= +*/ + +@media only screen and (min-width: 641px) { + + table { + background-image: url(lht_photo1.png); + background-position: right bottom; + background-repeat: no-repeat; + border: 6px double rgb(154, 64,3); + border-collapse: collapse; + margin-top: 20px; + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + width: 85%; + table-layout: fixed; + } + + td, thead th { + border: 1px solid gray; + font-size: 0.85em; + font-weight: normal; + padding: 5px; + vertical-align: top; + width: 14.28%; + word-wrap: break-word; + } + + td { + background-color: rgba(171, 171, 171, 0.6); + color: rgb(11, 12, 145); + } + + td[data-date~="Feb"] { + background-color: rgba(232, 214, 148, 0.6); + box-shadow: inset 0px 0px 20px gray; + } + + table caption { + caption-side: top; + text-align: center; + padding-bottom: 10px; + font-size: 1.2em; + letter-spacing: 3px; + } + + thead th { + background-color: rgb(154, 64, 3); + color: white; + } + + + + } diff --git a/case4/background.jpg b/case4/background.jpg new file mode 100644 index 0000000..d283924 Binary files /dev/null and b/case4/background.jpg differ diff --git a/case4/hcc_rooms.txt b/case4/hcc_rooms.txt index 17d98df..5f42fd7 100644 --- a/case4/hcc_rooms.txt +++ b/case4/hcc_rooms.txt @@ -89,5 +89,3 @@ Maximum Capacity: 30 Green Room Maximum Capacity: 55 - - diff --git a/case4/hcc_schedule.css b/case4/hcc_schedule.css new file mode 100644 index 0000000..348720c --- /dev/null +++ b/case4/hcc_schedule.css @@ -0,0 +1,115 @@ +/* + New Perspectives on HTML and CSS, 7th Edition + Tutorial 6 + Case Problem 4 + + Schedule Table Style Sheet + Author: Zac F and Lane D + Date: 11/28/18 + + Filename: hcc_schedule.css + Supporting Files: + +*/ +/* Table Styles */ +table { + + border: 1px solid black; + border-collapse: seperate; + background-color: white; + width: 99.5%; +} + +caption { + border: 1px solid white; + background-color: white; + width: 99.5%; +} + +/* Data Cell Styles */ +td { + vertical-align: top; + text-align: center; + border: 2px ridge black; +} + +td#event { + background-color: gray; +} + +/* Row Styles */ + +th, tr { + border: 1px solid black; +} + +th { + width: 97%; + background-color: black; + color: white; +} + + +/* =============================== + Mobile Styles: 0px to 640px + =============================== +*/ + +@media only screen and (max-width: 640px) { + + table, tbody, tr, td, th, caption { + display: block; + } + + thead, article { + display: none; + } + + th { + width: 100% + } + + caption { + color: black; + background-color: gold; + font-size: 1.5em; + line-height: 2em; + } + + td { + border: 1px solid gray; + position: relative; + text-align: center; + } + + td::after { + content: attr(time); + } + + +} + +/* Column Styles */ + +article { + -moz-column-count: 2; + -webkit-column-count: 2; + column-count: 2; + + -moz-column-gap: 30px; + -webkit-column-gap: 30px; + column-gap: 30px; + + -moz-column-rule: 3px dashed black; + -webkit-column-rule: 3px dashed black; + column-rule: 3px dashed black; + + widows: 3; + orphans: 3; +} + +article h1 { + -moz-column-span: all; + -webkit-column-span: all; + column-span: all; +} diff --git a/case4/hcc_schedule.html b/case4/hcc_schedule.html new file mode 100644 index 0000000..fac27f7 --- /dev/null +++ b/case4/hcc_schedule.html @@ -0,0 +1,139 @@ + + + + + + + Hamilton Conference Center + + + + + +
+ +
+
+

Reserve a Room at The Hamilton Conference Center

+

To reserve a room, please contact Yancy Inwe at extension 388 or by e-mail at yancyinwe@hconfcenter.org + Reservations should be made at least 48 hours in advance. Cancellations require 24 hour notice. Room deposits will + not be returned for cancellations within 24 hours of the scheduled event.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Reservations for Conference Rooms
Tuesday, April 10
Room 8:00 8:30 9:00 9:30 10:00 10:30 11:00 11:30 12:00 12:30 1:00 1:30 2:00 2:30 3:00 3:30 4:00 4:30 5:00
Sunrise Room
(Maximum Capacity: 80) 		Marriage Encounter Marriage Encounter Luncheon Marriage Encounter Talks
Mountain View Room
(Maximum Capacity: 150) 		Breakfast Club of Ohio Ohio Conference of Librarians Ohio Book Resale Setup
Arbor Hall
(Maximum Capacity: 190) 		Computer Expo set up Computer Expo opening session
Mitchell Theater
(Maximum Capacity: 120)		 Youth Theatre
Gold Room
(Maximum Capacity: 40) 		The Tompkins Group Pearson Planning Mothers of Multiples Teen Connection
Blue Room
(Maximum Capacity: 30) 		Retirement Planning The Senior Group Senior Luncheon Senior Classes Tutoring
Green Room
(Maximum Capacity: 55) 		Drivers' Ed Movie Club Tutoring
+ + + diff --git a/case4/hcc_styles.css b/case4/hcc_styles.css new file mode 100644 index 0000000..fd9dc70 --- /dev/null +++ b/case4/hcc_styles.css @@ -0,0 +1,92 @@ +/* + New Perspectives on HTML and CSS, 7th Edition + Tutorial 6 + Case Problem 4 + + Hamilton Conference Center Style Sheet + Author: Zac F and Lane D + Date: 11/28/18 + + Filename: hcc_styles.css + Supporting files: + +*/ + +/* Main styles */ + +html { + background: rgb(128, 0, 0); + font-family: Verdana, Geneva, sans-serif; +} + +body { + background-image: url(background.jpg); + box-shadow: rgb(51, 51, 51) 10px 0px 40px, rgb(51, 51, 51) -10px 0px 40px; + border-left: 1px solid rgb(3, 51, 86); + border-right: 1px solid rgb(3, 51, 86); + min-height: 100%; + margin: 0px auto; + min-width: 320px; + max-width: 1024px; + width: 100%; +} + +footer { + text-align: center; + background-image: white; + color: black; +} + + + +/* Link Styles */ + +footer a { + color: white; + text-decoration: none; +} + +header nav ul { + width: 100%; +} + +a#main { + text-decoration: none; + color: black; + display: in-inline-block; + padding: 5px 20px; + width: 100%; + margin-right: auto; + margin-left: auto; + text-align: left; +} + +a#main:hover { + color: white; +} + +nav ul li { + list-style-type: none; +} + +a#mail { + text-decoration: none; + color: black; +} + +a#mail:hover { + color: red; +} + +a#phone { + color: black; +} + +a#phone:hover { + color: blue; +} + +article { + background-color: white; + border: 3px dashed black; +} diff --git a/index.html b/index.html index 3a65fb4..679db3f 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,14 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Index page - + Home Page of the Tutorial 5 Project Author: Thorin Schmidt Date: 2018-11-6 - + Filename: index.html --> - Tutorial 5 + Tutorial 6 @@ -23,12 +23,12 @@

Tutorial 5 links

diff --git a/review/dlr_columns2.css b/review/dlr_columns2.css new file mode 100644 index 0000000..a229b17 --- /dev/null +++ b/review/dlr_columns2.css @@ -0,0 +1,33 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML and CSS + Tutorial 6 + Review Assignment + + Columns Style Sheet + Author: Zac F and Lane D + Date: 11/20/18 + + Filename: dlr_columns2.css + +*/ + + + +/* Column Styles */ + +@media only screen and (min-width: 641px) { + p { + -moz-column-count: 3; + -webkit-column-count: 3; + column-count: 3; + + -moz-column-gap: 20px; + -webkit-column-gap: 20px; + column-gap: 20px; + + -moz-column-rule: 1px solid black; + -webkit-column-rule: 1px solid black; + column-rule: 1px solid black; + } diff --git a/review/dlr_mornings.html b/review/dlr_mornings.html new file mode 100644 index 0000000..b40b9d1 --- /dev/null +++ b/review/dlr_mornings.html @@ -0,0 +1,162 @@ + + + + + + + + DLR Morning Schedule + + + + + + + + +
+

Listener Supported Since 1975

+ +
+ +
+ +
+ DLR +

DLR Morning Schedule

+

DLR airs listener-supported public radio in Bismarck, North Dakota from + 5:00 a.m. to 10:30 p.m.
You can Listen Live to streaming audio + of our broadcast or download programs from our Podcast. +
Please refer below for our current morning schedule.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
All Times Central
Time Mon Tue Wed Thu Fri Sat Sun
Support your Public Radio Station
5:00 AM Dawn Air Dawn Air Weekends Sunday Magazine
5:30 AM
6:00 AM Weekend Reflections
6:30 AM
7:00 AM Local News Weekend Wrap Radio U
7:30 AM World News Feed
8:00 AM Classical Roots What Can You Say? University on the Air
8:30 AM
9:00 AM
9:30 AM Animal Talk
10:00 AM Symphony City Word Play
10:30 AM Brain Stew
11:00 AM Opera Live From the East Coast The Inner Mind
11:30 AM Grammar Rules!!
12:00 PM Book Club Weekend Wrap
+ + + +
+ +
+ + + + + diff --git a/review/dlr_tables2.css b/review/dlr_tables2.css new file mode 100644 index 0000000..a428c0e --- /dev/null +++ b/review/dlr_tables2.css @@ -0,0 +1,88 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML and CSS + Tutorial 6 + Review Assignment + + Tables Style Sheet + Author: Zac F and Lane D + Date: 11/20/18 + + Filename: dlr_tables2.css + +*/ + +/* Table Styles */ + +table.programs { + width: 100%; + border: outset 15px rgb(151, 151, 151); + border-collapse: collapse; + font-family: Arial, Verdana, sans-serif +} + +table.programs tr { + height: 25px; +} + +table.programs th, table.programs td { + border: 1px solid gray; + padding: 5px; + vertical-align: top; +} + +/* Table Caption Styles */ + +table.programs caption { + caption-side: bottom; + text-align: center; +} + + +/* Table Column Styles */ + +col.timeColumn { + width: 10%; + background-color: rgb(215, 205, 151); +} + +col.wDayColumns { + width: 11%; + background-color: rgb(236, 255, 211); +} + +col.wEndColumns { + width: 17%; + background-color: rgb(255, 231, 255); +} + + +/* Table Header Styles */ + +thead { + color: white; + background-color: rgb(105, 177, 60); +} + +thead th:first-of-type { + background: rgb(153, 86, 7); +} + +thead th:nth-of-type(7) { + background-color: rgb(153, 0, 153); +} + +thead th:nth-of-type(8) { + background-color: rgb(153, 0, 153); +} + + + + +/* Table Footer Styles */ + +tfoot { + color: white; + background-color: black; +} diff --git a/tutorial/dlr_columns.css b/tutorial/dlr_columns.css new file mode 100644 index 0000000..583c4c2 --- /dev/null +++ b/tutorial/dlr_columns.css @@ -0,0 +1,43 @@ ++@charset "utf-8"; + +/* + New Perspectives on HTML and CSS + Tutorial 6 + Tutorial Case + + Columns Style Sheet + Author: Zac F and Lane D + Date: 11/19/18 + + Filename: dlr_columns.css + +*/ + + + +/* Column Styles */ + +@media only screen and (min-width: 641px) { + article { + -moz-column-count: 2; + -webkit-column-count: 2; + column-count: 2; + + -moz-column-gap: 30px; + -webkit-column-gap: 30px; + column-gap: 30px; + + -moz-column-rule: 2px solid gray; + -webkit-column-rule: 2px solid gray; + column-rule: 2px solid gray; + + widows: 3; + orphans: 3; + } + + article h1 { + -moz-column-span: all; + -webkit-column-span: all; + column-span: all; + } +} diff --git a/tutorial/dlr_evenings.html b/tutorial/dlr_evenings.html new file mode 100644 index 0000000..590e5e5 --- /dev/null +++ b/tutorial/dlr_evenings.html @@ -0,0 +1,167 @@ + + + + + + + + DLR Nightly Schedule + + + + + + +
+

Listener Supported Since 1975

+ +
+ +
+ +
+ DLR +

DLR Nightly Schedule

+

DLR airs listener-supported public radio in Bismarck, + North Dakota from 5:00 a.m. to 10:30 p.m. + You can Listen Live to streaming audio + of our broadcast. Please refer below for our current + nightly schedule.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
All Times Central
Time Mon Tue Wed Thu Fri Sat Sun
DLR Ends Its Broadcast Day At 10:30 PM
6:00 PM National News
6:30 PM World News
7:00 PM Opera Fest Radio U Science Week The Living World Word Play Agri-Week Folk Fest
7:30 PM Brain Stew Bismarck Forum
8:00 PM The Classical Music Connection Old Time Radio Saturday Nite Jazz The Indie Connection
8:30 PM The Inner Mine
9:00 PM Open Mike Nite
9:30 PM
10:00 PM World News Feed
+ +
+ + + +
+ + + + + diff --git a/tutorial/dlr_lw0414.html b/tutorial/dlr_lw0414.html new file mode 100644 index 0000000..2eb7a26 --- /dev/null +++ b/tutorial/dlr_lw0414.html @@ -0,0 +1,169 @@ + + + + + + + + The Living World: April 14 + + + + + + +
+ +

Listener Supported Since 1975

+ + +
+ +
+
+ +

The Living World

+

April 14

+

Join host Tim Unger for this week's edition of + The Living World where we discuss the future and + economic impact of autonomous vehicles, otherwise known + as driverless cars.

+
+ +
+

Rise of the Driverless Car and How It Will Impact You

+

Your world is about to change with widespread adoption of driverless cars. + Driverless cars or autonomous vehicles that interact with + their surroundings with radar, GPS, proximity sensors, and computer image enhancement. + This information is fed into a control system that uses it to plot navigation paths + and to respond to obstacles and road directions. A driverless car is capable of updating + its status based on changing conditions. Driverless cars should be autonomous even when + entering uncharted regions.

+

In the United States, the National Highway Traffic Safety Administration (NHTSA) has + proposed the following levels of autonomy for motorized vehicles:

+
    +
  1. Level 0 The driver completely controls the vehicle at all times.
    2. +
  2. Level 1 Individual vehicle controls are automated, such as electronic + stability control or automatic braking.
    3. +
  3. Level 2 At least two controls can be automated in unison, such as + adaptive cruise control in combination with lane keeping.
    4. +
  4. Level 3 The driver can fully cede control of all safety-critical + functions in certain conditions. The car senses when conditions require the driver to + retake control and provides a "sufficiently comfortable transition time" for the + driver to do so.
    5. +
  5. Level 4 The vehicle performs all safety-critical functions for the + entire trip, with the driver not expected to control the vehicle at any time. Because this + vehicle would control all functions from start to stop, including all parking functions, + it could include unoccupied cars.
    6. +
+

Currently, we are at Level 2 with many vehicles able to provide automated safety systems, such as + automatic braking in response to input from collision sensors. +

When Does Full Autonomy Arrive?

+

Level 4 autonomous vehicles are arriving and they're arriving quickly. The obstacles to adoption + of a driverless economy are legal and technical. The United States traffic code does not + prohibit autonomous vehicles, but it also does not specifically address them. Several states, + including Nevada, Florida, California, and Michigan, have enacted traffic rules specifically + tailored to driverless cars and more states are in the processing of enacting such legislation.

+

One area of legal entanglement is the laws against distracted driving. Google specifically requested + an exemption to permit occupants to send text messages while sitting behind the wheel of an + autonomous vehicle. Other similar regulations will need to be addressed as driverless cars move + from the testing stage into general use.

+

Other countries have permitted the testing of autonomous vehicles on public roads. The United Kingdom + enacted a testing phase in 2013, followed shortly by France in 2014.

+

Driverless cars have driven through San Francisco's Lombard Street, navigating its steep hairpin turns, + and city traffic. The testing vehicles provide an override to allow a human driver to take control + of the car. By August 2012, testers announced that they have driven over 300,000 miles accident-free. + By April 2014, autonomous vehicles have logged nearly 700,000 miles. As of June 2015, driverless cars + have been involved in 12 minor accidents on public roads. Eight of these accidents involved being + rear-ended, two in which the vehicle was side-swiped by another driver, one of which involved + another driver rolling through a stop sign, and one where the car was being driven manually.

+

Driverless cars have not yet been tested in heavy rain or snow due to safety concerns. + Nor have they been tested in areas with temporary traffic lights or complex unmapped intersections. + The technical issues are daunting. An autonomous vehicle has difficulty with potholes, + roadside trash and debris, and interpreting unexpected signals, such as a police car signaling the + vehicle to pull over.

+

Experts predict that autonomous vehicles will gradually be introduced into the market with + the following anticipated benchmarks:

+
    +
  1. 2017 U.S. Department of Transportation hopes to publish a rule mandating + vehicle-to-vehicle (V2V) communication by an unspecified future date.
    2. +
  2. 2018 Tesla Motors expects to produce a version of fully self-driving cars, + where the driver can fall asleep, though the actuality of marketing such a vehicle will depend on + the economic and legal climate.
    3. +
  3. 2020 GM, Mercedes-Benz, Audi, Nissan, BMW, Renault, Tesla, and Google all expect + to sell vehicles that can drive themselves at least part of the time.
    4. +
  4. 2024 Jaguar expects to release an autonomous car.
    5. +
  5. 2025 Daimler and Ford expect to release autonomous vehicles on the market.
    6. +
  6. 2035 Information Handling Services (IHS) Automotive Report projects that most self-driving vehicles + will be operated completely independently from a human occupant’s control.
    7. +
  7. 2040 Experts at the Institute of Electrical and Electronics Engineers (IEEE) + estimate that up to 75% of all vehicles will be autonomous. +
+

Clearly, the introduction and widespread adoption of autonomous vehicles will have enormous + repercussions.

+

The Impact of Driverless Cars

+

While it appears at first glance that a driverless car will be more dangerous than a + manually driven vehicle, it has been estimated that once we switch to a driverless + economy, we will see a 90% reduction in crashes, saving nearly 30,000 lives and + preventing 2.12 million injuries annually. Indeed, the whole design of the car will + change. Currently, a car is designed around the needs of the driver, but, when + all in the car are passengers, the interior space will be designed more economically and + efficiently.

+

Beyond redesigning the car, we will also redesign our system of roads and traffic + control. This could mean loss of lots of road signs, lane markers, and street lights. + Cars can merge and change lanes more efficiently and speed limits can be safely + raised. Traffic control planners can redesign traffic flow to cooperative patterns + that will increase safety and reduce travel time (and road rage!)

+

But this innovation is not without cost. We are a driving-based economy. Truckers, + taxis, car rentals, and car servicing are all based directly or indirectly on + manually-driven vehicles. The Bureau of Labor Statistics lists that 884,000 people + are employed in motor vehicles and parts manufacturing, and an additional 3.02 million in + dealer and maintenance network. Truck, bus, delivery, and taxi drivers account + for nearly 6 million professional driving jobs. That is 10 million jobs immediately at + risk with a move to a driverless economy and that does not count ancillary industries, + such as roadside diners and motels, which will also be affected when we need to + drive less often.

+

On the other hand, research shows that currently manually-driven cars are driven + just 4% of the time at an average cost of $9000 per year in maintenance and upkeep. + Thus, an economy in which autonomous vehicles offered through car-sharing services like + Uber replace self-owned and self-driven cars, promises an enormous amount of savings + to the individual. It is estimated that despite the economic upheaval, eliminating the need + for car ownership will yield over $1 trillion in additional disposable income.

+

These are exciting times. While the full economic and social impact of a driverless + economy are still not fully grasped, the driverless economy once fully implemented will dwarf the impact of + the automobile, airplane, personal computer, and cell phone in how it changes our + lives and work.

+

Now we just need to create a driverless car that can fly and I'm all set.

+
+ +
+ + + + + diff --git a/tutorial/dlr_tables.css b/tutorial/dlr_tables.css new file mode 100644 index 0000000..26a028a --- /dev/null +++ b/tutorial/dlr_tables.css @@ -0,0 +1,72 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML and CSS + Tutorial 6 + Tutorial Case + + Tables Style Sheet + Author: Zac F and Lane D + Date: 11/19/18 + + Filename: dlr_tables.css + +*/ + +/* Table Styles */ + +table.schedule { + background: white; + border: 10px outset rgb(153, 0, 153); + border-collapse: collapse; + font-size: 0.75 em; + width: 100%; +} + + +/* Table Cell Styles */ +table.schedule th, table.schedule td { + border: 1px solid gray; + padding: 5px; + vertical-align: top; +} + + +/* Table Caption Styles */ + +table.schedule caption { + caption-side: bottom; + text-align: right; +} + + + + +/* Row Group Styles */ + +table.schedule thead { + background: rgb(153, 0, 153); + color: white; +} +table.schedule tfoot { + background: black; + color: white; +} +table.schedule thead tr { + height: 30px; +} +table.schedule tbody tr { + height: 40px; +} + +/* Column Group Styles */ + +col#firstCol { + background: rgb(218, 210, 218); + width: 16%; +} + +col.dayCols { + background: rgb(255, 220, 255); + width: 12%; +}