WORKING WITH WEBPAGE FILESHTML5 & CSS Visual Quickstart GuideChapter 2
Designing Your Site• First, take some steps to plan and design your site • Figure out why you’re creating the site…what do you want to convey? • Think about your audience, and how you can tailor your content to appeal to this audience. • Should you add lots of graphics to make it flashy, or is it more important that the page downloads quickly? • How many pages will you need?
Designing Your Site, Part 2• What structure should it have? Should your users be able to explore it in any direction, or do you want them to follow a certain path?• Sketch your site on paper• Devise a simple, consistent naming system for your pages, images, and other files• Don’t overdo the planning!
Creating a New Web Page• Don’t need any special tools to create a web page; can use any word processor or text editor • On Windows: NotePad or WordPad (Notepad++ is better) • On Mac: TextEdit (TextWrangler is better; BBEdit is even better, but not free) • On Linux: pico, nano, gedit, Kedit• To create a new Web Page: • Open any text editor or word processor • Choose File > New to create a new, blank document (if necessary) • Create the HTML content • Save your file
Saving Your Web Page• So browsers and web servers recognize Web page files, they have the .htm or .html extension• To save your file: • Once you’ve created the file, choose File > Save As • Choose Plain Text or Text Document (or however the program words it) for the format • Give the document a name and the .html extension • Choose the folder in which to save it • Click Save
Specifying a Default or “Home” Page• Web servers have a system for recognizing a default page in each folder, based on the name of the file• If your visitors type a URL without a filename, the default file is used• To specify a default or “home” page: • Ask your ISP how such a default page should be named. • Most servers use index.html; Microsoft servers sometimes use default.html • For our purposes, index.html should always be used
Organizing Files• Create a central folder/directory to hold all the material that will be available at your Web site• You may want a separate subfolder for different parts of your site, such as a subfolder for images• Use simple, one-word names without symbols or punctuation for your files and folders • Web servers don’t deal with spaces in file names the way you might expect • Neither do web browsers • “Images Folder” is a bad directory name • So is “images folder” • “images_folder” is okay • “images” is even better!
Viewing Your Page in a Browser• Most of the time, you can just double-click the file and it will open in a web browser• Sometimes, you might have to right-click and choose a program to open with
The Inspiration of Others• To view other designers’ HTML code: • Open a Web page with any browser • Choose View > Source (in some browsers, View > Page Source) • If you want, save the file for further study