blog.zivkarmi.com

syndicated content powered by FeedBurner

FeedBurner makes it easy to receive content updates in My Yahoo!, Newsgator, Bloglines, and other news readers.

Learn more about syndication and FeedBurner...

A message from this feed's publisher: Thanks for subscribing!

Current Feed Content

Web Design Tutorial - Introduction - *Start Here*

Posted: Mon, 12 Jan 2009 19:52:05 +0000
Introduction

Welcome to the first part of my XHTML tutorial. There’s a lot to know and learn, so I won’t burden you with long explanations of why I’m doing this. Suffice it to say that I’m hoping this will help people learn the basics of web development at their own comfort and pace. To that end, I’ve split each lesson into separate parts, allowing you to take a break and let what you’ve been reading sink in before continuing on. I hope this serves to provide a more enjoyable learning experience.

I have also provided a glossary of various web-related terms in case you don’t know what something means. Throughout posts, some words will provide a link to their entry in the glossary in case you are lost. You can also click on the “Glossary” link in the navigation bar at the top of the page to get there. If you don’t know what something means, or have a recommendation for an entry I’ve missed, feel free to let me know.

Aside from the opening lesson, I’ll keep discussion of concepts to a minimum and focus on actual coding. Sometimes, though, some concepts just need to be explained in detail. If you find yourself falling asleep reading such sections, you can usually skip ahead to the coding, but I strongly recommend going back and reading what you skipped before you move on to the following lesson. That being said, here is a list of all the lessons so far:

Note: It is highly recommended that you do not skip Lesson 1! I know that it’s quite some reading, but I feel that it will help you understand XHTML better in the long run.

Subscribe to me by RSS feed to get updates in your favorite RSS reader, or by e-mail to receive e-mail updates!
1. Lesson 1
2. Lesson 2
  - Part 1 – Starting your website
Web Design Tutorial - Lesson 2, Part 1

Posted: Thu, 29 Jan 2009 23:50:19 +0000
Lesson 2, Part 1

Setting a Goal

Before we can begin writing a web site, we have to have a goal in mind. What is the purpose of our web page? Who will be viewing it? What kind of information will we need to display, and how will we need to display it?

Let’s Do Some Role-playing

A Biology professor has contacted you because she is in need of a web page for a course she is teaching. She has heard that you have experience in building websites, and wants to employ your services. You meet with her in her office and discuss what she wants so far:
- A heading banner at the top of the page, and the same text in the browser’s title bar
- An introductory paragraph under the heading
- A list of the teacher’s contact information
You tell her you’ll get to work on it right away, shake hands, and leave.

We’ve Got a Client, Let’s Get to Work!

First off let’s create a folder for our project. This will allow us to keep our files organized. Create a New Folder called “biosite” either on your desktop or in your C: drive, or in whatever directory you want this project to be located.

Next, open your editor of choice (Notepad, Notepad++, Dreamweaver, etc.) and start a blank document. Just as in Lesson 1, Part 5, we will begin our document with the html tag, open the document header, insert a title, close the header, and open the body. Our title text should be “BIO101 – Introduction to Biology”. Try that out yourself. Don’t worry. If you’re not sure you got it right, the code is available in the next section.

Once you’re done with that, you should be inside an open body tag. Now let’s begin our content.

Making a Statement

We’ll begin the content by adding a heading element to the document. Element is the term used for an opening tag, the text included after that tag, and the opening tag’s corresponding closing tag.

Element is the term used for an opening tag, the text included after that tag, and the opening tag’s corresponding closing tag.

In XHTML, heading tags are one of the options available for emphasizing text. They make the text bold, and change its size. The tag for a heading is <h#>, where # is a number from 1 to 6, inclusive. The lower the number, the bigger the heading. So an <h1> tag’s text will be much bigger than an <h6> tag’s. You can click here to view what different heading tags look like, and what a paragraph looks like in comparison.

So, as per the professor’s request, let’s slap a big fat heading on the top of that page. After inserting the heading, your code should look like this:
```
<html>
<head>
	<title>BIO101 - Introduction to Biology</title>
</head>
<body>
	<h1>BIO101 - Introduction to Biology</h1>
```
Next we’ll throw in the introductory paragraph that the professor requested. Go to a new line, and then copy in the following text, and throw a <p> tag in front of it, and a </p> tag at the end of it:

