Basic HTML codes
Here are some useful codes to start with - you will certainly need them while making your websites. Only basic codes are included in this tutorial, check my other tutorials for more.
- What does HTML code look like?
- How can I change the font style?
- How to make my text bold, italic or underlined?
- How to change background color?
- How to add a background image?
- How to insert an image?
- How to make a hyperlink?
- How to make an e-mail link?
What does HTML code look like?
HTML code is a set of many tags. A tag is the smallest
unit of HTML, a part of the website code.
You can recognize the tag by the signs < and > which represent
the begining and the end of a single tag.
In the begining on every page there is a tag <html>. That
means the beggining of HTML code. In the end of a document, there has to be
</html>. This is the end of code. Anything written between
these two markups will be interpreted as HTML.
The first tag in the document is <head>. That tag holds
information about the site, such as title, encoding, meta tags, styles
and similar. You won't see any of this text in a browser, but it's very
important for the page itself.
Somewhere between <head> and</head> you should
put <title> your title here </title>. Replace the
words between the tags with your own. That title is written in the title
bar, on top of this window. My title of this page looks like this:
<title>Basic HTML codes | HTML and CSS tutorials | In obscuro</title>
After the head tag, there is the <body> content here </body>.
Anything you type inside will be seen on your page. You'll put all your text, images,
etc. here.
Here you will find an example of the simplest HTML page. If
you copy this code into Notepad, and save your document with the .html
extension instead of the default .txt, you will be able to open the page
in a browser and see what it looks like. You can
use this code for practising, by adding more code snippets to it.
Note the <br> tag. This means a linebreak. Whatever text
you put after it will be shown in a new line. There are other tags I haven't
mentioned here, but you will learn them later.
<html>
<head>
<title>This is the page title</title>
</head>
<body>
This is the simplest HTML page. <br> Learn how to improve it :)
</body>
</html>How can I change the font style?
Copy the code and paste it somewhere inside your page (must be between the
<body> and </body>)
Change the size, font name and color into what you need.
<span style="font: 12px Comic Sans MS; color: red">YOUR TEXT</span>
How to make my text bold, italic or underlined?
<b>bold text</b>
<i>italic text</i>
<u>underlined text</u>
Note: Do not combine the underlined text with color other than your normal text, because people might assume it's a hyperlink and get frustrated by clicking on it.
How to change background color?
Look for the <body> tag in your code and replace it with
the suggested one. #FF0000 is red, change it to the on you need. If you
need a hex color sheet, you can find it
here.
<body bgcolor="#FF0000">
You can use this code for table, cell or layer background.
How to add a background image?
Here's the example for the body. If you don't change
anything, the image will be tiled.
<body background="image.jpg">
Note that this will work, but it's better to do it using CSS.
How to insert an image?
Between the quotations (") for alt write your image's name
or short description. That text will be shown if the image couldn't be loaded.
It's recommended that each image has it's alt, at least an
empty one like in the following code:
<img src="yourimage.jpg" alt="" />
How to make a hyperlink?
Replace http://www.server.com/page.html with the right path
(absolute or relative), and instead of "YOUR TEXT" you also can insert
an image. Target should be _blank if you want the link to open
in new window, or _self if you want it to be opened in the same
window. If you want it to be opened in a frame, you'll type the frame's
name here. The entire target attribute should be omited if you want the link
to open in the same window.
<a href="http://www.server.com/page.html"
target="_blank">YOUR TEXT</a>
How to make an e-mail link?
If you want people to send you an e-mail by clicking on some text or image, you need this code:
<a href="mailto:your@adress.ext" >YOUR TEXT</a>
Can I add more effects to the text?
Using pure HTML not really. For other effects you should know something about CSS, and luckily there are some tutorials about CSS here, as well :)
For more HTML codes, read the sequel of this tutorial, Basic HTML codes (part 2).
