Lesson 1 - Introduction to HTML and your first website

HTML and CSS First website Introduction to HTML and your first website

Welcome to the first lesson of the "First website, step by step" HTML course! The HTML language is the foundation of what you need to know in order to start making websites. The language itself is pretty simple and every single website uses it. More complex websites mix HTML with several other languages, which we will cover later on in the course. First thing's first, we'll get you acquainted with HTML, help you make your first web page and upload it to the Internet.

Editor

We won't be using Notepad to code our websites because it lacks many of the most important features we need to do things properly. Mainly syntax highlighting, or bad Unicode encoding and line endings support. For our intents and purposes, we will need a "smarter" editor. The Notepad++ editor should do the trick: https://notepad-plus-plus.org/, if you don't already have it installed, go ahead and do so. For more complex projects, you will also need what is known as an IDE. An IDE is an advanced editor, that even autocompletes your markup, checks your code, and so on. I highly recommend JetBrains' IDEs (which we use here at ICT.social). One of which is WebStorm":http://www.jetbrains.com/webstorm/ mainly used for HTML or PhpStorm, if you plan on later incorporating PHP to your code.

Run Notepad++ and create a new file (File menu -> New). Make sure you've selected the "UTF-8 without BOM" option in the "Encoding" menu.

Setting of UTF-8 in Notepad++

We've set the encoding mainly so that it properly displays accent characters. Even if your country doesn't use them, it's still a good idea to use UTF-8 encoding because of other plugins, ones that you'll use in future might require it. All well-written websites use UTF-8 encoding. Unfortunately, Windows doesn't have UTF set as default. Therefore, it is very important to only use editors that support UTF-8, otherwise, accent characters would mess everything up. In other words, it is a very bad idea to create a website in Notepad++ and later modify in Notepad.

First website

Making HTML pages is relatively easy. Essentially, all HTML pages are, is text files. Select HTML in the "Language" menu so that your code is highlighted properly.

HTML editor

Always start by doing this, or else you will be missing out on helpful features that Notepad++ provides.

HTML consists of tags. Which allow specific meaning to be added to an element or a website. Back in the old days, tags were used to style websites as well. However, the websites back then were rather confusing, so modern tags have been limited to web content.

Tags also help wrap text, i.e. add meaning to it. As a matter of fact, what I'm writing now is a heading is nice and organized thanks to tags. We write tags using angle brackets. Probably, the most important tags are "a" links which help us browse through different pages (it is literally a link to other web pages). Just so you know, the term "HTML" is derived from it - HyperText MarkUp Language (HyperText is text that contains links to other texts).

HTML files have a specific structure that they have to follow. The first thing we have to add is the doctype at the very beginning of the file:

<!DOCTYPE html>

Doing so, we have defined the text file as an HTML document. Don't let the exclamation mark confuse you, that's just how it has to be done :) Next, we'll define the actual HTML document. HTML documents are split up into two parts - the head and the body. The head contains information for the browser and search engines to use. The body contains the website's content.

Modify your file to make it look like this:

<!DOCTYPE html>

<html lang="en">
        <head>
        </head>

        <body>
        </body>
</html>

On the next line, open the <html> tag. In other words, you are declaring that your HTML page starts there.

Then the head follows, which is represented by the <head> tag. Notice that the end of the head is the same, but with an added forward slash. Paired tags are opened and closed that way. We call them paired because there are 2 of them, the opening tag and the closing tag. In between the two, you define their contents, which in this case is head's content. The same goes for the body (the <body> tag) where we define its opening tag as is and its closing tag with a slash. After which we close the HTML web page.

Notice the lang attribute in the <html> tag. What it does, is define the webpage's language. Attributes are additional information that can be added to HTML elements. In this case, we have set our HTML webpage's language to English. Attributes values are to be placed in quotes, but we won't need any more of them right here and now (we'll get back to them later).

Let's move to the head and insert the required encoding information between its opening and closing tags. We do that by a meta tag with the following syntax:

<meta charset="utf-8" />

Notice the slash at the end of the tag, we close unpaired tags like that. Unpaired tags are those who only need a single tag (aka self-closing tags). The <meta> tag is one of them. I'll let you know whether a tag is paired or unpaired every time I introduce you to a new one. What we did here, is set the document's encoding to UTF-8.

In the next line, add a title to the head. To do so, all that is needed is a paired <title> tag and a text in between.

<title>My first website</title>

Our entire HTML document should now look like this:

<!DOCTYPE html>

<html lang="en">
        <head>
                <meta charset="utf-8" />
                <title>My first website</title>
        </head>

        <body>
        </body>
</html>

Out head is done for now. Let's move to the body, which is the part of a page that can be seen in a web browser.

We'll start by adding two text paragraphs into the body. Use the paired <p> tag to do just that (p stands for a paragraph). In HTML, everything is an element, text can't just be thrown in. You have to wrap it in individual paragraphs.

