Introduction to HTML and CSS Lesso n 1: Int ro duct io n Wo rking in Co deRunner Using the Co deRunner® Edito r and Saving Yo ur Page Saving and Retrieving Yo ur Page Making the Page Mo re Interesting Yo u're Ready to Go ! Lesso n 2: T he Basics The Basic Structure o f HTML The Head The Bo dy The Fo nt Tag Lists Lesso n 3: XHT ML Using XHTML Lesso n 4: Links Putting Links o n Yo ur Page Linking Yo ur Pages To gether The NAME Attribute Lesso n 5: Im age s Adding Images to Yo ur Page Po sitio ning Yo ur Image Co ntro lling Image Size Using the alt attribute Using Images as links Putting Images In Yo ur Backgro und Uplo ading Images To Yo ur OST Acco unt Lesso n 6 : Fo rm s Getting Input fro m the User Checkbo xes Radio Butto ns Select Bo x Textarea If the mailto actio n is no t wo rking... Lesso n 7: T able s Creating Tables <table> Attributes <td> Attributes Other Table Tags What are Tables Go o d Fo r? Lo o king Fo rward Lesso n 8 : if ram e s
Using iframes Creating yo ur o wn iframes Attributes o f <iframes> Targeting a frame Lesso n 9 : Cascading St yle She e t s CSS Intro ductio n The DIV and SPAN tags Using the style tag Lesso n 10 : Mo re Cascading St yle She e t s The style tag with o ther elements Backgro und Pro perties Impo rting Styles with an External CSS File Viewing External Style Sheets Lesso n 11: CSS-P: Po sit io ning wit h St yle She e t s Po sitio ning Pro perties Lesso n 12: CSS Classif icat io n The flo at Pro perty The visibility pro perty The display pro perty Lesso n 13: HT ML W3C St andards Do ctype declaratio ns Meta tags Bro wser co mpatibility Accessibility standards Keeping yo ur pages up-to -date Lesso n 14: CSS Bo x Pro pe rt ie s Bo rders Margins and Padding Dimensio ns Lesso n 15: CSS Me nus CSS Menus Pseudo -Classes Basic CSS Menus Lesso n 16 : Final Pro je ct Final Pro ject Copyright © 1998-2014 O'Reilly Media, Inc. This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. See http://creativecommons.org/licenses/by-sa/3.0/legalcode for more information.
Introduction Welco me to the O'Reilly Scho o l o f Techno lo gy co urse o n HTML and CSS! Course Objectives When yo u co mplete this co urse, yo u will be able to : use HTML and CSS to create a website fro m scratch. use an external CSS file to create unifo rmity. use a CSS menu fo r navigatio n. create a website that is co nsistent acro ss bo th bro wsers, as well as acro ss the Mac and Windo ws o perating platfo rms. Learning with O'Reilly School of T echnology Courses As with every O'Reilly Scho o l o f Techno lo gy co urse, we'll take a user-active appro ach to learning. This means that yo u (the user) will be active! Yo u'll learn by do ing, building live pro grams, testing them and experimenting with them— hands-o n! To learn a new skill o r techno lo gy, yo u have to experiment. The mo re yo u experiment, the mo re yo u learn. Our system is designed to maximize experimentatio n and help yo u learn to learn a new skill. We'll pro gram as much as po ssible to be sure that the principles sink in and stay with yo u. Each time we discuss a new co ncept, yo u'll put it into co de and see what YOU can do with it. On o ccasio n we'll even give yo u co de that do esn't wo rk, so yo u can see co mmo n mistakes and ho w to reco ver fro m them. Making mistakes is actually ano ther go o d way to learn. Abo ve all, we want to help yo u to learn to learn. We give yo u the to o ls to take co ntro l o f yo ur o wn learning experience. When yo u co mplete an OST co urse, yo u kno w the subject matter, and yo u kno w ho w to expand yo ur kno wledge, so yo u can handle changes like so ftware and o perating system updates. Here are so me tips fo r using O'Reilly Scho o l o f Techno lo gy co urses effectively: T ype t he co de . Resist the temptatio n to cut and paste the example co de we give yo u. Typing the co de actually gives yo u a feel fo r the pro gramming task. Then play aro und with the examples to find o ut what else yo u can make them do , and to check yo ur understanding. It's highly unlikely yo u'll break anything by experimentatio n. If yo u do break so mething, that's an indicatio n to us that we need to impro ve o ur system! T ake yo ur t im e . Learning takes time. Rushing can have negative effects o n yo ur pro gress. Slo w do wn and let yo ur brain abso rb the new info rmatio n tho ro ughly. Taking yo ur time helps to maintain a relaxed, po sitive appro ach. It also gives yo u the chance to try new things and learn mo re than yo u o therwise wo uld if yo u blew thro ugh all o f the co ursewo rk to o quickly. Expe rim e nt . Wander fro m the path o ften and explo re the po ssibilities. We can't anticipate all o f yo ur questio ns and ideas, so it's up to yo u to experiment and create o n yo ur o wn. Yo ur instructo r will help if yo u go co mpletely o ff the rails. Acce pt guidance , but do n't de pe nd o n it . Try to so lve pro blems o n yo ur o wn. Go ing fro m misunderstanding to understanding is the best way to acquire a new skill. Part o f what yo u're learning is pro blem so lving. Of co urse, yo u can always co ntact yo ur instructo r fo r hints when yo u need them. Use all available re so urce s! In real-life pro blem-so lving, yo u aren't bo und by false limitatio ns; in OST co urses, yo u are free to use any reso urces at yo ur dispo sal to so lve pro blems yo u enco unter: the Internet, reference bo o ks, and o nline help are all fair game. Have f un! Relax, keep practicing, and do n't be afraid to make mistakes! Yo ur instructo r will keep yo u at it until yo u've mastered the skill. We want yo u to get that satisfied, "I'm so co o l! I did it!" feeling. And yo u'll have so me pro jects to sho w o ff when yo u're do ne. Lesson Format We'll try o ut lo ts o f examples in each lesso n. We'll have yo u write co de, lo o k at co de, and edit existing co de. The co de will be presented in bo xes that will indicate what needs to be do ne to the co de inside. Whenever yo u see white bo xes like the o ne belo w, yo u'll type the co ntents into the edito r windo w to try the example
yo urself. The CODE TO TYPE bar o n to p o f the white bo x co ntains directio ns fo r yo u to fo llo w: CODE TO TYPE: White boxes like this contain code for you to try out (type into a file to run). If you have already written some of the code, new code for you to add looks like this. If we want you to remove existing code, the code to remove will look like this. We may also include instructive comments that you don't need to type. We may run pro grams and do so me o ther activities in a terminal sessio n in the o perating system o r o ther co mmandline enviro nment. These will be sho wn like this: INTERACTIVE SESSION: The plain black text that we present in these INTERACTIVE boxes is provided by the system (not for you to type). The commands we want you to type look lik e this. Co de and info rmatio n presented in a gray OBSERVE bo x is fo r yo u to inspect and absorb. This info rmatio n is o ften co lo r-co ded, and fo llo wed by text explaining the co de in detail: OBSERVE: Gray "Observe" boxes like this contain information (usually code specifics) for you to observe. The paragraph(s) that fo llo w may pro vide additio n details o n inf o rm at io n that was highlighted in the Observe bo x. We'll also set especially pertinent info rmatio n apart in "No te" bo xes: Note T ip No tes pro vide info rmatio n that is useful, but no t abso lutely necessary fo r perfo rming the tasks at hand. Tips pro vide info rmatio n that might help make the to o ls easier fo r yo u to use, such as sho rtcut keys. WARNING Warnings pro vide info rmatio n that can help prevent pro gram crashes and data lo ss. T he CodeRunner Screen This co urse is presented in Co deRunner, OST's self-co ntained enviro nment. We'll discuss the details later, but here's a quick o verview o f the vario us areas o f the screen: