What does HTML stand for

HTML stands for HyperText Markup Language. It is a programming language for creating the structure and the contents of the website.

Every website you visit including this one which you are reading right now is built with the help of HTML. The texts, videos, images, buttons, hyperlinks, and so much more are what HTML can do.

HTML is important because it allows us to add contents to the web page, and it is one of the three main tools for creating websites. The other three tools are CSS and JavaScript.

The cool thing about HTML is despite its long name and the importance of building the website – it is surprisingly simple to learn the skill.

You can learn the basics of HTML in just a few weeks, and with another month of practice, you can expect to be proficient in it. Everyone can learn to code in HTML regardless of their age, education and work background, and prior experience in programming.

Because of this, it often acts as a gateway to the world of programming and web development in particular.

To learn more about HTML, check out this article where you will learn the basics of HTML from the beginning.

If you find the concept of HTML interesting, and you want to get a job in programming, sign up for the course today.

You will learn top programming skills like HTML, CSS, JavaScript, and much more that are in high demand, and you will be able to practice them in a real-world scenario.

Plus, you will also practice technical interviews by answering common questions asked during the job interview. All these will help you to become a professional software engineer one year from now.

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.

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.

Теги та атрибути

Тег (tag) — елемент мови розмітки гіпертексту. Це найменші будівельні блоки, з яких складається будь-яка веб-сторінка. Кожен тег позначає якусь сутність: заголовок, список, абзац тексту, зображення.

Для виділення тегів серед тексту документа використовуються кутові дужки, в яких вказується ім’я тегу і його атрибути.

Відкриваючий тег вказує, де починається елемент, закриваючий – де закінчується. Закриваючий тег утворюється за допомогою додавання слеша ( / ) перед іменем тегу. Між відкриваючим і закриваючим тегами знаходиться вміст тегу – контент.

section>Секціяsection> p>Абзацp> a>Посиланняa> button>Кнопкаbutton> 

Коментарі​

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

   p>Це абзац тексту, він буде на сторінці.p>    Коментар може бути багаторядковим.  Це зручно для об'ємніших описів. --> 

Атрибути​

Атрибути – це додаткові налаштування тегів, за допомогою яких можна змінювати властивості і поведінку елемента. У кожного тегу є обов’язкові і необов’язкові атрибути, їх може бути декілька або зовсім не бути.

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

a href="https://google.com" class="link">. a>  img src="cat.jpg" alt="cute cat" />  input type="text" name="user_name" />  button type="submit">. button>  p class="text">. p> 

Розглянемо деякі атрибути тегу .

a href="http://google.com" target="_blank" title="Пошукова система Google">  Google.com a> 

• href – адреса сторінки, на яку перейде користувач після натискання на текст посилання.
• target – вказує на те, в якій вкладці відкривається сторінка після кліку на посилання
• title – додає спливаючу підказку до тексту посилання.

Розглянемо деякі атрибути тегу .

img src="https://picsum.photos/640/480" alt="Довільна картинка від генератора" /> 

• src – адреса зображення.
• alt – альтернативний текст, який буде показаний, якщо зображення не завантажилося.

Для того щоб дізнатися доступні атрибути тегу та їх призначення, можна зайти в документацію або довідник, наприклад htmlreference.io.

Парні теги​

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

  article> h1>Коротко про парні тегиh1> p>  Більшість тегів парні. Їх контент вкладений між відкриваючим і закриваючим  тегом. p> article> 

Одинарні теги​

Складаються тільки з відкриваючого тегу, не містять текстового контенту і отримують контент або поведінку з атрибутів. Слугують для зміни властивостей документа, підключення файлів тощо.

  meta charset="utf-8" />    input type="text" />    img src="cat.jpg" alt="cool cat" /> 

У попередніх стандартах HTML поодинокі теги обов’язково записувалися зі зворотним символом / перед закриваючою дужкою. Наприклад або . В сучасному стандарті – це необов’язково і ні на що не впливає.

Вкладеність тегів​

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

тег1> тег2> тег4>. тег4> тег5>. тег5> тег2> тег3> тег6>. тег6> тег3> тег1> 

Ось валідна розмітка абзацу з посиланням і виділеним текстом, а також списку переваг з описом.

p> a href="squoosh.app">Squoosha> - сервіс em>оптимизаціїem> зображень. p>  p>Перевагиp> ul> li>Працює в браузеріli> li>Не навантажує системуli> li>Зручний інтерфейсli> ul> 

А в цій версії є проблеми (рядки підсвічені).

  p>a href="squoosh.app">Squoosha> - сервіс em>a>оптимизаціїp> зображень.em>    ul> p>Перевагиp> li>Працює в браузеріli> li>Не навантажує системуli> li>Зручний інтерфейсli> ul> 

Специфікація HTML​

Специфікація HTML Living Standard – головний документ, який описує стандарти, можливості і майбутній розвиток мови HTML.

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

HTML-елемент – це термін, що описує якусь семантичну сутність в стандарті HTML. Наприклад абзац, заголовок, список або посилання. В HTML-документі елемент представлений тегом (парним або одинарним) – синтаксичною конструкцією мови HTML.

Вкладеність тегів​

Алгоритм визначення можливості вкладення тегу досить простий.

• Йдемо в специфікацію і знаходимо потрібний елемент.
• Перевіряємо контентну модель елемента (Content model), в який вкладаємо.
• Перевіряємо категорії елемента (Categories), який вкладаємо.
• Якщо категорія підходить і обмеження не забороняють – вкладати можна, інакше – не можна.

Вже через пару днів використання HTML ви звикнете правильно вкладати елементи один в одного, оскільки правила вкладеності стануть інтуїтивно зрозумілі після знайомства з основними тегами.

Довідники​

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