Introduction to Website Design and Development

322 Pages·2013·8.74 MB·English

Introduction to
Website Design and Development:
HTML, CSS, and JavaScript
Don Colton
Brigham Young University–Hawai‘i
August 10, 2013
Quick Overview
Whatdoesitreallytaketomakeawebsite? Weareheretotakeyou“behind
the scenes” into the inner workings of websites.
Thisbookisforpeoplewhoarenewtowebsitedesign. Itisprettybasic, 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/.
Quick Start: Wemakeasimplewebpage,aboutfivelineslong,rightonthe
computeryouareusing. Thenwetalkaboutdomainnamesandwebhosting.
We follow that with control panels, to get your website up, and copyright,
to avoid getting your website taken down. Finally, we publish.
Web Development Tools: Face it: you do not always have to reinvent
the wheel. Many websites are built using cookie-cutter technologies. In
minutes you can have your idea (or your friend’s) up and running. We focus
on WordPress, the leading CMS in the world.
Media: Text is great, but what is a webpage without pictures? We give
you basic image editing skills. And we look into audio and video.
Content: HTML: Here we pop open the hood and look at the engine that
runs the web: HTML. Good news: it is a pretty simple language.
Presentation: CSS Style: This is where the real power lies. Adding CSS
to HTML is like turning a typewriter into a word processor.
Action: JavaScript: You learn what it takes to put JavaScript into a
webpage, and why you might want to.
Appendix: Sometimes we go deep on things, like browsers, text editors,
passwords, and more. For those that want deep, enjoy!
Ready to learn? Skip ahead to Chapter 4 (page 20).
Otherwise, stick around to see the table of contents. It is coming right up.
1
2
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 fam-
ilies, inline style, positioning, internal and external stylesheets 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 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.
Professor Jay Merryweather (http://jaymerryweather.com/, MWXDe-
sign) of the Brigham Young University–Hawaii Fine Arts department pro-
vided a detailed list of learning outcomes expected from this course in its
role as prerequisite to the Web Design courses taught in the Fine Arts de-
partment.
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 Quick Start 9
1 HTML Tags 11
2 Valid HTML 14
3 Classes and Borders 16
II Fundamentals 19
4 Local Webpages 20
5 Web Hosting 29
6 Control Panel 31
7 Domain Names 37
8 Dot TK: Domains for Free 42
9 Troubleshooting Your New Domain 49
10 Copyright 51
11 Publish: Going Online 57
4
CONTENTS 5
12 Getting Feedback 59
13 Content, Presentation, Action 63
14 Notable Resources 69
III Web Development Tools 72
15 A General Overview 73
16 Content Management Systems 76
17 WordPress 78
IV Media: Images, Audio, Video 84
18 Codecs: Coding and Decoding 85
19 Basic Image Processing 91
20 The Gimp 97
21 Image Transparency 99
22 Favicon 106
23 Tiled Backgrounds 107
24 Irregular Image Shapes 117
V Content: HTML Markup 120
25 Popular Markup 122
CONTENTS 6
26 Content in General 123
27 Markup in General 129
28 Headings and Paragraphs 141
29 Global HTML Attributes 143
30 Images 144
31 Connecting With External Resources 145
32 Relative, DocRoot, and Absolute URLs 148
33 Lists, Ordered and Unordered 154
34 Tables 156
35 Divs and Spans 159
36 Forms 161
VI Presentation: CSS Style 172
37 Styling Quick Start 174
38 Advanced Eye Candy 178
39 Colors and Backgrounds 181
40 Untangling HTML and Style 185
41 The Box Model 188
42 Fonts and Text 194
CONTENTS 7
43 Positioning 207
44 ID 209
45 Class 211
46 Pseudo-Classes 212
47 Cascading 213
48 Transitions and Animations 214
VII Action: JavaScript Programs 217
49 A Little JavaScript Fun 220
50 JavaScript to Change Class 224
51 JavaScript to Hide and Reveal 226
52 JavaScript for External Content 228
53 Other JavaScript Ideas 232
54 Triggers 233
55 Untangling HTML and Scripting 235
56 The DOM 238
VIII Appendix 239
A Elements of HTML 240
CONTENTS 8
B CSS Attributes 244
C Public Domain Content 246
D The Original Preface 249
E Browser Recommendations 253
F Text Editor Recommendations 255
G Search Engine Optimization 258
H Special Glyphs 263
I The Apache Webserver 265
J Publishing and Backing Up 275
K Password Recommendations 278
L Patterns (Regular Expressions) 284
M WordPress: Advanced Concepts 285
N Glossary 287
O Exam Questions 290
P Test Bank 297
Index 316
Unit I
Quick Start
9