Part 1
HTML is Hypertext Markup Language. It is used to build websites. Anyone who wants to learn to build websites, learning HTML is a must.
A single HTML web page has mainly some essential parts- html, head, body
. Here is a basic formation of HTML pages to understand at the starting level.
<!DOCTYPE html>
<html>
<body>
Web contents will go here inside the body
Web contents will go here inside the body
Web contents will go here inside the body
</body>
</html>
- An HTML page must start with
<!DOCTYPE html>
- Then the document must start with
<html>
tag and end with</html>
tag. - Then all the contents will be placed inside
<body> and </body>
tag.
In the next few steps we are going to work with codepen.io
which by default includes all the above 3 (just to remember).
HTML elements are wrapped in some specific tags. Every tag has an opening and a closing tag except only a few of them, at the same time this type of tag is self closing tag.
<>
this is an opening tag mark and </>
this is a closing tag mark.
So if we want to use the html tag in our page we need to use it in such way
<html>
Above is with the opening tag
And below is with the closing tag
</html>
We'll discuss more about the tags later. Now let's see some most common used tags for displaying the elements
<div> </div>
This div (division) tag is used to wrap a bunch of code, or a part of the page to make it separate/devide from other contents.
<h1> </h1>
This h1 (Header 1) tag is used to make a Heading text of some specified contents.
There are also some other Header tags, h2, h3, h4, h5 and h6
. All it's just text size matter. Let's see how they look like
This is the text size of h1 header
This is the text size of h2 header
This is the text size of h3 header
This is the text size of h4 header
This is the text size of h5 header
This is the text size of h6 header
<p> </p>
This p (paragraph) tag is used to write some content as in paragraph.
<button> </button>
This button tag creates a button.
Now, we are going to make a live web page with a most popular online code editor (codepen.io
) with live project and there we need only our working codes to put inside the HTML section. The most interesting thing is what you will write there it will go live instantly, and you will get the best inspiration to build your own web apps here.
- Open the Codepen.io
- Click on Signup
- Signup with Email or other options
- Click here New pen
- You will see there 3 parts, HTML, CSS, and JS
- From the letf-top click on the
Untitled
edit icon (pen) and rename it tomy-first-web-app
or name it your own - Click on
Save
from the right - As we said earlier, this Codepen is included Doctype, html and body by default, so in this online code editor you will not use these 3 tags. Use only other elements inside the HTML section.
Now let's build our first HTML page with the above knowledge.
Here is the code
<!DOCTYPE html>
<html>
<body>
<div>
<h1>It's Awesome!</h1>
<p>We have learnt the basic HTML and we are now able to build an HTML page.</p>
<button>First Button</button>
</div>
<div>
<h2>It's very interesting!</h2>
<p>We are making it more.</p>
<p>more and more.</p>
<button>Next Button</button>
</div>
</body>
</html>
Save your code, you'll see the outut below your code. Yes! this is live now. To get a unique and live url
of your web page,
- Click on the Change View from the top-right
- Click on the Full Page View
- See the url in the browser, this is the web url of your app
- Now, everybody can see your work with this url with an internet connection.
Interesting? Yes! Let's move.
So, the output was something like this
-------------------------------------------------------------------------------
It's Awesome!
We have learnt the basic HTML and we are now able to build an HTML page.
First Button
It's very interesting!
We are making it more.
more and more.
Next Button
-------------------------------------------------------------------------------
So, now you can build a web page with a large content by adding some more div
and then other necessary elements. Try yourself to create a large page with your own contents.
Part 2
Let's move forward
First go back to the edit mode of your live project
- Click on Change View from the top-right
- Click on Editor View
Now we'll learn about some HTML attributes.
If you look at the above codes, you'll find there are two <div>
. In a real web page you'll find there many div
many p
and so on. Now, think if I tell you to work on a div
, how will you find that specific div
or other elements? Any idea? Yes, there is a way! We need some reference, right? So, we can do this by giving an identity to every div
so that we can refer it easily. In HTML identity is defined by an id
attribute. Let's see how to add it
<div id="home"> </div>
<div id="learn"> </div>
<div id="earn"> </div>
That id
inside the opening div
tag separated by a space is an HTML attribute and the names inside that quote marks are the value
of the attributes. Remember, you must put the name value
for id
attribute starting with an alphabet, never with a number.
This way, inside an opening tag of every element different HTML attributes are to set for different requirements. Now let's add an id attribute to the p
element.
<p id="my-first-paragraph"> </p>
Hope it makes sense about HTML attributes.
Okay, now to see how we can add an image in our web page:
An image is to put in a web page with img
tag with a src
attribute ( (image source / path)). Here's an example
<img src="put the image source url here" />
We are going to place an image here with a valid url, taken from the facebook, you also can use your own photo url. Look at this code
<img src="https://www.facebook.com/tradecoder/photos/a.630834390445618/630834393778951/?type=1&theater" />
And the output is:
So, now, we are able to build a web page with some contents, buttons and images. And before we move forward, we'll learn to apply some styles in our page. There are different ways to do it, but for this time we'll learn it with style
attribute. Here is an example:
<div style="background-color:red"> </div>
As we can see, here we applied style
attribute and the background color of the div set to red, that means it will make a red color div.
<div style="background-color:blue"> </div>
Here the div will be blue color. You also can make it black, white, orange, tomato, silver, gray
and so on.
Now let's add some more value to the sytle
attribute to make more sense,
<div style="background-color:blue; width:500px; height:300px;"> </div>
This div
will be a blue color div, its width will be 500px and height will be 300px. We can make different size of div in this way by changing its value as our own.
Let's learn one more style, when you say color
it applies for text/font color, and when you say background-color
it applies for the background. Let's see an example:
<div style="background-color:blue; width:500px; height:300px;">
<h1 style="color:white"> Hello </h1>
</div>
Gues the output. The div will be blue color but the text will be white color. Interesting? Yes, now we need to make well designed web page. First we need to make a plan how our page will look like. Here is a pattern, we'll work on it.
Now, let's build a page following this pattern. We'll put all the necessary codes inside the body
tag. Then we'll use a header
tag for header contents, div
tag for body contents and footer
tag for footer contents. We also could use div
tag for header and footer section, that's ok. But fortunately we have also a header
and a footer
tag in HTML for doing this. So, we'll use header
and footer
tag here:
<body>
<header style="background-color:blue; width:100%; height:80px;">
<h1>Our first web page</h1>
</header>
<div style="background-color:white; width:100%;">
<p>Here will go our text contents</p>
<p>More contents here</p>
<p>More topics here</p>
</div>
<footer style="width:100%; background-color:red;">
<p>By : your name here</p>
</footer>
</body>
Well, so far we've learnt the basic HTML code writing system. Now we are going to explain more about it but before that we'll learn some basic styles of HTML with stylesheet called CSS or Cascading Style Sheets. We can do it in different ways, but we'll use internal CSS for this time.
Part 3
Let's learn some basic CSS (internal CSS)
Internal CSS is to write inside <style> </style>
tags and this is wrap inside <head> </head>
tags before the <body>
tag. Here is an example
<!Doctype html>
<html>
<head>
<style>
All your internal CSS will go here as explained above
</style>
</head>
<body>
</body>
</html>
Now we need to know how to write some basic CSS. Let's see
We have already learnt some basic htmls tags, like body, div, p, button
right? So, it will be easy to get the point of writing CSS. Look the below pattern first
<style>
body{ background-color:green; }
</style>
- Remember, we do not need to put
<style>
tag to Codepen if we use that, but we must need our working codes (main codes) to put inside the CSS section of Codepen.
Styles used for body, and the system is to first write the html tag name then {} and style rules inside the {}. Got it? Now, let's see some more examples
body{background-color:green;}
h1{color:white;}
p{color:black;}
Put that codes inside the CSS section of Codepen.
Could you imagine what will happen to this? The page body
background color will be green and the text color in h1
will be white, and text in p
will be black. Here is the full code
<!DOCTYPE html>
<html>
<head>
<style>
body{background-color:green;}
h1{color:white;}
p{color:black;}
</style>
</head>
<body>
<h1>This will be white color title </h1>
<p>Here will be black color text </p>
<p>And all the body background color will be green</p>
</body>
</html>
We also can use multiple CSS properties and values with a semiclone separated applied to a single element, see the example below:
div{
background-color:red;
width:500px;
height:300px;
margin-top:50px;
margin-right:20px;
margin-bottom:50px;
margin-left:20px;
padding-top:30px;
padding-right:30px;
padding-bottom:30px;
padding-left:30px;
}
p{
color:white;
font-size:20px;
}
If you see the codes above carefully, hope you will get a clear concept about it.
Part 4
Let's go back to HTML part again
Are you ready?
Do you think you can move forward to learn more?
If your answer is 'no', we would recommend to revise it again and again.
And if your answer is 'yes', let's start learning all about web development from the basic to advance level with W3SCHOOLS
at w3schools.com.
When you will be few or more comfortable to write HTML and CSS at w3schools and have more interest, to advance to your learning don't forget to join here freeCodeCamp. It will help you to guide yourself on the way to become a real Developer. You'll be able to build projects and you'll get valuable Certificates! You just need to be consistent in coding, no matter if it's less or more a day.
If you think you may need more help, join our learning group on facebook TradeCoder Digital Academy
Wish you all the best. Happy Coding!
Go back to HTML Section
Visit Developers Hub | tradecoder
If you find this page helpful, please feel free to share it for others