Archive for the ‘HTML Programming’ Category

10
Jan
2010

How to center a header, with HTML and CSS

1 Comment

Here’s a quick tip that’ll help you centre a heading using nothing more than a little bit of HTML and CSS.

First, in a new HTML document (which you can create using something as simple as NotePad or Textedit simply by saving your text document with the .html extension), you’ll want to create a new heading. You can do it by including the following code in your document:

<h1>Hello World</h1>

This text adds a standard heading to your website but what if you want to centre the heading on the page? Easy! Let’s modify the standard <h1> tag to apply a style sheet directly to it:

<h1 style=’text-align:center;’>Hello World</h1>

You’ll notice that I don’t need to setup an individual style sheet to accomplish this task, simply adding the style attribute will allow me to make the changes to this one specific item. If I want to be able to centre multiple items, I could use a style sheet class to accomplish the task:

<style>
.center {text-align: center;}
</style>
<h1 class=’center’>Hello World</h1>

Note the class is represented in the style sheet as a period (.) plus the name of the class. Similarly, if I wanted to assign the centre to all occorances of the <h1> tag I could use:

<style>
h1{text-align: center;}
</style>
<h1>Hello World</h1>

Tags: , , , , , , , , , , , , , , , ,
Posted in HTML Programming

read more
11
Aug
2009

Five things I wish I could have told myself 10 years ago.

3 Comments

five things i wish i could have told myself Five things I wish I could have told myself 10 years ago. image

Back when I was a young(ish) pup doing design work in Toronto, I made a lot of bonehead decisions. Most, but not all I came to regret later on and looking back, here are some things that I wish I could tell myself:

Stop chasing technology.

Back in 1998 the big technology was HTML, Flash scripting and Perl but as the Internet began to really take off I was introduced to hundreds of options including several new flavors of HTML, multiple new programming languages (PHP, ASP etc) and new technologies weekly. While it served me well to understand most of these, it was a waste of time to try to follow most of them.

My advice to myself: Stop trying to master multiple technologies. Instead, focus on one and keep your eyes open for signs that it’s time to learn more after you’ve mastered the first.

Listen to your elders.

I appreciate that this is advice every ‘generation’ tries to give to the next but in my case, I really wish somebody had pointed this out to me. Not because those older then me know anything (especially about the web) but because … everybody likes to be listened to.

My advice to myself: Take advise from those who offer it and try to learn as much as you can so that you don’t have to repeat others mistakes.

Invest in plastics.

No, not plastics … the Internet. Well, I did that (as you can tell) but the advice is still sound. More to the point, never be afraid to predict what the future might hold and prepare yourself for it. Luck it appears isn’t random, those who are ready when opportunity knocks are often the ones we later consider “lucky”.

My advice to myself: Invest in the future, live in the present and learn from the past.

Jobs come from people, not companies.

People send you work when you’re competent and charismatic, companies never send you work. I wish I’d known this sooner but apparently, business decisions are made by people based on a number of factors including how well they like you, the quality of your work and how punctual you are.

My advice to myself: Be good like a waiter … get it to them on time, make it look great and keep a smile on your face.

Never be afraid to fail.

In my life I’ve learnt more from failure then I ever did in school. Don’t be afraid to fail, don’t be afraid to fall down and certainly don’t be afraid to look like a fool. Taking chances is how you get ahead in life and the more chances you’re successful at, the further ahead you’ll be.

My advice to myself: Relax, learn, retry.

(where’d I get the awesome photo? Huge thanks to Sara Petagna!)

Tags: , , , , , , , , , , , , , , , , , ,
Posted in Design, HTML Programming, Marketing Advice, Twitter, Web Site Advice

read more
17
Jul
2009

What is HTML?

No Comments

HTML is an acronym for HyperText Markup Language, the basic publishing language of the Internet.

Every computer document needs a way to be read and understood by a computer program, for example Excel spreadsheets are stored in a special file with the extension XLS which  stores all the rows, columns, headers, footers, special cells, math equations etc for Excel to read and understand. Likewise, the HTML file format stores everything an Internet capable device needs to know to read and interpret a web document such as a web page.

There are actually a number of types of HTML, the first was created by Tim Berners-Lee in 1980 and composed of 22 tags, these special tags allowed users to define the paragraphs and other structural elements of their document as well as some basic elements for leaving comments and document items such as the title.

Although it’s been almost 30 years since the first standard was published, most of the basic elements of HTML are still used. For example, to give your document a title we still use the <title>My Title</title> tag combination and to form a paragraph, the <p>This is my paragraph</p> tags are used. In a lot of ways, the simplicity of HTML is what has allowed it to be so expandable.

You may have noticed that the examples above use an opening <p> and closing </p> tag to designate objects in the HTML code, this is fairly common and easy to understand principle. Essentially every element on a page should have both an opening and a closing tag to show where it begins and ends.

Common examples of HTML block tags are:

  1. The paragraph – <p>
  2. Unordered (Bullet) Lists – <ul>
  3. Ordered (Numbered) Lists – <ol>
  4. Headings (there are several) – <h1> … <h6>

While the above tags allow us to layout a basic HTML document such as a resume, it’s important to note that there are some additional basic formating tags needed as well. For example, if you would like to bold a word, you will need to use the <b>bold</b> tags.

Speaking of which, since HTML has evolved a long way we can sometimes achieve the same effect with different tags. For example, <b>bold</b> and <strong>strong</strong> have the same effect in most web browsers. Why the difference? The word bold refers to a method of formating, which implies the purpose of HTML is to affect appearance, while strong implies that the selected text be more significant than the surrounding text without assuming design elements.

Let’s look at another example, the HTML formating tag <i>italics</i> forces a web browser to display text as italics but <em>emphasis</em> has the same default effect. While they both force the document to appear the same (with italic text) this is not always the desired effect. Perhaps we would like a word to appear darker or lighter than the words around it when it requires emphasis. So a word that we would assume to be italics is in fact displayed as bold, depending on the formating instructions of the designer.

To format HTML text, we have several possibilities:

  1. bold / strong – <b> <strong>
  2. italics / emphasis – <i> <em>
  3. pre formatted – <pre>

As time moved forward, many additional tags and functions became supported by HTML as some tags became depreciated, others found themselves being introduced.

Tags: , , , , , , , , , , , , , , , , , , ,
Posted in HTML Programming

