Transcription
Introduction toWebsite Design and Development:HTML5, CSS3, and JavaScriptSecond EditionDon ColtonBrigham Young University–Hawai‘iAugust 11, 2014
Quick OverviewWhat does it really take to make a website? We are here to take you “behindthe 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 italso covers a lot of ground and introduces other resources. You can get thePDF for free at http://iwdd.tk/ or http://iwdd.doncolton.com/.Running Start: We build a simple webpage. We introduce HTML. Thenwe add CSS. Then we add JavaScript. We cover code validators. We keepeverything simple.HTML and Content: Here we go deeper with HTML. What are thesetags. How do they work? Good news: it is a pretty simple language.CSS for Presentation Style: Here we go deeper with CSS, the stylingpower that turns a typewriter (HTML) into a word processor.JavaScript for Action: Here we go deeper into JavaScript. We assumeyou 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 outon 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, imageediting, web browsers, text editors, passwords, and much more. For thosethat want deep, enjoy!Ready to learn? Skip ahead to Chapter 1 (page 11).Otherwise, stick around to see the table of contents. It is coming right up.1
2Learning ObjectivesThis textbook provides support for the following learning objectives. By theconclusion 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, fontfamilies, inline style, positioning, internal and external style sheetsbased on tag, ID, class, and pseudo-class.) Properly segregate HTML and CSS. Create valid HTML and CSS. (We validate our HTML and CSS againstW3C standards.) Edit images. (We use Gimp to crop, resize, use transparency, andcreate icons.) Understand JavaScript. (We use it to alter the appearance of a webpage.) Understand Webhosting and DNS. (We establish a domain name andsubdomains and populate them with content.) Understand Apache. (We use public html and index.html to createwebsites.) Understand CMS. (We install and customize WordPress, a popularContent Management Systems.)AcknowledgementsI am pleased to acknowledge and express my thanks for several importantcontributions.W3C, the World Wide Web Consortium (http://www.w3.org/), in its roleas an international community for developing open standards to ensure the
3long-term growth of the Web, provides clearly documented standards thatare the basis of the modern Web.You, the students who will read this book and apply its teachings, providea motivation and a context in which my efforts have meaning.
ContentsIRunning Start101 HTML: Your First Webpage112 CSS: Adding Style163 JS: Adding Action244 Mechanics of the Web275 Intellectual Property (Copyright)32II37HTML and Content6 Top Ten HTML Markups387 Content in General458 Presentational Markup509 Structural Markup5110 Markup in General554
CONTENTSIIIHTML Continued56011 Markup Attributes6112 Lists, Ordered and Unordered7013 Tables: tr, td, th7214 Forms: Input76IV87CSS for Presentation Style15 Top Ten CSS Stylings8816 Untangling HTML and Style9617 Selectors9918 The Box Model101VCSS Continued10719 Color and Background10820 Fonts and Text11621 Images13022 Float and Clear13123 Responsive Web Design13224 Positioning137
CONTENTSVIJavaScript for Action613825 Top Ten Concepts14026 On. Triggers14227 Untangling HTML and Scripting14428 The DOM14729 CR Intercept14830 More, Less14931 Sorting150VII151Grab Bag32 Valid HTML15333 Web Hosting15434 Control Panel15635 Domain Names16136 Dot TK: Domains for Free16537 Troubleshooting Your New Domain17238 Publish: Going Online17439 Getting Feedback17640 Content, Presentation, Action180
CONTENTS741 Notable Resources18642 A General Overview18843 Content Management Systems19144 WordPress19345 Codecs: Coding and Decoding19946 Basic Image Processing20547 The Gimp21248 Image Transparency21449 Favicon22150 Tiled Backgrounds22351 Irregular Image Shapes23352 Popular Markup23753 Headings and Paragraphs23854 Global HTML Attributes24055 Images24156 Connecting With External Resources24257 Relative, DocRoot, and Absolute URLs24558 Divs and Spans251
CONTENTS859 Styling Quick Start25460 Advanced Eye Candy25661 Positioning25962 ID26163 Class26364 Pseudo-Classes26465 Cascading26566 Transitions and Animations26667 A Little JavaScript Fun27068 JavaScript to Change Class27469 JavaScript to Hide and Reveal27670 JavaScript for External Content27871 Other JavaScript Ideas28272 Syntax of HTML and CSS28373 Elements of HTML28474 CSS Attributes28875 Public Domain Content29076 The Original Preface293
CONTENTS977 Browser Recommendations29778 Search Engine Optimization29979 Special Glyphs30580 The Apache Webserver30781 Publishing and Backing Up31682 Password Recommendations31983 Patterns (Regular Expressions)32584 WordPress: Advanced Concepts326VIII328AppendixA Web Hosting329B Working Offline332C Text Editor Recommendations340D Exam Questions343E Glossary347F Test Bank350Index376
Unit IRunning Start10
Chapter 1HTML: Your First WebpageContents1.1Version One . . . . . . . . . . . . . . . . . . . . . .121.2Seeing Your Webpage . . . . . . . . . . . . . . . .141.3Version Two. . . . . . . . . . . . . . . . . . . . .151.4Summary . . . . . . . . . . . . . . . . . . . . . . .15In this chapter we will introduce HTML by having you build a simple webpage. We will introduce CSS by having you add a small amount of stylingto your HTML.We presume that you already have hosting, and that someone, maybe yourinstructor, will show you how to use it.Appendix A (page 329) explains how to put your webpage on a web server,assuming you have web hosting.Appendix B (page 332) explains how to make and see webpages in case youdo not have web hosting.Appendix C (page 340) talks about text editors, in case you are editing rightat your computer, and not by way of your web host.11
CHAPTER 1. HTML: YOUR FIRST WEBPAGE1.112Version OneHere is a webpage. Key it in. Keep the essential elements, but feel free tocustomize 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 mostsignificant level. Heading levels range from h1 to h6. /h1 marks the endof the heading.Notice that there is some content, “Don’s Web Page”, that is surroundedby the tags, h1 and /h1 . The tags are called markup. The content iscalled, well, content.Exam Question 1 (p.350):In HTML what tag is used to specify a top level header?Required Answer:h1Exam Question 2 (p.350):In HTML what two words does the “h1” tag stand for?Acceptable Answer:heading oneNext we have more content. Normal text. Bold text. Italic text. b is the bold tag. It specifies that the content should be presented in boldfont. /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 WEBPAGE13Acceptable Answer:bExam 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 initalic (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:iExam 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 thewebpage. There is no content. There is no /img tag. The image tag iscalled a void tag because it does not “mark up” any content. I know, itseems like the picture itself is the content. But we count as content thethings 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:imageExam Question 8 (p.351):In HTML what tag is used to insert a picture?Required Answer:imgExam 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 WEBPAGE14 img. has two parameters: src and width . The img src gives a URLfor the image source. The img width specifies that the image should beshown a certain number of pixels wide.We specify width because often pictures are so large that they cannot beshown on the screen. By specifying width (or height, or both), we tell thebrowser how large to display the image.Exam Question 10 (p.351):In HTML when we specify image width, does it affect download time?Required Answer:noExam Question 11 (p.351):In HTML when we specify image width, does it affect displayed size?Required Answer:yes1.2Seeing Your WebpageTo share your webpage, you must put it on a web server. Appendix A (page329) explains how to put your webpage on a web server.Your webpage must have a “name” by which people can request it. Thatname is called its URL.Exam Question 12 (p.351):What three words does URL stand for?Required Answer:uniform resource locatorThe language used for writing webpages is called HTML.Exam Question 13 (p.351):What four words does HTML stand for?Required Answer:hyper text markup language
CHAPTER 1. HTML: YOUR FIRST WEBPAGE1.315Version TwoWe will add some very simple styling.Insert these lines:This is a line span style background:yellow with colored background /span for some of the words.The style thing is an HTML attribute. It is part of the span thing, whichis an HTML tag.Save your changes and reload your webpage.Let’s put a border around your picture. Inside your img tag, add the following style attribute:style ’border:thick black double’Save your changes and reload your webpage. A thick black double lineshould appear around your picture. Later we will talk more about borders.1.4SummaryYou have created your first webpage. You have done the following things: Shown you can cope with a control panel. Created a web page in the proper directory. Used h1, b, and i tags. Uploaded and displayed a picture. Controlled the displayed size of the picture.
Chapter 2CSS: Adding StyleContents2.1Head and Body . . . . . . . . . . . . . . . . . . . .172.2Validation . . . . . . . . . . . . . . . . . . . . . . .182.3Internal Style Sheet . . . . . . . . . . . . . . . . .192.4Apply The Styles. . . . . . . . . . . . . . . . . .202.5Here Are Some Styles . . . . . . . . . . . . . . . .212.6Suggested Project . . . . . . . . . . . . . . . . . .23In Chapter 1 (page 11) we used a small amount of styling. This is calledin-line styling. We styled a background color to be yellow, and we styled animage to have a border.Our approach to everything was pretty casual, which is okay for a firstwebpage. Strictly speaking, it was not valid HTML. But now we will tightenup our approach.There are formal rules for HTML, and when we follow those rules, ourwebpage should work with all browsers in pretty much the same way. Whenwe do not follow those rules, the browsers are free to guess what we meant,and they may guess differently from each other.Best Practices: Write valid HTML code.16
CHAPTER 2. CSS: ADDING STYLE2.117Head and BodyWe will put our webpage in context by wrapping it in body tags and puttinga head in front of it. Like this: !DOCTYPE html head lang en meta charset utf-8 / title Your Title Goes Here /title /head body your original webpage goes here /body The !DOCTYPE html line tells the browser that we are writting accordingto the HTML5 standard.The head. and /head tags surround the head of our webpage.The head lang en line tells the browser that the following lines are thehead of the document, until we encounter /head which ends the head. Italso says that this document is presented in the English language.The meta charset utf-8 / line tells the browser that the character setused with this document is UTF-8. UTF-8 stands for UCS TransformationFormat, 8 bit. It is currently the most-used standard, and is the defaultthat is assumed if you do not specify anything.Exam Question 14 (p.351):In HTML5 what tag and attribute are used to specify the characterset?Required Answer:meta charset Exam Question 15 (p.351):For each “meta” tag in valid HTML5, is a separate closing tag required,optional, or forbidden?Required Answer:forbiddenThe title and /title tags surround the title of our webpage.Exam Question 16 (p.351):In HTML what tag is used to specify the name of the webpage?
CHAPTER 2. CSS: ADDING STYLE18Required Answer:titleExam Question 17 (p.351):For each “title” tag in valid HTML5, is a separate closing tag required,optional, or forbidden?Required Answer:requiredThe body and /body tags surround the body of our webpage.2.2ValidationWe will add some lines for validation purposes. Put these right before the /body tag. p Validate: a href "http://validator.w3.org/check?uri referer" HTML /a a href "http://jigsaw.w3.org/css-validator/check/referer" CSS /a /p After saving your webpage, you should be able to load it, view it, and seethat it is almost the same as before. When you click on the HTML link, theHTML validator will examing your code and tell you whether it is correct.When you click on the CSS link, the CSS validator will examing your codeand tell you whether it is correct.Exam Question 18 (p.351):In HTML what tag is used to specify a paragraph?Required Answer:p
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.
