Приступаем к созданию вебсайтов

Приступаем к созданию веб-сайтов

Некоторое время назад один из моих соседей по комнате попросил меня научить его создавать веб-сайты. Сначала я подумал о том, чтобы просто дать ему почитать что-нибудь в Интернете для первых шагов. Если после этого я все еще хотел научить его другим тонкостям, я знаю. По этой причине я поискал в Интернете несколько руководств по началу работы с HTML. К моему большому удивлению и сожалению, я не нашел ничего, что могло бы дать этому какое-либо основание. Все полученные мной уроки подверглись критике. Поэтому мне пришлось объяснять ему все с самого начала.

Всего неделю назад мой дядя хвастался, что ему было поручено завершить работу над созданным им сайтом. Для этого ему нужно было где-то выучить HTML. Он спрашивает меня, могу ли я порекомендовать место для начала. С горечью я направил его по местам в сети с как можно меньшим количеством ерунды. Тогда я решил, что с этим надо что-то делать. И это дело, если я этого не сделаю — больше никого нет.

С сегодняшнего дня я начинаю серию первых уроков по HTML, CSS и JavaScript, чтобы дать людям вроде моего соседа по комнате и дяди некоторый фундамент. Тогда теперь есть место для апгрейда. Предыдущие уроки, которые я разместил здесь, требуют именно этого.

Урок Приступаем к созданию веб-сайтов

Следует уточнить, что такие сайты будут статичными. Динамические сайты вообще не входят в первые шаги сайтов.

Первое, что вам нужно сделать, это скачать удобную программу. Теоретически можно написать нужный код даже в Блокноте. Однако на практике все намного сложнее. Когда вы пишете всего лишь десяток строк, вы начинаете терять конец Блокнота. Я лично использую Sublime Text.

Официально программа стоит 80 долларов. Но есть испытательный срок, который особо не ограничен по времени. Просто время от времени вы будете видеть окошко с приглашением купить его..

Есть много других бесплатных программ, которые вы можете использовать:

  1. Код Visual Studio
  2. Атом
  3. Кронштейны
  4. Блокнот++
  5. Аптана Студия

Лучше всего создать папку на вашем компьютере, где будет размещаться ваш сайт..

Создайте в нем новый файл и назовите его index.html.

Имя важно, потому что index имеет особое значение. Это файл для загрузки, если в открывшемся URL-адресе явно не упоминается другой. Это название указывает на то, что это начало сайта.

Читать также:  Файлы

HTML

Теперь перейдем к самому HTML. Если вы ничего не знаете о HTML, вам следует начать с того факта, что это НЕ язык программирования..

Язык — это язык программирования, если мы можем использовать его для установки инструкций для компьютера, которые должны выполняться, и в результате мы можем получить другой результат..

Такая инструкция должна дать нам информацию о текущем времени. Это постоянно меняется.

С HTML мы не можем добиться другого результата с тем же кодом..

Аббревиатура HTML сама по себе означает язык разметки гипертекста — язык разметки гипертекста..

Слово «тегирование» означает, что язык предоставляет браузерам только информацию о содержании сайта. Эта маркировка выполняется с помощью тегов. Теги — это ключевые слова в HTML. Они написаны в квадратных скобках, чтобы отделить их от фактического текстового содержания сайта..

Теги

Пример тега p (происходит от абзаца), который описывает абзац на нашем сайте..

Теги открываются и закрываются. Между парой открытия и закрытия мы помещаем содержимое данного тега.

pЭто абзац / p

Тег может содержать не только текст, но и другие теги внутри себя..

Некоторые теги содержат дополнительную информацию, которая вводится в виде атрибутов. Примером такого тега является (якорь), который используется для вставки ссылок..

a href = "http://www.google.com/" Google

Атрибут href указывает адрес, на который посетитель сайта будет перенаправлен, если щелкнет соответствующую ссылку..

Есть теги, которые не поддерживают контент внутри себя, а имеют только атрибуты. Такой тег — img (изображение).

img src = "image.jpg"

Атрибут src указывает путь, по которому браузер может загрузить изображение..

Такие теги вообще не имеют закрытий — мы не пишем / img после ввода такого тега.

Однако некоторые стандарты HTML (например, xHTML — расширяемый HTML или иным образом расширяемый HTML) требуют, чтобы все теги были закрыты. Затем эти отдельные теги закрываются простым добавлением косой черты перед закрывающей угловой скобкой..

img src = "image.jpg" /

Эти теги также называются самодостаточными..