Welcome to the course page for your BIO101 class. My name is Professor Anna Tommy. Here you will find all the information you need regarding your semester in this class. Below you will find my contact information.

Alright, two down, one to go! Next we have to insert a list of the professor’s contact info. Before we do that, though, we should let viewers know that what’s coming up is contact information. Throw in a level 2 heading (<h2>) saying “Professor’s Information:”. Now, to the lists. There are three different HTML lists: <ol>, <ul>, and <dl>.

Ordered Lists

The <ol> tag is for ordered lists. These are lists with numbers in front of each item. The list begins with an <ol> tag and terminates with a </ol> tag. Each item in the list begins with an <li> tag and ends in a </li> tag.

Unordered Lists

The <ul> tag is for unordered lists. These are lists with bullets in front of each item. The list begins with a <ul> tag and terminates with a </ul> tag. Also like in an ordered list, each item in the list begins with an <li> tag and ends in a </li> tag.

Definition Lists

The <dl> tag is for definition lists. These lists contain items with definitions. The list begins with a <dl> tag and terminates with a </dl> tag. Since this list contains terms and their definitions, there must be a way to separate a term from its definition. Each term is surrounded by a <dt> tag and its respective closing tag. Each definition comes right after the corresponding term’s closing tag, and begins with a <dd> tag and ends with a </dd> tag.

The list above is a definition list. If you want to see how it works, just click here.

For the professor’s contact info, it makes most sense to use an unordered list, since we are not listing items in order of precedence, nor are we defining terms. Insert the professor’s information as follows:
```
<ul>
	<li>Office: Biological Sciences Building, Room 213</li>
	<li>Office Hours:</li>
	<li>Monday: 1:00PM - 3:00PM</li>
	<li>Wednesday: 2:30PM - 4:45PM<li>
	<li>Office Extension: 0213</li>
	<li>E-mail: atommy@afakeuniv.edu</li>
</ul>
```
The code above produces a list that looks like this:
- Office: Biological Sciences Building, Room 213
- Office Hours:
- Monday: 1:00PM - 3:00PM
- Wednesday: 2:30PM - 4:45PM
- Office Extension: 0213
- E-mail: atommy@afakeuniv.edu
That’s all well and good, but doesn’t it look a little silly having the Monday and Wednesday office hours lined up with the rest of the list? It seems that they should be more like sub-items, indented further so that it is obvious that they belong to the “Office Hours” item. We can accomplish this by “nesting” our lists.

Nesting

Generally in programming, the term “nesting” refers to placing one element inside of another instance of the same element. And that’s exactly what we’re going to do. Go to the end of the line with the “Office Hours:” item on it, and remove the closing </li> tag. Skip to the next line, and type in <ul> to open an unordered list within the currently open list item. Now the list items below this <ul> tag will all be indented further, as they will belong to the second list. Since we only want this for the “Monday…” and “Wednesday…” items, we’ll have to close this list within the “Office Hours:” list item. Go to the end of the “Wednesday…” line, and hit ENTER. On the new line, type in </ul>. Now the nested list is closed. However, we are still inside the “Office Hours:” list item. Remember how we deleted the </li> off the end of that line before? We must now insert that closing tag here instead, right after the </ul>, but before the next <li>. Your code should now look like this:
```
<ul>
	<li>Office: Biological Sciences Building, Room 213</li>
	<li>Office Hours:
	<ul>
		<li>Monday: 1:00PM - 3:00PM</li>
		<li>Wednesday: 2:30PM – 4:45PM<li>
	</ul></li>
	<li>Office Extension: 0213</li>
	<li>E-mail: atommy@afakeuniv.edu</li>
</ul>
```
Notice how I also indented the nested list’s items, so that it would be easier for the eye to see that the Monday and Wednesday items belong to a nested list. Our list now looks like so:
- Office: Biological Sciences Building, Room 213
- Office Hours:
  - Monday: 1:00PM - 3:00PM
  - Wednesday: 2:30PM – 4:45PM
- Office Extension: 0213
- E-mail: atommy@afakeuniv.edu
Much better, don’t you think?

