What is HTML

HTML or Hyper Text Markup Language is the skeleton framework of the Internet. HTML is extremely simple to learn and scales in complexity the more complex requirements we have. Just like Apex, HTML has it's own syntax for everything, but unlike Apex, there are no if-else statements, there are no loops, there is no "Logical" operation within HTML. HTML is, in oversimplified terms, a way to format a document by adding attributes to it.

A HTML file ends with the extension .html, and uses tags within < >and </ > to identify how to display the content between the tags.

Writing HTML

First, we need to define the .html file to be a HTML5 file. For this, we start off using <html>. In your text editor or IDE of choice (I'll be using Atom), create a new file and name it index.html and add the following content:

<html>
</html>

A thing to remember is, when you upload your site to a server, the server will ALWAYS look for a file named index.extension where extension could be .html, .php, .asp, etc. This is why all the first pages in every folder we create is called index.html. I spent an entire day when I was learning HTML back in 4th grade figuring out why the extremely expensive server won't display my page at harshdeephura.com but harshdeephura.com/about.html worked just fine.

Now that we have defined the start and end of our file! Now, we divide the HTML file in two secions:

  • Head
  • Body

Head

The head section of the HTML contains all the preloaders like CSS, SEO tags, Title of the webpage and analytics scripts (we talk about scripts in the JavaScript course). Let's add a head to our HTML file, and give it a title.

<html>
	<head>
		<title>Harshdeep's Portfolio</title>
	</head>
</html>

Save and open this in your browser. You'll notice the title says Harshdeep's Portfolio(or the text you chose to write)!

Body

The body loads after the head tag, and contains all of the content that the user will see. To write text in our body, we use the p tag, which stands for paragraph. While you can technically write text directly in the body tag and it will still display the text, it'll create issues when we format our text like adding line breaks and attributes. Let's add a body tag and write our name!

<html>
	<head>
		<title>Harshdeep's Portfolio</title>
	</head>
	<body>
		<p>Harshdeep Singh Hura</p>
	</body>
</html>

Great! Now to add a new paragraph, we can simply create more p tags! Let's write about how many Salesforce certifications we have like every cool kid on LinkedIn!

<html>
	<head>
		<title>Harshdeep's Portfolio</title>
	</head>
	<body>
		<p>Harshdeep Singh Hura</p>
		<p>1x Salesforce Certified</p>
	</body>
</html>

Now let's write a line about ourselves. Maybe where we are from, what we do when we have free time, where we work, anything! or you can Google "interests that look good on resume" because let's be real no normal human can remember their interests when asked for explicitly. But this time, ensure you add multiple spaces between your lines. Look at this code for example:

<html>
	<head>
		<title>Harshdeep's Portfolio</title>
	</head>
	<body>
		<p>Harshdeep Singh Hura</p>
		<p>1x Salesforce Certified</p>

		<p>I build iOS apps.
		I also binge TV Shows on Netflix instead of being a functioning member of the society.
		I also really REALLY love dogs!</p>
	</body>
</html>

Notice how all the lines were converted to a single line of text? This is because HTML doesn't care about how you format your text as long as it is between a start and end tag. To add a new line, we use a br tag called as break. Unlike most tags, br doesn't have a closing tag.

<html>
	<head>
		<title>Harshdeep's Portfolio</title>
	</head>
	<body>
		<p>Harshdeep Singh Hura</p>
		<p>1x Salesforce Certified</p>

		<p>I build iOS apps.<br>
		I also binge TV Shows on Netflix instead of being a functioning member of the society.<br />
		I also really REALLY love dogs!</p>
	</body>
</html>

Notice how I wrote br first as <br> and then as <br /> but they yield the same result? Because these tags don't require a separate closing tag, you can choose to write it either ways and HTML still accepts it like a loving mother.

Formatting Text

Now I really want to talk about my love for Dogs. The all-caps REALLY doesn't do enough justice, so we will be adding some italics, underline and bold to the text!

Formatting Tag
BOLD <strong>...</strong>
Italics <em>...</em>
Underline <u>...</u>
Strike <strike>...</strike>

Now let's add this to our code!

<html>
	<head>
		<title>Harshdeep's Portfolio</title>
	</head>
	<body>
		<p>Harshdeep Singh Hura</p>
		<p>1x Salesforce Certified</p>

		<p>I build iOS apps.<br>
		I also binge TV Shows on Netflix instead of being a functioning member of the society.<br />
		I also really <strong>REALLY</strong> love dogs!</p>
	</body>
</html>

Hmm. I still think it doesn't do enough justice. Let's add more formatting!

<html>
	<head>
		<title>Harshdeep's Portfolio</title>
	</head>
	<body>
		<p>Harshdeep Singh Hura</p>
		<p>1x Salesforce Certified</p>

		<p>I build iOS apps.<br>
		I also binge TV Shows on Netflix instead of being a functioning member of the society.<br />
		I also really <strong><u><em>REALLY</em></u></strong> love dogs!</p>
	</body>
</html>

There we go! Notice how to add multiple formatting options the tags are nested. It's a good practice to close the inner tags first and then the outer tags. We can further manipulate it, by underlining the whole REALLY love dogs! sentence.

<html>
	<head>
		<title>Harshdeep's Portfolio</title>
	</head>
	<body>
		<p>Harshdeep Singh Hura</p>
		<p>1x Salesforce Certified</p>

		<p>I build iOS apps.<br>
		I also binge TV Shows on Netflix instead of being a functioning member of the society.<br />
		I also really <strong><u><em>REALLY</em></strong> love dogs!</u></p>
	</body>
</html>

To understand nesting tags better we can compare it to making instant coffee. It doesn't matter what order you put your instant coffee, sugar, water and milk in, it'll still make the exact same instant coffee, but at the same time your content has to be written in the right order, the same way cereal goes first and then the milk.

Headings

While I really love dogs, I don't want my love for dogs to steal the show! Let's put some extra emphasis to the name. I want my name to have a bigger font size. For this, we will be using the Heading tag.

The heading tag is written with `h` followed by a number from 1 - 6, 1 being the biggest and 6 being the smallest. Let's update our code.

<html>
	<head>
		<title>Harshdeep's Portfolio</title>
	</head>
	<body>
		<h1>Harshdeep Singh Hura</h1>
		<p>1x Salesforce Certified</p>

		<p>I build iOS apps.<br>
		I also binge TV Shows on Netflix instead of being a functioning member of the society.<br />
		I also really <strong><u><em>REALLY</em></strong> love dogs!</u></p>
	</body>
</html>

Notice how I replaced the `p` tag with `h1`. It's not necessary to have `p` tags around a `h#` because they always start in a new line.

Summary

  • The html tag defines the start and end of our file. This tells the browser to render everything inside it using the HTML language.
  • The head tag is where our pre-loaders go, like our CSS and SEO tags
    • The title tag defines the title of this web page.
  • The body tag is now loaded
    • The h1 tag defines a heading
    • The p tag defines a new paragraph
    • The br tells the browser to start a new line
    • The strong is to bold the text
    • The u is to underline the text
    • The em is to italicize the text
      • We nest tags to combine effects
      • The u tag is extended to underline more text
Chapter 2: Anchor and Images