Happy New year 2021 friends and welcome to the second part of this blog where I talked about “What is Web Development? Part 1”. In this post, we will go forward by learning about web development part 2.
Recall from part 1, we learned that web development is the process of building a website, and we use technologies to make it possible.
We learned about HTTP, Hypertext Protocol that handles communication between server and client.
We saw that different codes are bounded to each request that specifies the state of that request and response. That is why we represent it as an envelope that contains our request or our response.
Besides the header, what else is in that envelope? Let say you request a web page like:
It turns out that the content of that envelope is with some texts that you may not understand. So how that content can fit in that envelope?
Below the header HTTP status code that comes from the server like:
HTTP/2.0 200 OK
They are also something we called the body, the HTML, that looks like this:
Those lines of code are what we call “HTML” means: Hypertext Markup Language.
It is not a programming language at all, because a programming language gives instructions to a computer or commands a computer to do something like loops, conditions, and more.
But HTML is a markup language, that marks up the information on your page and tells the browser how to structure it or how to format it. This is one of the technologies that make up the web page. And that is the simplest web page you can write using HTML.
All websites you see out there start with HTML.
And these lines of code is just a web page that displays “Hello, world”.
All web pages follow this exact path.
To write this code you need what we call “Text Editor”.
Here are some text editors:
- sublime text,
- visual studio code,
- and more.
A text editor is a specifics application that allows you to write codes.
Some code editors beside notepad will format codes well for you.
You may ask yourself why not Word Processor like MS Word? Well, you may use it to write code even follow exactly the indentation but when it comes to saving that file, it will save as a Word format then when you want to execute, that file code will not work. That’s the reason why you should use the only code editor to write code then when it comes to saving it, the code will be saved in the right format for you to execute.
If you never write an HTML code, just use one of the mentioned code editors and write exactly as I did on the above picture then save it as “index.html”. Make sure the format is “.html”, then right-click the saved file to open with the browser of your choice to view the result.
Now let us walk through that HTML code to understand.
1. <!DOCTYPE html>
2. <html lang=””en”>
4. <title>Hello world</title>
7. Hello, World
- this means hey browser this is an HTML page version 5
- hey, browser here is the beginning of my HTML content, display it in the English language.
- then comes the head section, the starting point
- here comes the title of your page. This content displays at the most top of the page, above the URL of your website
- end of head section. head content never shows on the page
- here comes the body of your web page, the one that user sees
- here comes the content of body tag.
- here is the end of our body
then lastly the closing of our HTML document.
Notice the asymmetry
Notice the asymmetry
In HTML we call those block elements “TAGS”. We have the opening tag and the closing tag. An HTML tag is a letter or word surrounded by angle brackets.
<title> and </title>.
The opening tag looks the same as the closing one but with a small difference that the closing tag has the slash “/” in the front of the last tag name. Each content you see there on a web page is embedded in a tag. Whether is text, paragraph, video, picture, audio, or anything, it’s surrounded with an HTML tag.
When we need to give browser instructions to do something with that tag, we just put those instructions within the starting and the closing tag. We have many tags in HTML, and each tag has its own role to do. But all those tags are used within the above code.
All content you can possibly see in the browser is situated in the <body> tag, as we will see in the image below.
In short, HTML is a tag-based language that why we call it a mark-up language.
It’s not all tags in HTML that have the closing tag, others have the start tag and closing tag, but others have only a single tag.
– example of closing tags
<p>content goes here</p>
– example of single tag
<img src=”img.jpg” />
This example of a single tag above, formats or displays image in your browser.
A single tag like an image tag can be written with or without the slash before the closing angle like this <img src=”…” > or <img src=”…” />.
In that IMG tag, we saw this: src=”img.jpg”, we call it to attribute, this attribute is the source or location where the image is.
Attributes are configuration details that allow us to influence the behavior of our mark-up or our tag. When you want an HTML tag to format in a certain way, you have to give it an attribute with its value.
Let’s open that saved file and open it with your favorite browser.
Here is how that index.html file is opened in the browser:
- As shown on the diagram, the content of <title>…</title> tag is the one that displays on the topmost of your browser, in the head of your HTML page.
- Next, the URL as you can see is serving our page from our machine because we did not host it on a server and we did not give it a domain name. In this case, the location of my file from my machine is: file:///home/dauli/Desktop/index.html
- Lastly is the body of our page, the content that displays to the user.
Did I make a web page? Yes, I did make a web page. But no one else on the internet can have access to this web page. Because it is not on a server to be public.
To make it possible to be accessed by anyone on the internet, there are companies called: Hosting companies that their purpose is to rent out space that we can buy a domain and starting renting monthly for a space to store our web files in other to be online and public for everyone with our exact URL or domain name to find our web page.
But for now, we are focussing on writing the code on our local computer.
Thanks for reading and please subscribe to be notified for the next part.