Creating web-ready documents with HTML
This article is the fourth part of Week of Web(#WOW). If you don’t know what #WOW is here’s a card to it.
This article is a hands-on tutorial on creating HTML documents and in the end, we will create an HTML document for our Todo list application.
Let’s get this party started!
What is HTML?
Hypertext Markup Language(HTML) is the most important and basic part of building a website. HTML helps developers create documents by using a proper syntax which can later be rendered by anyone on the web later.
This syntax defines what a component is in a document. These components could be a heading, a paragraph, an image, a table or even an input textbox. All these components are displayed in the order they are typed from top to bottom.
The Structure of an HTML Document
Given below is a simple structure of an HTML document.
- The
<!DOCTYPE html>tag defines that this document is an HTML5 document - The
<html>element is the root element of an HTML page. It defines that the HTML document starts from here. - The
<head>element contains meta information about the HTML page. Just like how a music file has meta information like the music name, artist, length of the music, album. HTML also contains meta information.
If this article gets more than 50 claps I will make an article on how to set up SEO (Search Engine Optimization) for your website using HTML meta information.
- The
<title>element specifies a title for the HTML page (this is displayed in the browser's window title on the top of the screen) - The
<body>element defines the document's body, and is a block for all the visible contents. This is where the actual content goes in. - The
<h1>element defines the largest heading - The
<p>element defines a paragraph
The HTML Elements
Basic sytax
An HTML element defines where a content starts and ends. The basic syntax like this
<tag> content </tag>For example
<p> HTML is not a programming language. </p>Here we have defined a paragraph with a starting tag <p> and a closing tag </p> . All the content that is supposed to be formatted as a paragraph goes between the starting tag and the closing tag.
Attributes
To define properties of an HTML element we use attributes. It can be defined like this
<tag attributeName="attributeValue"> content </tag>For example
<a href="https://medium.com/coders-capsule"> Follow Coder's Capsule on Medium </a>This is an anchor tag used to create links, On clicking the content “Follow Coder’s Capsule” it will open the link defined in the href attribute.
Self Closing Tags
There some elements which don't need a closing tag and have a self closing tag.
< tag attributeName="attributeValue"/>These elements do not have content inside them and hence a closing tag is not needed.
For example
<img src="img.jpg" alt="A description in case the image doesnt load" width="500" height="600"/>Here an image is defined with its height, width and a fallback text in case the image doesn't load. Since we do not need to put any content in it, it is defined in a self closing tag.
Since HTML is a scripting language you will not notice any error, but unexpected results may take place when the tags are not used properly.
Now let's go through various elements that could be defined in HTML
HTML Essentials
HTML Headings
<h1>Biggest Heading</h1>
<h2>Smalller Heading</h2>
<h3>Smalller Heading</h3>
<h4>Smalller Heading</h4>
<h5>Smalller Heading</h5>
<h6>Smallest Heading</h6>
HTML Paragraph
<h1>This sentence contains all the letters of the English Alphabets</h1><p>The quick brown fox jumps over a lazy dog</p>
HTML Images
<img src="https://vinayak-tekade.web.app/img/blog.png" alt="Coder's Capsule Logo" width="200" height="200"/>HTML Links
<a href="https://medium.com/coders-capsule"> Follow Coder's Capsule on Medium </a>
HTML Block and Inline Elements
A block-level element occupies the whole width of the browser on a device and starts from a new line. It can be defined using <div> tag.
<div> I own the whole width, HAHAHA! </div>An Inline level element occupies only the width as much as it needs and does not start from a new line. It can be defined using <span> tag.
<span> I'm happy with my space </span>So if you want to fix the alignment of the image and the link given above we can use block-level elements.
<div>
<img
src="https://vinayak-tekade.web.app/img/blog.png"
alt="Coder's Capsule Logo"
width="200"
height="200"
/>
</div><div>
<a href="https://medium.com/coders-capsule">
Follow Coder's Capsule on Medium
</a>
</div>
HTML Class and ID Attributes
The class and id attributes are used to define a name for an element. This name can be defined as per the developer’s choice and be used for manipulations by CSS and JavaScript later.
<div class="cc_logo">
<img
src="https://vinayak-tekade.web.app/img/blog.png"
alt="Coder's Capsule Logo"
width="200"
height="200"
/>
</div><div id="cc_link">
<a href="https://medium.com/coders-capsule">
Follow Coder's Capsule on Medium
</a>
</div>
The only difference is that a class name can be used on multiple HTML elements whereas an id name is unique to an HTML element and can be used only once.
HTML Comments
<!-- Type your comments here -->This will not be rendered and the developer may use it for better code readability.
HTML Tables
<table>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Amount</th>
</tr>
<tr>
<td>Laptop</td>
<td>1</td>
<td>50000</td>
<td>50000</td>
</tr>
<tr>
<td>Stickers</td>
<td>20</td>
<td>5</td>
<td>100</td>
</tr>
</table>
Here
<table>defines the entire table in rows(horizontal) and columns(vertical)<tr>defines a table row(horizontal)<th>defines table heading that is the value of that cell in bold for showing it is heading for that column<td>defines the table definition that is the value of that cell normally.
HTML Lists
There are two types of list
Ordered List
In Ordered lists, the listed items are marked with numbers by default.
Unordered List
In Unordered lists, the listed items are marked with black circles by default.
<h2>Ordered List</h2>
<ol>
<li>Laptop</li>
<li>Mouse</li>
<li>Keyboard</li>
<li>Stickers</li>
</ol><h2>Unordered List</h2>
<ul>
<li>Laptop</li>
<li>Mouse</li>
<li>Keyboard</li>
<li>Stickers</li>
</ul>
Here
<ol>defines an ordered list<ul>defines an unordered list<li>defines each element of the list
HTML Forms
An HTML form can be used to get input from users. This input then later be sent to a server for processing.
<form action="/action_page.php">
<div class="form_group">
<label for="name">Name:</label><br />
<input type="text" id="name" /><br /><br />
</div>
<br />
<div class="form_group">
<label for="gender">Gender</label><br />
<input type="radio" id="male" value="male" />
<label for="male">Male</label><br />
<input type="radio" id="female" value="female" />
<label for="female">Female</label><br />
<input type="radio" id="other" value="other" />
<label for="other">Other</label>
</div>
<br />
<div class="form_group">
<label for="Vehicle">Vehicle</label><br />
<input type="checkbox" id="vehicle1" name="vehicle1" />
<label for="vehicle1"> I have a bike</label><br />
<input type="checkbox" id="vehicle2" name="vehicle2" />
<label for="vehicle2"> I have a car</label><br />
<input type="checkbox" id="vehicle3" name="vehicle3" />
<label for="vehicle3"> I have a boat</label>
</div>
<br />
<input type="submit" value="Submit" />
</form>
Here we have
<form>element, it is used to define a form and acts as a block for all the input field.<input>element, it is used to define input fields in a form, it can be of various types and these types are defined by itstypeattribute.
type="text"it creates a text input field, here it is used to get the name of the user.type="radio"it creates a radio button, here it is used to select one option out of the three genders given.type="checkbox"it creates a checkbox field, here it is used to get multiple options out of the three vehicles options given.type="submit"it creates a submit button that will send all the details collected from the user to the server. (We will learn how a server-side code is written in this series later)
<label>element helps make the form more accessible. It has aforattribute which points toidattribute of an<input>element.
Enough theory, let’s get started with our Todo list application
Creating HTML document for ToDo list application
Open VS Code and open the folder you created during setting up your git repository earlier. If you don't remember here's a card to it.
Now create a new folder called public using the icon available in VS Code’s explorer.
The public folder will contain all our static content. SInce we are just making a frontend now our HTML file will also go here.
Now create a file inside public folder called index.html using the icon available in VS Code’s explorer.
Now let's type in this document.
First, create a boilerplate using VS Code’s IntelliSense. Type HTML and select HTML5 in it.
VS Code will autocomplete the HTML5 template for you. Change the title to ToDo list here. This will display ToDo list in the browser’s title.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDo List</title>
</head>
<body>
</body>
</html>Now let's move on to HTML body.
Let's create a block-level element called container which will act as wrapper around our heading, form and unordered list.
<body>
<div class="container"> </div>
</body>
Inside the container add a heading to our document to tell users what our application does.
<h1>Things To Do</h1>Now add a form so that our users can type what they want to add to their ToDo list. This form will contain a text input field and a submit button.
<form action="" method="post">
<input
type="text"
name="task"
id="input-task"
placeholder="Add a Task"
/>
<input type="submit" value="Add" />
</form>Now to what's a ToDo list without an actual list in it duh?
Add an unordered list after the form
<ul>
<li>
<div>Read an article</div>
<div>✗</div>
</li>
<li>
<div>Go on a Run</div>
<div>✗</div>
</li>
<li>
<div>Attend Classes</div>
<div>✗</div>
</li>
<li>
<div>Review Pull Requests</div>
<div>✗</div>
</li>
<li>
<div>Play Valorant</div>
<div>✗</div>
</li>
</ul>Notice ✗
This is known as an HTML symbol code. Using HTML symbol code we can add characters to our document which are not present on our keyboard.
And Voila we done!
Our HTML document should look like this in the end.
This will be the structure of our ToDo list application. Where we have a heading, a form and a list of all the things the user may want in a ToDo list.
Pretty simple right?
Well, it is simple but not pretty for sure!
Don’t worry in the next article we will give this boy a makeover and I promise it will be pretty and simple!
That is all we have for HTML folks, in the next article we will learn to perform a few magic tricks with CSS and also we will make our ToDo list magnificent.
This is Vinayak Tekade from Coder’s Capsule in collaboration with Developer Student Clubs Amrita School of Engineering Bengaluru signing off.
Follow me on LinkedIn and Twitter.
Looking forward to learn, teach and grow together. Check us out on Instagram for more similar content.
