Разработка Web-сайтов с использованием языка разметки гипертекста HTML
Web-страницы Создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы – HTML-тэги, которые определяют вид Web-страницы при её просмотре в браузере.
Достоинства Web-страниц малый информационный объём; n возможность просмотра в различных операционных системах (ОС). Для создания Web-страниц используются простейшие текстовые редакторы. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот. n
Web-сайты Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определённой теме или проблеме. Web-сайты состоят из компьютерных Web-страниц. Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Webстраницам.
Структура Web-страницы Тэги одиночные <…> парные (контейнер) <…> </…> Тэги могут записываться как прописными, так и строчными буквами.
<HTML> </HTML> - открывает/закрывает HTML-документ. Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. логические части Web-страницы заголовок содержание
<HEAD></HEAD> - заголовок Web-страницы, содержит название документа и справочную информацию о странице. <TITLE></TITLE> - название страницы, отображается в верхней строке окна браузера. <BODY></BODY> содержание страницы. Заготовка Web-страницы «Компьютер» <HTML> <HEAD> <TITLE>Компьютер</TITLE> </HEAD> <BODY> Компьютер и ПО </BODY> </HTML>
Форматирование текста на Web-странице Заголовок От <H 1></H 1> (самый крупный) до <H 6></H 6> (самый мелкий) Абзац <P></P> - абзац Переход на новую строку <BR> - непарный тэг (для стихов) Шрифт <FONT> </FONT> SIZE=4 – размер шрифта (от 1 до 7) FASE=“ARIAL” – тип шрифта COLOR = “RED” - цвет шрифта
Начертание шрифта <b> жирный текст </b> <i> наклонный текст </i> <u> подчеркнутый текст</u> <tt> текст - имитирующий стиль печатной машинки </tt> A можно и всё сразу: <b><i><u>супервыделенный текст. . . </u></i></b>
Цвета HTML Профессиональные дизайнеры используют шестнадцатеричные коды цветов системы RGB (сокращенно от Red/Green/Blue) - это шестизначное число, определяющее цвет. Первые две цифры задают количество красного цвета, вторые две цифры - зеленого, последние синего. Мы привыкли к десятичной системе счисления: от 0 до 9. Шестнадцатеричная СС - это числа от 0 до буквы f. То есть, самая старшая цифра здесь не 9, a f. Теперь идем далее. Шестнадцатеричный код для черного цвета будет такой: 000000 А для белого: ffffff Желтый цвет будет таким: ffff 00. Можно придумывать разные комбинации цифр таких кодов. Например, код 12 abfe 9 соответствует одному из оттенков зеленого цвета.
Цвета HTML “#ffffff” – белый “#000000” – черный “#ff 00 ff” – пурпурный “#0000 ff” – синий “#ff 0000” – красный “#00 ffff” – голубой “# ffff 00” – желтый “#00 ff 00” – ярко-зеленый “#336699” – темно-голубой Можно придумывать разные комбинации цифр таких кодов. Например, код 12 abfc 9 соответствует одному из оттенков зеленого цвета. Делайте эксперименты. Используется это так: text="#код". Например: text="#12 abf 9" <body bgcolor="#12 abf 9">
Выравнивание ALIGN =“left” (right, center) Горизонтальная линия <HR> Метка может включать атрибуты SIZE (определяет толщину линии в пикселях) и/или WIDTH (определяет размер линии в % от ширины экрана). Например, <HR SIZE=2 WIDTH=100%><BR> <HR SIZE=8 WIDTH=25%><BR>
Картинки < IMG SRC="адрес"> - вставка картинки Замечание. Если ваши картинки находятся в отдельной папке (рекомендую!), например в папке "fotos", то адрес будет таким: <IMG SRC="fotos/имя_файла. jpg"> Дополнительные (необязательные) атрибуты тега <IMG>: 1. ALIGN - позиционирует картинку. Значения: left, right, center. Например, отобразить картинку справа в браузере можно так: <IMG SRC="fotos/имя_фaйлa. jpg" ALIGN="right"> 2. ALT - всплывающая подсказка при наведении мышки на картинку, т. е. ALT="Moe фото". 3. BORDER - ширина рамки вокруг картинки. Значения: от 1 до. . . Пример: BORDER="l".
Гиперссылки <A HREF=“Адрес”>Указатель ссылки</A> <A HREF=“Fale. html”>Указатель ссылки</A>
Созданную Web-страницу необходимо сохранить в виде файла под именем index. htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
Списки на Web-страницах Нумерованные <OL> </OL> <LI>первый элемент <LI>второй элемент <LI>третий элемент </OL> n Маркированные <UL> </UL> n
Скачать презентацию Разработка Web-сайтов с использованием языка разметки гипертекста HTML
5abb04f58ef91b58156e01f0d7132f35.ppt