Как это сделать


<html>
<body>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Дата и Время</button>

<p id="demo"></p>

</body>
</html>

Кнопка с сообщением



<h2>Кнопка с сообщением</h2>

<input type="button" value="Нажми" onclick="alert('Привет!');">

Кнопка для печати
Как это сделать


<title>Кнопка для печати</title>

<input id="go" type="button" value="Print this Page" onclick="window.print();">

Изменение текста?

Нажав на кнопку, текст меняется

Как создать такую кнопку

<html>

<h2>Изменение текста</h2>

<p id="alpha">Нажав на кнопку, текст меняется</p>

<button type="button" onclick="document.getElementById('alpha').innerHTML = 'Hello JavaScript!'">Click Me!</button>

</html>

Поисковик

Создаём!


<script&ht;
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {

  // Put the button into a variable
  var e = document.getElementById("go");
  
  // Wait for user to click the button
  e.addEventListener("click", function() {
    
    // Get the URL from the user input
    var url = document.getElementById("url").value;
    
    // Do the popup window
    window.open(url,"popUpWindow","height=500, width=400, left=100, top=100, resizable=yes, scrollbars=yes, toolbar=yes, menubar=no, location=no, directories=no, status=yes");
    
  }, false);
  
});
</script>

<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<form name="popupForm" action="{action page}">
  <input name="url"  id="url" value="https://htmlmaster228.blogspot.com/">
  <input name="go" id="go" type="button" value="Go">
</form>

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

<!DOCTYPE html> <!-- Объявление формата документа -->
<html>
<head> <!-- Техническая информация о документе -->
<meta charset="UTF-8"> <!-- Определяем кодировку символов документа -->
<title>...</title> <!-- Задаем заголовок документа -->
<link rel="stylesheet" type="text/css" href="style.css"> <!-- Подключаем внешнюю таблицу стилей -->
<script src="script.js"></script> <!-- Подключаем сценарии -->
</head>
<body> <!-- Основная часть документа -->
</body>
</html>

Элементы, находящиеся внутри тега <html>, образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент <html> является корневым элементом.

Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.

Предок — элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является <html>. В то же время элемент является предком для всех содержащихся в нем тегов: <h1>, <p>, <span>, <nav> и т.д.

Потомок — элемент, расположенный внутри одного или более типов элементов. Например, <body> является потомком <html>, а элемент <p> является потомком одновременно для <body> и <html>.

Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 <html> является родительским только для <head> и <body>. Тег <p> является родительским только для <span>.

Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы <h1>, <h2>, <p> и <nav> являются дочерними по отношению к <body>.

Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 <head> и <body> — элементы одного уровня, так же как и элементы <h1>, <h2> и <p> являются между собой сестринскими.

Является корневым элементом документа. Все остальные элементы содержатся внутри тегов <html>...</html>. Все, что находится за пределами тегов, не воспринимается браузером как код HTML и никак им не обрабатывается. Для элемента доступны атрибуты manifest и xmlns.

Атрибут

manifest

Описание, принимаемое значение

С помощью значения атрибута указывается путь к документу кэша манифеста, например:
<html manifest="about_company.appcache">

Раздел <head>...</head> содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.

Обязательным тегом раздела является тег <title>. Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.

Необязательным тегом раздела является одинарный тег <meta>. С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент <head> может содержать несколько элементов <meta>, потому что в зависимости от используемых атрибутов они несут различную информацию.

<meta name="description" content="Описание содержимого страницы">
<meta name="keywords" content="Ключевые слова через запятую">

Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:

<meta name="description" lang="ru" content="Описание содержимого страницы">
<meta name="description" lang="en" content="Description">
<meta name="keywords" lang="ru" content="Ключевые слова через запятую">
<meta name="keywords" lang="en" content="Keywords">

С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Индексация и переход по ссылкам разрешены:

<meta name="robots" content="index, follow">

Индексация разрешена, переход по ссылкам запрещен:

<meta name="robots" content="index, nofollow">

Индексация и переход по ссылкам запрещены:

<meta name="robots" content="noindex, nofollow">

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:

<meta http-equiv="refresh" content="30">

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:

