HTML - Beginners Guide Part 2
Okay, so in the last tutorial we created our own basic webpage. However it was an extremely simple page which included just 2 headers and a paragraph. In this tutorial, we will be looking at more basic elements which you can use, along with how to add your first image! So lets get started.
Please note: If you have not read the first part of this guide, please do so to avoid confusion.
Again, I am running a Windows 7 operating system, however basic HTML runs exactly the same in other operating systems and machines.
Please note: If you have not read the first part of this guide, please do so to avoid confusion.
Again, I am running a Windows 7 operating system, however basic HTML runs exactly the same in other operating systems and machines.
The Contents...
- Part 1 - Lists (Numbers and bullet points)
- Part 2 - Adding your first image.
- Part 3 - Text formatting and alignment.
Part 1 - Lists (Numbers and Bullet Points)
So lets talk about lists. This can be very useful if you want to make a bullet list or an organised number list for whatever reason. This is another simple element yet gives your webpage an organised and professional look.
First lets open up the code we used in the first tutorial, I have made some changes but I will go through them more in detail below.
First lets open up the code we used in the first tutorial, I have made some changes but I will go through them more in detail below.
<html>
<head>
<title> My First Site </title>
</head>
<body>
<h2> Welcome To My First Webpage </h2>
<h3> My favorite meals </h3>
<ul>
<li> Fish & Chips </li>
<li> Roast Dinner </li>
<li> Beans on Toast </li>
</ul>
</body>
</html>
So you should know what the majority of this means after reading the first tutorial, however I have added some new elements. Let's take a look...
Just a reminder;
<html> / </html> - Defines the document type.
<head> / </head> - Contains the metadata (unseen information)
<title> / </title> - Defines the webpage title which in this case is 'My First Site' - This shows up in the browser bar.
<body> / </body> - Everything that you want visible to the visitor goes in between these tags. (Images, text, headings etc.)
<h2> / </h2> - This is the 2nd biggest heading size. It goes from <h1> to <h6>
However there are some new tags I have inputted. <ul> means 'unorganized list' and this means that it's standard bullet point style. For an educational example, I have used 'Favorite Meals'. Underneath that, we have <li> which simply stands for 'list item' and this is used for every piece of text you want in the list. I have then ended the list with </ul> which of course ends the tag (same with most other tags).
Webpage Preview;
So that's how you simply add bullet points to a web document. Now I will show you how to do a 'number list' - This is pretty much the same thing except there's a minor difference. Here is my new code;
<html>
<head>
<title> My First Site </title>
</head>
<body>
<h2> Welcome To My First Webpage </h2>
<h3> Favorite rappers (in order) </h3>
<ol>
<li> Eminem </li>
<li> Kanye West </li>
<li> Jay-Z </li>
</ol>
</body>
</html>
As you can see I have slightly changed the code. Instead of the favorite meals example I have used a 'Top Rappers' list which is more relevant seeing as the list is styled as numbers. But to the more important tags, you can see I have used <ol> instead of <ul> - You have probably guessed that this just stands for 'organised list'. Again we have to use the <li> tags for each item we add, and I have ended the element again by using </ol>
So let's have a look at this in the browser...
Website Preview;
Part 2 - Adding Your First Image.
Now you know about lists and bullet points, so now we're going to add our first image. Lets start by noting that you should still have the folder named 'My Site' with a folder inside named 'Images' - If you haven't done so please visit Part 1 by clicking the button below or skipping Part 1 and create a folder now (not recommended).
First lets write our code. Please note I am using an image I downloaded from the internet (from http://www.supertightstuff.com/wp-content/uploads/2010/07/capuchin.png) - Please ensure you have an image ready and add it to your 'Images' folder within your 'My Site' folder.
<html>
<head>
<title> My First Image </title>
</head>
<body>
<h2> Welcome To My First Webpage </h2>
<img src="Images/Your.Image.Name.png"/>
</body>
</html>
Here's the basic code for adding an image. I have simply added the <img src> tag which means 'Image Source' which locates where the image is placed. In this case you should have it in your 'Images' folder and since your web document is saved in the 'My Site' folder, you can simply add <img src="Images/ Your image name here.fileformat"/>
Of course you can add an image from any location, even directly from the internet! However if the image is in a completely different directory, you must specify the exact location. An example is <img src="C:\Users\Public\Pictures\Sample Pictures\exampleimage.jpg"/>
You may also have noticed that I added the '/' at the end of the tag. This is becuase it is a single image and doesn't need to be 'ended' - therefore you can simply add the '/' at the end of the tag. Lets take a look at my webpage.
Webpage Preview;
Yes it is that simple to add an image! You can do this with animations ensuring that you use the right format (usually .gif) - it's the exact same method. Lets move on...
Part 3 - Text Formatting and Alignment.
If you're wondering how you add your text or images or the center, or maybe you want to change the style of your text - Well now I am going to show you. This time I will provide a table below with the description of each tag.
Tag;
<b>
<i>
<em>
<small>
<sup>
<sub>
<del>
<ins>
<strong>
|
Description;This defines bold text. Like this
This defines italic text. Like this
This defines emphasized text.
This defines smaller text.
This defines super-scripted text.
This defines sub-scripted text.
This defines deleted text.
This defines inserted text.
This defines 'important' text.
|
These are some tags used for formatting text. Below you can see what each of these look like. Remember that the next must go in between the tags.. In example; <b> This is my bold text </b>
Webpage Preview;
But what about aligning? How do you replace your text to the center? Here's how... Again, I will show you the code and then go through it below in detail.
<html>
<head>
<title> My First Site </title>
</head>
<body>
<center> This is my centered text. </center>
<h2 align="right"> This is my right-aligned heading. </h2>
</body>
</html>
The center tag is quite self-explanatory... It simply defines that you want a center-aligned image or text. However the right-aligned text is a little different. We couldn't just use <right> because that doesn't explain anything, in which we use align in the tag. For an example I will align the text to the right hence why I used <align="right"> - You could also use <align="left"> or <align="center"> too!
As you can also see I included the align tag in the <h2> tag - Of course if you wanted to center your paragraph, you would use it in the <p> tag.
Webpage Preview;
So now you've learned how to add bullet point lists and numbered lists, how to add your first image and how to format your text. Part 3 will be here very soon, so ensure you keep your files and stay tuned.
I hope you enjoyed reading through my HTML guide. By reading these tutorials you will be able to create your very own website and learn how to use HTML. I will be adding many more tutorials on HTML and CSS, so check back soon. Thanks - Be sure to share this guide with your friends.