ХАТА МОЯ | ПОРТФОЛІО | ХРИСТИЯНИНУ | ПОЧИТАТИ | МОЄ ЖИТТЯ | ФОТОАЛЬБОМ | ЗВ'ЯЗОК |

Один на один с FreeBSD
З 24-го квітня 2006-го року купуйте нову книгу по операційній системі FreeBSD: "Один на один с FreeBSD".


 Зміст книги та уривки текстів -->>

 Buglist:11 Додати новий Переглянути існуючий список

Написана - російською мовою
Вміщує - 704 сторінки
Наклад - 2500 екземплярів
Рекомендована ціна - 75грн
Рік видання - 2006
Видавництво - MK-PRESS
Автор - Дідок О.О.
ISBN 966-8806-00-X
 • Оновлення [10]:
[18.11.2007] Протиріччя
[18.11.2007] Любові тепло
[28.10.2006] Пісня "Не..."+mp3
[23.10.2006] "Не думаючи жити/філософія сучасного життя"
[23.10.2006] Пісня "Ластівка"+mp3
[23.10.2006] Пісня "Безсилий"+mp3
[29.08.2006] Моя поезія
[29.08.2006] "Я - ти, і я - не ти"
[15.06.2006] "Кохання гра"
[07.06.2006] "Пам'ятаю..."
 • Новини сайту [3]:

[16.05.2006] 21-го травня вийшла моя книга по операційній системі FreeBSD. Пишу нову книгу по PHP. Дякую за підтримку ...


[24.02.2006] Добавив систему рейтингiв. Тепер ви можете оцiнити на свiй смак кожну статтю за п'ятибальною системою. Скоро напишу сторiнку рейтингових статей i систему коментарiв. Очiкуйте)


[19.01.2006] Життя радісне, коли на нього дивишся з добрими очима і гарним настроєм). Так от останні чудові фотографії від мене можна знайти тутечки, доречі, там можна знайти і мене, якщо когось зацікавить це)). Ммм. Дя - поповнив рахунок на хостинг ще на рік, збільшивши пакет)) Тепер у мну 3гіга місця, багато піддоменів, достатньо баз данних і навіть можливість повісити декілька доменів у себе - не погано, коротко кажучи. Ну добре, досить, ато вже не новина - а ціла стаття про моє життя-буття)) Заходьте ще)


Остання корекція: 01.01.2003
/2 
 Вперше опубліковано: 01.01.2003
Сторінку відкрито: 389Коментарiв: 0ДодатиЧитатиДопомога
ПОЧИТАТИІнформ. технологіїWeb ...Швидкі пальчики

Швидкі пальчики 02

Інше в підрозділі :

 Швидкі пальчики 01[2003-01-01]  Швидкі пальчики 03[2003-01-01]  Швидкі пальчики 04[2003-01-01]  Швидкі пальчики 05[2003-01-01]  Швидкі пальчики 06[2003-01-01]

Теги – це “ярлички”, які ми розвішуємо то тут, то там для розмітки тексту. Мені при цьому завжди згадується відома реприза Винокура, який все не міг дійти згоди із своїм акомпаніатором: “тут граємо, а тут – ні, а ось масна пляма, це рибу загортали…” Так само з тегами: цей тег говорить, що цю частину тексту треба виділити підкресленням, а тут буде картинка (“масна пляма” за Винокуром), за допомогою наступного текст буде відформатовано у вигляді таблиці, а внизу ще один тег обов’язково відішле відвідувача сайту до поштової скриньки веб-майстра. А грати цю партитуру буде, звичайно, браузер.

Оскільки ми розпочинаємо “з нуля”, то, мабуть, ця стаття не буде цікавою для досвідчених “письменників” HTML-коду (бо що б там не казали, а HTML – це все ж не мова програмування), їх питання (якщо такі будуть) та готовність поділитися своїм досвідом виділимо якось окремо – чи шляхом особистого листування, чи через газету, - які в кого будуть пропозиції.

Кажучи просто, то тег - це певна послідовність латинських літер (свого роду команда) в ось таких лапках: < >. Теги бувають відкриваючі і закриваючі, хоча є теги, що не мають пари і приречені на горду самотність. Наприклад, виділимо частину тексту bold (виділеним шрифтом): <b> Цей текст виділяється. </b>

А тепер розмістимо його по центру: <center><b> Цей текст виділяється і є відцентрований. </b></center>.

Ви помітили, що парний закриваючий тег має ту саму назву, що й відкриваючий, але має в собі невеличку “родзинку” – похилу риску (це щось на зразок обручки, яка назавжди єднає два теги в пару). Якщо Інтернет Експлорер деколи може “закрити” сам тег, якому ви забули приписати його кінцеву половинку, то Нітскейп цього робити не буде. Ну і правильно, він же браузер, а не двірник, що підмітатиме за вашими помилками. Хоча Нітскейпом користується лише кожен п’ятий-восьмий, за різними статистичними даними (я в тому числі), та пам’ятати про цього п’ятого-восьмого усе ж треба.

