Amirruddin | Beginner Web Developer: HTML Tutorial

Showing posts with label HTML Tutorial. Show all posts

Wednesday, November 15, 2017

HTML Tutorial Part 3 : Creating A List In HTML

Hello again everyone, this is our third HTML tutorial for beginner web developer also our last (at least for the beginner parts). In the next post, we will be learning the basic of CSS instead.

In this lesson we will learn about list in HTML.There are 3 type of list that we can use in HTML but only 2 are relevant for our beginner tutorial. The 2 type of list are ordered list and unordered list which are basically a numbered list and a bullet list respectively. The tag <ol> and <ul> are used to create the list and as always, a closing tag is required to use the tag. These 2 tag are used in pair with <li> tag which is used to specify the list item. Modify your HTML file as below,


<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
    <h1>I'm a beginner web developer</h1>
    <h2>This is my first website</h2>
    <p>I'm sooo excited</p>
    <p>I'm going to keeps on following the

      <a href="https://amirruddin-razak.blogspot.com/">tutorial</a>

         and make my own super cool website

    </p>

    <ol>
      <p>Follow the tutorial here</p>
      <li>On Blogger</li>
      <li>On Google+</li>
    </ol>
  </body>
</html>

What the <ul> tag do is simply tells the browser to create a bullet list for every single list item, <li> tag enclosed by it. The <ol> tag did pretty much the same thing but with a numbered list instead of a bullet list. Any texts or items enclosed by a <li> tag will be listed in your browser. Notice how I put a <p> tag in between the <ol> tag. What this gonna do is that the browser will display "Follow the tutorial here" normally without being numbered. This is because the text is not enclosed in <li> tag. Therefore the browser won't treat it as a list. But because the <p> tag is in between the <ol> tag, the displayed paragraph are indented as if it is a part of the list. Try to save the HTML file and you should see something like this,

Displaying results of using Ordered list and Unordered list HTML tag in browser

That's about everything on creating a list in HTML. Before we end this lessons, let's touch up our website a bit by making our list into a link by using the anchor tag we learnt before. Modify your code,


<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <h1>I'm a beginner web developer</h1>
    <h2>This is my first website</h2>
    <p>I'm sooo excited</p>
    <p>I'm going to keeps on following the

    <a href="https://amirruddin-razak.blogspot.com/">tutorial</a>

       and make my own super cool website

    </p>
    <ol>
      <p>Follow the tutorial here</p>
      <li>

        <a href="https://amirruddin-razak.blogspot.com">On Blogger</a>

      </li>
      <li>

        <a href="https://plus.google.com/105989137850183491401">On Google+</a>

      </li>
    </ol>
  </body>
</html>

Now save your file and all the link should be working now except for About and Contact since you don't have an About page and Contact page yet. But you should be able to create the 2 pages easily by using what we've learnt before. Just make sure the name of your HTML file match the name you put in your link else the link won't works. Also notice that I put a '#' instead of a url or a file name in the link to home. Basically the '#' is used to do nothing, you will stay on the same page even if you click the link. Since you're already on the home page anyway, its only natural that you won't be sent anywhere if you click the link to home.

your website now looks like this,

That's all for this lesson, in the next lesson we will be learning how to use CSS to make our website looks like a real and beautiful website.

If you have a question about HTML, feel free to ask me in the comment below. see ya

Tuesday, November 14, 2017

HTML Tutorial Part 2 : Headings And Anchor

Hi everyone, in this tutorial we going to cover 2 more important tag in HTML. Once we're done with this, you should be ready to create your website and we will be starting our CSS tutorial to make our website looks better. Of course HTML has far more tag than this but we will leave all those complicated things for later as they are not really useful for us (at least for now).

The first tag we going to talk about is heading tag. Basically heading tag is use tell browser "this is a heading so display it in a large size".There are 6 different font size you can choose for your heading by using <h1> to <h6> tag with

 <h1>

being the largest and <h6> is the smallest. As always, each tag needs an open and closing tag so make sure you pair each of your <h1> <h2> .... tag with </h1> </h2> .... tag. To show how it works, open the HTML file we created in the previous in your text editor and edit it as follow,

Notice how I only use <h1> and <h2> here. Normally, we only use <h1> up to <h3> in a website because your website will looks really weird if you have like 6 different size of heading there. Also, if you notice, I also make an indent before each tag I put between the <body> tag. It is not required to make the indent but it is a good practice to do them as it will make your HTML file cleaner and easier to read. This way, your will know which tag is inside which with just a glance. Once you're done editing, save your file and refresh your browser. you should see something like this in your browser.

Displaying results of HTML heading tag in browser

There are now 3 different size of text with the largest being the text enclosed in <h1> tag followed by the one in <h2> tag followed by <p> tag. Now that you know how to make a heading, lets talk about anchor tag.

Anchor tag is used to make a link to a certain place but unlike other tag, anchor tag has an attribute and value which specify where the link is connected to. For example,

Codes to create anchor tag or link in HTML

The <a> is the anchor tag and it is followed by a closing tag. Anything in between the opening and closing off anchor tag is what you want to make into a link, it can be a text or even image. In this case, we make the word 'tutorial' into a link. Notice there is an extra text in the <a> tag. the href is an attribute which is the hyperlink reference. It means that any value given to this attribute is the target of the link. The url in the quotation mark is the value of the attribute which means it is the target of the link. Note that quotation mark is always needed to give value to an attribute.

Now lets save the file and refresh your browser, you should get something like this,

Displaying results of HTML anchor tag in browser

The word 'tutorial' had become a link and if you click it, it should sent you to the url we put in the anchor tag earlier. The underline and colour for the word 'tutorial' is the default style for links, we will learn how to change them later in CSS tutorial.

If you got any question about what we've learnt so far, feel free to ask in the comment below. see you in the next tutorial.

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.

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.

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.

Amirruddin | Beginner Web Developer

Search This Blog

Labels