Whether you’ve had a web page for years or are just now considering hanging your online shingle, the tools of the trade — and their acronyms — can be confusing. HTML, CSS, JavaScript, AJAX, PHP and MySQL are some of the technologies we use every day to build successful websites for our clients. Let’s take a brief look at what they are and why we use them. This is the first of a three-part series where I’ll introduce you to a pair of technologies in each installment.
HTML and CSS
Let’s start with the web browser: the window through which customers view your products and services. It understands how to layout and display information using two of the above technologies: HTML and CSS. While it also understands JavaScript, as a means to manipulate the information it displays, I’ll leave this tool for the next installment.
The information a web browser displays typically comes from a web page, usually an HTML file or a program that generates an HTML file. Even if your “pages” have the extension .php or .asp, they are generating HTML content that web browsers can display. The HTML file gives directions to the web browser that define the structure, content and presentation of a given page. These directions come in the form of tags, basically an identifier or label inside of angled-brackets. Many tags come in pairs that define the beginning and end of something, as well as the actual content that the tag is modifying. For example: <h1>My Title</h1>. The h1 tag is an example of page structure and the text within the h1 tags can be considered page content. Other structural elements of a page include paragraphs, lists, tables, regions, etc — anything that defines areas where content can go.
How does content inside the h1 tags appear on the screen? How information appears on the screen — its presentation — is usually separate from the structure and content of the page. Whether the header is 24pt Times in green or 12pt Arial blue doesn’t change the content or structure of the header. It will still look like <h1>My Title</h1> to the web browser. In the past, presentation information, such as font, size and color, were included inside the HTML file, but this made it difficult to maintain the file over time. It’s time to introduce you to CSS.
While HTML can contain presentation or style information about its content and structure, your web browser also uses CSS to alter the presentation of the HTML.CSS, either inside of an HTML page or existing in its own .css file, defines the styles for structural and content elements in an efficient and maintainable way. For example, let’s say that you wanted all your paragraphs to use 14pt Italic Arial and all of your headings to use 24pt bold Times New Roman; to do this only in HTML would mean that you would have to tell each paragraph how to display itself and each heading how to display itself. If you wanted to make a change, you’d have to change the font in each location in the file … and probably across many files. With CSS, you could define how paragraphs and headings look across your entire site without touching any of the HTML code, and change them just as easily.
Next time, I’ll talk about how web browsers use JavaScript to both modify and add interactivity to web pages.
HTML — Hypertext Markup Language
http://www.w3.org/TR/html401/
http://www.w3schools.com/html/
CSS — Cascading Style Sheets
http://www.w3.org/Style/CSS/
http://www.w3schools.com/css/