learning basic coding
Ok this is very basic for those just starting out in website building.
I’m going to cover some of the first things you need to learn and hopefully
you’ll see it’s very simple, start out slow and once you have a good grip of the
basics you can start expanding.
Starting out
Firstly you should know that html code needs to be opened and closed around what
you want it to affect, be it a whole page or one letter. Easy example is
<b>bold</b> - see we opened by saying <b> (means bold) and after the word
we wanted was put in, we said, no more bold </b>
Basic tags
<html> - this is needed to open your page, tells the browser what to read
<head> - all the information that you don’t want displayed on the actual page is
put in here, example the title and the commands for the colour/size of font.
<title> - pretty obvious that this one sets the title for your page/site!
<body> all the content of your page will appear between these tags
<b> - we covered this above, means bold
<br> - you can use this tag to make vertical spaces between images, and it works
just like the enter key on your keyboard. This tag doesn’t need closing
<u> - underline
<i> - italics
<p> - paragraph
Links
A standard link is very simple;
<a href=”the page address you want to go”>Link</a> - the word “link” will be
what they click which will then take them to the address you put in between the
“.
This type of link will make the new page open in the current window. If you want
this link to open a new page you add the following:
<a target=”_blank” href=”the page address you want to go”>Link</a> With the
target we’ve specificed now this should open in a blank page.
Linking to an email address is similar:
<a href="mailto:your email address">email me</a>
By clicking ‘email me’ a blank email addressed to the specificed address will
open and the user will be able to type you an email and send it.
If you want the subject of the email to be specified to you can put that in like
below:
<a href=”mailto:your email address?subject=yoursubject”>email me</a>
So starting your page will look like:
<html>
<head>
<title>title of your page</title>
</head>
<body>
All the content on your page goes here
</body>
</html>
Text and Images
Depending on how you want to code your site, your specification of text is very
different. If you use a stylesheet, (tutorial here) then you will see that you
specify the colour/size/font for your text there, so you don’t need to use any
font tags in your pages. But if you don’t use stylesheets, or want to override
the stylesheet for one bit of text then you specify the details like so:
<font face="your font" size="your size" color="#your color number">Then your
text goes here</font> and is closed like so. You don’t have to put all that code
in, if you only want to change the color then it would look like so:
<font color="#your color number">Then your text goes here</font> and is closed
like so.
You can also align text using the paragraph tags. <p align right>Your text here
will be on the right</p> - ending the “p” will return all text after that point
to the standard alignment.
With images, every image you want to use on your site has to be uploaded nothing
can be used if it’s on your computer, everyone viewing your site will see just a
box with a red cross in it, meaning the image isn’t uploaded, or the link from
the page to where the image is could be wrong.
Images are displayed in pages using the following:
<img src="images/imagename.jp> And that will take the image in that location and
display it. You can go further as with the font tags and specify how you want
the image displayed:
<img border=“1“ src="images/imagename.jp width="100" height="50"> you see now
the image will have a border 1 pixel thick and it will be displayed at that
size.
Also we have linked images, like affiliate buttons, there are the images that if
you click they take you somewhere!
<a href=" the page address you want to go"><img src="images/imaginename.jpg"></a>
Again as we talked about with the link code, instead of text between the address
and the end of the tag ( </a> ) we now have an image displayed. Also as
discussed with the img code, you could specific a border and the size required
for the displayed image.
Positioning Text on your page
Most people use div layers for their content, if you’ve glanced at my other
tutorials you’ll see I use them and recommend them. A div element is a block of
content that can be positioned anywhere on your site by using absolute
positioning and the <div> tag.
<div id=nameofdivlayer style="position:absolute; top:20; left:20; width:300;
height:300;>then all your text can go here</div>
So you see, you can specific the exact position on your page for the div layer,
you name it and then put in all your content. I use one div layer for my
navigation and one for my page content. This means that I only have to arrange
those two layers instead of worrying where each line of text will appear lose on
the page.
Again there are many other options we can include in the code specifications for
our div layer, I’m just going to add the common one. How to make your div layer
scroll. At the moment even though we have our height specificed, if the text
goes over that the height will just increase, this is no good if you have an
image or something below and the text falls over it. So we will add;
<div id=nameofdivlayer style="position:absolute; top:20; left:20; width:300;
height:300; overflow:auto;">>then all your text can go here</div>
Ok I’m going to leave this tutorial here as I wanted to really start with the
very basic tags. I can go into more detail but I would overlapping my other
tutorials. I suggest the next bit of reading would be the stylesheet tutorial as
that is very simple also, but will save you a lot of extra coding. I also
recommend the coding the basic layout, and the php includes tutorials as your
knowledge grows. But the best way to get better is to practice, like anything
else, create a page and upload it somewhere and see what your coding makes it
look like.
I hope that was helpful and easy to understand.