практикаHTML. Введение в html Каждый dns сервер хранит данные
 Скачать 5.52 Mb.
|
|
2 Введение в HTML • Каждый DNS сервер хранит данные (таблицу соответствия всех известных текстовых доменных имен цифровым IP-адресам); • DNS сервера разбиты на несколько уровней, каждый из которых регулярно (примерно 2 раза в сутки) получает обновление от DNS-сервера старшего уровня; • DNS сервера самого старшего уровня получают данные от Registars, которые за плату хранят информацию о том, какое доменное имя принадлежит какому человеку; http://k504.khai.edu/attachments/article/333/lect1-6.pdf 3 Создание собственного сайта http://k504.khai.edu/attachments/article/333/lect1-6.pdf • Самостоятельная организация сервера, где будут находиться веб-страницы и данные сайта. Для этого требуется выделенный ip-адрес, зарегистрированное доменное имя и компьютер, подключенный к сети Интернет. • Заказ платного или бесплатного хостинга у компаний, предоставляющих такие услуги (в этом случае требуется только зарегистрированное доменное имя или же бесплатно предоставляемое некоторыми хостингами доменное имя третьего уровня). Основные характеристики хостинга: - Выделенный или виртуальный хостинг; - Наличие и величина ограничений на объем трафика; - Объем выделяемого места на диске; - Наличие поддержки PHP (важно какая именно версия PHP установлена) и других языков программирования; - Количество доменов, которые можно привязать к своему аккаунту на хостинге. 4 Введение в HTML HTML (HyperText Markup Language) - это язык разметки, который представляет простые правила оформления и компактный набор структурных и семантических элементов разметки (тегов). HTML позволяет описывать способ представления логических частей документа (заголовки, абзацы, списки и т.д.) и создавать веб- страницы разной сложности. Теги - это ключевые слова, взятые в угловые скобки (символы меньше “<” и “>”). Например, тег означает, что в этом месте веб-страницы нужно вставить горизонтальную линию. Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без привязки к средствам отображения. В идеале, гипертекстовый документ должен одинаково выглядеть на различных устройствах (монитор ПЭВМ, экран ПДА или мобильного телефона, принтер, медиа-проектор и т.п.). Это называется кросс-браузерность. HTML-страница представляет собой текстовый файл, который можно набрать в любом текстовом редакторе и, который имеет расширение *.html или *.htm. 5 Элементы гипертекста HTML-документ состоит из текста, который представляет собой информационное содержимое и специальных средств языка HTML — тегов разметки, которые определяют структуру и внешний вид документа при его отображении браузером. Структура HTML-документа довольно проста: Описание документа начинается с указания его типа (секция DOCTYPE). Текст документа заключается в тег . Текст документа состоит из заголовка и тела, которые выделяются соответственно тегами — контейнер заголовка документа — название документа (то, что отображается в заголовке окна браузера) ... 8 Теги: правила использования HTML-тег состоит из имени, за которым может следовать необязательный список атрибутов. Весь тег (вместе с атрибутами) заключается в угловые скобки <> : <имя_тега [атрибуты]> Как правило, теги являются парными и состоят из начального и конечного тегов, между которыми и помещается информация. Имя конечного тега совпадает с именем начального, но перед именем конечного тега ставится косая черта / (...) . Конечные теги никогда не содержат атрибутов. Некоторые теги не имеют конечного элемента, например тег . Регистр символов для тегов не имеет значения. Теги могут быть вложены, при этом форматирование внутреннего тега имеет преимущество перед внешним. При использовании вложенных тегов их нужно закрывать, начиная с самого последнего и двигаясь к первому Браузеры обычно лояльно относятся к отсутствию конечных тегов у парных элементов и более-менее правильно отображают парные элементы уровня блока (p, li и т.п.), особенно в простых веб-документах. Тем не менее, рекомендуется следить за наличием закрывающих тегов и использовать их, чтобы избежать ошибок при воспроизведении документа. 9 Теги: правила использования HTML-тег состоит из имени, за которым может следовать необязательный список атрибутов. Весь тег (вместе с атрибутами) заключается в угловые скобки <> : <имя_тега [атрибуты]> Как правило, теги являются парными и состоят из начального и конечного тегов, между которыми и помещается информация. Имя конечного тега совпадает с именем начального, но перед именем конечного тега ставится косая черта / (...) . Конечные теги никогда не содержат атрибутов. Некоторые теги не имеют конечного элемента, например тег . Регистр символов для тегов не имеет значения. Теги могут быть вложены, при этом форматирование внутреннего тега имеет преимущество перед внешним. При использовании вложенных тегов их нужно закрывать, начиная с самого последнего и двигаясь к первому Браузеры обычно лояльно относятся к отсутствию конечных тегов у парных элементов и более-менее правильно отображают парные элементы уровня блока (p, li и т.п.), особенно в простых веб-документах. Тем не менее, рекомендуется следить за наличием закрывающих тегов и использовать их, чтобы избежать ошибок при воспроизведении документа. 10 Атрибуты Атрибуты — это пары вида «свойство = значение», уточняющие представление соответствующего тега <тег атрибут="значение">... Атрибуты указывают в начальном теге, несколько атрибутов разделяют одним или несколькими пробелами, табуляцией или символами конца строки. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Порядок записи атрибутов в теге не важен. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в кавычки, особенно если они содержат несколько разделенных пробелами слов. Атрибуты могут быть обязательными и необязательными. Необязательные атрибуты могут быть опущены, тогда для тега применяется значение этого атрибута по умолчанию. Если не указан обязательный атрибут, то содержимое тега скорее всего будет отображено неправильно. 11 Атрибуты Порядок атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет. Поэтому теги вида  и по своему действию равны. 12 Часто используемые атрибуты style ="описание_стилей" — локальные стили src ="адрес" — адрес (URI) источника данных (например картинки или скрипта) align ="left|center|right|justify" — выравнивание, по умолчанию left (по левому краю) width ="число" — ширина элемента (в пикселях, пиках, поинтах и др.) height ="число" — высота элемента (в пикселях, пиках, поинтах и др.) href ="адрес" — гиперссылка, адрес (URI) на который будет выполнен переход name ="имя" — имя элемента id ="идентификатор" — уникальный (в пределах веб-страницы) идентификатор элемента size ="число" — размер элемента class ="имя_класса" — имя класса во встроенной или связанной таблице стилей title ="строка" — название элемента 13 Гиперссылки Гиперссылка - это особым образом помеченный фрагмент веб-страницы (текст, изображение и др.), который связан с другим документом. Для указания гиперссылок используется тег . Гиперссылки позволяют перемещаться между связанными веб-страницами. Пример Скачать файл Переход по ссылкам можно выполнять как на целые документы, так и на специальным образом помеченные (именованные) фрагменты текста. Ссылки могут быть абсолютными и относительными. Абсолютные ссылки указывают, как правило, на внешний ресурс. Для них нужно указывать полный путь: Абсолютная ссылка Ссылка на страницу в каталоге Относительные ссылки, напротив, используют для перехода на внутренние страницы сайта. Для них нужно указывать путь относительно ссылающейся страницы: Ссылка на страницу в корневом каталоге Ссылка на фрагмент страницы в текущем каталоге Ссылка на страницу в подкаталоге текущего каталога Ссылка на страницу в подкаталоге корневого каталога Ссылка на страницу в вышележащем каталоге 14 Особенности HTML - HTML игнорирует все переводы строки внутри веб-страницы все дополнительные (свыше одного) пробелы между словами; - HTML инвариантен к регистру букв в тегах (все равно, маленькими или заглавными буквами они набраны); - Чтобы добавить лишние пробелы, разделение строки или другие символы, необходимо воспользоваться специальными обозначениями, которые всегда начинаются с & и заканчиваются точкой с запятой. 15 Использование текстовых редакторов 16 Использование текстовых редакторов 17 Использование текстовых редакторов 18 Использование текстовых редакторов 19 Просмотр кода web-страницы 20 Просмотр кода web-страницы 21 Просмотр кода web-страницы 22 Просмотр кода web-страницы 23 Пример простого HTML документа 24 Пример простого HTML документа 25 Пример простого HTML документа 26 Пример простого HTML документа 27 Примеры применения атрибутов bold – полужирный - параметры шрифта SIZE=5 – размер color=red – цвет красный Атрибутами в данном примере являются SIZE и color 28 Примеры применения атрибутов 29 Примеры применения атрибутов 30 Таблицы цветов 31 Основные теги ... — контейнер гипертекста — контейнер заголовка документа — название документа (то, что отображается в заголовке окна браузера) ... 32 Добавление формы 34 Освоение тегов Местоположение фонового рисунка название файла цвет фона 35 Освоение тегов Местоположение фонового рисунка название файла цвет фона 36 Освоение тегов Местоположение фонового рисунка название файла цвет фона 37 Освоение тегов 38 Создание таблиц или | . | Предназначен для создания ссылок (гипертекста). 39 Примеры сайтов 40 Примеры сайтов 41 Примеры сайтов 42 Примеры сайтов 43 Основные теги ... — контейнер гипертекста — контейнер заголовка документа — название документа (то, что отображается в заголовке окна браузера) ... 44 Блочные элементы 45 Добавление формы 46 Разработка web-сайтов Самым простым и бесплатным способом создания сайтов являются бесплатные системы управления сайтом, предоставляющие бесплатный хостинг, такие как: Ucoz, Nethouse, Фо.Ру, WinShop, Umi, Ukit http://juice-health.ru/program/424-program-to-create-site http://www.internet-technologies.ru/review-of-website-builder.html Конструктор сайтов – это система из набора инструментов, которая позволяет создавать сайты онлайн и администрировать их без каких-либо специализированных знаний. С её помощью Вы сможете выбрать тип будущего сайта (визитка, магазин и т. д.), готовый шаблон дизайна, цветовое оформление и модули, которые будут на нём отображаться. Вам не понадобится годами изучать языки программирования для публикации различных страниц – конструкторы сайтов сделают всю рутинную и сложную работу за Вас. Зачастую они предоставляют достаточно возможностей для создания сайтов, которые по качеству могут превзойти продукты небольших веб-студий, выполняющих заказы для малого и среднего бизнеса. Что касается удобства использования, то маленькие студии уверенно пасуют перед конструкторами, поскольку они всегда требуют плату за внесение даже незначительных изменений ресурса. Используя конструктор, Вы сможете по желанию самостоятельно и оперативно вносить поправки, причём совершенно бесплатно! 47 Конструкторы сайтов Преимущества: • Они просты в использовании. Всё делается пошагово и легко. Вам не придётся возиться со сложными кодами HTML и FTP. • Разделение дизайнерской и текстовой частей: макет хранится отдельно от текста. Захотите сменить дизайн – без проблем, несколько кликов и всё готово! • Наличие готовых шаблонов макетов, для создания которых вне конструктора требуется знание языка программирования HTML. • Лёгкость загрузки изображений. Картинки можно добавлять, не выходя из браузера и сразу размещать на страницах, создавать галереи либо делать их частью дизайна макета. • Богатый набор дизайнерских шаблонов на любой вкус. • Оперативная публикация страниц. Изменения отображаются сразу же после их внесения. • Надёжность – все файлы хранятся на сервере конструктора. Поэтому Вам не стоит беспокоиться о создании резервных копий данных или о возможности взлома — обо всём этом заботится персонал по обслуживанию серверов выбранного конструктора сайтов. • Кроме того, некоторые конструкторы (например, Wix , Nethouse ) позволяют переносить готовый сайт на другой хостинг. http://www.internet-technologies.ru/review-of-website-builder.html 48 Разработка web-сайтов Второй способ создания сайтов – это использование визуальных html редакторов, таких как: Adobe Dreamweaver - самый популярный, удобный и мощный инструмент по созданию и редактированию html страниц. Front Page - на данный момент устаревший редактор (поддержка прекратилась в 2007г.), но все еще не утративший популярности, ранее входил в состав пакета Microsoft Office. nvu - бесплатный html редактор, по функционалу значительно уступающий предыдущим, но довольно таки удобный и может работать даже на самых слабых компьютерах, у него также имеется солидный штат поклонников. Web Builder - Простой, удобный редактор для создания сайтов. Web Creator pro - Мощный, навороченный конструктор сайтов. Начинающим пользователям потребуется время чтобы разобраться в его функционале, но оно того стоит. http://juice-health.ru/program/424-program-to-create-site Преимуществами данного способа создания сайтов является то, что веб-дизайнер не ограничен никакими рамками присутствующими во всех CMS (системы управления сайтом). Еще одним преимуществом является то, что сайт, состоящий из чистого html кода, практически не создает никакой нагрузки на сервер, он значительно меньше по объему чем любая CMS и при наплыве посетителей не будет ни зависать ни тормозить, страницы такого сайта открываются за доли секунды. Отсутствие дублей страниц на таких сайтах положительным образом скажется на его позициях в поисковых системах. Для html сайтов также как и для CMS существуют огромное количество шаблонов. Недостатками этого способа является то что каждую страницу придется редактировать отдельно. 49 Разработка web-сайтов Третий и на мой взгляд самый эффективный метод создания сайтов - это использование CMS (системы управления сайтом или контентом), таких как: WordPress - бесплатная система управления сайтом с открытым исходным кодом, хорошо зарекомендовавшая себя в течении многих лет, позволяет создавать практически любые сайты. Joomla - бесплатная CMS с открытым кодом. Относительно молодая система, но от этого не менее надежная, для нее как и для WordPress существует огромное разнообразие шаблонов, плагинов, компонентов и модулей. Данный сайт сделан именно на этой CMS. Drupal - бесплатная и достаточно популярная система, имеющая своих поклонников, но немного более сложная в освоении по сравнению с другими CMS. MODX - бесплатная профессиональная система управления содержимым и фреймворк для веб-приложений, предназначенная для обеспечения и организации совместного процесса создания, редактирования и управления контентом сайтов. 1С-Битрикс - платная профессиональная система управления веб-проектами, универсальный программный продукт для создания любых сайтов в том числе и интернет- магазинов. Данная CMS обеспечивает высокий уровень защищенности сайтов от взлома, высокую производительность, а также простой и интуитивно понятный интерфейс. Использование этих систем не требует специализированных знания языков программирования, но требует размещения на хостингах с поддержкой PHP. В настоящее время многие хостинги предлагают бесплатные услуги по установке различных CMS непосредственно на сервер, то есть никаких телодвижений и дальнейших настроек от пользователя не требуется, только оплатить хостинг и домен. http://juice-health.ru/program/424-program-to-create-site 50 uKit – простой в освоении http://www.internet-technologies.ru/review-of-website-builder.html uKit ( обзор ) – универсальный онлайн конструктор с визуальным редактором и интуитивным интерфейсом. Является самым популярным инструментом для создания сайтов-визиток, лендингов и интернет-магазинов. Веб-сервис uKit – это тоже своего рода «программа», изначально предустановленная на хостинг. Разница лишь в том, что файлы сайтов, получаемые в десктопных программах, нужно потом самому загружать на предоплаченный хостинг. У конструктора они с самого начала уже находятся там, а все изменения сохраняются в реальном времени. Ну и по интерфейсам – у uKit он висит в облаке и доступен через браузер, а файлы десктопных приложений размещены на диске компьютера, не имеющего связи с Интернетом через DNS-сервер. 51 uKit – простой в освоении Выбираем дизайн сайта: 52 uKit – простой в освоении Выбираем дизайн сайта: 53 uKit – простой в освоении Заполняем сайт контентом: 54 uKit – простой в освоении 55 uKit – простой в освоении 56 uKit – простой в освоении 57 Использованные ресурсы http://www.4stud.info/web-programming/html.html http://k504.khai.edu/attachments/article/333/lect1-6.pdf https://divly.ru/page_examples Ukit.com The End |