Интересные факты про веб

Создателем WorldWideWeb считается Тим Бернерс-Ли. Ему сильно помогал Роберт Кайо.

Гипертекстовый проект был предложен Тимом в 1989 году, когда он работал в CERN. Основная идея — гиперссылки, которые помогали учёным в поиске информации. В ходе проекта Тимом и его помощниками были изобретены URI, HTTP и HTML. Также были написаны первый веб-сервер и первый браузер. Изначально система работала на одном компьютере и начала распространятся по интернету в 1991 году.

Первый веб-сайт, который стал доступен на первом веб-сервере располагался по адресу info.cern.ch и может быть найден по ссылке

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/News/9201.html

Первая фотография, размещённая в вебе:

Первое изображение в интернете

Вообще же первым зарегистрированным доменным именем является symbolics.com. Оно было зарегистрировано 15 марта 1985 года.

Самые дорогие доменные имена:

  • insure.com — $16,000,000 in 2009
  • sex.com — $13,000,000 в 2010
  • hotels.com — $11,000,000 в 2001
  • fund.com — $9,999,950 в 2008

Веб — это не интернет!

Интернет — это среда передачи данных, которую использует множество протоколов, программ и систем, в том числе и веб. Самые известные, кроме веба (HTTP) — FTP, VPN, VoIP, Skype, ICQ.

Для работы www используются веб-серверы и веб-браузеры (веб-клиенты), которые связываются друг с другом посредством протокола HTTP (hyper text transfer protocol).

Веб состоит из набора веб-страниц, которые обычно объединены в веб-сайты. То есть веб-сайт — это совокупность веб-страниц объединённых под одним доменным именем и обычно расположенных на одном веб-сервере.

Зачем делают сайты

Сайты делают для того что-бы кому-то рассказать что-то полезное или для удовлетворения потребности в чем-либо, или чтобы заявить о себе. То есть либо полезный текст, либо полезная функция, либо “посмотрите, мы есть”.

Если вы не знаете, зачем вам сайт, не делайте его. Либо идите работать на того, кто знает.

Начало курса

Для создания веб страниц используются:

  • HTML — логическая разметка текста,
  • CSS — оформление HTML-докуменов,
  • JavaScript — динамические элементы на стороне клиента,
  • PHP — динамические элементы на стороне сервера,
  • другие языки — Perl, Python, SQL для работы с базами, при желании C (Си) посредством CGI.

Плюсы разделения структуры документа и его представления:

  • Доступность для различных пользовательских устройств. Можно создать отдельные стили для вывода на экран компьютера, планшета, мобильного телефона, холодильника, вывода на печать, для вывода гипотетическим звуковым браузером для глухих и так далее. Все это будет один и тот же HTML с различными CSS-файлами.
  • Увеличение быстродействия. Для всех страниц сайта грузится только один файл CSS и только один раз.
  • Лёгкая правка отображения всех страниц сайта сразу без необходимости менять сотни HTML-документов.
  • Облегчает потоковое создание сайтов. Одни занимаются оформлением, другие — содержанием.
  • Презентационная информация не засоряет основное содержимое кода страницы, как следствие ее легче прочесть как людям, так и машинам.

HTML

HTML — язык разметки гипертекста.

Будем с ходу применять HTML5.

Виды тегов

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

  • Одиночные. Пример: <img src=”#”>
  • Двойные — открывающий и закрывающий, отличаются наличием косой черты (слэша). Пример: <a href=”#”>Текст ссылки</a>.

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

В принципе, чтобы вывести какой-либо текст, не нужно никаких тегов.

Если же создавать HTML-документ, то его структура должна быть следующей:

<!DOCTYPE html>

<html lang=”ru”>

<head></head>

<body></body>

</html>

  •  DOCTYPE — сообщает браузеру какой стандарт использовать. Пишется большими буквами. <!DOCTYPE html> обозначает HTML5.
  • <html> — контейнер, который включает в себя весь HTML-документ.
  • lang=»ru» — указывает язык страницы
  • <head> — блок, содержащий служебную информацию, которая не отображается на странице, но необходима для ее работы.
  • <body> — содержит собственно содержимое страницы.

Содержимое блока head

Не будем рассматривать, как было раньше, будем писать сразу как есть сейчас в HTML5.

<meta charset=»utf-8″> — задаёт кодировку страницы. Нужно устанавливать обязательно.

Вообще говоря, кодировку можно задать двумя способами: мета-тегом и в HTTP-заголовке ответа сервера. Тут может образоваться трудность понимания. В итоге у вас кодировка текста, кодировка указанная в мета-теге и в ответах сервера должна совпадать.

<link rel=»shortcut icon» href=»/favicon.ico»> — ссылка на фавиконку (favorite icon). Используется браузерами во вкладках, в избранном. Яндексом в выдаче.

<title>Мой сайт</title> — заголовок страницы, отображаемый в заголовке окна браузера или во вкладке.

<meta name=»description» content=»Мой первый сайт»> — краткое описание содержимого страницы. До 150 символов. Описание именно страницы, не сайта.

<meta name=»keywords» content=»сайт, первый, изучение»> — ключевые слова, характеризующие страницу.

В title, description, keywords нужно писать правду. То, что действительно соотносится с содержимым страницы. Description и keywords нигде на сайте не отображаются, но могут использоваться где-то ещё. Считается, что поисковики их никак не используют, но указывать все-таки стоит.

<link rel=»stylesheet» href=»style.css»> — указываем ссылку на файл со стилями.

<script src=»script.js»></script> — ссылка на javascript-файл.

Также скрипты и стили можно писать прямо в тексте документа выделяя их тегами:

<script>

document.getElementsByTagName(‘body’)[0].appendChild(rb);

</script>

<style type=»text/css»>

img {width: 142px;}

</style>

Первые теги

Комментарии

<!— комментарий —> — текст выделяется конструкцией с открывающей частью вида <!— и заканчивается блоком вида —>. Используются знаки “минус”, восклицательный знак и угловые скобки.

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

Также комментарии удобно использовать чтобы отключить часть кода не удаляя его. К примеру:

<!—<h2>Этот заголовок не будет отображён на странице</h2>—>

Заголовки

<h1> — <h6> — теги обозначающие уровень заголовка. h1 — самый важный (высший уровень). Являются двойными. Пример:

<h1>Название книги</h1>

<h2>Название главы</h2>

Без дополнительной семантической разметки тег h1 должен быть на странице только один.

 Абзац

<p> — выделяет часть текста как абзац, добавляет отступы как перед, так и после абзаца. Пример:

<p>Ну полный абзац.</p>

Итог

Блоки, связанные со скриптами и стилями пока опустим. Также опустим ссылку на иконку.

В финале должно получиться примерно следующее:

<!DOCTYPE html>

<html lang=”ru”>

<head>

<meta charset=»utf-8″>

<title>Мой сайт</title>

<meta name=»description» content=»Мой первый сайт»>

<meta name=»keywords» content=»сайт, первый, изучение»>

</head>

<body>

<h1>Заголовок</h1>

<!— Основное содержимое —>

<h2>Подзаголовок</h2>

<p>Блок текста в виде абзаца</p>

</body>

</html>

Самостоятельная проработка

Поищите информацию и разберитесь, что значат следующие тэги:

<br>

<hr> — в понимании HTML5. Смысл вкладываемый в данный тег в HTML5 и HTML4 различаются.