Lesson 1 – How To Create A Website

Welcome to the series “Self-Taught Web Programming Naturally”. The tutorial series in this series was created with the purpose of sharing the author’s knowledge and experience of self-studying web programming with the initial context of being a web user, wanting to create a website, and then… learn web programming.

So if you know anyone who wants to learn web programming with such a natural background, please help me share these tutorials with those friends. Because maybe these articles can be of some help to those of you who have the same starting point as me: Don’t know much about computers, Never wrote code, Not good at math, Not good at English, … but know how to use Google Search , Google Translate, and basic office computer software such as word processing, spreadsheet making, etc…

So we don’t need to prepare anything in advance?

To start learning web programming? Yes. As I listed at the end of the paragraph above, there is Google Search, Google Translate, and… a little basic computer skills. But those are only “necessary conditions”. The most important thing that you need to prepare is a spirit of willingness to learn new knowledge and put down any preconceptions that you have ever had about learning to code. And this is the “enough condition” for us to start the journey of self-learning web programming that I want to take you along with this series of articles. You’re ready, aren’t you? So shall we begin?

Uhh. So how to create a website?

Let’s put aside any questions about technical or academic factors to create a website. We are online and use websites every day such as reading news, blogging (diary), etc. We can start from any single page of any website such as the homepage of  Viblo , and then you can view other single pages such as tutorials, quizzes, etc. That’s it.

A website can be simply understood as a collection of single web pages located somewhere on the internet that can be opened and viewed by anyone._Một người sử dụng máy tính

So, to learn how to create a website, we can simply start with learning how to create a “single website” as mentioned.

How to create a single website?

A web browser – the software that we use to access the web every day – is basically a document browser that helps us to retrieve and present document files which are single web pages posted download it somewhere on the internet.

It is quite similar to the case of a document file named trang-don.docx can be opened and viewed by software Microsoft Word hay LibreOffice Writer – Web browsers are designed specifically to present special document files called HTML text files, and these files are named in the form trang-don.html.

A single web page is just a text file that can be opened and presented by web browsers.

_A computer user

HTML files can be created using a simple text editor such as Notepad or a similar application. Try creating an HTML file right on the computer you are using:

• First, open the Notepad application.
• Type in something about a few words.
• Save the file with the name trang-don-cua-toi.html.
• Then double click to open the saved file.

Screenshots

And that’s it, you’ve just created a single website. And if you put this single website somewhere on the internet that people can open it, you’ve got your first website.

You can try renaming your single site to index.html and upload it for free Github Pages so people can see your single website now. That only takes a few minutes. But then remember to come back here to continue our series.

How to add images, buttons, etc… ?

As you know, web browsers are great document browsing software. We can completely “get” web browsers to display any type of content we want. However, in order to get web browsers to do what we want, we need to speak the language that web browsers prefer – HTML, a simple markup language.

HTML is just a simple language, designed to help us talk to web browsers.

_A computer user

Let’s try changing the content of our single web page a bit. This time we’ll put it there 01 title, 01 text, and 01 button:

• Copy/Paste the following into your single web page.
• Save the file again with the given name index.html.
• Refresh Tab that opens that single page in your web browser.

index.html

Screenshots

That is HTML.

We simply surround the content chunks with pairs of card HTML and somehow web browsers can understand what we want to display what.

• button clearly means a button press.
• p is the symbol to mark 1 paragraph, ie 1 piece of text content.
• h1 which means that heading level 1, single site level 1 header.

There are also many other pre-designed HTML tags that we can put any content into a web page. What we need to do is just try to go through each HTML tag one at a time and refresh the Tab on the web browser to know how to use it.

Learning HTML is simply trying out HTML tags and refreshing Tabs on a web browser.

_A computer user

However, having to type the symbols <> over and over again doesn’t seem very interesting.

How to learn HTML more conveniently?

You know, we live in a friendly and open world. Good programmers always try to share very useful free tools to help the community. You can download the code editor Atom – Another wonderful and completely free gift of Github.

• 01 click to download.
• 01 female click to install.
• And then we’ll be able to code like a magician (rather than a coder).

Take a few minutes to install Atom on the computer you are using and we will see together how great the application is.