Think this post will be a help to beginners in HTML. Before coding HTML ,lets do some background reading. HTML stands for “Hyper Text Markup Language”. if your planing to design a web page of your own or if your planing to be some kind of web developer in future , you should first learn the main basics of HTML. But you never have to be an expert of HTML! And HTML is a simple language which anybody can learn.
you can write HTML tags in many editors, like “Kate Text Editor, Vi editor” and note pad, word pad…if your still a windows user. but I recommend kate or vi editor.
now open your editor and open a fresh page and save it as a “html” file. hope your familiar with saving files with various extensions. if not just put “.html” in front of your file name. it should be like this-> file_name. you can save it as “.hml” if you want. Now code with me…
01. Basic Syntax
we code HTML using various tags. these tags contain HTML elements( “<html element>”). And its important to remember that, most of the tags also having a closing tag. we close the tags like this,”</html element>”. checkout the following syntax,
<html>
<head>
<title>learning html with Dushii</title>
</head>
<body>
<p> its easy to learning html</p>
</body>
</html>
these tags tells the browser what to display and where. notice the opening tags and the closing tags. these basic tags should be in right order. All the tags should be contained between ”<html> </html>” tags. The “<title> </title>” tags should come under the “<head> </head>” tags. The things what we want to display through the browser, should be inside the “<body> </body>”. like that the tags are in an order.
02.Formating
#putting headings->
when adding ‘headings’ to html pages, there are six types of predefined headings.
<h1>heading 1(largest)</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6(smallest)</h6>
#Bold Letters->
<h3><b>bold letters</b></h3>
<p><b>bold letters</b></p> in here the pattern of ‘closing tags’ is important.
#Italic Letters->
<h3><i>italic letters</t></h3>
<p><b>italic letters</b></p>
#Underlined Letters->
<h3><u>underlined letters</u></h3>
<p><u>underlined letters</u></p>
<h3><b><u><i>This heading contains underlined bold italics </i></u></b></h3>
like this there are so many things that you can do to your text.
#The Line Brake->
<p> This line contains a <br/> line brake</p>
#The Horizontal Rule->
her is a horizontal Rule: <hr/>
her the width of the horizontal line been manipulated with pixals:
<hr style=”width:500px”/>
#Creating Lists->
Basically there are two types of ‘Lists’.they are ordered lists and unordered lists.
-ordered list -
<ol>
<li>ordered list</li>
<li>ordered list</li>
<li>ordeded list</li>
</ol>
check these out too
<ol type=”i”>
<li>ordered list</li>
<li>ordered list</li>
<li>ordeded list</li>
</ol>
<ol type=”a”>
<li>ordered list</li>
<li>ordered list</li>
<li>ordeded list</li>
</ol>
-unordered List-
<ul>
<li>unordered list</li>
<li>unordered list</li>
<li>unordeded list</li>
</ul>
check these out too
<ul type=”circle”>
<li>unordered list</li>
<li>unordered list</li>
<li>unordeded list</li>
</ul>
<ul type=”square”>
<li>unordered list</li>
<li>unordered list</li>
<li>unordered list</li>
</ul>
03. HTML Attributes
an attribute consist with a name and a value. they are separated with a “=” mark. we put attributes to our pages to tell the browser how a specific tag should behave. we can put more than one attribute in a single tag. remember, how we put an attribute into <hr/> tag??
some examples;
add a background color to your web page
<body style=”background-color:”orange”></body>
aligning Headings
<h3 align=”left”>align to left</h3>
like this we align the heading to center and right. not only headings, images, paragraphs, and other things also can be align using ‘align‘ attribute.
04.HTML Colors
In html tagging there are two ways of assigning colors. you can simply give a color to a background or fonts by like this;
<body style=”background-color:silver”></body>
<p style=”background-color:yellow”>it so yellow back of these text</p>
<p style=”color:green”> these text are green</p>
or
you can give Hexadecimal values to give more tuned colors. usually I’m using Hexadecimal colors for my page!
<body style=”backgroung-color:#00ffff”></body>
<p style=”color:#808000”>it all Olive</p>
05. How to link
Hyperlinks are performed using ‘<a>‘ tag. this is also known as the anchor element. we use ‘href’ (hypertext reference) attribute <a>. we gives the URL or path to the distination as a value to the href. lets try this out;
I’m writing a post to <a href=”dushii.wordpress.com”>my Blog</a>
when you click on “my Blog”(usually by default a hyperlink appears as an underlined blue color phrase.), it direct you to dushii.wordpress.com.
there are three types of hyper links and I’m not going to explain them now.
we can give target by using ‘target‘ attribute, like this;
here it opens the new URL in a new browser window.
I’m writing a post to <a href=”dushii.wordpress.com” target=”_blank”>my Blog</a>
here it opens the new URL in the current browser window.
I’m writing a post to <a href=”dushii.wordpress.com” target=”_self”>my Blog</a>
here it opens the new URL in the parent frame(if your using frames).
I’m writing a post to <a href=”dushii.wordpress.com” target=”parent”>my Blog</a>
here it opens the new URL in the current browser and if you were using any frames they will be canceled.
I’m writing a post to <a href=”dushii.wordpress.com” target=”_top”>my Blog</a>
once when I was doing a project to build a website, I faced to a big problem. our site had lot of pages and they were saved in many folders under many categories. when I linked them with each other I found that it cannot be linked with a page which is out side the directory/folder using the method we used. after finding out (by the help of chanux) I found it easy! if I want to exit one directory all I have to put ‘../’ before the URL. If I have to go two directories backwards I have to put ‘../../’. like that we can use it any number of times. keep it mined those are the problems when you starts to code html by your self.
-Named Anchors are also needed-
these are used when you need to scroll in the same page but by using links. to use named anchors we have to create two pieces of codes.
let say, we want to go back to the ‘Main Heading’ which is located at the begging of the page. we are hoping to go back to the ‘Main Heading’ by clicking a link called ‘Back to the Main Heading’ which is located at the bottom of the page. just two steps.
step1:creating the destination
<h3>Main Heading<a> name=”main”</a></h3>
step2:create the Hyperlink(this is where we have to click)
<a href=”#main”> Back to Main Heading</a>
06. Insert some Images into your web page
<img src=”path_to_image_file” width=”500px” height=”500px” alt=”image_name”>
you can control the size of the image by using ‘width‘ and ‘height‘ attributes. the ‘alt’ stands for alternative text. this attribute is useful when the browser fails to render the image. and you can also add the ‘align‘ attribute to align the image. Try it out by your self.
-Image Links-
<a href=”dushii.wordpress.com”>
<img src=”path_to_image_file” width=”500px” height=”500px” alt=”image_name” border=”1”>
</a>
use the above tag to make image links. you can also remove the image border by setting the ‘border‘ attribute into 0.
oops! sorry I forgot to mention about the supported image formats. the images should be in ‘JPEG, PNG or GIF’ format. But personally I experienced that most of the time ‘.JPEG or .JPG’ extensions are not working properly. But I don’t no an exact reason for this problem. So I always convert my images into ‘.PNG’(it don’t have to be in caps) formate to make sure that they are working properly.
07.Meta Data
Also learn about what is Meta Data. Mata data is information about, or that describes other data or information. Mata data in webs does a great part. because when search engines search for a specific data it reads the meta data contained in web pages and finds the best match. we can put our meta data using the ‘<meta>‘ tag. I’m leaving this part for now and will explain it in another time.
08. HTML Comments
<!– you can write your comment here –>
comments are useful for programming purposes. most of the time programmers put comments in their programs to explain things like what is happening by the specified code to others/programmers or to make simple note for their use.
09. Forms
we perform form operations between ‘<form> and </form>‘ tags. It allows us to create dynamic websites.
-The input tag-
-text
when you want the user to type text or numbers, the text fields can be used.
<form>
<input type=”text”/>
</form>
-checkboxes
these are used to make multiple selections.
<form>
<input type=”chechbox” name=”drink” value=”water”/><br/>
<input type=”checkbox” name=”drink” value=”milk”/>
</form>
-radio buttons
these are used to select one out of predefined conditions.
<form>
<input type=”radio” name=”drink” value=”water”/><br/>
<input type=”radio” name=”drink” value=”milk”/>
</form>
-the submit button
allows user to submit the form.
<form>
<input type=”submit”/>
</form>
-select list
with this user can select one among many
<form>
<select>
<option value = “first_name”>First Name</option>
<option value = “middle_name”>Middle Name</option>
<option value = “last_name”>Last Name</option>
</select>
</form>
………………………………………………………..to be continued……………………………………………
