Introduction - Setting up development environment

2. Setting Up Your Environment

• Tools and Editors
  • Recommended text editors (VSCode, Sublime Text, Atom)
• • Brief overview of each editor
• • Installing and setting up your chosen editor
• Basic Structure of an HTML5 Document

HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content:

My cat is very grumpy

If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:

htmlCopy to Clipboard

<p>Please like, share and subscribe </p>

![[grumpy-cat-small.png]]

1. The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.
2. The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
3. The content: This is the content of the element, which in this case, is just text.
4. The element: The opening tag, the closing tag, and the content together comprise the element.

![[grumpy-cat-attribute-small.png]]

Attributes contain extra information about the element that you don’t want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value.

1. A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
2. The attribute name followed by an equal sign.
3. The attribute value wrapped by opening and closing quotation marks.

Nesting elements

<p>Hit the subscribe <strong>button</strong> for upcoming videos.</p>

You can put elements inside other elements too — this is called nesting. If we wanted to state that our cat is very grumpy, we could wrap the word “very” in a <strong> element, which means that the word is to be strongly emphasized:

Void elements

Some elements have no content and are called void elements. Take the <img> element that we already have in our HTML page:

htmlCopy to Clipboard

<img src="images/icon.png" alt="logo" />

• Creating Your First HTML5 Page
  • Step-by-step guide to creating a simple HTML page
  • Saving and opening your HTML file in a browser