read more
25
Jun
2009

How to quickly design a quality web site

4 Comments

free website design How to quickly design a quality web site image

The first thing that you have to know about building a great looking website is that it’s super easy, super cheap and takes almost no time at all. The basics are already stored on your computer, and those basics can be easily put together like a sandwich to build a great website quickly.

Defining your layout

Step one, let’s decide what your new website is going to look like. Surprisingly, most website designs can be boiled down to just a few basic layouts.

example website layout options How to quickly design a quality web site imageOf course there are plenty more than the few I’ve laid out here but for the purpose of our project, I want to keep this simple and selected the first option, a traditional website layout with a header, footer and two columns.

webpage breakdown How to quickly design a quality web site imageThe HTML used to create this basic web page layout is:

[source lang="html"]
<body>
<div id=’page’>
<div id=’header’>Page Header</div>
<div id=’content’>Content</div>
<div id=’sidebar’>Sidebar</div>
<div id=’footer’>Page Footer</div>
</div>
</body>
[/source]

Preview Page

To format the page properly we also need to add some basic CSS:

[source lang="css"]body {
margin: 0px;
padding: 0px;
text-align: center;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
#header {
background-color: #CCCCCC;
clear: both;
height: 100px;
}
#footer {
background-color:#00FFFF;
clear: both;
height: 100px;
}

#sidebar {
background-color:#FFFFCC;
clear: left;
float: left;
width: 200px;
}

#content {
background-color:#ffffff;
clear: right;
float: right;
width: 600px;
}[/source]

Preview Page

As you will now see, the page content is placed in the appropriate areas for our website. For those of you who are clever with CSS, you can change to the second layout by changing the flipping the content and sidebar’s clear/float values. Technically, if you look at the HTML for this page, the sidebar appears to the right of the HTML but is formated with CSS to appear on the left, this is a Search Engine Optimization trick to move our content closer to the top of the page.

Designing the Web Page

The  Header

Now that we have a basic layout for our website, we need to add a little bit of flare, to do this we need some color and some texture. The best place to get it? Flickr or other online photo database. In this case, I’m going to use a macro focus pair of blue sneakers from Fey the Ferocious.

3031455100 f5450c9645 b How to quickly design a quality web site image

What I want to do is use the sneaker photo as both the header and the color scheme for the website, this is make fairly easy since the photo has such rich colors. Let’s get started with the header by adding a title as well as a menu in the code as such:

[source lang="html"]<div id=’header’>
<div id=’logo’><strong>Website Name</strong></div>
<div id=’menu’>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
</div>
[/source]

By adding this simple header structure, we’ve given the HTML everything it needs to build our header. The next step is to add some basic CSS to the file in order to format and structure the piece.

[source lang="css"]#page {
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
font-family: "Lucida Sans", Arial, Helvetica, Geneva, sans-serif;
}
#header {
background-color: #CCCCCC;
clear: both;
}

#logo {
background-image: url(3031455100_f5450c9645_b.jpg);
padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
background-position: -200px;
font-size: 24px;
color: #FFFFFF;
}

#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
display: inline;
padding-right: 10px;
}
#menu a {
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}
[/source]

Take care to note that I’ve altered the #header and #page format a little to account for the new items, including the fonts I would like to use.

Here’s what my new header will look like:

web site How to quickly design a quality web site imagePreview Page

The Footer

Once the header is completed, I like to work on the footer next. I’m not entirely sure why I do it this way but I find the footer equally important as the header and sometimes it seems to be an after thought on web pages, so I like to address it while I’m still fresh.

The footer has to contain some basic elements such as copyright and links, to accomplish this here’s the HTML code that I’ll use:

[source lang="html"]<div id=’footer’>

<div id=’footermenu’>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>

<p>&copy; Copyright 2009, Website Name. All rights reserved.<br />
Header photography by <a href="http://www.flickr.com/photos/renneville/3031455100/">Ferocious Feyrannosaur</a>, <a href="http://www.thisismyurl.com">website design by Christopher Ross.</a><br />
</p>
</div>

[/source]

The CSS for the footer is equally simple:

[source lang="css"]#footer {
clear: both;
height: 100px;
font-size: 10px;
color: #666666;
margin-top: 5px;
padding-top: 5px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}
#footermenu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#footermenu li {
display: inline;
padding-right: 10px;
}
#footer a {
color: #666666;
text-decoration: none;
}[/source]

Since a footer is the technical, ‘legal’ notes for a website, I make it slightly smaller and lighter as to not distract from the rest of the page. Make note of the changes to the original #footer code as well.
web site footer How to quickly design a quality web site image

Preview Page

Formating the Sidebar

Before we get into formating the sidebar we need to make sure there is some space to the right of it so that the content doesn’t butt right up against the sidebar content. To do this, we need to add a padding area inside the sidebar along with our new content. To do this, I will add a margin to the boxes we add but first we have to change the basic HTML of the sidebar.

First, let’s add a new division element with the box class and add a level two heading for each, along with a paragraph of test (for now I’ll use Lorem Ipsum) along with the link.

[source lang="html"]<div id=’sidebar’>
<div class="box">
<h2>Item 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent orci lectus, iaculis ut ullamcorper id, porttitor ut dui. <a href="#">Item 1</a></p>
</div>
<div class="box">
<h2>Item 2</h2>
<p>Sed eget placerat elit. Curabitur sit amet ullamcorper massa. Donec id viverra dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Item 2</a></p>
</div>
<div class="box">
<h2>Item 3</h2>
<p>Suspendisse in quam ac magna condimentum fringilla sit amet sed orci. Fusce interdum ligula eget mauris imperdiet iaculis. Donec eu auctor turpis. Donec ullamcorper hendrerit urna quis malesuada. <a href="#">Item 3</a></p>
</div>
<div class="box">
<h2>Item 4</h2>
<p>Quisque blandit, ante eu tempus tempus, massa lectus dignissim ipsum, id interdum dolor mauris non mi. Ut in orci turpis, non tincidunt nunc. In placerat diam in sem cursus dictum. Morbi ac urna urna. Ut nulla tellus, gravida a iaculis ut, tempus et odio. <a href="#">Item 4</a></p>
</div>
</div>[/source]

Trust me, this looks a lot more complicated than it really is! Take a look …

Now we have to add some CSS to format this content:

[source lang="css"]#sidebar {
clear: left;
float: left;
width: 200px;
font-size: 10px;
color: #666666;
padding-bottom: 20px;
}
.box {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
padding-right: 10px;
margin-right: 10px;
}
.box h2 {
color: #3B4A88;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0px;
padding-top: 10px;
padding-bottom: 0px;
}
.box p {
padding-top: 0px;
padding-bottom: 10px;
margin-top: 0px;
margin-bottom: 10px;
}
.box a {
font-weight: bolder;
color: #3B4A88;
text-decoration: none;
}[/source]

Preview Page

The Content

Page Demo (20090625)

Finally, to complete the webpage we have to add some content. Again, I’ll rely on Lorem Ipsum for the purpose of putting some quick content into the website, you can add your own text later.

Preview Page

There are not a lot of major changes to the content in this design, if it was a client project I’d add a sizable number of CSS modifications in order to format the pages but as a demo of how to quickly design a quality website I think it’s pretty good.

You can look at the website with CSS as well as a version with no CSS to give you an idea of the changes. You’re also welcome to download the source code and use this website template as a basis for your own website.

You might also want to check out a couple simple variations to this theme:

Tags: , , , , , , , , , , , , , , , , , , ,
Posted in HTML Programming, Web Site Advice

read more
10
Jun
2009

How to exclude yourself from Google Analytics with WordPress

1 Comment

Without data we’re only guessing so it’s critical that we not only have great data to make decisions with but also that the data we do have is as free from corruption as possible. With that in mind if you run a WordPress website and Google Analytics, you’re most likely skewing your data without realizing it by visiting your own website.

To stop yourself from being counted as a visitor, all you need to do is add a simple piece of code to your websites header.php file that will read:

 

[source lang="php"]<?php
if (is_user_logged_in() == 1) {
if (wp_get_current_user()->ID == 1) {
setcookie("analyticsexcludeme", "analyticsexcludeme", time()+3600);
}
};
?>[/source]

Make sure the code is placed above the Google Analytics code (which I always like to place in the footer of my websites anyways). Once this code is placed in your header file, your website is updated but you’re not finished yet!

 

The code is only the first part, it’s what tells Google that you’d like to be excluded but now we need to actually exclude you.

Log into your Analytics account and click Analytics Settings.

Next, open the Filter manager (very bottom right corner).

Finally, add a new Filter with the settings:

analytics exclude me How to exclude yourself from Google Analytics with WordPress imageThis will tell Google to exclude all visitors who have the cookie “analyticsexcludeme” in their web browser, the same cookie we set earlier in the header code section of this tutorial.

Tags: , , , , , , , , , , , , , , ,
Posted in HTML Programming, Marketing Advice, Web Site Advice, WordPress Help

read more
02
May
2009

How to use the heading tag to improve search engine listings

12 Comments

In HTML there are few tags as important as the <h1> tag. It is literally the heading for your page and when we talk about how to structure a document, we’re taught that the <h1> tag should represent the title of the document.

Common Mistakes

Having more than one H1 per page.

A web document can have only one title, and that’s what the H1 tag is meant to be. Instead of having more than one, use the <h2> tag and stylize it with CSS.

Using the H1 tag because you like the font size

The H1 tag is big because it’s meant to be important not because people think it’s pretty. As will all HTML elements, you can use CSS to change the look and feel of tags easily. For example:

[source lang="html"]
<h1>Test Title</h1>
<h2>Test Title Two</h2>
<strong>Test Strong</strong>
[/source]

 

[source lang="css"]
h1,h2,strong {
font-size: 100px;
font-weight: normal;
}
[/source]

Using the code above will make all H1,H2 and strong (bold) tags throughout a website look identical.

 

Using the same H1 throughout the site

The purpose of the H1 tag is … as I’ve said to represent the content of a specific page so it’s important that the contents of your heading are unique for each page.

Using the H1 for the wrong content, or not using it at all

If the purpose of a heading tag is to highlight the heading (or title) of the document, then not including one at all will result in search engines being unable to properly understand your content.

Using Heading Tags to separate content

Let’s take a look for example at a simple piece of Lorem Ipsum to see how search engines may see your content with (and without) proper headings.

Example One : No Formating

As you can see from this example, it’s nearly impossible to determine what text is important and which is worthless in this post.

