HTML и основы Web-дизайна. Документ HTML состоит из собственно текста документа и специальных команд (тэгов), определяющих форму его отображения при просмотре. - презентация

1 HTML и основы Web-дизайна

2 Документ HTML состоит из собственно текста документа и специальных команд (тэгов), определяющих форму его отображения при просмотре. Для просмотра документов используется специальная программа - "браузер", например, Internet Explorer или Opera. HTML-документ - Web-страница, написанная с использованием языка разметки HTML. Ее можно создавать одним из следующих основных способов: 1.Редактировать обычным текстовым редактором, например, набрать коды документа в текстовом редакторе «Блокнот». После этого сохранить страницу не как текстовый документ (расширение TXT), а как HTML-документ (расширение HTML) 2. Можно (но не рекомендуется) использовать программы Microsoft Office (WORD, PowerPoint и др.). После набора текста имеется возможность сохранить документ как Web-страницу. Однако, при сохранении такого документа по умолчанию будет записано много лишней информации. К тому же, Word не реализует многих возможностей языка HTML. 3.Использовать специализированную программу для Web-дизайна, например, Macromedia DreamWeaver. Такая программа как делает более наглядным редактирование кода HTML, так и позволяет набирать документ, подобно программе Word, с последующим сохранением его в виде Web-страницы.

3 Сохранение документа, набранного в «Блокноте», в виде файла HTML: 1.Выбрать в меню пункт «Сохранить как». 2.В нем изменить адрес папки, куда надо сохранить файл («мои документы» на Вашу личную папку). 3.Тип файла «текстовые документы» изменить на «все файлы» 4.Написать выбранное Вами имя файла, явно указав расширение html. Например, в строке «имя файла» набираем index.html

4 Общая схема документа в формате HTML выглядит следующим образом: Титульная строка документа Основной текст документа Всякий тэг имеет свое уникальное имя, несодержащее пробелов, и всегда заключен в угловые скобки, (например, HEAD), которые, таким образом, относятся к спец. символам и не могут непосредственно присутствовать в основном тексте. В написании тэгов могут использоваться буквы верхнего или нижнего регистров (одно из двух). Этот факт можно использовать для улучшения читаемости кодов. Большинство тэгов существуют в двух вариантах - начальный и оконечный. Оконечный тэг всегда следует после начального и снабжен дополнительным спец. символом /. Например,,. Почти у всех начальных тэгов есть дополнительные параметры (атрибуты), которые имеют уникальные имена без пробелов и значения, у которых пробелы допустимы. Атрибуты тэга записываются в любом порядке и разделяются пробелами. Общая форма задания атрибута такова: ИМЯ_АТРИБУТА="ЗНАЧЕНИЕ_АТРИБУТА" Например, Кавычки можно не ставить, если в значении атрибута нет пробелов. Если атрибут может принимать только одно значение, то его форма записи упрощается до одного имени, например,

5 Форматирование шрифтов Форматирование шрифтов осуществляется по следующей схеме: текст, к которому это форматирование применяется Для того, чтобы выделить в тексте «технологии социологического исследования» слово «социологического» жирным шрифтом, можно использовать тэг. Применяется он так: технологии социологического исследования. Тэги, используемые для форматирования шрифтов: жирным шрифтом курсивом подчеркнутым шрифтом зачеркнутым шрифтом нижний индекс (например, как в выражении C2H5OH). верхний индекс (например, как в выражении x2+y2=z2) крупным шрифтом мелким шрифтом

6 Изменение размера, цвета и литеры шрифта Для этого служит тэг. Его параметры: COLOR – задает цвет шрифта, которым будет написан текст (который следует за этим тэгом). Значениями тэга COLOR могут служить названия основных цветов (red, blue, green и т.п.) или RGB-коды цвета. SIZE – размер шрифта. Параметрами могут быть числа от –7 до +7. Чем больше число, тем крупнее шрифт. FACE – тип шрифта (форма букв). Параметрами являются названия шрифтов, например, Arial, Courier, Times New Roman. Это те же названия, которые используются в программах Microsoft Office (например, Word). Вы можете указать в тэге FONT сразу несколько шрифтов через запятую. Тогда компьютер при открытии Вашего документа сначала попробует применить 1-й из указанных шрифтов, если его не окажется, то второй шрифт, затем третий и т.д. Пример команды FONT: пусть во фразе: «у меня пятерка по истории!» слово пятерка хочется написать шрифтом Arial крупными красными буквами. Это запишется так: У меня пятерка по истории!

7 Перевод строки. Служебные символы В языке HTML игнорируются все символы перевода строки, которые возникают при наборе текста в редакторе «Блокнот» (при нажатии клавиши Enter). Поэтому даже если набранный в «Блокноте» текст выглядит относительно аккуратно, программа Internet Explorer может показать его не так, как Вы хотите. Например, четверостишие может быть показано в одну-две строчки. Чтобы такого не происходило, переводы строки требуется обозначать специальным служебным символом. Это тэг, он непарный и в отличие от многих других тэгов его не требуется закрывать тэгом. Например, Буря мглою небо кроет, Вихри снежные крутя. То как зверь, она завоет... Если при наборе документа Вы используете несколько пробелов подряд, то броузер (Internet Explorer) все равно покажет их как один пробел. Если Вы все-таки хотите использовать в тексте несколько пробелов, Вам вместо пробела потребуется набирать следующую последовательность символов: Например, фраза «Ваш возраст: лет» будет записана так: «Ваш возраст: лет». Другие служебные символы: < - знак & - знак &

8 Форматирование фрагментов текста (параграфов) Для того, чтобы текст выглядел аккуратнее, его удобно разделить на абзацы. Для этого существует тэг. Тэг пишется в начале абзаца, а в конце абзаца он закрывается:. Для выравнивание текста по левому краю, по правому краю, по центру или по ширине (т.е. по обоим краям) в тэг добавляются параметры: Вид выравнивания Тэг + параметр По левому краю По правому краю По центру Выравнивание по ширине Бывают ситуации, когда хочется вставить на страницу текст в том виде, в котором он набран в текстовом редакторе, без дополнительной разметки. (например, таблицы, стихи Маяковского и т.п.) Для этого используется тэг. Например, Учиться!

9 Форматирование разделительных линий Части текста можно разделять горизонтальными линиями. Для этого служит тэг Этот тэг непарный: его закрывать не нужно. Например, следующая запись:... конец 1-й части начало 2-й части... приведет к появлению на экране такого фрагмента:...конец 1-й части начало 2-й части.... Параметрами тэга можно изменить вид линии (по умолчанию это будет черная линия толщиной в 1 пиксель длиной во весь экран). Вот эти параметры: COLOR=название или код цвета. Этот параметр задает цвет линии. WIDTH=сколько% Ширина линии (в процентах от всей ширины экрана) SIZE=число Толщина линии (в пикселях) ALIGN=значение Положение линии слева(Left), справа (Right) или по Центру (Center) Например, если нам требуется провести синюю линию по центру экрана толщиной 4 пикселя и шириной в 60% экрана, мы запишем: Не обязательно, чтобы параметры присутствовали все.

10 Создание заголовков Заголовки в документе создаются с помощью команд: Заголовок причем при i = 1 заголовок самый крупный, а при i = 6 - самый мелкий. Отображаемый текст Запись в формате HTML Заголовок1 Заголовок1 Заголовок2 Заголовок2 Заголовок3 Заголовок3 Заголовок4 Заголовок4 Заголовок5 Заголовок5 Заголовок6 Заголовок6

11 Создание списков В HTML - документах используется 3 вида списков: 1.Неупорядочные списки, 2.Упорядочные списки, 3.Списки - определения. Неупорядоченный список использует для выделения записей специальные символы. Неупорядоченный список определяется следующими командами начала и конца списка: Каждый элемент списка начинается с команды: Ниже приводится пример неупорядочного списка: Так текст будет выглядеть: Строки списка: Строка 1 списка Строка 2 списка Строка 3 списка Таким кодом он может быть записан: Строки списка: Строка 1 списка Строка 2 списка Строка 3 списка

