Adding Pictures In html

Adding Pictures/Images

HTML Tutorial 4

Aims

To find out how to add pictures to your pages

To understand why the ALT attribute is important

Wrapping text around your picture and adding spacing

I've had enough of text - I want to get pictures on my page!

Okay, I hear you! It is true that after a while text does get very boring. And these days, everyone's blogging or using social networking sites and what do you want people to see - photos of you with your mates on a good night out, you and your family on holiday, your neighbour's cute guinea pig. Or whatever really.

And it's good for you - if you want to have your own web page without using a social networking site then adding a picture is easy.

But for now, let's ditch the word "picture" because that won't get you anywhere in HTML. Instead, use the word "image".

Images come in various formats depending on how they were created, how many colours are in them, whether they support transparency and various other things.

Images are added using the <img> tag and here is one using some attributes:-

<img src="mypictures/mydog.jpg" alt="This is my Dog" width="100" height="200">

Here's what the attributes mean:-

src - where your picture is stored. In this example, there is a folder called "mypictures" and in that folder is a picture file called "mydog.jpg".

alt - this is basically a short description of your picture. It is called "alt" because that text can be an "alternative" for people who are browsing without pictures turned on. People do it - whether it's on their phone so they can read pages quickly, or whether it's a search engine 'reading' your page. So give a short, but accurate description.

height/width - the dimensions of your picture in pixels. If you put in dimensions that are smaller or larger than your actual picture then the page will shrink/stretch your picture to fit those dimensions. This can make your pictures appear distorted. So either use their correct dimensions, or if you want a smaller or larger version, then use a graphics package such as G.I.M.P. and resize it properly.

It is important for you to know that the src attribute is always relative to the page that wants to use that picture. So if you want to use a picture that's either not on your website or is in a different folder you can always put in an absolute address, like so:-

<img src="http://www.ivemadethisup.com/mypictures/mydog.jpg" alt="This is my Dog" width="100" height="200">

NOTE: Do not use pictures from other people's websites without asking their permission first. Even then, they may not let you use that picture on their web address (it uses their resources). Be considerate - the Internet has a lot of people on it, so make friends where you can.

Image Alignment & Text Wrapping

If you put an image anywhere in a page, you may see that the text appears above and/or below that image. This is solved simply by putting the image on the left or right of the page.

This is called aligning the image. By default, the image is aligned to the left, but this does not solve your text-wrapping problem. So in comes another attribute - align.

<img src="mypictures/mydog.jpg" align="right" alt="This is my Dog" width="100" height="200">

Simple as that. All you have to do is put "left", "right" or "center" in there and that's what will happen! Two things:-

Center is spelled c-e-n-t-e-r in HTML not c-e-n-t-r-e. It's our American neighbours again (like having to spell Color without the 'u'). This spelling of center applies throughout HTML and later on, CSS and even later on, JavaScript. Always spell it this way. Else it won't work. At all. Got it?!

If you align your picture as center then your text will still be above and/or below it - it will not flow around it.

Giving your image some breathing space

If you feel like the text-wrapping is a bit too close for comfort (which it can be) then you want to give it some space. Here come two new attributes:-

hspace - how much horizonal space (in pixels) to give it - i.e. space at the right and left of your image.

vspace - how much vertical space (in pixels) to give it - i.e. space at the top and bottom of your image.

<img src="mypictures/mydog.jpg" align="right" alt="This is my Dog" width="100" height="200" vspace="5" hspace="5">

Parting Words on Pictures

You can add as many pictures as you like to a page, but remember your page will take longer to load the more pictures you have so if you have plenty of pictures to share, then consider creating multiple pages (next tutorial).

And finally, notice that the img tag does not have a closing tag? It does not need one because it is simply putting something on your page, rather than containing something, which is generally what tags that need closing tags are doing. So don't put one in.

Colors And Fonts In Html

Colours/Colors and Fonts

HTML Tutorial 3

Aims

To understand how HTML deals with font typefaces

