Create a Website Session I

1
Create a WebsiteSession I

• Key Components
• Hands-on HTML

2
Website Components

• Server
• The store ? Provides the place where you can
  store your products and people can get them.
• Domain Name
• The address ? People need this to find your
  store.
• Web pages
• The layout ? Displaying your products the way you
  want.

3
Upload
4
The Server

• A computer for your files (pictures, text, web
  pages, music, etc).
• Upload to the server ? Put your files into the
  server.
• Download from the server ? Retrieve a file that
  is already on the server.
• Every time you see a website, everything you see
  was downloaded from a server to your browser.

5
Server Host Specifications

• FTP File Transfer Protocol
• To transfer a lot of files at once, youll need
  FTP, it helps you access the files in a server.
• Bandwidth Transfer Limit
• How much of your site can be seen? What happens
  when a lot of people visit?
• Disk Space/Storage
• How much can you upload to the server?
• Subdomains books.google.com, scholar.google.com
• Webmail Check your email on the web, ie.
  Marketing_at_yourdomain.com
• Specifications (important depending on the
  programs you want to install)
• Apache vs. IIS (Server Type)
• PHP vs. ASP, etc. (Programming Language)
• mySQL vs. SQL (Database Type)

6

• http//www.bluehost.com/tell_me_more.html
• http//www.hostgator.com/shared.shtml
• http//www.fortunecity.com/compare-hosting-plans.s
  html

7
Domain Name

• www.DomainName.com, www.DomainName.edu,
  www.DomainName.net, etc
• http//www.google.com Google.com is the domain
  name.
• http//www.uwest.edu/site/page.html UWest.edu
  is the domain name (the rest are just folders and
  files. site is a folder, page.html is the web
  page file)
• You need to rent this name by registering for
  it, usually on a year by year basis.
• Vendors godaddy.com,networksolutions.com

8
Domain Specifications

• General rules of thumb
• .com commercial
• .edu educational institution
• .net anything goes.
• .org non-profit organization
• You can purchase a domain first, without buying
  hosting service. Or you can purchase it as a
  package. Many hosting companies offer the
  package.
• You will have to direct this domain to the IP
  address provided by your host.
• It could take up to 24-48 hours to resolve to
  have all computers online associate the domain
  name with the host that has your files.

9
http//www.godaddy.com
10
Web Pages

• HTML, HyperText Markup Language
• Tells your internet browser what to do, where to
  get pictures, where to display the links layout
  and text.
• Open your Internet browser, go to any website,
  right click anywhere on the website and select
  View Source to see that pages HTML code.
• CSS, Cascading Style Sheets
• A way to share control and layout of your entire
  site without changing every single page.
• Javascript
• Small functions that detects input from the
  internet user.

11
Web Design Specifications

• HTML Editors
• WYSIWYG What you see is what you get, no need
  to use HTML, drag and drop, start typing words.
• Dreamweaver, Frontpage, Microsoft Word (Save
  AsHTML)
• HTML Code Editors Notepad with helper
  functions, i.e. Color coded, indents, shortcuts.
• Textpad, Araneae
• Has both WYSIWYG and HTML code editor.
• How to choose http//webdesign.about.com/library/
  editorquiz/blstart.htm

12
(No Transcript)
13
(No Transcript)
14
Summary

• To setup a website
• Find a hosting service, make sure the
  specifications are what you need.
• Decide on a domain name, make sure its not
  already taken.
• Use a web editor (and a graphics application) to
  design your website and upload your files.
• Update as necessary.

15
Basic HTML

• If you use a WYSIWYG editor, you might will not
  be working directly with HTML, but you should
  know how it is done.
• Remember all HTML need an OPENING tag and a
  CLOSING tag.
• lthtmlgtlt/htmlgt, ltbodygtlt/bodygt, or self-closing
  tags ltimg src /gt
• No frills resource on learning HTML
  http//www.w3schools.com/html/default.asp
• You should try to go through the entire series on
  the website.
• You should also try to go through the CSS
  tutorial http//www.w3schools.com/css/
• How do you know your HTML is correct? Validator
  http//validator.w3.org/

16
Hands On HTML

• Open notepad (Start gt All programs gt Accessories)
• Type
• lthtmlgt
• ltheadgt
• lttitlegtJudys Pagelt/titlegt
• lt/headgt
• ltbodygtThis is my first homepage.ltbgtThis text is
  boldlt/bgt
• lt/bodygt
• lt/htmlgt

17
HTML Extension

• When working with HTML, always save as
  filename.html with .html at the end.
• Save the notepad file (NOT as .txt)

18
See Your HTML at Work

• Double click on the file (.html is associated
  with Internet Explorer, like .doc opens up
  Microsoft Word)
• It renders the HTML code into this

This is the text between lttitlegtlt/titlegt
This was the text between the ltbgtlt/bgt tags.
This is all in the ltbodygtlt/bodygt
Note You do not have to be connected to the
Internet to design a web page, because your
computer is now acting like to a server.
However, you cant send this URL address to
others for them to check, because its for your
computer only.
19
Essential Tags Every webpage should have this

• HTML lthtmlgtlt/htmlgt
• A webpage should start and end with this tag.
• HEADltheadgtlt/headgt
• This should be at the beginning.
• TITLE lttitlegtlt/titlegt
• This should be between the HEAD tags.
• BODY ltbodygtlt/bodygt
• All text, graphics, tables, anything that the
  Internet user physically sees on the browser
  should be between the BODY tags.

20
Element Tags

• BOLD ltbgtlt/bgt
• ITALICS ltigtlt/igt
• Images ltimg srcURL width height alt
  /gt
• The width and height is by pixels, you can find
  them by right clicking on the picture and
  selecting properties.
• Linking lta hrefURLgtThe text to click onlt/agt
• Headings lth1gtlt/h1gt, lth2gtlt/h2gt, etc.
• Paragraph ltpgtlt/pgt
• Line breaks ltbr /gt
• Division/Section (html 4.01 ) ltdivgtlt/divgt

21
Paths For Linking Images

• Relative vs. Absolute
• Guide http//www.webdiner.com/webadv/begin/paths.
  htm
• Relative Path
• The address relative to where your current file
  is (this means music.htm is in the same folder as
  the file you are looking at
• lta hrefmusic.htmgtLibrarylt/agt
• When you tell someone another address in
  Rosemead, do you still tell them its in
  California, USA?
• Absolute Path
• The ENTIRE Address, as much as needed
• lta hrefhttp//www.musicdomain.com/music.htmgtlt/agt
• 1409 Walnut Grove Ave, Rosemead, CA 91770, USA
• Which is better to use?
• Webpages OUTSIDE of your domain should always be
  in absolute path.
• Webpages inside your domain, try to use relative.
  If you change your domain name, or the file
  structure, you dont have to change ALL the paths.

22
Research For HTML

• Programming and coding is not memorization.
• Its looking it up online when you dont know
• http//www.w3schools.com
• http//www.w3.org/MarkUp/Guide/
• Its using it so often that you know it by heart.
• Its creating a template of basic HTML and making
  necessary changes.
• Its looking at other peoples code, and seeing
  how they do it.

23
Your Homework (Optional)

• Design a basic HTML web page with the following 4
  HTML elements
• A picture (use this URL http//library.uwest.edu/
  workshop/workshop.jpg)
• A bolded line of text.
• An italic line of text.
• A table with one row and 3 columns, with a border
  size of 1.
• We did not go over TABLES in this workshop. Do
  research on how to code tables in HTML.

24
Your HW should look something like this, send the
file to library_at_uwest.edu for review.