Embed Size (px)
Citation preview
Creating Exciting Web Pages
Mike Davis
This book is for sale at http://leanpub.com/excitingwebpages
This version was published on 2014-12-09
This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing process. LeanPublishing is the act of publishing an in-progress ebook using lightweight tools and many iterations to getreader feedback, pivot until you have the right book and build traction once you do.
©2013 - 2014 Mike Davis
Contents
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iTags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii
1. Writing our HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.1 Brackets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.2 Local Site Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41.3 Creating our Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
IntroductionWith all the different technologies available today the web is an exciting place. There are so many differentbrowsers, devices, interactive features, and rendering options that even with all of the cool things that youcan do, it can be daunting to think of how to build a webpage, let alone a website.
This course will walk you through how to build an entire website, from building the HTML (Hyper TextMarkup Language) to designing the look and feel with CSS (Cascading Style Sheets) and LESS (Leaner CSS).Wewill also use PHP (PHPHypertext Preprocessor) and a CMS (Content Management System) to help controlour content. We will also use a popular CSS framework called Bootstrap to help us control the look and feel,but also to add additional functionality and a responsive design.
What we will build
For this course we will build a simple four page site that can be used as a personal site for yourself to postlike a blog. Or like in the example can be used as a professional site to post research article, which is why theinternet was originally invented.
Flip to the next page to see an example of the site we will build. You can also find an example of the completedsite by visiting mdavis.in/space
i
Introduction ii
Example Site Screenshot
You can view an example of the completed site at mdavis.in/space
Introduction iii
Tags
An overview of the HTML tags we will use.
HTML (Hype Text Markup Language) is not a programming language but rather a language comprised oftags to describe what the text and images on a page are for the browser to interpret.
Lets look at the tags we will use in building our pages.
1. <!doctype> – Defines the document type.2. <html> – Defines the root of an HTML document.3. <head> – Defines information about the document.4. <meta> – Defines metadata about an HTML document.5. <link> – Defines the relationship between a document and an external resource.6. <title> – Defines a title for the document.7. <body> – Defines the document’s body.8. <header> – Defines a header for a document or section.9. <section> – Defines a section in a document.10. <img> – Defines an image.11. <nav> – Defines navigation links.12. <div> – Defines a section in a document.13. <button> – Defines a clickable button.14. <span> – Defines a section in a document.15. <ul> – Defines an unorderd list.16. <li> – Defines a list item.17. <a> – Defines a hyperlink.18. <main> – Specifies the main content of a document.19. <h1> through <h6> – Defines HTML headings.20. <p> – Defines a paragraph.21. <i> – Defines a part of text in an alternate voice or mood.22. <article> – Defines an article.23. <footer> – Defines a footer for a document or section.24. <script> – Defines a client-side script.
To view a full list of HTML tags on the w3school HTML Reference page.
1. Writing our HTMLHTML is the fundamental Building block for all webpages. No mater what language you create your page onon the server, the browser gets an HTML file to read and display to your users.
Starter Kit
To get started we will need to download a set of files so that we can build our site. I have created all the filesthat we will need to build the example site. You may use these files as a guide to create your own files foryour own sites later. You can download all the files we need as well as a copy of this course pack from thesite.
Visit the following site in your browser to download the starter files:mdavis.in/space/downloads
1
Writing our HTML 2
1.1 Brackets
..
Figure 1: Brackets interface
1. Working Files – Shows you the files you currently have open and are working on.2. Sort Working Files – Allows you to sort the files you currently have open and are working on.3. Current Folder/Site – Shows you the folder of your site and its file tree.4. Code Editor – Where you will write all your code.5. Live Preview – Will launch a Chrome window that will allow you to see your code in the browser.6. Extension Manager – Find different extnensions, or manage the ones you have installed.
Whenever we build a site we need to use a code editor to write our code. Brackets is an open source codeeditor for web designers and front-end developers. It is a cross platform code editor so you should be able torun this on Window, Mac, and Linux.
To download Brackets visit: brackets.io
Once there click on the download button to download the software.
After you have downloaded the software, install it on your computer.
Writing our HTML 3
Brackets Extensions
One of the great parts about Brackets is that people can write extensions to extend the functionality of thesoftware. For our purposes we will need to add a few extensions to allow us to work on our site.
1. From the extension manager search for “LESS AutoCompile” and once you have found it, click onInstall to install it.
2. Next from the extension manager search for “Emmet” and once you have found it, click on Install toinstall it.
These two plugins will allow us to speed up our workflow when building our site. The LESS Autocompilewill help us when we are working on our style sheets, and Emment has some great features to make writingcode easier. To learn more about LESS visit lesscss.org. For more information about Emmet visit emmet.io.
Writing our HTML 4
1.2 Local Site Setup
When talking about webpages or websites, “Local” means the files on your computer. Typically when youcreate a site you will have a local copy (the copy on your computer), a remote copy (the live site), and abackup copy (one stored somewhere else in case something goes terribly wrong).
There are many different ways to set up a local site, and depending on what software you have available touse, each set up is different. For this course we will use Brackets, which we just installed.
When building a site with Brackets it is vitally important to setup a local site so that it can track all the filesassociated with your site.
To start we can create the local site by simply making a folder and placing all of the folders, subfolders, andfiles that we need inside of it.
Typically you would store this file in a “Sites” folder where all of the different sites on your computer will bestored.
So lets start by telling Brackets that our site will be in the folder we just downloaded.
1. Setup your site folderUse the following folder structure to make sure that you have everything you need. If you downloadedthe starter kit you should have a folder like this already.
Figure 2: File Tree
2. Set the “Current Folder/Site” inside of BracketsClick on the “Current Folder/Site” and browse to find your site folder. Choose the folder to specifyour site inside of Brackets.
Writing our HTML 5
1.3 Creating our Site
Now that we have our site folder setup and specified inside of Brackets, we can start building our site. Thefirst page that we create will be the basis for all of the other pages of our site. It will ultimately become thetemplate for our pages. That template will allow us more easily maintain our site and pages. When we createthis template, we can build it just like we do a regular HTML page. Once we are done we will split up thedifferent pieces to make the small parts that can be reused on all of our pages.
But first we need to draw out a wireframe sketch that allows us to know where the different elements ofour page will be. It also helps us to name the different objects on our page. There are important conventionsto naming elements on our pages which need to be followed to have the CSS work correctly. By having thewireframe and names decided before we begin coding it will help us know what order to write our HTML.This is important because correct hierarchy helps with accessibility and reading order incase our style sheetdoes not load.
After we have a good wireframe we can begin coding our HTML.
View figure 3 for the labels of our different elements so that we can properly build our page.
Writing our HTML 6
Figure 3: Site wireframe sketch
1. Site Header 6. Twitter2. Portrait 7. Articles List / Content3. Navigation 8. Article / Content4. Main 9. Footer5. Intro/Pageheader 10.Social Links
