Log In Sign Up

HTML/XHTML Tutorial 2 - Your First Web Page


Forum: Graphic and Web Design

Notices

Welcome to the JustMommies Message Boards.

We pride ourselves on having the friendliest and most welcoming forums for moms and moms to be! Please take a moment and register for free so you can be a part of our growing community of mothers. If you have any problems registering please drop an email to boards@justmommies.com.

Our community is moderated by our moderation team so you won't see spam or offensive messages posted on our forums. Each of our message boards is hosted by JustMommies hosts, whose names are listed at the top each board. We hope you find our message boards friendly, helpful, and fun to be on!

Reply Post New Topic
  Subscribe To Graphic and Web Design LinkBack Topic Tools Search this Topic Display Modes
  #1  
October 15th, 2009, 07:38 AM
CeiCei's Avatar Platinum Supermommy
Join Date: Jul 2005
Location: Mobile, Alabama
Posts: 9,482
Send a message via AIM to CeiCei Send a message via MSN to CeiCei Send a message via Yahoo to CeiCei
OK! You have your HTML Editor, your FTP program, a domain name, and a web host. Sounds like your ready to begin creating your first web page.

Before we begin let me explain just how we will proceed with each tutorial. You won’t be graded on your progress, but it would be very helpful to me if you post a link for each step. This will help me to know how understandable my tutorials are. If you have a question, please do not hesitate to ask. Just please only post questions that are pertaining to the tutorial at hand. Don’t want to confuse anyone.

Now, that we have discussed that let’s get started. The following information may seem a bit instense and I apologize for that. Further tutorials will be less detailed for you.

XHTML Elements
In Tutorial 1 I mentioned the term “XHTML Elements”. Elements are the basic building block of XHTML. They tell the web browser what a particular item in the web page is: a paragraph, a heading, a quotation, and so on. Your elements contain all the information that the browser requires so that is can be viewed by others online.

Viewing the Source
A great way to learn how a web page is put together is to view the souce of a web page. Unless it has been restricted by a code, you should be able to view any website’s source information. Doing this will give you some idea of what to the actually language looks like.

To view a website’s source simply open a website in your web browser. Once the website has been fully loaded right click your mouse on the page. In the menu select “View Source” and a new window will appear that displays the page’s entire markup.

Now keep in mind that not all websites use proper XHTML markup and also might have a variety of codes mixed in. The point here isn’t to have you analyize the page. It is simply a way for you to look at the basics. Plus unless you already know XHTML none of this will make sense to you right now.

Basic Requirements of a Web Page
Every web page has must-have elements. If you look at the source of a web page on any website it should have the following elements which we will discuss in a moment:
  • A doctype
  • An <html> tag
  • A <head> tag
  • A <title> tag
  • A <body> tag

Here is an example of what every web page must have:

<!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>
<title>The name of your web page</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
</head>
<body>
Your content here
</body>
</html>

Now, look at the source again of the website in your browser. See if you can locate each of the elements mentioned here. Take notice on how they are placed within the source of the web page and how I have listed them in a certaian order here.

The way I have the above elements listed here are the proper way of nesting all elements (or tags) within your web page. Every element must have on opening <tag> and a closing </tag>. They must also be listed in proper order, such as <html> <body> and </body></html>.

Definition of Required Elements
It best that I explain what each of these required elements mean so that you can understand why they are absolutely necessary. Every web page you create for your website must have these elements or your information will not be displayed properly.

The Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This term stands for Document Type Declaration. It must absolutely be the very first element on every web page. There should be no spacing or carriage return before it. It tells the web browser which version of HTML (or XHTML in this case) to expect to see. The browser uses this information to decide how it should render items on the screen.

If you are using an HTML Editor other than NotePad or WordPad and open a new document, don’t worry. Most HTML Editors automatically add this for you. I am telling you about because it is something that you will need to know when and if troubleshooting is needed.

The html Element
<html xmlns=http://www.w3.org/1999/xhtml>

</html>

I would go into detail about this particular tag that you see here, but it will only confuse you more than you probably already are. The quick and simple explaination of thise element is that it is the “container” for your web page. Everything within your web page is contained between this element or there is nothing to see on the web. There are two major sections inside the html element: the head and the body. These sections should be easily understandable, but I will define them anyhow for you.

The head Element

<head>
<title>The name of your web page</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
</head>

The head element provides information about the web page; however, nothing will be displayed on the web page itself. This is where you will add a title, meta data that is useful to search engines, and references to any associated codes (which are completely apart of different tutorials). For now I will briefly tell you about the title and meta data.

  • <title>The name of your web page</title> - this element tells the browser what to display in its tab and window title bar. This is also what the search engines use to list your website. Try adding something other than keeping the “Untitled Document” that most HTML Editors use because your website will be listed just like that. In fact, see if you can do a search for “Untitled Document” and see how many sites have forgotten to change the names.
  • <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” /> - The most used reason for meta elements is to provide additional information for search engines that they use for your placement. These elements include the author’s name, description of the web page, a copyright notice, etc. The element example is necessary to let the browsers know which character set to use when displaying your web page.

It is also important that indicate here about self-closing tags. Notice how so all the elements I have mentioned are displayed as <tag> </tag>? Well, meta elements (and a few other tags you will come across) do not have closing tags; however, in XHTML all tags must be closed. How is this done if there is no closing tag? You simply close the tag using a space and /> at the end just as you see in the meta element above. We will discuss this one further later.

The body Element
Finally, we are at the place where your web page is displayed for all to see. Everything between <body> </body> is displayed on the web page you are creating. This is where we will be working for now on to create your website.

Your First Web Page
Ok now that we have all those confusing terms out of the way you can actually begin with your first web page. The purpose of this is to have you create a page and upload it so that it is viewable online. Simple enough, right? Just make sure you read each step completely or you might have a problem.

  • Step 1: Open a new document with your chosen editor whether it’s NotePad or one you have downloaded. If you are using an HTML Editor and it asks for you to select a particular type of document, you want to select HTML (or XHTML if offered).
  • Step 2: If you are using NotePad you can simply copy the full above requirement example. For those using an HTML Editor you want to change the doctype of your new page, unless you were able to open an XHTML document instead of an HTML document.
  • Step 3: Now you need to change your page title and add some text to your page.
  • Step 4: Your next step is to save your page. When asked what name to provide you want to make sure that there are no spaces in the name (you can use “_” and “-“ ) and you save it as *.html or *.htm. Since this is your very first page, you must name it index.html or index.htm. The reason for this is because most web servers and domains are set to only recognize this as the homepage when a domain name is being accessed. In other words when someone types in the direct web address it will take them to this page automatically without typing www.yourname.com/index.html.
  • Step 5: Time to upload your files to the server. You can either use the web based File Manager that your web host offers or you can use the FTP Program you downloaded. As far as how you set up your FTP program to upload to your server you will need to refer to the recommendation of your web host. They usually provide this information in the email they send you when you sign up or you can take a look at their FAQ.
  • Step 6: Once you have successfully uploaded your first page, take a look at it. In your web browser simply type in your domain without /index.html. If your basic page appears then you have been successful. Otherwise, you will need to go back through the steps to see where you went wrong.

Hopefully, creating the page was simple for you and you did it successfully the first time. Click on the link below to see my example of what your page should look like. The text will different, but the the page should be the same if you followed my steps.

My First Web Page

Take notice that my link does not have index.html, but it takes you directly to it. If you add index.html at the end of this link you should still see the same page.

Don’t get discouraged if you didn’t. As you will soon discover that anything can happen when adding pages online.

Again do not hesitate to post any questions you have about this and further tutorials. Your suggestions are also welcomed.
__________________
Kassia's Blog | Kassia's Family Blog | In My Purple Passion | The Food Travel Enthusiast




My Three Princes: Cordell (23 y/o), Ernest (5 y/o), Robert (4 y/o)


Last edited by CeiCei; October 15th, 2009 at 07:45 AM.
Reply With Quote
Reply

Topic Tools Search this Topic
Search this Topic:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off



All times are GMT -7. The time now is 03:08 AM.



Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, vBulletin Solutions, Inc.
Search Engine Optimization by vBSEO 3.6.0