To learn how to understand website colours and what not to do (REMOVE THIS: DO NOT USE WORDS)

To see how to add other simple formatting tags to your text

To learn to be careful on font selection

To change the background colour of your page and its limitations

The Basic Use of Fonts

If you create any document on a computer the text will be written in a font. No, this has nothing to do with baptising babies. Just accept that's the word we're going to use.

You may have heard this referred to as a 'type face'. Or you may be in another group who just work in a word processor and type away merrily in 'Times New Roman' or 'Arial' as standard and never think to change it. Whichever category of understanding you're in, the key word is FONT.

Depending on what the purpose of your page is will depend on your choice of font. This should be a careful choice to as to create the right impression. If you're making a fun page you may choose "Comic Sans MS", a formal page may simply be in "Arial" or "Arial Narrow" and if you want an air of sophistication you may use a more elaborate font.

Have a quick look in a word processor now at the fonts you have installed on your computer. Both OpenOffice and Microsoft Word let you see what the font looks like as you're having a look. Choose a font you like.

Now, open up your HTML document we have been working on. This is the simple way we define a font in HTML.

<font face="Tahoma" size="3" color="red">

 This font should be in size 2 Tahoma font and coloured in red.

</font>

This font should be in size 2 Tahoma font and coloured in red

The use of HTML Attributes

These tags introduce you to a new concept - ATTRIBUTES. You will recognise the opening and closing FONT tags as being like the other opening and closing tags we have learned so far. However, inside the opening FONT tag, we now have attributes.

Attributes further define whatever is between the opening and closing tags. So in this case it means this: any text that comes before the closing FONT tag should be in Tahoma font, should be size 3, and should be coloured red. After the closing tag, the text will return to whatever the 'default' font is.

How HTML Understands Font Sizes

You're possibly wondering why the font size is set to "3" if you're used to creating documents with 10pt or 12pt text. And this is because HTML has a different way of measuring text size.

As a rough guage these are the font size equivalents:-

1 = 8pt

2 = 10pt

3 = 12pt

4 = 14pt

5 = 16pt

So don't set your font size to 12 else this will happen:

Nice small text?

How HTML Understands Colour

If you're British or have learned English from a UK source, for HTML you will need to learn to spell "colour" incorrectly! ALL references to colour in HTML, CSS, JavaScript and I would be willing to lay down a fiver that this applies in all programming contexts, you must spell it COLOR. If you don't, it will be ignored.

Secondly, using words to set colour is not ideal and does not really comply with coding standards. So now we introduce HEX CODES to you. This has nothing to do with Harry Potter curses but is short for HEXIDECIMAL.

Web-based colours are defined in terms of how much red, green and blue you want to make up your color. It is stated in terms of "#RRGGBB" - 2 numbers or letters for each of the colour components. You can use numbers 1-9 and letters a-f. If you use numbers nearer to zero then there will be less of that colour, and if you use letters nearer to "f" then there will be more of that colour.

Here are some basic colours for now - but you can play around with them as much as you like to make up the shades you want.

HEX CODE Example

#000000        Black

#ff0000        Red

#00ff00        Green

#0000ff        Blue

#00ffff        Light Blue

#ff00ff        Violet

#ffff00        Yellow

#ffffff        White

I'm not going spend hours creating a full charge because a) there are millions and b) other people have done a good job! For a basic set of hex codes head over to Web Monkey.

Applying this to Text

In the example above you saw color="red". All you have to do is replace the word "red" with a hex code. So let's use the hex code that corresponds to red - #ff0000;

<font face="Tahoma" size="3" color="#ff0000">

 This font should be in size 2 Tahoma font and coloured in red.

</font>

This font should be in size 2 Tahoma font and coloured in red

So there you go - simple eh? Play around with different fonts, colours and sizes!

Adding Other Simple Formatting Things to Your Text

You might want to make font BOLD or ITALIC or UNDERLINED when writing text and this is really easy in HTML. You need to use opening and closing tags AROUND the text you want to change - here are the tags.

