Website basics
Download
1 / 27

Website Basics - PowerPoint PPT Presentation


  • 58 Views
  • Uploaded on

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>

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Website Basics' - royal


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Website basics

Website Basics

Ray PankoITM 385 E-CommerceFall 2013


Markup
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
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
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 html1
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 html2
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 html3
Hypertext Markup Language (HTML)

  • Browser renders multiple files as a complete page


Hypertext
Hypertext

  • In traditional text, pages were organized serially

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


Hypertext1
Hypertext

  • Hypertext pages contain links to jump to other pages

    • In the same website

    • In other websites

Website A

Website B


Hypertext2
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
Website

  • Collection of linked webpages

  • Under the control of a single administrator

Website A

Website B


Website development tools
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
Basic Website Development

  • Create website on development PC

  • Upload to website server to host the website for public access


Webserver options
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
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
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 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 http1
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
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 cycle1
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
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
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
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 development1
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
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?


ad