Beginners HTML Tutorial – Web Design Basics

Are you new to the world of Web Design?, this tutorial is just what you need to get started, it’s aimed at the beginner and assumes no prior knowledge.

What is HTML?

HTML is the most crucial building block of a website. There are many other tools you’ll hear from people talking about making websites – Javascript, PHP, ASP, SQL to name a few – but without HTML you can’t even get started.

HTML is a “markup language” – a structured way of controlling layout and appearance of text, graphics and other elements on a web page. More recently it has developed into “XHTML” which is essentially a stricter and more uniform set of rules for writing HTML. All our code in these articles will be written to the latest XHTML standards, and we’ll use the terms HTML and XHTML interchangeably.

The other thing we’ll be covering in these articles is CSS. This is a way of controlling the style – color, size, font, position, and so on – of various aspects of your page. Its real advantage is that it allows you to alter these properties of more than one area of your page at once, so that you don’t have to set everything individually many times over. We’ll look more at this later on.

What is HTML not?

HTML only allows for static content. That is, pages that do not change in response to user’s commands, and do not draw data out of another source like a database. We’ll look at the best way to achieve “dynamic” pages later on.

HTML is not perfect!

Like anything HTML has its flaws. Over the years the HTML specification has been expanded and altered to take into account users’ demands. However the various internet browsers – Internet Explorer, FireFox, etc – have occasionally made modifications of their own. Some of these were intentional and some were not (i.e. bugs!). As a result, there may be differences between the way a page displays in one browser and another (or even between different versions of the same browser).

Fortunately, today this is less of an issue as all the browsers move towards full and proper compliance with the published standards. However there are still plenty of users who have older versions of the browsers on their computers. You need to be aware of this problem but don’t worry too much for now. We’ll address it as and when it comes up.

What do you need to get started?

An Editor

This is a program to write your code in. Any text editor will do the job, for example Notepad (which you can probably find under Accessories in your Start menu).

However many developers choose to use something a bit more advanced. It can be really useful, particularly when you’re learning, to have an editor that automatically color codes your work to help you tell the code apart from the content. There are lots of editors available that do this. My favourite is EditPlus, which you’ll see in the screenshots in these articles, and is available on a free trial at www.editplus.com.

You may be familiar with programs like Dreamweaver which will write most of the code for you. These are called “WYSIWYG” editors – What You See Is What You Get. They certainly have their place as they can save a lot of time. However they will never be able to do everything that you need them to – so are no substitute for understanding the code behind the scenes. It’s best to learn to write the code properly to start with, and then, if you want to, use a program like Dreamweaver to remove the monotonous tasks, we do offer some excellent Dreamweaver Tutorials for users who decide to go this route.

A Browser