Bold: - <strong>bold text</strong>

Italic: - <em>italic text</em>

Underline: - <u>underlined text</u>

You must be careful when using tags that you enclose things properly. Here's an example of good HTML:

<font face="Verdana" size="3" color="#333399">

 This is a good example - normal text then <strong>bold text</strong>

</font>

Notice how everything is between the font tags and the "strong" tags are properly codes. If you put the </font> tag in the wrong place then your text will come out all wrong. Here's a bad example:

<font face="Verdana" size="3" color="#333399">

 This is a bad example - normal text </font> then <strong>bold text</strong>

This is bad example - normal text then bold text.

See, the font and colour change back because the closing tag was in the wrong place. So watch your opening and closing tags - if your page does not do what you're expecting, your tags may be wrong.

On this point make sure everything you are trying to display on your page is between the <body></body> tags.

A Warning on Your Font Choice

Adding fonts can be fun - you can download special ones and include them on your page, put it on the Internet and think that everything is fine.

However, just because you have "FancyHandwritingFont" on your computer doesn't mean everyone in the world does - the page will not look as great to everyone else. When you use a font that other people don't have, the page will load instead in the browser's default font - Times Roman, Arial or whatever the computer-owner has set it to.

When making a web page then you have two easy choices:-

Use standard (and potentially boring) fonts.

Use font groups (see below)

Using Font Groups

Don't rule out your favourite font completely! In the face attribute you are allowed to put in a variety of fonts, like this:-

<font face="FancyFont,Verdana,Tahoma,Arial" size="3">Some Text!</font>

When your page is loaded, the browser will look for the fonts from left to right, so put your favourite fonts first in the list and at the end put a standard font you will be happy with the page loading in.

So in this example, if "FancyFont" exists then that's what the page will display in. After that it looks for Verdana then Tahoma and then Arial.

The low-down? Specify multiple fonts to avoid disappointment! And you can always set up a link for people to download your favourite font so that your "best-look" page can be seen. Well, you will be able to once you've read the next tutorial! Just an idea.

Page Background Colour

Not everyone wants to have a boring white background, do they? Well we can easily add a background colour to the page!

This is achieved by putting an attribute in the BODY tag like this:-

<body bgcolor="#ccccff">

Simply put a hex code between the speech marks and away you go!

A few words of advice:-

Choose your colours carefully - garish colours will quickly make your visitors move on - don't give people headaches.

Make sure your font colours and your background colours compliment each other, again go easy on the eyes!

Browsers display colours slightly differently sometimes. This shouldn't be the case, but I have known differences that have made me take a different approach (see later tutorials) - so download a few of the main browsers (see below) and try your page in them to check that your page looks how you want it to.

Your First Page In HTML

Beginner HTML Tutorial - Your First Page

HTML Tutorial 2

Aims

To understand how your computer (and the Web) knows your file is a web page

To show the basic structure of a web page.

The special lines that show compliance with W3C standards.

To create your first page and show it displaying text in a web browser.

Getting Your Computer to Recognise Your File as a Web Page

If your are using the Internet, the program you are using knows that the page is for the Internet. However, on your computer are various different types of files: programs, word-processed documents, spreadsheets, pictures and a whole lot more.

Web pages have their own file types. Some examples are: HTML, PHP, SHTML, ASP, JSP. These types depend on how the page is written and what features the writer wants. If you look in your address bar in your web browser now, you will see that this page is PHP.

All the files on your computer have extensions, whether you can see that or not. The extension determines the identity of that file and what program tries to open it.

For example: Microsoft Word documents are .docx, Excel documents are .xlsx, programs are .exe (in Windows) or .app (in MacOS X).

The same applies to files for the Internet. So, for these tutorials, you must ensure that all your files that you play with are .html. Some code editors make this easy and provide the option for saving as a HTML page (TextEdit for Mac does).

However, if you are using an older version of Notepad for Windows, you will need to do the following:-