Использование синтаксиса косой черты допустимо как для xHTML, так и для обычного HTML. Если мы его пропустим, то xHTML-код автоматически станет недействительным..

По этой причине такие теги удобно всегда закрывать, даже если это не соответствует требованиям стандартов, и таким образом код становится легче читать..

Читать также:  Pingback

После разговора о стандартах уместно объяснить, когда используется один стандарт, а когда другой..

Различные типы стандартов

В принципе, не имеет значения, какой стандарт мы используем, если код, который мы пишем, соответствует его требованиям. Таким образом, вы можете использовать xHTML, HTML4 и HTML5 и достичь того же конечного результата. Просто используйте стандарты правильно. Различия между ними очень малы, так что пусть это вас не беспокоит..

Когда мы создаем новый HTML-документ, нам нужно начать с объявления DOCTYPE. Это объявление DOCTYPE показывает, какой стандарт мы используем и как браузеры должны обрабатывать наш код..

Примеры объявлений DOCTYPE можно найти на сайте www.w3schools.com..

Последний стандарт HTML — HTML5 — имеет простейшее объявление DOCTYPE:

!DOCTYPE html

Это сообщает браузерам, что рассматриваемый документ является HTML-страницей. Способ обработки кода оставлен на усмотрение браузеров. Они все равно так и поступают.

После того, как мы указали, какой стандарт мы будем использовать, мы должны ввести наш тег html.

Все содержимое сайта должно содержаться в этом теге. Это требование исходит из XML (расширяемого языка разметки). Требуется единственный корневой тег. Он должен содержать в себе все остальное.

Для этого тега нет требований в XML, поскольку нет никаких предопределенных тегов. Здесь можно использовать любые слова. Но поскольку HTML имеет строгие теги, его корневой тег — html..

Требования к html

Характеристики тега html включают то, что он может содержать только теги head и body..

Другие требования к HTML-документам заключаются в том, что на одной странице у нас должен быть ровно один из этих тегов — head и body..

Это оставляет нам следующую исходную структуру пустой HTML-страницы:

!DOCTYPE html>
html>
голова> / голова>
тело> / тело>
/ html>

Тег head содержит информацию о представлении контента сайта, а также элементы, которые не видны на самой странице..

Тег body включает в себя то, что в итоге отображается в окне браузера..

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

!DOCTYPE html>
html>
голова>
мета-кодировка = "utf-8" />
первые шаги
/ голова>
тело> / тело>
/ html>

Читать также:  Массивы в PHP (часть 2) пользовательские ключи

Кодировка страницы

Кодировка страницы задается метатегом. Обратите внимание, что синтаксис, который я использовал в этом случае, действителен только для HTML5. Если вы используете xHTML или HTML4, этот тег должен выглядеть так:

meta http-Equiv = "Content-Type" content = "text / html; charset = utf-8"

Атрибут http-Equiv сообщает браузеру, что эта метаинформация эквивалентна заданному значению HTTP-запроса. HTTP-запросы не являются предметом нашего урока. Просто примите, что этот метатег должен быть таким.

Атрибут content также показывает содержимое соответствующего HTTP-эквивалента..

Из этого метатега мы получаем информацию о том, что к HTTP-запросу, с которым браузер загружал страницу, нам нужно добавить Content-Type: text / html; charset = utf-8.

Это означает, что сам документ, загруженный браузером, должен быть обработан как text / html (текстовый файл HTML), а кодировка, которую он использует, — UTF-8..

Мы используем эту кодировку в связи с тем, что у нас на сайте есть кириллица.

Существуют и другие кодировки, включающие кириллицу, но UTF-8 — это большая кодировка, содержащая другие специальные символы. Поэтому рекомендуется всегда использовать эту кодировку.

В HTML5 метатег кодирования упрощен за счет того, что при приеме файла с расширением .html браузер сам знает формат документа. Даже не читая метаинформацию, браузер должен знать, что он ищет метатег. Итак, вам нужно знать, что это документ HTML. Парадоксально, не правда ли?

Да здравствует кодировка

По этой причине достаточно использовать простой атрибут charset. Мы должны установить его значение как кодировку, которую мы используем на странице..

мы добавляем тег заголовка после кодировки, чтобы у нас не было проблем с символами в нем.

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

Браузер умен и возвращается, чтобы исправить уже отображаемый контент, но этот возврат замедляет его. Это всего лишь около 5 миллисекунд, которые даже на экране не видно. Но если у нас много задержек, они накапливаются, и тогда посетители сайта недовольны тем, что наш сайт работает медленно. Каждая миллисекунда на счету, так что сохраните их.

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?