Step 1 Complete!

We’ve accomplished the 3 tasks requested by the professor. We’ve created a page with a title, a heading banner, an introductory paragraph, and a list (well, technically two lists) of contact information. Good job! Let’s close up this page for now by adding our closing body and html tags. I hope you didn’t forget about them!

Save the page as “index.html” to your “biosite” directory. By default, web browsers display an “index.*” page first when told to go to a web directory. So when your browser loads “http://www.google.com”, it’s actually loading “http://www.google.com/index.html”. When you go to “http://blog.zivkarmi.com”, you are actually loading “http://blog.zivkarmi.com/index.php” (.php is a file extension for PHP files). Now go to your biosite directory and double-click your html file. It should open in your default browser, and your page should look like this. Your source code should look like this:
```
<html>
<head>
        <title>BIO101 - Introduction to Biology</title>
</head>
<body>
        <h1>BIO101 - Introduction to Biology</h1>
        <p>Welcome to the course page for your BIO101 class.
        My name is Professor Anna Tommy. Here you will find all the information you need regarding your
        semester in this class. Below you will find my contact information.</p>

        <h2>Professor's Information:</h2>
        <ul>
                <li>Office: Biological Sciences Building, Room 213</li>
                <li>Office Hours:
                        <ul>
                                <li>Monday: 1:00PM - 3:00PM</li>
                                <li>Wednesday: 2:30PM - 4:45PM</li>
                        </ul>
                </li>
                <li>Office Extension: 0213</li>
                <li>E-mail: atommy@afakeuniv.edu</li>
        </ul>
</body>
</html>
```
And that’s it. Professor Tommy is happy to hear you’re done already, because she’s got some updates for you to make. It looks like you’re going to need to use tables, and she’s heard that implementing navigation using hyperlinks is a good idea too…

Enjoyed the lesson? Keep your eyes open for Lesson 2, Part 2.
Subscribe to my RSS feed to get updates in your favorite RSS reader, or subscribe by E-mail!

<< Go back to Lesson 1, Part 5 Table of Contents Continue on to Lesson 2, Part 2 >>
Web Design Tutorial - Lesson 1, Part 5

Posted: Fri, 23 Jan 2009 00:04:22 +0000
Lesson 1, Part 5

So, Where Do We Start?

To finish up this lesson, we are going to build a very simple web page, and analyze the different parts of it. You’ll learn some new fundamental tags, and what they do.

To begin, start up your editor of choice. If you are using Notepad++ (N++ from here on) as I recommended in Lesson 1, Part 4, go to the Language menu at the top and select HTML. This will set the syntax highlighting to recognize HTML tags. You don’t have to do this, since once you save the file the program will automatically switch to the appropriate setting. However, if you want the highlighting enabled right away, you should do this now.

If you don’t know what Notepad++ is, I recommend you go back to Lesson 1, Part 4 and read about it.

Type the following code into your editor. Do NOT copy and paste. I can’t stress this enough, and I will probably reiterate it often. The point is to learn to do this, and copying and pasting will teach you nothing.

First, let’s put in our own html tag. As I explained in Part 3 of this lesson, this will allow the browser to recognize the page as an html document. Begin by typing <html> on the first line.

Now hit ENTER to skip to the next line. Next we’ll open the document header by using the header tag <head>. The header is where you put information you need the browser to know about, but that you do not want to show up on your page for users to view. We’ll use the next part as an example.

Press ENTER again to skip to the next line, then press TAB. Type in <title>. This will open up the title tag. The title element contained in this tag is what will show up in the blue bar at the top of your browser window. This is an item that you want the browser to know about, so that it can display it in the window’s title bar, but that you don’t want to appear in the actual page. This is why the title is in the header. Now type “Hello World!”, and close the title tag by typing </title>.

That’s all we need in the header section for now. Press ENTER to go to a new line. If your cursor is indented so that it’s right under the beginning of <title>, hit BACKSPACE (or DELETE for Mac users) to go back to the beginning of the line. Now close up the header section by typing in </head>.

Now that we’re done with the header, we can proceed to the body section. The body section is where all your content is written. Anything you want the user to see must be entered in the document’s body. Begin the body section with the tag <body> on a new line.

