Basic HTML tutorial
Wanting to learn HTML?
This lesson covers:
- Basic HTML
- How to add JS
- How to add CSS
What is HTML?
The first version of HTML was written by Tim Berners-Lee in 1993. Since then, there have been many different versions of HTML. The most widely used version throughout the 2000's was HTML 4.01, which became an official standard in December 1999. Another version, XHTML, was a rewrite of HTML as an XML language.
Why should you use it?
Now that we've gotten my history lesson and
propaganda out of the way, lets get into the actual coding.
First we start with building our first file, commonly named
index.html. To start it, we should make it like this:
<title> Example of html
<h1> Webpage title here
<p> Webpage text here
Doctype html tells the computer that the code is in html.
Using the <html> tag lets the computer know where the code goes.
In the <head> tag, you can add the title of the webpage.
Not to be confused with a header, the <title> is the words that go in your tab.
The body is where your content will be.
Headers, like markdown, get smaller the higher you go. So, an <h1> header would be the biggest, and an <h6> header would be the smallest.<p> is your paragraph, where your words will go. To close any tag, you have to restate that tag but add / to it. `<p> Words </p>`
Adding more pages
Html pages will almost always end in (.html). To link a page, your code would be like this,
<a href="newpage.html">Click here!</a>
CSS is a styling language, and can be used in many different ways. Most CSS pages are
style.css, so if you wanted to have CSS from a file your code would be:
<link rel="stylesheet" href="style.css" type="text/css">
However, you can add CSS directly to your HTML with the
<style> tag. Adding CSS directly to a file is better for if you have only one page, or if you want all your pages to look different, but having a seperate .css file and linking it is better if you have multiple pages that you want to look the same.
HTML provides the
<canvas> tag for JS and CSS, which can be used to make games, animations, etc.
Most JS files end in (.js), and adding them is a bit more complicated. To add JS to HTML, you need to use the
<script> tag. If you wanted to add a seperate .js file, like CSS, you would use
<script src="example.js"></script>. Or, also like CSS, you could add it individually by just using
<script> code here </script>
A little more complicated now
Using a link is nice, but a button can be useful at times, like if you wanted a picture to be the link.
Speaking of pictures, if you wanted to add one, your code would look like this:
<img src="picture.jpg" alt"example picture">
You can add a gif, a jpg, a jpeg, a png, etc to your <img> tag. Your alt is what is displayed if a computer cannot preview the image.
A button would look something like this:
<button>Name of button</button>
In the middle of the 2 buttons is where you would put the thing displayed. In there you would put the <img> tag. You may be asking yourself, but bwoop, you said a button could be like a link? Well, have no fear! The code for that would look like this:
<button onclick="location.href='file.html'>Click me!</button>
onclick feature can be used in a variety of ways. You can use it to call a JS function,
<button onclick="myFunction()">Click me!</button>
or other things.
Spaces and separators
If you wanted to create space between some stuff on your page, you could put
<br/> which would be the same as pressing "enter" on a replit comment. You could also use
<hr>, which would create a horizontal line across the page, separating whatever was before or after it.
I hope you learned at least a little bit, if there is anything you are confused about, lmk in the chat and tell me what i could do to fix it!
- Referring to:
Html pages will always end in (.html)
Sometimes they end in
.htm too, but it's fairly uncommon.
- Please make sure to include tabs/spaces in your code to make it cleaner. It is better to learn at the start
Otherwise, great tutorial!