Formatting with CSS Styles

After last week's lecture it has been drummed into me that HTML is a structural language, and CSS is a style language. You can use CSS to specify the font, size, colour and alignment of text on the page. All of a sudden our web pages can be "spruced up".

CSS style elements can be embedded in the HTML file, or can be written in an external file. I think I prefer the latter, as it will keep my HTML code cleaner, and be easy to store all the style rules in one place.

I'm also interested in how you can set up alternate style sheets for different media (eg. screen, print, mobile). I will try to incorporate this into my design.

I have revised my student home page on the UTS server, and will be uploading the weekly practical exercises here. I figure that maintaining my own, albeit very basic, website will be a great way to practice my new skills, and for me to keep everything in one place (as I am working on my PC at home, and also using a USB stick at uni). Click here to check it out.

In light of the transition from XHTML to HTML5, I would like to share the following blogs that I have been reading this week:

HTML5 and the future of the Web
Tim Wright gives an overview of HTML5, and talks about some of the new features. Wright's first point is about the DOCTYPE descriptor, which is html and not html5 (2009). Apparantly this is because html5 would open Quirks Mode in IE6. I'm not completely sure what Quirks Mode is, but it seems to have something to do with backwards compatibility in the browser and you therefore lose some functionality. Anyway, I digress.

