How to create a website?
Forget about technical and academic views. We go online everyday. We can start at homepage of a website and explore thousands of its pages. That’s it.
A website is a collection of many webpages.
__A simple & happy Mind
So if you want to create a website, just start it simply by learning how to create a single webpage.
How to create a webpage?
It’s pretty much like how a file
named something like fountain.docx
can be
opened by Microsoft Word
or LibreOffice Writer.
There’s a specific type of document which is preferred by
Web Browsers
called HTML document
and the document’s filename looks like this: fountain.html
A webpage is nothing but a text document which can be opened by web browsers.
__A simple & happy Mind
HTML documents can be created using a simple text editor like Notepad or a similar application. Let’s create one:
- Open your Notepad.
- Put there some nice words.
- Save file as
yoursite.html
- Open the document using your web browser.
Screenshot:
That’s it. You’ve created a webpage. And if you put this webpage somewhere on the internet that people can reach it, then you have your very first website.
I’ve found Github Pages is totally free and
excellent. You can take a couple of minutes to publish your simple website then
come back here to continue our tutorial.
Go for it.
Free is good.
__A simple & happy Mind
How to add images, buttons, etc…?
As you see that web browsers are excellent presenters. We can tell them to show any kind of contents. But, in order to talk to them, we have to speak their language. They speak HTML, a simplified and easier-to-learn version of English.
HTML is just a simplified version of English.
__A simple & happy Mind
Let’s change our simple webpage a little bit. We’re gonna put there a heading
,
a paragraph
and a button
:
- Copy/Paste the text below into your HTML document.
- Save file again.
- Refresh your web browser.
Sample code:
Screenshot:
That is HTML!
We simply surround everything with couples of tags
and web browsers can somehow
understand what we want them to present.
You may notice that every HTML tag
has its own name that describes the enclosed content:
button
is clearly to tell that we want a button to show up.p
stands for paragraph.h1
means heading level 1.
And there are various HTML tags which allow us to put anything on our website. We just need to try them one by one in an HTML document and refresh web browser to know their uses.
Learning HTML is just about trying some new tags and refreshing web browser.
__A simple & happy Mind
But… typing those angle brackets <>
and repeated tag names is a boring
task.
How to have fun doing a boring task?
You know, we’re living in a magical
world. Great people keep sharing free
and useful stuff to make life easier. I’ve found another free and excellent
thing
created by Github - the Atom Code Editor:
- One click to download.
- Another one to install.
- Then we can write HTML like a
magician
(not a coder).
Free is beyond good.
__A simple & happy Mind
Take a couple of minutes to get Atom installed on your
computer then we will see him
in action. The word Atom
means actor
, doesn’t it? :D
Once you have Atom ready at your hand… there’s another important thing
needed to be done before we go to the our next tutorial: It’s
Music!
Don’t rush anything. Breath and go slowly.
Wish you peace and joy, buddy.
__A simple & happy Mind