How to learn HTML from scratch

Hang Nguyen
2 min readMar 23, 2022

Let's be honest here. We eventually need HTML and CSS to leverage data visualization tasks.

The trend nowadays is to go for BI applications to handle visualization tasks. The thing is that it is not that you can have full control of these tools and in fact a sufficient amount of annually/monthly subscription fee should be paid to maintain the service. Not to mention if sometimes the service is under maintenance, what would be the alternative platform to still get visualization tasks done. The easiest and cheapest solution is to view them on website using Canvas.js. Now from there my friend, data engineers, data analysts and data scientists all need to use HTML and CSS, which inspires me to write this story.

Fast basic concepts

  • All HTML file starts with this:

<!DOCTYPE html>

  • Root of an HTML document

<html lang=”en">…..</html>

  • Headings: Just headings <h>, ranking from 1 onward with it according importance. <h1> is the most important heading.

<h1>…..</h1>

  • Paragraph: <p>, no like heading no <p1> or <p2> just <p> for all paragraphs. Attribute “style" can be used in any heading, paragraph, body or head.

<p style=”color:red; font-size:60px;background-color:powderblue; font-family:verdana;text-align:center;” title=”Every word in red">This is a paragraph in red.</p>

  • Text in bold:

<b>…</b> -> <p><b>….</b></p>

  • Text with strong emphasis:

<p><em>…</em></p>

  • Links:

<a href=”URL address">….</a>

  • Images:

<img src=”.JPG file" alt=”alternate text for image" width=”width number" height=”hight number">

  • Line break: <br>
  • Separate content line: <hr>
  • Preformatted text: <pre>…</pre>
  • Quotes:

<blockquote cite=”URL">

  • The rest can be found here.

Cascading Style Sheets (CSS)

CSS can be added to HTML documents in 3 ways:

  • Inline: style attribute
  • Internal: <style> element in <head>
  • External: <link> element to link to an external CSS file
Link to external CSS file
Example of CSS file

HTML Layout Elements

Javascript to leverage vizualization

This will lead to a new story to be published soon.

--

--

Hang Nguyen

A Data Engineer with a passion for technology, literature, and philosophy.