Archive for October, 2009

Basics of XHTML

3
2 years ago
by Dennis Thompson in

What is HTML

What does HTML even stand for anyhow? HTML stands for Hyper Text Markup Language. HTML is not a web programming language like PHP or ASP, it is a markup language. HTML uses elements to create web pages.

HTML Tags

  • HTML Tags are keywords surrounded in angled brackets like: <tag>
  • HTML tags almost always come in pairs, for example: <opening tag> and <closingtag>
  • The first tag is called the start tag and the second tag is called the ending tag. Though, alternative forms of these titles exist, they can commonly be referred to as starting and closing tags, beginning and ending tags, or opening and closing tags.

What use is HTML?

HTML is the language that web browsers, such as Mozilla Firefox, Google Chrome, Apple’s Safari, and Microsoft’s Internet Explorer, read and interpret to display a web page. Every time you visit a web page, a web server is sending your web browser HTML code. Your web browser then turns the raw HTML into paragraphs, headings, images, and other nifty things that we can do on web sites!

How Do We Code HTML?

Writing HTML is easy and can be done using the standard default text editor such as notepad, textedit, or even wordpad. In theory, one can use Microsoft Word to write your html, just be sure to save your initial document as a .txt file since .doc, .rtf, etc have additional formatting that is not needed for HTML.

Other great programs that might or might not be available for free are Notepad++, Netbeans IDE, Aptana Studio, and Dreamweaver.

Writing HTML

If you are using Textedit or Notepad, you need to be sure that you can modify file extensions from .txt to either .html or .htm, they are two of the same.
Note: The file extension .htm is loitering around from the days when you could only have a three-character file extension; there is no difference between .htm and .html.

HTML Syntax

Generally, you’ll have something like the following:

1

<start tag>Text</closing tag>

This is the very basic syntax of HTML. There are, however, more sophisticated ways of integrating HTML, CSS, and Server-Side Programming Languages that we will discuss in later article series.

Doctype

Declaring the DOCTYPE is not absolutely necessary but it’s a W3C standard as really should be used. This is how each HTML document should begin since this states which version of HTML we are using, how the page is encoded, and other important meta data. Below is an outline of XHTML 1.0 Transitional blank HTML document. We also want to declare the DOCTYPE for our Internet Explorer users since IE can produce buddy and unpredictable results if no DOCTYPE is declared.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--where metadata, scripts, and other code goes-->
</head>

<body>
<!--where all HTML goes-->
</body>
</html>

Since the W3C calls this as a standard, it is important that all HTML documents have a similar setup. We need not concern ourselves with the different types of HTML or the functionality of metadata yet.

Common HTML Elements

Here are some very common HTML elements that we will use when creating a web page.

HTML Paragraphs

This element will define a paragraph within a web page.

1
2
3

<p>This is a Paragraph</p>
<p>This is another Paragraph</p>

Heading Elements

1
2
3
4
5
6
7
8
9
10
11

<h1>This is a giant heading</h1>
<h2>This is a big heading</h2>
<h3>This is a medium heading</h3>
<h4>This is a small heading</h4>
<h5>This is a smaller heading</h5>
<h6>This is the smallest heading</h6>

Try creating a blank HTML document and testing these headings yourself and see how they are different!

Links

Links, or anchors, are an essential part of a web experience. Links can take us to other pages within the website and to other websites that have the information we want. Creating links, or anchors, is a very easy and is critical to any website.

1
2
3

<a href="link address">click here</a> <!--This is a link-->
<a href="http://www.atomicpages.net">AtomicPages Hosting!</a>

Using the same code as above, this will allow us to link to other pages, whether within or outside of our web page. When creating links, the url of the website must include http://www.websiteaddress.com. This specifies the protocol to use when opening a link and specifies the world wide web for the website address. Try creating a blank HTML document and creating various links to web pages.

HTML Images

An Image is a digital graphic file such as a .gif, .jpg, .png, .bmp, etc. For web purposes, we only need to be concerned with .jpg, .png, and .gif since they are compressed. Images create a pleasing (or displeasing) experience for users on a web site. Sometimes images can be used to create navigation menus, background patterns, or even contain information for visitors to see. To put an image on a web page, we can use the following HTML:

1
2
3
4
5

<img src="image url" />
<!--This is an Image-->
<img src="images/picture.jpg" />

Note: the links used above are called relative links and will be covered in later articles.

There is something different about this element, however. This is known as an empty element and is used with only certain tags such as image tags, link tags (<link />), and meta tags. These elements do not have a closing tag, they are self-closing tags.

Applying this information image tags we can embed an image such as… flower into our web page with ease!

These are the absolute basics of HTML that will help you on your way to creating a web page of your own one day!

Think you got it? Take the quiz and find out!

Choosing a domain name

1
2 years ago
by Jackson Hines in

