Приведем описание тегов физического форматирования. Часть из них не рекомендуется к использованию спецификацией HTML 4.0 по приведенным выше причинам. Некоторые теги отменены (deprecate) спецификацией HTML 4.0, однако они продолжают поддерживаться браузерами.
Тег
Тег отображает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо тега использовать тег логического форматирования . Например:
Это полужирный шрифт.
Рис. 1.2. Примеры физического форматирования текста (браузером Netscape)
Тег
Тег отображает текст курсивом. Для большинства случаев вместо этого тега рекомендуется использовать теги , , или , поскольку последние лучше отражают назначение выделяемого текста. Например:
Выделение курсивом
Тег
Тег отображает текст моноширинным шрифтом. Для
большинства случаев вместо этого тега лучше использовать теги ,
или . Пример:
Это моноширинный шрифт.
Тег
Тег отображает текст подчеркнутым. Отмененный тег. Вместо него рекомендуется использовать теги или . Например:
Пример подчеркивания текста.
Теги и
Теги и отображают текст, перечеркнутый
горизонтальной линией. Отмененный тег. Вместо него следует использовать тег
. Например:
Пример зачеркнутого
текста.
В настоящее время тег поддерживается не всеми
браузерами, поэтому пока рекомендуется использовать в сочетании
с тегом . А именно, внутрь тега-контейнера можно вложить
пару тегов
....
Тег
Тег выводит текст шрифтом большего (чем непомеченная
часть текста) размера. Вместо данного элемента лучше использовать
или теги заголовков, например,
Шрифт большего размера.
Тег
Тег выводит текст шрифтом меньшего размера. Поскольку в HTML нет тега, противоположного по действию тегу , то для этих целей можно применять тег . Большинство браузеров поддерживают вложенные теги , однако использовать такой подход не рекомендуется. Например:
Шрифт меньшего размера.
Тег
Тег сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например:
Пример шрифта для нижнего индекса.
Тег
Тег сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например:
Пример шрифта для верхнего индекса.
Тег
Тег
Тег
Тег-контейнер является аналогом тега уровня
блока Браузер Microsoft Internet Explorer дополнительно разрешает
использование следующих параметров тега: DIR, DATAFLD, DATAFORMATAS, DATASRC.
Описание параметров можно найти во второй части книги. Рис. 1.3.
Использование вложенных тегов форматирования
текста
Теги форматирования могут быть вложенными друг в друга.
При этом нужно внимательно следить, чтобы один контейнер находился целиком в
другом контейнере. На рис. 1.3 показан пример использования вложения элемента
курсива в элемент полужирного шрифта. Использован следующий фрагмент HTML-кода: Это полужирный шрифт. Это курсив. А здесь текст полужирный и курсивныйВ> Тег
Тег указывает параметры шрифта. Он относится
к тегам физического форматирования уровня текста. Назначение параметров шрифта непосредственно в тексте документа
нарушает основную идею разделения содержательной части документа и описания
формы представления документа. Поэтому в спецификации HTML 4.0 данный тег, а
также тег Несмотря на эти грозные предупреждения, видимо, для самых
простых документов физическое форматирование можно считать допустимым. Кроме
того, начинать обучение основам форматирования проще всего именно с правил непосредственного
указания форматов элементов. До стилевого оформления начинающий разработчик
должен еще дорасти. Тег относится к последовательным элементам,
поэтому не может включать в себя элементы уровня блока, например, Или Для тега могут задаваться следующие параметры: FACE, SIZE
и COLOR. Заметим, что браузер Netscape допускает также использование двух дополнительных
параметров: POINT-SIZE и WEIGHT, описание которых опускаем. Параметр FACE служит для указания типа шрифта, которым
программа просмотра пользователя будет выводить текст (если такой шрифт
имеется на компьютере). Значением данного параметра служит название шрифта,
которое должно в точности совпадать с названием шрифта, имеющего у пользователя.
Если такого шрифта не будет найдено, то данное указание будет проигнорировано
и будет использован шрифт, установленный по умолчанию. Можно указать как один, так и несколько названий шрифтов,
разделяя их запятыми. Это весьма полезное свойство, так как в разных системах
могут быть почти идентичные шрифты, называющиеся по-разному. Другим важным
качеством является задание предпочтения использования шрифтов. Список шрифтов
просматривается слева направо. Если на компьютере пользователя нет шрифта,
указанного в списке первым, то делается попытка найти следующий шрифт и
т. д. Приведем пример использования параметра FACE: Пример задания названия шрифта. На рис. 1.4 показано отображение примера браузером
Netscape. В примере в качестве предпочитаемого указывается шрифт Verdana,
при его отсутствии будет использован шрифт Arial и т. д. Рис. 1.4.
Отображение примера браузером Netscape
Этот параметр служит для указания размеров шрифта в
условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой
программы просмотра. Принято считать, что размер "нормального"
шрифта соответствует значению 3. Настройки размеров шрифта, используемых по умолчанию, а
также величины абсолютного изменения размеров шрифта, зависят от браузеров.
На рис. 1.5 показано окно настройки браузера Netscape, в котором задаются шрифты,
используемые по умолчанию. Размер шрифта указывается как абсолютной величиной (SIZE=2),
так и относительной (SIZE=+1). Последний способ часто используется в сочетании
с заданием базового размера шрифта с помощью тега Примечание
При указании размеров шрифтов записи типа "2"
и "+2" (в отличие от большинства языков программирования, в которых
унарный знак "+" можно опускать) дают принципиально разный результат.
Приведем пример, в котором использованы различные способы
назначения размеров шрифтов. Отображение примера показано на рис. 1.6. Рис. 1.5.
Окно настройки параметров шрифтов браузера
Netscape
Рис. 1.6.
Назначение размеров шрифтов
Шрифт размера 1 Шрифт размера 2 Шрифт размера 3 Шрифт размера 4 Шрифт размера 5 Шрифт размера 6 Шрифт размера 7 Этот параметр устанавливает цвет шрифта, который может
задаваться с помощью стандартных имен или в формате #RRGGBB. Приведем пример
документа с разноцветным текстом. Текст зеленого цвета Текст красного цвета Тег Тег Примечание
Тег Заметим, что для тега В качестве параметров могут использоваться точно такие
же параметры, что и для тега , а именно:
FACE, SIZE и COLOR. Назначение и правила записи параметров
аналогичны. Примечание
Браузер Netscape не допускает применение параметра
FACE тега Приведем пример использования тега Текст, записанный шрифтом по умолчанию. Шрифт размера 2. Шрифт размера 4. Текст после таблицы В приведенном примере дважды переопределяется размер шрифта,
используемого по умолчанию. Изначально он равен 3 (по умолчанию). Затем устанавливается
равным 2, далее - 4. Обратите внимание на отображение данного примера (рис.
1.7). Видно, что для таблиц назначение тега Рис. 1.7.
Отображение примера с тегом HTML- текст
представлен в спецификации тегами для форматирования и группировки текста. Теги представляют собой контейнеры для текста и не имеют визуального отображения. Теги для форматирования текста несут смысловую нагрузку и обычно задают для текста, заключенного внутрь, стилевое оформление, например, выделяют текст жирным начертанием или отображают его шрифтом другого семейства (свойство font-family). Грамотно отформатированный текст дает понять поисковым системам, какие слова несут важную смысловую нагрузку, по каким из них предпочтительно ранжировать веб-страницу в поисковой выдаче. Вся текстовая информация, отображаемая на сайте, размещается внутри тега Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Теги Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Тег Им обозначаются подзаголовки тега Показывает подзаголовки тега Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em
/ 0.83em
/ 0.67em
, верхний и нижний отступ по умолчанию 1.33em
/ 1.67em
/ 2.33em
соответственно. Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность. Отображает шрифт курсивом, придавая тексту значимость. Отображает шрифт курсивом. Уменьшает размер шрифта на единицу по отношению к обычному тексту. Задаёт полужирное начертание шрифта, относится к тегам логической разметки, указывая браузеру на важность текста. Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер. Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер. Выделяет текст в новой версии документа, подчёркивая его. Перечёркивает текст. Используется для выделения текста, удаленного из документа. Служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом. Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображается моноширинным шрифтом. Применяется для выделения результата, полученного в ходе выполнения программы. Отображается моноширинным шрифтом. Выделяет имена переменных, отображая курсивом. Позволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются. Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title , она появляется при наведении курсора мыши на текст. Используется для замещения текущего направления текста, т.е. текст в теге отображается зеркально. Выделяет цитаты внутри документа, выделяя его отступами и переносами строк. Используется для выделения коротких цитат. Браузерами заключается в кавычки. Применяется для выделения цитат, названий произведений, сносок на другие документы. Позволяет выделить текст как определение. Несмотря на наличие специального тега, рекомендуется выделять текст силами CSS.
Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em , при этом отступы соседних абзацев «схлопываются». Переносит текст на следующую строку, создавая разрыв строки. Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии. Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд». Html-теги для текста – это теги, которые меняют оформление заключенного в них контента. Эта идея пришла из печатных издательств. Редакторы на полях помечали, что является заголовком, как оформить список. Так же и теги. Они указывают, какой стиль должен быть у элемента. Каждый тег имеет вид: <Название тега> Элемент – это совокупность тега и его содержимого. Многие из них требуют закрывающего тега: Название тега> Особенно это касается текстовых тегов. Закрывающий показывает, когда следует прекратить оформление или закончить блок, таблицу, заголовок и т.д. Некоторые элементы не требуют закрытия В таких случаях отсутствует содержимое и браузер просто размещает на экране заданный объект. В первом случае это рисунок, во втором линия. Закрывающий используется, когда в элементе есть содержимое: текст и/или другие теги. Знает, для чего предназначен каждый тег и как поведет себя «обернутое» в элемент содержимое. Первоначально разметка позволяла и оформлять страницы, и указывать логическое назначение блоков. Новая версия HTML 5.0 нацелена на логическую разметку. Таким образом определяются тематические разделы на странице. При этом подходе и поисковым машинам, и людям легче ориентироваться в коде. Все оформление выполняется в стилистических таблицах в виде правил. Назначая каждому элементу класс или идентификатор, верстальщик указывает свойства стиля и устанавливает его значение. Хранение стилей в отдельном файле позволяет выполнить единое оформление для всех страниц сайта. Но самый большой плюс заключается в легкости изменения дизайна всего ресурса. Изменяя одно значение для фона, верстальщик получает новый бэкграунд на всех страницах, где это правило использовалось. При продвижении сайта важную роль играет его валидность: «правильность» кода и соответствие его стандартам. Так как в настоящее время распространены два стандарта HTML – 4 и 5, то используются различные виды объявления типа документа: Каждый документ должен ссылаться на правила и соблюдать их. Используются только те элементы, которые разрешены стандартом. В связи с этим в новом стандарте указываются теги, которые считаются устаревшими. Их использование не рекомендуется. К ним относится большая часть тегов, предназначенных исключительно для форматирования контента. Проверить валидность сайта можно на официальном сайте W3C – организации, где создаются стандарты. Их можно разделить на оформительские и логические. Последние меняют стиль, но при этом показывают и назначение блока контента. Например, цитаты или машинный код. Рассмотрим все элементы, которые позволяют оформить текстовую часть сайта. Абзац. Контент, помеченный этим тегом начинается с новой строки. Между ними ставится отступ. Не требует закрывающего тега, новый абзац начинается при появлении любого блочного элемента. Помимо текста и медиа-контента, на страницу можно выводить небольшие изображения. Они выглядят как иконки, но вставляются в текст не картинками, а спецсимволами. Некоторые примеры приведены в таблице. Также в HTML 5 появились деньги, карточные масти и знаки гороскопа. Используйте в разметке Html текстовые теги, которые подчеркивают логическое значения текста. Не стоит оформлять каждый фрагмент контента отдельно. Это допустимо только в случае, если вы точно знаете, что такое форматирование больше нигде не повторяется. Для одинаковых стилей используйте классы CSS. В дальнейшем такой подход поможет сэкономить время на изменении дизайна, а также повысить шансы на попадание в ТОП поисковых систем. <Р> - початок нового абзаца; його прийнято записувати в кінці попереднього. Наступне речення починатиметься з нового, вирівняного до лівого краю абзаца без відступу у першому рядку. <В> текст В> - товстий
шрифт тексту, що є між тегами. | <І> текст !> - шрифт-курсив.
текст - підкреслений
шрифт. текст - нижній індекс, наприклад у Н 2 О. текст - верхній індекс, наприклад, 1° вулиця, а 2 . текст - великий шрифт. текст - малий шрифт. <ЕМ> текст ЕМ> - виокремлений курсивом текст (тег І). <В> <І> текст !>В> - товстий курсив. Цей приклад демонструє застосування принципу вкладення тегів. Окремим типом абзаца є заголовок. Є шість видів заголовків, які відрізняються розмірами символів: Теги
Результат на екрані
Заголовок 1. Заголовок 2. Заголовок 3. Заголовок 4. Заголовок 5. Заголовок 6. Заголовок за замовчуванням вирівнюється до лівого краю вікна. Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання: Інформацію можна подати у вигляді таблиці без рамок за допомогою парного тега "5. Тег задання параметрів шрифта FONT. Щоб задати назву конкретного шрифта, його розмір і колір використовують парний тег FONT з параметрами FACE, SIZE та COLOR, наприклад, текст Якщо на комп"ютері клієнта встановлено шрифт Decor, то він буде застосований до даного тексту, інакше броузер застосує шрифт Arbat чи Kudriashov, інакше - деякий свій стандартний шрифт, наприклад, Times New Roman. Розміри символів шрифта можуть бути від 1 до 7. Розмір 3 вважається стандартним, він орієнтовно відповідає 10 пікселям. Розмір 7 є найбільшим. Число 2 як значення параметра SIZE означає другий розмір шрифта, число +2 означає, що розмір шрифта має бути на дві одиниці більший, ніж стандартний, тобто п"ятий, число -2 означатиме перший розмір шрифта - на дві одиниці менший, ніж стандартний. Колір тексту буде червоний. Основні кольори мають такі назви: navy - темносиній teal - бірюзовий silver - сірий lime - яскраво-зелений blue - синій aqua - блакитний maroon - малиновий olive - темно-зелений purple- бузковий gray - темно-сірий red - червоний yellow - жовтий fushsia - рожевий white - білий Завдання 1. Створіть свою особисту Web-сторінку. Викличіть Notepad чи деякий Web-редактор. Введіть текст про себе за наведеним нижче зразком і збережіть його у файлі filel.htm: Я вчуся на першому курсі на факультеті прикладної математики Державного yHiBepcHTeTy"JIbBiBCbKa політехніка " !>. Мені 17 років. Мої улюблені предмети: інформатика, математика, англійська мова, історія. Я люблю слухати хорошу музику, читати пригодницькі романи, подорожувати влітку, кататися на гірських лижах взимку, ходити на дискотеку в любу пору року, інколи читати конспекти. Збережіть файл на диску і перегляньте його за допомогою броузера, клацнувши на його піктограмі. Поекспериментуйте з, тегами форматування тексту і розмірами вікна, в якому демонструється документ. Переконайтеся, що броузер автоматично міняє розташування тексту, щоб його можна було переглядати без горизонтальної смуги прокручування (текстові редактори такого ефекту не дають). 6. Створення списків. Є три типи списків: ненумерований, нумерований, означення. Список може мати заголовок, який охоплюють тегами Ненумерований список утворюють за допомогою парного тега " ... і одинарних тегів інформатика Математика Англійська мова історія Нумерований список створюють за допомогою парного тега з необов"язковим параметром TYPE і одинарних тегів <ІЛ>Інформатика <ІЛ>Англійська мова <ІЛ>Історія На екрані отримаємо: Мої улюблені предмети: 1. Інформатика 2. Англійська мова 3. Історія Значення "і" чи "І" параметра TYPE задає нумерацію римськими малими (і, іі, ііі, iv,...) чи великими (І, II, III, IV, ...) цифрами, а значення "а" чи "А" - латинськими малими (a, b, c, d, ...) чи великими (А, В, С,...) буквами. 7. Вставляння графічних і відео-файлів. Графічні зображення (фотографії, картинки, піктограми тощо) зберігаються на серверах в окремих файлах з розширеннями bmp, jpg, gif та іншими і подаються на екран клієнта за допомогою команди, що задається одинарним тегом з параметрами: Обов"язковим є лише перший параметр SRC. Альтернативний текст - це текст, який виводитиметься замість картинки, якщо броузер не може прийняти графічний файл, або якщо режим відображення графіки вимкнено. Параметр ALIGN задає місце розташування картинки на екрані, а параметри WIDTH і HEIGHT її розміри по ширині і висоті в пікселях або відсотках, наприклад, задає ширину картинки 300 пікселів; задає ширину картинки півсторінки у горизонтальному напрямку. Для проведення ліній різної довжини і товщини застосовують параметри WIDTH і SIZE, наприклад, тег пікселів. Справа і зліва від картинки, яку обгортає текст, можна зробити вільний простір: HSPACE = "кількість пікселів". Можна створити вільний простір також над і під рисунком: VSPACE = "кількість пікселів". За допомогою тега IMG можна вставити також відеофільм, який запускатиметься в момент відкриття Web-сторінки: 8. Адреси файлів. Для виклику віддалених файлів, тобто файлів, які є на серверах в мережі Internet, адресу записують з зазначеням назви протоколу доступу http і URL-адреси файлу, наприклад, "http://www.polynet.lviv.ua/ourpage.htm". Для доступу до файлів на локальному диску використовують протокол доступу file: "filе:///диск:/ шлях до файлу". Наприклад, "file:///d:/mycatalog/mypage.htm". Назву протоколу можна інколи не писати, наприклад, SRC="c:/windows98/ Якщо графічні чи інші файли є в тому ж каталозі, що основний html-файл, то достатньо зазначити лише назву файлу, наприклад, SRC="myfoto.gif". Якщо файл є в деякому сусідньому каталозі images, то шлях до нього можна подати так: "../images/myfoto. gif". Отже, тег IMG може мати такий конкретний вигляд: . Завдання 2.
Переробіть файл filel.htm, щоб створити списки двох видів і вставити свою фотографію або деяку картинку з Clip Art, наприклад cat.bmp, rabbit.bmp чи іншу. Новий файл назвіть file2.htm. Перегляньте його у броузері. 9. Вставляння гіперпосилань.
Є два види гіперпосилань: 1) на файл; 2) на деяке місце на даній сторінці, а саме: на початок сторінки - top, кінець сторінки - bottom, на деякий позначений текст. Гіперпосилання вставляють за допомогою парного тега <А>...А> з
параметром HREF = "адреса файлу (або слова top чи bottom чи позначений текст)". Гіперпосиланням може бути текст або деяке графічне зображення. Розглянемо на прикладі випадок, коли гіперпосиланням є текст. Нехай у реченні "Мене звати Світлана" слово "Світлана" потрібно зробити гіперпосиланням на файл "newinf.htm", що містить додаткові відомості про Світлану (цей файл ще треба створити). Це роблять так: Мене звати <А HREF = "newinf.htm"> СвітланаА>. На екрані слово Світлана буде підкреслене і зображене іншим кольором. Колір гіперпосилання визначається у тезі BODY параметром LINK = "колір". Крім цього корисними є ще два параметри: VLINK= "інший колір" - змінює колір гіперпосилання на інший після першого використання; ALINK = "ще інший колір" - змінює колір активізованого користувачем гіперпосилання на ще інший. Тепер розглянемо, як деяке графічне зображення зробити гіперпосиланням. Для цього в середині тега <А>...А> потрібно використати тег IMG. Наприклад, фотографію Світлани, що є у файлі "svitlana.gif", візьмемо в рамку і зробимо з неї гіперпосилання на файл newinf.htm: <А HREF = "newinf.htm"> Клацнувши у Web-сторінці на фотографії Світлани, отримаємо на екрані файл з додатковою інформацією про неї. Розглянемо другий тип гіперпосилань - посилання в межах сторінки. Спочатку потрібно позначити місце на сторінці, куди здійснюватиметься перехід. Якщо з деякого місця перехід мїіє виконуватися на початок сторінки, то в місце html-файлу, що відповідає початку сторінки, вводять тег, який називається якорем: <А МАМЕ="#початок"х/А>. Аналогічно позначають (кидають якір у) деяке місце в кінці файлу: <А КАМЕ="#кінець"х/А>. Будь-яке місце в тексті можна позначити за допомогою тега: <А КАМЕ="#мояпозначка"х/А>. Тепер на сторінці розставляють гіперпосилання на створені позначки: <А HREF="#no4aTOK (#кінець або #мояпозначка)"> текст гіперпосилання А>. Якщо одна сторінка займає декілька екранів, то в кінці сторінки вартує вставити гіперпосилання для переходу на її початок, наприклад, Тепер можна перейти <А HREF="#no4aTOK""> на початокА> сторінки. Завдання 3.
Вставте в документ гіперпосилання на інший html-файл (наприклад, filel.htm тощо), а також посилання на початок і кінець документа. Збережіть файл під назвою file3.htm. Перегляньте його броузером. 10. Вставляння звуку і відеозображення.
Важливо пам"ятати, Тепер <А HREF="mysound.wav"> послухайте мене (150К) А>. Текст послухайте мене (150К)
стане гіперпосиланням, клацнувши на якому можна почути привітання, застереження, деяку інформацію, яка була заздалегідь записана, наприклад, за допомогою програми Фонограф у файл "mysound.wav" обсягом 150 Кбайт. Оскільки звукові та відеофайли завантажуються довго, рекомендують зазначати у гіперпосиланнях їхні обсяги в кілобайтах. Щоб звуковий чи відеоефект повторювався декілька разів, наприклад 2 рази, у тезі <А> використовують параметр LOOP=2. Щоб звук з деякого файлу пролунав у момент запуску сторінки, потрібно використати тег 11. Поняття про динамічні ефекти.
Динамічними назива Практикум
Розглянемо ефект біжучого тексту у полосі, що має висоту HEIGHT ="висота в пікселях" і фон BGCOLOR ="колір фону". Ефект створюється за допомогою парного тега Слова "Вас вітає, фірма Деол" будуть пробігати в полосі справа наліво, заходитимуть за край екрану і з"являтимуться знову справа. Такий ефект рекомендують застосовувати до заголовків сторінки. Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR = "alternate", а зупинити рядок біля лівого краю екрана може значення цього параметра "slide". Значення "right" параметра DIRECTION забезпечить ефект руху у протилежну сторону. Обмеження кількості проходів, наприклад числом 5, задається параметром LOOP="5". Полосу можна відцентрувати за допомогою параметрів HSPASE і VSPACE. Швидкість руху задає параметр SCROLLAMOUNT="3", де значення вибирають з діапазону від 1 (повільно) до 10 (швидко). Інші динамічні ефекти створюють за допомогою процедур з використанням мов програмування Visual Basic Script або JavaScript. Зауваження.
Немає єдиного стандарту мови HTML. Деякі теги чи їхні параметри не діють у всіх броузерах. Деякі теги і параметри для різних броузерів називаються по-різному. Якщо в написанні тега, назви параметра чи в його значенні допущено синтаксичну помилку, то тег чи параметр не діятимуть. 12. Web-комповзери.
Загальна назва програм призначених для автоматизованого створення Web-сторінок без явного застосування користувачем мови HTML - Web-комповзери. Розглянемо можливості комповзера, які має програма MS Word. Щоб створити Web-сторінку чи цілий Web-сайт, потрібно під час створення нового документа перейти на закладку Web-сторінки і скористатися майстром чи створити нову сторінку. У другому випадку алгоритм дій дизайнерів такий: 4 командою Формат <=> Фон задають колір фону чи спосіб замальовування (заливки) екрана деякою текстурою з меню; 4 вводять текст, вибираючи шрифт, його розмір, колір, вирівнювання тощо; Ф створюють списки як у звичайному текстовому редакторі; ф вставляють лінії командою Вставити <=> Горизонтальна ЛІНІЯ <=> Вибирають вигляд лінії з меню; За допомогою команди Таблиця створюють і форматують таблиці; 4 використовують команду Вставити для вставляння картинок, фотографій, відеофайлів, звуку, гіперпосилань, біжучих рядків тощо; Ф записують створений файл на диск і переглядають його броузером. Завдання 5.
Створити Web-сторінку про себе або про діяльність деякої фірми за допомогою програми MS Frontpage або Web-комповзера програми MS Word. Сторінка має містити фон, лінії, список, таблицю, картинки, гіперпосилання на інші сторінки. Хід роботи
Практична робота полягає у виконанні п"яти завдань, описаних в теоретичних відомостях. Контрольні запитання
1. Що таке гіперпосилання? 2. Що таке гіпертекст? 3. Що таке Web-документ? 4. Для чого призначена програма-броузер? 5. Що таке Web-вузол (Web-сайт)? 6. Описати структуру простого Web-документа. 7. Для чого призначена мова HTML? 8. Що таке тег і які є теги? 9. Які параметри може мати тег BODY? 10. Який тег позначає початок нового абзаца? 11. Які теги позначають товстий, курсивний і підкреслений шрифти? 12. Які теги призначені для вирівнювання елементів на Web-сторінці? 13. Яке призначення тега FONT? 14. Які значення можуть приймати параметри тега FONT? 15. Які є типи списків? 16. Як створити ненумерований (маркований) список? 17. Як створити нумерований список? 18. Які параметри може мати тег IMG? 19. Який параметр використовують у тегах для вирівнювання 20. Яка особливість пари тегів 21. Як вставити графічне зображення у Web-сторінку? 22. Як вставити відеофільм у Web-сторінку? 23. Які параметри може мати тег IMG? 24. За допомогою якого тега вставляють гіперпосилання? 25. Яке призначення параметрів LINK, VLINK, ALINK? 26. Як деяке графічне зображення зробити гіперпосиланням? 27. Які є види посилань в межах одної Web-сторінки? 28. Як вставити у Web-документ звук чи відеозображення? 29. Як запустити звук одночасно з відкриванням сторінки? 31. Як створити динамічний ефект біжучого тексту? 32. Які ви знаєте гіпертекстові редактори? 33. Що таке Web-комповзер? 34. Як створити рамку навколо картинки? 35. Які параметри може мати тег Практичні роботи № 32-33 Тема
Derive. Автоматизація математичних обчислень. Дослідження функцій. Дії з матрицями. Мета
Уміти розв"язувати найпростіші задачі аналізу: визначати похідні, інтеграли, границі, добутки, суми значень заданої функції; виконувати дії над векторами і матрицями, розв"язувати системи лінійних алгебраїчних рівнянь, визначати власні числа і вектори матриці. Теоретичні відомості
Програми для автоматизації математичних обчислень (Derive, MathCad, MatLab, Maple, Mathematica) дають змогу досліджувати функції: визначати похідні різних порядків, означені та неозначені інтеграли, границі, розклад функції у ряд Тейлора; перетворювати вирази: розкладати на множники многочлени, перемножати і спрощувати вирази; будувати графіки функцій; розв"язувати типові задачі лінійної алгебри: виконувати дії над матрицями, визначати власні числа і власні вектори матриці, розв"язувати системи лінійних алгебраїчних рівнянь; визначати аналітичні і наближені розв"язки всіх відомих типів диференціальних рівнянь; розв"язувати задачі теорії ймовірності і математичної статистики та багато іншого. Розгляньте екран програми Derive (рис. 61). Внизу екрана є меню, яке визначає можливості програми. Ось переклад основних команд меню, які будемо використовувати: Рис.бі. Вікно програми Derive для MS-DOS.
Ввести вираз; Обчислити (група команд): Диференціювати; - інтегрувати; Границя; Обчислити добуток; Обчислити суму; Перемножити; Розкласти на множники; Надати допомогу; Перейти до потрібного виразу; Прирівняти до нуля і знайти корені; Будувати графік; Вийти з програми; Обчислити,спростити; Робота з вікнами; Наближено обчислити. Вибір команд (рух курсора вздовж меню) забезпечує клавіша Tab.
Для виконання команд достатньо натискати на велику букву, яка є у назві команди. Вихід з
команди забезпечує клавіша Esc. Принцип розв"язування задач на дослідження функції такий: спочатку вводять команду Author і вираз для функції, а пізніше виконують над ним потрібні команди з меню Calculas тощо. Введені та перетворені вирази і результати з"являтимуться в основному вікні під порядковими номерами. Програма має зручну help-допомогу, яку викликають, як завжди, командою Help. З допомоги можна дізнатися, що Derive має багато стандартних математичних функцій: sin, cos, tan, log, abs, sec та інші, зокрема, обернені тригонометричні та гіперболічні (аргументи функцій беруть у круглі дужки); традиційні константи: рі, #е, #і (уявна одиниця), inf (нескінченність); математичні операції: +, -, * (множення, яке можна не писати у виразах), " -
піднесення до степеня, ! - факторіал; бібліотеки (часто їх нема в мінімальних конфігураціях) для розв"язування різноманітних задач з курсів диференціальних рівнянь, теорії ймовірності тощо. У командах можна задавати конкретний вираз або його номер (наприклад, #5), якщо вираз вводили раніше. Вийти з програми можна за допомогою команди Quit з підтвердженням (потрібно ввести Y і натиснути клавішу Enter). Хід роботи № 32
Якщо під час виконання роботи виникатимуть труднощі, звертайтеся до допомоги (Help). 1. Уведіть вираз е^созпх, де п -
номер варіанта, і розглядайте Застосуйте команду Author і введіть вираз. Всі вирази програма нумерує. Нехай введений вираз має номер 1. Він може мати, наприклад, такий вигляд: exp(5x)cos(5x). Надалі замість виразу можна писати його номер #1. Результати виконання усіх пунктів занотовуйте у звіт.
2. Обчисліть похідну першого порядку.
Вибір команди з меню здійснюється за допомогою клавіші Tab. Застосуйте команду Differentiate до виразу #1 і виконайте її вказівки. Натискайте клавішу Tab для переведення курсора в наступне поле команди. Для отримання кінцевого результату не забувайте виконувати команду Simplify над останнім виразом. 3. Обчисліть похідну другого порядку.
Застосуйте команду Differentiate до виразу #1 і зазначте, що порядок похідної другий. Виконайте команду Simplify. 4. Визначте неозначений інтеграл від заданої функції.
Застосуйте команду Integrate до виразу #1. Межі інтегрування не зазначайте. Виконайте команду Simplify. 5. Обчисліть означений інтеграл на деякому проміжку. 6. Обчисліть границю функції у деякій точці. 7. Розкладіть функцію у ряд Тейлора в околі нуля. 8. Обчисліть скінченну суму значень функції, якщо аргумент Застосуйте команду Sum до виразу #1. 9. Обчисліть аналогічний скінченний добуток значень функції.
10. Протабулюйте функцію у десятьох точках на [а;Ь] з кроком п. 11. Побудуйте графік функції. Підпишіть осі і поексперимен- Спочатку виконайте налаштовування дисплея командою Display з Options. Натискайте на клавшу Tab для переходу між параметрами і на клавішу пропуск,
щоб поміняти значення параметрів, вибравши Graphics, High, VGA відповідно. Утворіть два вікна командами Window <=> Split О Vertically &
40. Перейти з одного вікна в інше можна за допомогою клавіші F1. Введіть спочатку вираз х~2, двічі застосуйте команду Plot і переконайтеся, чи отримаєте параболу. Тепер побудуйте графік заданої функції #1. 12. Розв"яжіть нелінійне рівняння вигляду Цх)-Л
(на [а;Ь]). 13. Введіть новий вираз - будь-який квадратний тричлен - і 14. Перемножте три двочлени вигляду (x+a)(x+b)(x+c),
де Введіть вираз і застосуйте команду Expand. 15. Уведіть будь-яку функцію двох змінних від х
та у,
наприклад 16. Обчисліть інтеграл від функції за одною із змінних.
17. Визначте градієнт функції двох змінних у заданій точці.
Введіть вираз СКАВ(<вираз функції або її номер>) і виконайте Simplify. 18. Побудуйте графік функції двох змінних.
Спочатку введіть вираз х~2-у~2, двічі застосуйте команду Plot і переконайтеся, що ви отримали графік-сідло. Тепер побудуйте графік своєї функції. 19. Закінчіть роботу. Здайте звіти.
Хід роботи № 33
1. Уведіть вектор А з п"ятьма цілочисловими елементами.
Елементи вектора вводять через кому у квадратних дужках командою меню Author (тобто як вираз #1). 2. Уведіть вектор В з п"ятьма цілочисловими елементами як 3. Обчисліть суму векторів як вираз #1+#2.
Тут і надалі для отримання кінцевого результату не забувайте виконувати команду Simplify над виразом. 4. Обчисліть різницю векторів.
5. Обчисліть скалярний добуток векторів #1.#2. 6. Уведіть матрицю С розміру 3x3. 7. Уведіть матрицю D розміру 3x3.
8. Обчисліть суму матриць С і D.
9. Обчисліть різницю матриць.
10. Обчисліть добуток матриць. 11. Визначте слід матриці С. Похожая информация. Основным средством передачи информации в интернете является безусловно текст. В предыдущих статьях я про атрибуты тега BODY, а также показал как на практике изменять цвета фона, текста, ссылок и т.п., соответственно ты уже умеешь вставить текст на html-страницу (если забыл, то он вставляется между тегами Однако, просто вставить текст на страницу бывает мало, надо его правильно разместить согласно цветовой схеме сайта и смысловой нагрузке (абзацы, отступы и т.д.). Но тут главное не переборщить, делать все правильно и в меру, чтобы наши будущие посетители чувствовали себя комфортно. Я постараюсь написать самое главное, покажу какие теги используются для форматирования текста и их атрибуты
, чтобы достигнуть максимального результата. Для начала, я хотел бы вам рассказать о том, что такое вообще текст и как представляется. Я не буду вам рассказывать много непонятных терминов и понятий. Скажу, как взаимосвязаны форматирование текста в html
и его редактирование в текстовых редакторах. И так, представим ты открыл текстовый редактор и набераешь в нем свой текст, сделал все необходимые форматирования (выделил что-то жирным или курсивом), или что-то другое, потом берешь и копируешь полученный результат в код html. После, ты открываешь html-документ в браузере, но не видишь всего того форматирования, что делал до копирования и сохранения. Куда же оно все исчезло? Ответ простой: текстовый редактор для форматирования текста использует собственные спецсимволы-теги, которые попросту скрыты от глаз. Однако не пугайся, перенести твой красиво оформленный текст из текстового редактора в html можно. В общем, дальше я постараюсь подробно расписать, как это сделать. Если отформатировал текст, то его можно быстро вставить в html-страницу при помощи тегов Теги можно использовать не только один, а сколько угодно, где-то даже дополняя друг друга. Можно просто вкладывать один тег в другой. Приведу пример: 10 м2 — это площадь мой комнаты.
результат будет выглядеть следующим образом: 10 м 2 — это площадь
мой комнаты.
Для выделения обзаца, или располодить текст блоком, используют тег Данный тег отделяет обзац небольшим отступом снизу от другого обзаца или объекта. На примере это будет выглядеть так:
Создаем свой абзац. Создаем второй абзац. Данный код на html-странице будет выглядеть следующим образом: Создаем свой абзац. Создаем второй абзац. Кстати, закрывать абзац тегом В данном теге есть важный атрибут align, у которого можно выставлять следующие значения: center, left, right и justify. Атрибут помогает выровнить наш текст в теге Из названий атрибутов, тебе уже наверное понятно, что выравнивание будет по центру, по левому краю, по правому и по всей ширине соответственно. Дальше я приведу простой пример:
Текст по центру расположит наш текст по центру, на выходе получится следующее: Текст по центру Кстате, по умолчанию, текст расположен по левому краю, поэтому атрибут left можно не использовать для этих целей: на html-странице это будет выглядеть вот так:выровнит текст по левому краю Выравнивание текста по левому краю (по умолчанию) Парой встает возможно без отступа абзаца сделать простой переход на новую строку, и можно это сделать тегом Наша первая строка. на странице будет следующий вид: Наша первая строка. У Существует еще тег html-код на примере будет следующим (попробуй сами на примере узнать что получится):
Ширина и толщина задается как в пикселях, так и в процентах, кому как удобнее и для какой цели нужно.
Заголовки выделяются жирным шрифтом, а также отступом снизу. Самый большой и главный заголовок на странице это Приведу просто пример HTML-кода заголовков:
на странице мы увидем следующее: Если вы хотите изменять шрифт текста и его размер, в HTML-коде применяется тег . У данного тега имеются следующие атрибуты: Создать список в HTML можно используя теги (список с нумерацией) и (список с маркировкой). Элементы в списке должны выделяться . Как элемент списка начинается с новой строки. В тегах списках есть свой атрибут type. Для начала разберем значения этого атрибта в теге : Приведу HTML-код для примера: на странице будет вот так: Тег HTML-код тега На странице мы увидим следующие: Показав основные теги для форматирования текста на html-странице нельзя забыть и о спецсимволах. Спецсимволы — это символы, которых, как показывает практика, нет на клавиатуре, но которые браузер преобразует в код, принимая за управляющий. Полный список я привел на отдельной странице Спецсимволы HTML. Кстате, для форматирования текста очень важно знать правила грамматики русского языка, ведь грамотно написанный текст уже наполовину отформатирован. Давай, для закрепления данного материала я приведу тебе пример html-кода, и ты сам разберись, что он означает:
B
Пожалуй, я закончил данный материал о HTML тегах для форматирования текста. Я постарался упомянуть самое основное что тебе следует знать. Постарайся запомнить данные уроки, они тебе еще не раз пригодятся. Далее я расскажу тебе, как вставить картинку в html-страницу и какие атрибуты можно при этом использовать..
Текст внутри ячейки
таблицы
Теги для HTML текста
1. Теги заголовков
...
должны использоваться только для выделения заголовков нового раздела или подраздела. При использовании заголовков необходимо учитывать их иерархию, т.е. за
должен следовать
и т.д. Также не допускается вложение других тегов в теги
...
.
1.1. Тег
должен быть уникальным для каждой страницы сайта. Рекомендуется прописывать тег в начале статьи, используя ключевое слово в тексте заголовка 2em
0.67em
.
1.2. Тег
. Размер шрифта в браузере равен 1.5em
, верхний и нижний отступ по умолчанию 0.83em
.
1.3. Тег
. Размер шрифта в браузере равен 1.17em
, верхний и нижний отступ по умолчанию 1em
.
1.4. Теги
,
,
Для всех тегов доступны .2. Теги для форматирования текста
2.1. Тег
Для тега доступны .2.2. Тег
Для тега доступны .2.3. Тег
Для тега доступны .2.4. Тег
Для тега доступны .2.5. Тег
Для тега доступны .2.6. Тег
Для тега доступны .2.7. Тег
Для тега доступны .2.8. Тег
2.9. Тег
Для тега доступны следующие атрибуты: cite , datetime .3. Теги для ввода «компьютерного» текста
3.1. Тег
Для тега доступны .3.2. Тег
Для тега доступны .3.3. Тег
Для тега доступны .3.4. Тег
Для тега доступны .3.5. Тег
Для тега доступны .4. Теги для оформления цитат и определений
4.1. Тег
Для тега доступны .4.2. Тег
Для тега доступен атрибут dir .4.3. Тег
4.4. Тег
Для тега доступен атрибут cite .4.5. Тег
Для тега доступны .4.6. Тег
Для тега доступен атрибут title .5. Абзацы, средства переноса текста
5.1. Тег
Для тега доступны .5.2. Тег
Для тега доступны .5.3. Тег
Для тега доступны .Теги и элементы
Примеры элементов:Header
Парадигма оформления современных сайтов
Валидация страницы
Теги форматирования текста html
- Вывод символов, которые помечаются как программный код. Оформляется моноширинным текстом уменьшенного размера (все символы имеют одинаковую ширину).
-
- Логическое выделение структуры заголовков контента. Текст между открывающим и закрывающим тегами помечается жирным и имеет нестандартный размер. Главный заголовок H1 имеет самый большой шрифт, h6 - самый маленький.
Используется для оформления текста так, как он был указан при верстке. По умолчанию в HTML любое количество подряд идущих пробелов трансформируются в один, а обычные переносы не учитываются. Элемент pre учитывает положение символов.>
- Выделение цитат, текст отображается в кавычках.
- Зачеркивает текст. Аналог сокращенного элемента. Не рекомендуется использовать. Аналог CSS text-decoration со значением line-through.Специальные символы
- наступний за цим тегом текст буде наведено у новому рядку без пропуску порожнього рядка.
- буде проведена горизонтальна лінія.
...
. Текст в середині цього тега оформляють засобами табуляції. Броузер такий текст пере-форматовувати не буде. Теги для створення таблиць з рамками тут не розглядатимемо.
black - чорний green - зелений Це Web-сторінка Світлани МарущакН2>
замість звичайної лінії дає червону полосу товщиною ЗО
що назви звукових файлів мають розширення au, wav, mid, midi, ra,
а відеофайлів - avi, vivo, mpeg тощо. Щоб вставити звук чи відео,
достатньо як значення параметра HREF у тезі гіперпосилання
задати шлях до відповідного звукового чи відеофайлу, який вже є
на диску, наприклад,
ються ефекти, коли графічні зображення на Web-сторінці зміню
ються з часом, елементи сторінки змінюють розміри або навіть
свій зміст після клацання над ними мишею, текст "біжить" вздовж
екрана тощо.
елементів сторінки?...
і як її можна
використати?
Author Calculus
Differentiate
Integrate
Limit
Product
Sum
Taylor Declare Expand Factor Help Jump soLve Plot Quit
Simplify Window approX
його як деяку функцію f(x).
Застосуйте команду Integrate до виразу #1, зазначте межі інтегрування
за допомогою клавіші Tab. Виконайте команду Simplify.
Застосуйте команду Limit до виразу #1. Simplify.
Застосуйте команду Taylor до #1. Simplify. Для отримання десят
кового числового результату не забувайте виконувати команду
арргоХ.
змінюється від 1 до 10 з кроком 1.
Це завдання розв"язується методом побудови вектора зі значень
функції. Для цього командою Author введіть вираз VECTOR
(<вираз або його номер>, х, a, b, h), в якому задайте довільні
значення для a, b, h => Simplify. Результат отримаєте в квадратних
дужках.
туйте з масштабом.
Введіть командою Author вираз SOLVE (-«конкретний вираз або
його номер> = 1,х) або SOLVE(
приклад SOLVE(#l,x), і спростіть його Simplify ^ арргоХ.
факторизуйте його (розкладіть на множники командою Factor).
а,Ь,с - деякі числа.
x 2 s\n(ny),
і визначте її частинні похідні першого та другого
порядків (л - номер варіанта).
вираз #2.
Скалярний добуток позначається крапкою.
Наприклад, так: [,,]
Добуток матриць позначається крапкою.
Введіть і спростіть вираз TRACE(C).
С чего начинать форматирование в HTML
Теги форматирования в HTML
и
. Твой браузер выведит на страницу текст в том виде, в каком он был в текстовом редакторе, если ты его поместишь в эти теги. Но данный тэг ялвяется малоиспользуемым, так как у него мало возможностей. Например, я, его не разу не использовал, но рассказать о нем я бы не посмел:)
— тег, для зачеркивания текста
. html-код в данном случае будет следующим:
Наша вторая строка.
Наша вторая строка.
отсутствует закрывающийся тег. Кстати, если ты хочешь больше одного отступа, можно написать
подряд.
, благодаря которому тоже можно разделить текст. При помощи него создается полоса, и в котором тоже есть свои атрибуты:
Заголовок 4 размера
Заголовок 4 размера
имеет атрибут type вот с такими значениями:
на примере:
Лучшие статьи по теме