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.
Create a simple hello world website using the CodeDragon editor.
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.
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.
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.
Tags can be confusing so here are the key points from the above paragraph:
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?
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.
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.
Finally, you get to make something!