Beware of HTML Deprecated Code
One of our assignments this week was to create a web page. Since I had worked on a library website, and on other websites I thought that the assignment might be an easy one. However, it was not. Some HTML code such as <p align=left> text</p> have been deprecated. The align=left code will no longer work with paragraphs for HTML. However, CSS has a solution. I found a way to align paragraphs at http://www.w3schools.com/css/css_syntax.asp
I used the W3 Schools tutorial at http:// www.w3schools.com but this does not have the latest information on deprecated codes. Some guidelines on deprecated code can be found at http://www.codehelp.co.uk/html/deprecated.html
Next I decided to do a CSS layout as I was familiar with HTML and needed a challenge! W3c Schools has a good section on CSS and I benefited from looking at the section on the float property at http://www.w3schools.com/css/css_float.asp as I did from other sections on CSS layout such as positioning.
I avoided using the CSS box model as this has created problems with Internet Explorer bro
wsers. There is a fix but all I needed was a simple CSS layout that would work with most browsers and that I could use efficiently without any delays caused by testing the box model and inserting the code fix.
This website on CSS layout was excellent. See http://www.subcide.com/articles/creating-a-css-layout-from-scratch/ It gave me some great ideas on layout and took me step by step through creating a specific website with CSS layout. Screenshots of the code from an editor were extremely helpful. I do not like seeing a line of isolated code without the context of the code. I also referred to http://learnlayout.com/toc.html which explains the margin: 0 auto; code at http://learnlayout.com/margin-auto.html
My website worked well when I created it using HTML Kit and used the Mozilla Firefox browser. (You can get a free version of HTML kit software at http://www.htmlkit.com/ ) HTML Kit has a code validator called Tidy which I have used to clean up code.
I have not tested the site on other browsers. However, the following websites have good reviews of browser testing tools.
Another VMWare Installation
Most developers when working with websites have a production site and public site. Developers use the practice site to test code and to avoid crashing or corrupting the public site. The two systems have exactly the same configuration and coding but it is much easier to change code on the practice site and then restore this site without any site downtime and loss of access.
Our instructor suggested installing another VMWare system so that we could practice on the previous installation. I downloaded the iso image file for the Ubuntu 12.04 LTS 32 bit version from http://www.ubuntu.com The approximately 700 MBfile took about an hour to download.
I then tested the installation of the Ubuntu Server for connectivity by pinging the Wikipedia website and everything worked well. Next step was to download packages for installation including the LAMP (See http://en.wikipedia.org/wiki/LAMP/_(software _bundle) open source software package. This worked well However, grabbing any security updates and patches by using $ sudo aptitude safe-upgrade took some time, about two hours on my machine.
Bridged Mode and IP Configuration
Finally, I had to configure the bridged mode on VM, configure a fixed IP address using $ sudo nano /etc/network/interfaces to edit the interfaces file and add the fixed IP address. When I tested the new IP using the ping utility it worked!
Hosts File in Windows 8
The last step was to configure the HOSTS file in Windows 8 so that I could put in the server name instead of a list of numbers in my browser. This was tricky as I had to find the details for running Notepad as admin in Windows 8. This website helped http://www.howtogeek.com/122404/how-to-block-websites-in-windows-8s-hosts-file/ See the section on editing your Hosts file. The editing worked so I can now access my website by just typing in the name.
- What language do you need to know? (codecademy.com)
- Html & Css (ariasondigitaljournalims.wordpress.com)
- Easy CSS3 & HTML 5 Code Generators (webdesignerstech.wordpress.com)
- CSS 3 in Easy Steps (i-programmer.info)