Wright mentions some of the new structural elements (such as header, nav, section), and also talks about the benefits of moving to HTML5. It is duly noted that there will be a transition period for programmers (hence, HTLM5 has some "built-in slack" to make it easier) and also the web (apparantly Safari is currently the best testing platform as it supports most of the new elements and application programming interfaces, otherwise known as API's). Read the article to find out more...

CSS code structure for HTML 5: some useful guidelines
I'm starting to feel familiar with the layout of HTML code, and feel that I need some help in knowing where to put things in my CSS file. Therefore, I recommend this post written by Antonio Lupetti, giving a light overview on "how to implement a well organised CSS code structure in view of introduction of HTML5" (2009).


References:
Lupetti, A. (2009), CSS code structure for HTML5: some useful guidelines, Woork blog, viewed 28 August 2009, http://woork.blogspot.com/2009/08/css-code-structure-for-html-5-some.html

Wright, T. (2009), HTML5 and the Future of the Web, Smashing Magazine, viewed 28 August 2009, http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/

Which technology?

In order to discuss the technologies that we are learning to use in this subject, I will be writing a series of blogs providing the background of each technology, how they were developed and where they are at today.

This post outlines the background of HTML and provides an overview the new elements that will be introduced in HTML 5. As a newcomer to web programming languages such as HTML, I do not have any concrete experience on the newest version of HTML, and cannot pass comment on the updates. However since it is going to become the new W3C standard I hope to utilise HTML 5 in my project, and by the end of the semester be able to pass judgment.

A brief history of HTML

HTML has been around for more than 10 years and has become the standard mark up language for building the structure of websites.

Brief history of web development standards:

• HTML 3.2 first published by the W3C (World Wide Web Consortium) in January 1997

• HTML 4 first published by the W3C in December 1997

• Cascading Style Sheets (CSS) first published by the W3C in December 1996

• XHTML 1.0 first published by the W3C in January 2000

• HTML 5 (working draft) published by the W3C in April 2009

Developers were encouraged to “...support the official HTML specifications as closely as possible, so that a web page written to standards would behave the same way across browsers”. (Castro 2007:17).

Originally HTML was used to define structure of the website as well as the page layout of a website. However, the introduction of Cascading Style Sheets (CSS) “brought new capabilities, in particular the ability to position elements on a web page with great precision” (Castro 2007:18). CSS is the “standard for defining the visual presentation for web pages (Grannell 2007:10). The combination of HTML and CSS gave more power and flexibility to web designers who were trying to improve the usability of bigger websites and shift away from the text based layout provided in original versions of HTML.

XHTML was published by the W3C in 2000 and was “a great improvement over HTML”. (Castro 2007:21). The development of XHTML “largely came about because of the inconsistent way that browsers displayed HTML (Grannell 2007:8). The syntax was a lot stricter, meaning you have to worry more about punctuation and closing tags. These changes were mainly due to the language being written in XML which requires that all elements have closed tags. The rigidity of XHTML provided a “stronger, more flexible, more powerful” platform (Castro 2007:21). Having said that, Grannell (2007) notes that XHTML has hard and fast rules which make it easier to learn.

Updating the standards

Work on HTML 5 began in 2004 by the WHATWG (Web Hypertext Application Technology Working Group). It is interesting to note that the group was formed by members from Apple, Mozilla and Opera. Microsoft was invited, but declined. The W3C has formed a working group to further develop and publish HTML 5, which will replace HTML 4 and XHTML. A working draft was published in December 2008, and some organisations such as Google, Apple and Mozilla are starting to use HTML 5. I wonder when Microsoft will join the bandwagon.... it will certainly make life easier for the developers.

References:

Castro, E. 2007, HTML, XHTML & CSS, 6^th edn, Peachpit Press, Berkeley CA

Harold, E. 2007, New Elements in HTML 5, IBM Technical Library, viewed 23 August 2009, http://www.ibm.com/developerworks/library/x-html5/?ca=dgr-lnxw01NewHTML

Grannell, C. 2007, The Essential Guide to CSS and HTML Web Design, Appress, New York NY

Shankland, S. 2009, Microsoft joins HTML 5 fray in earnest, CNET, viewed 23 August 2009, http://news.cnet.com/8301-1001_3-10305822-92.html

HTML, Wikipedia, viewed 23 August 2009, http://en.wikipedia.org/wiki/HTML

W3C, viewed 23 August 2009, http://www.w3.org

Final Learning Proposal

Here is my Final Learning Proposal

http://www-student.it.uts.edu.au/~twade/learningproposal/

Week 4 Prac

I have created a couple of PHP files. It seems fairly logical, but I expect it will be hard to learn all the syntax.

Just to summarise the practical exercise:

Step 1 - Open the file in Firefox
When I opened the date.php file in Firefox, I was presented with a blank screen. Figured this was because I was viewing the file on my PC, which doesn't have a web server.

Step 2 - View the file on my web server
I copied date.php onto my web server (using FileZilla), and I could then view the page in Firefox. I presume this is because I was using the web server (Apache) to view the file and process the PHP request.

Step 3 - Amend the date format
I had a quick look at the date syntax on the PHP Manual, and came across the different date format syntax that is available; and was able to change the syntax in the file to change the way the date was displayed on the screen.

Tonight I was using my UTS web server, which supports PHP. I am also using 000webhost.com to host my personal site, and read that they support PHP and MySQL.


References:
http://www.php.net/manual/en/index.php
http://www.000webhost.com

Week 3

Here is a highlight what I discovered in class this week:

• Markup Languages started out to help printers with document layout, and have now developed into computer programming languages such as HTML (Hypertext Markup Language)
• HTML was created by Tim Berners-Lee in 1990, and is now an industry standard open source programming language
• HTML is written in plain text editors (such as Notepad++) and also WYSIWYG applications (such as DreamWeaver or Front Page). Text editors produce cleaner html files, and we should use these during the course.
• HTML has opening tags and closing tags. A full list of HTML tags are available online (www.w3schools.com). Most tags enclose some text, but some standalonge
  
• It's important to use Relative links, so the website can be transported from the developer's PC up to the web server - - - and still work!
• HTML is intended to be used as a structure language, not as a display language. We can use CSS for style and layout (ie. to control the appearance)

Learning Proposal

Here is the first draft of my Learning Proposal

http://www-student.it.uts.edu.au/~twade/LearningProposal.html

Today's thoughts...

Since we are starting to learn HTML tags, I thought I would share something about the iframe tag.

Faking impressions
I went along to an AIMIA seminar this morning to hear Ben Edelman speak about Advertisers Rights and Consumer Privacy. Ben mostly spoke about the issues with online advertising and what should be done to define advertiser's rights. One thing I was surprised to hear about is that some "evil people" are faking the number of impressions for banner ads using the an HTML tag similar to this.

iframe width=0 height=0 src='www.website.com/page.html'

nb. I have purposely excluded the opening "<" and closing ">" as I was having problems posting into Blogger

This would normally open another frame showing the website, but in this case the height and width have been set to zero, which means it will be invisible to the user. However the client would be paying for the impression of their page/banner ad

Hmmm... not so nice!

Week 2

Here is my first attempt at coding HTML.

http://www-student.it.uts.edu.au/~twade/index.html

I am using FileZilla as my FTP application, and Notepad++ as my HTML editor. I initially had some trouble viewing the page (several 403 and 404 errors) and had to change the User Permissions.

Acknowledgements to the HTML tutorial on the W3C website.

Need to find out more about the folder structure on the server. Does anyone know why we save the *.html files in the "public_html" directory, but don't have to refer to the directory in the URL.

Hoping the mist will rise soon...