HOW TO DO A WEB SITE
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”.