4.23. Introduction to HTML: basic structure, tags and attributes: Introduction to JavaScript
Page 27 | Listen in audio
HTML (Hyper Text Markup Language) is the standard markup language for creating web pages and applications. It is one of the main tools that a front-end developer needs to master. This HTML, CSS and Javascript course aims to provide all the basic and advanced concepts needed to become a competent front-end developer.
Basic Structure of HTML
An HTML document is structured as a set of nested HTML elements. Each element is represented by opening and closing tags, with content in between. Here is an example of the basic structure of an HTML document:
<!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <h1>My First Header</h1> <p>My first paragraph.</p> </body> </html>
The <!DOCTYPE html> defines the document type and HTML version. The <html> is the root of the HTML document. The <head> contains meta information, such as the page title, which is displayed in the browser's title bar. The <body> contains the main content that is displayed to users.
HTML Tags and Attributes
HTML tags are used to define elements such as headings, paragraphs, links, images, lists, etc. Each tag has a specific purpose and must be used accordingly. For example, the <h1> is used to define the most important heading, while the <p> is used to define a paragraph.
HTML attributes are used to provide additional information about an element. They are always specified in the opening tag and usually come in name/value pairs. For example, the <a> (which defines a link) can have a 'href' attribute that specifies the URL of the link.
<a href="https://www.example.com">This is a link</a>
In this example, 'href' is the attribute name and 'https://www.example.com' is the attribute value.
Introduction to JavaScript
JavaScript is a programming language that allows you to implement complex functionalities on web pages. When a web page is more than just static text and includes behaviors like real-time updates, interactive maps, 2D/3D animations, video scrolling, etc., you can bet JavaScript is probably involved.
The syntax of JavaScript is quite similar to the syntax of the C and Java programming languages. Therefore, if you have experience with these languages, learning JavaScript will be much easier. Here is an example of simple JavaScript code that displays an alert dialog:
<script> alert("Hello, World!"); </script>
In this example, 'alert' is a function built into JavaScript that displays an alert dialog with the specified message.
So, throughout this course, you will learn more about HTML, CSS and JavaScript and how these technologies work together to create interactive and responsive web pages. With dedication and practice, you can become a competent front-end developer.
Now answer the exercise about the content:
What is the purpose of the <h1> in HTML?
You are right! Congratulations, now go to the next page
You missed! Try again.
Next page of the Free Ebook: