Logic’s Last Stand

April 5, 2008

Beginner’s Guide to a Real Web-site – Part 1 – Intro to HTML

Filed under: Computers, Freeware — Zurahn @ 6:20 am

Having spent some significant time on Yahoo Answers, a repeating question is simple in nature, but lengthy in reply: How do I make a web-site?

This depends on what you want to do. There are webhosts out there providing their own free web tools, there are WYSIWYG (What You See What You Get) editors on their own available, and there are those who you can purchase custom design from.

This will be the first of my walkthrough tutorials, this time addressing the last answer, which is web design. Because of the rapid changes in the Internet, trying to learn web coding can be a bit confusing and lead to poor, dated knowledge to boot. This is designed to not only cover how to do what you really want to, but to do it correctly and cleanly along the way.

To start, here is some terminology to understand:
Client – A person accessing the Internet
Server – The computer accessed by the client
Browser – A program used to view webpages (e.g. Internet Explorer, Mozilla Firefox, etc.)
Syntax – The rules for writing in a programming language

Some acronyms
HTML – Hypertext Mark-up Language
XHTML – Extensible Hypertext Mark-up Language
XML – Extensible Mark-up Language
CSS – Cascading Stylesheets

For our purposes, this is essentially how the Internet functions:
The client enters an address into the browser, which contacts the server. The server processes the request and sends back the web page. The browser interprets that data and displays it. What happens client-side (within the browser) versus server-side (on the server itself) is different and notable.

Despite there being many languages out there for use in web design, web pages are displayed strictly through the use ofthe mark-up languases of HTML/XHTML/XML and CSS. Every other language is simply a matter of organizing and maniputing those languages prior. Also note that HTML and XHTML are basically the same thing (more on that shortly). And we’re not going to cover XML.

I’ll cover the difference in general between HTML and XHTML now for the sake of clarity (though don’t worry too much about this). XHTML is just the enforcement of standards in coding HTML, that is, putting things in the right order. For example, all tags should be closed <tag></tag>. HTML never gets an error and stops displaying, but that doesn’t make it good coding. We’ll be writing code that is fairly XHTML complient. Occasionally I’ll make notes of the differences between the two.

Ok, so we understand that pages are made in HTML and CSS, and that are accessed through a connection between the client and the server. Now we have to figure out what we want to make.

Let’s go with the idea of a blog-based personal website. It will have a few pages, the foremost being a blog that allows the user to post articles that are automatically displayed on the front page.

One more thing before we get going is to get an editor. Web programming is entirely text, so you can do it in just Notepad if you wanted, but an editor with coloring, line numbers, spacing and highlighting can makes things a lot nicer to work with. Notepad++ comes well recommended, as does HTML Editor 1.5

Now that we have those out of the way, we can get started.

HTML is a mark-up language, meaning there aren’t any logical expressions (if statements, loops, etc.) or commands. Only markers that indicate how the data should be displayed. CSS then adds presentational elements to those tags, such as color, background, borders, etc.

Create a new file called index.html to work from. HTML documents end in either .html or .htm.

The basic structure of an XHTML document is as follows.

<?xml version="1.0" encoding="UTF-8" ?>
<!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>

</head>

<body>

</body>
</html>

(XHTML requires all tags to be in lowercase, while HTML does not. It is not uncommon to see HTML tags in all caps, but this is invalid XHTML syntax).

These tags indicate the key portions of the page, but don’t in terms of the designed do much. If you left them completely off, the page would display the same in HTML (though XHTML will not validate). They are in place for standards purposes, and you should make a habit of using them correctly.

Let’s go through these individually:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?> – A declaration of the text-encoding of the page. Text encoding mismatching can get ugly, so it’s recommended and is common in XHTML. Check <a href="http://www.ibm.com/developerworks/webservices/library/x-tipdecl.html">here</a&gt; for more information.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; – The XHTML declaration. It tells the browser what version of XHTML the site is expected to adhere to, and interprets the page as such.

