1Website BasicsRay PankoITM 385 E-CommerceFall 2013

2 Markupnow is the time for all good good peopleto come to the aid of their country

The quick fox jumpedover the dog

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

4 Hypertext Markup Language (HTML)<p>To see how, click <a href=“Explanation.html” >here</a></p>

<p><image src=/images/flower.jpg></p>

Link

PlaceholderTag for Graphic

5 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

6 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

7 Hypertext Markup Language (HTML) Browser renders multiple files as

a complete page

8 Hypertext

In traditional text, pages were organized serially

Indexes, references, tables of contents, etc. were non-serial, but jumps to pages were manual.

9 Hypertext Hypertext pages contain links to

jump to other pages In the same website In other websites

Website A Website B

10 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

11 Website

Collection of linked webpages Under the control of a single

administrator

Website A Website B

12 Website Development Tools

Professional website development programs Dreamweaver

Limited tools Cookie-cutter tools Variations in cookie cutterness

Associated Tools Graphics, multimedia Content management systems …

13 Basic Website Development

Create website on development PC

Upload to website server to host the website for public access

14 Webserver Options

Organizationally owned

Owned by your organization

Operated by your organization

May be good option for a large organization

Webhosting service

Owned by a webhosting service (GoDaddy.com, etc.)

Operated by a hosting service

Good choice for SMEs (small and medium enterprise)

15 Server Farms Companies like

Amazon.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

16 Group Development When a dev checks out a

webpage, it is locked so that others may not change it

Checkout

17 Professional DevelopmentDevelopment Computer

Testing Server

Production Server

For website development and updating

For testing initial websites and every subsequent change

For giving service to visitors

18 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

19 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

20 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

21 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

22 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]

23 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

24 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

25 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

26 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

27 Pau

Questions? Comments? Cries of outrage?