Practical web design for absolute beginners

Learn the fundamentals of modern web design, rather than relying on CMS programs, such as WordPress or Joomla!. You will be introduced to the essentials of good design and how to optimize for search engines. You will discover how to register a domain name and migrate a website to a remote host. Because you will have built the web pages yourself, you will know exactly how HTML and CSS work. You have will complete control over your websites and their maintenance. __Practical Website Design for Absolute Beginners__ centers around introducing small amounts of new code in short practical chapters and provides many website templates that can be easily adapted for your own websites. Each chapter builds on the templates created in the previous chapter. You are provided with a practical project to complete in most chapters, and taught to produce practical web pages right from the start. In the first chapter you will install and configure a free text editor, then you will produce the structure for your first web page. You will then gradually learn to create more sophisticated and increasingly practical web pages and websites. In this book you will be encouraged by means of a series of achievable goals, and you will be rewarded by the knowledge that you are learning something valuable and really worthwhile. You will not have to plow through daunting chapters of disembodied code theory because the code is described and explained in context within each project. Because each project is fully illustrated, you will see clearly what you are expected to achieve as you create each web page. **What You'll Learn** * Provides instructions for installing a text editor for producing HTML and CSS * Shows you step-by-step how to build and test web pages and websites * Teaches you how to ensure that your websites are attractive and useful * Describes how to make the most effective use of color and images * Teaches you the essential features of search engine optimization * Shows you how to migrate your website to a remote host **Who This Book Is For**__Practical Website Design for Absolute Beginners__ is for people who want to begin designing their own websites. It uses a highly motivational, easily assimilated step-by-step approach where you will start learning practical skills from the very first chapter. The book is an excellent choice for people who have computer skills but would also like to learn HTML and CSS. For readers who have little or no knowledge of HTML and CSS, the book will teach enough to complete all the projects in the book. Contents at a Glance......Page 5 Contents......Page 8 About the Author......Page 26 About the Technical Reviewer......Page 27 Acknowledgments......Page 28 Introduction......Page 29 Definitions......Page 34 The Advantages of Using Code Rather Than CMS......Page 35 But What About CSS?......Page 37 Install a Free HTML Text Editor......Page 38 The Basic Structure for Every Web Page......Page 39 Enhancing the Structure......Page 40 Create the Structure of Your First Web Page......Page 42 Discussion of the First Six Lines of the HTML Code in Listing 1-1......Page 44 Summary......Page 45 Let’s Add Some Content to Your Web Page......Page 46 Create a Home Page......Page 48 Add Hyperlinks to the Two Pages......Page 49 Summary......Page 51 How Do We Link HTML Pages to a CSS Style Sheet?......Page 52 Create a Folder for the New Chapter......Page 53 Creating a Simple CSS Style Sheet......Page 55 Explanation of the Style Sheet style.css......Page 56 How Much do you Need to Remember?......Page 58 Summary......Page 59 Create the Three-Column Page......Page 60 Explanation of the Code......Page 62 Explanation of the Amended CSS Code......Page 63 Revise the CSS Code......Page 64 Explanation of the Revised CSS Code......Page 65 Summary......Page 66 Chapter 5: Create Web Pages with Four Columns Using CSS......Page 67 Create Web Pages with Four Columns......Page 68 Insert New Styles in the CSS Style Sheet......Page 70 Create Two More Pages......Page 71 The Importance of Forward Planning......Page 72 Summary......Page 73 Chapter 6: Add Pictures to Websites......Page 74 The Problem with Some Older Browsers......Page 75 To Alter the Home Page Using a WYSIWYG Editor......Page 76 To Alter the Home Page Using a Plain Text Editor......Page 77 Alter the CSS File to Style the New Home Page......Page 78 Change the Heading in the Other Three Pages......Page 79 Summary......Page 80 Allowing Internet Explorer 8 to Understand Semantic Tags......Page 81 Add the JavaScript and Some Hyperlink Tags That Can Be Styled......Page 83 Explanation of the Code......Page 84 Make a Minor Change to the CSS Style Sheet......Page 85 Explanation of the CSS Code......Page 86 Summary......Page 87 Improving the Appearance of the Menu Hyperlinks......Page 88 Explanation of the Code......Page 91 Create 3D Buttons with a Rollover Feature......Page 92 Explanation of the Code......Page 94 Summary......Page 97 Choosing Color Schemes......Page 98 How Website Colors Are Produced......Page 99 Understanding the CSS Color Codes......Page 100 Tutorial: Adding More Color to our Website......Page 101 Explanation of the Code......Page 103 Using Color Pickers on WYSIWYG Text Editors......Page 104 Tweaking Colors......Page 106 Summary......Page 107 Screen Sizes and Screen Resolutions......Page 108 Will the Website Work on a Handheld Device?......Page 109 Semi-Liquid Layouts Provide the Best Compromise......Page 110 Create a Template with a 3D Menu for Use in your Future Websites......Page 111 Explanation of the Code......Page 112 Creating Two Templates with Plain Menu Buttons......Page 113 Summary......Page 115 Chapter 11: A Vertical Menu with a Picture Gallery......Page 116 Adapting the Home Page......Page 117 Change page-2.html to Create the About Us Page......Page 118 Left-Align the Text in the About Us Page......Page 120 Create the Location Page Using the File page-4.html......Page 121 Creating the Gallery Page......Page 122 Explanation of the Code......Page 125 Summary......Page 127 Download and Install Four Templates with Horizontal Menus......Page 128 Converting a Vertical Menu into a Horizontal Menu......Page 129 The Modified CSS Style for a Horizontal Menu with 3D Buttons......Page 130 Explanation of the Code......Page 131 The Modified CSS Style for a Horizontal Menu with Plain Buttons......Page 132 Tutorial: Taking Advantage of a Horizontal Menu......Page 133 Tutorial......Page 134 Explanation of the code for Listings 12-6 to 12-10......Page 137 Summary......Page 138 Image File Formats Suitable for Websites......Page 139 Creating a New Appearance Using Background Tiles......Page 142 Tweaking the CSS Style Sheet......Page 143 Explanation of the Code......Page 144 Altering the home page index.html......Page 146 Explanation of the Code Changes......Page 147 Summary......Page 148 Chapter 14: Vertical and Horizontal Menus on the Same Page: Colored Columns......Page 149 Tweak the Home Page index.html......Page 150 Change the Other Three Pages......Page 152 Tweak the Style Sheet......Page 153 Create Four Templates Containing Both Horizontal and Vertical Menus......Page 155 Summary......Page 157 More About Using Tiles in the Background of a Website......Page 158 Semi-seamless tiles......Page 159 Pictorial tiles......Page 160 Create a Different Appearance Using Two New Tiles......Page 161 The Box Model......Page 163 Summary......Page 164 Create a Simple Two-Column Table......Page 165 Explanation of the Code......Page 166 Explore the Default Double Border Style......Page 167 Placing a Four-Column Table within a Web Page......Page 168 Summary......Page 171 Basic Rules for an Attractive Website......Page 172 The Navigation Menu Must Be Prominent......Page 173 The Use and Misuse of Text......Page 174 Avoid Gimmicks......Page 175 Auto-start Audios, Videos, and Slide Shows......Page 176 Create a Web Page with an Encoded Email Address......Page 177 Explanation of the escramble JavaScript......Page 179 Summary......Page 180 Design a Feedback Form......Page 181 Explanation of the Changes......Page 184 Add an Internal Style to Position the Form Elements......Page 185 Explanation of the File’s Internal Style......Page 186 Add the Form Code to the contact.html Page......Page 187 Explanation of the Form Code......Page 189 Summary......Page 191 How Search Engines Work......Page 192 Choosing Keywords and Phrases......Page 193 The Meta Tag/Keywords Controversy......Page 194 External Links......Page 195 Restrictions on Excessive Repetition......Page 196 Things You Should Never Do......Page 197 A Web Page Containing No Search Engine Optimization......Page 198 Explanation of the SEO Faults in Listing 19-1......Page 199 Optimize the Spring Garden Home Page for Search Engines......Page 200 Explanation of the Code......Page 203 Summary......Page 205 Absolute Positioning......Page 206 Relatively Positioning an Image......Page 208 An Experiment Using Relative Positioning......Page 209 Positioning Images Across the Wrapper Boundary......Page 210 Positioning Images Next to Text......Page 212 The Property Applied to Floated Elements......Page 214 Positioning by Using the Margin Property......Page 215 Summary......Page 216 The Time-Saving Code......Page 217 A Note About PHP Code......Page 218 Download and Install XAMPP for Windows......Page 219 Starting XAMPP......Page 221 The XAMPP Security Console......Page 222 The htdocs Folder......Page 224 Testing PHP Files in XAMPP......Page 225 Using the PHP include Command......Page 226 Create the External File for the Header......Page 227 Create the External File for the Vertical Menu......Page 228 Create the External File for the Footer......Page 229 Inserting the PHP include Command to Replace the Code for the Four Included Elements......Page 230 View the File Using the XAMPP Server on Your Computer......Page 231 Summary......Page 233 Chapter 22: More on Using PHP include......Page 234 Change the External Footer File (footer.html)......Page 235 Create a Template and a New Page (spring-bulbs.php)......Page 237 Create the Page spring-seeds.php......Page 238 Create the Page about.php......Page 239 Create the Page Named location.php......Page 240 Modify the Page Named contact.php......Page 241 Summary......Page 243 Chapter 23: Receive Emails from a Contact Us Page......Page 244 Examine the Code of the Downloaded Page form-handler-typical.php......Page 246 Explanation of the Typical Form-Handler Code......Page 248 Validating User Input......Page 254 Create the Thank-You Page......Page 255 Create the Email Error Message Using the Code in Listing 23-5......Page 256 Create the Error Message to Prevent URLs Being Entered......Page 257 Summary......Page 258 Using Other People’s Multimedia Clips......Page 259 What to Avoid......Page 260 The BarelyFitz Designs Slideshow......Page 261 Test the Slideshow......Page 264 Today’s Video Formats......Page 265 Explanation of the Code......Page 266 How to Embed the HTML5 Video Code in a Web Page......Page 267 Signing up for a YouTube Account......Page 269 Summary......Page 270 Chapter 25: Create a Tab Menu......Page 271 Examine the Code for the Home Page......Page 273 Other Items Also Change from Page to Page......Page 274 Examine the Code for the CSS File......Page 275 Explanation of the Code......Page 276 Create Two New Pages......Page 277 Summary......Page 279 Why Drop-Down Menus may not Suit all Types of Websites......Page 280 Planning the Menu......Page 281 Explanation of the Code......Page 284 Showing and Hiding the Drop-Down Submenus......Page 285 Create a New Page to See how the Drop-Down Menu Works......Page 286 Create the Publications Page......Page 287 Summary......Page 288 Chapter 27: Drop Shadows......Page 289 Drop Shadows for Images and Websites with Sharp Corners......Page 290 Explanation of the Code......Page 291 Drop Shadows for a Website with Rounded Corners......Page 292 Add a Drop Shadow and a White Border to an Image......Page 293 Explanation of the Code......Page 294 Add a Drop Shadow to Text......Page 295 Shadows on Four Sides of an HTML Element......Page 296 Create a Four-Sided Drop Shadow......Page 297 Summary......Page 298 Chapter 28: User Name and Password for a Member’s Page......Page 299 Create the Login Page......Page 300 Create a Members’ Page......Page 302 Create a Login-Handler......Page 304 Explanation of the Code......Page 305 Summary......Page 306 Add an Order Form Button to the Vertical Menu......Page 307 View and Modify the Order Form......Page 308 Explanation of the Unfamiliar Code in Listing 29-1......Page 313 Examine the Style Sheet for the Order Form (order.css)......Page 315 Create the Style for the Printed Version of the Form (print-order.css)......Page 316 Summary......Page 318 Chapter 30: Add a Search Field to Your Website......Page 319 Bing Search Field......Page 320 Yahoo! Search Field......Page 321 Google Search Field......Page 322 Testing the Google Search Field on One of My Websites......Page 324 Summary......Page 325 The Problem with Default Bullets......Page 326 Create a Test Page......Page 327 Reduce the Gaps Caused by the Default Bullets......Page 329 Add Bold Headings to the Bulleted Paragraphs......Page 330 More Bullet Styles Using CSS......Page 331 Summary......Page 333 View the Pages in the Downloaded Folder......Page 334 Tweak the Menu So That It Can Be Styled to Indicate the Selected Menu Button......Page 335 Make a Small Change to the Home Page Styling to Match the Revised Menu......Page 336 Add the Indicator Style to the Other Pages......Page 337 Emphasize the Page Indicator......Page 339 Summary......Page 340 View the Pages in the Downloaded Files......Page 341 Make Minor Changes to the Menu to Indicate That a Particular Button Has Been Clicked......Page 344 Change the Menu on the Other Pages......Page 345 Emphasize the Menu’s Page Indicator......Page 346 Summary......Page 347 Chapter 34: Creating Multi-row Menus and Picture Galleries......Page 348 Create a Double Row of Menu Buttons......Page 349 Explanation of the Code......Page 350 The CSS Code......Page 351 To Accommodate an Odd Number of Buttons......Page 352 Create a Gallery with Four Rows of Pictures......Page 353 Explanation of the Code......Page 355 Summary......Page 357 Chapter 35: Building Responsive Websites for Mobile Devices Part 1......Page 358 Definitions......Page 359 Different Websites? Or Different Style Sheets?......Page 360 The Viewport Statement......Page 361 Media Queries and the Responsive CSS Style Sheet......Page 362 Explanation of the Demonstration Media Query CSS Code......Page 363 Using Proportional Dimensions for the Elements on RWD Pages......Page 364 Responsive Images......Page 365 The Responsive Navigation Menu......Page 366 Explanation of the Styles (style.css)......Page 370 Testing Responsive Websites......Page 371 Summary......Page 372 Adding a Drop-Down Feature to the Menu Buttons......Page 373 Explanation of the Code......Page 375 Creating a Two-Column Responsive Web Page......Page 376 Explanation of the Code......Page 379 Creating a Three-Column Responsive Web Page......Page 380 Explanation of the Code......Page 381 Explanation of the Code......Page 382 Creating a Four-Column Responsive Web Page......Page 383 Summary......Page 384 A Collapsible Responsive Menu......Page 385 Explanation of the HTML Code......Page 387 Explanation of the CSS Code......Page 389 Adding a Header......Page 392 Summary......Page 394 Summarizing the Use of Media Queries in CSS Style Sheets......Page 395 View the Responsive Pages in This Chapter’s Website......Page 396 The Supplementary Style Sheet Links......Page 397 The Supplementary Style Sheets......Page 398 Adding New Menu Buttons and Extra Drop-Down Items......Page 400 Bullet Points and the Unordered List Problem......Page 401 Responsive Videos......Page 403 Responsive YouTube/Vimeo Videos......Page 404 Explanation of the Code for fitvids-test.html......Page 406 Fonts......Page 407 Items That Are Not Under the Control of the Designer......Page 408 Summary......Page 409 Pitfalls That Can Be Avoided......Page 410 An Example of an Acceptable CMS Design......Page 411 CMS Pitfalls That Are Very Difficult or Impossible to Avoid......Page 413 Summary......Page 414 Choosing a Domain Name......Page 415 Allow the FTP Client to Connect to a Host......Page 416 Getting to Know Your FTP Client......Page 421 Storing the FTP Details......Page 422 Using the Advanced Tab to Create Automatic Connections......Page 424 Set the Date Format......Page 425 Uploading Folders and Files to the Remote Host......Page 426 Validate your Web Pages......Page 428 Using the W3C Validator......Page 429 A W3C Validation Report Found the Following Three Errors......Page 432 Byte Order Mark Found......Page 433 Rare or Unregistered Character Encoding Detected......Page 434 Some of the Most Common Validation Error Messages......Page 435 Validate the CSS......Page 437 Embed the HTML5 Logo......Page 438 The Solution for a Verifiable HTML5 Logo......Page 439 Summary......Page 440 Web Page Structure......Page 441 HTML Tags......Page 442 The Main Structural Tags......Page 443 Gold......Page 445 Columns......Page 446 Elements within the Content Area......Page 447 Styling the Text with HTML......Page 448 CSS Styles Sheets......Page 449 Precautions when Downloading Free Programs......Page 450 File Minimizer Pictures......Page 451 Summary......Page 454 Which Free WYSIWYG Program Is Best?......Page 455 The WYSIWYG View in Expression Web May Look Odd......Page 456 Download, Install, and Configure MS Expression Web 4 (Free)......Page 457 Configure the Toolbars in Expression Web......Page 458 Selecting Alternative Browsers for the Design View of MS Expression Web 4......Page 459 Avoiding the Dreaded