2.  To create page, Komodo Editor  To share web page, UNC SERVER, ISIS (http://help.unc.edu/?id=108)http://help.unc.edu/?id=108  To transfer page to ISIS, Filezilla Server Web Server Pages Client Brows er 1 3 2

3.  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

4.  COMP101 › public_html  index.html and other files for home page  Assign1…4  Lab1…10  [project]

6.  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 http://help.unc.edu/?id=108

7.  Test it: www.unc.edu/~onyen  If you DON’T get a page › Visit onyen.unc.edu › Subscribe to services › WWW button

9.  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 EditorKomodo Editor

10.  Download instructions Download instructions  New › Web … HTML(4.01) › Directory should be the folder we just built › File name example: index.html  File › Normal navigation

12. Put your title here What will appear on the page Created by A. Person on a date

13.  Every page needs › Header (DIFFERENT THAN head) › Content › Footer  Minimal content › Header: title › Footer: who wrote it and when

14. Basic model: … Use for main title … Use for the main content … Use for accreditations and citations Each section can be formatted independently (soon)

15. 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 place Easily change the look of your site Use the following tag within the tag Save your external style sheet as a.css file.

16.  Use file name only for same folder href=“mystyle.css"  Use full url for external href=“http://www.site/folder/file.css"

17.  google.com/fonts google.com/fonts  2 steps › Link to font (second style sheet!) › Use name in CSS

19.  Download instructions 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

21.  COMP 101 folder › public_html subfolder  Set bookmark in Filezilla for public_html on both machines public_html (your machine) public_html (isis) Filezilla Komodo Editor

23.  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 from https://www.google.com/intl/en/chrome/browser/

25.  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

26. 1. Before you upload a. In Komodo: View: Browser Preview b. In your browser: just open it 2. After you upload a. On another machine 3. Validation (resource page): W3C › url or file name

27.  Unvalidated web pages  Misposted web pages  No name and date  Improper indentation  Tags not separated from multi-line text  Long lines