HTML & CSS
Wednesday, October 22, 2008 6:23 pm- This post is part of a series I am writing for a class on New Media. Some technical explanations may seem unneeded or lengthy, but I am writing for the benefit of a very intelligent but less technical audience.
HTML and CSS are the presentation languages of the web. A programmer may build an application in Python or Java, or make their website more beautiful or fun using Javascript, but ultimately all that these languages do is allow for abstracted, automated editing of a page’s HTML and CSS.
HTML
HTML, or Hypertext Markup Language, started as the sole language for making a website using Tim Berners-Lee’s WWW system, the system that became the web as we know it today; when you made a page on the net, you wrote HTML to define the content, layout, and design of the page. Note that HTML is not a programming language, but a markup language–you use it to describe how something should look, and the computer interprets it and renders a page onto your screen. Wikipedia says it best: HTML “provides a means to describe the structure of text-based information in a document — by denoting certain text as links, headings, paragraphs, lists, and so on…”
Making a well-designed layout for a webpage was difficult because the only way to position elements such as images and text was to place them into tables with hidden borders. As well, much of the HTML code was redundant. There was no way to write one line that made every single link bold and green; you had to specify attributes of page elements individually for each element. To make a single link bold and green, you would write it as <strong><a href="http://woot.com" color="green">Woot</a></strong>. Please note that the use of the color attribute is deprecated; style should be used instead, but I’m using the old-fashioned example on purpose.
Edit: To clarify, the more important reason not to use tables for layout is that if you do, you are essentially marking all of your content as tabular data when it is not, thus making life harder on search engines. (Thank you: http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/)
CSS
In 1996 CSS, or Cascading Style Sheets, was unleashed upon the web (although full support in the major browsers took another 3-4 years). CSS allows for the separation of form and content in web design. That is, you can write the content of your webpage then structure it using HTML, and then define the actual layout and colors and font and what links do when your mouse passes over them using CSS. Wikipedia always says it best: CSS is “used to describe the presentation of a document written in a markup language” such as HTML.
Now if you wanted all links to be green and bold, it only took one CSS statement ( a{color: green; font-weight: bold;} ) (note how I don’t even need to wrap all of my HTML links in the <strong> tag, I just use CSS). Web design became much easier because instead of structuring the page using tables, CSS could be used to position page elements either relative to the edges of the window or other elements, or absolutely using coordinates on the page. More complex designs became possible, and webpage maintenance easier.
Standards
Today, as always, the W3C, the World Wide Wide Consortium, manages these two languages, as well as the varied ecosystem of dialects that have sprung out of HTML such as XML and all other technical standards related to the web. XML is Extensible Markup Language, and it allows people to make their own languages with their own tags. Major use example: RSS and podcasting.
Tags
As you may already know, HTML is written as a collection of tags. For example, all HTML pages start with the <html> tag and end with </html>. All tags that “open” a statement are written as <tag> and all that close it are written as </tag>. With the exception of a few self-closing tags such as </ br> (which makes horizontal rules), always close your tags!
When you write posts using WordPress, you can always switch between the visual editor and HTML editor. All that the visual editor does is translate your clicks and words into HTML. If you do try the HTML editor, it works the same way, but you can see the code changes your actions make. The tags you will find most useful are the <a> tag, which is for links (a standing for anchor), the <p> tag, which denotes a paragraph, the <h1>–<h6> tags, which allow for headers to be inserted into a page, and the <ul> and <ol> tags, which allow for bulleted and ordered lists (and don’t forget your <li> tag too!).
The W3C has an excellent HTML primer that will do far better than I ever could at teaching HTML.
The Future
To me, the best feature coming out of the W3C’s work is the <canvas> tag. This tag allows for animations like those made in Adobe’s proprietary Flash software and played in Adobe’s proprietary Flash player to be done using open standards and tools.
