Beginning HTML5 & CSS3 For Dummies® (2013)
Part VII
Appendixes
Appendix B
About the Dummies HTML Website
The Dummies HTML website (www.dummieshtml.com) contains every example from this book, as well as blog posts from Ed and Chris, links to great HTML and CSS resources, and the occasional correction to the occasional error that may have slipped through the cracks during our extensive editing and fact-checking process.
The site itself can also serve as an example of good web design and construction practices. In this appendix, we cover some of the thinking, tools, and techniques that went into the building of www.dummieshtml.com.
About WordPress
As with the previous edition of the Dummies HTML website, we chose to use WordPress as our content management system.
WordPress is free software for creating websites and blogs. WordPress makes it easy for anyone to set up and manage a website that contains all of the features you’d expect a blog to have, including the following:
Unlimited pages and blog posts
Reader comment functionality
A media library for storing your images, videos, and sound files
Customizable menus
WordPress is also highly customizable, and thousands of people have built themes for customizing how a site looks and plug-ins for changing how it works.
The dashboard
Figure B-1 shows the WordPress dashboard. Each WordPress site has its own dashboard, where you can access the various functions of the site and create new content.
Figure B-1: The WordPress Dashboard.
Appearance and themes
From the Dashboard, you can access the Appearance and Themes administration items. Figure B-2 shows the Manage Themes screen for the Dummies HTML site.
Figure B-2: The WordPress Manage Themes screen.
We chose a theme called Twenty Twelve for our site. However, hundreds of other themes are available, and you can find and install many of them by going to the Install Themes screen, shown in Figure B-3.
Figure B-3: The WordPress Install Themes screen.
Pages and posts
After you’ve installed WordPress and selected a theme, you’ll spend most of your time creating either posts or pages.
Posts are individual content items, such as blog posts or articles, that can be tagged, categorized, displayed in lists, and commented on by readers. You can access the blog posts on the Dummies HTML site by clicking the Blog link in the menu that runs horizontally across the top of each page.
Pages make up the structure of a WordPress site. Your site’s home page, the About the Author (or About the Company) page, and content you wouldn’t typically categorize or list goes on pages. On the Dummies HTML site, the Welcome, Downloads, Errata, Store, About Us, Links, and Contact Us pages are all pages.
Widgets
If you look at any page of the Dummies HTML WordPress site, you see a column to the right of the main content that remains the same as you go from page to page. This is called a sidebar. The items within the sidebar are widgets.
Currently, the site has three sidebar widgets:
Search: Use this text box to locate specific content on the site.
Connect With Us: Click the icons in this widget to follow us on Twitter, like us on Facebook, or subscribe to our RSS feed.
Recent Comments: See what questions and comments people are leaving on our posts and pages here!
Responsive Design
The Dummies HTML website uses a responsive design to ensure that it will work and look good on any size of desktop or mobile device. However, you don’t need to open the site on a mobile device to see how this responsive design works. To test it, just resize your browser window gradually from wide to thin and watch as the content and menu items reflow to fit the current screen size. When the browser width is reduced to the width of a smartphone, the menu is reduced to a single collapsible link to save space.
Figure B-4 shows the progression of the site design from its maximum width to its minimum width.
HTML5 Cafe
The HTML5 Cafe website that we built to demonstrate features of HTML5 and CSS3 discussed throughout this book can be accessed at www.dummieshtml.com/html5cafe or by clicking the HTML5 Cafe link in the menu of the Dummies HTML website.
HTML5 Cafe is made up of four main web pages, two style sheets, and three images.
The home page
The HTML5 Cafe home page, shown in Figure B-5, establishes the purpose of the site, displays a simple coffee cup graphic, and contains the caption (and Chris’s personal 5:30 a.m. writing mantra) “powered by coffee.”
If you view the source of the home page, you see some code that should be familiar to anyone who has read the chapters of this book.
A quick shortcut to view the source markup of a web page in most browsers is to press CTRL + U (on Windows) or CMD + OPTION + U (on the Mac).
Figure B-4: Responsive web designs adapt to the browser width.
Figure B-5: The HTML5 Cafe home page.