to create page, komodo editor to share web page, unc server, isis ( to transfer page to isis,
Post on 15-Dec-2015
216 Views
Preview:
TRANSCRIPT
Going to the Web
Viewing a Web Page To create page,
Komodo Editor To share web page,
UNC SERVER, ISIS (http://help.unc.edu/?id=108)
To transfer page to ISIS, Filezilla
Server
Web Server
Pages
Client
Browser
1 3
2
File and Folder Name Rules
Everything that will be displayed on a web from the server must be in folder public_html
The first page of any web site is called index.html
When accessing a web page from isis, it begins with www.unc.edu/~onyen/
The remainder of the URL is the path BELOW public_html
Folder Structure: Mirror ISIS
COMP101› public_html
index.html and other files for home page Assign1…4 Lab1…10 [project]
ISIS: UNC’s cloud
UNC Site
UNC website› Everything that is going to be available on the
web must be in your public_html folder› Treats index.html as your home page› Default is “This page is blank”
Creating WWW Pages at UNC-CH› http://help.unc.edu/?id=108
Validate UNC Space
Test it: www.unc.edu/~onyen If you DON’T get a page
› Visit onyen.unc.edu› Subscribe to services› WWW button
Komodo Editor
Choosing Tools
Very fancy tools exist› Ease of building vs. control› Cost
We will use an editor that helps you get it right
We will NOT use tools that hide what you are doing
We will use Komodo Editor
Komodo Editor
Download instructions New
› Web … HTML(4.01)› Directory should be the folder we just built› File name example: index.html
File› Normal navigation
Page Structure
General Page Structure<!DOCTYPE html>
<html> <head><! --- what shows up on the tab --- ><title>Put your title here</title><! ---defining character necessary for validation --- >
<meta charset="UTF-8"></head>
<body><! --- the “good stuff” i--- >What will appear on the page<footer>
Created by A. Person on a date </footer>
</body>
</html>
The Body
Every page needs› Header (DIFFERENT THAN head)› Content› Footer
Minimal content› Header: title› Footer: who wrote it and when
Dividing Up the BodyBasic model:
<header>…</header>Use for main title
<div> … </div>Use for the main content
<footer> … </footer>Use for accreditations and citations
Each section can be formatted independently (soon)
Adding CSS to your HTML
The best (only way for this class!) way to insert CSS to your HTML is by using an External Style Sheet
Define all your styles in one placeEasily change the look of your siteUse the following <link> tag within the <head> tag
Save your external style sheet as a .css file.
Linking to style sheets
Use file name only for same folderhref=“mystyle.css"
Use full url for externalhref=“http://www.site/folder/file.css"
Why external? Google fonts!
google.com/fonts 2 steps
› Link to font (second style sheet!)› Use name in CSS
Filezilla
Filezilla
Download instructions Set up once
› EXCEPT that it uses your onyen password Onyen problems: need to see ITS Drag and drop or click to move
› Will confirm overwrites› Can default to always, but you may not
want to
On your machine…
COMP 101 folder› public_html subfolder
Set bookmark in Filezilla for public_html on both machines
public_html (your machine)
public_html (isis)
FilezillaKomodo Editor
Chrome
Chrome
We will test our website on Chrome› Capabilities on other browsers as well› Need consistency for class
Why Chrome?› No plugins required› Cross-platform
If you don’t have it, download fromhttps://www.google.com/intl/en/chrome/browser/
Keys to Success
Keys to Success
Simple steps› Create your home page locally› Transfer pages› Test it from another machine
Have ONE folder where you always work locally
Be sure that you have the current version of your page
Validation
1. Before you uploada. In Komodo: View: Browser Previewb. In your browser: just open it
2. After you uploada. On another machine
3. Validation (resource page): W3C› url or file name
Deadly Sins
Unvalidated web pages
Misposted web pages
No name and date Improper
indentation Tags not separated
from multi-line text
Serious Sins
Bad Ideas Long lines
top related