HTML JavaScript

In this tutorial, you will learn what is javascript, how to use javascript in HTML, how to include external javascript in HTML, and will see few examples related to this.

What is JavaScript?

Javascript is a scripting language that is mainly used in web development. Using javascript you can write programs that can interact with a webpage’s element.

It can control HTML element’s behavior and makes HTML pages dynamic and more interactive by giving users a way to interact with the webpage. HTML use javascript for client-side scripting.

Nowadays JavaScript is compatible to works on both front-end and back-end🔥. But here we will only talk about the front end.

How to use JavaScript in HTML?

Both HTML and javascript are different languages. So for them to work together you first have to connect then in some way.

There are two ways by which javascript programs can be added to the HTML webpage:

1. By writing javascript code within the webpage ( Internal javascript )
2. By writing javascript code in an extern js file and then connecting it to the webpage ( External javascript )

1. Internal JavaScript

One way to use javascript in HTML is by writing javascript within the HTML file.

To write javascript within the HTML file, you have to add a script tag in the HTML file.

Now you can write the javascript code within the script tag.

This is the javascript code within the HTML file.

Here is the complete code of a javascript within the HTML file. You can insert a script tag anywhere within the head or body of the document, also you can add as many scripts as you want.

     
First script tag in body.
  
Second script tag in body.
   

2. External JavaScript

Another way to use javascript in HTML is by writing javascript in an external js file and then connecting it to the HTML file.

Here is the external javascript file. You can put it anywhere you want.

alert('Hello world!');

Now connect the external javascript file to HTML with a script tag. Here is the complete code.

     
External JavaScript file added to this html document.
   

Use of javascript

Javascript is mainly used in developing websites. It can perform various tasks on the webpage like it can change or modify the content of any element, can change the size of the container, can change the color of the text, can create animations, and many more.

Here we are going to see a few usages of javascript.

1. Changing the color of the text

Javascript can change the color of text on the webpage. Here is the code to change the color of the text.

Here is the complete code.

2. Changing the size of container

Javascript can change the size of the container on the webpage. Here is the code to change the size of the container.

3. Changing element content using javascript

Javascript can change the content of any element on the webpage.

You are learning HTML click to change content of id1 function changeContent() 

4. Changing box sizing using javascript

Javascript can change the container sizing of any element on the webpage. You can change the width or height of the container by selecting it from the document.

click to change box size 
 function changeSize() 

Changing other style using javascript

Javascript can change the style of any element on the webpage.

click to change content of id1 
 function changeStyle() 

The noscript tag

The noscript tag is used to hide the content of the page from non-javascript enabled browsers. It displays a message in case your browser does not support javascript. It is used to hide the content of the page from non-javascript enabled browsers.

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

Примітка: Браузери автоматично додають відступ (margin) до і після заголовка.

Заголовки важливі

Пошукові системи використовують заголовки для індексації структури та змісту вебсторінок.

Користувачі часто переглядають сторінку по її заголовках. Важливо використовувати заголовки, щоб показати структуру документа.

заголовки необхідно використовувати для основних заголовків, а потім заголовок, менш важливий і т.д.

Примітка: Використовуйте HTML-заголовки тільки для заголовків. Не використовуйте заголовки, щоб зробити текст БІЛЬШИМ або жирним.

Великі заголовки

Кожен HTML заголовок має розмір за замовчуванням. Однак, ви можете вказати розмір для будь-якого заголовка з атрибутом style , використовуючи властивість CSS font-size :

Приклад

Заголовок 1

HTML Горизонтальний роздільник

Тег

визначає тематичний розрив на HTML сторінці і найчастіше відображається як горизонтальний роздільник (горизонтальна лінія).

Елемент

використовується для поділу вмісту (або визначення зміни) на HTML сторінці.

Приклад

Це заголовок 1

Це якийсь текст.

Це заголовок 2

Це якийсь інший текст.

HTML елемент

HTML елемент (голова) – це контейнер для метаданих. Метадані HTML – це дані про документ HTML. Метадані не відображаються на сторінці, вони потрібні для службових цілей (пошукових роботів і вебдодатків).

Елемент знаходиться між тегом і тегом :

Приклад

Примітка: Метадані зазвичай визначають заголовок документа, набір символів, стилі, скрипти й іншу метаінформацію.

Як переглянути вихідний код HTML?

Ви коли-небудь бачили вебсторінку і задавались питанням “Опачки! Як же вони це зробили?!”

Перегляд вихідного коду HTML:

Клацніть правою кнопкою миші сторінку HTML і виберіть “Переглянути джерело сторінки” (в Chrome) або “переглянути джерело” (в Edge), або “Вихідний код сторінки” (в Firefox), або “джерело сторінки” (в Opera) або щось схоже в інших браузерах. Відкриється вікно, що містить вихідний код HTML сторінки.

Дослідити HTML елемент:

Клацніть правою кнопкою миші елемент (або порожню область на сторінці) і виберіть “Переглянути код” або “Дослідити елемент”, щоб побачити, із яких елементів складається сторінка (ви побачите і HTML, і CSS). Ви також можете редагувати HTML або CSS код на льоту в панелі, що відкривається – “Елементи або стилі”.

HTML Вправи

HTML Довідник тегів

Довідник тегів містить додаткову інформацію про ці теги та їх атрибути.

Детальніше про теги та атрибути HTML ви дізнаєтеся в наступних розділах цього підручника.

Для отримання повного списку всіх доступних HTML тегів, відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.

Запитання для самоконтролю

• Що таке HTML-заголовки?
• Навіщо потрібні HTML-заголовки?
• Які бувають заголовки на HTML-сторінках?
• Який тег визначає найбільший і найменший заголовок?
• Що таке горизонтальний роздільник на HTML-сторінці?
• Який тег визначає горизонтальний роздільник на HTML-сторінці?
• Для чого потрібен HTML-елемент head?
• Де на веб-сторінці знаходиться елемент head?
• Який тег використовується для запису назви веб-сторінки?
• Який тег використовується для збереження інформації, яку використовують браузери та пошукові системи?
• Як переглянути вихідний HTML-код в браузері?
• Як дослідити HTML-елемент за допомогою браузера?