WORKING WITH WEB
PAGE FILES
HTML5 & CSS Visual Quickstart Guide
Chapter 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
About Microsoft Word and Web Pages


•Just Say No
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

Castro Chapter 2

  • 1.
    WORKING WITH WEB PAGEFILES HTML5 & CSS Visual Quickstart Guide Chapter 2
  • 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?
  • 3.
    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!
  • 4.
    Creating a NewWeb 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
  • 5.
    Saving Your WebPage • 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
  • 6.
    About Microsoft Wordand Web Pages •Just Say No
  • 7.
    Specifying a Defaultor “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
  • 8.
    Organizing Files • Createa 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!
  • 9.
    Viewing Your Pagein 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
  • 10.
    The Inspiration ofOthers • 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