facebook pixel

HTML 5 Course - HTML 5 basic course and test

Basic HTML course that will help you understand the basic of website development

Hypertext Markup Language (HTML) 5 for Beginers

You will learn here practical skills to build your first web site.

It is for absolute beginners from 0 to hero.

The goal here is to create functional static website.

I hope that it will be just first step for you in further long way of web developer carier.

To start we will need html editor.

I strongly recommend Visual Studio Code or Sublime text 3.

At this point we really do not need anything else.

Create first "Hello World" Website

To create your first website simply go to your editor and create new file with name "index.html".

Inside your page put content <p>Hello World</p> and you are done.

You can open index.html in any browser to see effect of your work.

Congratulation you just create your first super simple website.

But what is it <p> and what it is mean ?

HTML is created base on simple tags to determine different type of elements.

The most important rule here is to always close tags in correct place.

In our example <p> open tag and </p> close it.

There are also tags that you are closing directly it mean it is not have further continuation. Example:

<img src="mywife.jpg" alt="My wife wedding picture" />

In this example closing tag are on the end of it and all information are already inside it.

HTML Attributes

<img src="mywife.jpg" alt="My wife wedding picture" />

As you can see we have additional things inside our img tag the name for it is HTML Attributes and it provide information for html what to display and how.

If you will put above img example in to you html file and in the same folder image with name mywife.jpg it will display that image in the browser. The alt attribute is provided for 2 reasons :

  • it will show in case if browser can not open or find image
  • it will describe what is on the photo to make it easier for search like google to classify it

Attributes are always inside the tag


Remember:

Open and close tag need to be in the same order

<strong><em>Important</em></strong>


´╗┐

Validation

Structure of our code is very important from computer and browser perspective.

For example open and close tags in wrong places might not broken our code in Chrome but in Internet Explorer user might not see your website at.

There is few things that we as Developers should always do

  • use tabs when we are writing the code
  • editor code validation
  • external code validation

To external validate our HTML I recommend to use https://validator.w3.org/

Any good HTML editor should have build in code validator or you can simply install it as plugin.



HTML template

<!DOCTYPE html>

<html lang="en">

 <head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <meta name="description" content="">

  <meta name="author" content="">

  <title>My first website</title>

 <!-- <link href="style.css" rel="stylesheet"> -->

 </head>


 <body>

  <p>Hello World</p> 

 </body>

</html>

Explanation

On previous slide we had HTML template that provide correct HTML structure do work with. The reason fo that is that we want give browser and search engine (Google) more information about our website. Also we want to it display well in every browser. As you can see it is just showing Hello World as we did before but right now it is in correct way, you can validate it and get 0 errors.

Feel free to modify it.

All things that you would like to display on the website suppose to be inside <body> block of your code.

In <head> we mostly provide information about our website or resources like JavaScript or CSS that we are gonna to include.

Checking other website HTML

Checking other our our website source code can help us to debugging or copy some part of HTML.

Go to Chrome click on the website that you would like to review click right mouse button and chose Inspect in top left corner you can find tools to select interesting element and view it HTML source code. By editing that elements you can change how it view your name or amount of money on your account. Be aware that this changes do not make any real change it only affect how element view for you and it will work only until you do not refresh page. And the reason of that is that Browser get original HTML code from the server and after that it remains in browser memory.

To continue your Web Developer journey please visit https://www.w3schools.com/html/default.asp

Good luck