Choosing a domain name can take forever. It’s hard to think of something original that you actually like. I know from my experience, almost every time I thought of a domain name I liked and I thought was original, it was already taken.

Here’s some tips on how to come up with a good domain name:

  • If the .com version of the name you want is already taken and already has a functioning website at it, don’t just take the .net. A lot of people will just assume .com when you tell them your website and your advertising will benefit the other site.
  • Avoid domain name’s with hyphens in them like www.atomic-pages.net. It will get annoying to say “dash” in the middle of your website name when you are telling people, and a lot of people will forget.
  • Avoid really long domain names: www.mywebsitedesigncompanyisawesome.com
  • If your website is specific to a certain country, try getting a domain name with the country’s extension. Like a UK website could end with the co.uk extension. Search engines use geographic location as part of the search algorithm, and a country extension will help establish what country your website is for.
  • Sometimes using an unpopular domain extension can make your website seem unique.

You can always change your domain name if you decide you don’t like it, but beware you’ll be starting all over with Search Engine Optimization.

Inserting CSS into your HTML Document

0
2 years ago
by Dennis Thompson in

Ever been creating a web page and you’ve been banging your head against the wall night because you’re trying to find a reasonable way to make all of your CSS nice and organized? You’ve tried inline CSS but that’s too messy and an Internal Style Sheet is too much copying and pasting. Although this exact scene is probably very unlikely, I don’t rule it out!

Ways of inserting CSS into your HTML Document

There are three ways you can link a stylesheet into your HTML web page.

  • External Style Sheet
  • Internal Style Sheet
  • Inline CSS

If someone tells you something, it is usually taken with a grain of salt. Well, if you happen to have over 10 lines of CSS that will apply to multiple web pages then I strongly recommend you putting all of your CSS into an External Style Sheet. It’ll save you from ripping your hair out when you’re trying to fix a problem or change something in your style sheet. It’ll also save you the time from going back to change every single instance of the CSS that you might have plastered over 50 pages of your website.

How do we Link External Style Sheets?

1
2
3
4
5

<head>
<link rel="stylesheet" type="text/css" href="mystylesheet.css" />
</head>

Using this method, you can easily apply one global style sheet to you entire site. This so-called Global Style Sheet would contain all of the classes of ID’s of your web page all in one location that you can amend anytime it is needed.

Your External Style Sheet should be written in a separate document with the file extension ending with .css (mystylesheet.css). It should not contain any HTML or other code other than CSS. Example:

1
2
3
4
5
6
7
8
9
10
11

body {
     margin:auto;
     background-color:orange;
     font:14px "sans serif";
}
p {line-height:1.1em;}

No HTML, no other scripts, just plain old CSS. Note: em is NOT the HTML code for italics, it is a unit of measurement in typography. See this wikipedia article on em if you’re interested.

Internal Style Sheet

You could use an Internal Style Sheet, for instance, if a web page had a unique style separate from the rest of your website. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<head>
<style type="text/css">
#fancy {
     background:transparent url (images/fancy.png) repeat-x top left;
     color:#CCC;
     line-height:1.1em;
     border: thin solid #fff;
}
.fancy {font-weight:bolder;}
</style>
</head>

Inline CSS

To save your sanity, you should only use this method when you absolutely need to. This is usually done for special circumstances when you’re letting someone know something like:

1

<span style="color:red;">Note:</span> Do not click!

That is only changing the color or the “Note:” to red. Then again you can accomplish the same thing by creating a class if you plan on using multiple instances of that red text. Example:

1
2
3

span.red {color:red;} for specific uses
.red {color:red;} for general use

For the HTML

1

<span class="red">Note:<span>

Order of Importance

Believe it or not, there is an order in which Internet Browsers will read Style Sheets from your web page. That order is:

  1. Inline CSS (Within HTML doc)
  2. Internal Style Sheets (In head tags)
  3. External Style Sheets (Linked via link tags in head)
  4. Browser Default

So inline CSS will override all parent css, that is all CSS in internal and external style sheets plus the browser default. Internal style sheets will override external and external syle sheets will override the browser default (which is mighty boring!).

Remember that just because something will override something else doesn’t mean we want to use that as our solution! External Style Sheets are still a preferred way of inputting your style sheet!

There you have, three ways to insert CSS into your HTML document (this DOES apply to PHP, ASP, and other Server-Side Programming scripts as well).

PHP #2: GET and POST

3
2 years ago
by Jackson Hines in

If you’re new to PHP make sure you to go back and read the first part of this tutorial before continuing.

In this tutorial we are going to learn about how to get data from an HTML form (inputted by a user) so that we can use that data in a PHP script.

There are two methods of getting data from HTML forms.  If you have browsed the web for any length of time before, you probably have seen the results of these methods in action.

The GET Method

