Web Basics II

1



Time: September 1, 2010 | 4:00 PM
Location: AITR 190

Here are some simple steps to getting your online portfolio off the ground. For more in-depth information, check out Jason’s workshop notes: http://www.catalystgallery.org/2010/05/web-basics/

Domain Name

Imagine you’re a mover, new to the job and you have your first assignment. The first thing your given is the first house’s address. A website’s domain name is like an address, it tells your web browser where the website is. It’s what you put into your web browser’s address bar, like www.google.com, or www.catalystgallery.com

If you’re interested in buying your own domain name, here are a few places to check out:

  • GoDaddy
  • Yahoo
  • Network Solutions
  • Register.com
  • Domains

Getting a domain name is the first step to setting up your website. After you buy a domain name, it’s time to get…

Hosting

You’ve driven to the address and now you’re at the empty house that you’re about to move a bunch of stuff into. A website’s hosting is like the actual house at an address. Hosting is where your website is actually stored. While you can do this on your own computer (this gets into server management), it’s usually easier (and faster for your viewers) to get hosting at an external company. That company will tie your hosting space (maybe 10 GB at a server out in Denver) to your domain name so that when someone enters that web address into their browser, it’ll contact the server in Denver and retrieve the information there.

We’ve already set up hosting for anaan.org because it typically takes 24-48 hours for hosting to activate, but after you purchase hosting, you generally set-up a username, password, and enter your domain name. Make sure you remember the username and password, these are going to be what we use to upload your website!

Some good hosting services can be found at:

  • GoDaddy
  • HostGator
  • BlueHost
  • Host Monster
  • JustHost.com
  • Web Hosting Pad

After your hosting is set up, we get into…

Designing

There are a huge number of ways to design a website ranging from getting into the nitty-gritty of coding to using more complex software like dreamweaver. Here, we’re going to use a very simple but highly-customizable HTML template to introduce you to the basics of coding and file structures in websites.

HTML or Hyper Text Markup Language, is a language that browsers read to translate how a webpage is supposed to look. HTML is made up of tags, that are entered in < > carrots and come with a starting and ending pair, for example, if you wanted to make a word bold, you would surround that word with a starting <b> and ending </b> tag, such as <b>this text is going to appear bold</b>

Every HTML website’s code begins with <html> and ends with </html>. This is like telling someone, I am going to speak in Russian now, and then they begin speaking in Russian. This tells your browser what language the website is coded in.

Here are some other basic tags:

  • <h1></h1> the heading
  • <body></body> the visible content on the page
  • <p></p> text in between is displayed as a paragraph
  • <a href=”LinkAddress”>LinkText</a> is used for putting links in your website
  • <img src=”ImageAddress” /> is used for inserting images in your website
  • <hr /> puts a horizontal line in your website
  • <br /> is a line break (new line) that you can put in without starting a new paragraph
  • <b>This text is bold</b> makes text bold
  • <i>This text is italicized</i> makes text italicized
  • <u>This text is underlined</u> makes text underlined

Some applications for editing code are:

  • Notepad++ (Win)
  • The HTML Editor (Win)
  • PSPad (Win)
  • Coda (Mac)
  • WebDesign (Mac)
  • Espresso (Mac
  • TextWrangler (Mac)
  • Komodo Edit (Mac & Win)

Next, to get our website online…

Uploading your Website

Now that we have the website done on our computers, we need to upload it to the web. We do this using FTP programs that allow us to upload our files to our hosting provider.

Some good FTP software:

  • FileZilla (Mac & Win)
  • Cyberduck (Mac)
  • SmartFTP (Win)
  • WinSCP (Win)
  • Transmit (Mac)
  • Fire FTP (Firefox add-on)
  • net2ftp (Browser based client)

More Notes

The page titled “index.html” is going to be the webpage that gets automatically loaded when people type in “http://www.yourdomain.com”

The titles of your HTML files appear in the address bar.

There are plenty of great resources on the internet for coding, website construction tutorials, and templates. Looking at how people code their webpages (by going to View-> View Source in your web browser) is a great way of learning what you can do with web design.

Web Editors & Website Builders

  • Dreamweaver (Mac & Win)
  • RapidWeaver
  • Sandvox (Mac)
  • Freeway
  • NetObjects Fusion Essentials
  • KompoZer
  • Amaya
  • SeaMonkey Composer

Website Templates & Content Management Systems

  • WordPress
  • Joomla

Links

w3schools.com: free resource for learning about HTML as well as other languages such as CSS, Java, PHP, SQL

envato.com: a great source for digital media, graphics, codes, etc. for sell.

Be Sociable, Share!
Tags:  , , , , , , , , , , , , , , , , , , ,