by Marc_Laroche on March 24, 2017 - 3:20pm

How to do a web site


This process has for goal to show people how to create their own website page with the Hyper Text Marking Language (HTML) a computer language that translates by showing content in a web Page and a cascading style sheet (CSS) that decorates the HTML language. There was three main steps in the making process of a website, the plan and the mapping, the HTML tags or the skeleton and the important part the styling so everything looks good to the eyes of the visitors.


-         The plan

First of all, to have a good and workable website the programmer need to know how it is going to be looking and how the users are going to navigate in it. So he need a site mapping diagram just like the following (Figure 1). The site mapping works in a specific way, every square represents a page from the website and the line that connects each of them shows which page the users will be able to have access and from where… Next step will be starting the making.


-         The skeleton

In second step, the creator will need some material to allow him to do the task and have access to the website correctly. So a computer with either Sublime text or Notepad++ is needed and a web browser, for example Google Chrome, to process the page and translate it in a web site page. Once he is on one of the previously named programs he will need to create the HTML files by creating a page with the new button on the top bar, after he only need to save it as a “.HTML” but the name needs to be “index.HTML” because this is a standard. This file will be the first page of the web site. So now he need to write the tags that will allow the browser to read what he want to show on the page. So for the first one it is obligatory to start with the HTML one, this one will allow the content between it to be understood by the browser. The technician need to write it just like the following example, (Figure 2.1) the backslash signal the end of a tags. After this two important tags are needed the head and the body. Just like the human the site need them to work correctly. Place them inside the HTML tags. (Figure 2.2) Now that the base is done he can customize it so it looks how he want by adding maybe a paragraph or text with the “P” tags, so this one works just like all the other tags, the text between the “P” tags is going to shown (Figure 2.3). For the last instruction of the step, he will have to add a picture, but for that he need to put the picture and the “index.HTML” files in a folder named it whatever the technician has been asked to name it (Figure 3). Once this is done he will need to put it in the web page and for that he need the image tag (figure 2.4), but this one is special he will need to put the name of the picture and is extensions for this one it will be “.jpg” in the “href=” properties between the (“…”). (Figure 2.4)
Now he only need to style this file with a CSS file, by linking it with the following line (figure 2.6).


-         The make-up

For the last step, the programmer web will need to create a CSS file just like he did with the HTML file, but instead of being “index.HTML” it will be “style.css”. Inside the CSS file he will need to name the tags that he want to stylise. (Figure 4.1) Within the named tag there is a lot of style properties that he can give them but for the beginning he will only change the text color by using the color property (Figure 4.2), at the end of every tags called, he close the parenthesis and for the property by a coma and a dot.


For final note, there is only one thing that will make the future web site better and wonderful and it is by being hungry of knowledge, learning more and by trying new technics that you learned with the time, as my friend Pablo Picasso said: “I am always doing things I can’t do, that’s how I get to do them”.


It is a good text. It is easy to understand because it is well explain. For the skeleton step it would had been a good idea to separate it in two paragraphes; I get lost in the middle because it was to long. Good job !

Hello Marc.
You have a very interessting text. Your definitions are precise and describe appropriatly the words. Even if the subject is difficult to describe to a non-expert audience, you succeeded explaining your process so anyone can understand it. However there are some elements in your text that could be ameliorated. First, the capitalization of the title is not done following the rule because it is all in capital letters instead of a capital letter on the begining of every "important" word. Also, the verb "do" could be replaced by a stronger verb. The title could be change to "How to Create a Website". Second, words like "he" or "him" are used throughout the text. Those masculin pronouns could be replaced by more general pronouns. Next, the word "create" is used very ofthen. Lastly, some of the verbs at the 3rd persons singular such as "he need to write the tags that will allow the browser to read what he want to show on the page. So for the first one it is obligatory to start with the HTML" are not accorded. Overall, the text is clear and pleasant to read. I think if you change the title, use more general pronouns, use a thesaurus to obtain more variety in the words used and if you add "s" at the verbs in 3ps, the text would look even better.

Very interesting text. It is well explain and you give good examples, but it would have been easier to understand if you would have incorporate images. Also, for the skeleton, you could have summarize the informations to make it less difficult to read. Good work !

Hello Mark and thank you for your article. This process is very interesting and I plan to save it in my favorites because I feel It might be very helpful to me in the future. There is one thing that made your text a little difficult to read and it was the second step. It would have been easier to understand if it would have been separate in smaller steps. This problem aside I think you text is nicely construct.
Nice work!

Hi Marc,

I really enjoyed your article on many aspects: precise definitions, deep understanding of the programming part. It is easy to see that you are passionate about what you do ! Unfortunately, I would have liked to read more about the other steps; I felt like the focus was only on the programming part. Overall, great work, very interesting and well described.

It is a good text and it is also easy to understand even for someone like me who does not know anything about the subject before reading it. The definition is really precise, but maybe a picture could have helped to understand even more.

About the author

I am a student in Multimedia integration at College Jonquière, I am 18, I am passionate about computer and even more about web site.