Open NotePad and then go to File -> Save As...

When you choose your filename, ensure that you put .html on the end, e.g. mypage.html

Click OK

The reason for this is that NotePad will automatically add the .txt exention which means "this file is just boring text" and your file needs to be one to open in an Internet browser!

Please Note: You will have to open your new HTML file from inside your editing program now because if you double-click it, it will open in your web browser.

Having saved a blank text document as a .html file, remember where you have saved it and let's move on!

The Basic Structure of a Web Page

As we saw on the first page, a HTML file (or web page) is coded using tags, which can define areas of a page or things on that page.

A Reminder about Tags

We will build up your understanding of tags gradually through these tutorials, but for now just remember that some tags come in pairs.

<this> is an opening tag of a pair.

</this> is a closing tag of a pair.

Got it? Then look below and see the basic layout of a web page.

<html>

 <head>

 </head>

 <body>

 </body>

</html>

What does that lot mean, then?

HTML Tag: the HTML tags go at the start and at the end of your document. This tells your browser that what falls between them should be defined as HTML. So, unless I say otherwise, don't put anything before <html or after </html>.

HEAD Tag: What comes between these tags is not intended to be displayed as part of your page. Between these tags we can tell the browser things about the page or do stuff in the background. It is a useful place for many things, and I will introduce one of them later on.

BODY Tag: Between these two tags is stuff you want to display on your page. All of it. So if you need to put more on your page, then create more space between these two tags. Simple as. You can also set a few basic settings for your page using the body tag, which we will come to later on also! One step at a time.

So there you have it! That is the structure to create a perfectly empty web page. We will add something to it in a sec!

Telling the Browser that you have Standards!

Now I will let you put something before your opening <html> tag. Didn't take me long did it? I also won't tell you to put anything else here at all!

To tell your browser, the browsers of people reading your page and W3C that your page will have standards, we need to add a special line in:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

All you need to know for now is that there are varying levels of "standards" from quite lenient to very strict. We will be going "Middle-ground" for now and using the "Transitional" standards.

The other thing to explain is that HTML itself is updated and changed over time so the "4.01" is the standards we are using. If it is deemed necessary, as the standards and capabilities of HTML change, these tutorials will also be updated.

So place that line above your <html> tag. Always have this line when you start any new HTML page. It will be very useful when we come to test our page with W3C.

Creating Your First Page

Let's put something in your head!

When you load a website in any browser, the page you loads has a title. You may not have known it, but look at the top of your window and you will see some text saying "Free HTML Tutorials". If you're using a tabbed browser some of that text may appear on your tabs too.

This is put there using the <title> </title> tags. You must use these - firstly because the standards say so, and secondly because it's partly how people will find your site when they search the web.

To make the most of this title tag, make sure that it describes what the page is about. Do not use the same title for all your pages, so check each one. So if your page was about the King Charles Spaniel and how to care for them, your title might simply be:-

<title>King Charles Spaniels - how to care for them</title>

What else goes in the head?

If you progress through all the tutorials here you will see that various things can go into the HEAD:-

Cascading Style Sheets (CSS) - defining the style of elements of your page.

JavaScript functions - to add inter-activity or to simplify your visitors' experience

External File Links - to be able load separate files into your document which eases editing across a whole website

But do not worry about this right now, I'm just painting a picture for you. Let's add something to your body!

Adding headers and text to your BODY

Your page content - whatever that is, goes between the two BODY tags. And now we can introduce you to header tags.

The TITLE tags, remember, do define the page title, but they do not display anything on your actual page. The simplest way of dividing up your page is by using relevant HEADER tags, which are in pairs like so:-

<h1>This is the largest Header</h1>

<h2>This is a second level Header</h2>

<h3>This is the largest Header</h3>

And so it continues on to h4, h5, h6. Why you would need that many, I'm not quite sure.

What HTML does for you here is that each header is a bit smaller than the previous one - without you having to set the font-size at all.