<p>This is my first website. It's empty so far, but still, I'm satisfied with it.</p>
<p>This is the second paragraph.</p>

Create a folder on your hard drive (e.g. FirstWebsite), save the file in it, and name it index.html.

Now, when you open the file in your web browser, you should be able to see your very first website in all of its glory! It will look something like the picture below :) If it looks any different, don't worry, you can download the file we worked on at the end of the article. Then, check back and find out what you did wrong.

My first website
index.html

In the next lesson, Basic HTML tags, I'll introduce you to a couple of new tags, as well as add some more features to our website.

Note: HTML pages can be defined in multiple ways. I'm sure you'll encounter other definitions along the way, and there is nothing necessarily wrong with any of them. The one we used is just the shortest and the most modern.


 

Download

Downloaded 161x (1 kB)
Application includes source codes in language HTML

 

 

Article has been written for you by David Capka
Avatar
Do you like this article?
5 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn College The author learned IT at the Unicorn College - a prestigious college providing education on IT and economics.
Thumbnail
All articles in this section
Make your first website, step by step!
Thumbnail
Next article
Basic HTML tags
Activities (7)

 

 

Comments
Display older comments (16)

Avatar
Rody Lorus
Member
Avatar
Rody Lorus:12/30/2016 11:08

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8/>"
<title>my first website</title>
</head>

<body>
</body>
</htlm>

 
Reply 12/30/2016 11:08
Avatar
IT Man
Member
Avatar
Replies to Rody Lorus
IT Man:12/30/2016 11:32

At first you don't have to send post more times. :)
Okay, now your problem.

1. You must have value in quotes, not value and end of tag. So your right head is:

<head>
        <meta charset="utf-8" />
        <title>My first website</title>
</head>

2. You have empty body. So you can't see any content. Add some text! ;)
3. Your end of document is bad. Or do you use htlm? :) So edit your last tag (on end of document) to </html>.

Reply 12/30/2016 11:32
Don't be silly, smile!
Avatar
Bob Patrick Oweka:10. February 11:07

Awesome!

 
Reply 10. February 11:07
Avatar
woodlet noel
Member
Avatar
woodlet noel:17. February 23:33