<meta http-equiv="refresh" content="0; url=http://71vsk.lv/">

Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.
Для элемента доступны атрибуты media, scoped, type, а также ‎глобальные атрибуты.
Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.

<style type="text/css">
.paper {
width: 200px;
height: 300px;
background-color: #ef4444;
color: #666666;
}

Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:

<div class="paper">
...
</div>

CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style, например:

<p style="color: #666666; background-color: #ef4444; padding: 20px;">

Задать стили для документа можно также при помощи другого способа — записать их в отдельный файл с расширением .css, например, style.css.
Подключить файл со стилями к веб-странице можно двумя способами: через директиву @import url

<!DOCTYPE html>
<html>
<head>
<style>
@import url(style.css);
</style>
<meta>
<title> </title>
</head>

с использованием элемента . Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:

<link rel="stylesheet" href="style.css" type="text/css">

Элемент <script> позволяет присоединять к документу различные сценарии. Закрывающий тег обязателен, при этом текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента. Для элемента доступны атрибуты async, charset, defer, src, type.

Атрибут	Описание, принимаемое значение
`onafterprint`	Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати.
`onbeforeprint`	Событие, срабатывающее перед отправкой страницы на печать.
`onbeforeunload`	Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу.
`onhashchange`	Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса `example.domain/test.aspx#page1` на `example.domain/test.aspx#page2`.
`onmessage`	Событие происходит, когда сообщение получено через источник события.
`onoffline`	Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало.
`ononline`	Событие вызывается браузером в том случае, когда соединение с интернет возобновилось.
`onpagehide`	Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д.
`onpageshow`	Событие происходит, когда пользователь переходит на веб-страницу, после события onload.
`onunload`	Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера.

Привет!

Можно заметить, что текст расположен по центру и сделан в один цвет

Как это сделано

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red;
  text-align: center;
} 
</style>
</head>
<body>

<p>Привет!</p>
<p>Можно заметить, что текст расположен по центру и сделан в один цвет</p>

</body>
</html>

Что-то изменилось?

Посмотри на задний фон!

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>Что-то изменилось?</h1>

<p>Посмотри на задний фон!</p>

</body>
</html>

Выглядит конечно, так себе

Но как пример, очень хорошо показывает, что мы можем перемещать объекты

<html>
<head>
<style> 
#example1 {
  background: url(https://payload.cargocollective.com/1/1/35962/12585882/running-booboo.gif) left top no-repeat, url(https://media.giphy.com/media/13gvXfEVlxQjDO/giphy.gif) right bottom no-repeat, url(https://www.thisiscolossal.com/wp-content/uploads/2018/04/agif2opt.gif) center repeat;
  padding: 15px;
  background-size: 50px, 130px, auto;
}
h1 { 
   color: white;
   text-aligh: center;
}
p {
  color: yellow;
  text-aligh: center;
}
</style>
</head>
<body>

<div id="example1">
  <h1>Выглядит конечно, так себе</h1>
  <p>Но как пример, очень хорошо показывает, что мы можем перемещать объекты</p>
</div>

</body>
</html>

Вау, тут можно написать свой текст

<style> 
input {
  width: 100%;
}
</style>
</head>
<body>

<h3>Вау, тут можно написать свой текст</h3>

<form>
  <label for="fname">Прошу>/label>
  <input type="text" id="fname" name="fname">
</form>

</body>
</html>

Рамки, рамки, рамки

Test

HTML from Andrew

HTML

О себе

Главы

1. JavaScript Практика

3. JavaScript Практика

Кнопка с сообщением

2. JavaScript Практика

4. JavaScript Практика

Изменение текста?

5. JavaScript Практика

Поисковик

1. Структура HTML-документа

2. Элемент <html>

Атрибут

Описание, принимаемое значение

3. Элемент <head>

4. Элемент <title>

5. Элемент <meta>

6. Элемент <style>

7. Элемент <link>

8. Элемент <script>

9. Элемент <body>

1. CSS Практика

2. CSS Практика

Что-то изменилось?

3. CSS Практика

Выглядит конечно, так себе

4.CSS Практика

Вау, тут можно написать свой текст

5.CSS Практика

Рамки, рамки, рамки

Можете написать

Поиск по этому блогу

Перевод