[source lang="html"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien nulla, malesuada eu, tincidunt eu, dapibus sed, risus. Curabitur rutrum velit non enim. Duis congue, neque non pharetra blandit, est lectus aliquet purus, id dapibus augue lacus sed sem. Aliquam erat volutpat. Ut hendrerit sapien vitae lacus. Duis libero lectus, varius sit amet, auctor ut, mattis id, magna. In hac habitasse platea dictumst. Aliquam libero neque, interdum id, dignissim id, fermentum eget, tellus. Aliquam eget lorem quis nibh fermentum egestas. Duis id ante sed ligula egestas malesuada. Maecenas pharetra mollis ipsum. Vestibulum dignissim, turpis vel luctus facilisis, dolor mi gravida nisi, ac suscipit enim ipsum vel elit. Aenean mauris purus, convallis ac, pellentesque suscipit, varius in, lacus. Morbi blandit odio quis libero. Nullam gravida rhoncus massa. Fusce ullamcorper. Phasellus sapien nibh, consequat eu, semper in, pretium in, dui. Vivamus scelerisque.
[/source]

Example Two: Simple Text Formating

Now, with paragraph breaks, we can at least start to understand the format but not what is important.

[source lang="html"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed sapien nulla, malesuada eu, tincidunt eu, dapibus sed, risus. Curabitur rutrum velit non enim. Duis congue, neque non pharetra blandit, est lectus aliquet purus, id dapibus augue lacus sed sem. Aliquam erat volutpat. Ut hendrerit sapien vitae lacus. Duis libero lectus, varius sit amet, auctor ut, mattis id, magna. In hac habitasse platea dictumst.

Aliquam libero neque, interdum id, dignissim id, fermentum eget, tellus.

Aliquam eget lorem quis nibh fermentum egestas. Duis id ante sed ligula egestas malesuada. Maecenas pharetra mollis ipsum. Vestibulum dignissim, turpis vel luctus facilisis, dolor mi gravida nisi, ac suscipit enim ipsum vel elit. Aenean mauris purus, convallis ac, pellentesque suscipit, varius in, lacus. Morbi blandit odio quis libero. Nullam gravida rhoncus massa. Fusce ullamcorper. Phasellus sapien nibh, consequat eu, semper in, pretium in, dui. Vivamus scelerisque.
[/source]

Example Three: Formating with Headings

Using both paragraph formating and headers:

[source lang="html"]
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>

Sed sapien nulla, malesuada eu, tincidunt eu, dapibus sed, risus. Curabitur rutrum velit non enim. Duis congue, neque non pharetra blandit, est lectus aliquet purus, id dapibus augue lacus sed sem. Aliquam erat volutpat. Ut hendrerit sapien vitae lacus. Duis libero lectus, varius sit amet, auctor ut, mattis id, magna. In hac habitasse platea dictumst.

<h2>Aliquam libero neque, interdum id, dignissim id, fermentum eget, tellus.</h2>

Aliquam eget lorem quis nibh fermentum egestas. Duis id ante sed ligula egestas malesuada. Maecenas pharetra mollis ipsum. Vestibulum dignissim, turpis vel luctus facilisis, dolor mi gravida nisi, ac suscipit enim ipsum vel elit. Aenean mauris purus, convallis ac, pellentesque suscipit, varius in, lacus. Morbi blandit odio quis libero. Nullam gravida rhoncus massa. Fusce ullamcorper. Phasellus sapien nibh, consequat eu, semper in, pretium in, dui. Vivamus scelerisque.
[/source]

As you can see, using the heading tag properly in example three allows us to clearly see a separation of content and allows robots such as Google to properly crawl and identify the critical areas of our websites.

You may also care to watch the video Does it matter what order you put header tags in?

Tags: , , , , , , , , , , , , , , , , , , , , , ,
Posted in HTML Programming

read more
25
Apr
2009

Placing Google Analytics Code in a Dreamweaver Template

8 Comments

This is just a quick tip today, I got out of a training session and realized that a lot of people are still having a hard time understand Google Analytics so here are a few things for you to keep in mind.

First, for Analytics to be effective you need to include the code on all your webpages (not just the homepage). To do this in Dreamweaver, follow these simple steps:

  1. copy the code from your Google Analytics home page
  2. open dreamweaver and edit your template file
  3. switch to Code View
  4. place the Analytics code at the bottom of the file, between the </body> and </html> tags

Why between those two tags?

The Google Analytics code works by calling a remote script from Googles servers. Somethings this takes a bit of time, while it’s loading your webpage might stutter so let’s load all the page and display it to users first.

How to add Analytics to WordPress?

If you’re running WordPress, you can follow the steps above pretty well except in your case you’ll want to edit the footer.php which is found in your wp-content/themes/[yourthemename]/ directory.

Tags: , , , , , , , , , , , , , , ,
Posted in HTML Programming

read more
23
Apr
2009

How to center a header in HTML without using the center tag

5 Comments

The HTML <center> tag is one of those funny little tags left over from the early days of websites when designers often mixed the publishing of web content with design. These days, it’s much easier to separate content and design by using effective style sheets.

To center any text in HTML and CSS, we can simply add a couple of lines of code to our stylesheet file as follows:

[source lang="css"].center {
text-align:center;
}[/source]
This little code snippet will center the content within a block tag (such as a <p> or <h1>) but only if it already knows the width of the object you’re centering too! To get around this, we can simply add the display:block tag to our CSS:

[source lang="css"].center {
text-align:center;
display: block; 
}[/source]
Now our code knows to center text.

To apply it to our HTML code, you need to simply apply the code to an object as a class. For example let’s turn a heading into a centered heading by applying the new class like so:

[source lang="html"]
<h1 class=’center’>This is my header.</h1>
[/source]

 

It is of course also possible to simply align all <h1> tags to the center by using the code:

[source lang="css"]h1 {
text-align:center;
display: block;
}[/source]

What about converting existing pages?

Luckily if you already have a bunch of documents which use <center> tags there’s fairly simple fix for you to clean up those files. Using a tool like Adobe Dreamweaver you can do bulk search and replace functions across multiple files.

The replace is a two step process. (please backup your site before doing this)

First, let’s replace the phrase </center> with </div> across the entire site. This will change the closing tag (remember all tags come in pairs right?) to be a normal div tag.

Now, let’s replace the phrase <center> with <div class=’center’> to turn the opening tag into a div tag with the center class assigned.

You can now add the .center details to your CSS file and presto, your website is now using the proper center formating!

Tags: , , , , , , , , , , , , , , , , , , , , , ,
Posted in HTML Programming

read more
05
Apr
2009

Why are websites so hard to make?

22 Comments

Wow, I’ll tell you honestly that one of the questions I tend to get asked a lot (and drives people to my website) is Why is a website so hard to make? Actually, that question (or a version of it) accounts for a few unique visits every day so to help answer the question, I’ve explain a few of the reasons that websites are so hard (or expensive) to build.

First, the Web is inconsistent.

This is possibly the worse news for people just starting out, but it’s the horrible and sad truth. Web sites are nothing more than code, it’s not terribly complicated once you understand the basics of it but it’s still just a bunch of gobbly gook until it’s read by something else … and there’s the problem. Each ’something else’ is different. Web code is read by popular web browsers such as Internet Explorer, Safari, Chrome and FireFox but that’s only the tip of the iceberg because Internet Explorer has several versions in common operation today (versions 5,6,7 and now 8) which all display the web dramatically differently. 

Once you get past the basic issue of browsers, you need to think about operating systems. How many computer operating systems can you name? Obviously there’s Windows and Mac right? Great … except … you also have Windows Vista, Windows XP, Windows ME, Windows 2000, Windows NT, Windows 7 and Windows Lite to content with, Macintosh OS X Leopard and Macintosh OS X Pather. That’s got to be it right? Not so fast, what about Linux and Unix? There are hundreds of variations of computer based operating systems, each running one of a dozen web browsers for countless combinations but at least that’s all there is to worry about … except for handhelds (iPhones, BlackBerries, Windows Mobile Devices) and gaming consoles (Nintendo Wii, Microsoft XBox, XBox 360, Sony PSP, Sony Play Station 3) and TV based internet consoles … I hope that I’ve made my point, one of the reasons the Internet is complex to publish for is because there are too many “things” to publish for, instead we’re forced to practice failing gracefully.

The Web lacks a standard language.

Problem number two for somebody just starting out in the great big world of the web is that there is no standard programming language for the Internet. At it’s core, the World Wide Web is programmed in a language called HTML right? Everybody knows this, except it’s wrong.

The web is published in a language called xHTML which is based on HTML, but some people in the community didn’t agree with xHTML so they created other strains of HTML. As a result, we have HTML 1.x, HTML 2.x, HTML 3.x, HTML 4.x, DHTML, xHTML, xHTML 1.1 and xHTML 1.1 SE. Soon we’ll also have xHTML 2.0 as well as xHTML 5.0 … don’t ask.

Now, as we discussed above, there are at least a few dozen major operating systems and each of those has at least a handful of web browsers, plus a ton of mobile devices all designed to interpret some or more of the languages that the web is built on but it’s important to note that not all web browsers agreed on which standards are acceptable or for that matter which codes, structure, text or tags from any standard would be accepted. As a result, a web page developed to be viewed in Microsoft Internet Explorer 5 may (or may not) be visible in other web browsers including other versions of IE.

Scripting on the Web

Now, once you get past the basic problem of coding for some browsers while ignoring others and you pick one of the standards to adhere to, you’ve got to take the time to start writing more than simple content and for that you need what’s called a scripting language of which … there are many.

Most scripting languages such as PHP, Python, ASP, ASP.net etc. execute on the web server (where the website is hosted) but some such as JavaScript execute on the web browser after being downloaded (not to be confused with Java which is not a scripting language but a programming language and completely different). These scripts are what power everything from a simple email form to complex social media giants such as FaceBook.

After you’ve picked the scripting language you wish to use and ensured that it’s compatible with your hosting account (where you store your website for others to access it) you’re all set and ready to start building your first website.

How to handle it all

I’m lucky, I’ve been building websites since 1996 which means that in my very (very) long career I’ve seen countless technologies come, go and die. So my advice to people getting started in the industry is a lot like Benjamin’s in Animal Farm, Web Masters much like Donkeys know that times change but stay the same, simply pick your standards and be the best developer in that selected field. You will be mocked, scorned, insulted and ignored by others in the industry for your choices but in just a few years … everything you know will be outdated and you’ll have to relearn new tools anyways so don’t worry so much.

“Only old Benjamin professed to remember every detail of his long life and to know that things never had been, nor ever could be much better or much worse – hunger, hardship and disappointment being, so he said, the unalterable law of life.”

- George Orwell, Animal Farm,

Tags: , , , , , , , , , , , , , , , , , , , , , , , ,
Posted in HTML Programming

read more
31
Mar
2009

What image format should you use on your website?

16 Comments

There is nothing more complex about publishing on the web than the concept of images, they’re quite possibly the hardest part of HTML for the general public to get their minds around so let’s take a quic look at what makes an image complicated and how we as web designers and publishers can approach them in a simpler way.

Image Format

The first step to web graphics is to appreciate that images come in dozens (or hundreds) of file formats from BMP’s to TIFF’s and everything in between but when it comes to the web, there are really only three formats for you to think about:
  • The CompuServe Graphics Interchange Format (GIF) format (pronounced giff)
  • The Joint Photographic Experts Group format, JPG (pronounced jaypeg)
  • the Portable Network Graphic file format, PNG (pronounced ping)
Close up of the GIF file format

Close up of the GIF file format

These three file formats encompass the entire spectrum of Internet based graphics. The first format, GIF was introduced way back in the very first days of computer graphics (1987) and allowed people to exchange graphic files via an online community similar to America Online (AOL). The GIF format was limited to 8 bits of color (255) with some reserved for core data. It was a loss-less graphic format ideal for the graphics of 1987 but could hardly produce quality photos.
The GIF format stores each pixel of an image as one of 255 possible colors resulting in a crisp image. The GIF format however also had a number of unique benefits such as the ability to have invisible (alpha) transparent  pixels which when place overtop of other colors would allow the backgrounds to remain visible and the capacity to store multiple GIF images in a single file as pages. When displayed in a web browser or other image viewing tool these pages would appear as animations similar to old ‘flip book’ style animations.
In 1992 the  Joint Photographic Experts Group created and issued the JPEG standard to the world. These days we tend to call the file format JPG since old Microsoft based computers could only hand three characters as a file extension but the format is also known as .jpg, .jpeg, .jpe, .jif, .jfif  and .jfi. The .jpg format was an instant success, it quickly addressed the primary failings of the GIF format by allowing 24 bit graphics (16.7 million colors) and smooth transitions between the these colors using a lossy compression method … which is a fancy way of saying the graphics blended together.
Lossy file saved as both 20% and 80%

Lossy file saved as both 20% and 80%

In effect, how the JPG standard worked was to rapidly reduce file sizes by averaging the color values of a pixel with those around it. This caused massive reductions in file sizes allowing photographers to post 500kb images in extremely small (20-100kb) files while controlling the loss of quality. To the right you’ll see an image saved at 20% quality to the left and 80% to the right, both the difference in quality and the method JPG uses to reach the results should be evident.

Before I go on, I want to pause and take note of a statement I made in the above description because I’m sure most people missed it or brushed past without much thought … the JPG file format was introduced to the world in 1992. This phrase is critical because it reinforces how much the world has changed in just 17 years. For those of you who are under 20 years old, you’ll most likely have never known a world without Facebook or YouTube but for the rest of us, we sometimes forget the Internet is for all purposes a fairly recent addition to the world. I’m 35 years old and I remember the first JPG photo that I saw, the introduction of this format changed the way we shared images over computers.  Notice that I said it changed the way we shared images over computers? There was no Internet, or at least not what you see today.

In 1996, Unisys became uppity and started threatening to sue over the LZW compression found in the GIF format so the world invented the Portable Network Graphic format (PNG), along the way the format improved upon most of the qualities of the GIF and lost the capacity for animation. The PNG format has 8 bit graphics similar to the GIF but also has 24 bit like the JPG and introduced a new level with 32 bit graphics. While it lacks support for animation, it includes transparant pixels like a GIF. Unlike a GIF, where those pixels can be on or off the PNG allows for alpha transparency making the format extremely flexible and also capable of compressing images. The problem with the PNG format, is that it produces large files.

export dialog What image format should you use on your website? image

So which is best? Actually that depends entirely on what you want to accomplish with the graphics. As you’ll see from the image above the file size of the graphic can range from ~25k to ~430k depending on the quality you’d like to achieve.  Photographers for example should use the JPG compression most often to ensure their images are strong, crisp and colorful while illustrators and others who work with line art will benefit from the GIF format. In the end, practicing and experimenting are the best ways to determine what you should be using.

A quick thank you to the Old Shoe Woman for posting the a wonderful photo Sunlight Under a Live Oak Tree on Flickr for me to use as part of this tutorial. 

Tags: , , , , , , , , , , , , , , , , , , ,
Posted in HTML Programming

read more
30
Mar
2009

Hyper linking in Dreamweaver

15 Comments

HTML is all about something called Hyper Linking. Actually, that’s what the first two letters of HTML pretty much stand for … Hyper Text Markup Language but what does it actually mean? Well, oddly enough us geeks are not all that tricky to understand, give us a beer mug shaped like Yoda’s head and let us string together a few acronyms and we’re happy.

Hypertext is text on a page that contains a Hyper Link. 

A Hyper Link is a piece of text or graphic which links to another document. When a user clicks the Hypertext, they follow the Hyper Link to the new document. Not brain surgery but I completely understand how most people would never need to know that.

Using Hyper Links in Adobe Dreamweaver is, for the most part dead simple. To insert a hyperlink into your Dreamweaver document, simply ensure you are in Design mode and select the text you want to make a hyperlink. Next, using the Property toolbar, type the website address you’d like to link to.

How to make a hypertext link in Dreamweaver

How to make a hypertext link in Dreamweaver

There are actually several things you can do with a hyperlink, called protocols. Most people only ever know about the http:// protocol (the Hyper Text Transfer Protocol) but there’s also a ton of other protocols people could use including the https://, ftp://, mailto://, gopher:// and of course the nntp:// protocol. If you have no idea what these are, congratulations … you’ll almost never need to care in your life unless you’re a hard code web developer.

Once you’ve added an http:// link using Dreamweaver you can also force the clicked link to open in a new web browser simply by adding the phrase _blank to the Target field of your property bar. There are a couple of other neat tricks with anchor tags people should be aware of, but to accomplish them we’re going to have to switch to Code view in order to see the following code:

[source lang="html"]<a href="http://www.thisismyurl.com">This is my Hypertext.</a>[/source]
In addition to the href value (where the click will go), you can also add:

  • accesskey to make the link a keyboard shortcut
  • class to assign a CSS class
  • dir (rtl or ltr) to make the text run right to left or left to right
  • id to make the anchor text have a proper name
  • lang to assign a language value
  • style to format the tag
  • tabindex to index the tab order for the link
  • title to assign a title tag
  • rel for the link relationship.

Of these I would recommend most links on a website have an href value to show where people should go, an ID if it’s a critical link, a rel for defining relationship values and the title for SEO value. Typically then, a link should look like:

[source lang="html"]<a rel="nofollow" title="My Great Website" id="mainlink" href="http://www.thisismyurl.com">This is my Hypertext.</a>[/source]

Absolute Paths vs. Relative Paths

One of the great debates in web publishing is the choice between using absolute paths vs. relative paths. An absolute path is one which is mapped completely to the final destination (http://www.thisismyurl.com/tutorials/placing-page-content-in-adobe-dreamweaver/) vs. one that is linked relative to the document you’re currently reading (../placing-page-content-in-adobe-dreamweaver/) the main advantage of an absolutely path is that it’s locked, while the main advantage of a relative path? That’s it’s relative … in the end, it doesn’t matter so long as the link works.

This tutorial is part six in a ten part series.
  1. Preparing a website in Adobe Dreamweaver
  2. Building your first Dreamweaver Template file
  3. Structuring your website with Adobe Dreamweaver
  4. Improving the common elements in Dreamweaver
  5. Placing page content in Adobe Dreamweaver
  6. Hyper linking in Dreamweaver
  7. Working with Images in Adobe Dreamweaver
  8. Adding Cascading Style Sheets with Dreamweaver
  9. Putting your website on a remote web server with Adobe Dreamweaver
  10. Adding Google Analytics to your Dreamweaver Template

Tags: , , , , , , , , , , , , , , , , , , , , ,
Posted in HTML Programming

read more
20
Mar
2009

How to center an image with CSS

12 Comments

I had a funny problem the other day when I was rebuilding my portfolio, I’d completely forgotten how to center an image using CSS. What I wanted to do was align my portfolio piece images to the center of the screen but regardless of how hard I tried they kept ending up on the left.

girls are evil left How to center an image with CSS image

This is the default position for an image of course, so I wasn’t too concerned about it. If I wanted to ensure that it was always on the left I could of course always add the following code to my CSS file:

[source lang='css']img {
float: left;}[/source]

This would ensure that my image not only aligned to the left but also allowed text to wrap around it’s right hand side. If I wanted to only align the image to the left, without allowing wrapping text I would add:

[source lang='css']img {
float: left;
clear: both;}[/source]

Or if I wanted to do exactly the same thing to the right, I would use the following CSS code:

[source lang='css']img {
float: right;
clear: both;}[/source]

girls are evil right How to center an image with CSS image

Right and left alignments in CSS are really easy, but what about centering the content? If I was a lazy web designer, I could always use HTML to center the image but that’s a bad practice to get into. HTML is designed to publish content, not format it. 

[source lang='html']

How to center an image with CSS image
[/source]

Since the center tag is used to format the appearance of HTML I try to avoid it, which turns me back to CSS (Cascading Style Sheets) to center my content.

girls are evil center How to center an image with CSS image

Generally in CSS if you want to center something you simply set the left and right margins, if you don’t know the width of your object you can specify it in the CSS but in my case each portfolio piece width is different so I needed to be more generic.

[source lang='css']img {
margin-left: auto;
margin-right: auto;
display:block;}[/source]

The trick (if it really is a trick) is to include the display:block line. As we all know (cough), HTML elements are made up of two types of objects. The block objects such as <p>, <h1>…<h6>, <div>,<ul> ect. and inline objects such as <strong>, <b>, <em>, <i> etc., the <img> tag is by default an inline object which means that web browsers do not automatically attempt to associate a buffer for the object.

Since the <img> tag does not have a pre-existing space or area, it can not be centered in an area until you instruct the web browser to assign it an area. For example if you wrapped the image in a <div> or <p> tag, you could text-align the <p> or <div> tag as such:

[source lang='html']

How to center an image with CSS image

[/source]

[source lang='css']#centerme {
text-align: center;}[/source]

This example works because the <div> tag is a block and therefore the web browser already knows it has a space it can occupy but if you don’t want to clutter your HTML with unnecessary <div> tags, you can simply use the CSS display:block; property to instruct web browsers to treat the <img> tag as a block and accomplish much the same trick.

Happy coding!

Tags: , , , , , , , , , , , , , ,
Posted in HTML Programming

read more
20
Feb
2009

How to build a free website

10 Comments

There’s a secret that many web designers don’t want you to know, it’s that there’s no cost to building a website. In fact, you don’t even need special software to do it, everything you need is already installed on the most basic computer available today. In order to build a website, here’s all that you need:

  • On a Windows computer – NotePad
  • On an Apple Macintosh – TextEdit

textedit 300x281 How to build a free website imageNow that you have all the tools that you’ll need to build a web page, you need to understand a few things about building web pages.

How to Format a Web Page

Web pages are divided into two specific areas, the <head> and the <body>, each of these two areas does something specific and before you can build a web page, you need to understand the basic purpose of each section.

Setting up Your First Web Page

basic html How to build a free website imageFor a web page to be recognized by a web browser (the software application used to view a web page) we first need to tell the browser that our document is an HTML document. To accomplish this, all we need to do is place the code <html> on the first line of our document followed by </html> on the very last line of our document.

Once those tags are in place, most web browsers will understand that the content being displayed is an HTML document. I say most because technically, there is a bit more that you should put in there if you want to ensure the site is 100% compatible with all modern web browsers, but explaining the fine details of DOCTYPE structure is a little beyond the scope of today’s tutorial. Needless to say, placing the tags <html> and </html> will tell web browsers what your document is but if you’d like to technically perfect, place the following code instead:

<!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”>
</html>

Once that’s done, remember that all other code must be placed between the two <html> tags to be recognized as valid HTML.

The <head> Section

The <head> tag of a web page is the reserved for things which other computers and software applications require to understand your web page properly. For example, when a web browser loads your web page there are specific things that it looks for in order to understand what language your site is in, what your web page is about and the name of your page. Within the head section, we want to include details such as:

  • Links to alternative content such as RSS feeds, XML site maps and mobile interface files
  • Javascript links and or content to help the functionality of our page
  • META data for robots to read including a page description, keywords and generator
  • Cascading Style Sheet (CSS) details or links
  • The document content type
  • Codes and robot commands for foreign applications
  • Pingback processing directives
  • The web page icon file location
  • Canonical labels for search engine optimization
  • Base directory directives
  • The title of your document

Sounds like a lot right? Well it is, and it’s all very important stuff. Essentially, the <head> section of your web page stores all the mechanical and client side information required to properly index, label, categorize and distribute your web page as well as the information needed to successfully display your web page in a users browser. I could write a whole post on each of the items above but for now, it’s simply important for you to know that the <head> is used to store those pieces of information and you can add them at a later date.

html with head How to build a free website imageAdding data to the <head> of the document is done the same way as all elements of an HTML document, by opening and closing an HTML tag. In this case, the <head> tag must be opened and later closed </head> in order to store the appropriate content. Between those tags, you may store a series of HTML or xHTML (we’ll talk another day about the differences) data devices for use in rendering your pages. For example, here is a basic <head> element for a common web page:

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Untitled Document</title>
</head>

You will notice that in this basic example we only store the basic information required to make a web page work, the http-equiv which tells web browsers that the document being served is in text/html format (as opposed to text/rtf which is a Rich Text document or text/javascript which would be a JavaScript file) so that the web browser looking at this document understands it is an HTML page. untitled document How to build a free website imageAdditionally, the <head> contains the <title> tag which closes (</title>) after labeling the document Untitled Document. If you loaded the source code into a web browser, you would now see a blank document with no content displayed to the user but a new title at the top of your browser, labeled Untitled Document. This document title is the label being fed to the web browser from the <title> tag contained within the <head> of this document.

The <body> Section

If the <head> of a web page is the content being presented to other computers, then the <body> is the content being displayed to human eyes (or text readers) visiting your web page. Creating content on a web page is wonderfully simple. If you’d like to have a web page say hello, simply add the code:
<body>
hello
</body>
html with body How to build a free website imagePresto! You now have a fully functional web page, albeit a little dull. The <body> section works by displaying exactly what you type as content, so anything (and everything) you add between the two <body> tags will appear on your web page but you have to be careful, HTML needs the content marked up (labeled) to be properly viewed in a web browser. Just in case you didn’t know, HTML stands for HyperText Markup Language, a Markup Language is simply text that’s been formated to be read by computers. For example I can create my own Markup Language right now called Chris Ross’s Markup Language (CRML) that looks like this:
[-open-]Hello World![-close-]
Now I have my own Markup Language but since nobody uses it, it’s pretty much useless. On the other hand, everybody with a web browser uses the HyperText Markup Language (HTML) so let’s look at it. HTML has a handful of common codes used to display content effectively, they are:
  • <p>, always followed by </p> which displays text in paragraph format
  • <br>, which never has a </br> but instead is written <br/> in xHTML and represents a line break (where a paragraph is often displayed as two line breaks to separate content)
  • <ol>, which always needs a </ol> for ordered lists (numbered lists) and <ul> with a </ul> for unordered list (bullets), both also require <li></li> tags for each list item in the list to work
  • <b></b> or <strong></strong> tags mark text as important. The <b> tag was replaced with the <strong> tag a few years back since not all languages bold words to make them more important
  • <i></i> makes a word italics but like the <b> tag, was also replaced. These days, you can use <em></em> to place emphases on a word or phrase
  • <h#> tags are special and always need an corresponding </h#> tag where the # symbol can be replaced with the numbers 1 through 6 (<h1>,<h2>,<h3>,<h4>,<h5>,<h6>) which represents the level of a header in your document
  • <img /> will allow you to place images in your document but requires special parameters we’ll talk about another time
  • <a> followed by a </a> tag will hyperlink the text between the tags to another document but also requires special parameters.
  • <table> tags can be used to display tabular data (like charts) on a web page. It needs to end in a </table> tag and can include headers (<th></th>), rows (<tr></tr>) and columns (<td></td>). Why columns are <td> is beyond me, but that’s what they are.
  • <div> tags use a closing tag of </div> to divide content into various areas of a page, much like the <span> tag, the <div> tag has no visual effect on content but is used by programmers and designers to affect content.

Essentially, the ten tag structures above represent the HTML code found in every single web page on the planet. There are other tags, but have either been replaced or are simply bad tags. For example the <u></u> tag will underline content and the <blink></blink> tag is simply wrong … even the creator of the tag, Lou Montulli (it’s odd to think somebody actually invented a tag eh?) appears to wish it would simply die.

When put together, the <html> document label tells a web browser the information is a web page, the <head> indicates content reserved for other computer systems to read, while the <body> shows content to the end user.

In total, the 26 tags here represent the whole of the content required to build your own web site for free. If you’ve found this post at all useful, please feel free to leave me a comment below, thanks for reading.

Tags: , , , , , , , , , , , , , , , , , , , , , , ,
Posted in HTML Programming

read more
23
Jan
2009

How to make a website for free

9 Comments

So you want to make a website for free but you don’t know where to start? To make a website for yourself without paying any money you have to understand a few basic things about the Internet first. Let’s take a look at everything you need to build a website, and how to get started for nothing down.

UPDATE: Feb. 11, 2009 – Do you want a website for free? I’ll give you one, read my post at Get a Free Web Site to find out how.

Domain Names

A domain name is the address of your website. You can choose to have your own domain name or you can use somebody else’s domain name, often for free. Branding your business with your own name (thisismyurl.com for example) is the best way to do it but if you’d like to save some money there are many companies who will let you become a subdomain of their website (i.e. thisismyurl.theirdomain.com) for free. Registering a domain name costs about $10 per year.

Web Hosting

Web hosting is sort of like renting a storefront for your business. If you’ve elected to use a domain name, you really do need to pay for hosting to take full advantage of it. You don’t need to pay for hosting but if you want your website to be on the Internet reliably, try somebody like BlueHost. They’ll cost you $75 for the year which includes your domain name.

Coding a Web Site

Once you have your address on the internet (your domain name) and a place to rent (your web hosting) you need to construct the website itself. Building a website is a pretty complex task and building a good website is even harder. That’s one of the reasons I recommend to small companies that they look at a solution like WordPress, it’s a free tool which comes in two flavors:

  1. WordPress.com – a free, hosted solution for people just getting started.
  2. WordPress.org - you can download the WordPress engine and host it on a hosting company yourself.

In either case, building (or downloading) a great template is your first step to having a high quality, free website.

Coding a Web Site in HTML

If you’d prefer to ignore WordPress and want to code the site yourself, you need to understand the basic structure of an HTML website and how it works.

HTML is a tag based language, it’s actually really very simple once you get the hang of it. Basically you have to tell the web browser that your document is an HTML document (HTML is the short form for HyperText Markup Language, the real name of a web page). To do this, simply open and close an HTML tag. Tags are always stored between less than and greater than symbols like this <html>. To close a tag, add a slash like this: </html>. So put together, web browsers know that everything between the <html> and the </html> tag is part of a web page.

You need to do the same for the head portion of the web page. This is the part of the document read by computers, not people. The <head> and </head> tags enclose items such as the <title></title> tag which stores the document name. For example, if I wanted to create a document called My Great Web Page I would do the following:

<html>
<head>
<title>My Great Web Page</title>
</head>
</html>

View the results

 The document would be empty of course but would store the critical details needed to open and close a page, as well as tell the web browser what the document name is.

To add a visible portion to the page, you need to add a <body></body> tag. This represents everything the user can see and is inserted into the code after you close the <head></head>. The <body> stored everything the user sees and can have a multitude of tags, the most common being:

  • Headings (<h1><h2><h3><h4><h5><h6>) which represents headers just like you’d find in a book or technical paper.
  • Paragraphs (<p>) which breaks the text into easy to read sections
  • Ordered Lists (<ol>) and Unordered Lists (<ul>) along with List Items (<li>) which show up like bulleted lists in a document.

Remembering that each tag must be opened as well as closed, an effective web page can be coded using just these simple tags.

<html>
<head>
<title>My Great Web Page</title>
</head>
<body>
<h1>My Great Web Page</h1>
<p>This is my great web page. It’s great because:</p>
<ul>
<li>it respects the rules of html</li>
<li>it is a properly formatted document</li>
<li>it can be read by any web browser</li>
</ul>
<p>I can also add a numbered list:</p>
<ol>
<li>this is a list item</li>
<li>this is the other list item</li>
</ol>
</body>
</html>

View the results

This simple web page may not seem very impressive but what if we could easily add hyperlinks (links to other web pages) and images?

  • The Anchor tag (<a>) allows one web page to link to another. To use the <a> tag you need to pass a attribute called an href. Sounds scary right? Not at all. <a href=’http://www.thisismyurl.com’> That’s all there is to is. See, the href called the http (Hyper Text Transfer Protocol) document stored at the address www.thisismyurl.com.
  • The Image tag (<img>) also need a special attribute passed. In this case, it’s the src (source) of the graphic file. It looks like this <img src=’http://www.thisismyurl.com/wp-content/uploads/2009/01/aboutpage-150×150.jpg’ />. You’ll see that the src is just the http:// address of the image. Easy as pie right? No so fast … unlike most other tags the <img> can’t have a closing tag. That’s right .. there’s no such thing as a </img> so instead we close the <img> tag inside itself like this … <img />. There are a few other tags like that but not many.

Here it is in practice:

<html>
<head>
<title>My Great Web Page</title>
</head>
<body>
<h1>My Great Web Page</h1>
<p>This is my great web page. It’s great because:</p>
<ul>
<li>it respects the rules of html</li>
<li>it is a properly formatted document</li>
<li>it can be read by any web browser</li>
</ul>
<p>I can also add a numbered list:</p>
<ol>
<li>this is a list item</li>
<li>this is the other list item</li>
</ol>
<p>I like this picture: <img src=’http://www.thisismyurl.com/wp-content/uploads/2009/01/aboutpage1-150×150.jpg’ /></p>
<p>Let’s go to <a href=’http://www.thisismyurl.com’>my homepage</a>.</p></body>
</html>

View it in action

Using these simple tags, anybody can build a website.

Tags: , , , , , , , , , , ,
Posted in HTML Programming

read more