HTML tutorial

05-02-2023

Here I start with the first part of what I plan to be a pretty complete set of tutorials on web development. The best way to learn any technology is to build a few projects using it. So don't hesitate and start a project with html, build a basic site. Don't keep watching tutorials, they'll lead you to nowhere.

What is HTML

HTML or hyper text markup language, is the language we use to build websites. It defines the structure of your website which you can later style and make beautiful with CSS and add interactivity with Javascript.

Setup

For this you'll only need a text editor and browser. Nothing else. For the text editor I personally use vim, most web devs prefer VsCode, at this stage even notepad will do but I highly recommend you switch to something better like VsCode.

To start writing html, create a new file with a .html file extension write some random text in it and open it with your browser. You should see a page with only that text in it.

HTML elements

HTML is written using elements, there are headings, images, paragraphs and many more. Let's try and add a heading to your html file. Add the following to the top of your file: 


      <h1>Hello World</h1>
Now refresh and your page should have a title saying "Hello World". There are 6 types of headings in total, starting from h1 to h6 each time the text size decreasing in size. Add the following after your title for a paragraph with some text in it. 

      <p>
        This is my very first html paragraph.
      </p>

Attributes

Let's add a link to our page now. The element for a link is a. However we need something more, we need the destination, where does your link point to. Here's where attributes come in to play. Some html elements have attributes which can take some value, in the case of the link element the href attribute specifies the destination. Let's say we want our link to point to searx.be 


      <a href="https://searx.be">My search engine</a>
How about an image? Notice you don't need to close the img tag with </img> 

      <img src="https://link-to-an-image.com">
Now try to make the image redirect you to searx.be when you click it. Try it yourself before you look at the solution.

Structure of an HTML site

Usually HTML sites have some extra structure surrounding the main content. 


      <!DOCTYPE html>
      <html>
        <head>
          <link rel="icon" type="image/png" href="../favicon.png">
          <title>HTML course</title>
        </head>
        <body>
          <h1>HTML course</h1>

          <p>Blablabla</p>
        </body>
      </html>
The whole document is surrounded by an html tag, then there's the head which takes in info about the page like the title and the icon to show in your browser tab. Then there's finally the body with all the actual content of your website, this is where everything you learned until now goes.
Exercise: transform your page so it has this structure and play around with the title and image inside the head tag to see how your tab changes in the browser.

Good coding practices

It's good to format your code so that it's more readable. Main points are indentation, each nested element should be more indented I like using 2 spaces as my indentation, others like 4 and others like tabs, use whatever you like. Trust me it's really important or else your site will quickly devolve into an unmanageable mess.

Homework

Now for your homework. Create a couple of simple html sites, use a bunch of html elements experiment, go nuts. This is the best way to learn, if you get stuck, search it up. Have fun :). Now you can even start inspecting sites and see how they are structured (Ctrl+Shift+I or right-click and press Inspect in the browser). Mine should be good for beginners.

Next Steps

You'll notice your site has no color and maybe it's not as stylish as you would like it to be. This is where CSS chimes in. It's the next step of your journey and is what gives a site it's style. If you got the hang of html go take a look at CSS next.

Some useful html elements

Links