I wanted to get a simple web page up on my hosted site, created by hand using a simple text editor; just a little project to learn the basics of xhtml and cascading style sheets. I’m a big advocate of the “learning-by-doing” mantra.
I had done some work in html many years ago, so I understood the concepts of markup languages and tagging. It took a couple of weeks working in the evening (sometimes the late evening), but I was able to get a simple page established at markstevens20.net.
The following resources were very helpful:
- Beginning Web Programming with HTML, XHTML, and CSS, 2nd edition by John Duckett, courtesy of the local public library.
- w3schools.com CSS tutorial
- http://www.edtechblog.org/ and many other talented css/xhtml/webdesign bloggers.
- The w3 consortium css page, official standards for all of the elements and properties completely documented.
and a couple Firefox plug-ins that helped with web design:
- Colorzilla (especially the eyedropper for converting colors to hex values)
- MeasureIt, a pixel ruler for measuring the size of elements.
I won’t try to explain xhtml & css in the post, but rather encourage those that are interested follow the links above and use almighty Google to find additional resources. However, I do want to share the work that I’ve done as an example. Here is a modified version on my homepage and it’s associated style sheet. I’ve changed the color scheme to allow the individual elements to be seen better. The text content is different too, but other than that, it is the same xhtml and css file. You can download the xhtml and css files here and experiment with them on your own home computer or use them as templates if you wish. The downloaded files have extensive comments (maybe too many?) to explain what each element is doing for the page.
Learning xhtml and css is cheap and easy. Free tutorrials are available on the web, free text editor software is available on all computers (such as Notepad/Wordpad in Windows), and you can view your work using a free web browser. If you choose to explore xhtml/css on your own, I hope the references on the page are helpful to you. Good luck with your endeavors! If you have found other xhtml/css sites helpful, please add them below as comments.