12 В команде может быть параметр TYPE, который определяет внешний вид символа, используемого для выделения строки в списке и может иметь следующие значения: - круглая жирная точка, - окружность, - маленький черный квадрат. В упорядоченном списке все записи пронумерованы. Упорядоченный список определяется следующими командами начала и конца списка: Каждый элемент списка, как и в неупорядоченном списке, начинается с команды: В команде может быть параметр TYPE, который определяет тип нумерации и может иметь следующие значения: - прописными буквами, - строчными буквами, - прописными римскими цифрами, - строчными римскими цифрами, - арабскими цифрами. В списке - определении все записи сдвинуты влево при помощи табуляции. Список - определение определяется следующими командами начала и конца списка: Каждый элемент списка начинается с команды:

13 Создание таблиц Начало и конец вставки таблицы ограничиваются тэгами и. Между этими тэгами по очереди слева направо и сверху вниз указывается содержимое каждой ячейки в следующей последовательности (для простой таблицы): то, что Вы хотите написать в 1-й ячейке 1-го ряда то, что Вы хотите написать во 2-й ячейке 1-го ряда то, что Вы хотите написать в 3-й ячейке 1-го ряда то, что Вы хотите написать в 1-й ячейке 2-го ряда то, что Вы хотите написать во 2-й ячейке 2-го ряда то, что Вы хотите написать в 1-й ячейке 3-го ряда Тэг указывает на переход к новой ячейке, а тэг - на переход к новой строке. Если Вы хотите какую-нибудь ячейку оформить как заглавную (например, для названия столбца), вместо для нее следует использовать.

14 Тэг может содержать (а может и не содержать) следующие параметры: BORDER - прорисовать сетку таблицы. По умолчанию таблица отображается без сетки! CELLPADDING=число - сколько пикселей отступать от границ таблицы до текста. BGCOLOR=код или название цвета - для указания цвета фона ячеек. Этот параметр можно указывать как в тэге (для всех ячеек), так и в тэгах и для одной конкретной ячейки. Это же относится к параметру ALIGN=как_выравнивать_текст, действие которого аналогично рассказанному для форматирования абзацев. В сложных таблицах встречаются объединения ячеек. Например, таблица следующего вида содержит объединение двух ячеек по горизонтали: Этот пример реализуется следующим фрагментом: 1-я ячейка 1-го ряда Объединенные 2-я и 3-я ячейки 1-я ячейка 2-й ряд 2-я ячейка 2-й ряд 3-я ячейка 2-й ряд Здесь мы по-прежнему записывали все ячейки последовательно слева направо до конца ряда. Однако, как только мы дошли до объединенных ячеек, мы указываем в (или в ), сколько ячеек мы собираемся объединить. Для этого мы использовали параметр COLSPAN, значением которого является число объединяемых ячеек (в нашем случае их 2).

15 Другой пример сложной таблицы: Для реализации этого примера служит следующий фрагмент: 1-й ряд 1-й столбец 1-й ряд 2-й столбец 2-й и 3-й ряд 1-й столбец 2-й ряд 2-й столбец 3-й ряд 2-й столбец Как только мы первый раз доходим до ячеек, объединенных в столбец, мы добавляем в соответствующий тэг параметр ROWSPAN, значением которого является число ячеек, объединенных по вертикали. После этого мы записываем содержимое данной большой ячейки, закрываем и продолжаем записывать таблицу. Когда мы в следующий раз (на следующем ряду) доходим до данной ячейки, мы ее пропускаем и пишем сразу следующую ячейку.

16 ВСТАВКА ИЗОБРАЖЕНИЙ То изображение, которое Вы хотите разместить на своей странице, должно существовать в отдельном файле. Например, пусть у Вас есть фотография, которая называется foto1.jpg. Чтобы эту фотографию вставить в текст, служит такая запись:. Если изображение слишком велико (или мало) и Вы хотите изменить его размеры, в тэг следует записать параметры, например:. Здесь параметр height задает высоту изображения (вертикальный размер 300 пикселей), а параметр width – ширину (по горизонтали 400 пикселей).

17 ПАРАМЕТРЫ ДОКУМЕНТА В ЦЕЛОМ. ЦВЕТ ТЕКСТА И ФОНА. ОБОИ Параметры текста, цвет фона и т.п., примененные ко всему документу, задаются как параметры тэга : BGCOLOR=название или код цвета фона. TEXT=название или код цвета текста. LINK=название или код цвета гиперссылок. VLINK=название или код цвета ранее использованных гиперссылок. ALINK=название или код цвета ссылок в момент нажатия на нее правой кнопкой мыши. BACKGROUND= имя графического файла, который Вы хотите использовать как обои. Например, если мы хотим, чтобы в документе текст был написан красными буквами на желтом фоне, в начале документа можно записать следующее: Для использования в качестве фона рисунка figure1.jpg, запишем:

18 ЦВЕТОВОЙ КОД RGB Для указания цвета можно использовать не только английские названия основных цветов (red, green и т.п.), но и цветовой код. Запись кода начинается с символа #, затем идет 16-ичная запись интенсивности красного цвета (1 байт, т.е. два символа), затем следует 16-ичная запись интенсивности зеленого и, наконец, синего цветов. Пример: #34A87F - интенсивность красного цвета 34, зеленого – A8, синего – 7F. 00 – отсутствие данного цвета, FF- его максимальная яркость. Характерные цвета: #FFFFFF – белый#FFFF00 - желтый # – черный#FF00FF - розовый #FF0000 – ярко красный#00FFFF – морской волны # – темно-красный# коричневый #00FF00 – зеленый# фиолетовый #0000FF – синий# серый

19 ГИПЕРССЫЛКИ Гиперссылка – это своего рода форматирование текста. Но изменяется не внешний вид текста (шрифт, цвет и т.п.), а действие с текстом при нажатии «мышью» на текст. Для формаитрования текста как гиперссылки служит тэг Параметр – название файла или интернет-адрес. Ссылка на поисковые сайты может в тексте быть организована так: Для поиска нужной информации воспользуйтесь Яндексом или Гуглом Ссылка на файл primer1.html: открыть файл В качестве форматируемого объекта может выступать изображение. Например, чтобы сайт Яндекса открывался при нажатии на картинку, вставленную из файла foto1.ru, служит следующая запись:

20 ССЫЛКИ НА ДРУГОЙ РАЗДЕЛ В ТОМ ЖЕ ФАЙЛЕ Если у Вас есть потребность из одного места документа создать ссылку на другое место того же самого документа, Вам сначала потребуется пометить то место,куда Вы хотите указать переход. Для этого Вы вставляете туда метку с помощью следующей структуры:. Имя метки (как правило, несколько букв или цифр) на экране при просмотре не отображается, а служит параметром при указании адреса в ссылке. Например, если метка и ссылка на нее находятся в одном и том же файле, то вместо имени файла запишется : текст ссылки Если метка и ссылка на нее находятся в разных файлах, то после имени файла запишется еще и метка: текст ссылки Например, к третьей главе

21 ФРЕЙМЫ Фреймы служат для разбиения экрана на несколько участков (окон, или фреймов), в каждом их которых может быть показан свой файл (или открыт Интернет-ресурс). Пример: Вам требуется разбить по вертикали экран на два окна, левое из которых должно занимать 30% экрана, а правое – остальные 70%. То, что будет отражаться в окнах, должно быть записано в отдельные файлы. Пусть они называются LEFT.html и RIGHT.html, соответственно. Чтобы организовать фреймы, потребуется написать новый (объединительный) файл, в котором следует указать расположение окон на экране и названия открывающихся в них файлов. Стандарт этого файла такой: название... Комментарий к написанному: Здесь вместо тэга с параметрами были вставлены тэги. Параметр COLS указывает, какое количество окон организовывать, а также пропорции создаваемых фреймов. Если бы нам требовалось разбить экран не по вертикали, а по горизонтали, пришлось бы заменить параметр COLS на ROWS, который пишется аналогично.

22 Фреймов может быть не только два, но и больше. Число фреймов задает число чисел в параметре COLS или ROWS. Пропорции между фреймами можно записать не только с использованием процентов: Если после числа знак процента отсутствует, то компьютер воспримет это как реальное указание размера фрейма в пикселях. Если вместо числа стоит знак *, то под это окно будет выделена вся область экрана, оставшаяся от других окон. Например, запись COLS=*,100,200 будет означать, что 2-е окно получит 100 пикселей ширины, 3-е – 200 пикселей, а 1-е – оставшуюся долю. Если Вы хотите разделить экран, скажем, в пропорции 1:2, Вы можете записать COLS= *, 2 *. Запись ROWS=2 *, 20%, 3 * обозначает, что экран по горизонтали будет разделен на три фрейма, причем центральному будет выделено 20%, а размеры остальных двух будут в отношении 2:3. Между тэгами и располагаются тэги, указывающие на то, какой файл открывать в каком окне. Для этого служит параметр SRC, аналогичный использующемуся при вставке рисунков.

23 Вместо тэга может быть записана еще одна структура Тогда в соответствующем окне произойдет дальнейшее деление на окна. Пример. Пусть требуется оформить экран таким образом: Вот каким образом запишется эта структура:

24 Гиперссылки, открывающиеся в другом фрейме Во-первых, тот фрейм, в котором мы хотим открывать гиперссылку, нужно назвать. Для этого добавим в тэг этого фрейма дополнительный параметр NAME, значением которого и будет выбранное нами название. Если ссылки из левого фрейма мы хотим открыть в правом, мы добавляем NAME в правый, а не в левый. Например, мы решили назвать этот фрейм ABCDE. Тэг будет выглядеть примерно так: Теперь нужно отредактировать те гиперссылки, содержимое которых по нашему замыслу должно открываться в окне с названием ABCDE. Для этого в эти ссылки добавим параметр TARGET=ABCDE примерно так : текст ссылки З арезервировано 4 специальных значения параметра TARGET: а) _blank - "браузер" всегда задает это значение для нового, неименованного окна. б) _self - задается по умолчанию для всех кадров, в операторе FRAME которых нет параметра TARGET. в) _parent - вызываемый по гиперссылке файл загружается в кадр или окно, которое является родительским по отношению к вызывающему. Другими словами, вызываемый файл будет расположен в том же окне, что и его "дедушка". г) _top - вызываемый по гиперссылке файл загружается в окно, содержащее ссылку, и перекрывает все кадры данного окна.

25 КАРТА ОБРАЗОВ Карта образов позволяет создать несколько ссылок к различным адресам, используя только одно изображение. Пусть у Вас есть картинка imgmap.gif размером 100 x 100 пикселей. Предположим, что картинка состоит из 4 частей, где изображены Ваши друзья: - В левом верхнем углу - Дима (у него есть домашняя страница dima.html ) - В правом верхнем углу - Алик (Его домашняя страница alik.html ) - В левом нижнем углу - Вова (Его домашняя страница vova.html ) - В правом нижнем углу - Игорь (Его домашняя страница igor.html ) Если Вы хотите, чтобы при нажатии левой кноки мыши на изображение каждого из Ваших друзей Вы попадали на его домашнюю страницу: 1)Где-нибудь в начале документа разметьте картинку, указав название карты (пусть это будет karta1) и соответствие коордитнат областей на картинке файлам, открывающимся при нажатии на них. Примерно так: 2)Вставляя изображение, добавьте параметр usemap с названием карты образов:

26 ФОРМЫ Форма – это участок текста, содержащий объекты для интерактивного опроса, а также любой текст, сформатированный по Вашему усмотрению и использующийся в качестве комментариев к элементам формы (например, это могут быть тексты вопросов анкеты). Пример формы :

27 На одной странице форм может быть несколько, но каждая из них ограничена тэгами и. Тэг имеет два параметра. Обязательный параметр ACTION=адрес_обработчика – указание места (интернет-адреса, электронной почты и т.п.), куда после заполнения формы отправятся результаты. Второй параметр – METHOD - может принимать одно из двух значений: METHOD=POST или METHOD=GET. Он служит для указания метода протокола передачи информации. Этот параметр не обязательный (по умолчанию GET). Кнопка для передачи данных организуется с помощью тэга. Имя формы задает название переменной, которая передается программе-обработчику. Программа-обработчик при нажатии кнопки SUBMIT получает информацию в виде набора пар ИМЯ_ПЕРЕМЕННОЙ=ЕЕ_ЗНАЧЕНИЕ, каждая из которых соответствует выбранному варианту (или заполненному тексту) определенного объекта формы.

28 ОБЪЕКТЫ ДЛЯ ЗАПОЛНЕНИЯ В ФОРМЕ (на примерах): создает строку для ввода текста длиной не более 150 символов. Длина рамки для ввода текста 40 символов, в ней заранее написано «введите текст...» Да, конечно Нет Затрудняюсь ответить Этот набор тэгов создает кнопки для выбора одного из вариантов ответа, предложенных в списке. В данном случае это ответы «Да, конечно», «Нет», «Затрудняюсь ответить». Один из ответов выбран по умолчанию – это ответ «Нет», на что указывает параметр CHECKED. Для обработки пойдет следующее: otvet=no. Математика Информатика Социология Этот набор тэгов создает кнопки для выбора любого числа вариантов ответа из предложенных в списке. В данном случае по умолчанию выбраны ответы «Математика» и «Информатика». На обработку пойдет набор vopr2=matem vopr2=inform. Создает окно для ввода текста. Cols указывает ширину окна (40 символов); rows указывает его высоту (8 строк). первый пункт меню второй пункт меню и т.д. Создает меню для выбора одного из пунктов. Если после слова Select дописать параметр multiple, станет возможным выбрать сразу несколько пунктов меню.

29 Скрытый текст: TYPE=hidden При отображении не виден пользователю. Служит для прямой передачи служебной информации от домашней страницы обработчику формы, прозрачно для пользователя. Здесь приведен пример передачи информации о версии программы. При нажатии на кнопку submit в программу обработки будет введено: Version=2.3 Кнопка отмены: TYPE=reset Кнопка выполняет инициализацию начальными значениями всех полей. Окно для ввода пароля: TYPE=password Аналогичен типу text, но при вводе каждый символ заменяется символом *. Пример. Надо ввести пароль длиной не более 5 символов. Пусть Вы ввели слово Yakov. Тогда при нажатии на кнопку submit в программу обработки будет введено: pass=Yakov

30 КОМАНДЫ МЕТА : Создав домашнюю страницу, Вы, несомненно, захотите чтобы Вас смогли "найти" все пользователи, интересующиеся данным вопросом. Здесь можно идти двумя основными путями: 1. "Отметиться" в поисковых системах. Есть службы, позволяющие зарегистрироваться на нескольких серверах одновременно. 2. Вставить внутри блока... команды META. Основное назначение команд META - инструкции для поисковых машин о тематике Вашей страницы. Для этих целей используются следующие параметры: - description - краткое описание страницы, - keyword - список ключевых слов в странице. Примеры: Хочу обратить внимание на важность точной подборки ключей, чтобы, с одной стороны, Вас нашли все, кому Ваша страница предназначена, с другой стороны - чтобы ее не находили пользователи, попавшие на Вашу страницу случайно. Команды, дающие инструкции "браузеру" о кодировке Вашей страницы. для кодировки в Windows/1251, для кодировки в KOI-8.