LEARNING HTML(Part - 1)

This part of blog is about HTML.Starting with HTML basics we will finally take you to a point where you will become perfect in html,you will be able to make anything and everything possible in HTML.From a beginner, we will transform you to a coder.

HTML - HyperText Markup Language

HTML is a markup language (A markup language uses tags such as head,body) used to create web documents of World Wide Web(It is one of the service provided by Internet and is a collection of hyperlinked web pages). With HTML you can create your website also. :) To see HTML coding done on a Web page,just open any webpage on World Wide Web and right click,you will see a menu,select the option 'View Page Source'. You can create your own web page with the the help of a text editor.

Here are 2 steps:-

1) Just write the HTML code on a text editor like notepad(for windows) and gedit(for linux) or any other suitable text editor,save it by giving any name but by Extension '.html' .ex -: abc.htmlthis is basically for linux,your path may vary depending upon your operating system and location of html document.Or the second option is just give the address of your web page(html document),the path where your document is saved in your computer.Browser may vary. 2) Once you are done with the first step, right click on your HTML document and click on 'Open with ....Browser'Eg -: file:///home/username/Desktop/abc.html

Now let us come to main part i.e. HTML coding.For HTML coding , you have to start playing with elements and tags .What are Elements and Tags?Elements are what define outlay or basic strcture of HTML document and tags are what mark up the beginning and ending of elements.Tags start with '< 'and end with '>' .Let us begin with a basic HTML program :-

< html >

< head >WELCOME TO MY FIRST WEB PAGE < / head >

< title >My First Program in HTML< / title >

< body >

< p >I want to become perfect in HTML. < br> I am going to learn HTML from this blog. < br >I want to be a coder.< / p >

After HTML , I will do CSS

< / body >

< / html >

OUTPUT :-

WELCOME TO MY FIRST WEB PAGE

I am going to learn HTML from this blog.

I want to become perfect in HTML.

I want to be a coder.

After HTML , I will do CSS

LINKING AND IMAGES IN HTML.!!

<br> <p> Have you ever thought how web pages are linked with each other.You can open another web page from one web page or other <br>part of same web page with the help of hyperlinks(links in form of text,images,video etc).Is there some code behind it? <br> Yes,there is a code.Following is the code :- <br> < a href = "http://www.google.com"> This is a link to google< / a > <br> This link is specified using the <a> element. This element is also called anchor tag . Anything between the opening < a > tag and the closing < / a > tag becomes part of the link and a user can click that part to reach to the linked document. Linking is of two types :-<br> 1)Internal Linking :- <br> Use the id attribute to mark the element to which you want to link. <br> syntax :- < p id="paragraph">para < / p > <br>

You can now create a link to that element by using "#" in the link attribute. The "#" must be followed by the id of the tag you want to link to. syntax :- <br> < a href=" # para" >Link to paragraph < / a > <br> 2)External Linking :- <br> A link to another web page is external webpage.It's syntax is :- <br> < a href= "http://abc.com">external link< / a > </p>

<p> Now as you must have seen on various web pages ,the link to download files .The example to download song is given as follows :- <br> < a href="http://name_of_website/songname.mp3">Download Song< / a > <br> I hope you come to know about the basic syntax of linking </p>

<p> Now let us begin with the next part,image part.Images in web pages are inserted with help of code :- <br> < img src="abc.jpg" alt=" abc " / > <br> syntax :- <br> < img src= "image URL" attr_name="attr_value"...more attributes / > <br>

There are three types of image type extensions :- <br> GIF (Graphics Interchange Format) <br> JPG / JPEG (Joint Photographic Experts Group) <br> PNG (Portable Network Graphics) </p> </body> </html>