<!Doctype html>
<html>
<head>
<title>EPH</title>
<style type="text/css">
table {border: 3px solid red;}
tr {background-color: none;}
P {text-indent: 25px; }
h1 {text-align: center;}
h2 {color: purple}
h1,h2 {text-decoration: underline;}
/*Descendant () Selector*/
ul,li{ color: violet;}
/Child(>)Selecor/
div>p {color: green;}
/*Adjacent(+)Si­bling Selecor*/
h1+p {font-size:24px;}
/*General(~)Sibling Selector*/
h~p {font-family: Arial;}
a: hover, a: focus {
text-decoration: none;
}
/*focus pseudo-class selector*/
a:focus {background-color: yellow;}
a, a:link { color:orange;}
a:active {color:green;}
.dogs {background: lightblue;}
.mfg{
padding: 10px;
border: 1px solid black;
width: 260px;
}
.faq {
margin-left: 20px;
padding-left: 5px;
border-left: 2px solid red;
}
div[role="banner"] {
background-color: lightblue;
}
header[role="ban­ner"] {
background-color: lightblue;
}
</style>
<title>css Selector</title>
<style type="text/css">
h1 {color: red;}
* {color: blue;}
p {color: green;}
.container{
width: 50%;
margin: 10% auto;
}
.box{
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
.box{
color: purple;
border-style: solid;
border-color: gray;
border-width: 20px;
}
.box{
color: purple;
border: 20px solid gray;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
.box{
color: purple;
border: 20px solid gray;
padding: 10%;
margin-top:5%;
margin-right:10%;
margin-bottom: 5%;
margin-left: 10%;
}
.container{
width: 500px;
margin: 50px 0;
background-color: lightblue;
}
.box{
background-color: gold;
width: 250px;
height: 280px;
overflow: auto;
}
</style>
<link rel="stylesheet" href="css/sty­les.css">
</head>
<body>
google
<h1>Hope For Haiti soccer team</h1>
Click Here
The team
Impact Tournament
News
The Players
<h3><a name="team">The soccer team</h3>
<div class="container"> <p class="box">Hope for Haiti soccer team is one of the best schools team in Ouanaminthe. They have
everything they need, it's the most healthy soccer team in Ouanaminthe. But they never win a
school tournament. Hope For Haiti soccer team biggest rival is<spam> Institution Univers</spam>. Hope
For Haiti team have middle name: <spam>EPH (Espoir Pour Haiti)</spam>. EPH Biggest win was over<spam> College
Moderne</spam> soccer team on a score that was end 6-1. EPH biggest defeat was agains their
rival team Institution Univers that was end 1-7. EPH first captain was Talabert Robinson, second one
was Noel Widler. At the moment is Adrien Shandley.</p>
</div> <!-- end .container-->
<h3><a name="Impact">Im­pact tournament</h3>
<p>Since last year Hope For Haiti soccer team started hosting a soccer tournament, this
tournament sponsoring by Impact organisation that same organisation that spoonsoring
the Hope for Haiti soccer team. The first edition of Impact Tournament won by Espoir
Chretien team over College Georges Muller. Hope for Haiti which is the team that horst
the soccertournament got the third place over the best team in that tournamen which
everybody think that was going to win the Impact Tournament last year. After the
tournament there is a big dinner for the fourth teams in the tournament. Last year Hope
For Haiti, Lycee Capois La Mort, Espoir Chretien and College Georges Muller were the
fourth that was in the big dinner for the Impact Tournament. Down below you can see that
Impact firts edition have only eight team in it. But this year I heard some rumours that
for the second edition of Impact Tournament the will be twelve teams in it. In the last
four years in Ouanaminthe, Impact Tournament is the first one that started in got done.
Most of the school tournament in Ouanaminthe started but they never finished. Impact
Tournament is an example for others that doing tounament in Ouanaminthe.</p>
<h3><a name="News">The tournament</h3>
<p>Next year Impact organisation will redo the Impact tournament again in Ouanaminthe, this time
they would do it with twelve soccer teams. The first edition champion might not
particiapate this year because last year they play with some players that was not
part off their school. A player that's not part of the team can't play for that team
in the tournament.</p>
<h3><a name="Players"> Players</h3>
<p>GK
Pierre Esai
Noel Guensly

Def

Adrien Shandley
Pierre Derdiny
Pierre Robenson
Pierre Kervins
Pierre Ronach

Pierre Roudley
Louis Kendy
Jean-honord Witson

Midfield
Alexandre Frederick

Vilma Ilio
Noel Widler
Joseph Fritzner
Estimable Jimmy
Pierre Steeve

Striker
Louis Rodelinx
Toussaint Ederson
Elvaris Raphelis
Majust Pinguy
Charles Johnson
Simon Benedith
Simon Rolando

Coach
Patric Jonh Leton

President:Alas­tair Geddes</p>
<center><table border="1" width="50%">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>Hope For Haiti</td>
<td>Lycee Capois La Mort</td>
</tr>
<tr>
<td>Espoir Chretien</td>
<td>C.O.D
</tr>
<tr>
<td>Jacques Premier</td>
<td>Georges Muller</td>
</tr>
<tr>
<td>Rennee Theodor</td>
<td>C.F.C.P</td>
</tr>
</table></center>
<ul class="dogs">

<li>cleats</li>
<li>jerseys</li>
<!--li are children of the ul-->
</ul>
</body>
</html>

 
Reply 17. February 23:33
Avatar
IT Man
Member
Avatar
Replies to woodlet noel
IT Man:18. February 1:39

Next time use Dev-Lighter for adding code, because now it's hard to read it.

Okay, you shouldn't have CSS in your HTML document. Put your CSS in style.css. And for Coach, Striker etc. you can use tag ul. For example:

<h4>Striker</h4>
<ul>
    <li>Louis Rodelinx</li>
    <li>Toussaint Ederson</li>
    <!-- ... -->
</ul>
Reply 18. February 1:39
Don't be silly, smile!
Avatar
Andrew Baraza
Member
Avatar
Andrew Baraza:9. May 23:40

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8/>"
<title>my first website</title>
</head>

<body>
</body>
</htlm>

 
Reply 9. May 23:40
Avatar
IT Man
Member
Avatar
Replies to Andrew Baraza
IT Man:10. May 0:45

Only the value should be in quotes, not value and ending of the tag. So edit your meta tag:

<meta charset="utf-8" />

You end your HTML document badly, too. So your closing tag (on the last line) should be </html>, because it's HTML, not HTLM.
And you have no content in the body, do not you want to add anything there? :)

Reply  +1 10. May 0:45
Don't be silly, smile!
Avatar
Adewale Damilola:19. May 8:59

<Doctype! html>
<html lang="eng">
<head>
<meta chaset="utf-8"/>
<title>my first website</title>
</head>
<body>
<h1>Hello world</h1>
<p>definion of my site<p>
</body>
</html>
</body>

 
Reply 19. May 8:59
Avatar
David Capka
ICT.social team
Avatar
Replies to Adewale Damilola
David Capka:19. May 17:30

You have several errors in your code, compare it with the sample code in the lesson and try to correct them.

Reply  +1 19. May 17:30
You can walk through a storm and feel the wind but you know you are not the wind.
Avatar
FRANCIS ADU - NYARKO:7. June 9:14

<html>
<head>

<title> http://new it.com.gh </title >

</head>
<body>
<h1> PERSONAL INFORMATION </h1>
My name is Francis Adu - Nyarko. A student of GTUC located in Ghana, West Africa

</body>
</html>

 
Reply 7. June 9:14
To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

10 messages from 26 displayed. Show all