- •Основные понятия
- •Создание html-документа
- •Работа с текстом
- •Любое количество пробелов идущих подряд, на веб-странице отображается как один
- •Нет расстановки переносов в тексте
- •Текст занимает ширину окна браузера
- •То, что выделено цветом, на занятие не изучалось. Сохраните пока себе это для справки. К этому типу форматирования текста мы еще вернемся, когда будем изучать продвижение. Списки
- •Маркированный список
- •Нумерованный список
- •Открытие ссылки в новом окне
- •Изображения
- •Атрибуты colspan и rowspan позволяют объединять ячейки, таким образом, создаются сложные таблицы.
Основные понятия
Cайт - это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением, также сайтом может являться одна веб-страница, к примеру: сайт-визитка (если интересует, какие еще бывают виды сайтов, то ты можешь самостоятельно найти и изучить информацию в интернете) .
Веб-страница - сетевой документ, открываемый в браузере. Обычно веб-страница создается в формате HTML и содержит, как правило, текст, изображения и ссылки.
HTML - это система верстки веб-страниц, которая определяет, какие элементы и как должны располагаться в документе. Чтобы показать, что мы имеем дело не с обычным текстовым документом, используется термин HTML-документ. Подобные документы открываются под управлением браузера.
HTML-документ - обычный текстовый файл, который может содержать в себе текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называют HTML-код.
Браузер - программа для просмотра веб-страниц. Браузер анализирует код HTML, находит специальные символы, называемые тегами, и использует их для отображения изображений, изменения вида текста, создание ссылок на другие веб-страницы и т.д.
Тег — это специальный символ разметки в < >, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др.
Тэги бывают открывающие(<тег>) и закрывающие(</тег>). А также парные и непарные.
Непарные теги не имеют закрывающих. К таким, например, относится тег: <img>.
Парные же теги образовывают контейнеры, внутри которых могут располагаться другие теги. Например: открывающий - <body>, а закрывающий - </body>, вместе они создают контейнер:
<body>
</body>
Ссылка (гиперссылка) - позволяет переходить с одной веб-страницы на другую. Особенность их состоит в том, что сама ссылка может указывать не только на HTML-файлы, но и на файл любого типа, причем этот файл может размещаться совсем на другом сайте. Главное, чтобы к файлу, на который делается ссылка, был доступ.
CSS (стили) – это набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид.
JavaScript – язык программирования, используется для придания интерактивности веб-страницам.
JQuery – библиотека JavaScript, для упрощенной работы с JavaScript.
Кодировка. Чтобы русскоязычные символы корректно отображались в браузере, их необходимо указывать в определенной кодировке.
Кроссбраузерность - свойство сайта отображаться и работать во всех популярных браузерах идентично. Хак - исправление ошибки или добавление новой функции посредством использования другой недокументированной или некорректно реализованной особенности.
Хостинг - компьютер, на котором хранятся документы сайта.
Создание html-документа
Поскольку HTML-файл является обычным текстовым документом, то для написания кода HTML и создания веб-страницы подойдет любой текстовый редактор, даже обычный «Блокнот». Но сразу предлагаю забыть об этой программе! Она НЕ предназначена для создания и редактирования HTML-кода.
Существует целый класс HTML-редакторов специально «заточенных» для создания веб-страниц (на занятиях работаем с редактором RJ TextEd). В отличие от обычных текстовых редакторов здесь существует подсветка синтаксиса, проверка правильности кода, удобное добавление и редактирование параметров тегов, и многое другое, что поможет сэкономить время на написание кода, нахождения и исправления в нем ошибок.
Итак, перейдем к созданию первой страницы.
Стартовая страница сайта обязательно должна называться index.html, остальные же страницы можно называть как угодно, но важно использовать в названии маленькие английские буквы и не рекомендуется использовать пробелы, цифры, дефис, символ подчеркивания.
После создания страницы, переходим к написанию HTML-кода.
Исходный код пустой веб-страницы сайта выглядит следующим образом:
<html>
<head>
<title>здесь пишут заголовок страницы </title>
</head>
<body>
Здесь располагается всё наполнение сайта(текст, ссылки, картинки и др.)
</body>
</html>
Разберем отдельные строки этого кода:
Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).
Заголовок документа, как еще называют блок <head>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице.
Тег <title> определяет заголовок веб-страницы, который отображается в левом верхнем углу окна браузера(во вкладках).
Обязательно следует добавлять закрывающий тег </head>, чтобы показать, что блок заголовка документа завершен.
Тело документа <body> предназначено для размещения тегов и содержательной части.
Внутри контейнера <body> могут размещаться практически любые элементы веб-страницы.
Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.
Последним элементом в коде идет закрывающий тег </html>.
________________________________________________________________________________
Справочник по HTML – http://htmlbook.ru/html/
В этом справочнике вы можете подробно прочитать про каждый тег.
Также рекомендую просто просматривать этот справочник, выбирать для себя наиболее нужные теги. Невозможно изучить все теги, да и нет в этом необходимости, некоторые из них используются крайне редко, но что-то для себя стоит поискать. Ну а с основными тегами, мы будем знакомиться дальше…
________________________________________________________________________________