4.30. Introduction to HTML: basic structure, tags and attributes: Events in JavaScript
Page 34 | Listen in audio
Introduction to HTML
HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages and applications. Along with CSS and JavaScript, HTML is an essential technology used by web developers. HTML provides the structure of a web page, CSS the visual style and JavaScript the interactivity.
Basic structure of HTML
An HTML document is made up of two main elements: the 'head' and the 'body'. The 'head' contains information about the document, including the title that appears in the browser's title bar and links to CSS and JavaScript files. The 'body' contains the actual content of the page, such as text, images, videos, links, lists, tables and forms.
Here is the basic structure of an HTML document:
<!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> Page content </body> </html>
HTML Tags and Attributes
HTML tags are used to create HTML elements. A tag is made up of a tag name (such as 'p' for paragraph, 'h1' for first-level title, 'img' for image), surrounded by square brackets. Most tags have an opening tag and a closing tag, with the element's content in between.
Here is an example of a paragraph element:
<p>This is a paragraph.</p>
HTML attributes are used to provide additional information about an element. They are placed in the opening tag of the element and are composed of an attribute name and an attribute value. The attribute value is always enclosed in quotation marks.
Here is an example of an image element with attributes 'src' (which specifies the URL of the image) and 'alt' (which provides alternative text for the image):
<img src="imagem.jpg" alt="A beautiful image">
Events in JavaScript
JavaScript is a programming language that allows you to add interactivity to a web page. One way to do this is using JavaScript events.
An event is something that happens in the browser, such as a mouse click, a key press, a page loading, or an interval of time that has passed. JavaScript can respond to these events and execute code when they occur.
To make JavaScript respond to an event, you first need to identify the HTML element that you want the event to occur (such as a button), and then you need to specify the event that you want JavaScript to respond to (such as a mouse click ). This is done using an event handler.
Here is an example of how to make JavaScript respond to a mouse click on a button:
<button onclick="alert('You clicked the button!')">Click me!</button>
In this example, the 'onclick' event handler is used to specify that JavaScript should respond to a mouse click. The JavaScript code to be executed when the event occurs is enclosed in quotation marks after the event name. In this case, the JavaScript code simply displays an alert box with the message "You clicked the button!".
JavaScript events are an essential part of creating interactive web pages. They allow you to create pages that respond to user actions and provide a more dynamic and engaging user experience.
Now answer the exercise about the content:
What is the role of the HTML language in creating web pages and applications?
You are right! Congratulations, now go to the next page
You missed! Try again.
Next page of the Free Ebook:
35Introduction to HTML: basic structure, tags and attributes: AJAX and Fetch API
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!
