HTML tutorial for Begginers
Hi everyone!
So you want to learn HTML? Very good, HTML is the basic of all web related design and development, so it’s a very nice skill to have and totally necessary if you want to be a web designer/developer. Also, it’s very easy to learn!
HTML is not a programming language, is a markup language, and is used for describing web pages.
HTML markup tags are also known as HTML tags, the purpose of a web browser is to read HTML tags, and show them as a web page. A browser does not display the HTML tags, but uses the tags to interpret the content of the page.
So let’s start with the HTML basics.
Every HTML page as the <html>,<title> and <body> tags. This tags tell the browser that we are building an HTML page.
Open a notepad, and type the following text:
<html>
<title>
Our new Website!
</title>
<body>
<h1>Welcome to our new webpage!<h1/>
<p>This is the content of our new webpage. </p>
</body>
</html>
Now save this document as index.html and open it with a web browser. There you have it, you first HTML webpage!
Let’s look at the tags, and try to understand them.
HTML tags have start and end tags, witch tell the browser where the sections we want to be affected by each tag star and end. <html> is a start tag, </html> is an end tag.
The <title> tag defines the title that our webpage have, look at the top left of your web browser to see it.
The <body> tag defines the body of our website, where we have all the information.
Headings in HTML are defined with the tags from <h1> to <h6>, and paragraphs are defined with the tag <p>.
Now that we have our freshly new webpage, let’s add some more things to it. Let’s concentrate on the <body> of our webpage.
To change the background color of your webpage just add the “bgcolor” attribute tou your bady tag:
<body bgcolor=”FFFFFF”>
Note: the colors in HTML are specified with the RGB mode, to have access to map of all the color RGB codes, try search for “RGB color codes”.
To add a link we use the following tag:
<a href=”www.google.com”>Click here to visit google</a>
The <a> tag creates the anchor text, and the href tells the browser where that anchor text should send us.
To add an image to our webpage we use the following tag:
<img src=”iamge.jpg” width=”130” height=”101”>
The attributes width and height specify the width and height of the image. Note that the image.jpg file should be in the same paste as our index.html.
Next, you may want to format your text, for that you can use the following tags:
<b> Bold </b>
<i> Italic </i>
<u> Underlined </u>
To change the font of your text use the following:
<font face=”arial”> Arial text </font>
or change the colour and of your text:
<font color=”#FFFFFF”> White text </font>
you can use this attributes in combination.
The <align> tag is also very useful, as it allows you to align your text, or your images to the right, left or center. This tag is better used in combination with the heading tags or paragraph tags. The heading/paragraph tags act as a box for the text, so you can align all the “box”.
<h1> The text you want to align here </h1>
<h1 align=”left”> Your text </h1>
<h1 align=”center”> Your text </h1>
<h1 align=”right”> Your text </h1>
The last thing I want to talk about in this basic tutorial is the <br> tag. This tag is used to jump a line or various lines in your text, as the HTML will not recognize the line breaks in your text.
As you can see, basic HTML is very easy and very funny to learn, it's the base of all web design and development, so study it well, and most important, PRACTICE A LOT ! Practice makes it perfect.
I've only shown you the very basics of HTML, there's a lot more tags you can use to enrich your webpage, so feel free to consult my HTML cheat sheet, that contains all the HTML tags you will ever need right here: http://hubpages.com/hub/HTML-Cheat-Sheet-tutorial-programming-web
Also, after you got your
way with HTML I recommend you start learning some CSS. CSS stands for
“cascade stylesheets” and as the name says, it will help you add
style to your webpage. CSS is very useful and also very important to
know and master.You can learn some CSS basics right here:http://hubpages.com/hub/CSS-Simple-Basics-tutorial
And that's all, thanks for reading and have fun doing you own websites, and remember, you can read it all, but if you don't practice it you will not be able to do it right!
H.C Porter 2 years ago
Nice explanations-very easy to understand! I am just now getting familiar with the HTML codes, so this was of great assistance. Thanks for the great hub! Rated Up and Bookmarked!