» Починаючому розроблювачеві сайтів присвячується…
Яшма горная порода. Подарки из камней. Александрит камень.Надивившись на особисті сторінки інших користувачів інтернету, у більшості виникає бажання створити своє щось неповторне й особливе. Хоча виходить, звичайно, як в усіх. HTML-документ легко створити. Це можна (але не потрібно!!!) зробити навіть в Word. Існує безліч візуальних редакторів - Composer, FrontPage, DreamViewer. Прості й складні, вони дозволяють створити собі сторінку, не замислюючись про вихідний код. Можна взагалі застосувати стандартний шаблон безкоштовних хостингов - народ.ру, наприклад. Якість таких сторінок нижче всякої критики. Втім, для домашніх сторінок про себе улюбленому цього цілком достатньо.
Проблема в тім, що на першій сторінці мало хто зупиняється. А для інших проектів, навіть для сайтів про заробіток, подібний метод підходить погано. Вихідний код сторінок, зроблених за допомогою візуальних редакторів, жахливий, і зробити вручну невелике виправлення найчастіше є справою досить складним.
Тому, вираження “Блокнот - кращий HTML-редактор всіх часів і народів!” недалеко від істини, при всіх недоліків NotePad… Правда, до Блокнота треба ще перекодировщик, але це не така більша проблема. Зрештою, є Aditor. Для новачків підійде Arachna або HAPedit з підсвічуванням символів. Але для використання подібних редакторів необхідно знати HTML - мова гіпертекстової розмітки.
Огляд навіть основних можливостей HTML - теми окремої книги. Російський опис є на сайті http://html.manual.ru/. А для початку розберемо основні принципи програмування, хоча багато застосувань мови HTML програмуванням не вважають (не без вагомих підстав).
Подібно іншим мовам, навчання починається з “Hello, World!”.
1:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>
2:<HTML>
4:<HEAD>
5: <TITLE>My First Page</title>
6: <META content=”text/html; charset=windows-1251″ http-equiv=Content-Type>
7: <META name=”keywords” content=”hello world”>
8: <META name=”description” content=”My First Page”>
9:</head>
10:<BODY>
11: <CENTER><H1>Hello, World!</h1></center>
12:</body>
13:</html>
Можна було деякі Мета-тэги додати, деякі забрати. Наведений код - лише демонстрація.
Цифри із двокрапкою - номера рядків - у реальному коді не потрібні.
Отже,
1-я рядок. Думаю, зрозуміло її призначення й без перекладу. Хоча браузери визначають HTML-документ і без цього рядка, вона необхідна по стандарті.
2-я рядок повідомляє про початок HTML-блоку. Багато хто ігнорують цей тэг, хоча це теж неправильно.
13-я рядок повідомляє про кінець документа.
Любою HTML-документ ділиться на заголовок і тіло.
Тэги в 4-ої й 9-ої рядках обмежують код заголовка.
5-я рядок визначає текст заголовка вікна браузера.
В 6-8-й рядках розташовані Мета-тэги. Вони визначають властивості документа.
Код 6-й рядка визначає кодування документа. Це єдиний з Мета-тэгов, використання якого категорично рекомендується.
Тэги 7-й й 8-й рядків визначають відповідно ключові слова й опис сторінки. Сучасні пошукові системи вже не враховують дані цих рядків (принаймні так заявляють). Але стандарт вимагає.
Крім того, у заголовку може втримуватися й інша інформація, наприклад, визначення стилів.
Тэги 10-й й 12-й рядків обмежують тіло документа. На відміну від даного коду - це звичайно сама об’ємна частина документа. Це те, що бачить відвідувач у своєму браузері.
Заради 11-й рядка весь документ і затівався. Тэг <CENTER> вирівнює текст по центрі вікна браузера, а тэг <H1> виводить текст великим напівжирним шрифтом.
От основні властивості тэгов:
- Регістр символів у тэгах значення не має. Відкриваючі тэги в даному прикладі показані заголовними, а закриваючі - прописними винятково для наочності
- Початкові тэги виду <…> задають властивість документу, кінцеві </…> - скасовують. Якщо текст розташувати після тэга </center>, він не буде центрований. Не всі тэги мають кінцевий.
- Відступ в 5-8 й 11 рядках зроблений для наочності. Кількість пробілів і символів кінця рядка між тэгами не має значення. Розташовані тексті, вони виводяться на екран як один пробіл.
- Невідомі тэги і їхньої властивості браузери ігнорують.
Отже, загальний принцип, зрозумілий. Вивчайте тэги й застосовуйте. А ваші результати ви побачите у своїх браузерах…
До друку!
Автор: webmascon Сайт: http://www.webmascon.com/
ВОНИ ВАМ УЖЕ ЗУСТРІЧАЛИСЯ: посилання, що говорять “версія для печатки” або щось подібне. Щораз, клацаючи по цих посиланнях, ви одержуєте особливий документ, що містить усе ту ж інформацію, але з іншим розташуванням елементів й, можливо, іншою розміткою.
Це значить, що хтось вручну або автоматично за допомогою скрипта взяв вихідний документ й, знявши з його все зайве, створив його копію, більше зручну для печатки. Може бути подібною роботою доводилося займатися й вам.
Рішення - таблиці стилів для печатки
Однієї із чудових особливостей CSS є можливості створення таблиць стилів, орієнтованих на різноманітні пристрої висновку. Ми звикли створювати таблиці стилів для відображення сторінок на екрані, але ми ще не звикли думати про інші засоби відображення. І, як підтверджують посилання “версія для печатки”, про печатці документа ми думаємо лише як про подання документа в іншому виді.
Але тепер нам нема чого боятися, тепер для створення друкованої версії документа нам потрібний усього лише добре структурований документ і таблиця стилів для печатки!
Сьогодні ви можете взяти кожної (X)HTML-документ і підготувати його до печатки за допомогою стильовою таблиць, не доторкаючись до розмітки. І от у минуле йдуть проблеми зі створенням і синхронізацією двох версій документа - однієї для екрана, іншої - для печатки. І що саме приємне: зробити це простіше простого. (Більше докладну інформацію про основні принципи створення media-орієнтованих таблиць стилів можна прочитати в статті “Print Different” на сайті meyerweb.com.).
Давайте подивимося, як сайт “A List Apart” знайшов таблицю стилів для печатки, уміло обійшовши помилки броузеров, і зрештою поліпшив зовнішній вигляд роздруківки сторінки.
Кондиционеры и вентиляция кондиционеры panasonic. Лучшие решения.