Lesson 1: Introduction to html - Kodhus

Lesson 1: Introduction to html

Like & share to be notified of the new tips & tutorials:

Introduction

Client server model

The Internet and web is all about client and server model. Client is your browser and server will be the site that you enter the address of it in your browser address bar.
It is then the browser that sends a request(http request) to the server that you requested (e.g kodhus.com) and then server responds to the browser with the corresponding response(http response) which is the page containing html, potentially css and javascript if exist for that page.

alt text

Enough with this information. You can always read more about this on the Internet.

If you are interested to learn more about it checkout following link:
Request-Response

What we are really learning in this course

In this course we will cover the basics of html, css and javascript starting with html.
Our approach is going to be a project based approach meaning that at the end of this course (16th chapter), we will be having a complete page with html, css and javascript. Sounds interesting? Keep on reading then!

Take a look at one of our educational videos on youtube and see how much of it you understand! After looking at it, start browsing other tutorials of the channel! If they seem easy to grasp, then you do not need this course even though it could be a good reference to recall some of the web development patterns that you might have forgotten.

Checkout following link to see all the tutorials in our youtube channel: FrontendTips

Tools needed for this course

There are 2 ways you can start coding in our course.

Options1 (Recommended)

Our recommendation is to use our online code editor which we use extensively in our video tutorials and also in creating our prototypes. You just need to signup and you are ready to go.

Watch our tutorial on how to use this online editor at Kodity online code editor

Option 2

Any of the following Text editors will do

  • Sublime Text
  • Atom
  • Brackets
  • Notepad in windows

You just need to search for them online and download the one that you like. Our recommendation is Sublime Text.

That’s about it for the tools you need.

Keep in mind that many of our code samples will be on our online code editor (Kodity).




Let’s get started

Alright! I guess now is the time.
Open your favourite text editor (In our case it’s Sublime Text). Create a new file and save it with .html extension. Let’s call it index.html

Copy and paste the following code in it:

<!DOCTYPE html>
<html>
<head>
  <title>Our first experiment in html</title>
</head>
<body>
  <header>
    this is my header
  </header>
  <main>
    This will be my main content
  </main>
  <footer>
    I will fill this one with copyright information and maybe some links
  </footer>
</body>
</html>

and save it.
Now go to your directly were you saved this file and click on it. Make sure it is saved with .html extension.

Click here to see how it looks.

Now a bit about all those <html>, <head>, <header>, etc:
These are called Html tags.

They start with < and end with >. You need to memorize them but you do not need to memorize them upfront. There are only limited number and you will learn them over time. So, don’t worry about it now!

So these tags are usually used in a open – close fashion. what it means is that if you have <html>, you will need to have </html> as well. Whatever you enter in between will be the content of that tag. There are some exceptions to this rule like <img> tag which does not need a closing tag which you will learn them gradually over the course of this serie.

As you see in the code sample we have following:

...
  <header>
    this is my header
  </header>
...

header tag is used when you want to define the header of your webpage. Just like the footer that is for the footer of your page. As you can see, I just added “this is my header” in between the opening and closing header tag.

Everything that you see in the browser window when your open your html file is created using different tags in between the opening and closing body tag.

following is the list of html tags that I often use

  • <div></div>
  • <span></span>
  • <h1></h1>
  • <h3></h3>
  • <p></p>

Let’s use some of them in our code.

<!DOCTYPE html>
<html>
<head>
  <title>Our first experiment in html</title>
</head>
<body>
  <header>
    this is my header
  </header>
  <main>
    <h1>Welcome to my website</h1>
    <p>During this course, I want to build this website and learn the basics of web development! How cool can it be!</p>
  </main>
  <footer>
    I will fill this one with copyright information and maybe some links
  </footer>
</body>
</html>

Now save this and open your index.html file. If it’s already open in your browser, just refresh the page.

Click here to see how it looks.

As you noticed we have added h1 tag and p tag. h stands for header and p stands for paragraph. This way you can add header titles and paragraphs based on html standards.

Following link has almost all the html tags that you can use in your html webpage: HTML Element Reference

Alright. We have reached the end of first chapter. You can always ask your questions by sending an email to kodhus@kodhus.com or a message to our Facebook page at Kodhus facebook page.

Stay tuned! Next tutorial is coming!

Share if you liked it: Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *