HTML is a “programming language” that allows you to create websites and Chrome Extentions easily, allows for customization with css, and scripting with JavaScript. It is very easy to learn, and in this article, you will create a simple about me website in HTML and CSS.
First things first, you must understand the different tags and what they make. Here’s a list of the basic tags and what they do: h1: Creates a heading h2: Creates a smaller heading h3 and so on: create smaller headings p: paragraph text link: how we link the css to the html ⭐️Pretty⭐️ a: How we create links to other pages and websites. div: how we group the elements together to style them and for javascript later img: the tag we use for images.
Alright, let’s get into it. This is the starting code for any HTML Website:
<html>
<head>
<title>Your Website Title</title>
<link rel="stylesheet" href="/">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
If you use VSCode, you can just type ! and click tab. I’ll Explain what it means. The tag is the wrapper for the whole website. The tag is where all of the css linkings, titles, meta tags, and more are stored, like telling the computer about the site before it even loads. the tag is where the actual content of the website is stored. The tag is the heading and it just creates some text. Try creating an html file with your IDE called index.html, paste the code above and run it in your browser. Try out a few of the tags mentioned above and see what they do! One thing about html is that you have to have an ending to it, so every <p> has it’s </p> to end it. Ok, now how do you insert images? It’s easy. The <img> tag. Here’s how you use it.
<img src="./image.png">
It’s that simple. Try adding an image to your project directory and using the img tag. Great! Now you can build a simple Content-filled HTML Website! But if you play around with these, you’ll find out quickly that it is hard to get these to look the way you want them to. In the next article, I’ll show you how to oroganize these and make them look Really good. Click here See you in the Next tutorial!