User:Wcdsugpy/Open Source Learning
|
|
|
How to Create a Simple Web Page Using Cascading Style Sheets
Introduction
Cascading Style Sheets (CSS) is a new technology that can be used to design web pages without the use of tables for layout. In this lesson we will demonstrate how a CSS can be used to design a simple web page. While the ideas introduced are very simple and the layout of the page is alsosimple, CSS can be a powerful tool for laying out the web pages. The standard documentation on the CSS as a web authoring tool is available freely on the web site of the World Wide Web Consortium, http://www.w3c.org/.
Structure of a HTML File
The standard documentation on the Hypertext Markup Language (HTML) is freely available on the the website of the World Wide Web Consortium, http://www.w3c.org/. The HTML is a markup language that is used to convey information in a way that is readily understood by humans. The tool for viewing web pages is the web browser such as Firefox that that can be freely downloaded from the web site of the Mozilla Foundation.
The basic structure of a html document consist of the following keywords:
- html
- title
- head
- body
The above keywords are surrounded by the characters < and > to declare the opening of the tag and < / > to declare the closing. Thus the closing and ending tags in a html file appear as follows:
| <html>
<head> <title></title> </head> <body> </body> </html> |
Box 1 The basic structure of a html file
The title tag is used to declare the title of a page that is displayed in the web browser. The head tag is used to enclose other tags which convey further information on the contents and layout of a page. The actual contents of a page are contained in the body tag. The html tag indicates the beginning and the ending of a page.
Creating a HTML file
For our purpose we will use a text editor to create a html file since it contains texts. The kind of text editor will depend on the platform that you are using. On a Windows platform Notepad can be used while on a Linux platform several choices are available such as Gedit and Nano or even vi. So open your favourite text editor and type the following lines:
| <html>
<head> <title>A Simple Web Page Using CSS</title> </head> <body> <h1>Views on Open Source Knowledge</h1> </body> </html> |
Box 2 <h1> tag is now included in the HTML file
Saving the HTML file
A html file has the file extension .html (dot html) so let us save our file with the correct extension. Let us name the file as SimpleWebPage.html. If you are using Notepad in Windows, you have two choices to get the correct file extension.
- Enter SimpleWebPage.html in the File name: box and surround it with double quotes or
- Enter SimpleWebPage.html in the File name: box without double quotes. In the Save as type: box select All Files.
Let us save the file in the Desktop to find it easily. Since it is a html file the correct icon of the default browser will appear with the file name. For instance if you are using the Firefox browser you should see the Firefox icon appear with the name SimpleWebPage below the icon.
Viewing the HTML File
You can open the file by double-clicking on it with the left mouse button. Looking at the top of your browser window, you should see the title of the page shown as Simple Web Page Using CSS. In the main window you should see the words Views on Open Source Knowledge in big bold letters aligned left in the top left corner of the browser window. The background of the page is white. You have just created your first web page!
Without specifying anything about the size of the heading or the background of the page, the browser has applied the default size and background to the page. The tags that you see <h1> and </h1> in Box 2 are the HTML tags for level 1 heading. There are six such tags and they number from h1, h2, h3,h4,h5 and h6.
Viewing the Source Code of the HTML Page
At this point it is a useful exercise to view the source code of the page. Assuming that you are using the Firefox browser, click on the View menu and scroll down to the bottom of the menu and select Page Source. You should see the HTML code that you typed from Box 2 except that the tags appear in colour. You can in fact select all of the code, copy and paste it to another file for later use, keeping in mind the copyright laws that govern the use of the code in your own work!
Embedding the CSS
We are now going to apply some CSS rules to change the appearance of the page, a task that is called styling in the CSS terminology. These rules will be embedded in the same file as the HTML file.
So let us copy and paste the html code from Box 2 and include the CSS rules. The resulting code is shown in Box 3.
| <html>
<head> <title>A Simple Web Page Using CSS</title> <style type=”text/css”> <-- body { background: olive; color: white; font-family: arial; font-size:10px; } h1 { text-align: center; } --> </style> </head> <body> <h1>Views on Open Source Knowledge</h1> </body> </html> |
Box 3 Embedding the CSS in the HTML file
That chunk of code in bold shown in Box 3 is the embedded CSS which is responsible for changing the appearance of the page. From the CSS code the following properties of the page as contained in the body tag can be inferred:
| CSS Code | Meaning |
| body { } | Apply the CSS to the body tag |
| background-color: olive; | The background of the page is olive colour |
| color: white; | The colour of the font is white |
| font-family: Arial; | Use Arial font |
| font-size: 10px; | The font size is 10 pixels |
| h1 { } | Apply the rule to h1 tag |
| text-align: center; | Align the heading in the centre of the page |
Table 1: CSS codes and their meanings
Note the following:
- The US spelling of colour is used in CSS syntax i.e color
- The US spelling of centre is used in CSS syntax i.e center
Let us edit the SimpleWebPage.html file and insert the CSS code in the exact position as shown in Box 3. Because we are building the page gradually it is a good habit to save the file under a new name so let us save it as SimpleWebPage2.html. The new file can then be opened and viewed in the web browser. You can confirm that the code in Box 3 appears in the browser when you click on the View menu and select Page Source.
Note: If you are viewing the page using Firefox and Internet Explorer, you will notice the difference in the size of the font in each browser. The heading in the Firefox browser will appear to be smaller than in Internet Explorer. This is a browser issue which is another topic so we will not digress from our lesson.
Displaying the Rest of the Contents
So far our simple page has only a heading. Let us therefore type in some more content for the page as shown in bold in Box 4.
| <html>
<head> <title>A Simple Web Page Using CSS</title> <style type=”text/css”> <-- body { background: olive; color: white; font-family: arial; font-size:10px; } h1 { text-align: center; } --> </style> </head> <body> <h1>Views on Open Source Knowledge</h1> <p>The foundations of the Internet are deeply rooted in academic research. The principles of creation and sharing of knowledge are the very reasons why the Universities exist in the world today. To facilitate the exchange of information early researchers built primitive networks for the exchange of ideas thus overcoming the distance barriers. As knowledge grew so did the knowledging of networking grew. New devices appeared and man had to come up with rules for the devices to talk to one another. But it was always for the free exchange of information that the early fathers of the Internet toiled much. Commercilizing the Internet as it is today was not in the minds of the early researchers</p> <p>One of the greatest developments in the history of the Internet is the creation of the [http://www.fsf.org FreeSoftwareFoundation] which was founded by Richard Stallman in 1984. This body was established to make software available freely to those who need it. The FSF was later joined by the [http://www.gnu.org GNU] institute which sought to recreate the Unix environment and make it available for free to those who could not afford the expensive Unix workstations. The arrival of Linux in 1991 completed the vision Stallman had for the FSF since a Unix clone was now available for free.</p> </body> </html> |
Box 4. Two paragraphs have been added in the contents page.
Let us edit SimpleWebPage.html and insert the two paragraphs shown in Box 4. Again let us save the file with the name SimpleWebPage3.html. As before let us view the page the browser. As it appears the text size is too small to read and the alignment of the text is against the browser windows. So let us throw in some CSS rules to change the appearance of the paragraphs. The HTML code with the CSS rules to style the paragraphs is shown in Box 5.
The HTML tag for the opening a paragraph is <p> and the closing tag is </p>. While a closing tag is optional for a paragraph, it is a good practice in HTML authoring to open a tag and close it. Once more the CSS code to affect the appearance of the new page with the paragraphs is shown as bold in Box 5.
| <html>
<head> <title>A Simple Web Page Using CSS</title> <style type=”text/css”> <-- body { background: olive; color: white; font-family: arial; font-size:10px; } h1 { text-align: center; } p { margin: 10px; padding:10px; font-size: 16px; color: yellow; text-align: justify; } --> </style> </head> <body> <h1>Views on Open Source Knowledge</h1> <p>The foundations of the Internet are deeply rooted in academic research. The principles of creation and sharing of knowledge are the very reasons why the Universities exist in the world today. To facilitate the exchange of information early researchers built primitive networks for the exchange of ideas thus overcoming the distance barriers. As knowledge grew so did the knowledging of networking grew. New devices appeared and man had to come up with rules for the devices to talk to one another. But it was always for the free exchange of information that the early fathers of the Internet toiled much. Commercilizing the Internet as it is today was not in the minds of the early researchers</p> <p></onwiki>One of the greatest developments in the history of the Internet is the creation of the Free Software Foundation which was founded by Richard Stallman in 1984. This body was established to make software available freely to those who need it. The FSF was later joined by the GNU institute which sought to recreate the Unix environment and make it available for free to those who could not afford the expensive Unix workstations. The arrival of Linux in 1991 completed the vision </nowiki>Stallman had for the FSF since a Unix clone and was made available freely.</p> </body> </html> |
Box 5. CSS code to affect the appearance of the paragraph.
Once again let us edit the file SimpleWebPage3.html and insert the CSS code in bold in Box 5. And let us save the new file as SimpleWebPage4.html. When the new file is viewed in the browser we get a much improved page. The meaning of the tags used in Box 5 for the paragraphs are shown Table 2.
| CSS Rules for Paragraph | Meaning |
| p { } | Apply the rules to the paragraph |
| margin: 10px; | The margin of the paragraphs against the browser window |
| padding: 10px; | The amount of space between the start of the paragraphs and the margins |
| font-size: 16px; | Size of the font |
| color: yellow; | The colour of the text for the paragraph |
| text-align: justify; | The paragraphs are left and right justified |
Table 2: The CSS rules and their meanings as they apply to the paragraphs
We observe that the rules for the body do not apply to the paragraphs except for the font-family which is Arial. The text size in pixels had to be increased to 16 pixels so the text is easy to read.
What Have We Gained from the Use of CSS
The use of the CSS allows us to make a change to the page very quickly compared to the traditional HTML. In this lesson we used an embedded CSS to study the effect of the new rules. But the real power of cascading style sheets comes from linking them to a web page. The rules themselves are stored in an external file and making one change in a file can affect all the pages that use it. We will explore the external use of the CSS in the next article.
Conclusion
In this age of current technology one does not necessarily have to use a commercial software to build a simple web page. A simple text editor will do and the use of the cascading style sheets makes the creation of web pages a lot of fun and one can easily gain mastery of the concepts by looking at several of the resources that are available on the Internet.
About the Author
T Alfred Vahau is the Director of IT Services at the University of Papua New Guinea. He is an open source advocate at the University. He specializes in the Linux applications and their interoperability with the Windows operating system. Since his introduction to Linux in 1996 Alfred has gone on to explore the open source technology applications and embraces the LAMP project in finding solutions for the University. More about the Author
