4.26. Introduction to HTML: basic structure, tags and attributes: Control structures (if, switch, for, while)
Page 30 | Listen in audio
Introduction to HTML
HTML, which stands for Hyper Text Markup Language, is the standard markup language for creating web pages and applications. Combined with cutting-edge technologies like JavaScript and CSS, HTML allows front-end developers to create feature-rich websites and applications and visually stunning.
Basic structure of an HTML document
A basic HTML document has a specific structure that includes specific tags that define the head (<head>) and body (<body>) of the document . The <html> tag is the document root and all other tags are nested within it. The <head> tag contains metadata about the document, such as its title and links to CSS scripts and stylesheets. The <body> tag contains the actual content of the web page, such as text, images, videos, etc.
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a header</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Tags and Attributes
HTML tags are the basis of the HTML language. They define and describe the content in an HTML document. An HTML tag is composed of an element name, enclosed in angle brackets. Some examples include <h1>, <p>, <div>, etc.
HTML attributes provide additional information about elements. They are always specified in the start element and usually come in name/value pairs. For example, the <a> link tag often uses the "href" attribute to specify the link it should point to.
<a href="https://www.example.com">This is a link</a>
Control structures in JavaScript
JavaScript, like many other programming languages, has control structures that allow developers to specify different execution paths based on conditions and loops. The most common control structures in JavaScript are if, switch, for and while.
if
The if statement is a conditional control structure that executes a block of code if a specified condition is true.
let x = 20;
if (x > 10) {
console.log("x is greater than 10");
}
switch
The switch statement evaluates an expression and executes the block of code corresponding to the value of the expression.
let fruit = "apple";
switch (fruit) {
case "banana":
console.log("I like bananas!");
break;
case "apple":
console.log("Apples are ok.");
break;
default:
console.log("I like all fruits!");
break;
}
for
The for loop is a control structure that executes a block of code a specific number of times.
for (let i = 0; i < 5; i++) {
console.log(i);
}
while
The while loop is a control structure that executes a block of code as long as a specified condition is true.
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
In summary, HTML, CSS and JavaScript are powerful tools that allow developers to create rich, interactive web applications. Understanding the basic structure of HTML, tags and attributes, as well as JavaScript control structures are fundamental steps to becoming an effective front-end developer.
Now answer the exercise about the content:
Which of the following statements correctly describes the basic structure of an HTML document?
You are right! Congratulations, now go to the next page
You missed! Try again.
Next page of the Free Ebook:
31Introduction to HTML: basic structure, tags and attributes: Functions in JavaScript
4 minutes
Earn your Certificate for this Course for Free! by downloading the Cursa app and reading the ebook there. Available on Google Play or App Store!