You’ll already have one of these if you are reading this article! Popular browsers include Internet Explorer (http://www.microsoft.com/ie) and FireFox (http://www.mozilla.com/en-US) , but there are lots more. It doesn’t really matter which you use but just make sure if you can that whatever browser you are using is a recent version (current versions are Internet Explorer 7 and FireFox 3).

That’s it – we’re ready to get started!

Writing your first HTML page

HTML uses “tags” to control display of your content. A tag is a word or letter enclosed by angular brackets – e.g. <p> is the tag for a new paragraph, and <title> is the tag for the title of your page.

Every tag must be opened and closed. This is especially important to remember – a lot of the time the page will still work if you don’t add the closing part, but results will be unpredictable, particularly in older browsers. It’s best to get into the habit now.

To close a tag, add a slash before the word in the tag. E.g. </p> or </title>. For example, to make a paragraph of text:

<p> Text goes here </p>

Outline of the page

Every page needs a few tags before you can think about having any content. Look at the example below then we’ll go through it line by line.

<html>

<head>

<title>Page Title</title>

</head>

<body>

</body>

</html>

The <html> tag is fairly self explanatory! It’s important though so don’t forget it. Below that we have the <head> tag which starts a section where you can include various pieces of information about the page.

The <title> tag tells the browser what the heading of the whole page is. This is displayed in the title bar at the top of the browser,

<image 1 >

not actually on the page itself. Put something sensible in here – this is a key thing that the search engines look at when ranking your page. Rather than just putting something like “Home” or “Welcome” try to have a heading that includes some key words about your site.

After the title we need to close this tag with </title>, then finally close the header section with </head>.

<body> is the section of the page that includes all the content visible to the user. At the moment we don’t have any content so this is followed by the </body> tag to close this section.

Then the </html> means it’s the end of the page.

HTML is hierarchical

Take another look at the code above. Every tag is opened and closed, and is fully enclosed within its parent (<head> is a child of <html>, and <head> is a parent of <title>).

It is important to make sure the closing tag comes in the right place. E.g. <head><title> </title></head> is right but <head><title> </head></title> is not. You need to make sure that when you write a closing tag, all other tags that you started within it are also closed.

To make this a bit easier to keep up with, developers use tabs and spacing to make the code simpler to read. You’ll see from the code above that each time we write a parent tag, the next line is tabbed further in than the previous line. So all tags that are horizontally lined up are children of the same parent. This isn’t strictly necessary but it makes things a lot easier when you’re trying to read what you’ve written.

It’s also worth noting that spacing and lines don’t matter. You could leave a dozen lines between each tag if you wanted to and it would make no difference. Content within tags (for example a paragraph of text) can also span multiple lines.

Let’s add some text

For now we’ll just put in a single paragraph of text. The tag for a paragraph is <p>. As you know we need to close the tag as well, so the format for a paragraph is:

<p> text here </p>

This needs to go inside the body section of your page – between the <body> and </body> tags. So your page will end up like the one below (remember to use the tab key to make things easier to read):

<html>

<head>

<title>Page Title</title>

</head>

<body>

<p>

This is my first web page!

</p>

</body>

</html>

Save the page

Now it’s time to save the page. Browsers expect the main page of a website to be called “index.html”. This is how you can type an address like http://www.google.com into your browser and end up at http://www.google.com/index.html.

Make sure that you are saving your page with the “.html” extension. In an HTML editor like EditPlus you will need to choose “HTML” from the “file type” box, or in something like Notepad you will need to choose “All files”. Then type “index.html” in the file name box and click save.

Does it work?

Find your saved page and double-click it to open it up in your internet browser. You should see something like this:

It’s not pretty, but it works. We’ll get to making it look nicer in the next article.

This page is actual being served from your own machine, therefore only up can see it , if we wanted this page to be visible to the world it would need to be upload to a web server using a protocol called FTP ( File Transfer Protocol ), this sounds complicated, it’s not, it’s no harder than sending an email and we will cover this in a later tutorial.

Reference

• <html> – must go at the start and end of every page
• <head> – defines the “header” of a page which contains various pieces of information about the page, that do not actually appear on it
• <title> – the title of a page as viewable in the browser’s title bar
• <body> – the main body of the page – the part visible to the user
• <p> – a paragraph of text

Don’t forget, all of the above tags need a closing tag too. As I said earlier the page will quite possibly work if you forget the closing tags but it will create problems for you later on. Get in the habit now!

Beginners HTML Tutorial part 2:
look at some formatting options to give a bit more life to your page, by introducing CSS.

CSS Tutorial – Roll Over Button

Pre-loaded Hover-state Images

In this XHTML CSS tutorial you’ll learn how to create a button for a web page using Photoshop, XHTML and CSS. More specifically, you’ll learn how to create a button who’s hover state image is preloaded. The advantage to this technique is that upon hovering over your button, the user won’t have to wait for it’s hover state image to appear; there’ll be no ‘graphic-less’ moment while the image loads, all without a single line of JavaScript.

Open up a blank XHTML document with a style statement within the <head> tags. This is where we’ll place out CSS code.

We’ll begin by setting out the XHTML markup for our button, between the <body> tags:

Notice the button has been given the class of ‘button’.

Now we’ll set up some basic CSS to establish some styles in our document. Place the following between the <style> tags:

Now some attributes for what will be our button, identifiable by it’s class ‘button’. Firstly, it has a width of 100px, a height of 20px and some extra padding to increase it’s dimensions further.

The above statement dictates that the button has padding of 15px at the top, 20px on the right, 10px at the bottom and 45px on the left. This extra padding on the left will make room for an icon on our button. The total dimensions of our button are now 160px wide and 45px high. You’ll also see that I’ve given any text within the button a color of #666666, that it’s displayed as ‘block’ (making it adhere to the dimensions we’ve set) and that I’ve removed the default underline by stating that there will be no text decoration. Now lets make a graphic for it with Photoshop.

Open up a new document in Photoshop with the dimensions of our button.

Copy a design something along the lines of what you see below. I’ve chosen to use one of the many icons freely available from famfamfam.com and placed it on the left.

Now alter your canvas size (Image > Canvas Size…). Double it’s height to 90px from the top edge. This will give you the following result:

Now duplicate all the elements you’ve drawn and position them at the bottom of your canvas. This copy will be your button’s hover-state.

Your two button images need to be different in some way – perhaps a completely different color, different icon or perhaps something more subtle. I’ve chosen to alter the transparency of my top image making it fainter than the hover-state. The button will appear darker when hovered over.

When you’re satisfied with your image, save (File > Save for Web & Devices…) in whatever format you choose.

Now let’s use this image as a background for our button by further defining our ‘button’ class in the CSS.

This states that the image we’ve chosen will be used as the background for our button, that the image won’t be repeated (it won’t be tiled), that it will be positioned 0px from the left and 0px from the top. Of course, when the page is loaded and the button background is also loaded, the whole thing is placed in your browser’s cache, even the part of your button image which isn’t yet visible. Check your button in a web browser, it should look like this:

Now we need to add the final CSS statement, defining what happens when our button is hovered over.

This simple statement dictates that the hover-state of our ‘button’ link will have a slightly darker color of #333333 and that the background image will be our button.jpg. The difference this time is that the background position has been set at 0px from the left and -45px from the top – or, said in another way, that the background image is raised 45px. Our hover-state graphic will therefore instantly fill the button when hovered over. Try it yourself! Finished CSS Example

XHTML Tutorial CSS Tabbed Menu

Tabbed menu

One hugely useful way of displaying your menu items is in the form of tabs. The following tutorial will take you through some simple steps to build your own tabbed menu, without so much as a .gif or line of JavaScript in sight…

Open up a blank XHTML document with a style statement within the <head> tags. This is where we’ll place out CSS code.

Now let’s set out the XHTML markup for our menu, between the <body> tags:

This is a straight-forward unordered list which we’ve given the class of ‘menu_tabbed’. Within it are four list items, each one of which contains a link.

That’s it for the markup, now let’s set up some CSS to give our document some basic styles. Place the following between the <style> tags:

This just gives our document a default text color (#333333), font and font size. I’ve also just given the documents ‘body’ a padding of 30px in order for our menu to be held away from the page edges. This will make it all slightly easier to view on our part.

Now some attributes for our unordered list, identifiable by it’s class ‘menu_tabbed’. Firstly, it has no list-style. This removes the bullet points from the list items – in all circumstances, in all browsers. Secondly it has a solid border along it’s bottom edge of 1px and the color #999999. Lastly some padding at the bottom in order to hold the border away from our tabs as we’ll soon see.

Test it in a browser, your menu should now look something like this:

Now let’s style our list items, identifiable as ‘li’ within the ‘ul’ which has a class of ‘menu_tabbed’.

We’ll display the list items ‘inline’ which will distribute them horizontally across the page. Each one has a margin on the right of 5px in order to hold it away from the previous list item. Now your menu should now look something like this:

Having dealt with our list and the list items within it, we can now turn our attention to the links, identifiable as the ‘a’ within the ‘li’ within the ‘ul’ which has a class of ‘menu_tabbed’. Place the following within your CSS code:

}

There’s a little more styling involved here as most of the visual effects are tied to the links. First give the text a faint color of #999999 and remove the underline by stating no text-decoration. Then give a background of #f7f7f7 and a solid 1px border of #CCCCCC. There’ll be no border on the bottom, as this is catered for by the border on the bottom of our unordered list.

Lastly, give the links some padding; 10px at the top and bottom and 14px left and right. The 10px padding at the bottom will allow the links’ bottom edge to meet with the bottom edge of the unordered list which we also gave a padding of 10px.

Check your menu again in a browser:

Now let’s give our tabs some styling for their hover state, one simple line of CSS:

This padding overrides the padding for the links which we’ve previously set. It differs only by giving an extra 4px padding at the top which gives the tabs the impression of being lifted like so:

Finally we’re going add some style for when one of the menu items is selected. Add the class ’selected’ to your second list item:

Now let’s add some CSS to determine what the selected tab looks like:

We’ve darkened the text to make it stand out, the background is white, as is it’s bottom border. This will cover the bottom border of the unordered list giving the impression that the tab is ‘connected’ to the page underneath. The padding will match the padding we’ve given to the link hover state; slightly raising the tab.

That’s it! Check your final menu in a browser!

Beginners Flash Tutorial – Creating Dynamic Text

Creating Dynamic Text with Flash

This tutorial has been prepared with relation to Flash 8, although the principles covered apply to all versions; the code included is based on ActionScript 2.0

This Flash tutorial introduces the creation, editing and formatting of dynamic text and embedding fonts.

There are two main ways to create a dynamic text field in Flash, one using the flash interface and the other using ActionScript, this flash tutorial will give you a fundemental understanding of this works.

Create a textfield using the interface

 my_txt.text="new text" 

1. Select your dynamic textfield on the stage and click the Embed button on the Properties panel, then choose Basic Latin (select OK):
   
2. On the library panel (Window > Library if it isn’t open) select the options button:
   
   Select New Font and enter the following details:

   

   Press OK and you’ll see your font appear in the library. Right-click (CTRL+Click for Macs) on the font in the library and choose Linkage. Click the checkbox next to ‘Export for ActionScript’:

   

   This allows you to refer to the font in your ActionScript code (the procedure is the same for any library item that you want to control using ActionScript). Select your code (‘actions’) layer and enter the following code (after your existing line)

   :

   
   Select All

    my_txt.embedFonts=true var tf:TextFormat=new TextFormat() tf.font="myfont" my_txt.setTextFormat(tf) 

   

Tutorial on Creating a dynamic textfield using ActionScript

 var other_txt:TextField = _root.createTextField("other_txt", _root.getNextHighestDepth(), 20, 20, 200, 50) other_txt.text="other text" 

 createTextField(instanceName, depth, xPosition, yPosition, width, height) 

Try not to be put off by the code if you’re not familiar with ActionScript. A good way to familiarise yourself with it is to experiment by changing some of the parameters (e.g. change the y position to 100 and you’ll see the text appear further down). To format this text, you need to use the ActionScript approach outlined above.