Любой HTML документ начинается с декларации – обозначения типа
документа, так называемого «доктайпа».
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<head>
<head>
<script>
Я это делаю просто программой Notepad++ или Sublimе.
Для более подробного знакомства с этой темой, рекомендую посмотреть мой пост "HTML-разметка тела документа"
Обозначая тип документа, мы сообщаем браузеру некую
информацию. Чтобы он смог правильно отображать страницу. Ранее использовались
различные версии HTML
и
«доктайпы» выглядели по-разному. Например вот так. Для 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Теперь все проще и только так:
<!DOCTUPE html>
Теперь все проще и только так:
<!DOCTUPE html>
Сама страница документа состоит из трех обязательных
тегов:
<html>
Контейнер, в котором находится весь документ
<head>
помогает браузеру. Содержание его не отображается напрямую.
<body>
Тело
документа.
Заголовок.
Текст, который отображается во вкладках, а так же в левом верхнем углу браузера.
<head>
<title>ВАШ САЙТ</title>
</head>
Для того, чтобы браузер правильно отображал страницы
используем кодировку. Для кириллицы –
<meta charset=”utf-8”>
Кодировка пишется внутри тега <head>..</head>
Кодировка пишется внутри тега <head>..</head>
Для того, чтобы страница участвовала в поиске пишем
ключевые слова, так же внутри «головы».
<meta name="keywords" content="ваши, ключевые, слова">
Точно так же добавляем краткое описание страницы:
<meta name="description"
content="краткое описание">
Как правильно использовать мета – описания можно
прочитать у Яндекса здесь -
https://yandex.ru/support/webmaster/recommendations/using-meta-desc.xml
https://yandex.ru/support/webmaster/recommendations/using-meta-desc.xml
Бывают случаи, когда нам по каким-то причинам не
хочется удалять существующий код, но мы не хотим. Чтобы он отображался
браузером. Для этого можно использовать метод комментария.
Для этого достаточно заключить код (или какое-то
разъяснение, описание) вот в такие скобки:
:
<!- -все
что угодно, на ваш вкус -->
Комментарий легко добавить сочетанием клавиш Ctrl +/
Комментарий легко добавить сочетанием клавиш Ctrl +/
Важное замечание: Комментарии не действуют внутри
тега <title> и <style>.
Для комментария в CSS : /* и */
Для подключения стилей CSS для HTML документа:
Внутренний, встроенный, инлайновый – код CSS пишут непосредственно в самом документе:
Внутренний, встроенный, инлайновый – код CSS пишут непосредственно в самом документе:
<head>
<style>
CSS-код
</style>
</head>
Этот способ используют реже, потому что он «утяжеляет»
Документ и приводит к увеличению времени загрузки
страницы. Так же он не удобен для редактирования документа в целом, потому что
для изменения стиля всего документа нужно изменить код на всех страницах.
Внешние стили подключаются обычно из внешнего файла с расширением .css лучше всего подключать тоже в «голове», но тег будет работать в любом месте страницы.
Внешние стили подключаются обычно из внешнего файла с расширением .css лучше всего подключать тоже в «голове», но тег будет работать в любом месте страницы.
<head>
<link href="style.css" rel="stylesheet">
</head>
href
–
это атрибут задающий адрес файла, а rel=”stylesheet” говорит
браузеру о том, что подключен внешний файл, а не что-либо другое.
Подключение скриптов.
Внутренние.
Если HTML-
овечает за структуру документа, CSS
за внешний вид страницы, то скрипты -
это поведение. Это оживление странцы. Анимация и многое другое. Они пишутся на
языке JavaScript
Обычно его вставляют вконце документа, перед
закрывающим тегом </body>
<script>
JavaScript-код
</script>
Внешние
скриты подключаются из внешних файлов с расширением .js
<script src="scripts.js"></script>
И точно так же перед закрывающим тело документа тегом </body>
И точно так же перед закрывающим тело документа тегом </body>
В заключении хочу привести пример скрипта «играющего»
с текстом. Если есть желание потренироваться, то можете попробовать
использовать его как внутренний файл – вставить в тело, или разместив его не диске
G_+
взять внешнюю ссылку и разметить его в тело. Не забудьте только сохранить его в
формате .js
<script>
var p = document.getElementById("blinking");
setInterval(function() {
if (p.style.fontSize != "10px") {
p.style.fontSize =
"10px";
} else {
p.style.fontSize = "20px";
}
}, 2000);
</script>
Для более подробного знакомства с этой темой, рекомендую посмотреть мой пост "HTML-разметка тела документа"
