Technology Defined Part 3: Languages

HTML and CSS are acronyms thrown around constantly in the world of web development, and for good reason. They form the foundation of virtually all Internet sites. CSS is the relative newcomer, having been around since 1996 compared to HTML’s 1980s.

HTML and CSS are types of languages, and once you understand the basics of them, you’ll understand the basics of what a language is.

What is HTML?

HTML stands for HyperText Markup Language. It’s a type of computer code that is read by web browsers and parsed into the websites we see. With most web browser, you can click around in the toolbars until you find a “View Source” option. Clicking that will bring up a complicated page full of code enclosed in <> brackets. It’s a mix of letters and numbers, each composing a tag. Each tag has a function — “a href” is the link code, for example, and “strong” formats text into bold.

Screen Shot 2013-08-22 at 3.41.20 PM

 

 

 

 

 

 

 

 

The problem with websites programmed entirely in HTML is the tedious process of changing the page. Before the days of graphical editors, before the days of automatic content updates, everything had to be done by hand. New content needed to be formatted in paragraph tags, the font and color embedded in the code along the way. If the website undergoes a major upgrade that changes the font, font size and color of all the text, every page needs to be edited by hand. You can imagine just how much work that is.

The solution to this problem was the invention and introduction of CSS.

What is CSS?

CSS stands for Cascading Style Sheets. These are small documents set aside from the main documents of a webpage. They contain code of their own, in a different language from HTML. This code defines classes, or types of content. For example, it might define what a Header is, what a Link is, and what basic Content is. For each of these classes, it lists attributes. These attributes will be things like font color, font size, font family and other such general attributes.

Screen Shot 2013-08-22 at 3.45.27 PM

 

 

 

 

 

 

 

 

 

 

CSS and HTML work together to form a complete webpage. The HTML document now no longer contains any formatting information. Viewed without CSS, the HTML document will be anything from a functional skeleton of a website without formatting, to a jumbled mess of text, depending on how much formatting is left to the CSS. All of the formatting tags, like “strong”, font colors and background colors are removed. In their place, the HTML document has a single line pointing at a specific CSS document on the web server.

HTML and CSS Working Together

The formatting information that has been stripped from the HTML document is now contained in the CSS document. However, unlike in the HTML document, the CSS file only needs to define each class and attribute once. With pure HTML, every header needs to have the code for font family, size and color all contained within it. To change the font color of every header in the website, the coder would need to manually find and replace every instance. If they didn’t like the change, they would need to do it all again to fix it.

With CSS, all the coder needs to do is change the color listed by the class Header, and every instance of the header in the document changes. This makes it far easier to update styles for an entire website through manipulating just one document.

Without HTML and CSS it’s nearly impossible to build a modern website. Even so, many web developers have little personal knowledge of the inner workings of these two types of code. Modern web creation tools like Dreamweaver allow you to format a page as you want it to look and reads the code to display it properly in a hidden back-end. Even hidden, HTML and CSS are the building blocks on which the Internet is formed.

In Conclusion

Understanding the basics of how HTML and CSS work helps with the confusion languages might bring. We hope you get a sense of what languages are all about and how we use them here at Digital Trike to build websites and other neat tools and apps!