Hyper Text Markup Language

So how exactly do we write code for our web pages?

There is this amazing language known as HyperText Markup Language or HTML in short makes it is easy to create a web page structure. It is great to learn for beginners who are just trying to learn how to code. I don't mean EASY as learning your ABC's but its a great way to start learning terminology, syntax, code editors, developer tools, and more. Before trying to learn how to style web pages or add functionalities, we need to learn some fundamentals that will carry on with us throughout our career as a developer. With these simple tricks and tips, we will pick up other languages a bit quicker and efficiently.

Reading Code

Anytime we are trying to learn a new language to help us develop any type of software or web pages. We first need to understand the languages' syntax. In HTML we use element tags to tell the web browser what exactly we want to display on the page.

<h1> HTML Syntax: header element </h1>
<p> Paragraph element </p>

Syntax: the arrangement of words and phrases to create well-formed sentences in a language. You can think of this as the set of rules to create out Web Page Structure.

HTML Element Tags

Here is a quick reference of very commonly used HTML Tags

// used for headers
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>


// used for paragraphs or text
<p> </p>

// used for lists

<ul> </ul>
<ol> </ol>

// used to handle user forms

<form> </form>

If you want to dive more on HTML Tags check out this link.

Working with tags

As you can see we usually include two element tags when trying to pass in any content to the browser. We need a Opening Tag and Closing Tag. Inside the tags is where we put in our context that we want to show on the browser.

Here we have a h1 element tag. The opening tag will usually be between our < > so it will look like <h1>, now we put our context right after our element, once we are done with our context we add another tag but this time we add a / right before our element tag name, so it will look like </h1> and that will be our closing tag for this header.

<h1> Header Element </h1>

Creating HTML Page

Let's go ahead and open up our code editor to create a html file. When we create our code files we have to add the type of language we are using at the end of the file to let the computer know what type of program we are trying to create within the file. So for example if we want to write HTML code we would create a file like with a name of our choosing and add period . at the end of the file name and add html right after.

Once our file is created, we can write HTML Tags onto our file. We will write a header tag to create simple text on the browser.

<h1> Hello World </h1>

e.g. file_name.html

HTML Live Page

Now that we know how to create HTML files, we can open them in the browser. There are numerous ways to start up our HTML file, but for this example, we will manually open it onto our web browser by clicking on our file. Depending on our default browser, it will vary on what browser it will open up. If we have multiple browsers, be sure to pick the most comfortable one. We will be using google chrome for this guide since it provides beneficial developer debugging tools to help make our lives easier when we need to fix our broken code.

1. Locate where you saved your file_name.html file
2. Right click the file
3. Open with (choose a browser)
4. Browser opens HTML file and displays content

e.g.

Congratulations! We just learned how to create HTML files, open it with our browser, and wrote out our first HTML Tags! This is just the beginning of a whole new world! Soon enough you will be able to create much more attractive web pages with color, images, and sections to help readers find what they are looking for easier.

Conclusion

I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.

These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe that should be made to help me and others. Thank you for your time for sticking this far!