Embed Size (px)
Citation preview
Web FoundationsTHURSDAY, SEPTEMBER 26, 2013
LECTURE 2: WORKING WITH HTML FILES, HTML BASICS, LINKING
Local Folder/Drive & Remote/Live Directory1. 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
3. 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.
4. Moving files/folders from LOCAL to REMOTE is accomplished using an FTP client application like CORE FTP
(DEMO) EXAMPLE FTP SETUP
Local folder Remote Directory
Local folder Remote Directory
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.
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
4. HTML walkthrough
5. Elements Tags (opening and closing tags)
6. Tags > Attributes > Values
7. Deprecated Attributes
(DEMO) EXAMPLE – BASIC HTML PAGE
The DOCTYPE1. 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 <!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
The HTML 5DOCTYPE<!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
Universal Character Set Transitional Format 8-Bit
http://en.wikipedia.org/wiki/UTF-8
Meta Tags
http://www.w3schools.com/tags/tag_meta.asp
The Basic HTML Page<html><head><title>Simplest HTML page</title></head>
<body>Hello Everybody. What's happening?
</body></html>
The browser uses this information"behind the scenes"
The browser uses this informationTo display page content
Demo
The Template HTML Page<!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>
The browser uses this head information"behind the scenes"
The browser uses this body informationto display page content
<h1> element displays a header of a larger font size based on the default styles of the browser
template.html
The Absolute & Relative LinkingAbsolute 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
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)
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.htmlspring.htmlsummer.htmlsunshine.htmlblue/moon.htmlblue/stars.htmlred/day.htmlred/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
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.htmlmoon.htmlstars.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
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.htmlday.htmlnight.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
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 <a href="spring.html">spring</a>!</p> <!-- paragraph with relative link -->
</body></html>
spring.html
Demo
<!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>
rain.html
Demo http://programajama.com/foundations/rexwinkus/labs/html_lab/rain.html
<!-- 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>
index.html
Demo http://programajama.com/foundations/rexwinkus/
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
