First Web Page on Pitt Servers Windows Machines.  Follow Pitt CSSD instructions to download Putty and WinScp for Windows machines:

First Web Page on Pitt Servers Windows Machines

 Follow Pitt CSSD instructions to download Putty and WinScp for Windows machines: http://technology.pitt.edu/Documents/network/unix- timesharing/Secure_UNIX_Windows_FINAL.pdf http://technology.pitt.edu/Documents/network/unix- timesharing/Secure_UNIX_Windows_FINAL.pdf  Download the Getting Started document from CSSD about HTML  http://technology.pitt.edu/Documents/network/websites/html_inst.pdf http://technology.pitt.edu/Documents/network/websites/html_inst.pdf  Download the basic unix commands document from CSSD  http://technology.pitt.edu/Documents/misc/unix_commands.pd f http://technology.pitt.edu/Documents/misc/unix_commands.pd f  Also, there are two links on the syllabus that give advice for creating Pitt websites using MACS

 Connect to Pitt Servers (unixs.cis.pitt.edu) using Putty or FTP client  Use sftp port=22 your username/psword are from your authorization account – call 412-624-help if problem  Unix is case sensitive!!!!!  Change to the public directory  cd public  Once in the public directory make a new directory called html  mkdir html  Look at files in a directory by typing ls  Create a directory called 1052  mkdir 1052  Create your homework file and label it index.html and put it in the 1052 directory

 Each file and directory have read, write, and execute permissions  You can right click on folder(directory) or file and set the permissions via FTP program  Or you can set permissions via Putty using the chmod command  Welcome to binary numbers  chmod nnn filename  Check permission with ls-l command  Ex chmod 755 filename – owner has rwx and everyone else rx  Be careful not to give write permissions to others.

 Permissions on directories are a little different from those on files. 'read' allows the contents of a directory to be listed, 'write' means that you can add or delete files in the directory, and 'execute' allows direct access to files in the directory (if you already know their names). On most directories read and execute bits tend to go together ie typically directories will either have both bits set or neither set.  From http://drupal.org/node/34023http://drupal.org/node/34023

 After you have created an html and named it index.html and moved it to your 1052 directory and set the appropriate permissions 755 ( read, write, execute for you and read, execute for everyone else)  Open your browser and type in the address bar:  www.pitt.edu/~username/1052 www.pitt.edu/~username  The browser will automatically look for index.html file and load it

 Start with a template:  Recommend XHTML 1.0 Strict for this class for first two weeks– Later we will move over to HTML 5  W3C recommended templates:  http://www.w3.org/QA/2002/04/valid-dtd- list.html http://www.w3.org/QA/2002/04/valid-dtd- list.html  Doctypes tell browsers how to interpret the document  Doctypes help validators know which rules to use to evaluate your page  Don’t use Framesets in this class

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <meta http-equiv="content-type"  content="text/html;charset=utf-8" />   … Your HTML content here … 

 Text Editor – Notepad, Notepad++, Netbeans, TextWrangler or your choice  Dreamweaver, Photoshop and Adobe Products  Great Deal at CSSD while a student  Firefox and add-ons – REQUIRED!  Firefox http://www.mozilla.com/en- US/firefox/personal.htmlhttp://www.mozilla.com/en- US/firefox/personal.html  Firebug http://getfirebug.com/http://getfirebug.com/  FireFTP http://fireftp.mozdev.org/ Optionalhttp://fireftp.mozdev.org/  SourceChart https://addons.mozilla.org/en- US/firefox/addon/655/ Optionalhttps://addons.mozilla.org/en- US/firefox/addon/655/  Web Developer https://addons.mozilla.org/en- US/firefox/addon/60/https://addons.mozilla.org/en- US/firefox/addon/60/

 All homeworks will be posted on your webpage for the class at www.pitt.edu/~username/1052www.pitt.edu/~username/1052  Create a file called index.html and place it in this directory  All homeworks are due in one week at the start of the class.  Your homework page should be:  Neat  Well organized  Easily understood  Have your NAME  All homeworks will reference the homework number and possibly title.

 Run your code through the W3C validator.  Pay attention to the errors but, it is not necessary to correct all of them  Be sensible: if your page has over 100 errors then it is not a good page  If your page has six errors and you know why they are occurring then it may be acceptable  http://validator.w3.org/ http://validator.w3.org/

 Benefits of Web Standards Coding  Variety of user agents  Same marked up content can be read by browser, smartphones, screen readers etc.  Performance  File size is smaller – exclude presentational mark-up  Cross Browser Compatibility  Separation of Content and Presentation From Stylin’ with CSS by Charles Wyke-Smith Second Edition

 Benefits of Web Standards Coding (cont)  Build more fluid pages  Easier to change number of list items etc.  Validation tools  Use HTML, CSS, XHTML validators  Streamline production  Allow teams of people to work on project  Each team member knows rules for content and design  Accessibility

 List of Standards Organizations  http://www.webstandards.org/learn/external/org s/ http://www.webstandards.org/learn/external/org s/ – The Web Standards Project – http://www.webstandards.org/learn/articles http://www.webstandards.org/learn/articles Founded in 1998, The Web Standards Project (WaSP) fights for standards that reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web. We work with browser companies, authoring tool makers, and our peers to deliver the true power of standards to this medium.standardsbrowser companiesauthoring tool makersour peers

