Вёрстка сайтов. Лекция 1. Введение в курс. Знакомство с HTML презентация

Содержание

Предисловие или зачем нам этот курс Основные понятия Что такое HTML? Установка и настройка ПО Photoshop для верстальщиков С чего начинается верстка простой страницы Содержание лекции

Слайд 1Верстка сайтов Лекция 1 Введение в курс. Знакомство с HTML.
Ксения Биденко, ArtCoding
kseniia.bidenko@gmail.com

Слайд 2Предисловие или зачем нам этот курс
Основные понятия
Что такое HTML?
Установка и

настройка ПО
Photoshop для верстальщиков
С чего начинается верстка простой страницы

Содержание лекции

Слайд 3Зачем нам этот курс
Получить профессиональные навыки
Полученные навыки позволят вам эффективно решать

типовые профессиональные задачи HTML-верстальщика. Вы научитесь создавать современные веб-интерфейсы и работать с живым кодом.

Старт карьеры
Полученный уровень подготовки позволит с лёгкостью начать работать HTML-верстальщиком или другим интернет-специалистом (интернет-маркетологом, контент-менеджером, SEO-специалистом).

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

Сделать привлекательное портфолио

Слайд 5Работать в сфере front-end.
Работать в сфере back-end.
Разрабатывать приложения под мобильные

платформы.
Работать в «смежной области».

Выбор специализации в сфере front-end:

разработка сайтов/landing pages итд
верстка писем для email-рассылок
работа с баннерами
разработка решений Rich Media Ad

Слайд 6 Интернет (Internet) — глобальная компьютерная сеть, система объединяющая сотни миллионов компьютеров

в общее информационное пространство. Часто упоминается как Всемирная сеть или Глобальная сеть, а также просто Сеть. Построена на базе стека протоколов TCP/IP. Интернет представляет свою инфраструктуру для прикладных сервисов различного назначения, самым популярным из которых является Всемирная Паутина – World Wide Web (WWW).

WWW (Web)– это сервис, обеспечивающий пользователю доступ к системе гипертекстовых мультимедийных документов (Web-страниц), распределенных по узлам сети (основан на протоколе HTTP).

Web-технология – совокупность средств и методов создания и использования данных для сервиса WWW.

Основные понятия