<html> – indicates the start of an HTML document. The xmlns attribute is for an XML namespace, which correlates with the XML declaration. Don’t worry if that doesn’t make any sense, I barely understand what I just said myself. If you use the XML declaration for version and text-encoding, though, you must have this.

<head> – indicates the header section. This is where your CSS and client-side scripting is placed, as well as the title indicator for the window.

<body> – indicates the area where the majority of your display is placed. You’ll have pretty much everything between these tags.

Don’t worry about the first two too much, the explanation is just there to explain why it will be on the page.

So we have an empty page. Now what? Well, we should structure it further. We need places on the page for a header (a banner with the title of the site), the body (where your blogs we’ll be seen) and for a menu. We will use <div> tags to achieve this. A div is a generic block-level (a tag following it goes to the next line) element.

<?xml version="1.0" encoding="UTF-8" ?>
<!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>

</head>

<body>

<div id="container">
  <div id="header"></div>
  <div id="main">
    <div id="menu"></div>
    <div id="article"></div>
  </div>
</div>

</body>
</html>

We’ve added a container element, to hold everything, which is helpful in CSS formatting.
A header div.
A main div, to contain the menu and section for actually textual displays, such as the blogs.
And the divs individually for the menu and article sections.

These can be arranged differently, but this structure is clear and workable.

Also notice the "id" attributes. An attribute is an additional parameter that tells the tag to do something extra. In this case, "id" gives the tag an identifier that can be used later. Without an ID, there’s little point to a div tag.

Important is that I have indented. Indentation makes things far easier to read and consequently manage. Technically an entire website could be placed on one line. Whitespace doesn’t matter after the first space, so make use of it.

Let’s fill it out with some text now (I’ve left out some of the tags, such as the XHTML declaration. They should still be there, this is just for limiting the amount of text to sift through).

<head>
  <title>Web-Design HQ - Main Page</title>
</head>
<body>
<div id="container">
  <div id="header">
	Web-Design HQ
  </div>
  <div id="main">
    <div id="menu">
	Menus
    </div>
    <div id="article">
      Welcome to my first web-site.
    </div>
  </div>
</div>
</body>

Along with the text, there’s a new tag being used, <title>. This tells the browser what to put in the bar at the very top of the browser.

Open that in your web-browser and you don’t get much.

Web-Design HQ
Menus
Welcome to my first web-site.

This is due to all we’ve done is add containers and text. There’s no presentation. That is done through CSS, which will be covered in Part 2.

The last thing we’ll cover for this part are presentational tags that are XHTML complient.

  <div id="header">
	<h1>Web-Design HQ</h1>
  </div>
  <div id="main">
    <div id="menu">
	<b><u>Menus</u></b>
    </div>
    <div id="article">
      Welcome to my <i>first</i> web-site.
    </div>
  </div>

Tags:
<h1> – Highest level header. Headers range from 1-7, and using appropriately affects search engine interpretation.
<b> – Bold
<u> – Underline
<i> – Italic

While all of these have default formatting that make the text look different, you can change any of them to look and do anything using CSS. For example, you could make the <b> tag underline, and the <i> make text bold and not italic. The majority of vast majority of your formatting should be done using CSS, but <h1-7> tags should be used for defining elements as titles.

As more help, W3Schools.org is an excellent reference.

Part 2 will introduce CSS and structuring of a layout.

Advertisements

2 Comments »

  1. […] 6, 2008 at 1:26 am (Computers) (coding, css, design, html, programming, tutorial, web) In Part 1 we looked at HTML and the structure of a web page. We now look at the design aspects with […]

    Pingback by Beginner’s Guide to a Real Web-site - Part 2 - Intro to CSS « Logic’s Last Stand — April 6, 2008 @ 1:29 am

  2. […] 10, 2008 at 5:01 am (Computers) (css, design, html, menu, page, site, web) Now that we have after Part 1 and Part 2, a structured XHTML page with CSS design, we need pages in which to form an entire site. […]

    Pingback by Beginner’s Guide to a Real Web-site - Part 3 - Linking and Menus « Logic’s Last Stand — April 10, 2008 @ 5:04 am


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: