HTML Essentials
1. Starting point
Create a new file called index.html in a new folder called app. All HTML pages are based on tags (html, title, body, h1, etc) and start from the same structure:
app/index.html
<html>
<title>First app</title>
<body>
<h1>Welcome to HTML Essentials tutorial</h1>
</body>
</html>
The only values that are customizable in the above app are the title and the h1 tags text values. These values can be seen if we open the newly created file into a browser.
2. Building blocks
<button>This is a button</button>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is a paragraph</p>
<div>This is the most used building block in web apps. It is
called a division and is very versatile. Basically is a container for
any kind of html elements.</div>
<input/>
The HTML elements have specific attributes (common and specific). For example, the anchor element has href attribute that alows us to specify the target of the link.
<a href="https://www.danradu.ro">Attribute anchor example</a>
Inputs could also be configured through attributes:
<input type="text"/>
type="text"type="password"type="checkbox"type="radio"type="range"type="date"3. Adding JavaScript
Adding JS into HTML
app/index.html
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
Adding JS from external file
app/index.html
<head>
<script src="myScript.js"></script>
</head>
<body>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
app/index.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}