HTML – Free Coding Tutorials

HTML5 – the current version of HTML, which is the HyperText Markup Language. A markup language is not a programming language. It is not Turing complete. HTML merely defines the structure of a web page. HTML uses tags to organize things.

Here is an example of a simple web page in HTML:

<!DOCTYPE html>

<head>

<!– head tags –>

</head>

<body>

</header>

<nav>

<a href=”about.html”>About</a>

<a href=”projects.html”>Projects</a>

<a href=”contact.html”>Contact</a>

</nav>

<main>

<div>

<p>Welcome to Alan’s cool website! Check all the links above.</p>

<p>Be sure to customize all the pages for your own site! Make it your own!</p>

<p>This is open source, which means you’re allowed to use it and change it.</p>

</div>

</main>

<p>Made by Alan 2019 | <a href=””>Twitter</a> | <a href=””>Facebook</a> | <a href=””>GitHub</a> | <a href=””>LinkedIn</a></p>

</footer>

</body>

</html>

If you can learn all of these concepts in the example code above, you should be good for HTML for now. HTML consists of tags, most of which have opening and closing tags. But some are self-closing. HTML defines the structure of a site. You use it in conjunction with CSS and JavaScript, also called JS. The above code is saved as index.html, which is a common landing page for many types of web servers. If you put an index.html file in the public_html or /var/www/html/ folder for a web server (depends on the software), it will show up when you go to example.com (whatever your site’s domain name is), even if you don’t add the /index.html at the end of it.

<!DOCTYPE html>

Starting with the DOCTYPE declaration, this says what kind of document it is. In this case, we’re using HTML.

Next, we have the <html> tag. There are two special things here: lang and onclick. Firstly, what are these things within the tag? Generally speaking, they are called attributes.

Attributes will be in this form:

In this case, we have the <html> tag:

It has the lang attribute with a value of “en.” In this case, that means the language is English. onclick is used for JavaScript. The “countClick()” is a function call for a function I wrote and put into a script that is included in this page a few lines down. JavaScript will be covered more in the JavaScript section. But for now, we’re dealing with HTML.

After the opening <html> tag, we need another level of indentation. This makes it easier to read the code.

Next is the <head> tag. This tag is used for specific things.

<!– head tags –>

The above line is a comment, meaning it’s only there for the benefit of the human reading it, such as a developer, and the computer ignores it completely.

Next is a <meta> tag:

In this case, the <meta> tag is being used with the charset attribute to set the character set of the document to UTF-8, which is a common method of character encoding. If you have heard of ASCII or Unicode, you should be at least vaguely familiar with this idea. Long story short, just use UTF-8. It’s essentially boilerplate. It might be different if you want to make a webpage in a different language though. For example, a Japanese website might use Shift_JIS or EUC-JP instead because of the different characters that are used in the language. If you have ever seen characters that show up as �, �, or � instead of the character it’s supposed to be, it’s an issue relating to character encoding. The site is either using the wrong character encoding, or the device viewing it doesn’t support it. Sometimes, you will even see boxes instead of characters, looking something like this: ☐

The next line in the example HTML page is the <title> tag:

For some tags, you put everything all on the same line rather than having separate lines for the opening and closing tags as well as the content within it. The title tag is what shows up in the browser tab. Do not be confused: if you want a title within the web page itself, instead of just the browser tab, you will need to use something else, called a heading tag, such as <h1>, <h2>, or <h3>.

The next line in the page is the first <link> tag:

This links to a favicon. A favicon is the image you see in the browser tab, usually tiny and with a 1:1 aspect ratio. For this example site listed previously, which you can download from GitHub, I used a 32×32 pixel image. I’ve also heard of people using 16×16 or 64×64. Notice how it has a relative path for the location. “images/favicon.gif” means go into the images folder (which is a sub-folder within the current folder of the HTML file) and then you’ll find the favicon.gif file there.

For extremely in-depth information about favicons, check this article out:

https://sympli.io/blog/2017/02/15/heres-everything-you-need-to-know-about-favicons-in-2017/

