Home Computers Getting started with HTML
December 20, 2018
A+ A-

Getting started with HTML

A curious learner: Hey Ansh, I know a bit of basic HTML, can you help me learn more?

Hey curious learner, why not! Everyone wants to have a cool website (along with a fidget spinner) these days. (And no, Amazon isn't giving them together) First we're going to download some cool softwares, which would help you to code faster.
You can try either Notepad++ or Sublime Text. They're both free softwares, and you can download them using these links. I prefer to use Sublime Text for coding in HTML.

Getting started with Sublime Text

The beauty of this editor is the variety of shortcuts it has to offer. Let's not waste time. There's this way to just open up Sublime Text and get started with coding; and then, there's this way which is likely to be beneficial in the future so let's stick with the latter.

Create a folder

Websites have their own separate folder. This makes searching and uploading files to the server easy, and helps us to be organised. So first create a new folder. I'm creating a folder named 
ansh
. Next, open Sublime Text and do this:
File menu > Open Folder...
Browse and open your new folder and you're done. Remember this step.





Create the file 
index.html

index.html will be the main file of the website. A front page sort of thing, it's called the homepage. Now, I'm sure you remember the old school typing 
<html>...</html>
and so on. We won't type it manually, we'll ask Sublime Text to type it. Here's how:

Press Ctrl+Shift+P

A small box opens up. It's called Command Palette (I didn't know it's called that, I had to look that up just to tell you). Type 
sshtml
.






Basically what you've done is that you've told Sublime Text that the language you're typing is HTML. The 
ss
in 
sshtml
means set syntax (I knew this).
Now type 
<h
(you don't even need to type 
html
, just type 
h
. As soon as you do that, you'll see a menu like this:

Press Tab two times and see the magic! Finally, put something between the title tags and the body tags and save the document as 
index.html
in your folder. Why don't we match our files? My 
index.html
after doing all this looks like this:

<!DOCTYPE html>
<html>
<head>
 <title>My good ole webpage</title>
</head>
<body>
 Hello, I'm Ansh Sharma. Welcome to my website :-)
</body>
</html>

Save this file and try opening this with your favorite web-browser. Also, congratulations, you've successfully crafted your first website.

This wiki can also be viewed over GitHub.