Deekshith's TOP Dashboard - HTML

Introduction

Now, HTML is the core code for all the content displayed on webpages. As Im learning.. I came to know that the pages we browse may or may not be standalone html files.

Programs are now generating HTML files in realtime and sending them to the user's browser where users can access the content on the webpage.

Here I'm logging some of the basic fundamentals of HTML. And yes this is only fundamental knowledge. There's something known as Semantic HTML where you add tags which make the content machine readable with context. In simple words, this makes the content on the page to render properly in screen readers. Basically accessibility tools can access the content more efficiently.

As far as Im aware, you should mandatorily use semantics on any kind of website you might build. It not only adds to the semantics but also arranges content systematically so that you can go back and edit stuff easily.

HTML

Here's how text is handled in HTML

Using the paragraph tag <p> makes life easy while the other tags like <h1> through <h6> are used for headings and structure.

Textarea tag is used to create a multi-line text input field. It's code is <textarea></textarea>

This code generates something like this.

Lists

speaking about lists, lets add the list of the HTML curriculum from TOP to demonstrate how to use lists

Damn! I need to acknowledge the ease of coding in VS Code with its auto complete feature.

Here is the list of HTML curriculum from TOP:

Introduction to HTML and CSS
Elements and Tags
HTML Boilerplate (the name is kinda funny)
Working with text
Lists
Links and Images
Commit Messages
Project: Recipies (I am making a learning journal)

This is what's called an ordered list. It is ordered list because it signifies the most effective order of completing the curriculum.

If I were to randomly learn the curriculum, I would miss important foundational concepts. The learning curve would rather be steeper and less efficient.

Links

Anchor tags

Now we will look at links and stuff. so <a href="..."> is used to create links in HTML.

For example, here is a link to the TOP website: The Odin Project

(I swear to god, why is VS code auto completing everything man! I'm using it to learn and memorise stuff, but this tool is not letting me use my brain to write even text. Its like using a text generator rather than a code editor. I might seriously consider using VS code to write my assignments fr.)

Now lets open that website in a new tab by adding this target="_blank" and rel="noopener noreferrer" attributes.

Here is the link to TOP website opening in a new tab: The Odin Project

Still learning what these noopener and noreferrer actually are. I did understand about noreferrer, when you click that link and visit TOP, TOP will not know you clicked that link from my webpage. It would more or less be like you pasting that link in a new tab manually. This way my webpage makes sure TOP doesn't record my webpage as a source of their traffic.

All right chat. Now I read and understood what noopener actually does. It is a security feature and it prevents something known as tabnabbing. There's something called windows.opener. So whats this? In case you ever been on shady/ piracy sites trying to download stuff. You might have noticed how the new tab opens a link and the previous tab redirects to advertisements. This redirection to third-party site and stuff is exactly what tabnabbing is. If you add a noopener, shady people won't be able to do this and other shady stuff. Basically, the new tab and the original tab will act as if they are isolated from each other.

Absolute and Relative links

Now that we have learned how to add absolute links like TOP website. Lets add a relative link to the about page:

About This is the link to another page on the same website domain. To add anchor tag <a href="..."> to such relative pages, we just add about.html in the href attribute like this <a href="about.html">About</a>

Images

Now lets add an Image to our website

To add an image, we use the <img> tag. The img tag is a self closing tag and it doesn't have a closing tag like </img>. The img tag uses attributes like src and alt to define the source of the image and the alternative text respectively.

The src attribute is used to specify the path to the image file. It's similar to href attribute in an anchor tag <a href="...">. It can be an absolute path or a relative path. The alt attribute is used to provide alternative text for the image in case the image cannot be displayed.

Here is an example of an image tag:

Assignments

As part of HTML assignment, I made the following recipe pages:

Go to top