HTML boilerplate
In our introduction of HTML as a part of front-end web development, we likened it to the framework of a website. When we think of HTML, we think of the content and structure of a website. Whatever your choice of browser may be; be it Firefox, Safari, or Chrome, all of them work toward the same goal, which is to translate your files—such as your JavaScript, CSS, or HTML files—into a website that can be seen. For instance, the HTML code we have here specifies that the title of our website should be “Hello” and that the body should contain a heading that reads “Hello world.”. To write this simple HTML code, we begin by opening the Atom editor and typing the following codes below.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>
<h1> Hello World</>
</body>
</html>
Since we have already installed the HTML preview plugin, the result of this is simple code can be shown to us when we click on the preview HTML.
The “Hello, World!” program is a traditional introduction to programming, and its origin story is fascinating. The first known use of “Hello, World!” as a test message was in 1972 by Brian Kernighan, a Canadian computer scientist. At the time, Kernighan was working on the Bell Labs Unix team, and he was tasked with writing a tutorial on the C programming language. In his book “The C Programming Language,” co-authored with Dennis Ritchie, Kernighan included a simple program that printed “Hello, World!” to the screen. This example program was meant to demonstrate the basic syntax of C and has since become a ubiquitous greeting in the world of programming.
Unfortunately, the legend himself can’t definitely pinpoint when or why he chose the words “Hello, World.” When asked what sparked the idea for the name “Hello, World” in interview with Forbes India, he said his memory’s dim.
“What I do remember is that I had seen a cartoon that showed an egg and a chick and the chick was saying, “Hello, World.”
So if we pass that code into our browser, by right-clicking on the file name on the left hand side (LHS) and selecting “copy full path”. We paste this in our browser. Hit the “Enter” key on your keyboard. It will open it and display it like as shown below; with the title of the website usually on the Tab bar and that H1 which is the big heading showing up in the body of our website. So before we dive deep into this, it’s really important to remember that HTML is the Foundation of or websites. So for example, you won’t see website that are created using just a CSS file. Or just a JavaScript file, but you can create websites using just in HTML file.
When designing a website with just HTML code it is good to note that: yes, the website doesn’t compare with the full fledged websites built in 2024 but it does enable your website to display text or various elements, which is images or forms or tables depending on how you code up the HTML file. So html stands for Hypertext Markup Language
The really important part here is the word “Markup” because there’s many markup languages. For example, you might have heard of things that just XML which stands for extensible markup language or GML, generalized markup language.
It is said that these languages share a common history, which is based off the markup that used to be put into many scripts where editors would mark up the manuscript and either specify changes to be made. Either the structure and layout to the publishers. So, for example, you might have the squiggly line that shows the publishers that this part should be printed in bold or this part should be printed in italics.
HTML also works in much the same way; you can specify the layout and structure of your website by using HTML tags. Using our preview plugin, we can play around with real life HTML code. So this will allow us to interact with the live version of our website.
Let us pick a website content we can replicate. Head over to this website here and open the ebook there.
Since we’re only working with HTML at the moment, we want to regenerate this book, “The Fighting Scrub by Ralph Henry Barbour” (or an excerpt of it), using only HTML code. On scrolling through the content of the website, and looking carefully, you can see that you have the option to view the ebook in plain text UTF-8 format, that means you can view the book as plain text. Also, you can read this book online in HTML format.
So this is what the plane text looks like, as shown above. The viewing format has all of the text in the book, but absolutely no structure. And it has a dark background, and it is this font style that is just a bit off.
But when we have a look at the HTML file by clicking on the read online (web) option: you can see that it has laid up the book where the structure that is more human readable.
And this is what we’re going to replicate using HTML. So if you go ahead and just copy this part where it says “THE FIGHTING SCRUB”, copy off these texts and put it in your editor.
When our editor opens, we get to put in the HTML 5 boilerplate. This is very easy to do just type in “html” and since we already installed the packages for autocomplete, this will autocomplete the HTML 5 boilerplate.
Since we are recreating the book by Ralph Henry Barbour called The Fighting Scrub. We go ahead and put this title in the head part of the code. And we proceed to the body side of the HTML code. In the body we put the title of the book in h1 headings and also the name of the writer in h1 headings too.
Of course, this is no where the original structure of the book itself. Laying the original ebook from the website side by side with ours, we can see theirs has the sleek look. And there are 3 horizontal lines separating them. We can of course, work on this by adding more HTML tags to our codes to our already existing HTML code.
When we right click and choose inspect, we can see the code behind the rendered structure of the website contents. And under the HTML element, we can see what the codes are.
We can see that they used a <br> tag, also called the line break tag. You can read more about the properties of the line break HTML tag at MDN web docs page. Likewise, there are is the horizontal rule or <hr> tag that was coined used to make the lines. Although, theirs aren’t as our. We can replicate the same effect just using our own lines of HTML code.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>The Fighting Scrub</title>
</head>
<body>
<center>
<hr>
<h1>THE <br>FIGHTING SCRUB</h1>
<hr>
<h1>By RALPH HENRY BARBOUR</h1>
<hr>
<p><i>Yardley Hall Series</i></p>
</center>
<p>FOURTH DOWN</p>
<p>FORWARD PASS</p>
<p>DOUBLE PLAY</p>
<p>WINNING HIS Y</p>
<p>GUARDING THE GOAL</p>
<p>FOR YARDLEY</p>
<p>AROUND THE END</p>
<p>CHANGE SIGNALS</p>
<center>
<p><i>Purple Pennant Series</i></p>
</center>
</body>
</html>Again, to solve the width of the <hr> tag, we go back to the documentation on MDN or W3schools. Any of these two you prefer would do the trick. We are looking for the attributes of the <hr> tag.
From the attributes in MDN docs, we can see that we can manipulate the width of the <hr> tag. And this can be specified in percentage or in pixel. Also, note that this feature has been deprecated, this is shown by the dustbin sign next to the attribute. However, since we want to achieve the same structure using only HTML codes. We had to employ this method.
The result would be something like the one shown above. And it was almost the exact same replica of the ebook on the webpage itself.
Since we are dealing with the introduction to HTML, now would be a good time to discuss the two types of tags in HTML. In HTML, tags are used to define the structure and content of a web page. Some tags, known as self-closing tags, do not require a closing tag because they do not contain any content or require any additional information. These tags are closed with a forward slash (/) before the closing angle bracket (>). For example, the tag is a self-closing tag used to insert images into a web page. It is written the <img> tag is a self-closing tag used to insert images into a web page.
It is written as <img src="image.jpg" alt="Description of image"/> where the src attribute specifies the path to the image file, and the alt attribute provides alternative text for the image.
On the other hand, non-self-closing tags require a closing tag to indicate the end of the element’s content. These tags surround content that should be displayed on the web page. For example, the <p> tag is a non-self-closing tag used to define paragraphs of text. It is written as <p>This is a paragraph of text.</p>, where the opening <p> tag indicates the start of the paragraph and the closing </p> tag indicates the end of the paragraph.
Self-closing tags are also used for elements that do not have any content, such as line breaks or horizontal rules. For example, the <br> tag is a self-closing tag used to insert a line break in the text. It is written as <br/>, and it does not require a closing tag because it does not contain any content.
In contrast, non-self-closing tags are used for elements that contain content, such as text, images, or other elements. These tags require a closing tag to indicate where the content of the element ends. Using the correct type of tag, whether self-closing or non-self-closing, is important for ensuring that the HTML document is well-formed and displays correctly in web browsers.
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>
<h1>This is a Heading Level 1</h1>
<p>This is some content under the heading.</p>
<h2>This is a Heading Level 2</h2>
<p>This is some more content under the second heading.</p>
<h3>This is a Heading Level 3</h3>
<p>And more content under the third heading.</p>
<h4>This is a Heading Level 4</h4>
<p>Even more content under the fourth heading.</p>
<h5>This is a Heading Level 5</h5>
<p>Content under the fifth heading.</p>
<h6>This is a Heading Level 6</h6>
<p>Content under the sixth and lowest level heading.</p>
</body>
</html>The headings are defined using the <h1> to <h6> tags, where <h1> represents the highest level of heading (most important) and <h6> represents the lowest level of heading (least important). Here are examples of how headings can be used in HTML. In this example above, each heading tag <h1> to <h6> is followed by a paragraph <p> tag to demonstrate how headings are used to structure content hierarchically in HTML.
This tutorial is a brief introduction to HTML, it highlights the importance of HTML heading, tags and their attributes. We can proceed to take some questions based on these teachings.
<h1> to <h6> in HTML?<h1> is the highest level, typically used for the main heading of a page, while <h6> is the lowest level, used for subheadings or less important content.<h1> followed directly by <h3>), it is generally recommended to use heading levels sequentially to maintain a logical and consistent structure for accessibility and SEO purposes.<header>, <footer>, <nav>, and <article>, provide meaning to the content they enclose. They help browsers, search engines, and screen readers understand the structure of the page, improving accessibility and SEO.<a> tag followed by the href attribute, which specifies the URL of the link. For example, <a href="https://www.example.com">Visit Example</a> will create a link that says “Visit Example” and directs users to the specified URL when clicked.<div> tag in HTML?<div> tag is a generic container used to group and style content in HTML. It does not have any specific meaning or semantic value on its own but is often used with CSS to create layouts and organize content within a webpage.<div> tag in HTML?<span> tag in HTML?<thead>, <tbody>, and <tfoot> tags in HTML tables?<heading><h1><title><header><h2><b><h3><h6><h1 style="color: red">)True or False
Matching
<p><h1><span><b>Fill in the Blank
Short Answer
Code Examples
Challenge Questions
In the ever-evolving landscape of modern agriculture, artificial intelligence (AI) is emerging as a game-changing…
The Internet of Things (IoT) is reshaping the way we live, work, and produce goods.…
Introduction Have you ever wondered how some manufacturing industries consistently deliver high-quality products while minimizing…
In the ever-evolving landscape of modern agriculture, the integration of Internet of Things (IoT) technology…
Introduction Have you ever imagined diagnosing equipment issues without even being on-site? Welcome to the…
In the ever-evolving world of manufacturing, staying competitive means adopting innovative solutions to optimize every…
This website uses cookies.