Formatted content that is accessible via a browser qualifies as a website. Content, in this context, is anything visible for example; text, images, links, format and or behavior. In this article we explore how all these fit in each other to form a functional website that is accessible to the world.
Websites have content, styling and behavior. At the very least, it should have some content. Styling and behavior are not mandatory for a website to function. However, we need them the same way we do salt. Identity is in the appearance. The three elements are written in different programming languages. Depending on the size of the application, they may all lie in the same file or separated into different files which are then linked.
Some languages are simply better suited for some action over others. For content, HTML(Hyper-Text-Mark_up-Language) is the way go to. For styling CSS (Cascading-Style-Sheets) and JavaScript for behavior. Separating concerns like this is efficient as developers will not need to know everything around the ecosystem. Plus, specialization will most likely result in better outcomes as the team is segmented by strengths. Maintaining a project built this way is also easier.
What you read and see is placed using HTML. This language works by defining elements, where they start and end. Within those elements is where the content goes. So if I were writing a paragraph , I would define it by <p> </p>. ‘<>’ are tags. ‘p’ is HTML for ‘paragraph’. ‘<p>’ is start of a paragraph and </p> is the end of it.
<p>
<p>
This is a paragraph.
Anything placed within these tags is this paragraph’s content.
For another, I would need another set.
Anything placed within these tags is this paragraph’s content.
For another, I would need another set.
</p>
Next comes styling. Style is all you see that enhances how the content looks. Fonts, font-size. Text color and so much more. It is usually wise to have this file separate as this language is verbose on syntax. For example if I were to use the paragraph above for demonstration. Say I need the background green, the text color purple and the font size be 16pixels. I would;
<style>
<style>
.demo-paragraph{
background-color: green;
color: purple;
font-size: 16px;
}
</style>
<p class = ‘demo-paragraph’>
This is a paragraph.
Anything placed within these tags is this paragraph’s content.
For another, I would need another set.
Anything placed within these tags is this paragraph’s content.
For another, I would need another set.
</p>
CSS starts at ‘.demo-paragraph’. We only use the <style> if we are going to declare styling within a HTML document, like we are because it is easier to demonstrate. Notice that we link the CSS to HTML using (class = ‘demo-paragraph’). Now our styling can effect anything we attach it to. Whether it is another paragraph or another element all together.
To tie it all up, you can add some behavior. I don’t have anyone in mind who’d buy our purple and green styling but say we want the font enlarge upon click. Yes, click anywhere within our paragraph and the text, enlarges. This is where JavaScript shines. We can inject it into our document like so;
To tie it all up, you can add some behavior. I don’t have anyone in mind who’d buy our purple and green styling but say we want the font enlarge upon click. Yes, click anywhere within our paragraph and the text, enlarges. This is where JavaScript shines. We can inject it into our document like so;
<style>
.demo-paragraph{
background-color: green;
color: purple;
font-size: 16px;
}
</style>
<p id="demo-paragraph" class="demo-paragraph" onclick="getBigger()">
This is a paragraph.
Anything placed within these tags is this paragraph’s content.
For another, I would need another set.
Anything placed within these tags is this paragraph’s content.
For another, I would need another set.
</p>
<script>
function getBigger() {
document.getElementById(“demo-paragraph”).style.fontSize = “32px”;
</script>
Now we have content, that’s styled and behaves. Clicking anywhere on the paragraph enlarges it to 32pixels. It achieves this by listening for a click within the paragraph (onclick) which sends the click report to function getBigger(). It checks the document for a selector id ‘demo-paragraph’ and upon finding it, adjusts the font property to a larger 32pixels.
The three illustrations show how different languages work together to form a basic website. The browser will need a way to identify files it receives by format. HTML automatically tells it to treat a document as such, So to top it all of, We cover our code with <html>(covers entire document) then <body>(covers the content). There’s a <head> element not discussed in this article. It important for identifying the website (name, about) but not important as an example or function demonstration.
As a bonus, here’s the same piece of code, complete with the necessary elements to make it run. Copy paste this content, save it as demo32.html and open the same document using a web browser.
<html>
The three illustrations show how different languages work together to form a basic website. The browser will need a way to identify files it receives by format. HTML automatically tells it to treat a document as such, So to top it all of, We cover our code with <html>(covers entire document) then <body>(covers the content). There’s a <head> element not discussed in this article. It important for identifying the website (name, about) but not important as an example or function demonstration.
As a bonus, here’s the same piece of code, complete with the necessary elements to make it run. Copy paste this content, save it as demo32.html and open the same document using a web browser.
<html>
<body>
<style>
.demo{background-color: green;
color: purple;
font-size: 20px;}
</style>
<p id="demo-paragraph" class="demo" onclick="myFunction()">
This is a paragraph.
Anything placed within these tags is this paragraph’s content.
For another, I would need another set.
Anything placed within these tags is this paragraph’s content.
For another, I would need another set.
</p>
<script>
function myFunction() {
document.getElementById("demo-paragraph").style.fontSize = "32px";
}
</script>
</body>
</html>
Congratulations, you are now a web developer.