..::code some HTML with Dushi::..

Dushi — Thu, 21 Aug 2008 03:48:20 +0000

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( “”). And its important to remember that, most of the tags also having a closing tag. we close the tags like this,””. checkout the following syntax,

learning html with Dushii

its easy to learning 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 ” ” tags. The “ ” tags should come under the “ ” tags. The things what we want to display through the browser, should be inside the “ ”. 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.

heading 1(largest)

heading 2

heading 3

heading 4

heading 5

heading 6(smallest)

#Bold Letters->

bold letters

bold letters

in here the pattern of ‘closing tags’ is important.

#Italic Letters->

italic letters

italic letters



            #Underlined Letters->


underlined letters


underlined letters


This heading contains underlined bold italics

like this there are so many things that you can do to your text.



            #The Line Brake->


This line contains a
line brake

            #The Horizontal Rule->

                        her is a horizontal Rule:



                        her the width of the horizontal line been manipulated with pixals:





            #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
tag??

            some examples;

                        add a background color to your web page



                        aligning Headings


align to left

            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;




it so yellow back of these text


these text are green



                                                            or

            you can give Hexadecimal values to give more tuned colors. usually I’m using Hexadecimal colors for my page!




it all Olive

05. How to link

                        Hyperlinks are performed using ‘‘ tag. this is also known as the anchor element. we use ‘href’ (hypertext reference) attribute . 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 my Blog



    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 my Blog



                        here it opens the new URL in the current browser window.

I’m writing a post to my Blog



                        here it opens the new URL in the parent frame(if your using frames).

I’m writing a post to my Blog

                        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 my Blog

            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


Main Heading name=”main”



step2:create the Hyperlink(this is where we have to click)

                        Back to Main Heading



06. Insert some Images into your web page



            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-

            =”dushii.wordpress.com”>

            =”path_to_image_file” width=”500px” height=”500px” alt=”image_name” border=”1”>




            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 ‘‘ 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 ‘
and
‘ 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.









-checkboxes

            these are used to make multiple selections.



            drink” value=”water”/>

            drink” value=”milk”/>



-radio buttons

            these are used to select one out of predefined conditions.



            drink” value=”water”/>

            drink” value=”milk”/>





-the submit button

            allows user to submit the form.









-select list

            with this user can select one among many







………………………………………………………..to be continued……………………………………………

Dushan888- Technology & FOSS for Humans » HTML tutorial

..::code some HTML with Dushi::..

heading 1(largest)

heading 2

heading 3

heading 4

heading 5

heading 6(smallest)

bold letters

italic letters

underlined letters

This heading contains underlined bold italics

align to left

Main Heading name=”main”