Все про комп’ютер: 2010

вівторок, 28 грудня 2010 р.

Додавання каскадних таблиць стилів CSS до HTML

Застосовувати каскадні таблиці стилів до HTML сторінок можна трьома способами:

1. Безпосередньо до кожного елементу. Здійснюється за допомогою параметру тегу style. Наприклад: <body style="background:#ff6600;">.

2. З указанням класів та ідентифікаторів на кожному тезі, а потім розміщенням тегу <style></style> між тегами <head></head>. Наприклад:

<head>

<style>

body {background:#ff6600;}

</style>

</head>

<body>

</body>

3. З указанням класів та ідентифікаторів на кожному тезі, та прикріпленням документу стилів до сторінки.

Наприклад:

<head>

</head>

<body>

</body>

понеділок, 27 грудня 2010 р.

Основні відомості про каскадні таблиці стилів CSS

CSS - "спеціальна мова, що використовується для відображення сторінок, написаних мовами розмітки даних. Найбільш часто CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів." Вікіпедія

Раніше дизайн сторінок формувався за допомогою мови HTML (параметрами для кожного елементу). Це було незручно, тоді коли у вас великий сайт і вам, щоб змінити якусь частину дизайну, потрібно було заходити на кожну сторінку сайту, і правити ту частину, яку потрібно змінити.

При появі каскадних таблиць стилів (CSS), все змінилося. Тепер потрібно тільки кожний елемент, при написанні сайту, умовно назвати, та прикріпити файл стилю до кожної сторінки (в HTML не робити ніякого оформлення). Потім в файлі CSS описувати оформлення тим названим елементам сайту. Цей метод зручний, коли потрібно змінити дизайн сайту, просто замінюється файл стилю на інший (з таким самим ім'ям) і все на сторінках змінило стиль.

Стиль можна задавати: по назвам тегу, по класам тегів та по ідентифікаторам. При встановлені параметрів по тегу стиль застосовується для всіх таких тегів сторінки. При встановленні по класам, то стиль застосовується до тегів з таким вказаним класом. При вказанні стилю по ідентифікатору, такий елемент може бути тільки один, бо ідентифікатори на сторінці не повинні повторюватися.

Синтаксис. Синтаксис в CSS на перший погляд простий. Спочатку йде назва елемента, потім в фігурних дужках, через крапку з комою, всі параметри стилю для цього елемента. Параметри стилю задаються: спочатку назва параметру, потім дві крапки, а після цього значення цього параметру.

Наприклад:

Застосування до тегу <p>:

p {font-size:20pt;color:#ff0000;}

Застосування до класу <p class="top">:

.top {font-size:30pt;color:green;}

Застосування до ідентифікатора <p id="el1">:

#el1 {font-size:10pt;color:blue;}

субота, 25 грудня 2010 р.

Основні елементи HTML сторінки Частина 2

В попередній частині статі ми розглянули: заголовки, абзаци та нумерацію рядків. Продовжуємо далі.

Маркування рядків. Маркування рядків здійснюється так само, як нумерація, але кожний рядок позначається символом або зображенням. Маркування здійснюється за допомогою тегів: <ul></ul> - група маркування та <li></li> - так само як і при нумерації є одним пунктом маркування.

Привожу приклад маркування.

Посилання. Посилання - це текст, при натисненні на який, браузер переходить до вказаної в посиланні сторінки. Посилання створюються за допомогою тегу <a></a>. Для вказування адреси посилання, в тезі використовується параметр href (<a href="google.com.ua">Посилання на Google</a>). Всі параметри тегів пишуться через пробіл в відкривальному тезі.

Привожу приклад посилання.

Зображення. Зображення на web сторінці може бути тільки декількох форматів. На web сторінках використовують формати: JPG, GIF, PNG. Формат BMP не використовується, тому що він займає багато місця, і довго завантажується на сторінці. JPG - це зжатий формат зображення, займає менше місця ніж BMP. GIF і PNG - використовуються, для зображення прозорих або напівпрозорих зображень. Також формат GIF використовується, для зображення анімації.

Зображення додається до web сторінки, за допомогою непарного тегу <img>, з параметром адреси файлу src (<img src="1.jpg">). В дужках був приведений приклад відносного посилання на файл, тобто зображення повинно бути в томі самому каталозі що і файл web сторінки. Ще в тегу є й інші параметри, проте вони вже рідко використовуються, тому що задаються за допомогою мови CSS. Цими параметрами є width (ширина зображення) та height (висота).

Привожу приклад зображення.

На зображення теж можна додавати посилання, поміщаючи тег зображення між тегами посилання (<a href="google.com.ua"><img src="1.jpg"></a>)

Таблиці. Таблиці при створенні web сторінок використовуються за прямим призначенням (як таблиці), та не за прямим (впорядковувати розміщення об'єктів на сторінці). При непрямому використанні обриси таблиці ховають за допомогою спеціального параметру. Зараз сама таблиця мало використовується, її все частіше замінюють на тег, який називають "слой". (<div></div>). Таблиця на сторінці зображається за допомогою тегів: <table></table> - таблиця; <tr></tr> - рядок <td></td> стовпчик. Ієрархія табличних тегів формується так: таблиця має рядки, рядки мають стовпчики.

<table>

<tr>

<td>1 комірка</td><td>2 комірка</td>

</tr>

</table>

Тег таблиці має параметр border, який означає товщину стінок, якщо він дорівнює нулю таблиця немає обрисів. Тег стовпчика має параметр colspan, який означає скільки стовпчиків в порівнянні з верхніми рядками займає даний стовпчик. Це типу "Обьединение ячеек" в Excel.

Привожу приклад таблиці.

Web програми. Web програми на сайтах використовуються, для більш інтерактивного обслуговування користувачів. Деякі програмісти створюють сайти не вставляючи програму в HTML, а програма і є сайтом. Приклад Flash сайту http://www.creaktif.com/. Недоліком Flash сайтів є те, що вони займають багато пам'яті і не в кожного користувача є достатня швидкість Інтернету. А сайти на мові програмування Java використовують, для "додаткової безпечності в порівнянні з PHP". Хоча я думаю, що ця додаткова безпечність полягає в тому, що всі пишуть (і знають як) сайти на мові PHP, а щоб вивчить і написати на Java сайт треба так голову поламати... Приклад сайту на Java http://www.oracle.com.

Для генерації коду додавання програм на сайт зручніше використовувати редактори, для створення тих же програм (Adobe Flash або Netbeans для Java). Також в DreamWeaver є функція додавання Flash анімації.

Приблизно, код HTML, для додавання Flash на сторінку має такий вигляд:

</object>

пʼятниця, 24 грудня 2010 р.

Основні елементи HTML сторінки

За допомогою мови HTML на web сторінці можна зобразити: різної ієрархії заголовки, абзаци, нумерацію і маркування рядків, посилання, зображення, таблиці, web програми (Flash, Java аплети та ін.).

Ці всі елементи ми далі і розглянемо.

Заголовки. Заголовки можуть бути різної ієрархії від першого рівня до шостого. Відповідно і теги цих заголовків позначаються від <h1></h1> по <h6></h6>. По правилам парних тегів, текст заголовку вписується між відкривальним і закривальним тегами.

Приклад використання тегів заголовка:

Заголовки використовуються пошуковими системами в якості ключових слів.

Абзаци. Теги абзаців використовуються для того, щоб згрупувати абзац в один елемент, щоб кожний абзац відступав від попереднього та перший рядок абзацу відступав від краю. Тег абзацу має вигляд <p></p>. Привожу приклад сторінки з абзацами.

Нумерація і маркування рядків. Нумерація рядків використовується, для того щоб робилася автоматична нумерація рядків. Тому хто набирає текст не потрібно замислюватися над тим, який номер пункту потрібно ставити наступним, все робиться автоматично.

Автоматична нумерація здійснюється за допомогою тегів: <ol></ol> - група нумерації (в її межах знаходяться нумерувальні рядки), якщо потрібно почати нумерацію спочатку, потрібно вставити ці теги знову; <li></li> - між цими тегами знаходиться текст, який є одним пунктом нумерації.

Привожу приклад нумерації.

четвер, 23 грудня 2010 р.

Початок програмування на HTML

Початківець задає питання, а в чому ж можна програмувати на мові HTML?

Відповідь: - "Навіть в Блокноті." :)

Для початку, якщо ви хочете вивчить команди, і розуміти що пишуть інші на своїх сайтах, то потрібно почати з Блокнота, а потім, якщо вам ліньки набирати текст команд, перейдете на автоматизовані редактори такі як FrontPage чи DreamWeaver.

Мені автоматизовані редактори не подобаються тим, що не дають мені виставити ті параметри які я хочу. Наприклад, якщо мені потрібно змінити розмір таблиці, в автоматизованому редакторі я беру за поле і розтягую його, але сусіднє поле може також здвинутись під натиском того, що я двигаю. А якщо змінити параметри розміру таблиці в Блокноті то сусідні параметри автоматично не зміняться (це мене повністю влаштовує).

Для створення сторінки в Блокнот, потрібно відкрити Блокнот та зберегти документ під довільним ім'ям та розширенням .htm чи .html.

Після збереження можна запустити цей файл і він відкриється в Браузері (який у вас по замовчуванню), для редагування потрібно натиснути на файлі правою кнопкою миші та вибрати пункт вспливаючого меню Открыть с помощю -> Выбрать програму -> Блокнот.

Для того щоб просто відобразити ваш текст в браузері, достатньо просто його написати в Блокноті та зберегти. Після чого оновити відкриту сторінку в браузері.

Для того щоб показати переваги HTML, наприклад зробити цей текст заголовком сторінки, потрібно його оточити парним тегом заголовку <title></title>.

Як бачите, заголовок браузера змінився на текст, який ми написали між парним тегом <title></title>.

Налаштування мережі та Інтернет в Ubuntu 9.10 та 10.04

Перед налаштуванням мережі та інтернет дехто рекомендує видалити Network Maneger. Далі потрібно під правами root зайти на директорію /etc/network: ($ - знак означає що вводиться команда в термінал)

$ sudo nautilus /etc/network

Відкрити файл interfaces і змінити на такий вигляд:

1) якщо IP адреса роздається динамічно

auto lo

iface lo inet loopback

auto eth0

iface eth0 inet dhcp

2) якщо IP адреса роздається статично

auto eth0

iface eth0 inet static

address 192.168.0.2

netmask 255.255.255.0

gateway 192.168.0.1

3) якщо потрібно вказати дві адреси на одну мережеву карту

auto eth0

iface eth0 inet static

address 192.168.0.2

netmask 255.255.255.0

gateway 192.168.0.1

auto eth0:1

iface eth0 inet static

address 192.168.1.2

netmask 255.255.255.0

gateway 192.168.1.1

P. S. Якщо версія IPv6, то пишеться не inet a inet6

Після редагування файл потрібно зберегти. Та перезавантажити мережу:

$ sudo /etc/init.d/networking restart

Для налаштування Інтернет через pppoe (коли провайдер дає пароль та логін) вводимо в термінал:

$ sudo pppoeconf

Після запуску, з’являється синя форма на всі запитання натискати Enter, коли запитає логін і пароль ввести їх. Після цього повинен з’явитись інтернет.

середа, 22 грудня 2010 р.

Розблокування мережевого доступу через Администратора

В Операційній системі Windows XP по замовчуванню (поумолчанию/default), коли заходиш по мережі на комп'ютер то з’являється пропозиція ввести пароль користувача Guest, при цьому користувач не може змінитися.

Для того щоб налаштувати вільний доступ до інших користувачів, потрібно зайти Панель управления -> Администрирование -> Локальная политика безопасности -> Параметры безопасности -> Локальные политики -> Параметры безопасности. І шукаєте запис "Сетевой доступ: модель совместного доступа и безопасности...", по замовчуванню повинно стояти "Гостевая", двічі клацаєте і вибираєте "Обычная". Після цього перезавантажуєте комп’ютер.

