The first thing I do before starting to write the content of the page is to type in the document tags which are <$html>,<$head>,<$title>, and <$body> tags (every tag displayed is without the $ symbol) into the notepad. It is said that each HTML document should have these for tags because these tags will defined what type of document it is and also the major sections.
After inserting the document tags, the next step that I do is to type in the page title and start writing the body content of the page. The page title is typed right after the <$title> tags and ends with <$/title>, which is <$title>text<$/title>. While the start of the body content is at the bottom of the <$body> tag, for example,
<$body>
<$p> text
The <$p> tag indicates the start of a new paragraph.
In the process of writing the page content, My partner and I have decided to experiment with the font tags. Since there are many variables can be added or changes can be done in the font tags, I started by changing the font face and the font size of the welcome message in the page. This is how the code looks like <$font >welcome message<$/font>
after making some changes to the font. We previewed the result in the Mozilla Firefox web browser after saving the changes. Satisfied with the result of the changes that have been made, I continued to add some color and made some font face changes into my own introduction text.
After completing changing the font, I attached an image file on the bottom left hand side of my introduction text by using the <$img src="image location path"> code. To my surprised, the image displayed on the page is too large, so in order make it into a more comfortable viewing size, I have to re size the image by adding the "width" and "height" attributes into the image tag. Re sizing the imagine is not an easy task for me because sometimes the image re sized was too small while other times the image seems to look a bit blurry. Therefore, I have to patiently try out the best width and height for the image.
Moving on to the next step, I've opened up a blog on the http://www.blogger.com website. Since I've tried blogging before, most of the options in this blogging website is quite identitical to the one which I've used before, so I've no problem setting up the layout and renaming the blog title. After setting up the blog, I copied the link of the blog and paste it into the HTML hyperlink code, <$a href="website link">.
Done writing the code, I search for a web hosting site which is called http://www.webs.com to upload the image file and also the HTML source code. Before I stumble upon this website, my friend already searched for another web hosting site which was http://www.bravenet.com/webhosting/ but according to him this web hosting site is pretty confusing and hard to use, therefore I was assigned by my friend to find another web hosting site which was much user friendly. As soon as I've registered an account, I quickly locate the file manager and created an folder for the image that I wanted to upload. After successfully uploaded the image file, finding the the option to paste in the source that I've written was kinda tricky because the option is hidden under the "filename" tab which is located under the file manager upload box.
Finally, after pasting the source code and saved the settings the basic HTML web page was finally done. Other than that, I've also learned quite a number of things during the process of making this basic HTML page. One of if is when creating a HTML page using a notepad is not really practical because I have to save the file before I can view the output inside the Mozilla Firefox but this problem can be easily solved when I used the HTML builder which was one of the http://www.webs.com functions. The HTML builder have an option called "split mode" which enable me to view the output whenever I type in a HTML code.
So after the finishing the basic HTML page, I've learned that before writing a HTML page I should have plan out the arrangement of the site first. Also if I'm going to work on this assignment again I would like to add in some background layout and decoration into the page.
