CodeDragon circular icon

CodeDragon might not work properly for you...

CodeDragon is designed to work with Google Chrome and Firefox, and a few features of CodeDragon have been found not to work properly with other web browsers. To make sure you get the best experience when using CodeDragon, please download the latest version of Google Chrome or Firefox and try again. You can install Google Chrome for free here, and Firefox here.

Or, you can continue anyway.

Introduction: Hello, world!

Introduction/1

Create a simple hello world website using the CodeDragon editor.

Written by Pal Kerecsenyi

Introduction: Hello, world!

Ad Ethical + impactful advertising with tiny prices  Advertise on CodeDragon 
Ad Ethical + impactful advertising with tiny prices  Advertise on CodeDragon 

Hello, world?

When programmers are learning something, they like to make a very simple project which usually just displays the text 'Hello, world!'. Maybe you've seen this before, maybe you haven't. Anyway, it's extremely simple - just follow this tutorial and you'll get there.

Target

Here's what we'll be making (of course, we'll be using the block editor):

Don't worry if this still seems complicated! Just keep reading for an explanation.

Tags

You will have noticed a pattern in the above code snippet. Everything looks like this:

So what does this mean? In HTML, you can label parts of your website with so-called 'tags'. These are surrounded by angle brackets (< >) and contain a specific piece of text inside them. Things like 'body', 'h1' and 'head'. The text inside angle brackets (known as the tag) doesn't get displayed to the viewer, only the text surrounded by the tags. The tags themselves are only there to tell the web browser how to display its contents.

Key points

Tags can be confusing so here are the key points from the above paragraph:

  • Tags come in pairs.
  • They have an opening tag <tag> and a closing tag </tag>.
  • The closing tag is the same as the opening tag but with a '/' at the start.

An opening tag <tag> opens a piece of text and a closing tag</tag> (which contains a / followed by the opening tag) closes it. Makes sense, right?

Basic structure

Every HTML file has to have some basic structure. This is usually:

Firstly, there's the <!DOCTYPE html> tag, which as you can see doesn't have a closing pair. All this does is it tells the browser to use the latest version of HTML, version 5. It's important that you always put it there, so the browser doesn't think you're using an older version of HTML. CodeDragon does it for you automatically when you add the <html> tag.

As for the <html> tag, it simply tells the browser that the HTML website opens there. It doesn't have any practical purpose beyond that, and it's usually unnecessary, but CodeDragon still makes you use it so that you can learn best practices.

Next, the <head> tag contains a set of special tags that are never directly displayed on the page. These include a couple of instructions to the browser telling it what files to use, what to title the page, and more. You'll learn more about these tags later.

The <meta> tag usually contains a single attribute. Attributes always look like this: attribute="property". They contain information that gets applied to the tag, such as styling or identification. In this case, the meta tag contains an unusual attribute, the charset="utf-8" attribute. This does some complicated stuff which we don't want to explain now, but we'll explain it much later. If you want to find out now, just click here.

<title> is quite an interesting tag. It tells the browser what text to put in the little title section above the website. On this page, it looks like this:  You can put any text you want inside it.

Finally, the <body> tag contains the actual page. What you can really see. Text, images, videos and more. All of these go inside the body, and therefore it's the section we'll be focusing on the most.

What goes inside the body?

Great question! For now, we just need one last tag: <h1> defines a header (a large piece of text). The number at the end (1 by default) can be anything between 1 and 6. The number determines the size of the header, 1 being the largest and 6 the smallest.

Your task

Finally, you get to make something!

  1. Drag the first block into the editor. We've already grouped it to make your life easier.
  2. Inside the head, drag the meta tag and the title tag.
  3. Click on the textbox inside the title tag, and change it to 'Hello, world!'.
  4. Drag the header (h1) tag into the body.
  5. Inside the 'text' block, click on the textbox, and set the text to 'Hello, world!' again.

End of tutorial