So let's use a h1 for now and see how we can add some text.

The easiest way to mark text into paragraphs is to use the <p></p> pair - see it's just a P for "paragraph". When you put some text between these HTML automatically adds some spacing before and after your paragraph.

If you look at the source code of this page (accessible through your 'View' menu), you will find a lot of these P tags. You don't have to use them, but they are very useful.

So here's a demo page:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title>My first HTML page</title>

 </head>

 <body>

  <h1>Hello World!</h1>

  <p>

   Welcome to my first web page!

  </p>

  <p>

   I will add more stuff when I know how - thanks for stopping by!

  </p>

 </body>

</html>

You should understand all of that now, right? If not, go back and review this tutorial again! Once you're happy, save the page above on your computer (make sure you save it as a webpage - HTML or HTM) then open the folder and load it into whatever program you use to browse the Internet!

Well Done!

INTRODUCTION OF HTML

Introduction to HTML
HTML Tutorial 1Introduction to HTML

HTML Tutorial 1

Welcome to these beginner HTML Tutorials! These lessons build on each other, but if you want to skip to a particular subject use the menu system above. But be aware that the tutorials assume you have learned everything from the previous lessons.

Aims

To understand what HTML is.

What W3C is and why standards are important

Get the (free) tools of the trade

Basic Concepts of HTML

What does HTML mean?

HTML stands for Hyper-text Mark-up Language:

Hyper-text: text fit for the Internet

Mark-up: it is not programming - it simply marks up (or labels) various parts of the document in different ways depending on how you want it to appear or behave.

Language: although it is not programming, it has its own way of 'speaking' so that it can be understood world-wide.

Basic HTML underpins how all web pages appear. There may be fancy programming, databases, forums and pictures, but those are made to appear by generating HTML.

So through these lessons you will be learning how to put together your own pages that you can put on the Internet.

HTML Works through <tags>

Web pages are coded using text-only format documents. This means all you need a simple text editor (such as Notepad in Windows or TextEdit in MacOS X) and you are good to start. NB: If you're using TextEdit make sure you set the file to Plain Text by going to the Format menu and selecting "Make Plain Text"

The web page itself and the elements inside that document are marked-up using tags. These are words and terms inside greater-than and less-than signs, like the code below.

<html>

</html>

The first tag is an 'opening tag' and the second is a 'closing tag', which is marked by the forward slash. In this example, it means that everything between the tags is marked as HTML and this will be important for you to remember as you learn more tags.

Some tags do not need closing tags, but we will learn these as we go along.

W3C Standards - are they important?

W3C is the "World Wide Web Consortium" and they set coding standards for websites. If you want to learn more about them visit their website.

Coding Standards are important. This is because people who use the Internet are from most countries of the world, using different computers and different software to view websites. Having standards gives a certain level of consistency in how pages are viewed regardless of browser or computer.

There are limitations to this and sometimes it is necessary to make changes to suit different browsers, but these tutorials teach standards-compliant HTML. We will see later on how we check if sites are standards compliant.

Get the Free Tools of the Trade

Doing simple, standard coding on new webpages does not require any money to be spent - so anyone can learn. Especially if they use free tutorials from a site like this one. So here's what you need.

Text Editor: As I said above you can use Notepad in Windows or TextEdit in MacOS X (ensure you go to Format -> Make Plain Text before you start). Alternatively, there are various free text editors that highlight your code for you, which can help. We recommend Komodo Edit (available for Windows and Mac) but try a few out and see what you're comfortable with.

Standards Compliant Browser: most web browsers (the programs you use to look at web pages are called 'browsers') are now compliant with coding standards. But these are three which are particularly good:

1. Mozilla Firefox - if you use this browser, our tip would be to download the 'Developer Toolbar' add-on, which helps to highlight problems and show when you are coding in a standards-compliant way.

2. Safari

3. Internet Explorer 8 - please ensure you have upgraded your installation of IE to version 8 using the automatic updates feature in Windows.