Make Your Own Website - HTML : the code editor and your first webpage

ragepeanut (62)in #programming • 9 years ago (edited)

This post is also available as a DTube video by clicking on the image above or as a YouTube video by clicking here.

In the last post, I talked about all the languages we will have to use throughout this course. We saw that each one has a specific task: structuring with HTML, styling with CSS, preprocessing data with PHP and dynamizing the page with JavaScript. As planned, we will see in these first posts how to code in HTML. But before we know how to code, it would be better to know what to use, don't you think ? To code, you will need... a code editor. It seems pretty logic, doesn't it ? A code editor works exactly like your typical text editor but has a bit more functionalities especially the possibility of having a tree view of your folder. In fact, you could technically code with your default notepad but who wants to do that when literally everything else does the job better nowadays ? When it comes to picking a code editor, it really depends about your tastes. Any code editor made for website development should be fine, I personally love using Atom but there are plenty more good code editors out there, some of them being better than the one I use but I'm already too accustomed to it to change. Following this paragraph is a little list of free code editors I gathered by asking some of my friends. For each one of them, I put the steps you should go through to create the basics of our website folder. You can name the folder anything you like, I will name mine My Awesome Website. All the files necessary for your website (by that I mean the files you plan to store on the server) must be in this folder. You can still put them in sub-folders inside the one you created, all that counts is that they aren't outside of it.

Atom
1. Create your folder somewhere on your computer
2. Launch Atom
3. Click on File then Add Project Folder...
4. Search for your folder, click on it and then on Select Folder
5. Right-click on your project folder then click on New File
6. Fill the box with the name index.html
Brackets
1. Create your folder somewhere on your computer
2. Launch Brackets
3. Click on File then Open Folder...
4. Search for your folder, click on it and then on Select Folder
5. Right-click on the left section and click on New File
6. Name it index.html
Light Table
1. Create your folder somewhere on your computer
2. Launch Light Table
3. Click on File then Open folder
4. Search for your folder, click on it and then on Select Folder
5. Right-click on your folder and click on New file
6. Name it index.html
Notepad++
1. Create your folder somewhere on your computer
2. Launch Notepad++
3. Click on File then New
4. Click on File then Save As...
5. Search for your folder and get inside it
6. Name your file index.html and select Hyper Text Markup Language file for the type
Sublime Text
1. Create your folder somewhere on your computer
2. Launch Sublime Text
3. Click on File then Open Folder...
4. Search for your folder, click on it and then Select Folder
5. Right-click on your folder and click on New File
6. Click on File then Save As...
7. Search for your folder and get inside it
8. Name your file index.html and select HTML for the type
Visual Studio Code
1. Create your folder somewhere on your computer
2. Launch Visual Studio Code
3. Click on File then Open Folder...
4. Search for your folder, click on it and then Select Folder
5. Click on New File when hovering your folder name
6. Name it index.html

If you are willing to pay for a code editor, some good paying code editors I heard of are Dreamweaver, UltraEdit and WebStorm. However, the code editors suggested above are just as good for what we will be doing and even for way more advanced tasks.

But @ragepeanut, why do I need to name my file index.html ? Can't I name it something fancier like myAwesomeWebsiteThatIMadeByMyself.html ?

Well, first of all this name is ridiculously long, who would want to call his file like that ? Okay, it's time for the real explanation now. It actually dates back to the early days of browsers. When I made my first website, I thought the exact same as you. Since my website was about indie games and its name was Indie Time, it made sense to create a indietime.html file instead of a index.html one. In truth, it isn't a good idea at all. You may have already tested opening a folder in your browser, in which case you have seen something like this :

It looks like a bad version of your file explorer and in some ways it is. What it actually represents is the result of the browser showing you what you asked it to show, in this case the content of the folder. A file named index was originally introduced to specify how the files should be indexed when opening their parent folder in a browser. Although it isn't used for that anymore, it stuck with web development through all those years and now serves a new purpose. When you connect to a website not specifying any file extension (which means going on www.tutorial.com instead of www.tutorial.com/index.html), it gives you a default file which is named, you guessed it... index.html. By creating a index.html file, you put this file as the default landing page.