Струкура HTML документу

HTML - "стандартна мова розмітки документів у Всесвітній павутині. Більшість веб-сторінок створюються за допомогою мови HTML. Документ HTML оброблюється браузером та відтворюється на екрані у звичному для людини вигляді." Вікіпедія
В мові для розмітки тексту використовуються спеціальні команди, які мають назву "теги". Теги можуть бути парними та непарними. Теги позначаються спеціальними знаками ">" та "<" (більше та менше), між якими назва команди.

Парні теги - це теги, які в основному встановлюють властивості для тексту. Наприклад:

посилання (<a>Текст</a>),
абзац (<p>Текст</p>),
заголовок (<h1>Текст</h1>).

На відміну від непарних тегів, парні мають тег відкриття і закриття (саме тому і парні). Тег відкриття, побудований так само, як і непарний тег, а тег закриття має знак ділення (/), після знаку менше. (Дехто ставить знак ділення і перед знаком більше, навіть в непарних тегах).
Непарні теги - це теги, які "не для тексту". Наприклад:

почати з нового рядка (<br>),
додати малюнок (<img>),
відділююча лінія (<hr>).

Переходимо до основної структури документу, написаному на мові програмування HTML. Вона має такий вигляд:

<html>

<head>

<title>

</title>

</head>

<body>

</body>
</html>

Парний тег html позначає межі тексту програми на мові HTML. В парному тезі head знаходяться теги, які задають властивості сторінки (заголовок, мова написання, кодування тексту, ключові слова для пошуку, прикріплення інших документів). Парний тег title, який знаходиться в тезі head, встановлює заголовок сторінки. В тезі body містяться теги, які будуть вказувати розмітку для тексту.

вівторок, 28 грудня 2010 р.

понеділок, 27 грудня 2010 р.

субота, 25 грудня 2010 р.

пʼятниця, 24 грудня 2010 р.

четвер, 23 грудня 2010 р.

середа, 22 грудня 2010 р.

вівторок, 28 грудня 2010 р.

понеділок, 27 грудня 2010 р.

субота, 25 грудня 2010 р.

пʼятниця, 24 грудня 2010 р.

четвер, 23 грудня 2010 р.

середа, 22 грудня 2010 р.