|
|
| ХАТА МОЯ | ПОРТФОЛІО | ХРИСТИЯНИНУ | ПОЧИТАТИ | МОЄ ЖИТТЯ | ФОТОАЛЬБОМ | ЗВ'ЯЗОК | |
 Один на один с FreeBSD |
|
|
Швидкі пальчики 02
Теги – це “ярлички”, які ми розвішуємо то тут, то там для розмітки тексту. Мені при цьому завжди згадується відома реприза Винокура, який все не міг дійти згоди із своїм акомпаніатором: “тут граємо, а тут – ні, а ось масна пляма, це рибу загортали…” Так само з тегами: цей тег говорить, що цю частину тексту треба виділити підкресленням, а тут буде картинка (“масна пляма” за Винокуром), за допомогою наступного текст буде відформатовано у вигляді таблиці, а внизу ще один тег обов’язково відішле відвідувача сайту до поштової скриньки веб-майстра. А грати цю партитуру буде, звичайно, браузер. Оскільки ми розпочинаємо “з нуля”, то, мабуть, ця стаття не буде цікавою для досвідчених “письменників” HTML-коду (бо що б там не казали, а HTML – це все ж не мова програмування), їх питання (якщо такі будуть) та готовність поділитися своїм досвідом виділимо якось окремо – чи шляхом особистого листування, чи через газету, - які в кого будуть пропозиції. Кажучи просто, то тег - це певна послідовність латинських літер (свого роду команда) в ось таких лапках: < >. Теги бувають відкриваючі і закриваючі, хоча є теги, що не мають пари і приречені на горду самотність. Наприклад, виділимо частину тексту bold (виділеним шрифтом): <b> Цей текст виділяється. </b> А тепер розмістимо його по центру: <center><b> Цей текст виділяється і є відцентрований. </b></center>. Ви помітили, що парний закриваючий тег має ту саму назву, що й відкриваючий, але має в собі невеличку “родзинку” – похилу риску (це щось на зразок обручки, яка назавжди єднає два теги в пару). Якщо Інтернет Експлорер деколи може “закрити” сам тег, якому ви забули приписати його кінцеву половинку, то Нітскейп цього робити не буде. Ну і правильно, він же браузер, а не двірник, що підмітатиме за вашими помилками. Хоча Нітскейпом користується лише кожен п’ятий-восьмий, за різними статистичними даними (я в тому числі), та пам’ятати про цього п’ятого-восьмого усе ж треба. А тепер невідворотна безсмертна фраза, яка зустрічається в кожному посібнику по вивченню HTML про те, що загальна структура будь-якого гіпертекстового документа має такий вигляд: ——————————————————
Трішечки пояснень - довгі риски тут просто для краси, а ось тег <HTML> </HTML> - ні. Він сигналізує браузеру, що далі йтиме гіпертекстовий документ і з ним треба поводитися відповідним чином - як не з простим, плебейським, а і з справжнім благородним - гіпертекстовим. Спробуйте з будь-якої сторінки викинути ці теги - побачите результат: сторінка зарясніє тегами, які несподівано “проявляться” і перестануть виконувати свої обов’язки - робити розмітку тексту згідно із задумом дизайнера. В <HEAD></HEAD> (заголовку) ми задаємо загальні характеристики документа – такі, як: кодування, назва, таблиця стилів, що застосовуються, - про це детальніше поговоримо в процесі вашого HTML-дозрівання. Тепер ближче до діла, тобто до тіла документа. Тег <BODY> - це голова цього тіла, а тег </BODY> - його п’яти. Голова не може бути без обличчя із усіма атрибутами цього обличчя. Звичайно, в голові, яка прикладається до тіла, обов’язкова умова його життєдіяльності, є мозок. Її може прикрашати зачіска, біжутерія в вушках, ніздрях і на язиці і так далі… До чого це я веду? А веду я до того, що відкриваючі теги можуть мати параметри, які деталізують головуючу поведінку цього тега по відношенню до того, що знаходиться між ним і його закриваючою половинкою. Отож, параметри тега <BODY>:
Повний приклад тегу <BODY>:
Тепер про форматування самого тексту HTML-документів. Існує 6 рівнів заголовків: від H1 до H6. Проробимо тепер канонічну процедуру написання першої нашої сторінки з невблаганно-неминучою фразою Hello, World! Для цього наберемо в редакторі Блокнот наступний текст і збережемо його з розширенням HTML: <HTML>
Відкриємо цей текст в браузері і насолодимося своїм першим творінням. Не матиме значення, якими буквами набираються самі теги (<CENTER> чи <center>), але файли fon.GIF i fon.gif юніксо-подібний сервер трактує як 2 різні файли. Це треба знати, щоб після розміщення сторінки на сервері не виникло на перший погляд містичної ситуації (локально сайт працював, а при завантаженні з сервера перестав показувати картинки та інші суб-документи). Ну все, ви вже зрозуміли, що таке теги і як вони працюють, тому далі я просто коротко опишу найосновніші з них і буду утримуватися від зайвих коментарів і приспівувань. Теги логічних стилів документа:<dfn>, <em>, <cite>, <code>, <kbd>, <samp>, <strong>,<var>, теги фізичних стилів - <b>,<i>,<tt>. Для нижнього індексу існує тег <SUB>, а для верхнього - <SUP>. Для блимаючого тексту використовується дуже непопулярний парний тег <BLINK>, а для так само непопулярної біжучої стрічки - <MARQUEE> (останній працюватиме тільки в Інтернет Експлорері). Не забувайте про закриваючі теги і з допомогою тестового документа на зразок нашого Hello, World! подивіться кожному із них у вічі, бажано в різних браузерах. Це щоб зрозуміти: ваші сторінки в двох основних сімействах браузерів ніколи не будуть абсолютно однаковими (мабуть, ви вже це й самі помітили, подорожуючи гіперпростором). Для перебивки між стрічками використовується тег <BR>, для проведення горизонтальної риски - <HR> (з деякими параметрами), а для початку нового абзацу - <P>. Ці три останні теги не мають до пари закриваючих. Цікавими є такі параметри для <HR>: <HR WIDTH=xx> - ширина лінії в пікселах,
Приклад цілого тегу: <HR WIDTH=85% ALIGN=CENTER NOSHADE>. Отже, ALIGN – це тип вирівнювання, параметр, який часто використовується у різних тегах HTML, один з яких, - це тег <IMG>, без якого не зможе існувати жодна веб-сторінка, як жоден паспорт ще не зміг існувати без фотографії свого власника. Серед параметрів цього непарного тега (а їх ой як багато!) розглянемо поки що найпоширеніші і спільні для Інтернет Експлорера та Нітскейпа: ALIGN=LEFT, RIGHT, TOP, ABSMIDDLE, ABSBOTTOM, TEXTTOP, MIDDLE або BASELINE (браузери трактують картинку символ тому ці параметри вирівнювання щодо тексту можуть не дати вам очікуваного результату, - знову ж, поекспериментуйте з ними браузерами, а як поставити все на бажані місця і зробити відступи абзаців, поговоримо наступного разу). VSPACE=”xx” – відступ в пікселах по вертикалі
Якщо завантаження картинки відбуватиметься довго в силу її великого розміру, то можна вказати лінк на картинку із зображенням нижчої якості (а ви вже знаєте, що це означає меншу “бітність”), яка потім в процесі завантаження трансформується у більш якісну за допомогою задання параметру: LOWSRC=”картинка”, наприклад SRC=”lowpicture.jpeg” Хоча й малоймовірно, але на шляху вашої сторіночки може з’явитися браузер, який не сприймає картинок, тому назву вашої картинки можна або продублювати в наступному параметрі, або придумати щось оригінальне, що буде випливати під стрілочкою мишки після потрапляння цієї стрілочки на картинку: ALT=”А це мій портрет…” Приклад цілого тегу: <IMG SRC=”LOGO.GIF” ALIGN=”LEFT” WIDTH=”100” HEIGHT=”100” BORDER=”0” ALT=”Лого сайту.”> (Я звикла вводити значення параметрів в лапках, бо там, де Інтернет Експлорер “прожує” усе, старші версії Нітскейпа можуть закапризувати, зокрема якщо тих лапок не буде). Неможливим і нечуваним для будь-якої статті типу “Вступ до HTML” є не згадати про лінки – вузлики, якими глобальна павутина в’яжеться докупи. Перейдемо безпосередньо до конкретних застосувань. Ось так виглядає звичайний лінк на іншу сторінку: <center>Для завантаження FrontPage натисніть <a href=”http://www.microsoft.com/frontpage/”> ТУТ </a></center>. Замість HTTP може бути вказаний і інший протокол – FTP, telnet, mailto, останній застосовують часто для отримання інформації електронною поштою. При кліканні на такий лінк відкриється поштовий клієнт для того, щоб це повідомлення написати і відправити. Наприклад: <i>Напишіть WEB-майстру:<a href=”mailto:vasya@mail.ru”> vasya@mail.ru</a></i>. Є декілька помилок, які можуть виникати на цьому першому етапі вивчення HTML: це, по-перше, змішування стилів (<cite> Ось так, <tt>вони змішуються, - </cite> ці стилі</tt>) , а по-друге – зміна стилю всередині лінку (Напишіть WEB-майстру <a href=”mailto:vasya@mail.ru”><b>vasya@mail.ru </b></a>), а не ззовні його. В якості лінку може виступати не текст, а зображення,як, наприклад, ось в такій конструкції:
А тепер я вас привітаю – ви маєте усе, з чим можна створити першу свою сторінку. Прошу отримати ваше домашнє завдання: витворіть резюме своєї власної ДВП (дуже важливої персони) за приблизним планом твору: заголовок, фотографія,опис вашої трудової біографії, адреса електронної пошти. Розмістіть це на сервері вашого провайдера, якщо він надає вам таку можливість, а ви ще нею не скористались, або (якщо не надає або надає за окрему плату) влаштуйте своє віртуальне Его на безкоштовному сервісі (згадайте, скільки реклами пройшло мимо ваших очей неповторного інтернетно-рожевуватого кольору: “10 Мб безкоштовно під вашу сторінку!”, “20 Мб безкоштовно під вашу сторінку!”, “50 Мб безкоштовно під вашу сторінку!”…. – тепер вона є актуальною і для вас). Після цього, без усякого сумніву, ваші шанси знайти набагато престижнішу і високооплачуванішу роботу піднімуться до фантастичних висот. Потроху-потроху, - і ваше віртуальне резюме розростеться до справжньої персональної сторінки або здоровезного сайту, присвяченого вашому хобі, вашій собаці, родині і усім-усім-усім… Тільки уявіть собі оголошення: “Сажотрус найвищої кваліфікації шукає роботу – звертайтесь http://www.chimney-sweep.lviv.ua”. А десь в Америці це вже навіть не смішно. Зміст найближчих наступних серій: якори, списки, таблиці, як зробити пристойний абзац, для чого теги <PRE>, <NOBR>, <WBR>, <BLOCKQUOTE> (а може, ні для чого?), чи в моді ще фрейми, як розподілити лінки по картинці, розглянемо способи змусити працювати шари (рос. “слои”) в усіх браузерах…Щось задалеко я забігла – чи встигнете ви натренувати м’язи на ваших розумних пальчиках?…
|
|
|||||||||||||
| |||||||||||||||
|
Ідея проекту, програмування, HTML, CSS, дизайн,
редагування та переклад текстів - Дідок Олександр. | |||||||||||||||
Про сонечко ...