Exploring JavaScript

Happy holidays! For all of you beginning web designers, I'm giving you a little gift: the gift of JavaScript. This, along with Exploring CSS and Exploring HTML, is a tutorial so you can learn about JavaScript and how it relates to HTML.


What is JavaScript, anyway? As you have learned, HTML is the structural part of the site, and CSS is the styling part of it. JavaScript, which is used basically everywhere, adds functionality to your website. It's like programming, on the internet. (I'm learning JavaScript with you; that's how I understood CSS!)

---

One of the most basic elements of JavaScript is the var attribute. It stands for "variable" just like the variables in math. Do you get tired of typing the same thing, if it's a URL or some text, on a website? Well, var is your solution. Here's an example:

---

<script type="text/JavaScript">
var TheEClub
TheEClub = "The E Club."
document.write("I want to go on " + TheEClub)
</script>

---

In HTML, you have to include the <script> and </script> tags and put the JavaScript in between. The line below the JavaScript declaration, or the first line of the example, declares that the variable is named TheEClub. The next line defines what text (or it could be images, videos, etc.) is displayed when put into the document.write area. The next line is the real text printed on the computer screen. The + TheEClub "strings" along the variable TheEClub into the text, actually displaying the "definition" of the variable, "The E Club."

In basic HTML (since blog posts do not support JavaScript very well), here's what it should look like. (There's also the text, "WebAspire is a division of The E Club" in the sidebar, also written using JavaScript variables.)

I want to go on The E Club.

---

There's also another way in which JavaScript can be incorporated into HTML. Click on the buttons below.

---

This button uses the JavaScript onclick="alert()" function to create a pop-up window, with an "alert" about how awesome The E Club Family Websites are.

---

This button uses the JavaScript onclick="prompt()" function to do the same thing as onclick="alert()", but the pop-up now has an input area where you can type in. The answer is already there thanks to putting a ",'14'" after the real question in the JavaScript code.

---

Exploring CSS

In the last post, which I am working on now, you will be learning about HTML, or HyperText Markup Language.
Besides HTML, there are a few scripting languages besides just HTML that can improve your website's design and functions. The one that I will be talking about now is CSS.

Websites don't always look like sites you would usually visit, with different colors, font faces, and backgrounds. Without CSS, or Cascading Style Sheets, a website would look completely white and boring.

If you wanted to style headings (h1 and h2 for example), this is what some example code would look like:

h1, h2 {color: #000000; font-family: 'Open Sans', sans-serif; font-weight: normal;}

So, if you actually put this example into your site's CSS stylesheet, this is what it will look like.

This is Heading 1 with CSS applied.

This is Heading 2 with CSS applied.

This is normal text with CSS applied.

---

The example above also shows the output of the style, which is now used on WebAspire. Instead being the default Arial and bold, WebAspire's headings are now not bold and in the web font Open Sans. Pretty cool, huh? Luckily, for all of you HTML-savvies out there, good news. If you know HTML (and read this part of the guide), you can learn CSS very quickly.

CSS is just the programming of what HTML elements look like. For example, with CSS, you can edit how text appears. CSS is laid out in brackets, { }, instead of HTML's angle brackets, < >. If you know the name of the HTML element you want to style, Heading 1 being H1, for example, you're almost done with creating a basic CSS style.

The name of the HTML element ALWAYS goes before the brackets. It should look like this, if you're styling an h1:

h1 {CSS functions go here}

Next, you figure out what color, font, etc. you want the text to have, if you're styling text with CSS. If you want to change the color of the text, your CSS should look like this, if you're styling an h1:

h1 {color: #009900;}

If you want to use hexadecimal colors, RGB, or just words, such as "red", any one of these is fine.

If you want to embed your CSS styles in an HTML page in your site, just use the <style type="text/css">, and the matching </style> attribute.

If you want to write a stylesheet as a .css file extension, make sure that you put the following code in your site's <head> tag, after you write the CSS codes: <link rel="stylesheet" type="text/css" href="http://yourwebsite.com/stylesheet.css"> Make sure you replace the "http://yourwebsite.com..." stylesheet URL with your website's CSS stylesheet. (Did you notice that the codes are purple? That's CSS in action, too!)

So, that's the basics of CSS. I, too, am still learning it. With some more experience, and some more advanced CSS, you can create fancy-looking, well-designed websites in just an HTML editor. Enjoy!
 

Exploring HTML

If you go up to a random person and say "HTML", they would most likely not know what you mean. HTML, or HyperText Markup Language, makes up the structure of every website. Want an example of HTML? Just go on any website and hit Ctrl-U. Complicated, isn't it? Well, this post just explains the basics.

---

Unless your website editor, or CMS (content management service) is a really simple drag-and-drop WYSIWYG (What You See Is What You Get) editor, you have to know HTML to create a website. HTML uses markup tags (like <li> and </li> to make a bullet list) to literally mark up web pages.

If you're using a code editor, the first HTML element you'll need is the DocType Declaration (DTD). This is essential for websites since it declares what HTML syntax the page is written in, so the site can easily be indexed by search engines and validated by code validation services. There are quite a few types of DTDs.  

• The latest version of HTML, HTML5, has the simplest DTD: <!DOCTYPE html>
There are many other versions of HTML, but HTML5 is the latest recommendation, and HTML 4.01 is still popular.
• HTML5's predecessor, HTML 4.01, has a more complex DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

Domains, SEO, and Much More

Remember back in my last entry, the part explaining how to get your website hosted? Well, here's some more info on that, plus some other information that web designers should know.

First, buy your domain name, and then create an "A" record, pointing to the file on your computer that your HTML editor-created website is located in. It may take a while, depending on your domain host's TTL (Time To Live) settings.

How to Create a Website

Step 1: How to Create a Website

Before you do anything, you will need to create a website. There are two ways of doing this: Do-it-yourself HTML editor, or custom website creators. Using custom website creators is recommended for beginning web designers who don't know HTML code.

If you want to begin with an HTML editor, you will need to find an HTML editor. I recommend CoffeeCup, an either free or paid HTML editor. With CoffeeCup, you can choose a template for your website if you don't know CSS (Cascading Style Sheet), or you can start from scratch if you do know CSS.
Don't know HTML? Here's the basic HTML code for the creation of a basic website:

<!DOCTYPE html>
<head>
<title>Your website's title</title>
<link rel="SHORTCUT ICON" href="http://yourwebsite.com/favicon.ico">
<meta name="DESCRIPTION" content="Your website's description">
<meta name="KEYWORDS" content="your website, keywords">
</head>
<body>
<ul class="navigation">
<li><a href="/index.html">Home</li>
<li><a href="/blog.html">Blog</li>
<li><a href="/about.html">About</li>
</ul>
<hr />
Your website's content goes here.
</body>
</html>


After you write the code for your website, you need to find hosting for it. Free hosting comes with a subdomain (such as http://mywebsite.server.com), and paid hosting usually comes with a domain name (such as http://mywebsite.com). GoDaddy.com is an example of a paid web host.

Once you find your web host, you will need to point your web host-created URL (uniform resource locator) to the HTML codes. CoffeeCup gives you a very good tutorial through this.

That's how you make a website with an HTML editor!

---

If you want to begin with a custom website creator, you will need to find a website creator. A very customizable and free/low cost website creator is WebStarts. Just choose the package that you want, and begin designing your website.

It's much easier to create a website with a custom website creator, because all of the HTML "site building blocks" are already there.

Have fun!

Welcome to WebAspire!

Welcome to WebAspire! I'm E, your guide through the world of web design. I created The E Club, and a bunch of other websites.

With my web design experiences, I will share my skills with you, the beginning web designer, so you will know how to create a good looking HTML website in a matter of minutes. In future posts, I will guide you through the steps of creating a website, and some posts will have web technology information in them.

Good luck and happy web designing!
-E

P.S. Don't forget to like my websites on Facebook, Twitter, and The E Club Social, a social networking site of mine.