Since this is a very basic web page, we’re not going to get into anything too fancy here. Skip to the next line, indent using TAB, and type in <h1>Hello World!</h1>. The “h1″ tag is a heading tag. This is not to be confused with header. You will learn more about heading tags in the next lesson.

That’s all. Let’s wrap up this page by closing the remaining open tags: body and html. Press ENTER once, make sure your cursor is lined up with the <body> tag, not the <h1> tag, and type in </body>. Skip to the following line and type in </html>. That’s it! Your code should now look like this:
```
<html>
<head>
	<title>Hello World!</title>
</head>
<body>
	<h1>Hello World!</h1>
</body>
</html>
```
I want to point out just one more thing. The indentations for the “title” and “h1″ tags are not necessary as far as the browser is concerned. In fact, HTML doesn’t recognize anything beyond a single white space in between two words. That’s why if you try to type <h1>Hello World!</h1>, the browser will still output “Hello World!” with a single space.

I digress. The point is that the reason for the indentations is for code readability. It allows whoever is reading the code, be it yourself or someone else, to immediately identify that the indented section belongs inside the section it is indented from. So anyone looking at the code you just wrote can immediately tell that the “title” section belongs to the “head” section, and the “h1″ section belongs to the “body” section. This is a good practice, and you should always use such visual hints to keep your code from becoming one big unintelligible blob.

Alright! Now go ahead and save your file to your desktop as “basic.html”. HTML pages can be saved with either “.htm” or “.html” extensions, though currently “.html” is the more frequently used. In your Save dialog box, you should set the file type (under the box where you would input the name) to “All Files”, so you can avoid accidentally saving your file as something like “basic.html.txt”. Now go to your desktop and double-click on “basic.html”. Your default browser should open up displaying your page. Notice “Hello World!” both in the title bar of the browser window (courtesy of the “title” tag), and in big letters in the web page itself (which came from the “h1″ tag).

Congratulations! Your first very own web page! But you’re just scratching the surface of what can be done with HTML. There’s many more tags to learn, so Subscribe to My RSS Feed to find out when Lesson 2 is available!

Enjoyed the lesson? Keep your eyes open for Lesson 2.
Subscribe to my RSS feed to get updates in your favorite RSS reader, or subscribe by E-mail!

<< Go back to Lesson 1, Part 4 Table of Contents Continue on to Lesson 2, Part 1 >>

Web Design Tutorial - Lesson 1, Part 4

Posted: Fri, 16 Jan 2009 21:25:17 +0000

Lesson 1, Part 4

One Last Matter Before We Start…

At this time I would like to address just one more thing that I think is worth mentioning.

As I said before, coding in Ye Ol’ Notepad is not much short of a nightmare. I’m not sure how good the basic text editor for Mac users (TextEdit, if I’m not mistaken) is, but if it doesn’t offer syntax highlighting, I say don’t use it. Syntax highlighting makes life so much easier, and will increase your productivity significantly.

“If it doesn’t offer syntax highlighting, don’t use it. On the other hand, advanced programs can be overwhelming if you don’t know what you’re doing. Stick to simpler text editors that offer syntax highlighting.”

On the other hand, I wouldn’t recommend more advanced programs like Adobe Dreamweaver or *shudder* MS Front Page (I use the term “advanced” very loosely for the latter) to those new to this field.

Dreamweaver, for example, has tons of options, is extremely powerful and very versatile, but as such can be equally overwhelming if you don’t know what you’re doing. Once you have a grip on HTML, using HTML editors like Dreamweaver becomes much easier, because if you can’t figure out how to do something using the interface, you can simply code it in yourself. If you insist on using an HTML editor, I would ask you to stick to the Code view rather than the Design or Split views, so that you’re looking at just the code and not worrying about what the outcome looks like just yet.


HTML Editors like Adobe Dreamweaver can be a bit overwhelming if you don’t know how to use them.	It’s best to stick with text editors with syntax highlighting, such as Notepad++ (shown here), until you have a good grip on HTML.

That being said, my personal recommendation for a text editor is Notepad++. It’s lightweight, yet powerful. You don’t have to learn a bunch of new menus or palettes or anything of the sort to use it, you can just open it up and dive right in to coding. It comes with syntax highlighting and has the ability to support useful downloadable plug-ins. The installation is also quick and easy, so you can have your new editor up and ready to go in no time.

