Introduction to Website Design and Development: HTML5, CSS3, and JavaScript Fourth Edition Don Colton Brigham Young University–Hawai‘i February 27, 2016 Contents I Web Design 101 5 1 First Webpage 8 2 Content vs Markup 13 3 Head Sets The Stage 23 4 HTML Tags and Attributes 36 5 Image Crop and Resize 49 6 Using External Resources 59 7 Colors 71 8 Image Transparency 81 9 CSS: The Style Sheet 90 10 Font Families 98 11 Hover and Pseudo Classes 115 12 Box Model 126 1 CONTENTS 2 13 Positioning: Relative and Absolute 138 14 JavaScript and AJAX 146 15 Lists and Menus 156 16 Tables 162 17 Forms and Inputs 172 18 Responsive Web Design (RWD) 185 19 First Website 197 II Appendix 217 20 Glossary of Terms 218 21 Working Offline 221 22 Browser Recommendations 228 23 Text Editor Recommendations 230 24 Password Recommendations 232 25 Copyright and Intellectual Property 238 26 The Gimp Image Editor 246 27 Gimp Makes A Logo 248 CONTENTS 3 III Under Development 255 28 Styling With CSS 256 29 Dot TK: Domains for Free 265 30 ID 272 31 Backgrounds 274 32 WordPress and CMS 277 33 Audio and Video 286 34 Untangling HTML and Style 288 35 ch31 CSS Selectors 291 36 ch32 Untangling HTML and Scripting 293 37 ch34 Getting Feedback 296 38 ch35 Content, Presentation, Action 300 39 ch36 Notable Resources 305 40 ch37 A General Overview 307 41 ch38 Codecs: Coding and Decoding 310 42 ch39 Tiled Backgrounds 315 43 ch42 Elements of HTML 325 44 Target Skills, Basic Skills 329 CONTENTS 4 45 Advanced Eye Candy 331 IV Test Bank and Index 335 46 Test Bank 336 Index 363 Unit I Web Design 101 5 Foreword The first part of this book is divided into chapters, each of which is roughly intended as the topic for one class period. The appendix contains additional material and provides a comprehensive index. Many of the chapters include questions that students should be ready to answer in class. The questions are designed to let the teacher assess the stu- dent’s reading effectiveness. With each question an answer is given. Some- times, like with a yes/no question, a specific answer is required, and you must give the answer that is shown in the book. No other answer will be accepted. In most cases an acceptable (but not required) answer is given, by which we seek to balance between brevity and completeness. For these questions students are welcome to answer in their own words. The back part of the book is an appendix. It contains material that goes beyond the 101 level. It also contains a list of the test questions that appear throughout the book. And it has a glossary of terms. The final part of the appendix is a comprehensive index of the important topics covered in the book. Learning Objectives Thistextbookprovidessupportforthefollowinglearningobjectives. Bythe 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 6 7 families, inline style, positioning, internal and external style sheets based on tag, ID, class, and pseudo-class.) • Properly segregate HTML and CSS. • CreatevalidHTMLandCSS.(WevalidateourHTMLandCSSagainst W3C standards.) • Edit images. (We use Gimp to crop, resize, use transparency, and create icons.) • Understand JavaScript. (We use it to dynamically alter the appear- ance of a webpage.) • 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 System.) Acknowledgements I am pleased to acknowledge and express my thanks for the following 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 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 motivation and context in which my efforts have meaning. Chapter 1 First Webpage Contents 1.1 Version One . . . . . . . . . . . . . . . . . . . . . . 9 1.2 A Word About Pixels . . . . . . . . . . . . . . . . 10 1.3 Seeing Your Webpage . . . . . . . . . . . . . . . . 11 1.4 Version Two . . . . . . . . . . . . . . . . . . . . . 11 1.5 Summary . . . . . . . . . . . . . . . . . . . . . . . 12 The language used for writing webpages is called HTML. In this chapter we introduce HTML by having you build a simple webpage. We introduce CSS by having you add a small amount of styling to your HTML. Exam Question 1 (p.336): What does HTML stand for? Acceptable Answer: hyper text markup language Appendix 21 (page 221) tells how to make and see webpages “offline,” with- out using any web hosting. Appendix 22 (page 228) tells about the major browsers, and which ones to use in testing your webpages. Appendix 23 (page 230) talks about text editors, for when you are editing right at your computer, and not by way of your web host. We presume that you already have hosting, and that someone, maybe your instructor, will show you how to use it. 8 CHAPTER 1. FIRST WEBPAGE 9 If that is not true, you can look in the appendix of this book for more help. Appendix19.1.2(page199)discusseswebhosting. Ittellsyouhowtoacquire it, and how to put your webpage on a web server. Appendix 19.4 (page 204) shows how to use cPanel, a popular web hosting control panel. 1.1 Version One Here is a webpage. Key it in. Keep the essential elements, but feel free to customize it. Use your own name instead of mine, for instance.

Don's Web Page

This is some normal text. This is some bold text. This is some normal text. This is some italic text. This is some normal text.

is the h1 tag. It identiﬁes a heading at level 1, which is the most signiﬁcant level. Heading levels range from h1 to h6.

marks the end of that heading. Notice that there is some content, “Don’s Web Page”, that is surrounded by the tags

and

. The tags are called markup. The content is called, well, content. Next we have more content. Normal text. Bold text. Italic text. istheboldtag. Itspecifiesthatthecontentshouldbepresentedinbold font. marks the end of the bold content. is the italic tag. It specifies that the content should be presented in italic (slanted) font. marks the end of the italic content. Incidentally,~~isthestrikethroughtag. Itspecifiesthatthecontentshould be presented with a horizontal line through the middle of it.~~ marks the end of the strikethrough content. Incidentally, is the underline tag. It specifies that the content should be presented with a horizontal line right below it. marks the end of the

HTML5, CSS3, and JavaScript Fourth Edition

Similar HTML5, CSS3, and JavaScript Fourth Edition