W3C - http://www.webstandards.org/learn/faq/#p21 http://www.webstandards.org/learn/faq/#p21 – The World Wide Web Consortium (W3C) is an international industry consortium dedicated to “leading the Web to its full potential“. It’s led by Tim Berners-Lee, the inventor of the Web. Founded in 1994, the W3C has more than 450 member organizations – including Microsoft, America Online (parent company of Netscape Communications), Apple Inc., Adobe, Sun Microsystems, and a variety of other hardware and software manufacturers, content providers, academic institutions, and telecommunications companies. The Consortium is hosted by three research institutions – MIT in the US, INRIA in Europe, and Keio University in Japan.World Wide Web Consortiumleading the Web to its full potentialmember organizations MicrosoftAmerica OnlineNetscape CommunicationsApple Inc.AdobeSun MicrosystemsMIT INRIAKeio University

What are the W3C Standards related to web design ? -- HTML 5 - – HyperText Markup Language – HTML 4.01 – HyperText Markup Language – XML 1.0 – Extensible Markup Language – XHTML 1.0, 1.1, and Modularization – CSS – Cascading Style Sheets – DOM 1 – Document Object Model Level 1 W3C HTML Working Group – http://www.w3.org/html/wg/ http://www.w3.org/html/wg/ – HTML 5 http://dev.w3.org/html5/spec/Overview.html

 The European Computer Manufacturers Association (ECMA) is an organization officially founded in 1961 in order to meet the need for standardizing computer operational formats, including programming languages and input/output codes.European Computer Manufacturers Association  ECMAScript (standardized JavaScript)

History of HTML – http://www.w3.org/People/Raggett/book4/ch02.html http://www.w3.org/People/Raggett/book4/ch02.html – http://www.yourhtmlsource.com/starthere/historyofhtml.html http://www.yourhtmlsource.com/starthere/historyofhtml.html  HTML Tutorial  http://htmldog.com/guides/htmlbeginner/ http://htmldog.com/guides/htmlbeginner/  HTML Templates  http://www.webmonkey.com/templates/ -document structure http://www.webmonkey.com/templates/  http://www.webstandards.org/learn/reference/templates/ - doctypes http://www.webstandards.org/learn/reference/templates/ – HTML 5 Overview http://www.webmonkey.com/tutorial/Building_Web_Pages_With_HTML_5 http://www.alistapart.com/articles/previewofhtml5  HTML Simulator  Use HTML simulator to see implementation:  http://www.practiceboard.com/ http://www.practiceboard.com/

 Comprehensive List of resources  http://www.alvit.de/handbook/ http://www.alvit.de/handbook/  Massive list of web development tools  Cheat sheets are particularly helpful  http://www.addedbytes.com/cheat-sheets/css-cheat- sheet/ http://www.addedbytes.com/cheat-sheets/css-cheat- sheet/

First Web Page on Pitt Servers Windows Machines.  Follow Pitt CSSD instructions to download Putty and WinScp for Windows machines:

Similar presentations

Presentation on theme: "First Web Page on Pitt Servers Windows Machines.  Follow Pitt CSSD instructions to download Putty and WinScp for Windows machines:"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

First Web Page on Pitt Servers Windows Machines.  Follow Pitt CSSD instructions to download Putty and WinScp for Windows machines:

Similar presentations

Presentation on theme: "First Web Page on Pitt Servers Windows Machines.  Follow Pitt CSSD instructions to download Putty and WinScp for Windows machines:"— Presentation transcript:

Similar presentations

About project

Feedback