260 reads

Using Atom Text Editor As IDE

by EddySeptember 1st, 2020

Too Long; Didn't Read

HyperText Markup Language is used to create every webpage. It defines the structure and the content of a page. HTML tags are what HTML uses to define these structures. There are 6 heading tags in HTML from <h1> all the way to <h6>. All HTML files must start and end with an HTML tag. The indents represent what tag we are "inside" The last tag that was used in the video was a heading 1 tag. We'll look into this more in the next lesson.

Companies Mentioned

featured image - Using Atom Text Editor As IDE

Let's set up your computer so it's ready to code.

I recommend the Atom text editor for coding.

Watch this video to see how to get yourself setup.

Code Explained

HTML stands for HyperText Markup Language. It's used to create every webpage. It defines the structure and the content of a page.

Tags are what HTML uses to define these structures. Tag names are surrounded by <>, also known as angle brackets.

Angle brackets are the greater than and less than signs, above the period (.) and comma button (,) on most keyboards.

Tags typically have an opening tag and a closing tag (there are some exceptions to this rule).

All HTML files must start and end with an html tag.

<html>
</html>

Closing tags in HTML have a '/' after the first angled bracket.

To display something in the browser, you should enclose the content inside body tags.

<html>
  <body>
    Hello HTML! 
  </body>
</html>

Notice how we start to indent our HTML code here. This makes it easier to read. The indents represent what tag we are "inside". It's clear that the body tag is inside the html tag here, and that our sentence "Hello HTML!" is inside the body tag.

The last tag that was used in the video was a heading 1 tag. There are 6 heading tags in HTML from <h1> all the way to <h6>. We'll look into this more in the next lesson.

<html>
  <body>
    <h1>Heading 1!</h1>
    Hello HTML! 
  </body>
</html>

Hotkeys

CMD + S / CTRL + S to save
CMD + R / CTRL + R to refresh your browser

Action Items

Before proceeding you should have completed the following:

Installed Atom on your computer
Opened Atom and created a website.html file
Added the code in this lesson to your website.html file
Loaded website.html in your browser (Google Chrome is recommended)
Modified the code (simply change the text), saved it and refreshed your browser to see the change.

Once you've completed these steps and are comfortable with how everything works, you're ready to move on to the next lesson.

If you have any questions, please let me know - email me [email protected]

Previously published at https://www.risingblock.com/setup-your-computer

L O A D I N G
. . . comments & more!

Using Atom Text Editor As IDE

Too Long; Didn't Read

Companies Mentioned

Code Explained

Hotkeys

Action Items

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES