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.

Мигающий курсор

Как сделать постоянно мигающий курсор в поле ввода ?
Т.е. не зависимо от того, есть ли фокус в данном поле ввода.
При фокусе в поле ввода там появляется стандартное мигание курсора, но нужно чтобы и без фокуса было мигание

.form label:before < content: ''; display: none; position: absolute; left: 16px; top: 10px; width: 1px; height: 14px; background: #000; opacity: 1; z-index:3; animation: cursor 1s infinite ease; >.form label.cursor:before < display: inline-block; >@keyframes cursor < 50%< background: transparent; >> 

Отслеживать
задан 25 авг 2017 в 6:32
2,820 4 4 золотых знака 34 34 серебряных знака 70 70 бронзовых знаков
только имитировать его — input + label:before , ‘animation’
25 авг 2017 в 6:39

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

25 авг 2017 в 7:04

С помощью js и jQuery написать функцию, меняющую cursor: default на cursor: none и обратно по таймеру

25 авг 2017 в 7:14

@Данила Никонец, а подробней можно? Получается, что нужно вызвать метод jquery $(input).focus(); на поле ввода, а если пользователь наведёт курсор на другое поле ввода, то с предыдущего фокус пропадёт

25 авг 2017 в 7:29

@Artem Gorlachev, обновил вопрос, посмотрите пожалуйста, добавил анимацию, но теперь курсор исчезает плавно, а нужно чтобы курсор исчезал не плавно. Как это сделать? jsfiddle.net/7576gmdj

25 авг 2017 в 8:00

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Анимацию можно отключить по step-end . + нужно убирать свой курсор на фокусе, чтобы не пересекался с системным курсором. и еще нужно совсем его удалять на заполненном инпуте.

.form label:before < content: ''; display: none; position: absolute; left: 16px; top: 10px; width: 1px; height: 14px; background: #000; opacity: 1; z-index: 3; >.form input:not(:focus) + label.cursor:before < display: inline-block; animation: cursor 1s infinite step-end; >@keyframes cursor < 50% < background: transparent; >>

Отслеживать
ответ дан 25 авг 2017 в 8:24
Artem Gorlachev Artem Gorlachev
4,443 8 8 серебряных знаков 17 17 бронзовых знаков

// Communicate to DOM that we have JS document.documentElement.setAttribute("class", "js"); var searchFauxInput = document.querySelector(".fb-Search_FauxInput"); var searchBox = document.getElementById("Input"); searchBox.addEventListener("keyup", function copyInput(event) < searchFauxInput.textContent = searchBox.value; searchBox.setAttribute("value", searchBox.value); >, false);

* < box-sizing: border-box; >body < font-family: sans-serif; >.fb-Search < display: -webkit-box; display: -ms-flexbox; display: flex; height: 44px; padding: 5px 70px 5px 5px; width: 400px; position: relative; background-color: #e4e4e4; >.fb-Search_Input < -webkit-appearance: none; -moz-appearance: none; appearance: none; >.js .fb-Search_Input < position: absolute; left: -100vw; >.fb-Search_FauxInput < display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 80%; border: 0; font-size: 20px; font-size: 1.3rem; color: #777; background-color: #e4e4e4; border-right: 1px solid transparent; >.js .fb-Search_FauxInput < display: -webkit-box; display: -ms-flexbox; display: flex; >.fb-Search_Input ~ .fb-Search_FauxInput < -webkit-animation: pulseAttention 1.5s cubic-bezier(.215, .61, .355, 1) forwards infinite; animation: pulseAttention 1.5s cubic-bezier(.215, .61, .355, 1) forwards infinite; >.fb-Search_Label < position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 5px 7px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #a7a7a7; font-size: 15px; >.fb-Search_Input:not([value=""]) ~ .fb-Search_Label < -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; >@-webkit-keyframes pulseAttention < 50% < border-color: #000; >> @keyframes pulseAttention < 50% < border-color: #000; >>

 
 Search 

Отслеживать
ответ дан 25 авг 2017 в 8:20
larrymacbarry larrymacbarry
901 4 4 серебряных знака 11 11 бронзовых знаков

если нужно чтобы пользователь что-то ввел сразу, то можно попробовать

Upd:

For better usability, avoid using autofocus. Automatically focusing on a form control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.

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.

Как изменить курсор?

Jora Sahakyan, конкретизируйте, пожалуйста, что Вы хотите изменить: caret или mouse pointer? Оба элемента называют «курсором». Спасибо.

13 июн 2018 в 15:44
я хочу поставить собственный курсор,выбранным мной картинкой.почти все варианты пробовал не работает
13 июн 2018 в 15:45
Возможный дубликат вопроса: Как изменить внешний вид курсора по умолчанию через CSS?
13 июн 2018 в 18:34

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Вот так это делается

.cur < width:300px; height:300px; background:red; cursor: url("https://png.icons8.com/dusk/2x/cursor.png"), auto; >.cur1< width:300px; height:300px; background:blue; cursor: url("https://png.icons8.com/nolan/2x/hand-cursor.png"), auto; >

Отслеживать
ответ дан 13 июн 2018 в 15:59
user33274 user33274

• html
• css

Связанные

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.26.8280