Слайд 2Определения, ассоциации Web site Web page Front-end UI design UX design Responsive design Landing Page
Слайд 3Web site, web page Веб-страница — документ или информационный ресурс WWW, Всемирной
паутины, доступ к которому осуществляется с помощью веб-браузера Типичная веб-страница представляет
собой текстовый файл в формате HTML, который может содержать ссылки на файлы в других форматах (текст, графические изображения, видео, аудио, мультимедиа, прикладные программы, базы данных, веб-службы и прочее), а также гиперссылки для быстрого перехода на другие веб-страницы или доступа к ссылочным файлам Динамическая страница — веб-страница, сгенерированная программно. Сервер генерирует HTML-код динамической страницы для обработки браузером Статичная страница, является просто файлом, лежащим на сервере. При загрузке в браузер контент не меняется Сайт, или веб-сайт — одна или несколько логически связанных между собой веб-страниц
Слайд 5Графический интерфейс предназначенный пользователю должен быть: Приятный глазу Удобным для использования Адаптивным к
устройству вывода
Слайд 6КОРОТКО - UI и UX пользовательский интерфейс должен быть максимально привлекательным (UI):
используются, если необходимо что-то выделить, максимум 2-3 цвета и правильно
подбирается фонт удобным (UX): разработка продукта, максимально удобного и легкого в восприятии целевой аудиторией
Слайд 7ВОЗМОЖНОСТИ СОЗДАНИЯ САЙТА Сайт может быть разработан С нуля – написав все
коды для всего сайта Используя, для создания определенных эффектов, Фреймворки -
а все остальные коды создаются по необходимости Примеры framework-ов для front-end-а: w3.css, Bootstrap etc. Используя шаблоны готовых сайтов, которые далее адаптируются, по сформулированным требованиям Примеры шаблонов: http://www.w3schools.com/css/css_rwd_templates.asp Используя специализированные сайты, которые позволяют пользователям дистанционно создавать свой сайт. В данном случае пользователь не пишет никаких кодов, он имея минимум знаний в области ИТ, но ему необходим сайт, например для продвижения своего бизнеса через глобальную сеть Пример такой платформы, по созданию сайтов: http://fr.wix.com/
Слайд 11ЭЛЕМЕНТЫ РАЗРАБОТКИ FRONT-END-А САЙТА Front-end разработка – это создание клиентской части
сайта. Front-end разработчик занимается версткой шаблона сайта и созданием пользовательского
интерфейса Для создания пользовательского интерфейса используется HTML, CSS и JavaScript (или фреймворки основанные на данные технологии) HTML отвечает за структуру и содержание страницы CSS — за внешний вид страниц (стилизируются HTML элементы) JavaScript – используется для определения поведения страниц
Слайд 13СОДЕРЖАНИЕ ТЕМЫ 1. История появления языка HTML 2. Элементы HTML 3. Структура HTML-документа 4.
Элементы из заголовка HTML-документа 5. Определение содержимого web-страницы – тег
„body” 6. Заголовки в HTML 7. Абзацы в HTML 8. Разрыв строки 9. Форматирование текста 10. Разделение контента 11. Ссылки и гипертексты
Слайд 14ИСТОРИЯ ПОЯВЛЕНИЯ ЯЗЫКА HTML HTML (Hyper Text Markup Language) – язык
используемый для описания web-страниц HTML не является языком программирования, он является
языком разметки Язык разметки (или маркировки) состоит из множества меток/этикеток/тег-ов разметки Язык HTML использует тег-и для описания web-страниц Тег это слово или короткое описание которое этикетирует какую-то информацию, с целью ее быстрого нахождения Этикетки /разметки из HTML называются просто HTML-тегами HTML-документ описывает web-страницу и состоит из тегов HTML и простого текста Документ созданный с использованием HTML, может быть интерпретирован WEB-браузером, с целью выделения различных элементов документа и первичной их обработки
Слайд 15СОЗДАНИЕ HTML-ДОКУМЕНТА Для создания HTML-документа можно использовать любой текстовой редактор К
примеру самый простой - Блокнот (Note-pad) – удобный и простой
в использовании для описания web-страниц; Note-pad++, Visual Studio Code, Sublime… Профессионалы используют (но не всегда!) специальные редакторы-HTML, как например Macromedia DreamWeaver Предварительно, для создания HTML-документов, используемый редактор необходимо проинсталлировать
Слайд 16ШАГИ ДЛЯ СОЗДАНИЯ WEB-СТРАНИЦЫ Отрыть редактор (к примеру NotePad++) Создается HTML-документ Сохраняется документ,
определяя название файла и расширение. Обычно для HTML-документа используется
расширение .html или .htm (Закрывается файл) Можно открыть этот документ в любом Web-браузере, и он воспроизведёт текст. Открывается браузер и вписывается имя html-файла, указав при необходимости и путь к файлу Результат открытия и интерпретирования браузером HTML-документа - Web-страница Для валидации правильности создания веб документа можете использовать он-лайн валидаторы: http://validator.w3.org/nu/ , http://www.w3schools.com/html/html_validate.html
Слайд 17РЕКОМЕНДАЦИИ Для создания сайта рекомендуется Создать отдельную папку, с названием соответствующей названию
проекта В этой папке создайте еще минимум 2 папки: одну зарезервируйте
для изображений необходимых для сайта и вторую для определения стилей К примеру для моего примера ”Donuts” структура следующая:
В случае если необходимо добавить внешние JavaScript-ы, создайте дополнительную папку JS или JavaScript, в которой будете хранить скрипты
Слайд 19HTML ЭЛЕМЕНТЫ HTML документ определяется используя HTML-элементы HTML-элемент состоит из стартового тега
и завершающего тега Все теги HTML начинаются с "
скобки) и заканчиваются символом ">" (правой угловой скобки) Между стартовым и завершающим тегом размещается содержимое HTML-элемента Пример: <начальный_tag атрибуты> Cодержимое Некоторые HTML-элементы могут не иметь содержимого Пример пустого элемента: этикетка для создания разрыва строки -
Пустые элементы обычно закрываются в стартовом теге (обязательно в версии XHTML) Существуют многие HTML-элементы содержащие атрибуты или другие HTML-элементы Атрибуты предоставляют дополнительную информацию об элементе Атрибуты всегда указаны в начальном теге
Слайд 20HTML ЭЛЕМЕНТЫ Завершающий тег выглядит также, как стартовый, и отличается от
него прямым слэшем, перед текстом внутри угловых скобок Привет! -
пример тега с содержанием
- пример тега без содержания Некоторые браузеры отображают содержание и без завершающего тега, но не все!!! HTML не реагирует на регистр символов, описывающих тег! В HTML5 появились новые мультимедийные элементы: для внедрения звуков, аудио, видео новые элементы для контролов (эл. управления) в HTML формах и элементы, используемые в определении структуры сайта Кроме того, в 5-й версии исчезли некоторые элементы, присутствующие в версии 4.01
Слайд 21ОСНОВНАЯ СТРУКТУРА HTML-ДОКУМЕНТА Cамая простая веб страница состоит из минимум 3
тегов
Слайд 22ОСНОВНАЯ СТРУКТУРА HTML-ДОКУМЕНТА. II Простейшая HTML-страница состоит как минимум из трёх тегов: Тег —
это контейнер, в котором находится всё содержимое страницы, включая теги
и Тег предназначен для хранения элементов, цель которых — помочь браузеру в работе с данными. Содержимое этого тега не отображается напрямую Тег предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера
Слайд 23ДОБАВЛЕНИЯ В ОСНОВНОЙ СТРУКТУРЕ В последние версии HTML (после 4.01) в
основной структуре HTML-документа было добавлено описание , перед тегом html Это
описание необходимо браузерам для правильного представления web-страницы Оно указывает версию в которой была определена HTML-страница Данное описание не является тегом! В 5-й версии базовая структура будет:
Название документа Cодержание HTML-документа
Слайд 24ПРИМЕР Сколько, в следующем примере, HTML-элементов?
Пример
Пробуем…
Простой текст
Слайд 25АТРИБУТЫ HTML-ЭЛЕМЕНТОВ Атрибуты добавляют дополнительную информацию HTML-элементам HTML-элемент может иметь или не
иметь атрибуты Атрибуты определяются в открывающемся теге элемента Атрибуты добавляются соблюдая следующий
синтаксис: названиеАтрибута=«значение» Пример: Стандарты рекомендуют использование кавычек для определения значения атрибута! Отсутствие кавычек может привести к неправильному интерпретированию кода. Примечание: Какие кавычки чаще используются – одиночные или двойные?
Слайд 26ГЛОБАЛЬНЫЕ АТРИБУТЫ Глобальные атрибуты это те атрибуты которые можно использовать во
всех HTML-элементах Примеры глобальных атрибутов:
Существуют еще и глобальные атрибуты которые
определяют запуск событий – ставится в соответствие скрипт. Детали: http://www.w3schools.com/tags/ref_eventattributes.asp
Слайд 27ТЕГ HTML Тег имеет роль „передавать” браузеру что следует HTML-документ Тег
еще называется и корневым тегом для HTML-документа Тег это
тег-контейнер для всех остальных HTML-элементов Только описание не содержится в HTML элементе Все веб-браузеры поддерживают данный элемент
Слайд 28ЗАГОЛОВОК HTML-СТРАНИЦЫ Элемент представляет собой контейнер для других элементов, размещенных
в заголовке документа До 5-версии было обязательно его использование, а в
HTML5 данный тег может и отсутствовать Все веб-браузеры поддерживают данный элемент HEAD - тег html-страницы, содержащий: заголовок текущей страницы; мета-теги; сценарии JavaScript; стили форматирования и т.д. Эти данные (за исключением TITLE) не отображаются в окне браузера Метки, которые можно вставить в теге являются: , <style>, <meta>, <link>, <script>, <noscript>, <base><br> </div>
<div class="image">
<a href="/img/thumbs/6fda4b0bf357bc3aa1863a3afc0c9c3b-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ЗАГОЛОВОК HTML-СТРАНИЦЫЭлемент представляет собой контейнер для других элементов, размещенных в заголовке документаДо 5-версии было обязательно его использование, а в HTML5 данный тег может и отсутствоватьВсе веб-браузеры поддерживают данный элементHEAD - тег html-страницы, содержащий: заголовок текущей страницы; мета-теги; сценарии JavaScript; стили форматирования и т.д.Эти данные (за исключением TITLE) не отображаются в окне браузераМетки, которые можно вставить в теге являются: , , , , , , "><img src="/img/thumbs/6fda4b0bf357bc3aa1863a3afc0c9c3b-800x.jpg" title="Tema 2: ВВЕДЕНИЕ В ЯЗЫК РАЗМЕТКИ HTML ЗАГОЛОВОК HTML-СТРАНИЦЫЭлемент представляет собой контейнер для других элементов, размещенных в заголовке" alt="ЗАГОЛОВОК HTML-СТРАНИЦЫЭлемент представляет собой контейнер для других элементов, размещенных в заголовке документаДо 5-версии было обязательно его использование,"></a>
</div>
<hr>
</div>
<div class="descrip" id="slide29">
<h2><a href="/img/thumbs/11abe657de14df80c570fe3dc4e4e628-800x.jpg" target="_blank">Слайд 29</a>ПРИМЕР СОДЕРЖИМОГО ТЕГА HEAD<br>Элемент вставляется между открытом тегом HTML</h2>
<div class="text">
<h3>и открытом теге BODY<br><br>
Описание
<br><br>…<br><br><br></h3>
</div>
<div class="image">
<a href="/img/thumbs/11abe657de14df80c570fe3dc4e4e628-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ПРИМЕР СОДЕРЖИМОГО ТЕГА HEADЭлемент вставляется между открытом тегом HTML и открытом теге BODY Описание …"><img src="/img/thumbs/11abe657de14df80c570fe3dc4e4e628-800x.jpg" title="Tema 2: ВВЕДЕНИЕ В ЯЗЫК РАЗМЕТКИ HTML ПРИМЕР СОДЕРЖИМОГО ТЕГА HEADЭлемент вставляется между открытом тегом HTML и открытом" alt="ПРИМЕР СОДЕРЖИМОГО ТЕГА HEADЭлемент вставляется между открытом тегом HTML и открытом теге BODY Описание "></a>
</div>
<hr>
</div>
<div class="descrip" id="slide30">
<h2><a href="/img/thumbs/4bc9442a4558d37de93ce81271d46abc-800x.jpg" target="_blank">Слайд 30</a>ЭЛЕМЕНТЫ ТЕГА HEAD <br> - используется для указания названия/ заголовка</h2>
<div class="text">
<h3>документа<br>Он является парным тегом: <br> Название страницы<br>Не выводится в контенте</h3>
страницы! Название выводится в таб-е браузера<br>Пример:<br><head><br> <title>Информация про Молдову
Rezultat:
Слайд 31ЭЛЕМЕНТЫ ТЕГА HEAD. II Тег - инструктирует браузер относительно
полного базового адреса текущего документа Тег предназначен для документов, в которых используется
относительный адрес и эти документы могут переноситься в другую папку или даже на другой компьютер без потери связи Браузер ищет тег , определяет полный адрес документа и корректно загружает его Тег <мета> - предоставляет метаданные о некотором HTML-документе. Метаданные не будут отображаться на странице, но они будут использованы и обработаны машинами Метаданные это данные (информации) о данных Элемент <мета> обычно используется, чтобы описать ключевые слова, описывающие страницу, автора, дату последнего изменения и т.д. Метаданные могут быть использованы браузерами, поисковиками или другими веб-сервисами Примеры:
PS: name, content это атрибуты тега Атрибутам можно задать разные значения
Слайд 32КОДИРОВКА HTML-СТРАНИЦЫ Кодировку HTML-страницы нужно указывать для того, чтобы веб-браузер мог
правильно отображать текст на странице. Если браузер неправильно «угадает» кодировку, то вместо
текста будут отображаться иероглифы Чтобы сообщить браузеру кодировку HTML-страницы, необходимо внутри тега использовать тег
Самая распространённая современная кодировка — utf-8. Используйте её во всех своих проектах:
Слайд 33ЭЛЕМЕНТЫ ТЕГА HEAD. ТЕГ „LINK” Определяет связь между документом и внешним
ресурсом Все веб-браузеры поддерживают данный элемент Этот тег без содержания, но имеет
атрибуты Синтаксис: Несколько, самых используемых, атрибутов: href – обязательный атрибут, определяет местонахождение файла, связанным с текущим документом rel – обязательный атрибут который определяет тип взаимосвязи. Может принимать одно из нескольких значений: icon, stylesheet etc. type – определяет тип связанного документа (http://www.iana.org/assignments/media-types/media-types.xhtml )
Слайд 34ДОБАВЛЕНИЕ ИКОНКИ В ЗАГОЛОВКЕ СТРАНИЦЫ Используется тег „link”, из „head” Файлы могут
быть типа .ico или .png. Рекомендуемый размер изображения 32x32 Синтаксис:
Слайд 37ЦВЕТА В HTML Другие примеры цветов: http://www.w3schools.com/html/html_colors.asp, http://www.stm.dp.ua/web-design/color-html.php
Слайд 38ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ALINK, LINK, VLINK
"Fost-au acest
… Vezi poza domnitorului
Detalii despre domnitor gasesti aici
Слайд 39ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ „BGCOLOR” и „TEXT”
Rezultat:
Слайд 40ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ „BACKGROUND” и „TEXT” …
…
Слайд 41ЗАГОЛОВКИ В HTML HTML текстовые заголовки определяются тегами ... Все эти теги
парные
Пример:
Titlu de nivel 1 Titlu de nivel 2 Titlu de nivel
3
Titlu de nivel 4
Titlu de nivel 5
Titlu de nivel 6
Результат:
Слайд 42АБЗАЦЫ В HTML Текстовые абзацы в HTML определяются тегом . Браузер
автоматически добавит интервал между содержимом Это парный тег: Содержание Пример:
Информация
про Молдову
Cтрана Молдова
Республика Молдова – страна месторасположение которой географы определяют как юго-восточная Европа, но если смотреть объективно то Республика Молдова находится именно в центральной Европе расположившись на равном удалении от Уральских гор на Востоке и от границы Атлантического океана на Западе, также как от Средиземноморья на юге и от Скандинавии на севере Европы.
Тем самым Молдова является узловым центром между Востоком и Западом, равно как и между Скандинавией и Средиземноморьем с Балканами. Таким образом Молдова играет роль связующего звена с государствами Центральной и Восточной Европы...
Слайд 44РАЗРЫВ СТРОКИ В HTML Для разрыва строки используется тег
Этот тег не имеет содержания и, следовательно, в последних версиях,
он обязательно закрывается сразу же. Пример:
Информация про Молдову
Cтрана Молдова
Республика Молдова – страна месторасположение которой географы определяют как юго-восточная Европа, но если смотреть объективно то Республика Молдова находится именно в центральной Европе расположившись на равном удалении от Уральских гор на Востоке и от границы Атлантического океана на Западе, также как от Средиземноморья на юге и от Скандинавии на севере Европы.
Тем самым Молдова является узловым центром между Востоком и Западом, равно как и между Скандинавией и Средиземноморьем с Балканами. Таким образом Молдова играет роль связующего звена с государствами Центральной и Восточной Европы...
Слайд 46ВЫВОД ПРЕФОРМАТИРОВАННОГО ТЕКСТА Для вывода пре-форматированного текста используется тег „pre” „pre” это
парный тег и имеет следующий синтаксис: Содержание Текст включенный в элемент
будет выведен в пре-форматированном виде: фонт с фиксированной шириной - обычно Courier, сохраняя пробелы и переходы в новую строку Поддерживается всеми известными браузерами Рекомендация: Не использовать часто тег „pre”!!! Данный тег имеет атрибут „width” – для определения максимального количества символов в одной строке. Атрибут не поддерживается HTML5 (рекомендуется использовать стили)
Слайд 47ПРИМЕР ИСПОЛЬЗОВАНИЯ ТЕГА „PRE” … Зимнее утро ...Под голубыми небесами Великолепными коврами, Блестя на солнце,
снег лежит; Прозрачный лес один чернеет, И ель сквозь иней зеленеет, И речка
подо льдом блестит... …
Слайд 48ЦИТАТЫ В HTML существуют несколько тегов для обозначения цитат: предназначен для выделения длинных
цитат, которые могут состоять из нескольких абзацев. Тег выделяет цитату как
отдельный блок текста с отступами. предназначен для выделения коротких цитат в тексте предложения. Текст внутри этого тега автоматически обрамляется кавычками. используется для того, чтобы выделить источник цитаты, название произведения или автора цитаты. Все эти теги являются парными
