HTML Lesson No1 By Ahmad Awais

03. Jul, 2011 32 Comments 2205

Freakify has published this article i.e.HTML Lesson No1 By Ahmad Awais & More awesome articles for you at FREAKS NETWORK.If you like this post after reading it , do share it with others ! A reseach has shown that sharing takes just 15 seconds :) Adverite Here.

Pin It
1

 

z

Salam, and welcome to the first lesson of HTML by me.Today we will study three things in this HTML Language

  1. Compiler
  2. Basic Tags
  3. First Website (Basic)

Editor Not Compiler:

Every Language has its compiler in which that language is executed , but in case of HTML we don't need any special thing just our Notepad is enough for us to code with.

What I use?

I use Notepad ++ for HTML programming .It colorizes the code which helps me understanding it well .You can download it from here

Click Notepad ++ to Download it  or go here http://www.filehippo.com/download_notepad/

Other options are Dream weaver and front Page .

Basic Tags and Extensions

The basic tags in HTML are

  • <html></html>
  • <body></body>

.HTM or .HTML File Extension?

When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.

See the program below to understand these tags.

First Basic Website  in HTML

Lets start it .It is a good practice that you make a folder in your computer and name it anything you like eg HTML workspace and do all stuff in it.

I hope you have made that folder up-till now .

Steps

  • Lets make a new file by right click on the screen in that folder => New =>Text Document and name it like "index.html" (Without quotes of course ).
  • Now I assume you have installed the Notepad ++ software , So, Right click index.html and click edit with Notepad ++.
  • Now that file is in-front of you and write the below code in it.

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Explanation:

  • The text between <html> and </html> describes the web page
    The text between <body> and </body> is the visible page content
    The text between <h1> and </h1> is displayed as a heading
    The text between <p> and </p> is displayed as a paragraph

What Else?

  • Now save the code by pressing Ctrl + S or by going to File => Save in  Notepad ++
  • Now double click the index.html and it will open in the default browser you use. (i.e Internet Explorer , Opera, FireFox, Safari, Chrome etc) .

See the Result and try modifying it a little ! :D

Ahmad's Tip

Try downloading Opera or Firefox browser and open the index.html in those to get good results.I love opera !

Exercise/Assignment

Make a page that explains a little about you and yourself , containing different sizes of headings.

Ahmad's HINT

Try <h2><h3>….<h6>

 

 

 

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your email.

AhmadAwais

I have been designing web pages since the early days of tables and spacers. And No – I've never used the scrolling marquee with Comic Sans fonts :P.Well, I am doing Electrical Engineering from U.E.T Lahore , but web development is the area of my deep interest .I can speak HTML, CSS, PHP, Assembly, C, C++(OOP), Visual Basic, Verilog, and MySQL etc.Personally I like tablets having Andriod OS in them.When not on the computer, I enjoy spending time with my family & Friends, taking pictures and drinking strong coffee. I blog at Freakify.com .Connect With Ahmad Awais on Google+, Facebook and Twitter.

More Posts - Website - Twitter - Facebook - LinkedIn - Digg

More posts from

has written awesome articles for us at FREAKS NETWORK

Some of them are as follows

HTML, Languages
,


32 Responses to “HTML Lesson No1 By Ahmad Awais”

  1. Xplains Reply 03. Jul, 2011 at 8:15 pm

    gud work

  2. mohsin Reply 04. Jul, 2011 at 11:03 am

    cool:)

  3. zaid iraqui Reply 04. Jul, 2011 at 12:39 pm

    nice…:)

  4. Aneef Izhar Reply 04. Jul, 2011 at 1:00 pm

    helpful :) I tried writing a paragraph, and pressed ‘Enter’ key to go to the next line in the paragraph body, but when i opened it as an HTML file, then it didnt show the ‘Line Feed/ New Line’. Any suggestions?

    • Anonymous Reply 04. Jul, 2011 at 2:33 pm

      well bro nice try infact in html
      for a line feed or break you have to use the tag of
      Only once for one line.
      Any further Queries?

      • Aneef Izhar Reply 04. Jul, 2011 at 3:31 pm

        yar ur tag isn’t visible here.
        Ur comment has appeared like:

        “well bro nice try infact in html
        for a line feed or break you have to use the tag ofOnly once for one line.Any further Queries?”

  5. Aneef Izhar Reply 04. Jul, 2011 at 1:05 pm

    Also tell how to give indentation/spaces

    • Anonymous Reply 04. Jul, 2011 at 2:35 pm

      Indentation and spaces in the source code or in HTML??
      If in HTML then you will study it in further lectures but for your zeal  let me give you a hint.
      try somfng like this
      (If I’m not mistaken it will align it in center)

    • Anonymous Reply 04. Jul, 2011 at 2:36 pm

      @facebook-600229026:disqus Let me know about any other queries , regarding Lesson no 1 of HTML

  6. ahmad bilal Reply 07. Jul, 2011 at 9:11 am

    good work and intresting way of explanantion keep it up

  7. Ayesha Reply 15. Jul, 2011 at 3:47 pm

    reAlly nicE nd helPful… :)

  8. Rana Hamza Reply 18. Sep, 2011 at 11:02 pm

    Kindly tell me how to manually put a size in font

    Whats is tag for that?

  9. Bitts1990 Reply 16. Feb, 2012 at 4:53 pm

    Amazing!!

    Are you going to write about other languages as well?? 

Leave a Reply


U COMMENT
I FOLLOW

More in HTML, Languages (29 of 30 articles)
intro


Salam!   Hope you all be fine ! I am starting the course of HTML for you people which is ...