Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Теги для форматування тексту

Мова HTML.

Для створення Web-сторінок Web-дизайнери використовують гіпертекстові Web-редактори, наприклад, HotMetal PRO, Hot Dog Professional, Netscape Editor тощо, де використовується мова HTML — Hyper Text Markup Language (мова для розмічування гіпертекстових документів). Сучасні редактори
FrontPage і MS Word дають змогу створювати Web-сторінки методом конструювання без застосування кодів мови HTML, оскільки
коди вони генерують автоматично.

Для підготовки html-файлу можна використати текстовий редактор NotePad. Після написання програми файл потрібно зберегти на диску з деякою назвою з розширенням htm чи html. Програма мовою HTML (html-файл) має таку загальну структуру:

<HTML>

<HEAD>

<TITLE> Назва вікна Web-сторінки </TITLE>

</HEAD>

<BODY параметри>

Мене звати Світлана. Мені 17 років.

Я хочу стати Web-дизайнером.

Це моя перша Web-сторінка. Тут я можу писати будь-який текст, наприклад, про себе і мої інтереси. Пізніше я навчуся вставляти фотографії, картинки, звук, відеозображення шляхом посилання на відповідні графічні, звукові чи відеофайли. Я збережу цей файл на диску і відкрию його у броузері. Моя сторінка ще не красива і не цікава. Але скоро я навчуся робити прикольні Web-сторінки.

Я розташую файл на сервері і мою сторінку зможуть побачити в різних кінцях світу.

</BODY>

</HTML>

Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Більшість тегів є парними, як наприклад, тег означення HTML-файлу: <HTML>... </HTML>. Парні теги позначають початок і кінець області дії відповідної команди. Теги записують у кутових дужках. Тег, що закриває область дії, має косу риску. Не забувайте її писати, інакше тег працюватиме неправиль­но. Тег може містити параметри, які користувач записує у першому тезі через пропуск, наприклад, <BODY TEXT="red">.

Між тегами <TITLE>...</TITLE> пишуть заголовок Windows-вікна, а між <BODY napaмeтpи>...</BODY> — основний текст, до якого застосовують теги форматування.

Розглянемо основні параметри тега BODY:

BACKGROUND = "шлях до графічного файлу"— задає картин­ку для фону; BGCOLOR = "white" — задає білий колір фону, якщо не використовується фон-картинка; TEXT = "black" — задає колір тексту (тут чорний) на сторінці. •


< Р > — початок нового абзаца; його прийнято записувати в кінці попереднього. Наступне речення починатиметься з нового, вирівняного до лівого краю абзаца без відступу у першому рядку.

<BR> — наступний за цим тегом текст буде наведено у ново­му рядку без пропуску порожнього рядка.

<HR> — буде проведена горизонтальна лінія.

<В> текст </В> — товстий шрифт тексту, що є між тегами.

<І> текст </І> — шрифт-курсив.

<U> текст </U> — підкреслений шрифт.

<SUB> текст </SUB> — нижній індекс, наприклад у Н20.

<SUP> текст </SUP> — верхній індекс, наприклад, 1П вулиця, а2.

<BIG> текст </BIG> — великий шрифт.

<SMALL> текст </SMALL> — малий шрифт.

<ЕМ> текст </ЕМ> — виокремлений курсивом текст (тег І).

<В> <І> текст </Іх/В> — товстий курсив. Цей приклад демонструє застосування принципу вкладення тегів.

Окремим типом абзаца є заголовок. Є шість видів заголовків, які відрізняються розмірами символів:

Теги Результат на екрані

<Н1>Заголовок 1</Н1> ЗАГОЛОВОК 1.

<Н2>Заголовок 2</Н2> ЗАГОЛОВОК 2.

<НЗ>Заголовок 3</Н3> ЗАГОЛОВОК 3.

<Н4>Заголовок 4</Н4> Заголовок 4.

<Н5>Заголовок 5</Н5> Заголовок 5.

<Н6>ЗаГОЛОВОК 6</Н6> Заголовок 6.

Заголовок за замовчуванням вирівнюється до лівого краю вікна. Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання:

<CENTER> елемент </CENTER>— вирівнювання до центру; <LEFT> елемент </LEFT> — вирівнювання до лівого краю; <RIGHT> елемент </RIGHT> — вирівнювання до правого краю.

Інформацію можна подати у вигляді таблиці без рамок за допомогою парного тега <PRE>...</PRE>. Текст в середині цього тега оформляють засобами табуляції. Броузер такий текст пере-форматовувати не буде. Теги для створення таблиць з рамками тут не розглядатимемо.

Тег задання параметрів шрифта FONT.

Щоб задати назву конкретного шрифта, його розмір і колір використовують парний тег FONT з параметрами FACE, SIZE та COLOR, наприклад, <FONT FACE = "Decor, Arbat, Kudriashov" SIZE = +2 COLOR -"red"> текст </FONT>

Якщо на комп'ютері клієнта встановлено шрифт Decor, то він буде застосований до даного тексту, інакше броузер застосує шрифт Arbat чи Kudriashov, інакше — деякий свій стандартний шрифт, наприклад, Times New Roman. Розміри символів шрифта можуть бути від 1 до 7. Розмір 3 вважається стандартним, він орієнтовно відповідає 10 пікселям. Розмір 7 є найбільшим. Число 2 як значення параметра SIZE означає другий розмір шрифта, число +2 означає, що розмір шрифта має бути на дві одиниці більший, ніж стандартний, тобто п'ятий, число -2 означатиме перший розмір шрифта — на дві одиниці менший, ніж стандартний.

Колір тексту буде червоний. Основні кольори мають такі назви:

 

black — чорний green — зелений

navy — темно-синій teal — бірюзовий

silver — сірий lime — яскраво-зелений

blue — синій aqua — блакитний

maroon — малиновий olive — темно-зелений

purple— бузковий gray — темно-сірий

red — червоний yellow — жовтий

fushsia — рожевий white — білий


 

Лекція №14

Тема:

Програмування Web-сторінки, що містять списки, таблиці, посилання на графічні та відео файли

Мета:

§ Розкрити зміст поняття Web-сторінки, розглянути принципи побудови HTML-коду Web-сторінки

§ Розвивати логічне мислення.

§ Виховувати уважність, зосередженість, працелюбність.

 

<== предыдущая лекция | следующая лекция ==>
Структура Web-документа | Антон Павлович Чехов
Поделиться с друзьями:


Дата добавления: 2014-01-06; Просмотров: 2543; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.01 сек.