Note to Internet Explorer users: If you are going to be developing using IE and Notepad++, the new version of Notepad++ provides a check box during installation for the option to use it as the default HTML viewer when you View Source from IE. You’ve read my opinions about reading HTML in the regular Notepad. Decide for yourself.

To visit Notepad++’s home page, click here.
To download Notepad++ version 5.1.4 click here.

Enjoyed the lesson? Keep your eyes open for Part 5.
Subscribe to my RSS feed to get updates in your favorite RSS reader, or subscribe by E-mail!

<< Go back to Lesson 1, Part 3 Table of Contents Continue on to Lesson 1, Part 5 >>

Web Design Tutorial - Lesson 1, Part 3

Posted: Thu, 15 Jan 2009 00:08:28 +0000
Lesson 1, Part 3

At the end of Lesson 1, Part 2, I had you open the source code for that page. If you still have it open, that’s great. If not, you can just open this post’s code. For our purposes, which page you use won’t make a difference.

Tag! You’re it!

As I mentioned in the previous section, commands in HTML are known as tags. These tags are what allow the browser to understand what you want it to do.

Let’s take a look at the second line of the source code. It reads like so:
```
<html xmlns="http://www.w3.org/1999/xhtml">
```
For now we’ll ignore the xmlns=”blahblahblahyadayadayada” part. That part comes later, and has to do with the details of creating valid XHTML documents.

So, what we’re left with is <html>. And so we arrive at the most basic tag in HTML. It tells the browser that what it’s about to read is an HTML document. Every HTML document must have an <html> tag in it.

Now that we know that this is a tag, what’s the main thing that stands out about it? Don’t tell me it’s the color; that’s arbitrary, based on what program you’re viewing the code in. It should be the triangular brackets, which (unless you do some other form of coding, or type math, or draw emoticons like >.>) you’ve probably never even used on your keyboard before. Every tag begins with a left angle bracket (< - also known as a “less-than sign”), and ends with a right angle bracket (> - also known as a “greater-than sign”).

Now let’s skip down to the very bottom, to the very last tag on the page. Whoa! It’s another one! Where are they coming from?!

Actually, in a way, it’s the same html tag that you saw at the top of the page. You see, most tags, with a few exceptions, have a start and an end version of themselves. Why? Well, let’s say you use a tag that lets you write a paragraph. If you just put the appropriate tag at the beginning of the paragraph, how will the browser know when the paragraph ends? For this reason, there exist closing tags. If you look closely you’ll notice that the html tag at the bottom of the page has a forward slash (/) right after the left angle bracket (<). This means that it is a closing tag.

Aaaaaaand… Voilà! Just like that you have a basic understanding of the inner workings of HTML. Simple, isn’t it? From here on out it’s just a matter of learning the different tags and when/where to use them.

Enjoyed the lesson? Keep your eyes open for Part 4.
Subscribe to my RSS feed to get updates in your favorite RSS reader, or subscribe by E-mail!

<< Go back to Lesson 1, Part 2 Table of Contents Continue on to Lesson 1, Part 4 >>
Web Design Tutorial - Lesson 1, Part 2

Posted: Tue, 13 Jan 2009 09:15:36 +0000
Lesson 1, Part 2

What makes XHTML different from programming/scripting languages?

Basically, XHTML is different in that it is read straight through by the browser, and is processed as the browser reads it from top to bottom. Programming languages, on the other hand, need to be checked for errors by the compiler (the program that translates the code into something the machine can understand), and they allow for jumping around between the code based on certain conditions.

XHTML itself does not provide error-checking, nor does it offer decision-making capabilities.

The first half of the above statement means that what you type is what you get. The browser will render any mistakes you make to the best of its ability, but if you do something wrong, it won’t let you know. It will just print out what it’s given, and it couldn’t care less if what comes out is horribly arranged on the page, or completely illegible, or even missing whole sections of content.