That being said, this simple website I made for this book is for illustrative purposes, so I did a more straightforward alternative and just made a GIF file instead of a favicon.ico (icon file format) with multiple icons of different sizes, or XML pointing to many different ones. That’s way too complicated for beginners who are just now learning HTML.

The next <link> tag is for including a CSS file:

This will determine the style of the site. More on CSS in the following CSS section though. It also has a relative path in its href attribute. You don’t want to do absolute paths unless it’s absolutely necessary, such as if you’re linking to a file hosted on another website rather than on your own server.

The <script> tag adds JavaScript to the web page.

In this example, it’s an external JS file. src is the attribute for the source of the script.

Next in the HTML file example, the <head> tag is closed. You will notice that closing tags have a slash in them. In this case, it’s </head>.

There is an optional tag you can use in the <body> of a web page, called the <noscript> tag. Because some users disable JavaScript in their browser, it can mess up what the site looks like. It can be a good idea to make a simple message telling the user that the site won’t function properly without JavaScript enabled.

You need to enable JavaScript for this site.

</noscript>

Up next, I added a line break to visually separate the different important aspects of the page, followed by the opening <body> tag. This <body> example contains 4 main things: the header, nav, main, and footer.

In this case, I use the <header> as a kind of title for the page (within the page itself, not the browser tab <title>):

</header>

The <title> tag is just for the browser tab or window name but doesn’t show the name on the web page itself. That’s where the header comes into play. I used a 1st level heading tag, or <h1>, in order to have big text. Technically, the heading tags aren’t for size. You can use CSS to change the size of text. Headings are for subdividing a page into categories and sub-categories. <h1> could be used for a big topic, like the chapter of a book. <h2> could be used for chapter names. <h3> could be for sub-topics within a chapter, and then <h4> could be used for smaller parts within said sub-topics. It goes all the way to <h6>. It’s hierarchical.

In the <nav>, which means navigation, there is a list of links for other pages on the same website. After all, how will people know about the pages on your site if you don’t let them click links to find them?

<nav>

<a href=”about.html”>About</a>

<a href=”projects.html”>Projects</a>

<a href=”contact.html”>Contact</a>

</nav>

In this case, there are just a few very basic (yet useful) pages: the home page, the about page, projects page, and a contact page. I made all of these pages in the GitHub repo, so you can very easily download this template and then change just a couple things in order to turn it into your very own custom website. It’s available here:

https://github.com/0x416c616e/book_website

But anyway, the nav links use <a> tags. <a> means anchor, and it can be used for creating sections within a single page, but it is most often used for linking to other pages, as I’m doing here. The href attribute within the anchor tag is what should contain the link to the page. You also need text within the <a> tag that is not an attribute.

In this example:

The link will show up as “Home” on the web page, and it will lead to the index.html page on the same website. Again, this is a relative path, as opposed to an absolute one. There is no such website as index.html. Instead, if your website is example.com, it will take you to example.com/index.html.

In this particular example, I also added a class to it:

class=”current”

Classes can be named pretty much whatever you want, and JavaScript or CSS can use them. HTML classes should not be confused with classes in object-oriented programming languages, which are a different concept that just shares the same name. I used it with CSS to make the current page link look different from the other links. That way, you know which page you are currently on. The style of the “current” class is changed in my CSS file, not HTML. Some people put inline or internal CSS within an HTML page, but I disagree with that approach.

After the nav, which should be towards the top of the page, we have the <main> tag, which is where the page’s content will reside:

<main>

<div>

<p>Welcome to Alan’s cool website! Check all the links above.</p>

<p>Be sure to customize all the pages for your own site! Make it your own!</p>

<p>This is open source, which means you’re allowed to use it and change it.</p>

</div>

</main>

Within the <main> tag, I put a <div>, which means divider. I did this for the sake of CSS styling, which I will explain later. But long story short, if you want to break things up, or organize things, you can use <div> tags. They are sort of generic. You can also essentially make your own tags by using <div>s or <span>s with custom class or id attributes.

A concept that is similar to <div> is <span>. A <div> is a tag for dividing up a web page, which can be useful for organization and CSS, giving you the ability to style things differently based on containers and whatnot. But while <div> has a display property value of block by default, <span> is inline. Of course, you can use CSS to change the display property to whatever one you want.

