Web Building Blocks
Modern websites are complex beasts combining multiple technologies to create visually appealing, engaging experiences.
However, at its core, there are three acronyms that represent the core of every web page:
HTML
CSS
Javascript.
Let's explain these basic building blocks of the web!
HTML
Essentially, a web page is just a text file full of basic characters (letters, digits, and symbols). In fact, you can create a web page by putting some text in a file using Notepad or TextEdit. When you view the file in your browser, you will see the words but you will immediately notice something is missing: structure!
HTML provides the structure for a web page letting
you organize your content into headings, paragraphs, and columns. HTML allows you to include images, audio, and video
in your page. And it allows you to connect pages through links. Without HTML, your page would be just text. It is
the structure that gives your text context and meaning.
differentiate bold text from italic text,
red text from green text,
and small text from large text. But more than these,
CSS
While structure is important (essential), it is style that provides a visual representation of the structure. For example, have a look a these to mini-pages. Both have the same "structure" but the first is totally devoid of any style.
Pugs are Cool
Do you like pugs? Of course you do! Everyone loves pubs. In fact, why don't you head over to my Pug Website?
Pugs are Cool
Do you like pugs? Of course you do! Everyone loves pubs. In fact, why don't you head over to my Pug Website?
Browsers have built-in styles that are designed to give a basic visual representation to the structure created by the HTML. However, to make your site "pop", you need to create your own style. Enter CSS...
CSS represent instructions for your browser on how to (usually) visally
represent items in your site. For example, if you wanted all of your primary headings (H1) to be green and all of
your links to be red, you would include the following in your CSS file:
h1 { color: green; }
a { color: red; }
Javascript
You can do a great deal to make your site informative and attractive through stucture (HTML) and style (CSS). But modern sites rely on Javascript to make the site visitors' experience even better.
Javascript is a coding language that allows you to add new behaviors to your site. These enhancements
can range from the simple (click me for an example) to the complex (click me for an example).
In fact, it is rare to find a site that does not use Javascript as an essential component to the site's functionality.
Web Applications (web apps) are websites that are designed to perform some task. For example, GMail is a web app to allow you to view your email. Twitter is a web app designed to reduce our conversations to 140 character chunks, and Facebook is a web app for your parents to waste time. They all rely on Javascript to create an experience similar to running a full software app.