HTML and the Art of the Web page WORKBOOK R. CRAIG COLLINS th 10 Edition (Windows 7 and Windows 10) 10th Edition, with Support for Windows 7 and Windows 10 R. Craig Collins, © 2004-2016 I a Note: Much of this book is general in nature; general to the point that on occasion I have oversimplified. It is not that I want to lie to you; I just don’t want your head to explode. Future classes (especially Web Design II), other books, and experience will refine the topics introduced here. To paraphrase a Jack Nicholson character, “You can’t handle the truth.” Well, not just yet. Colors reference using Hexadecimal See Overview 6 for details X X X X X X Red part Green part Blue part The mixture behaves like light: add full values of red, green, and blue light, in equal parts, and you have white light (FF FF FF). Add no red, green or blue light, and you would be in the dark, or black (00 00 00). Color Chart Our 8 crayon box colors, in hex :) 000000 . 0000FF . 00FF00 . 00FFFF . FF0000 . FF00FF . FFFF00 . FFFFFF . IMPORTANT NOTE ON VERSIONS OF HTML HTML 3 Introduced in 1995-97, included standard web features, plus Tables, support for applets, and some new text formatting. HTML 4 Introduced in 1997-99, added frames and style sheets (which deprecated some <font> features). In this book, we will learn the HTML 3 <font> features first, then move on in Overview 9 to HTML 4, and styles. HTML 5 is available, will add native support for video, reducing the need for Flash style plug-ins needing to be added, but is not widely supported yet. HTML 5 is typically a Web Design II topic, but will be addressed briefly. 2 Table of Contents Orientation………………………………………………………………….… in Appendix Controlling File Names and Campus Specific information Overview 1……………………………………………………………………………… 01 Getting Started What’s Due? Overview 2……………………………………………………………………………… 07 Background Info Netiquette, Timeline, Copyright, Searching, What is the Internet, Carey book notes Overview 3……………………………………………………………………………… 47 HTML tags Web page lab Overview 4……………………………………………………………………………… 83 HTML tags/links HTML templates Overview 5……………………………………………………………………………… 105 Folders and Paths Test 1 Review Overview 6……………………………………………………………………………….125 Numbers and Colors Test 1, converting numbers, numerical representation of colors Overview 7……………………………………………………………………………… 139 Fonts and Graphics Crating animation, creating backgrounds, editing images, bandwidth issues Overview 8……………………………………………………………………………… 185 Tables Test 2 Review Overview 9 (HTML 4) ………………………………………………………………… 205 Tables; Begin HTML 4 concepts by using HTML editors Test 2, NVu, Dreamweaver, Image Maps Overview 10 ……………………………………………………………………………. 229 Frames Frames and Templates Overview 11……………………………………………………………………………… 255 Forms Create a working form Overview 12……………………………………………………………………………… 271 Styles / ftp (File Transfer Protocol Formatting with Styles; background and use of ftp Overview 13……………………………………………………………………………… 289 CSS, Begin Capstone Lab 10 Introduction to new HTML tricks Overview 14……………………………………………………………………………… 303 Continue Capstone Review for Test 3, using free web hosting services Overview 15……………………………………………………………………………… 307 Complete Capstone Test 3 Overview 16……………………………………………………………………………… 309 Class wrap up Final Appendix ….……….…………………………………………………………. Appendix 01 HTML Tags and attributes (elements) Appendix B Forms…………………………………………………………… Appendix 15 Appendix C Frames .………………………………………………………… Appendix 17 Appendix D Campus Specific ….…………………………………………….Appendix 21 Web Enhanced Support/Feedback/Syllabus/Attendance Policy Index……………………………………………………………………………Appendix 29 Videos, Additional Colors info, etc. are on class web site If you’re looking for something, don’t forget you can search the pdf version of this book ([Ctrl]+F) Overview 1 Getting Started Read the Orientation (Campus specific orientations in Appendix) What’s Due at the end of this Overview 6 Note: to find a specific item, open the pdf version of the book, and use [Ctrl]+F [Find] - 5 - Overview 1 activities • Read the Campus Specific Orientation at the back of the book • In your school’s Learning Management System (LMS), View the Week 1 News item, and Content for Week 1 • Update your profile in the LMS What’s due at the end of this overview Submit by 11:59 am, Friday, of the current week (Check your Learning Management System (LMS) for specific due dates) Details on your LMS are in the College Specific Appendix at the end of the book. • Participation Discussion 1 Respond in the class LMS Discussion forum to the following: Please Introduce yourself to the class • MUD 1 (My Understanding, Details) Respond in the class LMS Discussion forum to the following: What was helpful this week? What do you hope we cover next week? Please include feedback on additional content provided There are links in your LMS to more material for the class Start reading Overview 2 - 6 - Overview 2 Background Info Netiquette and Smiley 08 Timeline 10 Copyright 17 Searching the Web 19 What is the Internet 22 How does TCP/IP work 26 Creating a Web Page 28 Additional Notes 41 Checking for HTML errors 42 Additional Notes 44 Overview 2 Activities: Take Practice Test 46 What’s Due at the end of this Overview 46 - 7 - Reminder: Did you check your School eMail? Did you check the Junk folder? Netiquette and Smiley Netiquette is about not what you can do, but what you should do. The Core Rules of Netiquette were written by Virginia Shea, and discuss how you, as an Internet User, suddenly have a lot of power... and why you shouldn't let it go to your head! Below are the 10 rules Virginia Shea developed, and my quick take on them. If you would like to read what she said, go to www.albion.com/netiquette/corerules.html Rule 1: Remember the Human (you aren't dealing with machines, you are dealing with people who put information on machines; just because you can't see them doesn't mean they don't exist. All other rules relate to this one. Remember this Mantra: Treat others as you wish to be treated) Rule 2: Adhere to the same standards of behavior online that you follow in real life (Don't hide behind the anonymity of a made up username, and forget everything you mother taught you! Behave on line as you would in the non-virtual world. Treat others as you wish to be treated) Rule 3: Know where you are in cyberspace (It is illegal for people in Saudi Arabia to have pictures of bikini models... so don't email one there. You have to contend with import/export and local laws, as well as laws of places you visit electronically) Rule 4: Respect other people's time and bandwidth (Every file you get uses someone's computer power, and takes up bandwidth, which they may have to pay for. Or listening to Internet radio instead of real radio could tie up bandwidth your company needs for e-mail. Just be aware of the implications. Treat others as you wish to be treated) Rule 5: Make yourself look good online (Electronic communication lacks the nuances of body language and inflection, be sure of what you are communicating... look for double meanings, and use spell check!) More on this topic below... Rule 6: Share expert knowledge (What makes the system work is the idea of 'you rub my back, I'll rub yours.' Treat others as you wish to be treated) Rule 7: Help keep flame wars under control (If someone is an idiot, they deserve to know. Once. Don't swamp their mailbox with insults every day for the rest of your life. Treat others as you wish to be treated) Rule 8: Respect other people's privacy (If you don't want folks looking in your medicine cabinet, return the favor. Treat others as you wish to be treated) Rule 9: Don't abuse your power (You could look through other folks files, you could tie up their server, you could ruin their mail box... don't. Treat others as you wish to be treated) Rule 10: Be forgiving of other people's mistakes (You will make mistakes. How do you want to find out about it? A flame, or a friendly hint? Treat others as you wish to be treated) - 8 - Smileys and trying to communicate with email Many people retain information according to the following rates: 10% of what they read 20% of what they hear 30% of what they see 70% of what they see and hear... The problem with email is that you have eliminated 90% of communication when you are stuck with just reading. To try and overcome this shortcoming, many people try to use emoticons or abbreviations. Emoticons (Emotion Icons), or smileys, are keystrokes to represent your body language. If someone in person asks me how a student is doing... reading 'just fine' has a completely different meaning than if I said it in person, and I rolled my eyes. So to try and convey a smile, a frown, etc. people use smileys. To read a smiley, you have to turn your head 90° to the left. Some Programs actually convert the keystrokes into Emojis, to take away the guessing. So, :) Looks like And guessing can be a problem, when people use non-standard, complex emoticons, such as <||8u{)>. (That's Santa... but since it didn't convey anything until I said that, it is an example of how NOT to use them, as they don't help communication.) Many people will also use abbreviations and acronyms to try and improve communication. A lot of you know that LOL is laughing out loud, and that IMHO is In My Humble Opinion, but a lot of these also get to complex to be useful. It is so much easier to just say what you mean, re-read it for clarity, and then send it! But just in case, here is a short list of chat acronyms (or chaq, pronounced "chalk") : BFT or ttfn, bye or tata for now BRB, be right back BTW, by the way CWOT, complete waste of time DIY, do it yourself RTM, read the manual A more detailed list is at http://www.sharpened.net/glossary/acronyms.php - 9 - Hobbe’s Time Line Copyright ©1993- by Robert H Zakon.