Search This Blog

Sunday, November 12, 2017

HTML Tutorial Part 1 : Creating A HTML File

Hello guys, first of all, I'm sorry for the late update, I've been really busy with assignment and such. Anyway, let's get started with our Begineer Web Developer Tutorial.

The first things you going to learn is HTML or Hyper Text Markup Language. Basically, HTML is a language you use to show the content of a website in the browser. Which mean HTML simply helps you to show a bunch of text and that's all. It might looks ugly for now but trust me, its pretty useful, and once you learn CSS later, it will be beautiful as well.

First of all, you gonna needs a text editor. Things like Notepad would be fine but I would suggest you to use a Sublime Text or a Notepad++ (this is what I'm using) instead as they have a lots of function that will make your life easier. Whatever you do, don't ever use Microsoft Words for creating a website, just don't.

Now that you have gotten yourself a text editor, let's create our very first website. open a new file in your text editor and copy test code.

Code for creating HTML file

now save your file as index.html and open the file with a web browser. Of course you wouldn't see anything yet on your web browser because all we did was creating a HTML file. A HTML file is actually just a bunch of text enclosing the content. Each tag will be enclosed in the less-than '<' and greater-than '>' symbol. Aside from the selected few, all html tag will have a opening tag and closing tag

Notice how I use two tags here, the first one is <!DOCTYPE html> which is used to tells the browser that our document type is HTML. the second tag I use is <html> which is an opening tag and is followed by </html> which is a closing tag. The '/' symbol in the tags simply means that the tag is a closing tag. The <html> tag is the single most important tag in html file or your website. Basically, anything in between <html> and </html> is the content of your website. Now let's write something on your website.

Edit your html file using your text editor so that is become something like this,

Code for using body and head tag in HTML


save your file and refresh your web browser. You should see something like this,

Displaying text in browser as results of HTML codes
What really happens here is that we use <head> and <body> tag to divide our html file into 2 parts, the head and the body. The <head> is where you put all the information about your page that you want to tell the browser about while the <body> is where you put all the information you want to show to the user who visited your webpage. Notice how both <head> and <body> tag has a closing tag </head> and </body> respectively. Anything you write in between the <body> tag will be displayed on browser as a bunch of text with no formatting whatsoever. So what we gonna do is to give it a format.

Codes for creating paragraph in HTML

Edit your html file, save it and refresh your browser and you should get something like this

Displaying results of HTML paragraph tag in browser
What our codes do is really just giving our text a format, the tag <p> stand for paragraph like the one you use when writing an essay. Anything in between <p> and </p> is considered a single paragraph and the next <p> tag will be another paragraph. A webpage can only has 1 <html> , <body> and <head> tag each but it can have as many <p> tag as you want.

That's all for this entry, we will talk about other formatting text next time. See you later.



No comments:

Post a Comment