Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
BASIC Web Page Creation Presenter: Jolanta Soltis Academic Computing Services 2009 INTERNET U.S. Department of Defense laid the foundation of the Internet about 30 years ago General public didn't use the Internet much until after the development of the World Wide Web in the early 1990s. Academic Computing Services 2009 WORLD WIDE WEB (WWW) World Wide Web came into being in 1991 Early on, the Internet was limited to noncommercial uses because its backbone was provided by the – National Science Foundation – the National Aeronautics and Space Administration – U.S. Department of Energy Funding came from the government By the end of 1992, the first commercial online service provider, Delphi, offered full Internet access to its subscribers, and several other providers followed As of 1993, there were only 130 Web sites-Now Millions Academic Computing Services 2009 WHAT IS A URL? A URL (or uniform resource locator) is the address of an Internet file. http://ist.njit.edu/webhosting/step_by_step.php Usually consists of four parts – protocol http:// – server (or domain) ist.njit.edu/ – path webhosting/ – Filename step_by_step.php Academic Computing Services 2009 GETTING STARTED When creating your web pages, follow your interests, and then your instincts Of course, the best way to get an idea of what you want to do is to first visit other websites Academic Computing Services 2009 PLANNING THE WEB PAGE Step 1 Select Topic Step 2 Design on paper Step 3 Create Text File Step 4 Search for Graphics Step 5 Create Directory Step 6 Download Text Files Step 7 Work with Graphics Step 8 Develop webpage Academic Computing Services 2009 DEVELOPING THE WEB PAGE Start with a title - The title should be placed at the beginning of your page Headings styles - There are built in styles for headings of differing importance – In HTML there are six levels of headings – H1 is the most important, H2 is slightly less important, and so on down to H6, the least important Academic Computing Services 2009 DEVELOPING - TEXT Add a bit of emphasis – Use blinking text – Web page lists – Make a table Use text in different colors and different sizes Academic Computing Services 2009 POINTERS - FONTS Don't load your documents too many different fonts? That's called "design bloat." When using headlines, stick to the smaller sizes. Don't use italics too often. Italics can be very hard to read with smaller font sizes. Academic Computing Services 2009 Develop your color scheme Be aware of colors selected. Make sure all images on the same page share a common palette. Wrap text around images that are less than half as wide as the display area. Use a graphic-manipulation program not only to improve color and contrast, but also to crop out parts of a picture that doesn't relate anything useful. Match link colors with colors occurring in images you've used on the page. Keep link colors consistent across multiple pages. Somewhere on your home page, let users know when the page was last updated. Your opening graphic should display fully on the user's screen without scrolling-that means nothing larger than 640 x 480 pixels. Academic Computing Services 2009 The Color Wheel Complementary colors: Colors on opposite sides of the color wheel Triad or tertiary colors: Three colors that are equidistant from each other on the color wheel Analogous colors: Colors that are next to each other on the color wheel Academic Computing Services 2009 DEVELOPING - GRAPHICS Use images to spice up your pages – Control the size of your images Have text appear beside an image Create image backgrounds Use Animation Reuse graphics such as title banners Keep graphics as simple and small as possible After you've uploaded your page, log on with a browser and time how long it takes for an opening graphic or the entire page to load. Academic Computing Services 2009 POINTERS Carefully choose the background. Other background colors may impact other page elements. White is a safe choice. Don't use textured backgrounds that are too busy. Try viewing your page in Netscape and Internet Explorer. If you use a 17-inch or larger monitor, also test your design on a computer with a standard 14-inch screen. Academic Computing Services 2009 DEVELOPING - LINKS Link to other pages – Make images into links – Make a link that opens a new browser Window Create a table of contents Use background music Academic Computing Services 2009 NAVIGATION Use Toolbars Drop-down Menus Search Engines Academic Computing Services 2009 SUGGESTED SOFTWARE Microsoft Word Microsoft Front Page or Expression Flash/Fireworks - This product is easy and good for creating animations Gif Animation Academic Computing Services 2009 How to create web page with NJIT help AFS to store files SSH, Telnet, Tera Term Pro to access files SSH (Secure Shell) is a terminal emulation protocol that allows a user to connect to a remote host via an encrypted and secure link. Telnet is a terminal emulation protocol that lets a user log in remotely to other computers on the Internet; it has a command line interface. Front Page or Microsoft Expression to create files Academic Computing Services 2009 How to create web page with NJIT help continued You can download SSH® Secure Shell™ from the Public Download Section.SSH® Secure Shell™ also contains an FTP client. You can download Tera Term Pro from the Public Download Section or you can run Windows' telnet client by typing "telnet afsx.njit.edu" from the "Run..." command in the Start Menu. Academic Computing Services 2009 Web Server All Highlander AFS users can create a website. Web.njit.edu is the web server for AFS. All student, club, faculty, staff, and research group web pages on AFS will have the URL in the form: http://web.njit.edu/~yourUCID. Java programs, PHP, JSP, and MySQL are currently supported. Academic Computing Services 2009 Step by step instruction on how to create Your Homepage. 1. 2. 3. 4. Prerequisites for Creating Web Pages at NJIT Hardware and Software Requirements Create account on an AFS system. Check if you have public_html directory (if not create one). 5. Prepare your PC and web editor. 6. Edit your page. 7. Upload your page to the web server. http://ist.njit.edu/webhosting/createwebpage.pdf Academic Computing Services 2009 Prerequisites for Creating Web Pages at NJIT The following is a list of skills you need to have in order to create and maintain your own web pages. – Competency in the use of Microsoft Windows • Effective use of the mouse; controlling the tracking speed • Effective use of Windows Explorer, Taskbar and START button • How to minimize and maximize applications on the desktop • Basic editing functions, e.g. cut/copy/paste, building shortcuts to applications or files, use of right mouse button for extended functions. Academic Computing Services 2009 Prerequisites for Creating Web Pages at NJIT – Proficient in the use of Microsoft Word or PowerPoint for Office 2003 • Save files in various formats • Define and set styles for Word Academic Computing Services 2009 Prerequisites for Creating Web Pages at NJIT – Familiar with basic concepts of the World Wide Web. • Use a browser to view a particular web site • Create bookmarks to a particular web site • Search for a topic with a search engine Academic Computing Services 2009 Hardware and Software Requirements Hardware Requirements: Pentium III computer capable of supporting Internet Explorer 6.0. Internet connection. Software Requirements: A Browser - for interacting with the Web. We suggest Microsoft Internet Explorer (Free). File Transfer Protocol program (FTP) - for moving your pages from your PC to a web server. We suggest FTP Explorer, SSH (Available to download from http://ist.njit.edu/software/) Additional Software: WinZip - To uncompress files. Graphic programs - to create graphics for your page. You can use Paint, Paint Shop Pro. Equation rendering programs. You can use Microsoft Word, Paint Shop Pro. Academic Computing Services 2009 Create account on an AFS system Check if you have an AFS account For instructions on setting up an account see: http://ist.njit.edu/accounts/afs.php Academic Computing Services 2009 Prepare your AFS account to host a web site. If you created your UCID after Feb 2007, your AFS account is already set up to host a web site. To check if your web site has been set up, go to http://web.njit.edu/~yourUCID (replace "yourUCID" with your UCID). If you had previously created a web site, you will be able to see it. If your account has been configured to host a web site but you have not already created one, you should see default page. If you need to configure your AFS account to host a web site, follow these instructions provided on the next slide. Academic Computing Services 2009 Create public_html directory Run an SSH. The "host" or "domain" should be "afsx.njit.edu" where x is any number between 1-36. Enter your username. Enter your password. Type "home.page.setup" at the prompt. Type "y" and press ENTER. Type "exit" and close your telnet client. Run an FTP client. The "host" or "domain" should be "afsx.njit.edu" where x is any number between 1-36. Enter your username in the appropriate field. Enter your password in the appropriate field. Connect to the system. Upload your web pages to the "public_html" folder. Disconnect from the system. Academic Computing Services 2009 Prepare your PC and web editor Create a directory/folder on your PC called public_html (already created) Start Microsoft Front Page and create a new page. Click on 'File' - ' New'. Choose 'One Page Web Site'. Click right mouse button and choose 'Site Settings...'. Type the title for your page (for example, Professor Watson's Homepage). Then click on the 'Ok' button and enter the directory/folder you created on your PC (i.e., c:\\public_html). Academic Computing Services 2009 Edit your page Make the necessary changes to your homepage. When you edit a hyperlink be sure it is set up with the proper url. The proper URL formats are: – For pages in your local directory: simply the file name (including directory if necessary). – For example, if you store your vita (we'll call the file vita.html) in your public_html directory (the same directory as your homepage), the link format would be A HREF="vita.html" If you store your vita in a sub directory of public_html (we'll call the directory Bio) the link format would be A HREF="Bio/vita.html". Important Note: the URL is case sensitive. Academic Computing Services 2009 Edit your page continued – For pages at NJIT and external sites: the full web address. For example, to refer to the NJIT homepage the link format would be A HREF=www.njit.edu. When you are finished, be sure to save and close your file. The default homepage name that FrontPage uses is index.htm. Use this for your main homepage. Academic Computing Services 2009 Upload your page to the web server Start your SSH software and connect to your web server (afsx.njit.edu). Copy your homepage file from your PC to your public_html directory on the web server. Academic Computing Services 2009 Web.njit.edu/~yourUCID Now use a web browser to check your webpage. Go to http://web.njit.edu/~yourUCID where yourUCID is your UCID. Academic Computing Services 2009 To access your home directory use SSH • Log in Click on New File Transfer Window • Click on public_html • Choose file • Click Upload or Download button to work on files MySQL MySQL is a multi-user, multithreaded SQL (Structured Query Language) database server. Any user with a Highlander AFS account may request access to MySQL by sending an email to [email protected]. For more information on MySQL at NJIT, please visit http://web.njit.edu/mysql/. Academic Computing Services 2009 Useful Resources http://www.webnovice.com/ http://www.w3schools.com HTML Tutorial HTML Quick Reference Welcome to The HTML Station Academic Computing Services 2009 NJIT Internet Style Guidelines Academic Computing Services 2009 HTML basic <!-- ..... --> Specifies a comment. Anything between these tags will be skipped by the browser. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN"> This is the necessary first element of any HTML 3.2 compliant document. <HTML>.....< /HTML> Encloses the entire document. <HEAD>.....< /HEAD> Encloses the head of the document. The following optional tags are placed inside the head. <TITLE>.....< /TITLE> Indicates the title of the document that is used as the window caption. This is the second of the two required tags for any HTML 3.2 compliant document. Academic Computing Services 2009 Body of the Web page <BODY attribute1="..." attribute2="...">.....< /BODY> Encloses the main body of the document. Attributes: ALINK="..."--Specifies the color of the activated links in the page. BACKGROUND="..."--Specifies an image to be tiled as background. BGCOLOR="..."--Specifies the background color. BGPROPERTIES=FIXED--Fixes the background image so that it doesn't scroll. (IE) TEXT="..."--Specifies the color of the text in the page. Academic Computing Services 2009 Body of the Web page continued… LEFTMARGIN="n"--Specifies the left margin for the entire page. (IE) LINK="..."--Specifies the color of the links in the page. TEXT="..."--Specifies the color of the text in the page. TOPMARGIN="n"--Specifies the top margin for the entire page. (IE) VLINK="..."--Specifies the color of the followed links in the page. NOTE: Color is always expressed as RGB (Red Green Blue), where each color has a value between 0 and 255 expressed in hex notation. For example, BGCOLOR=#FFFF00 sets the background color to yellow. For more information check out Colors of the Web. Academic Computing Services 2009 Link to another web page <LINK attribute=" HREF="..." > Currently this tag is not widely supported, however in the future browsers will use a list of these tags to generate a navigation bar for the site. Without browser support, this tag can still be useful for site maintenance. Attributes REL="..."--Specifies the type of relationship of the link to this page. Possible values are: "home", “TOC" (table of contents), "index", "glossary", "copyright", "bookmark", "up", "next", "previous", and "help". Academic Computing Services 2009 Link to another web page continued Attributes continued: REV="..."--Used instead of REL, this specifies a reverse relationship from this page to the link. Possible values are: "made" (author, set HREF=email address) and all the ones used in REL. HREF="..."--Specifies the address of the link. TITLE="..."--Specifies a title for the link. Academic Computing Services 2009