HTML-5 Fundamentals
What you use as your browser doesn’t matter; it could be Chrome, Safari, or Firefox. They all have a single purpose, and that’s to interpret your files, such as your HTML files, CSS files, JavaScript files into a website that should be displayed. It’s important to remember that HTML is the foundation of all websites. Additionally, you won’t see websites created using just a CSS file or just a JavaScript file, but you can create websites using just an HTML file. To prove that, you can head to http://web-old.archive.org/ web site and take a look at 1990’s websites that consist of HTML and simple CSS components.
Introduction to HTML
Therefore, We need to take a look a little bit closer at the HTML. What does HTML stand for? Answers are that HTML stands for Hypertext Mark-up Language. However, the significant part is the word mark-up because there are many mark-up languages such as XML, GML. All of these languages share a common history. What is the meaning of Mark-up Languages? What Do They Provide Us? Essentially, In computer text processing, a mark-up language is a system for annotating a document in a way that is syntactically distinguishable from the text. Let me give an example when you read the text of the material book in the classroom; you have seen one of the bold words compared to other words. How would you read this word? You would read this word with stress reading, wouldn’t you? This is the same way of working Mark-up languages.
STRUCT OF HTML FILE
What is the HTML boilerplate? In Programming, we talk about boilerplates quite frequently, and it is similar to having a code template, something that we will reuse for different projects. Let’s take a look at this boilerplate line by line to understand what it all does.
<!DOCTYPE html> : In first line is where we declare the document type. And this tells the browser when it opens up this file, what is the version of HTML that we’re using. We work with latest version which is HTML 5. However ,if you would like to see previous version of HTML boilerplate. You should type html:4t than you would have HTML-4 Boilerplate.
<html lang = “ eng”>… </html> : The next line in our code, it’s an HTML tag. And this tells the browser that everything in between the opening and closing tags is going to be HTML code. The lang =”en” attribute is used to identify the language of text content on the web. Okay than , what does that html tag consist of? <head>…</head> and <body>…</body> tags.
<head>…</head> : Well, it consists of a head and a body. Now the head is the part of the HTML file that holds information about the webpage and it tells the browser how it should handle the page. In the head part there are some tags such as meta and title.
<title>…</title> : Title tag in screenshot that tells the browser what is the title of this particular document or this particular page. In the screenshot as you can see , we have put title of the web site is Here is the Title. Let’s head to see how it looks in the page? Ignore that Here is the content of website. We will have covered that on later steps.
<meta ….>: There is also this meta element. There are quite a few different meta elements, but the meta elements' meaning gives extra metadata or associated data to your HTML document. And in this case:
<meta charset=" UTF-8"/>: when we declare the "charset" as "UTF-8", we are telling our browser to use the UTF-8 character encoding, which is a method of converting your typed characters into machine-readable code.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0" /> : This gives the browser instructions on how to control the page’s dimensions and scaling. The width=device-width part sets the page’s width to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the browser first loads the page.
<body>…</body> : The <body> tag defines the document’s body. The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. From our screenshot, in between the opening and closing body tags, a heading tag is written: "Here is the content of our website" in-between heading opening and closing tags. Obviously, it will open up and display on our website, as you can see from the screenshot which t below.
After all, learning what the boilerplate of HTML 5 is. We will learn new element tags that we use in body tags for our websites' content in the following articles. Moreover, We will try to cover them in detail.
References : https://www.w3schools.com/css/css_rwd_viewport.asp, https://www.w3schools.com/tags/tag_body.asp#:~:text=The%20tag%20defines%20the,element%20in%20an%20HTML%20document.