It's time to create our first webpage ! Well, it won't be something that amazing yet but still, it will set the basics of everything that comes next. Go ahead and write this code in your index.html file you just created.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My Awesome Website</title>
    </head>
    <body>
        Hello World !
    </body>
</html>

Now let's analyze what we just wrote so we can learn what all these things mean and, therefore, when to use them. If you fully read my first post, you may already know most of what I'm going to say but a little reminder doesn't hurt !

<!DOCTYPE html>

This piece of code is necessary for the browser to know which version of HTML we are using to make our page. Before HTML5 got released, you would see a reference to a DTD (Document Type Definition) in this tag. It is not the case anymore because HTML5 is not based on SGML (Standard Generalized Markup Language). With HTML5 adapting over time, it is possible that this piece of code will never change ever again as HTML6 would never see the light.

<html>

The html tag specifies to the browser that he is working on a HTML document and is the root container for all the other tags.

<head>

The head tag is the container for all the tags that aren't used to show content but to set some unique properties. It's in this tag that we will be able to change the website icon, its title, its search description, its keywords, etc. It's also in this tag that we will link to CSS files and to JavaScript files, although we will later see that JavaScript files shouldn't always be put in there.

<meta charset="utf-8">

The meta tag is used to set a variety of things, some of which I've talked about when explaining the head tag. It is short for "metadata", which means it gives information about data. It can be kind of confusing at first but you will quickly understand after my post dedicated only to the meta tag.

<title>My Awesome Website</title>

The title tag is pretty self-explanatory. It is used to give a title to our page. This title will be outputted on your tab etiquette as well as on search engines. Notice that a tag containing text or other tags should always be closed afterwards respecting this typology : <tag>CONTENT</tag>.

</head>

Therefore, we shall do the same with the head tag.

<body>

The body tag is the container for all the tags that are used to show the visible content of the page. It's in this tag that we will write most of our HTML code.

Hello World !

Nothing special there, just outputting "Hello World !" to the screen. We will see the tags dedicated to text and hypertext in a post very soon. If you are used to Markdown, you have already used most of them but with a Markdown syntax.

</body>

The body tag can contain other tags therefore it has to be closed.

</html>

Of course, the same applies to the html tag as it is the root container.

Now let's open our file in our browser. Just right-click on it, then click on Open with... and select your favorite web browser. If you did everything right, you should see "Hello World !" on the page. You can also notice the tab etiquette text is the text you put in the <title>. If no title was specified, we would see the name of the file instead. Congratulations, you just made your first webpage ! Of course, it isn't that impressive of a webpage but it helps us having a base to work on top of. Next time, we will take a closer look at the head tag and all the useful tags to put into it. See you then !

Want to learn more ?

Subject	Title	Author	Type
Code editor vs IDE	Code Editor vs an IDE	Stefan Mischook	Video
Atom	My Code Editor: Atom, Setup & Packages	DevTips	Video
Brackets	Developer's Toolbox: Brackets	TeamLearnable	Video
Light Table	The quick basics of Light Table	ThisCanvasWas(once)Blank	Video
Notepad++	How to use NotePad++	AvacWeb	Video
Sublime Text	Sublime Text 3 Setup - Most Important Packages	Alessandro Castellani	Video
Visual Studio Code	VSCode Tutorials #1 - Introduction To Visual Studio Code	LevelUpTuts	Video
<!DOCTYPE>	HTML <!DOCTYPE> Declaration	W3Schools	Text
<!DOCTYPE>	Recommended Doctype Declarations to use in your Web document	W3C	Text
UTF-8	Characters, Symbols and the Unicode Miracle	Computerphile	Video
UTF-8	HTML Unicode (UTF-8) Reference	W3Schools	Text
Hello World !	The History of Hello World	The Software Guild	Text