1. Web Foundations THURSDAY, SEPTEMBER 26, 2013 LECTURE 2: WORKING WITH HTML FILES, HTML BASICS, LINKING

2. Local Folder/Drive & Remote/Live Directory 1.Folder on the desktop or other drive local ◦Recommended if you're doing all your development from a single computer (home PC, laptop, etc) 2.Folder on USB Thumb or Portable Drive (and backed up to secondary drive location) ◦Recommended if you're doing your development from multiple locations (DEMO) EXAMPLE OF A LOCAL FOLDER 1.The REMOTE (or LIVE) directory is your "root" directory of your web site. It starts out with nothing in it, and it is up to you to copy files from your LOCAL folder/driver to your REMOTE "root" directory. 2.Moving files/folders from LOCAL to REMOTE is accomplished using an FTP client application like CORE FTP (DEMO) EXAMPLE FTP SETUP

3. Local folderRemote Directory

4. Local folderRemote Directory

5. Local folder Remote Directory In your local folder you will create other folders and in these other folders you will create other HTML files. You can link to these files from each other, or you can link to these files from files that are either outside the folder or inside of other folders. We'll see how to go about creating these links in a moment. Once you are done creating and linking all the files you want, save everything, then drag the whole shebang to your remote directory.

6. HTML Files and Browser(s) 1.Notepad++ ◦For editing the code in the HTML files 2.Browsers (Firefox, Internet Explorer, Chrome, Safari) ◦For view the BODY of the HTML files 3.When developing, it is recommended to preview and test work on multiple browsers (Firefox, IE, Chrome) (DEMO) Notepad++ <> Browsers 1.HTML walkthrough 2.Elements  Tags (opening and closing tags) 3.Tags > Attributes > Values 4.Deprecated Attributes (DEMO) EXAMPLE – BASIC HTML PAGE

7. The DOCTYPE 1.A statement or declaration which tells the browser what version of HTML our file is using and therefore how the code should be rendered by the browser at view time. 2.The DOCTYPE has to appear at the very top of the file, even before the opening HTML tag HTML3.2 DOCTYPE HTML4 DOCTYPE XHTML1 DOCTYPE HTML5 DOCTYPE (DEMO) DOCTYPE

8. The HTML 5DOCTYPE A Groovy Page. (DEMO) DOCTYPE Universal Character Set Transitional Format 8-Bit http://en.wikipedia.org/wiki/UTF-8 Meta Tags http://www.w3schools.com/tags/tag_meta.asp

9. The Basic HTML Page Simplest HTML page Hello Everybody. What's happening? The browser uses this information "behind the scenes" The browser uses this information To display page content Demo

10. The Template HTML Page HTML Template Page Heading Page Content The browser uses this head information "behind the scenes" The browser uses this body information to display page content element displays a header of a larger font size based on the default styles of the browser template.html

11. The Absolute & Relative Linking Absolute Linking A link that includes the entire http path Demo http://programajama.com/foundations/rexwinkus/index.htmlhttp://programajama.com/foundations/rexwinkus/index.html Relative Linking A link that only includes the file path in relation to the files and folders in your remote directory Demo blue/moon.html See the Linking page: http://faculty.cascadia.edu/cduckett/foundations/labs/linking.htmlhttp://faculty.cascadia.edu/cduckett/foundations/labs/linking.html

12. bit112 folder contains: labs folder index.html labs folder contains: html_lab folder html_lab folder contains: blue folder red folder rain.html spring.html summer.html sunshine.html template.html blue folder contains: moon.html stars.html red folder contains: day.html night.html Files and Folders inside of Folders (nested folders)

13. html_lab folder contains: blue folder red folder rain.html spring.html summer.html sunshine.html template.html blue folder contains: moon.html stars.html red folder contains: day.html night.html rain (or spring, summer, sunshine) rain spring summer sunshine moon stars day night rain.html spring.html summer.html sunshine.html blue/moon.html blue/stars.html red/day.html red/night.html NOTE: If your HTML file is outside a folder and you want to connect to a HTML inside a folder you name the folder first, then add a forward slash / then name the file. file name if inside current folder or folder name / file name if inside another folder inside current folder

14. html_lab folder contains: blue folder red folder rain.html spring.html summer.html sunshine.html template.html blue folder contains: moon.html stars.html red folder contains: day.html night.html moon (or stars) rain spring summer sunshine moon stars day night../rain.html../spring.html../summer.html../sunshine.html moon.html stars.html../red/day.html../red/night.html NOTE: If your HTML file is inside a folder and you want to connect to a HTML outside a folder you use../ to back out of the folder then name the file. If your HTML file is inside a folder and you want to connect to a HTML inside a different folder you use../ to back out of the folder then name the folder, add a slash / then name the file. dot dot slash../ to access file directly outside the current folder

15. html_lab folder contains: blue folder red folder rain.html spring.html summer.html sunshine.html template.html blue folder contains: moon.html stars.html red folder contains: day.html night.html day (or night) rain spring summer sunshine moon stars day night../rain.html../spring.html../summer.html../sunshine.html../blue/moon.html../blue/stars.html day.html night.html NOTE: If your HTML file is inside a folder and you want to connect to a HTML outside a folder you use../ to back out of the folder then name the file. If your HTML file is inside a folder and you want to connect to a HTML inside a different folder you use../ to back out of the folder then name the folder, add a slash / then name the file.../foldername/filename to access file outside the current folder but inside a different folder

16. The Anchor Tag and Linking Spring Spring here Can't wait till spring ! spring.html Demo

17. Rain Rain rain sunshine day night moon stars rain.html Demo http://programajama.com/foundations/rexwinkus/labs/html_lab/rain.html

18. Rex Winkus's Portfolio Week 1 summer spring rain sunshine moon stars day night template index.html Demo http://programajama.com/foundations/rexwinkus/

19. To link "back" out of one nested folder (or traverse "up" the tree once) you'd use:../filename.html To link "back" out of two nested folders (or traverse "up" the tree twice) you'd use:../../filename.html To link "back" out of three nested folders (or traverse"up" the tree thrice) you'd use:../../../filename.html The "dot dot slash" Explained