1 / 19

Web Foundations

Web Foundations. Thursday, September 26, 2013 LECTURE 2 : Working with HTML Files, HTML Basics, Linking. Local Folder/Drive & Remote/Live Directory. Folder on the desktop or other drive local Recommended if you're doing all your development from a single computer (home PC, laptop, etc )

zeheb
Download Presentation

Web Foundations

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Foundations Thursday, September 26, 2013 LECTURE 2: Working with HTML Files, HTML Basics, Linking

  2. Local Folder/Drive & Remote/Live Directory • Folder on the desktop or other drive local • Recommended if you're doing all your development from a single computer (home PC, laptop, etc) • 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 • 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. • Moving files/folders from LOCAL to REMOTE is accomplished using an FTP client application like CORE FTP (DEMO) EXAMPLE FTP SETUP

  3. Local folder Remote Directory

  4. Local folder Remote Directory

  5. Remote Directory Local folder 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) • Notepad++ • For editing the code in the HTML files • Browsers (Firefox, Internet Explorer, Chrome, Safari) • For view the BODY of the HTML files • When developing, it is recommended to preview and test work on multiple browsers (Firefox, IE, Chrome) (DEMO) Notepad++ <> Browsers • HTML walkthrough • Elements  Tags (opening and closing tags) • Tags > Attributes > Values • DeprecatedAttributes (DEMO) EXAMPLE – BASIC HTML PAGE

  7. The DOCTYPE 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. The DOCTYPE has to appear at the very top of the file, even before the opening HTML tag HTML3.2 DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> HTML4 DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XHTML1 DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML5 DOCTYPE <!DOCTYPE HTML"> (DEMO) DOCTYPE

  8. The HTML 5DOCTYPE Universal Character Set Transitional Format 8-Bit http://en.wikipedia.org/wiki/UTF-8 Meta Tags http://www.w3schools.com/tags/tag_meta.asp <!DOCTYPE HTML"> <!–- case SENSITIVE, and OPTIONAL, but its use is highly recommended --> <html lang ="en"> <head> <meta charset="utf-8"> <title>A Groovy Page</title> </head> <body> . . . </body> </html> (DEMO) DOCTYPE

  9. The Basic HTML Page The browser uses this information "behind the scenes" The browser uses this information To display page content Demo <html><head><title>Simplest HTML page</title></head> <body>Hello Everybody. What's happening? </body></html>

  10. The Template HTML Page The browser uses this head information "behind the scenes" The browser uses this body information to display page content <h1> element displays a header of a larger font size based on the default styles of the browser template.html <!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="author" content="Rex Winkus"> <title>HTML Template</title></head> <body> <h1>Page Heading</h1> <!-- heading --> <p>Page Content</p> <!-- paragraph --></body></html>

  11. The Absolute & Relative Linking Absolute Linking A link that includes the entire http path Demo http://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.html

  12. bit112 folder contains: labs folder index.html labs folder contains: html_labfolder html_labfolder contains: blue folderred folder rain.html spring.html summer.html sunshine.html template.html blue folder contains: moon.htmlstars.html red folder contains: day.htmlnight.html Files and Folders inside of Folders (nested folders)

  13. html_labfolder contains: blue folderred folder rain.html spring.html summer.html sunshine.html template.html blue folder contains: moon.htmlstars.html red folder contains: day.htmlnight.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_labfolder contains: blue folderred folder rain.html spring.html summer.html sunshine.html template.html blue folder contains: moon.htmlstars.html red folder contains: day.htmlnight.html • moon (or stars) • rain • spring • summer • sunshine • moon • stars • day • night 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. ../rain.html ../spring.html ../summer.html ../sunshine.html moon.html stars.html ../red/day.html ../red/night.html dot dot slash ../ to access file directly outside the current folder

  15. html_labfolder contains: blue folderred folder rain.html spring.html summer.html sunshine.html template.html blue folder contains: moon.htmlstars.html red folder contains: day.htmlnight.html • day (or night) • rain • spring • summer • sunshine • moon • stars • day • night 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. ../rain.html ../spring.html ../summer.html ../sunshine.html ../blue/moon.html ../blue/stars.html day.html night.html ../foldername/filename to access fileoutside the current folder but inside a different folder

  16. The <A> Anchor Tag and Linking <!doctype html><html lang="en"><head>   <meta charset="utf-8">   <meta name="author" content="Rex Winkus">    <title>Spring</title></head><body>   <h1>Spring here</h1> <!-- heading -->    <p>Can't wait till <ahref="spring.html">spring</a>!</p><!-- paragraph with relative link --></body></html> Demo spring.html

  17. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="author"content="Rex Winkus"> <title>Rain</title> </head> <body> <h1>Rain</h1> <ul> <li><a href="rain.html">rain</a></li> <li><a href="sunshine.html">sunshine</a></li> <li><a href="red/day.html">day</a></li> <li><a href="red/night.html">night</a></li> <li><a href="blue/moon.html">moon</a></li> <li><a href="blue/stars.html">stars</a></li> </ul> </body> </html> Demo http://programajama.com/foundations/rexwinkus/labs/html_lab/rain.html rain.html

  18. <!-- Head removed for brevity --> • <body> • <h1>Rex Winkus's Portfolio</h1> • <h2>Week 1</h2> • <ul> • <li><a href="labs/html_lab/summer.html">summer</a></li> • <li><a href="labs/html_lab/spring.html">spring</a></li></br> <!-- to add a break in the list--> • <li><a href="labs/html_lab/rain.html">rain</a></li> • <li><a href="labs/html_lab/sunshine.html">sunshine</a></li> • <li><a href="labs/html_lab/blue/moon.html">moon</a></li> • <li><a href="labs/html_lab/blue/stars.html">stars</a></li> • <li><a href="labs/html_lab/red/day.html">day</a></li> • <li><a href="labs/html_lab/red/night.html">night</a></li></br> <!-- to add a break in the list--> • <li><a href="labs/html_lab/template.html">template</a></li> • </ul> • </body> • </html> Demo http://programajama.com/foundations/rexwinkus/ index.html

  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

More Related