LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 2: Working with Webpage Files

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Objectives Plan a website before writing it. Create a new webpage in a text editor. Save webpages in text-only format. Specify a default page or homepage. Make default pages for any directory. Edit webpages in a text editor. Organize files into folders and sub-folders. Preview webpages in a browser. View other designers' HTML code.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Working with Webpage Files Before writing HTML elements and attributes, you must create the webpage file.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Planning Your Site Sketch and plan your site before creating it. It will give your site direction and lead to fewer changes and less reorganization.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Plan Your Site Here are some aspects to consider: –Why are you creating this site? What do you want to convey? –Think about your audience and tailor your content to them. –How many pages will it need? What sort of structure would you like it to have? Do you want visitors to go through your site in a particular sequence, or do you want to make it easy for them to explore in any direction? –Sketch out the site on paper and identify components for each page. –Devise simple, consistent naming convention for pages, images, and other external files.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Creating a New Webpage Use any text editor to create a new webpage. –Notepad is included with Windows. –TextWrangler is a free download for Mac OS X. –Macs include TextEdit, but a bug in some versions makes it too difficult to work with HTML files. To create a new webpage: –Open any text editor. –Choose File > New to create a new, blank document. In TextWrangler (Mac), it’s File > New > Text Document –Create the HTML content. –Be sure to save your file.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Text Editors TextWranglerNotepad

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Saving Your Webpage Webpage must work in all browsers on all platforms. Save webpage in text-only format with.html or.htm file extension. –Saves without proprietary formatting. –Distinguishes files from plain non-web text files. –Browsers use extension to identify webpages. –.html extension is recommended over.htm. Webpage’s icon matches system’s default browser. –When double-clicked, file opens in browser. –Great for testing page, but adds extra step to editing webpages. Choose UTF-8 encoding in most instances.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Blank Text Files

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Save Your Webpage Choose File > Save As from your text editor. In the dialog box, choose Plain Text or Text Document (or however your program words it) for the format. Give the document the.html (preferably) or.htm extension. (This is very important!) Choose the folder in which to save the webpage. Click Save.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Specifying a Default Page or Homepage Default page at top-level of web directory (often called the root) is the home page. –Default page is typically index.html If visitor types URL with a directory, but doesn’t specify the file name, the default file is used. Make default pages for any directory on site. –Landing page for a directory in site would also be index.html, but it would exist in its specific folder. –Directory is just a folder, like on computer drive. –Access these sections of site from home page or via main navigation.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Specify Homepage for Site or Landing Page for a Directory Save file as index.html in the desired folder. –If index.html doesn’t work as the default page on site’s server when uploaded, consult web hosting provider.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE When a Default Page Doesn’t Exist Without a default page in each directory, servers may list the directory’s contents for visitors. To keep files hidden, create a default page for every directory on your site that contains HTML pages. You can also change the server setting so the list of files is hidden. Hide the list for folders that contain assets, such as your images, media files, style sheets, and JavaScript files.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Editing Webpages To edit a webpage, you’ll have to manually open it in your text editor. To edit webpages: –Open your text editor. –Choose File > Open. –Navigate to the directory that contains the desired file. –If you don’t see your file listed, choose the All Files (or similar description) option. The name and location may vary slightly from program to program and platform to platform. –Click Open. Your file is ready to edit.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Show All Files

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Organizing Files Customary, but not required, to create a folder for each main section within a site. –Allows related HTML pages to be grouped together. On a Mac, choose New Folder and give the folder a name. In Windows, from the desktop or Windows Explorer, right-click and choose New > Folder. Divide folder into sub-folders if needed.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Organize Your Files Step 1: Central folder: Create a central folder or directory to hold everything that will be available on your website.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Organize Your Files Step 2: Sub-folder: Create sub-folders in a way that reflects the organization of your website.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Organize Your Files Step 3: Top-level folder: Create one or more top-level folders for your site’s images, style sheets (CSS files), and JavaScript files.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Viewing Your Page in a Browser To look at a page in a browser: –Open a browser. –Choose File > Open, > Open File, or > Open Page (not Open Location), depending on the browser. –In new dialog that appears, navigate to the folder on computer that contains the Web page. –Select the page, and click Open. –The page is displayed in the browser just as it will appear when you publish it on a Web server. –These steps may vary slightly in different browsers.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Disabling Chrome’s Cache With Chrome open, press Command-Option-I (OS X) or Ctrl+Shift+I (Windows) to open Chrome’s Developer Tools. Click the gear icon in the lower-right corner. Under Settings > General, select Disable Cache. Close the Settings panel, but do not close Developer Tools. The cache will remain disabled as long as Developer Tools is open (or until you deselect Disable Cache).

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE The Inspiration of Others One of the easiest ways to expand HTML fluency is to look at how other page developers and designers create pages. HTML code is easy to view and study. However, text content, graphics, sounds, video, style sheets, and other external files may be copyrighted. As a rule, use other’s pages for inspiration for HTML, and create original content.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE View Other Designers’ HTML Code with View Source Open a webpage with any browser. Choose View Source command. –Name varies from View Source to Page Source. –Optional: Right-click page. Choose View Source. HTML code will be displayed. –Modern browsers show it in its own tab or window. –Syntax highlighting: Colors distinguish page content from HTML. Save file for further study.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Viewing Source

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE View Other Designers’ HTML Code with Developer Tools View page’s source with a browser’s developer tools. –Offers more interactive view of source code. Each browser’s tools are different, but have common features: –Inspect HTML and CSS for specific parts of a page. –Edit in browser, and see immediate changes in page. –Changes are temporary. Doesn’t actually write over HTML and CSS files.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Accessing Page Source