How to Build a Website: HTML Basics
This hub is from a series of hubs I'm writing called "How to Build a Website".
This is the second hub from this series, do not forget to read the first one
where I introduce the basics of the whole process of developing your first website.
In this hub I'm going to give you an introduction to the HTML language.
HTML (Hyper Text Markup Language) is the basic language to create a website. It
can also work together with languages like CSS, JavaScript, PHP and others to improve
you website and add extra features.
Now you can follow my instructions to get you first basic webpage working.
HTML works with tags. A tag is marked by < > and will define what you are
doing.
For example, if you want a new paragraph you start with <p> and finish
with </p>.
The code for Finishing tags is exactly the same as for the Opening one but with a / (forward slash), as you see in the example.
Don't forget to close every tag you open.
Let's write a basic HTML template. This is the code to use to always
start your pages:
<html>
<head><title></title></head>
<body>
</body>
</html>
If you just copy this code to a text editor software ( you can just use notepad
) and save the file as index.html you have your first page. Well, not really,
this is indeed a page but at the moment it is completely blank.
Whatever you want to display on your page will go inside the "body" tag.
Let's imagine you want to write "welcome to my first website". Here
is the code:
<html>
<head><title></title></head>
<body>
welcome to my first website
</body>
</html>
Again, if you just copy or type this code into a notepad file and save it as
index.html your file will be saved as an internet file and once you open it, you
will see a white page with the text "welcome to my first website" on
it.
If you have your own domain and your webserver (new hubs will be added soon
about these subjects) you can just copy this file into it and when somebody types
your URL (domain name) they will get exactly the same result as you see on
your computer when opening the internet file you just created.
Of course this is a very basic start. More hubs will follow with many more
steps for you to follow and keep learning about HTML.
For now I will finish with a sum up of the tags you just used.
<html> </html> - This opens and closes the html page. It is the
main tag that defines your page and your code. Everything within will be your
html code.
<head> </head> - This is your head tag. It is where you define the
topic and the connections to other files like JavaScript or CSS. Almost
everything relevant to the page, apart from content, goes in here.
<title></title> - This is the title tag. Everything you write
inside this tag will be displayed on the top bar of the browser (eg: Internet
Explorer) and will be the title of your page. Each individual page you create
on a website can have a different title. It always opens and closes inside the
"head" tag.
<body> </body> - This is the body tag. In here you add all your
content. Inside the body tag is where all your main code will be. Here you will be
able to add many extra tags, text, links, etc... In the previous example we
just added a sentence, and as you could see, it is displayed on your page as, and so
will be everything else you add.
Hope you enjoyed and learned something from this hub. More hubs will follow
that will complement this one.