You might be wondering: what’s the difference between a class and an id? Well, they are both user-specified things. You can make whatever class or id you want, and then you can manipulate them with JS or CSS. But you can have multiple instances of a single type of class within a page, whereas an id is supposed to be something unique, meaning it only appears once on a page. class means one or more; id means one. Just keep that in mind. Think of it like this: your driver’s license or ID is unique to you, but a class can have many students in it.

In a popular frontend library called Bootstrap, if you include the Bootstrap files on your page, you can quickly customize the look and behavior of a tag on a page by using one of Bootstrap’s premade classes. It allows you to make an aesthetically-pleasing website easily. But this example HTML page has no such features because they’re more advanced and might confuse a beginner. But be aware that most developers don’t use plain old HTML, CSS, and JS. They use additional libraries or frameworks. For learning, you stick with the basics. But for professional development, you use more specialized stuff that helps you make things.

Within the <main>’s <div>, which has increased indentation, there is a second level heading, or <h2> tag:

This is smaller than the <h1> tag and denotes a sub-heading within the page.

After the “Home” <h2> tag, I included an <img> tag to display a drawing of a cat that I made:

There are a few key things to understand about the <img> tag. Firstly, the src attribute specifies where you’re getting the image file from. Secondly, notice that there is no </img> closing tag. This is because the <img> is a self-closing tag. Some are self-closing, and others are not. Why? Because they felt like designing it that way. Don’t blame me for this inconsistency. I didn’t come up with it.

Common file formats for images include PNG, GIF, and JPEG. PNG stands for Portable Network Graphics. It supports transparent backgrounds and lossless compression, making it good for when you don’t want to lose image quality. The file size of a PNG can be huge if you use it for something with complex/interleaved colors like a photograph, but it’s good for images that have very simple colors, like a quick drawing, or things that mostly have shapes with regions of contiguous colors. You might want to save the source of something as a PNG, but then export it as a JPEG or GIF for the files you actually upload to your site.

GIF stands for Graphics Interchange Format. GIFs support 256 indexed colors, transparency, lossy compression, and animation. For the sake of comparison, JPEG and PNG support millions of colors in a single image, so GIF is abysmal by comparison, at least in that regard. GIFs are most known for animations, but the quality is nowhere near as good as a video. They are best suited for short animations with relatively simple colors. JPEG stands for Joint Photographic Experts Group. JPEG images will either end in .jpg or .jpeg. JPEG supports lossy compression, leading to distortions called artifacts, which make the image look lower quality or “noisy.” Some people complain about the quality of JPEG files. However, where JPEG really shines is compressing photographs to a very small size with only minimal artifacting. JPEG is best suited for images that have complicated colors and subjects. To my knowledge, JPEG does not support transparency. Saving and editing a JPEG image multiple times will lead to a degradation of quality.

Be very careful when uploading images to the internet – whether it’s for your own website or for social media. Some sites strip metadata from uploads, but not all do. Photos contain metadata called EXIF or Exif. It stands for EXchangeable Image File format. On a dedicated camera, it might be information about when the photo was taken and what kind of camera it is, which is somewhat personal info, but not too intense. But on a smartphone camera, it can also include information such as your location, using your phone’s location services. You really don’t want personal information from Exif data to make its way onto the public internet. You can use a tool called ExifTool to get rid of Exif data from an image.

You can get it here:

https://www.sno.phy.queensu.ca/~phil/exiftool/

Or on Linux, you can use the following command in a terminal window:

sudo apt-get install libimage-exiftool-perl

Then, you can see if an image has metadata:

exiftool myphoto.jpg

To delete the metadata in the image, use the following command:

exiftool -all= myphoto.jpg

It means set all the metadata to nothing. You can verify the change by running the first command again. There will still be basic file information such as when you saved it, the color encoding it uses, and things like that. But none of that is personally identifiable.And the “file modification” field is local to your computer and won’t matter when you upload it somewhere, unlike the other Exif field of “Date/Time Created.”