А тепер невідворотна безсмертна фраза, яка зустрічається в кожному посібнику по вивченню HTML про те, що загальна структура будь-якого гіпертекстового документа має такий вигляд:

——————————————————
<HTML>
——————————————————
<HEAD>
<TITLE> Назва сторінки - стрічка, що знаходиться на верхньому зрізі вікна браузера
</TITLE>
</HEAD>
——————————————————
<BODY>
Тіло гіпертекстового документа – всі тексти, малюнки, лінки …
</BODY>
——————————————————
</HTML>
——————————————————

Трішечки пояснень - довгі риски тут просто для краси, а ось тег <HTML> </HTML> - ні. Він сигналізує браузеру, що далі йтиме гіпертекстовий документ і з ним треба поводитися відповідним чином - як не з простим, плебейським, а і з справжнім благородним - гіпертекстовим. Спробуйте з будь-якої сторінки викинути ці теги - побачите результат: сторінка зарясніє тегами, які несподівано “проявляться” і перестануть виконувати свої обов’язки - робити розмітку тексту згідно із задумом дизайнера. В <HEAD></HEAD> (заголовку) ми задаємо загальні характеристики документа – такі, як: кодування, назва, таблиця стилів, що застосовуються, - про це детальніше поговоримо в процесі вашого HTML-дозрівання.

Тепер ближче до діла, тобто до тіла документа. Тег <BODY> - це голова цього тіла, а тег </BODY> - його п’яти. Голова не може бути без обличчя із усіма атрибутами цього обличчя. Звичайно, в голові, яка прикладається до тіла, обов’язкова умова його життєдіяльності, є мозок. Її може прикрашати зачіска, біжутерія в вушках, ніздрях і на язиці і так далі… До чого це я веду? А веду я до того, що відкриваючі теги можуть мати параметри, які деталізують головуючу поведінку цього тега по відношенню до того, що знаходиться між ним і його закриваючою половинкою.

Отож, параметри тега <BODY>:
- bgcolor=”колір”, де колір може бути заданий явно, наприклад bgcolor=”purple” або в RGB-вигляді (дивіться попередню статтю), наприклад bgcolor=”#A020F0”, що так само означає той же фіолєтовий колір. Кольори будуть походити з тої ж безпечної палітри Netscape;
- background=”адреса картинки”, наприклад background=”lines.gif” або з використанням абсолютної адреси це буде так: background=”http://www.mysite.com/images/lines.gif” - Це коли вас не задовільнили всі 216 кольорів і ваш геніальний задум вимагає чогось особливого. Для фону використовується картинка приблизно 100 на 100 пікселів, яка розмножується на все вікно браузера сама без ваших спеціальних вказівок. Очевидно, вона мусить бути згенерована таким чином (а для цього існує багато програм і програмок), щоб утворюваний нею фон не мав швів. Звичайно, ніхто не забороняє використання фону здоровенної картинки 600 на 800, але слід пам’ятати, що екрани дисплеїв можуть мати різну розмірність (наприклад, 1024 на 768 або 640 на 480), а модеми – різну швидкість, тому люди з досвідом, як правило, використовують чим менші GIFи.
- text=”колір” задає колір тексту документу за тою ж описаною вище схемою;
- link=”колір” задає колір лінків, vlink=”колір” задає колір вже відвізитованих лінків, і , накінець, alink=”колір” задає колір, яким активується лінк при натисканні.

Повний приклад тегу <BODY>:
<body background=”lines.gif” text=”black” link=”red” vlink=”grey” alink=”ivory”>

Тепер про форматування самого тексту HTML-документів. Існує 6 рівнів заголовків: від H1 до H6. Проробимо тепер канонічну процедуру написання першої нашої сторінки з невблаганно-неминучою фразою Hello, World! Для цього наберемо в редакторі Блокнот наступний текст і збережемо його з розширенням HTML:

<HTML>
<HEAD><TITLE> Моя перша сторінка </TITLE>
</HEAD>
<BODY BGCOLOR=”green” TEXT=”gray”>
<CENTER>
<H1> Заголовок H1 - найбільший: Hello, World!</H1>
<H2> Заголовок H2: Hello, World!</H2>
<H3> Заголовок H3: Hello, World! </H3>
<H4> Заголовок H4: Hello, World! </H4>
<H5> Заголовок H5: Hello, World! </H5>
<H6> Заголовок H6 - найменший: Hello, World! </H6>
</CENTER>
</BODY>
</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=xx%> - ширина лінії в %% від ширини вікна
<HR SIZE=xx> - товщина лінії в одиницях (=1 по замовчуванню)
<HR ALIGN=LEFT> - вирівнює лінію по лівому краю сторінки
<HR ALIGN=CENTER> - центрує лінію
<HR ALIGN=RIGHT> - вирівнює лінію по правому краю сторінки
<HR NOSHADE> - виводиться пласка, а не об’ємна лінія

