Html Basics

Free Learning Ground : Be online,pay nothing and gain access to our full website tutorials!!

• HOME
• COMPUTER
  
  • Introduction
  • Parts Of Comp
  • Components
• WEBSITE
  
  • Introduction
  • HTML
  • Css
• PROGRAMING
  • Introduction
  • Javascript
  • Python
• CONTACT

WRITTING FIRST HTML

In the previous lesson,We looked at how the HTML skeleton looks like! plus we learnt what makes an HTML tag! If thou didst not attend our previous tot!,then have thyself returned to it! as this will keep the contination of the course!

Having about the general concept of HTML,we will need to implement it in a real world! Our interest will be if you take your time to let us know where you don't understand,that we shall help... In this tutorials,you will be doing what you've leant in our late lesson!

WHAT YOU WILL NEED

To have your codes to run,you will need an editor that you will use to write your editor!

In this tutorials,we will be using an HTML editor called NOTEPAD
We've chosen notepad because it is common and relatively simple and easy to use! If you have your preferable text editors such as Textmate,Notepad++,Html editor etc,feel free to use...

Now,before we proceed with our tutorials,it would be pleasing to have you a feel of how web page html look like!
To have this achieved,let us do this simple task...

In your browser,visit any webpage of your interest,or even use this same page of our site...
• In the page,click on F12 button on your functional upper keys of your keyboard.... You shall see a tab that shows you the source code of the page... This looks much complex but something as you learnt in the previous lessons and thus what you're going to deel with in coming sessions!
  

Be couragious to visit different sections and see what it is...

---

Soft! This was only to let you have a feel on how an html looks like...Let's go along our deel!...

Now,having chosen your editor,follow this steps...

1. Open your editor:
Go to the location of your editor,open it by double-clicking!
2. Paste this codes:
Once in your editor,type or paste this codes:
< !DOCTYPE HTML > < head > < title > ICG CODES < /title > < body > < h1 >This Is Heading!< /h1 > < p >This is the first paragraph,I can have upto 6 paragraphs< /p > < /body > < /html >
Now,stay-still in the editor,make sure you don't leave the space between this "<" to this ">"
3. Now save the file as .html file!
This can be achieved in different ways!
• From the top menu,click on Save
• Then click on Save as
Once you do this,you shall see your document opening in desktop folder!
• click Desktop
and then Type any name of the file that you want to save with. Now,Under the Name you Typed,you see a Save as type..,Hit it and save as all,then you are done!...
You can also follow this shortcut... Once in the notepad or your editor,just:
• Click on Ctrl button on your keyboard,and without releasing,hit "S"!
Notice that it opens in the Desktop,and hence follow the rest steps above...

RUNNING OUR HTML

Now,having saved our HTMLs,minimise your editor... >From the top-right corner of your editor,hit the Minus sign that is[-]...

>Now,go to the desktop,you shall see your file appearing with a default browser! >Now,double click it,and you shall see it open in the browser...with the following contents...

ICG CODES

---

This Is Heading!

This is the first paragraph,I can have upto 6...

Hence you are done!

---

Try it here Here

---

Presented by : Amin

That was our first html codes,and in the coming lesson,we will even make our codes much fascinating... All what you need is to keep following the tutorials...