Back on topic for the <img> tag, you might think the image itself is all there is to an <img> tag, right? But if you want to be inclusive of vision-impaired users of your site, you should include an alt attribute, which is short for alternate. If a vision-impaired user has screen-reading accessibility software, it will read out the alt text using text-to-speech software. The alt text will also show up if the image doesn’t load, such as if someone has a slow connection or if they consciously disabled images in their browser, which is possible but not likely to happen.

There are also other things you can do with an image tag, such as specifying the height or width. In this case, I chose to leave it as-is. If you don’t specify the size, it will display the image in its native resolution. But instead of making a big image smaller with <img> tag height and width attributes, you might want to consider scaling down an image to make a thumbnail, because a big image will have a bigger file size, meaning it will take longer to load. So if you make something like an image gallery, there will be two images for every unique image: one small thumbnail with a small file size, and the full-size image with its greater file size. You don’t want a viewer to have to take a long time for your page to load. My rule of thumb is to never make a web page over 3MB. Be aware that big images can slow down a page, which will leave a bad impression. When you view your web projects locally, they load instantly because they are on your computer. But that’s not how it will be when someone is loading the site remotely after you put it on your web server.

Moving on, the next portion of the page is the <div> with the class of bodytext. That’s because I styled this section differently in the CSS. Within this <div>, there are multiple <p> tags. <p> means paragraph, and it’s used for writing.

Something that is not immediately obvious about having writing on a web page is the way that line breaks work. You might think something like this in HTML would put the words on different lines:

<p>Here

Are

Some

Words

</p>

But here’s what that would actually look like when the web page is rendered:

Here Are Some Words

That’s because browsers ignore extra line breaks. So there are only two ways of breaking up text into multiple lines: the <p> and <br> tags. <p> requires opening and closing tags, but <br> is a self-closing tag. <p> is useful for multiple sentences. It is called the paragraph tag, after all. But the <br> tag is a little different. It just adds a line break, or br for short. However, I think it’s usually best to use a combination of <p> tags and CSS instead of using <br> tags. You can change things like padding, margins, and borders with CSS, instead of just having a bunch of <br> tags.

Finally, there’s the <footer>. This is the stuff at the bottom of the page. It’s still within the <body> tag though. You can use it for things like a copyright notice (Copyright My_Name 2019), but another good use for it is to add social media links. If someone liked the content of the page, they might also want to follow you on social media. Make it easy for people to follow you.

Another tag I didn’t mention is the <table> tag. I didn’t use a table in my example website, but you can make one if you want. The <table> tag is for tabular data, like a spreadsheet or something like that.

Within a <table> tag, you have rows and datums. The tag for table rows is <tr>, <th> is for a table header, and the tag for table datums is <td>. A table datum is an individual piece of data within a table row. The way to make separate columns is to make a <tr> that has multiple <td>s in it.

Some people make the mistake of using <table> tags for any sort of grid arrangement. Don’t do that. Only use tables for tabular data.

Another tag is the <pre> tag, which means preformatted text. What it does by default is make the text in it fixed-with, which can be useful for showing code snippets. This sentence is fixed-width, which means every single character is the same width.

There are more things you can do with HTML, like creating forms and buttons, embedding videos, and more. But for now, you should stick to making simple pages. A website with no interaction is called a static site.

Most websites are not just static HTML and CSS and front-end JS. They also involve backend servers and databases. But start with front-end development for the time being. If you’ve ever used a site with a login system, or the ability to post media, like comments or pictures, that requires backend stuff and databases too, not just HTML, CSS, and JS.

What usually happens when you visit a web page, such as a Twitter account, is that the backend server takes an HTML template and then combines it with data from a database. This type of thing is beyond the scope of this book though. This is different from something called hard-coding, which is where you put your content directly into a page, instead of putting it into a database that gets queried for the content. Hard-coding is not a good practice, but you’ll have to use it when you’re just starting. Just know that, later down the line, you will want to separate HTML and content.

I made an app called Static Site Generator which takes JSON files (as opposed to using a database) and combines it with web page templates. It’s a simple find-and-replace operation, though there are a couple of other things to it, like a pagination algorithm for determining how to sort and display the content in a feed.

← Previous | Next →

Front-End Development Topic List

Main Topic List

Leave a Reply Cancel reply