HTML, CSS & Javascript || How do they all work together?

Have you ever wondered what technology powers the pages on the internet? HTML, CSS and Javascript are prevalent on the most websites on the internet  even popular websites including Facebook, Google, Amazon, and Youtube. Now a common misconception that people make is to categorize HTML and CSS as programming languages but in reality they are just page structure and style information. To briefly understand HTML and CSS can be compared to the human body; HTML is like the skeletal and muscle structure while CSS is the skin on that makes everything look aesthetically appealing. Both these together not only make it possible to see pictures on a website, have multiple pages on a website, but it also provides a way to change the user experience and feel of the website. HTML is able to be enhanced by CSS for presentation, formatting, layout and Javascript to control the behavior of different elements.

What is HTML, CSS & Javascript?

 

HTML

HTML is the main ingredient of every web page, regardless the complexity of a site or number of technologies involved. It’s a necessary skill for any web professional. It’s the starting point for anyone learning how to create content for the web. HTML is an acronym that stands for “HyperText Markup Language.” The “markup language” part means that, rather than being a programming language that uses a programming language to perform functions, it uses tags to identify content; tags are represented by opening (<>) and closing () tags throughout the document. HTML includes all the headers, words (or paragraphs), images, links, and referencing documents of other technologies such as CSS and Javascript to utilize them. All the content within a website is stored within the ” tag” of the HTML document and the reference to the other technologies are used within the ” tag” of the document.

A very basic document should look as such:

[html] <!DOCTYPE html>

<html>

<head>  <!–Defines information about the document –>

<title>This is a title </title>  <!–This is a title shows up on the tab name on the browser–>

stylesheet” type=”text/css” href=”theme.css”>  
</head>
<body>  <!– Defines the document’s body –>

<h1>My First Heading</h1> <!– This is a header/title that can be seen within the document –>

<p>My first paragraph.</p> <!– This tag that declares a paragraph within the document –>

</body> <!– closing body tag –>
</html> <!– closing tag to document type –>
[/html]

 

CSS

As seen from the example above I made the document link to the css file document. CSS stands for Cascading Style Sheets; what these sheets do is manipulate the HTML document with color, formatting and make it “presentation worthy” because let’s face it– it’s not the early 1990s where we are limited to just using HTML to create a web page. CSS is usually manipulating elements that are separated by “div tags” which is a section of a document and given a ID or class name such as “wrapper”, “header”, “left-column”, “right-column” and “footer.” This is important because it makes a way to work on specific parts of the document at a time and makes it easier for editing content in the future when revisiting the code.

 

A common body html document that would coincide with a CSS document is this:

[html] <body>
<div id=”wrapper” class=”clearfix” >
<div id=”header”>
<h1>This is a header</h1>
</div>
<div id=”left-column”></div>
<div id=”right-column”></div>
<div id=”footer”></div>
</div>
</body>

[/html]

The CSS document that would be linked to this HTML document would look like this:

[css]

/*modifying all body and html elements*/
body, html {
height: 100%;
}

/*Modifying all div elements within the HTML document*/
div {
border: 1px #c00 solid;
height: 100px;
margin: 10px;
}

/* Modifying the outer part of the block model */

#wrapper {
overflow: auto;
height: 100%;
width: 100%;
background-color: #aaa;
}

/*modifying the element: “header”*/
#header {
background-color: #bbb;
height: 10%;

}

/* modifying the element: “left-column” */
#left-column {
background-color: #ccc;
height: 80%;
width: 70%;
float: left;
}

/* modifying the element: “right-column” */
#right-column {
background-color: #ddd;
height: 80%;
width: 30%;
float: left;
}

/*modifying the element: “footer”*
#footer {
background-color: #eee;
height: 10%;
clear: both;
}

[/css]

Javascript

JavaScript is most commonly used as a client side scripting language. This means that JavaScript code is written into an HTML page. When a user requests an HTML page with JavaScript in it, the script is sent to the browser and it’s up to the browser to do something with it. The fact that the script is in the HTML page means that your scripts can be seen and copied by whoever views your page. Nonetheless, to my mind this openness is a great advantage, because the flip side is that you can view, study and use any JavaScript you encounter on the WWW. JavaScript can be used in other contexts than a Web browser. Netscape created server-side JavaScript as a CGI-language that can do roughly the same as Perl or ASP. There is no reason why JavaScript couldn’t be used to write real, complex programs. However, this site exclusively deals with the use of JavaScript in web browsers.

To integrate Javascript within an HTML document you need script tags within the head or the body of the document depending on what you are trying to accomplish with the document.

It looks like this within the HTML document (within the head or body of the HTML document):

[js] <script>

// This is referencing the Javascript document in the HTML document to use “My First Javascript” when the webpage is launched
document.getElementById(“demo”).innerHTML = “My First JavaScript”;

</script>

[/js]

 

 

Follow jeremy.redkey:
Hello I'm a intern at Philoveracity and I write blogs on the website about different subjects on topics I've learned throughout my internship at Philoveracity. I enjoy drinking coffee often, long walks on the beach and learning about computer technologies.

Leave a Reply

Your email address will not be published. Required fields are marked *