HTML5 CSS3 JavaScript logo

How to make a webpage

What is necessary for making webpage

  • First of all it is important to use logic and brain. All information system are very rational and thus easy to work with.
  • At start we will need any kind of PC which is running basic text editor (exp. Windows Notepad, TextEdit). Creating websites is possible nowadays even on mobile devices but this something we do not need to concern about now.
  • We need internet browser. All internet browsers are available free of charge. In long-term exist few very popular with huge market share:
    • Internet Explorer – icon of the blue round E. Default browser for Windows operating systems.
    • Chrome – icon of the multicolored ball. Browser provided by company Google.
    • Firefox – icon of the red fox. Browser provided by company Mozilla.
    • Opera – icon of the red letter O
    • Safari – icon of the compass. Default browser for iOS devices.
  • Internet connection is not necessary for making website but it is very desirable for quick learning and eventually fast development. Nobody expect you to know everything. And there is lot of information available on the Internet from which you can use as source. Thus having constant internet connection is very handy for quick learning.
  • It is good to have idea what you want to make.
  • Don’t try to do anything if you have not elementary knowledge of work with computer. Better said, you understand at least what is file, how to work with system files, what is system directory.

What is not necessary for making webpage

  • As was said earlier internet connection is not directly necessary for creating websites.
  • You do not need buying expensive licenses for complex code editors. There are plenty of free and simple editors for making websites.
  • You do not need to know how to program.
  • You do not need to pay anything for training or learning. Unless you decide you want to have own domain.

Two steps for creating first webpage

    1. Write webpage = source code saved in HTML file (occasionally with additional other files)
    2. Uploading webpage file on the Internet = copying webpage file on server.

In this article we will talk about first step, making webpage – writing its source code. At first, localy, on own discspace.

Webpage files

Internet webpage is file with file extension html or htm. It is nearly normal text file. Only difference is that text, images, video, all media etc. are formated in signs of HTML language called tags.

File with .html extension on local disk has own icon depicting that it is webpage. It can look like this:

How to open Webpage

  1. You can look at the webpage as page in browser – in such case you can not edit it
  2. or you open it as a text (exp. in Notes program), and you will see it’s source code  (source, code) and you can edit it. This is a way how pages are made.

How to make HTML file

    1. You can directly write your own source code in HTML language. Might look hard on first sight. But it is much easier than you think.
    2. Or you can make HTML file by HTML editor. (It is good for beginner to learn principles.)

WYSIWYG HTML editors

HTML editors are program designated for making webpages. For beginners are especially useful WYSIWYG editors – What You See Is What You Get – literally used edit webpage as it will be looking and does not bother by writing HTML source code.

In WYSIWYG editor you  can create webpages without knowledge of HTML language. You are normally writing paragraphs, insert images and make other common edits. WYSIWYG editor than save file on disk to file with html extension. Editor also automatically insert all necessary HTML tags into webpage itself.

To WYSIWYG editors belong Dreamweaver, FrontPage 2000 and few others. WYSIWYG editors has certain disadvantages (exp. quality and size of source code)  for which are not deployed.

You can reed more about advantages and disadvantages in article about WYSIWYG editors.

Accept WYSIWYG editors exist also structural editors, in which you can directly writing HTML code with possibility of program helping you (placing ending tags etc.)
Structural editors are: PSPad, Notepad++, jEdit, Code, Sublime Text, etc. and in case of emergency even simple Microsoft Notepad.

You can also use Word or Libre Office for writing webpages.

Writing own HTML code

Who wants to have full control  writes own HTML source code from begging in structural editor. She or he need to learn basic HTML tags. Learning HTML basics is fundamental because creating latter more complicated solutions in WYSIWYG editors is not possible.

This is example of basic HTML code structure:

If you will take this HTML code and open exp. Notepad, place it into editor and save on disk under name example.html you have made your first webpage. You can also open your newly created webpage in the browser.

Tutorial for beginners

How to make HTML file in Windows (one of many ways). (If something would not work, check our more complex tutorial).

    1. Create on your disk new folder exp. C:test and open it.
    2. Create new text file (right mouse click > New > Text Document)
    3. Rename it as webpage.html (and confirm extension change). File icon will change.
    4. Open file by double click. Blank page will be opened in browser.
    5. Return to folder and click by right click on newly created file – select Open in program. If Notepad is available, select it. If it is not available you need to find it. Empty text edit will open up.
    6. Now you can write text and add additional HTML tags. You can read more in article about HTML basics.
    7. Hit File > Save.
    8. Flip to opened browser and hit F5 (Refresh page).
    9. Check the differences.
    10. You can experiment like this infinitely.

For now your page is at your local disk. You can check article about how to copy webpage on server.

In file names used for internet never use diacritic and spaces! We recommend write all names lowercase.

Quickest way how to learn making webpages

I believe that the quickest way how to learn making webpages is to use combination of advantages of both kind of editors. :

  • Make webpage in WYSIWYG editor
  • Check webpage in browser
  • Analyse HTML code in structural editor. Edit the page and check what will happens.