In this lesson you will look into HTML, what it is, and what the code looks like.
What Is the Basic HTML Syntax
HTML contains the high level structure of the page and content - a typical webpage will have the following look about it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Javascript Course</title>
<style>
body {
background-color: blue;
}
</style>
<script>
let myJavascript = "awesome";
</script>
</head>
<body>
<header id="header-bar"></header>
<main>
<div id="title-area">Hello World!</div>
<div class="custom-text-box">Lorem Ipsum</div>
<div id="number-display">05</div>
</main>
<footer>Copyright CodingNomads 2020</footer>
</body>
</html>
Take a minute and look at this, read it all, make a note of what you don't understand.
What Are HTML tags
HTML tags serve as the fundamental building blocks for structuring and defining the content of a webpage. Enclosed within angle brackets (< and >), these tags can be self-closing or require a closing tag to properly delineate their scope and purpose. All professional websites have at least a head and a body.
The Head Tag
The head contains meta-information as well as details that is not directly visible on the webpage itself. It can include information like what character set to use and a brief description of the website which can be displayed in search engine results .
The Body Tag
The body contains the information that you see when you visit a webpage. It holds the main content, and where everything like headers, main sections, columns, sidebars, buttons and footers are contained.
Every element you see on the page generally has its own set of tags in the source HTML. These elements are sometimes called divs - an abbreviation of "division", which refers to a "vanilla" type of element, denoted with the tags, <div>I am a basic element</div>.
Question: why would this annoy a web developer?
How to Create a Basic HTML File
Try creating your own HTML file and implement what you have learned so far.
There are different ways to create and HTML file. You can either create a text file, and rename it, with the extension .html.So if you create a file called myfile.txt rename it to myfile.html. You can also use the command line and navigate to the folder you want to make the file and type touch myfile.html then, if VSCode installed correctly, you can even type code myfile.html and VSCode will open up and you can edit it from there.
Once you have opened your new HTML file in your web browser, open the developer tools and check out the 'Elements' section, where you will see the rendered HTML.
<html>
<head></head>
<body>
Hello World!
</body>
</html>
See how it has automatically tagged the text? This represents a webpage at its most basic.
While you can be fast and loose with HTML, its usually not best when working with anything more complex than a static page of information. For your JavaScript to be able to interact with it, it will need to be well structured, and have attributes like the extremely useful id attribute. For example:
<body>
<header id="header-bar"></header>
<main>
<div id="title-area">Hello World!</div>
<div id="custom-text-box">Lorem Ipsum</div>
<div id="number-display">05</div>
</main>
<footer>Copyright CodingNomads 2020</footer>
</body>
These IDs are unique identifiers for divs. JavaScript can then call a certain ID and modify its attributes or contents.
Summary: How To Learn Basic HTML
- Tags are the building blocks of HTML files and allow to properly structure and define the content of a page
- Each file contains at least a
headand abodytag - The
headincludes the meta-information which is not visible to the user - The
bodyincludes the main content that is displayed on the webpage - You can create an html file by simply creating a text file and changing the extension to .html or using the command line