Intro to MIS – MGS351 Building a WebpageChapter OverviewWeb PagesWeb Server StatsW3CSlide 6HTML IntroductionDefault Web pagesUsing HTML TagsHTML CaveatsSlide 11Slide 12Moving to XHTMLGeneral Webpage StructureDOCTYPE OptionsDesigning with StandardsSlide 17Slide 18Cleaner code with CSSUB Web EnvironmentSlide 21Slide 22Slide 23Slide 24Slide 25Next Steps…Intro to MIS – MGS351Building a WebpageChapter OverviewThe World Wide Web–Web servers, Web browsers and Web pagesHTML IntroductionUsing HTML TagsMoving to XHTMLGeneral Webpage StructureUB Web EnvironmentWeb PagesViewing a web page involves using a web browser (IE, Firefox, Mozilla) to connect to a networked machine running web server software (IIS, Apache). This action loads an HTML file from the web server and sends it to your computer across the Internet using the HTTP and TCP/IP protocols, and the file is displayed by your web browser software as a web page.Web Server StatsW3CFounded in 1994 – World Wide Web Consortium Creates specifications and guidelines that are intended to promote the web’s evolution and ensure that web technologies work well togetherSpecifications for: HTML, CSS, XML, XHTML, DOM, etc…W3CNot all browser companies follow or adhere to these guidelines –It was not until FireFox, Netscape 7 and IE 6 did browsers truly support the W3C Web StandardsWeb pages may look different in two browsers –Browsers support different standards, not all of them and support them in different methodsHTML IntroductionHTML (Hypertext Markup Language) is the code used to build web pages. Web pages are text files with HTML code.You can view the HTML code on any webpage by clicking on Source from the View menu in a web browser.HTML files usually have either .htm or .html file extensionDefault Web pagesDefault page appears when visiting a website without specifying the file name in the URL.–www.cnn.com displays www.cnn.com/index.htmlDefault pages are usually either index.htm, index.html, index.asp, index.cfm, default.htm, default.html, default.asp or default.cfm. These options are configured in the web server.Using HTML TagsMost HTML tags have an opening and corresponding closing tag indicated by a slash /.–<pre>…</pre>–<b>…</b>Anything between the tags, denoted by the “…” in the above examples, will be modified according to the behavior described by the tag*All XHTML tags should be closedHTML CaveatsExtra spaces (beyond one) in the code and any line breaks are ignored by the browser when rendering the HTML page. is a special symbol that can be used to insert extra spaces.<br> or <p> can be used to create necessary line breaks.HTML CaveatsHTML CaveatsMoving to XHTMLXHTML (Extensible Hypertext Markup Language) is a hybrid of HTML and XML and should be used to code websites to meet the latest standards set by W3C.–All tags must be closed - including tags like <br />–All tags should be in lowercase except for the DOCTYPE tag.–All tag attributes must be quoted and have values–CSS are used for page formatting.General Webpage Structure<!DOCTYPE html PUBLIC etc…> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><title> … </title></head><body> … </body></html>DOCTYPE OptionsDOCTYPE – 3 types to choose fromTransitional – more easy going and flexible. Most people are using thisStrict – everything must be perfect and there is no flexibility.Frameset – Allows you to use frames on your pageDesigning with StandardsDoes not mean “designing for the latest browsers only”Includes structural languages like XHTML and XML and presentation languages like CSSEven the perfectly designed site will never look identical in all browsers but it should always function and look very similar in any browserDesigning with StandardsLowers production and maintenance costs Makes sites more accessible to users who have special needsMakes sites cross platform and browserViewable on handheld devicesDesigning with StandardsPresentation languages (CSS) format the web page, controlling the typography, placement, color, etc…Due to the separation of structure from presentation you can easily change one without affecting the otherCSS is implemented with inline, internal or external style sheetsLarge sites may be able to reduce bandwidth costs tooCleaner code with CSSWITHOUT CSS<p><font color=“#000000” size=“10px”><b>heading of an article</b></font></p>WITH CSS<p class=“articleheading”>heading of an article</p>UB Web EnvironmentUB provides web space for each student on the UBUNIX servers which run the Apache webserver. Your webpage can be viewed in any of the 3 locations.–www.buffalo.edu/~djmurray–www.acsu.buffalo.edu/~djmurray–wings.buffalo.edu/~djmurrayUB Web EnvironmentURLs and files are case sensitive because the UNIX OS is case sensitive.–www.buffalo.edu/~djmurray/INDEX.html - error!–www.buffalo.edu/~djmurray/index.html - works!Windows servers running IIS are not case sensitive. Both work properly.–http://mediastream.buffalo.edu/Content/courses/–http://mediastream.buffalo.edu/CONTENT/COURSES/UB Web EnvironmentRemember that a webpage is simply a file stored on a webserver in a particular location.Your UB homepage is stored in the public_html directory of your S: drive. Anything in that directory is technically on the web.UB Web EnvironmentIt’s easiest to work from a lab computer since they have direct access to the S: drive folders.Enable your homepage first.–https://ubfs.buffalo.edu/cgi-bin/ubfs_activatepersonalwebsite.cgiUse Windows Notepad to edit the index.html file in your public_html folder.UB Web EnvironmentIf you are using a computer on the UB network (Resnet, wireless, VPN), you can map a network drive and create your own S: drive as explained at this website.http://ubit.buffalo.edu/ubfs/accessubfs.phpUB Web EnvironmentAnother option is using FTP software (Filezilla or Fetch) to upload files to your UB web space using these settings. VPN also required when using from off campus.Host: ubunix.buffalo.edu Server Type: SFTP – SSH File Transfer ProtocolLogin Type: Ask for passwordNext Steps…The hard part is often understanding how the web environment works and where to save the HTML files so they appear on the web!Now its time to try some HTML
View Full Document