Слайд 7
Web-страница представляет собой текстовый файл, содержащий размеченный текст (текст с выделенными

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

Стек протоколов TCP/IP — набор сетевых протоколов передачи данных, ориентированных на совместную работу. Название TCP/IP происходит из двух наиважнейших протоколов семейства — Transmission Control Protocol (TCP) и Internet Protocol (IP), которые были разработаны и описаны первыми в данном стандарте.

 Domain Name System — система доменных имён DNS — компьютерная распределённая система для получения информации о доменах. Ключевые характеристики DNS: Распределённость администрирования. Распределённость хранения информации. Кеширование информации. Иерархическая структура. Резервирование.

Основные понятия

Слайд 8Основные понятия
Клиент-серверная архитектура

Вычислительная или сетевая архитектура, в которой задания или

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

Слайд 9Основные понятия
Клиентская часть (браузер) представляет собой приложение, которое устанавливается на компьютере

конечного пользователя и функцией которого является поддержание графического пользовательского интерфейса.

Web-сервер принимающий HTTP-запросы от клиентов, обычно веб-браузеров, и выдающий им HTTP-ответы, может хранить объекты локально в каталогах компьютера и обеспечивать доступ к этим объектам по URL-адресам.

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

Слайд 10Особенности Web 1.0

Статичные страницы вместо генерируемого пользователями динамического контента; Фреймовая

и/или табличная верстка; Использование фреймов;
Широкое использование нестандартных тегов, поддерживаемых только конкретным браузером; Использование физических или внедренных стилей, редко – встраиваемых;
Указание информации о рекомендованной версии браузера и разрешении монитора, при которых дизайн сайта отображается корректно;
Гостевые книги, форумы или чаты;
Использование графических и текстовых информеров для агрегирования информации.

Основные понятия

Слайд 11Особенности Web 2.0

Привлечение «коллективного разума» для наполнения сайта; Взаимодействие между

сайтами с использованием веб-сервисов; Обновление веб-страниц без перезагрузки;
Агрегирование и синдикация информации;
Объединение различных сервисов для получения нового функционала;
Дизайн с применением стилевой разметки и акцентом на юзабилити.

Основные понятия

Слайд 12Негласный стандарт Web 3.0

Семантическая паутина (англ. Semantic Web) — часть глобальной

концепции развития сети Интернет, целью которой является реализация возможности машинной обработки информации, доступной во Всемирной паутине.
Основной акцент концепции делается на работе с метаданными, однозначно характеризующими свойства и содержание ресурсов Всемирной паутины, вместо используемого в настоящее время текстового анализа документов. В семантической паутине предполагается повсеместное использование, во-первых, унифицированных идентификаторов ресурсов (URI), а во-вторых — онтологий и языков описания метаданных.

Основные понятия

Слайд 13По уровню дизайна:

Персональные страницы
Сайты некоммерческих организаций  Пример: www.w3.org
Коммерческие сайты  Пример: http://www.disney.ru/
Контент-сайты Пример: http://www.lenta.ru/


По функциональному назначению:

Сайт-визитка
Сайт-визитка с

минимальной интерактивностью
Контент-сайт
Интернет-магазин.

По способу реализации:

Динамические сайты
Статические сайты

Какими бывают сайты

Слайд 14 Язык разметки в компьютерной терминологии – средства описания данных и метаданных,

хранящихся в документе.

Язык разметки ≠ Язык программирования

Языки разметки отвечают только за логическое и визуальное расположение данных.

HyperText Markup Language – язык для структурирования и представления содержимого всемирной паутины.
HTML-документы представляют собой файлы с текстом и дополнительными инструкциями языка HTML, называемыми тегами. Теги позволяют задавать форматирование текста, а также размещать в документе мультимедийные файлы, гипертекстовые ссылки на другие документы, табличные данные, формы ввода данных. HTML-документы имеют расширение имени файла .htm или .html.

Что такое HTML?

Слайд 15Верстка сайтов HTML
Блочная
Фреймовая
Табличная

Слайд 16Документ HTML может включать следующие компоненты:
стилизованный и форматированный текст;
команды включения

графических и звуковых файлов;
гиперсвязи с различными ресурсами Internet;
скрипты, например JavaScript;
различные объекты – видео, изображения, Flash-анимацию.

Основными понятиями языка разметки HTML являются теги, элементы и атрибуты. Теги – специальные элементы, позволяющие отличать в документе описание разметки от описания данных.
Элементы – это тэги в совокупности с их содержанием.
Атрибуты используются при определении элемента, чтобы задать какие-либо параметры, уточняющие характеристики данного элемента.

Содержание и структура сайта

Слайд 17Содержание и структура сайта



charset="UTF-8" />
Document


Hello, World!


Как видно из приведенного кода, HTML документ всегда помещается в тег и
состоит из двух частей:
заголовка документа, определяемого тегом , тела документа, определяемого элементом .
В заголовке HTML-документа приводится информация о документе, которая не
отображается в окне браузера. Исключением является тег , содержимое<br>которого выводится в заголовке окна браузера и используется для идентификации<br>документа пользователем или поисковыми роботами. <br> </div> <div class="image"> <a href="/img/tmb/1/29777/b2ad041b7204b2b543bb93536535bf14-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Содержание и структура сайта Document Hello, World! Как видно из приведенного кода, HTML документ всегда помещается в тег исостоит из двух частей:заголовка документа, определяемого тегом , тела документа, определяемого элементом . В заголовке HTML-документа приводится информация о документе, которая неотображается в окне браузера. Исключением является тег , содержимоекоторого выводится в заголовке окна браузера и используется для идентификациидокумента пользователем или поисковыми роботами. "><img src="/img/tmb/1/29777/b2ad041b7204b2b543bb93536535bf14-800x.jpg" title="Содержание и структура сайта Document Hello, World!" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide18"> <h2><a href="/img/tmb/1/29777/aa1feade5309e3c5a6bf42918dcd31c0-800x.jpg" target="_blank">Слайд 18</a>Содержание и структура сайта<br>Секция DOCTYPE указывает браузеру тип документа и версию</h2> <div class="text"> использованного языка разметки. Здесь также указывается название и область видимости описания этого языка и адрес файла .dtd (document type definition).<br><br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><br>Гипертекстовый документ в формате HTML 4.01, содержащий фреймы.<br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br>Гипертекстовый документ в формате HTML 4.01 со строгим синтаксисом<br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br>Гипертекстовый документ в формате HTML 4.01 с нестрогим синтаксисом <br><!DOCTYPE HTML> - объявление для документов HTML5.<br> </div> <div class="image"> <a href="/img/tmb/1/29777/aa1feade5309e3c5a6bf42918dcd31c0-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Содержание и структура сайтаСекция DOCTYPE указывает браузеру тип документа и версию использованного языка разметки. Здесь также указывается название и область видимости описания этого языка и адрес файла .dtd (document type definition).Гипертекстовый документ в формате HTML 4.01, содержащий фреймы.Гипертекстовый документ в формате HTML 4.01 со строгим синтаксисомГипертекстовый документ в формате HTML 4.01 с нестрогим синтаксисом - объявление для документов HTML5."><img src="/img/tmb/1/29777/aa1feade5309e3c5a6bf42918dcd31c0-800x.jpg" title="Содержание и структура сайтаСекция DOCTYPE указывает браузеру тип документа и версию использованного языка разметки. Здесь" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide19"> <h2><a href="/img/tmb/1/29777/2dae80a4da1a6a6632f5e4ea2468dc39-800x.jpg" target="_blank">Слайд 19</a>Содержание и структура сайта<br>Мета-тег HTML — это элемент разметки html, описывающий</h2> <div class="text"> свойства документа как такового (метаданные). Назначение мета-тега определяется набором его атрибутов, которые задаются в теге <meta>, его размещают в блоке <head>...</head> веб-страницы.<br><br><head><br><meta name="author" content="строка"> — автор веб-документа<br><meta name="copyright" content="строка"> — авторские права<br><meta name="keywords" content="строка"> — список ключевых слов<br><meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> — запрет на индексирование<br><meta http-equiv="content-type" content="text/html; charset=UTF-8"> — тип и кодировка<br><meta http-equiv="refresh" content="число; URL=адрес"> — перенаправление<br></head><br> </div> <div class="image"> <a href="/img/tmb/1/29777/2dae80a4da1a6a6632f5e4ea2468dc39-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Содержание и структура сайтаМета-тег HTML — это элемент разметки html, описывающий свойства документа как такового (метаданные). Назначение мета-тега определяется набором его атрибутов, которые задаются в теге , его размещают в блоке ... веб-страницы. — автор веб-документа — авторские права — список ключевых слов — запрет на индексирование — тип и кодировка — перенаправление"><img src="/img/tmb/1/29777/2dae80a4da1a6a6632f5e4ea2468dc39-800x.jpg" title="Содержание и структура сайтаМета-тег HTML — это элемент разметки html, описывающий свойства документа как такового" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide20"> <h2><a href="/img/tmb/1/29777/c20ca19f35a0f83b9a5338a26c67d33b-800x.jpg" target="_blank">Слайд 20</a>Элементы сайта могут быть <br>блочными (структурное форматирование)<br>строчными (непосредственное или логическое форматирование)<br><br>Блочные</h2> <div class="text"> элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.<br>Теги <address>, <blockquote>, <center>, <div>, <form>, <h1>, <hr>, <menu>, <ol>, <p>, <table>, <ul>…<br><br>Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения<br>Теги <textarea>, <span>, <code>, <a>, <br>, <dfn>…<br><p>Содержание и структура сайта<br> </div> <div class="image"> <a href="/img/tmb/1/29777/c20ca19f35a0f83b9a5338a26c67d33b-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Элементы сайта могут быть блочными (структурное форматирование)строчными (непосредственное или логическое форматирование)Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.Теги , , , , , , , , , , , …Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделенияТеги , , , , , …Содержание и структура сайта"><img src="/img/tmb/1/29777/c20ca19f35a0f83b9a5338a26c67d33b-800x.jpg" title="Элементы сайта могут быть блочными (структурное форматирование)строчными (непосредственное или логическое форматирование)Блочные элементы характеризуются тем, что" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide21"> <h2><a href="/img/tmb/1/29777/3a1f5cde212685afcc878b32fcac7c60-800x.jpg" target="_blank">Слайд 21</a>Содержание и структура сайта<br>Форматирование текста и cтрочные элементы<br>Являются наиболее часто используемыми</h2> <div class="text"> и играют основную роль в отображении контента и восприятии его пользователем. В основном они используются для изменения вида текста или его логического выделения. <br><br><a>Гиперссылки </a> <br><img>Вставка изображений </img> <br>Перевод строки <br /> <p /><br><b>Жирное начертание шрифта </b> <br><i>Курсивное начертание шрифта </i> <br><u>Нижнее подчеркивание текста </u> <br><span>Выделение строчных элементов </span><br> </div> <div class="image"> <a href="/img/tmb/1/29777/3a1f5cde212685afcc878b32fcac7c60-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Содержание и структура сайтаФорматирование текста и cтрочные элементыЯвляются наиболее часто используемыми и играют основную роль в отображении контента и восприятии его пользователем. В основном они используются для изменения вида текста или его логического выделения. Гиперссылки Вставка изображений Перевод строки Жирное начертание шрифта Курсивное начертание шрифта Нижнее подчеркивание текста Выделение строчных элементов "><img src="/img/tmb/1/29777/3a1f5cde212685afcc878b32fcac7c60-800x.jpg" title="Содержание и структура сайтаФорматирование текста и cтрочные элементыЯвляются наиболее часто используемыми и играют основную роль" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide22"> <h2><a href="/img/tmb/1/29777/5446648abf14fc5944b623ca8760bdcd-800x.jpg" target="_blank">Слайд 22</a>Часто используемые теги<br><br>... — контейнер гипертекста<br>... — контейнер заголовка документа<br>... —</h2> <div class="text"> название документа (то, что отображается в заголовке окна браузера)<br><body>...</body> — контейнер тела документа<br><div>...</div> — контейнер общего назначения (структурный блок)<br><hN>...</hN> — заголовок N-ного уровня (N = 1...6)<br><p>...</p> — основной текст<br><a>...</a> — гиперссылка<br><ol>...</ol> — нумерованный список<br><ul>...</ul> — маркированный список<br><li>...</li> — элемент списка<br><table>...</table> — контейнер таблицы<br><tr>...</tr> — строка таблицы<br><td>...</td> — ячейка таблицы<br><img> — изображение<br><form>...</form> — форма<br><i>...</i> — отображение текста курсивом<br><b>...</b> — отображение текста полужирным шрифтом<br><em>...</em> — выделение (курсивом)<br><strong>...</strong> — усиление (полужирным шрифтом)<br><br> — принудительный разрыв строки<br> </div> <div class="image"> <a href="/img/tmb/1/29777/5446648abf14fc5944b623ca8760bdcd-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Часто используемые теги... — контейнер гипертекста... — контейнер заголовка документа... — название документа (то, что отображается в заголовке окна браузера)... — контейнер тела документа... — контейнер общего назначения (структурный блок)... — заголовок N-ного уровня (N = 1...6)... — основной текст... — гиперссылка... — нумерованный список... — маркированный список... — элемент списка... — контейнер таблицы... — строка таблицы... — ячейка таблицы — изображение... — форма... — отображение текста курсивом... — отображение текста полужирным шрифтом... — выделение (курсивом)... — усиление (полужирным шрифтом) — принудительный разрыв строки"><img src="/img/tmb/1/29777/5446648abf14fc5944b623ca8760bdcd-800x.jpg" title="Часто используемые теги... — контейнер гипертекста... — контейнер заголовка документа... — название документа (то, что" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide23"> <h2><a href="/img/tmb/1/29777/2065f9907490f49303029ceb0a58ce75-800x.jpg" target="_blank">Слайд 23</a>Часто используемые теги<br>Теги могут быть вложены, при этом форматирование внутреннего тега</h2> <div class="text"> имеет преимущество перед внешним. При использовании вложенных тегов их нужно закрывать, начиная с самого последнего и двигаясь к первому:<br><br><!-- Список как пример использования вложенных тегов --><br><ol><br><li>Элемент списка</li><br><li>Второй элемент списка</li><br></ol><br><div><br> <h2>Заголовок второго уровня</h2><br> <p>и основной текст</p><br> внутри логического блока<br></div> <br> </div> <div class="image"> <a href="/img/tmb/1/29777/2065f9907490f49303029ceb0a58ce75-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Часто используемые тегиТеги могут быть вложены, при этом форматирование внутреннего тега имеет преимущество перед внешним. При использовании вложенных тегов их нужно закрывать, начиная с самого последнего и двигаясь к первому:Элемент спискаВторой элемент списка Заголовок второго уровня и основной текст внутри логического блока "><img src="/img/tmb/1/29777/2065f9907490f49303029ceb0a58ce75-800x.jpg" title="Часто используемые тегиТеги могут быть вложены, при этом форматирование внутреннего тега имеет преимущество перед внешним." alt=""></a> </div> <hr> </div> <div class="descrip" id="slide24"> <h2><a href="/img/tmb/1/29777/b4910bd909f6291d83647b8a44f3a5a7-800x.jpg" target="_blank">Слайд 24</a>Атрибуты<br>Универсальные атрибуты применяются практически ко всем тегам, поэтому выделены в отдельную</h2> <div class="text"> группу, чтобы не повторять их для всех тегов.<br><br>style - применяется для определения стиля элемента с помощью правил CSS<br>аccesskey - позволяет получить доступ к элементу с помощью заданного сочетания клавиш.<br>contenteditable - сообщает, что элемент доступен для редактирования пользователем.<br>dir - задает направление и отображение текста — слева направо или справа налево.<br>hidden - скрывает содержимое элемента от просмотра. <br>lang- браузер использует значение параметра для правильного отображения некоторых национальных символов.<br>spellcheck - указывает браузеру проверять или нет правописание и грамматику в тексте..<br>tabindex - устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab.<br> </div> <div class="image"> <a href="/img/tmb/1/29777/b4910bd909f6291d83647b8a44f3a5a7-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="АтрибутыУниверсальные атрибуты применяются практически ко всем тегам, поэтому выделены в отдельную группу, чтобы не повторять их для всех тегов.style - применяется для определения стиля элемента с помощью правил CSSаccesskey - позволяет получить доступ к элементу с помощью заданного сочетания клавиш.contenteditable - сообщает, что элемент доступен для редактирования пользователем.dir - задает направление и отображение текста — слева направо или справа налево.hidden - скрывает содержимое элемента от просмотра. lang- браузер использует значение параметра для правильного отображения некоторых национальных символов.spellcheck - указывает браузеру проверять или нет правописание и грамматику в тексте..tabindex - устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab."><img src="/img/tmb/1/29777/b4910bd909f6291d83647b8a44f3a5a7-800x.jpg" title="АтрибутыУниверсальные атрибуты применяются практически ко всем тегам, поэтому выделены в отдельную группу, чтобы не повторять" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide25"> <h2><a href="/img/tmb/1/29777/0d0cab78d7aa5617765bd450d0af8171-800x.jpg" target="_blank">Слайд 25</a>Атрибуты<br></h2> <div class="text"> </div> <div class="image"> <a href="/img/tmb/1/29777/0d0cab78d7aa5617765bd450d0af8171-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Атрибуты"><img src="/img/tmb/1/29777/0d0cab78d7aa5617765bd450d0af8171-800x.jpg" title="Атрибуты" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide26"> <h2><a href="/img/tmb/1/29777/6d57b8de9db9db72d2a4b6480ecfccad-800x.jpg" target="_blank">Слайд 26</a>Гиперссылка - это особым образом помеченный фрагмент веб-страницы (текст, изображение и</h2> <div class="text"> др.), который связан с другим документом. Для указания гиперссылок используется тег <a>. Гиперссылки позволяют перемещаться между связанными веб-страницами.<br>Абсолютные ссылки указывают, как правило, на внешний ресурс. Для них нужно указывать полный путь:<br><a href="http://example.com/page.html">Абсолютная ссылка</a><br><a href="http://example.com/images/figure1.gif">Ссылка на страницу в каталоге</a><br>Относительные ссылки, напротив, используют для перехода на внутренние страницы сайта. Для них нужно указывать путь относительно ссылающейся страницы:<br><a href="/page.html#seg1">Ссылка на фрагмент страницы в текущем каталоге</a><br><a href="/../h/index.htm">Ссылка на страницу в вышележащем каталоге </a><br><p>Гиперссылки<br> </div> <div class="image"> <a href="/img/tmb/1/29777/6d57b8de9db9db72d2a4b6480ecfccad-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Гиперссылка - это особым образом помеченный фрагмент веб-страницы (текст, изображение и др.), который связан с другим документом. Для указания гиперссылок используется тег . Гиперссылки позволяют перемещаться между связанными веб-страницами.Абсолютные ссылки указывают, как правило, на внешний ресурс. Для них нужно указывать полный путь:Абсолютная ссылкаСсылка на страницу в каталогеОтносительные ссылки, напротив, используют для перехода на внутренние страницы сайта. Для них нужно указывать путь относительно ссылающейся страницы:Ссылка на фрагмент страницы в текущем каталогеСсылка на страницу в вышележащем каталоге Гиперссылки"><img src="/img/tmb/1/29777/6d57b8de9db9db72d2a4b6480ecfccad-800x.jpg" title="Гиперссылка - это особым образом помеченный фрагмент веб-страницы (текст, изображение и др.), который связан с" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide27"> <h2><a href="/img/tmb/1/29777/d7bd80d1d3e3a79c87e6230075fe92fd-800x.jpg" target="_blank">Слайд 27</a>Таблицы<br>HTML таблицы состоят из строк и столбцов ячеек, которые могут содержать</h2> <div class="text"> текст и рисунки. Используются для упорядочения и представления табличных данных. <br><br>Контейнер для элементов таблицы <table></table> <br>Контейнер для строки таблицы <tr></tr> <br>Контейнер для одной ячейки <td></td> <br>Контейнер для одной ячейки заголовка <th></th><br> </div> <div class="image"> <a href="/img/tmb/1/29777/d7bd80d1d3e3a79c87e6230075fe92fd-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ТаблицыHTML таблицы состоят из строк и столбцов ячеек, которые могут содержать текст и рисунки. Используются для упорядочения и представления табличных данных. Контейнер для элементов таблицы Контейнер для строки таблицы Контейнер для одной ячейки Контейнер для одной ячейки заголовка "><img src="/img/tmb/1/29777/d7bd80d1d3e3a79c87e6230075fe92fd-800x.jpg" title="ТаблицыHTML таблицы состоят из строк и столбцов ячеек, которые могут содержать текст и рисунки. Используются" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide28"> <h2><a href="/img/tmb/1/29777/3776daa84659d8a5584e6088372f8453-800x.jpg" target="_blank">Слайд 28</a>В случае, если кодировка или конфигурация оборудования и программного обеспечения не</h2> <div class="text"> позволяет вводить определенные символы, например, ©, ®, ₤ или §, можно использовать ссылки на символы, называемые Escape-последовательностями:<br>• Числовые ссылки на символы, например, © (символ ©).<br>• Буквенные обозначения символов, например, © (символ ©). <br><p> Escape-последовательности<br> </div> <div class="image"> <a href="/img/tmb/1/29777/3776daa84659d8a5584e6088372f8453-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="В случае, если кодировка или конфигурация оборудования и программного обеспечения не позволяет вводить определенные символы, например, ©, ®, ₤ или §, можно использовать ссылки на символы, называемые Escape-последовательностями:• Числовые ссылки на символы, например, © (символ ©).• Буквенные обозначения символов, например, © (символ ©). Escape-последовательности"><img src="/img/tmb/1/29777/3776daa84659d8a5584e6088372f8453-800x.jpg" title="В случае, если кодировка или конфигурация оборудования и программного обеспечения не позволяет вводить определенные символы," alt=""></a> </div> <hr> </div> <div class="descrip" id="slide29"> <h2><a href="/img/tmb/1/29777/1715b3f81915f76cff164c199ff9bf8b-800x.jpg" target="_blank">Слайд 29</a>Установка и настройка ПО<br><br><br></h2> <div class="text"> </div> <div class="image"> <a href="/img/tmb/1/29777/1715b3f81915f76cff164c199ff9bf8b-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Установка и настройка ПО"><img src="/img/tmb/1/29777/1715b3f81915f76cff164c199ff9bf8b-800x.jpg" title="Установка и настройка ПО" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide30"> <h2><a href="/img/tmb/1/29777/d3ad1681a8f0be6babad1281398b03a8-800x.jpg" target="_blank">Слайд 30</a>Настройка интерфейса и горячих клавиш<br><br>Layers – панель слоёв – папки и слои из которых состоит</h2> <div class="text"> макет.<br>Character – данные о выделенном тексте (шрифт, цвет, размер, интерлиньяж и пр.) Auto Collapse.<br>Info – не обязательная, показывает цвет под курсором, размеры выделения области, длину измерения.<br><br>Работа с сеткой<br>Важным моментом при верстке сайта является соблюдение расположения элементов по сетке, используемой дизайнером при разработке макета.<br><br>Резка, основанная на слоях – края отрезка придерживаются границами слоя. Для того чтобы реализовать резку, основанную на слоях, выберите слой на панели слоёв, перейдите в меню и выберите пункт Layer>New Layer Based Slice. <br><p>Photoshop для верстальщиков<br> </div> <div class="image"> <a href="/img/tmb/1/29777/d3ad1681a8f0be6babad1281398b03a8-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Настройка интерфейса и горячих клавишLayers – панель слоёв – папки и слои из которых состоит макет.Character – данные о выделенном тексте (шрифт, цвет, размер, интерлиньяж и пр.) Auto Collapse.Info – не обязательная, показывает цвет под курсором, размеры выделения области, длину измерения.Работа с сеткойВажным моментом при верстке сайта является соблюдение расположения элементов по сетке, используемой дизайнером при разработке макета.Резка, основанная на слоях – края отрезка придерживаются границами слоя. Для того чтобы реализовать резку, основанную на слоях, выберите слой на панели слоёв, перейдите в меню и выберите пункт Layer>New Layer Based Slice. Photoshop для верстальщиков"><img src="/img/tmb/1/29777/d3ad1681a8f0be6babad1281398b03a8-800x.jpg" title="Настройка интерфейса и горячих клавишLayers – панель слоёв – папки и слои из которых состоит макет.Character – данные о выделенном тексте" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide31"> <h2><a href="/img/tmb/1/29777/d88443561378f95e961fb78958f24492-800x.jpg" target="_blank">Слайд 31</a>Использование экшнов<br>Для ускорения работы с документами, а также случаев, когда требуется</h2> <div class="text"> повторить одно и то же действие (или несколько действий) большое количество раз. Одним из самых полезных экшнов является сохранение каждого слоя в отдельный документ.<br><br>Экспорт графики для WEB<br>Большие фотографические (многоцветные) изображения – JPEG, качество 60‒95.<br>Маленькие картинки, вписывающиеся в 256 цветов, где не нужна полупрозрачность или она бинарная – PNG‑8.<br>Любые картинки где нужна полупрозрачность или отсутствие искажений – PNG‑24.<br><p>Photoshop для верстальщиков<br> </div> <div class="image"> <a href="/img/tmb/1/29777/d88443561378f95e961fb78958f24492-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Использование экшновДля ускорения работы с документами, а также случаев, когда требуется повторить одно и то же действие (или несколько действий) большое количество раз. Одним из самых полезных экшнов является сохранение каждого слоя в отдельный документ.Экспорт графики для WEBБольшие фотографические (многоцветные) изображения – JPEG, качество 60‒95.Маленькие картинки, вписывающиеся в 256 цветов, где не нужна полупрозрачность или она бинарная – PNG‑8.Любые картинки где нужна полупрозрачность или отсутствие искажений – PNG‑24.Photoshop для верстальщиков"><img src="/img/tmb/1/29777/d88443561378f95e961fb78958f24492-800x.jpg" title="Использование экшновДля ускорения работы с документами, а также случаев, когда требуется повторить одно и то" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide32"> <h2><a href="/img/tmb/1/29777/8a0dfd70636e333a339fba92a437e189-800x.jpg" target="_blank">Слайд 32</a>Полезные источники информации<br>Полный справочник по HTML и CSS <br>http://htmlbook.ru/<br><br>Росс В. С.</h2> <div class="text"> Создание сайтов: HTML, CSS, PHP, MySQL. Учебное пособие<br>http://www.ict.edu.ru/ft/006168/ross.pdf<br><br>Онлайн-журнал WebForMySelf: все о создании сайтов<br>http://webformyself.com/<br><br>Блог о CSS – полезные решения<br>https://css-tricks.com/<br><br>«Дизайн журнал «Дежурка» - статьи и уроки по веб-дизайну<br>http://www.dejurka.ru/<br> </div> <div class="image"> <a href="/img/tmb/1/29777/8a0dfd70636e333a339fba92a437e189-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Полезные источники информацииПолный справочник по HTML и CSS http://htmlbook.ru/Росс В. С. Создание сайтов: HTML, CSS, PHP, MySQL. Учебное пособиеhttp://www.ict.edu.ru/ft/006168/ross.pdfОнлайн-журнал WebForMySelf: все о создании сайтовhttp://webformyself.com/Блог о CSS – полезные решенияhttps://css-tricks.com/«Дизайн журнал «Дежурка» - статьи и уроки по веб-дизайнуhttp://www.dejurka.ru/"><img src="/img/tmb/1/29777/8a0dfd70636e333a339fba92a437e189-800x.jpg" title="Полезные источники информацииПолный справочник по HTML и CSS http://htmlbook.ru/Росс В. С. Создание сайтов: HTML, CSS," alt=""></a> </div> <hr> </div> </div> <div class="custom" > <!-- Yandex.RTB R-A-468740-8 --> <div id="yandex_rtb_R-A-468740-8"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-468740-8", renderTo: "yandex_rtb_R-A-468740-8", async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script></div> <div class="url" id="download"><a href="/uncategorized/vyorstka-saytov-lektsiya-1-vvedenie-v-kurs-znakomstvo-s-html/download">Скачать презентацию</a></div> </div> <div class="right"> <div class="banners"> <div class="custom" > <!-- Yandex.RTB R-A-468740-2 --> <div id="yandex_rtb_R-A-468740-2"></div> <script>window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: 'yandex_rtb_R-A-468740-2', blockId: 'R-A-468740-2' }) })</script></div> </div> <div class="list related"> <h2>Похожие презентации</h2> <div class="wrapper"> <a href="/uncategorized/krymskiy-most"> <img src="/img/tmb/1/35609/c852a82e444a095eed3dc2e766085aba-800x.jpg" alt=""> <span class="desc"> <span>Крымский мост</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 339</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/ekologicheskaya-ustoychivost-i-energoeffektivnye-tehnologii"> <img src="/img/tmb/3/294007/18d0969b1c58d2730a85f68e21664130-800x.jpg" alt=""> <span class="desc"> <span>Экологическая устойчивость и Энергоэффективные технологии</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 200</span> </span> </a> </div> <div class="custom" > <!-- Yandex.RTB R-A-468740-13 --> <script>window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ type: 'fullscreen', blockId: 'R-A-468740-13' }) })</script></div> <div class="wrapper"> <a href="/uncategorized/8-marta-2031"> <img src="/img/tmb/4/382910/b1152abc24f9f9f0a04f89ec6741b0f4-800x.jpg" alt=""> <span class="desc"> <span>8 марта</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 256</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/b-u-s-y"> <img src="/img/tmb/2/116095/9d65fe4f8eb0b7a97f1fa11bd39990c4-800x.jpg" alt=""> <span class="desc"> <span>"Б У С Ы"</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 193</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/osobennosti-raboty-pgu-oao-eon-rossiya"> <img src="/img/tmb/4/372605/4c9b63bda1be65205340837b7858903a-800x.jpg" alt=""> <span class="desc"> <span>Особенности работы ПГУ ОАО Э.ОН Россия</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 301</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/multimediynye-proektory-1"> <img src="/img/tmb/4/351136/631bed5005f6c728f723d863d0a4eb9a-800x.jpg" alt=""> <span class="desc"> <span>Мультимедийные проекторы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 673</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> </div> </div> <div class="container bottom"> <div> <div class="call_back"> <h4><i class="fas fa-bullhorn"></i>Обратная связь</h4> <p>Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:</p> <p>Email: <a href="#" class="js_hidden_email" data-address="thepresentation" data-domain="ya.ru">Нажмите что бы посмотреть</a> </p> </div> <div class="links"> </div> <div class="whatis"> <h4><i class="fa fa-info text-red"></i>Что такое ThePresentation.ru?</h4> <p>Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.</p> <hr /> <p><a href="/privacy">Для правообладателей</a></p> <a href="https://metrika.yandex.ru/stat/?id=54509641&from=informer" target="_blank" rel="nofollow"><img src="https://informer.yandex.ru/informer/54509641/3_1_FFFFFFFF_EFEFEFFF_0_pageviews" style="width:88px; height:31px; border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)" class="ym-advanced-informer" data-cid="54509641" data-lang="ru" /></a> <!--LiveInternet counter--> <script type="text/javascript"> document.write('<a href="//www.liveinternet.ru/click" '+ 'target="_blank"><img src="//counter.yadro.ru/hit?t16.2;r'+ escape(document.referrer)+((typeof(screen)=='undefined')?'': ';s'+screen.width+'*'+screen.height+'*'+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+';u'+escape(document.URL)+ ';h'+escape(document.title.substring(0,150))+';'+Math.random()+ '" alt="" title="LiveInternet: показано число просмотров за 24'+ ' часа, посетителей за 24 часа и за сегодня" '+ 'border="0" width="88" height="31"><\/a>') </script> <!--/LiveInternet--> </div> <div class="clear"></div> </div> </div> <script src="/templates/presentation/js/script.js?0ed36ea232886ff4063bbdd9e2c5b9c0"></script> </body> </html>