The latter part of the statement means that plain (X)HTML documents are static. That is to say, a page written in just HTML cannot change unless the author manually goes in and changes the file. What is written in the file is what will be displayed every time. The opposite is a dynamic page. Dynamic pages can change based on certain conditions, such as a website that always displays the current date and/or time. Among the languages that can make pages dynamic are JavaScript, AJAX, PHP, ASP, and JSP. In addition, SQL is a language that allows you to create and use databases, which play a big role in dynamic web pages.

No error-checking or conditional statements? Then what’s so good about XHTML?

There are two really great things about XHTML (which apply to CSS and JavaScript as well, as you’ll see later on):
1. It’s FREE. And I don’t mean free as in “Try it out free, and in 30 days we’ll start charging you for it.” To write HTML all you need is a text editor (something as simple as Notepad will do, though we’ll discuss other options soon) and a web browser. I prefer (and strongly recommend) Mozilla Firefox. Among other reasons, it has some wonderful extensions that can be very useful even to professional web designers.
2. You can view other people’s code. What’s so good about that? Well, one great way to build your HTML knowledge and understanding is by looking at other websites’ source code and learning from that. Why not try it out now?
Let’s take a look at the source code for this page. I recommend doing this in Firefox, as it shows source code with syntax highlighting. This means that the commands, or tags as they’re called in HTML, are color-coded to make them easier to read. Take my word for it, it will make recognizing code sections a whole lot simpler. Internet Explorer for Windows simply opens source code in Notepad by default, and that’s something no one should have to deal with. To view source code, go to the “View” menu at the top of the page, and depending on what browser you’re using you’ll see something like “Source” or “Page Source” or “Source Code.” You get the picture. Alternatively, Firefox users can simply press CTRL+U.

How to view source code in Mozilla Firefox. Firefox users can simply press CTRL+U to bring up the source code.

Now that you have this page’s source code in front of you, the first thought that comes to mind is probably “Someone tell me what all these weird words/commands are, and why are there these little triangle things around every word?” If you have syntax highlighting on, you might also be thinking “Oooooh colors!”

A website’s source code. Viewed in Mozilla Firefox.

Take a deep breath, don’t panic. And don’t get too distracted by the colors. It’s all much simpler to understand than you may think. The next section will explain what it is you’re seeing.

Enjoyed the lesson? Keep your eyes open for Part 3.
Subscribe to my RSS feed to get updates in your favorite RSS reader!

<< Go back to Lesson 1, Part 1 Table of Contents Continue on to Lesson 1, Part 3 >>
Web Design Tutorial - Lesson 1, Part 1

Posted: Mon, 12 Jan 2009 23:47:44 +0000

Lesson 1, Part 1

What are HTML and XHTML?

HTML stands for HyperText Markup Language. XHTML stands for eXtensible HyperText Markup Language. Unless noted, I will use the acronyms HTML and XHTML interchangeably. There’s no reason to risk confusion with the differences at this point.

(eXtensible) Hypertext Markup Language? What in the world does that mean?

The acronyms mean that they are markup languages used for writing hypertext (that is, web) documents. What’s a markup language, you ask? Markup languages are sets of code that allow you to set different rules for the text you type. Still confused? You’re not making this easy for me, are you? Okay, I’ll give you an example:

Let’s say I wrote out a text document, and I wanted to post it on the internet. Web browsers don’t understand that I’m trying to indicate a new paragraph just because I skipped a line and indented the text at certain points in my file. I need to let the browser know of my intention, and HTML will let me do that. How? Hey now, let’s not get ahead of ourselves. One step at a time.

Enjoyed the lesson? Keep your eyes open for Part 2.
Subscribe to my RSS feed to get updates in your favorite RSS reader!

Table of Contents Lesson 1, Part 2 >>

syndicated content powered by FeedBurner

Subscribe Now!

...with web-based news readers. Click your choice below:

...with other readers:

Current Feed Content

Posted: Mon, 12 Jan 2009 19:52:05 +0000

Posted: Thu, 29 Jan 2009 23:50:19 +0000

Posted: Fri, 23 Jan 2009 00:04:22 +0000

Posted: Fri, 16 Jan 2009 21:25:17 +0000

Posted: Thu, 15 Jan 2009 00:08:28 +0000

Posted: Tue, 13 Jan 2009 09:15:36 +0000

Posted: Mon, 12 Jan 2009 23:47:44 +0000