GETTING STARTED WITH WEB DEVELOPING ( HTML5 )!!!

in #programming7 years ago

You must have seen beautiful interactive Websites and must have admired the Developer. Some people have love and passion for programming and coding, They want to learn to code and to develop their own Apps and Websites !

So today I'm writing a blog to get your started with HTML5, Which is an extremely easy, Web coding language used to code Websites and servers !

html5.jpg

Downloading a text Editor :-

Yes !! I know you can code html in the built-in notepad of your PC but believe me that's so boring, Colorless and Old fashioned way.

I want you to download the latest version of Notepad++. Click on its name and it will redirect you towards the external link.


OR here is an external link :- https://notepad-plus-plus.org/

note.jpg

Install it once downloaded !

Getting Started :-

Once you've Installed it, Open it by double clicking on it.
1.JPG

This is how its main screen looks like

When Notepad++ is all set up, We're ready to code our first Website !!!!, Yaaaaay !!

Writing our code :-

Keep this thing in mind that whenever we are going to code html, Its document always contains keywords html enclosed in < > Brackets. The keywords enclosed in brackets are called as tags and every block of code of html is executed upon tags. For example in order to start the document, We must type in <html> in the beginning of the document and </html> in the end of the document. The tags with a "/" indicates that the tag is closed, while no "/" indicates that the tag is initiated. Every html document is initiated with a Doc-type tag

Tags for initiating the program :-

<!Doctype html>

<html>
</html>
  • The Doctype tag is always written after an exclamation mark, It is a part of its syntax and does not work without it. Doctype tag tells our browser that the document we're working with is html document.

  • The first html tag initiates the code, while last one ends it.

  • Code cannot be written outside/Without html tags.

2.JPG

Here is a screenshot

Head, Body and Title :-

After typing in the program initiating tags, We add head, title and body tags !!!

<!doctype html>
<html>
<head>
    <title> </title>
</head>

<body>

</body>
</html>

The head tags contains all the information displayed on the Tab of our browser. For example :-

3.JPG

These are the Tabs, Their names and logos and stored in our head tags. Head tag holds title tag which is responsible for storing name and logo, Head tag itself does not store any info.

The body tags initiate and end the main body of our program, in which all of the main information goes !!

Adding meat to our Webpage :-

Once you've added all these must have tags in your program, Type the desired name after title tag, This name will be displayed on the top of your Webpage.

 <!doctype html>
<html>
<head>
    <title> My Webpage </title>
</head>

<body>

</body>
</html>

You can copy paste it and execute it ! :) !

Save this file as html document

4.JPG

After saving it, Execute it by selecting run in chrome, I recommend that you use chrome !

5.JPG

Here is how it looks after executing it !

result6.JPG

AANNNNDDD yayy we have out name on the title bar !!!! :) This was a complete basic and first blog on html coding, My next blog will be based upon this blog. Today we've read about adding name in the title bar of our webpage.:)

In my next tutorial I will use the same code used today, and will add stuff in the body of our Website

Upvote, Comment, Resteem and follow to show support, It helps me a lot and keeps me motivated <3

Upvote,Resteem & Comment.png