Introduction to Website Design and Development: HTML5, CSS3, and JavaScript Second Edition Don Colton Brigham Young University{Hawai`i August 11, 2014 Quick Overview What does it really take to make a website? We are here to take you \behind the scenes" into the inner workings of websites. Our version of HTML is called HTML5, HTML version Five. Our version of CSS is called CSS3, CSS version Three. We assume you are new to website design. The book is pretty basic, but it also covers a lot of ground and introduces other resources. You can get the PDF for free at http://iwdd.tk/ or http://iwdd.doncolton.com/. Running Start: We build a simple webpage. We introduce HTML. Then we add CSS. Then we add JavaScript. We cover code validators. We keep everything simple. HTML and Content: Here we go deeper with HTML. What are these tags. How do they work? Good news: it is a pretty simple language. CSS for Presentation Style: Here we go deeper with CSS, the styling power that turns a typewriter (HTML) into a word processor. JavaScript for Action: Here we go deeper into JavaScript. We assume you will not be writing any JavaScript yourself, at least not anything fancy, but you need the skills to correctly glue in that fancy stuff that you find out on the Web. Appendix: We have lots of \add on" topics that are not strictly main-line, but still would interest many people. Things about domain registrars, image editing, web browsers, text editors, passwords, and much more. For those that want deep, enjoy! Ready to learn? Skip ahead to Chapter1 (page 11). Otherwise, stick around to see the table of contents. It is coming right up. 1 2 Learning Objectives This textbook provides support for the following learning objectives. By the conclusion of this course, students should be able to do these things. • Learning objective. (How we achieve it.) • Properly use HTML markup. (We cover h1, p, links, div, span, head, body, tables, lists, and forms.) • Properly use CSS to style a webpage. (We cover box model, font families, inline style, positioning, internal and external style sheets based on tag, ID, class, and pseudo-class.) • Properly segregate HTML and CSS. • Create valid HTML and CSS. (We validate our HTML and CSS against W3C standards.) • Edit images. (We use Gimp to crop, resize, use transparency, and create icons.) • Understand JavaScript. (We use it to alter the appearance of a web- page.) • Understand Webhosting and DNS. (We establish a domain name and subdomains and populate them with content.) • Understand Apache. (We use public html and index.html to create websites.) • Understand CMS. (We install and customize WordPress, a popular Content Management Systems.) Acknowledgements I am pleased to acknowledge and express my thanks for several important contributions. W3C, the World Wide Web Consortium (http://www.w3.org/), in its role as an international community for developing open standards to ensure the 3 long-term growth of the Web, provides clearly documented standards that are the basis of the modern Web. You, the students who will read this book and apply its teachings, provide a motivation and a context in which my efforts have meaning. Contents I Running Start 10 1 HTML: Your First Webpage 11 2 CSS: Adding Style 16 3 JS: Adding Action 24 4 Mechanics of the Web 27 5 Intellectual Property (Copyright) 32 II HTML and Content 37 6 Top Ten HTML Markups 38 7 Content in General 45 8 Presentational Markup 50 9 Structural Markup 51 10 Markup in General 55 4 CONTENTS 5 III HTML Continued 60 11 Markup Attributes 61 12 Lists, Ordered and Unordered 70 13 Tables: tr, td, th 72 14 Forms: Input 76 IV CSS for Presentation Style 87 15 Top Ten CSS Stylings 88 16 Untangling HTML and Style 96 17 Selectors 99 18 The Box Model 101 V CSS Continued 107 19 Color and Background 108 20 Fonts and Text 116 21 Images 130 22 Float and Clear 131 23 Responsive Web Design 132 24 Positioning 137 CONTENTS 6 VI JavaScript for Action 138 25 Top Ten Concepts 140 26 On... Triggers 142 27 Untangling HTML and Scripting 144 28 The DOM 147 29 CR Intercept 148 30 More, Less 149 31 Sorting 150 VII Grab Bag 151 32 Valid HTML 153 33 Web Hosting 154 34 Control Panel 156 35 Domain Names 161 36 Dot TK: Domains for Free 165 37 Troubleshooting Your New Domain 172 38 Publish: Going Online 174 39 Getting Feedback 176 40 Content, Presentation, Action 180 CONTENTS 7 41 Notable Resources 186 42 A General Overview 188 43 Content Management Systems 191 44 WordPress 193 45 Codecs: Coding and Decoding 199 46 Basic Image Processing 205 47 The Gimp 212 48 Image Transparency 214 49 Favicon 221 50 Tiled Backgrounds 223 51 Irregular Image Shapes 233 52 Popular Markup 237 53 Headings and Paragraphs 238 54 Global HTML Attributes 240 55 Images 241 56 Connecting With External Resources 242 57 Relative, DocRoot, and Absolute URLs 245 58 Divs and Spans 251 CONTENTS 8 59 Styling Quick Start 254 60 Advanced Eye Candy 256 61 Positioning 259 62 ID 261 63 Class 263 64 Pseudo-Classes 264 65 Cascading 265 66 Transitions and Animations 266 67 A Little JavaScript Fun 270 68 JavaScript to Change Class 274 69 JavaScript to Hide and Reveal 276 70 JavaScript for External Content 278 71 Other JavaScript Ideas 282 72 Syntax of HTML and CSS 283 73 Elements of HTML 284 74 CSS Attributes 288 75 Public Domain Content 290 76 The Original Preface 293 CONTENTS 9 77 Browser Recommendations 297 78 Search Engine Optimization 299 79 Special Glyphs 305 80 The Apache Webserver 307 81 Publishing and Backing Up 316 82 Password Recommendations 319 83 Patterns (Regular Expressions) 325 84 WordPress: Advanced Concepts 326 VIII Appendix 328 A Web Hosting 329 B Working Offline 332 C Text Editor Recommendations 340 D Exam Questions 343 E Glossary 347 F Test Bank 350 Index 376 Unit I Running Start 10 Chapter 1 HTML: Your First Webpage Contents 1.1 Version One...................... 12 1.2 Seeing Your Webpage................ 14 1.3 Version Two..................... 15 1.4 Summary....................... 15 In this chapter we will introduce HTML by having you build a simple web- page. We will introduce CSS by having you add a small amount of styling to your HTML. We presume that you already have hosting, and that someone, maybe your instructor, will show you how to use it. AppendixA (page 329) explains how to put your webpage on a web server, assuming you have web hosting. AppendixB (page 332) explains how to make and see webpages in case you do not have web hosting. AppendixC (page 340) talks about text editors, in case you are editing right at your computer, and not by way of your web host. 11 CHAPTER 1. HTML: YOUR FIRST WEBPAGE 12 1.1 Version One Here is a webpage. Key it in. Keep the essential elements, but feel free to customize it. <h1>Don's Web Page</h1> This is some normal text. <b>This is some bold text.</b> This is some normal text. <i>This is some italic text.</i> This is some normal text. <img src=don.jpg width=500> <h1> is the h1 tag. It identifies a heading at level 1, which is the most significant level. Heading levels range from h1 to h6. </h1> marks the end of the heading. Notice that there is some content, \Don's Web Page", that is surrounded by the tags, <h1> and </h1>. The tags are called markup. The content is called, well, content. Exam Question 1 (p.350): In HTML what tag is used to specify a top level header? Required Answer: h1 Exam Question 2 (p.350): In HTML what two words does the \h1" tag stand for? Acceptable Answer: heading one Next we have more content. Normal text. Bold text. Italic text. <b> is the bold tag. It specifies that the content should be presented in bold font. </b> marks the end of the bold content. Exam Question 3 (p.350): In HTML what tag is used to present bold content? CHAPTER 1. HTML: YOUR FIRST WEBPAGE 13 Acceptable Answer: b Exam Question 4 (p.350): In HTML what word does the \b" tag stand for? Acceptable Answer: bold <i> is the italic tag. It specifies that the content should be presented in italic (slanted) font. </i> marks the end of the italic content. Exam Question 5 (p.351): In HTML what tag is used to present oblique (italic) content? Acceptable Answer: i Exam Question 6 (p.351): In HTML what word does the \i" tag stand for? Acceptable Answer: italics <img...> is the image tag. It designates an image to be included in the webpage. There is no content. There is no </img> tag. The image tag is called a void tag because it does not \mark up" any content. I know, it seems like the picture itself is the content. But we count as content the things that appear between the start tag and the end tag. Exam Question 7 (p.351): In HTML what word does the \img" tag stand for? Acceptable Answer: image Exam Question 8 (p.351): In HTML what tag is used to insert a picture? Required Answer: img Exam Question 9 (p.351): For each \img" tag in valid HTML5, is a separate closing tag required, optional, or forbidden? Required Answer: forbidden CHAPTER 1. HTML: YOUR FIRST WEBPAGE 14 <img...> has two parameters: src= and width=.