When you see a URL that has a bunch of text and question marks and equal signs after the actual name of the file, they are using the GET method.  For example when you type in something on google and search you get a url like http://www.google.com/search?hl=en&q=AtomicPages+Hosting; that’s because they are using the GET method.  The part before the ? is the normal url to the page, but the part after that is actually passing data.  Each piece of data is made up of the name of the piece of data and the data itself (the value), separated by an equals sign.  Each pair of name and value pair is separated by an ampersand.  In the page http://www.google.com/search?hl=en&q=AtomicPages+Hosting there are 2 name/value pairs:

The first is named hl and has the value en.  In google’s case, they use this value to specify to the page which language you are searching in.  en stands for english.  If you leave that URL exactly as it is, except change it to say hl=fr, you’ll notice google will change to french.

The second name/value pair is called q and has a value of AtomicPages+Hosting.  This name/value pair is letting the page know what you typed in in the search box on the previous page, so that this page can display the results for that search.

Let’s do our own example of the GET method.  We will first make a simple HTML page called yourname.html containing just an ordinary HTML form.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>
<head>
<title>Your Name</title>
</head>
<body>
<form method="get" action="yourname_processor.php">
     Enter your First Name:<input type="text" name="fname" /><br />
     Enter your Last Name:<input type="text" name="lname" /><br />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>

Notice the method attribute of the form tag.  We set it to get so that the browser knows the use the GET method.  We also set the action to yourname_processor.php which will be the page that gets passed the input data that will we create next.  The browser will use the value of the name attribute in the input tags to name each input value.  So if somebody fills out this form with John as the first name and Smith as the last name, and presses the submit button they will be moved to a url that looks something like this: http://www.example.com/yourname_processor.php?fname=John&lname=Smith

In PHP you can get the value of variables submitted to the page with the GET method by using the name from the url, like so:

1

$_GET[name]

Let’s now make yourname_processor.php so that it displays the person’s name that they entered in yourname.html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>
<head>
<title>Your Name</title>
</head>
<body>
<?php
     $firstname = $_GET['fname'];
     $lastname = $_GET['lname'];
     print "Your name is $firstname $lastname";
?>
</body>
</html>

This code takes the values from the get method and set’s them to variables called $firstname and $lastname.  Then it prints out these variables in a string, as we learned how to do in the previous tutorial

The POST Method

The code for the post method will look almost exactly the same as the GET.  The big difference is that in the POST method, the passed data won’t be displayed in the URL.  The data is passed secretly.  Let’s make the same example again using the POST method.

yourname.html would look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>
<head>
<title>Your Name</title>
</head>
<body>
<form method="post" action="yourname_processor.php">
     Enter your First Name:<input type="text" name="fname" /><br />
     Enter your Last Name:<input type="text" name="lname" /><br />
     <input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>

And yourname_processor.php would look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>
<head>
<title>Your Name</title>
</head>
<body>
<?php
     $firstname = $_POST['fname'];
     $lastname = $_POST['lname'];
     print "Your name is $firstname $lastname";
?>
</body>
</html>

Unlike with GET, when you click the submit button on yourname.html you will be redirected to the exact same URL everytime, no matter what you entered.  The URL will always look like this http://www.example.com/yourname_processor.php with no name/value pairs on the end.  If you have ever pressed a back button on your browser and received a message that says something like “This page contains POST data, would you like to send the POST data again?”  This is because along with just sending you to this url, some data was also sent through the POST method.

GET vs. POST

There are pros and cons to both and they are both better to use in certain situations.  With GET method, the URL will be linkable and the data will be retained if somebody links you to the page.  With POST, if you try to link somebody to the page, the POST data won’t come with the link.

With POST however, data is kept more secure.  If you had somebody enter in a password, you would definitely want to use POST so that the password isn’t visible in the URL of the next page.

png

How to Optimize for Web

0
2 years ago
by Dennis Thompson in

How are you suppose to know what is “fit” for the web? Why can’t we just stick a big fat image onto our account and have people use that as the website? How do I know if my website will load quick and work efficiency for people with slower internet connections?
jpg
These are all great questions and the simple answer to all of them is by optimizing your web site!

But what is optimizing a website anyhow? Believe it or not, but optimization is a multi step process that includes you taking out all unnecessary code, using smaller images, etc…

A few things you can do:

  • Use images with a high compression such as .jpg files but with half the quality.
  • Use .gif images.
  • Take out all unnecessary css properties, comments and unused selectors.
  • Take out all commented out code that you’re not using.

Other additional things is to be sure you website can be used across multiple internet browsers such as Internet Explorer Versions 6, 7, and the latest version 8, Google Chrome, Mozilla Firefox, Safari, and Opera.
gif
A site that is easily accessible on any browser will bring your website more traffic and help your website grow.

Be sure to regularly update and manage your website as well as keeping the content user friendly and appropriate for your intended audience.
png

Go to Top