280 likes | 358 Views
Website Basics. Ray Panko ITM 385 E-Commerce Fall 2013. Markup. n ow is the time for all good good people to come to the aid of their country The quick fox jumped over the dog. Markup Languages. <Heading 1>Call to Action</Heading 1>
E N D
Website Basics Ray PankoITM 385 E-CommerceFall 2013
Markup now is the time for all good good people to come to the aid of their country The quick fox jumped over the dog
Markup Languages <Heading 1>Call to Action</Heading 1> <p>Now is the time for <i>all</i> good people to come to the aid of their country.</p> Tags <p> and </p> <Heading 1> and </Heading 1> <i> and </i>
Hypertext Markup Language (HTML) Link <p>To see how, click <a href=“Explanation.html” >here</a></p> <p><image src=/images/flower.jpg></p> Placeholder Tag for Graphic
Hypertext Markup Language (HTML) • .htm or .html file is text only • Contains formatting and layout tags (boldface, columns, etc.) • Tags can be placeholders for images, videos, etc. • All nontext material is contained in separate files that are downloaded individually
Hypertext Markup Language (HTML) • Example • Webpage with three graphics and a sound • One HTML file, which is downloaded first • Three graphics files and one sound files • Five files downloaded in all
Hypertext Markup Language (HTML) • Browser renders multiple files as a complete page
Hypertext • In traditional text, pages were organized serially • Indexes, references, tables of contents, etc. were non-serial, but jumps to pages were manual.
Hypertext • Hypertext pages contain links to jump to other pages • In the same website • In other websites Website A Website B
Hypertext • Conceived of by Dr. Vannevar Bush after World War II • Named hypertext by Ted Nelsen in the early 1960s • First computer hypertext system built by Dr. Doug Engelbart in 1964 at Stanford Research Institute • HTML and HTTP standards created by Tim Berners-Lee at CERN around 1991
Website • Collection of linked webpages • Under the control of a single administrator Website A Website B
Website Development Tools • Professional website development programs • Dreamweaver • Limited tools • Cookie-cutter tools • Variations in cookie cutterness • Associated Tools • Graphics, multimedia • Content management systems • …
Basic Website Development • Create website on development PC • Upload to website server to host the website for public access
Webserver Options Webhosting service Owned by a webhosting service (GoDaddy.com, etc.) Operated by a hosting service Good choice for SMEs (small and medium enterprise) Organizationally owned • Owned by your organization • Operated by your organization • May be good option for a large organization
Server Farms • Companies likeAmazon.com have thousands of identical rack-mounted webservers • An individual webpage request is forwarded automagically to an individual server for response • This solution “scales”—can grow without exponentially increasing costs
Group Development • When a dev checks out a webpage, it is locked so that others may not change it Checkout
Hypertext Transfer Protocol (HTTP) • Hypertext Markup Language (HTML) • Standard for format of marked-up files • Hypertext Transfer Protocol (HTTP) • Standard for downloading files from webservers
Hypertext Transfer Protocol (HTTP) • Standard for downloading files from webservers • HTML files • Photographs • Videos • … • Download HTML file first so that the browser knows what file to get and where to put the representations on the page
HTTP Request/Response Cycle • Browser sends HTTP request message to the server • Asks for a specific file • Webserver sends HTTP response message back • Contains the requested file • Or contains an error message • One HTTP request/response cycle for each file downloaded
HTTP Request/Response Cycle • One HTTP request/response cycle for each file downloaded • Example: Webpage contains two graphic images • Need three HTTP request/response cycles • One to download the initial HTML file • Two more to download the individual graphic images
HTTP Request Message • Lines of text with carriage return/line feeds at the end • GET /images/cutedog.jpg HTTP 1.1[CRLF] • Host: dogs.com[CRLF]
Recap • HTML • Hypertext Markup Language • Format for the main file of a webpage • Text-only • Contains tags for formatting, layout, and anchors for information referred to in links • Contains links to other webpages • Each file in a webpage requires an HTTP request/response cycle
Website Development • Use development software such as Adobe Dreamweaver • Create website with many webpages on your own computer • Upload your webpages to a webserver to provide public access
Professional Development • Webserver Options • Webserver owned by the enterprise (UH) • Hosted servers like those at webhosting services (GoDaddy.com) • Multiple devs can work on a website simultaneously • Use a testing server to test every change before uploading it to the production site
Dreamweaver • Professional website development tool • Fully functional, deeply discounted version available at the UH Bookstore • Buying it alone is cheapest • In a package with Photoshop and other adobe tools, more expensive but a great deal • Available at the bookstore, but ask for the non-boxed version (far cheaper) • Version 6.0 is mandatory in the class
Pau • Questions? • Comments? • Cries of outrage?