Приклад цілого тегу: <HR WIDTH=85% ALIGN=CENTER NOSHADE>.

Отже, ALIGN – це тип вирівнювання, параметр, який часто використовується у різних тегах HTML, один з яких, - це тег <IMG>, без якого не зможе існувати жодна веб-сторінка, як жоден паспорт ще не зміг існувати без фотографії свого власника. Серед параметрів цього непарного тега (а їх ой як багато!) розглянемо поки що найпоширеніші і спільні для Інтернет Експлорера та Нітскейпа: ALIGN=LEFT, RIGHT, TOP, ABSMIDDLE, ABSBOTTOM, TEXTTOP, MIDDLE або BASELINE (браузери трактують картинку символ тому ці параметри вирівнювання щодо тексту можуть не дати вам очікуваного результату, - знову ж, поекспериментуйте з ними браузерами, а як поставити все на бажані місця і зробити відступи абзаців, поговоримо наступного разу).

VSPACE=”xx” – відступ в пікселах по вертикалі
HSPACE=”xx” – відступ в пікселах по горизонталі
SRC=”картинка” – місцезнаходження картинки, наприклад SRC=”picture.jpeg”
WIDTH=”xx” – ширина картинки в пікселах (бажано задавати завжди)
HEIGHT=”xx” – висота картинки в пікселах (бажано задавати завжди)
BORDER=”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>), а не ззовні його.

В якості лінку може виступати не текст, а зображення,як, наприклад, ось в такій конструкції:
Click on the envelope:<a href=”mail.htm”><img src=”envelope.gif”></a>

А тепер я вас привітаю – ви маєте усе, з чим можна створити першу свою сторінку. Прошу отримати ваше домашнє завдання: витворіть резюме своєї власної ДВП (дуже важливої персони) за приблизним планом твору: заголовок, фотографія,опис вашої трудової біографії, адреса електронної пошти. Розмістіть це на сервері вашого провайдера, якщо він надає вам таку можливість, а ви ще нею не скористались, або (якщо не надає або надає за окрему плату) влаштуйте своє віртуальне Его на безкоштовному сервісі (згадайте, скільки реклами пройшло мимо ваших очей неповторного інтернетно-рожевуватого кольору: “10 Мб безкоштовно під вашу сторінку!”, “20 Мб безкоштовно під вашу сторінку!”, “50 Мб безкоштовно під вашу сторінку!”…. – тепер вона є актуальною і для вас). Після цього, без усякого сумніву, ваші шанси знайти набагато престижнішу і високооплачуванішу роботу піднімуться до фантастичних висот. Потроху-потроху, - і ваше віртуальне резюме розростеться до справжньої персональної сторінки або здоровезного сайту, присвяченого вашому хобі, вашій собаці, родині і усім-усім-усім…

Тільки уявіть собі оголошення: “Сажотрус найвищої кваліфікації шукає роботу – звертайтесь http://www.chimney-sweep.lviv.ua”. А десь в Америці це вже навіть не смішно.

Зміст найближчих наступних серій: якори, списки, таблиці, як зробити пристойний абзац, для чого теги <PRE>, <NOBR>, <WBR>, <BLOCKQUOTE> (а може, ні для чого?), чи в моді ще фрейми, як розподілити лінки по картинці, розглянемо способи змусити працювати шари (рос. “слои”) в усіх браузерах…Щось задалеко я забігла – чи встигнете ви натренувати м’язи на ваших розумних пальчиках?…



Всього ресурсів на сайті: 84
Востаннє сайт змінювався: 25.02.2006
Змінено на: PHS-7.3-STABLE версію
Ви 79340 відвідувач сайту
Сторінку згенеровано за 0.034 секунд

 Поїздка до Харкова (reloading) ...

[2005-07-07] Поїздка до Харкова (reloading) ... 1 ... 2 ... 3 ночі не можу смикнути очей. Не то якісь переживання, не то просто сильно тормошить потяг. А можливо - просто ненормальна звичка організму до сну в 4-5 ранку. Погана звичка, світло ж виключили близьк ...


 Дисидент Євгеній Сверстюк

[2004-05-13] "Некоторые протестанты сами работают на понятие "секта" своей замкнутостью, социальной безответственностью и культурной пассивностью" Сегодня протестантские церкви в глазах многих украинцев считаются сектами. Почему такое стереотипное понимание, навязанное еще советским режимом, сохран ...


 HTML Digest 08

[2003-01-01] Flash x.x (себто самі визначайте) Oops!... (прим. ред.: звучить, як “Упс!...” - найчастіше вигукувані слова при роботі з програмою Flash 4, хоча дехто більше любить вигук “О-о...”, що по ...


 Розчарування. 28.04.2003

... помилка доступу


 ХРИСТИЯНИНУ

[0000-00-00] ...


ХАТА МОЯ | ПОРТФОЛІО | ХРИСТИЯНИНУ | ПОЧИТАТИ | МОЄ ЖИТТЯ | ФОТОАЛЬБОМ | ЗВ'ЯЗОК |