Нові шаблони

Шаблон

Шаблон

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

Другий шаблон присвячено тим, хто полюбляє дивитися в небо — на білі смуги, що залишають літаки. Якщо вам сподобався той чи інший шаблон, клацніть на малюнку, а потім знайдіть у вузькій шпальті шаблона, що відкриється, кнопочку «Копіюйте мій CSS»

Урок 5. HTML чи XHTML?

Про синтаксис CSS я вже писала в попередніх уроках. Про загальну теорію HTML також можна дізнатися з минулих уроків. Сьогодні ми розберемо синтаксис HTML та спосіб, яким я пропоную писати коди. Бо HTML-коди на відміну від CSS можна записувати по різному.

Браузер розпізнає, як і що йому вам показувати за допомогою тегів — маленьких клаптиків HTML-коду, які розміщуються в «гострих дужках»:

«<b>» — відкриваючий тег;

«</b>» — закриваючий тег (як бачите, до закриваючого було додано паличку під назвою слеш).

Я розумію, що всім це вже відомо, але нехай буде для зовсім вже піонерів в інтернеті 🙂

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

Але ж з кожного правила існують виглючення. В HTML зустрічаються теги, які відразу є як відкриваючими, так і закриваючими. Наприклад, тег переносу рядка: <br />

При вивченні найпростіших операцій HTML нам прийде на допомогу графічний текстовий редактор Блокса. Привчайтеся після набору кожної нової замітки клацати на кнопочку HTML-редактора і дивитися, які коди ви автоматично використали при наборі текстів.

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

От хто знає, як буде коректно набирати коди? ВИКОРИСТОВУВАТИ ВЕЛИКІ ЛІТЕРИ чи звичайні малі? Роздивляючися побудову сайтів ми зустрічаємо обидва стилі написання, і обидва їх розпізнає більшість браузерів. Але правильніше було б набирати коди маленькими літерами.

Якщо HTML дозволяє нам писати і так, і так, то його розширена версія — XHTML, має чітку стандартизованість. Тобто, щоб далеко не заглиблюватися, для нас XHTML це той же самий HTML але з чіткими правилами написання коду, які слід дотримуватися. В роботі я пропоную використовувати саме XHTML. Для того, щоб була чітко зрозуміла різниця в синтаксисі, наведу приклад коду, який не відповідає стандартам XHTML:

<br>

<p> Один абзац
<p> Інший

<select>
<option selected>Опція 1
<option>Опція 2
</select>

<b><i>Помилка вкладення</b></i>


І коду, який відповідає стандартам XHTML:

<br />

<p> Один абзац </p>
<p> Інший </p>

<select>
<option selected=»selected»>Опція 1</option>
<option>Опція 2</option>
</select>

<b><i>Немає помилки вкладення</i></b>


Основні правила  XHTML:

  • Всі елементи мають бути закритими. Теги, які не мають закриваючої пари, пишуться разом із слешем: <br />
  • Назви тегів та атрибутів пишемо маленькими літерами
  • Правильно вкладаємо та закриваємо теги
  • Правильно використовуємо лапки
  • Правильно використовуємо посилання-мнемоніки (це такі кодові посилання для спецсимволів, пізніше я дам окремий урок на цю тему)
  • Напочатку документа вказуємо: <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> Це допоможе скористатися валідатором XTML (програмою, яка перевіряє код на правильність та сумісність з браузерами). Знайти потрібний валідатор можна тут: validator.w3.org

Домашнє завдання:

1. Передивляємося свої нові замітки за допомогою кнопочки HTML графічного редактора, таким чином звикаючи до синтаксису HTML;

2. Заходимо на сайт валідатора і перевіряємо будь-які інтернет-проекти на валідність. Якщо виявляються помилки, намагаємося розібратися, в чому вони полягають. Насправді це дуже весело і повчально — знаходити помилки в коді дорогих проектів 🙂 .

В знак пам’яті

Мій сьогоднішній CSS — сумний. Місяць тому від раку померла Michelle Goodrich, авторка блога MandarinDesign.com. Вона вела чудовий проект, деякі її ідеї щодо CSS дизайну ви також бачили, ось вони:

Робимо банер

Велика перша літера

До Мішель завжди можна було звернутися за допомогою. Коли я тільки починала вивчати CSS я декілька разів писала до неї і вона завжди відповідала, пояснюючи той чи інший код. Про те, що щось сталося з її проектом, я дізналася на минулому тижні — просто не змогла зайти на сторінку. Коли і на цьому тижні браузер мені сказав, що такої сторінки як MandarinDesign.com не існує, мені спало на думку пошукати в інтернеті, що ж сталося. Сказати, що правда мене приголомшила, це нічого не сказати. Для мене MandarinDesign був не просто корисним ресурсом, він асоціювався з особистістю, що його створила.

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

Хочу вибачитися, що сьогодні замість того, щоб поділитися черговим уроком, примусила трохи посумувати.

Урок 4. Прикріплюємо файл CSS

Пропоную знову зайти на мій сайт і подивитися, як він зараз виглядає.

Шрифти та кольорова гама прописані в прикріпленому документі CSS. Це означає, що всі наступні заголовки та посилання будуть такого ж самого, однакового вигляду, без додаткових змін у файлі HTML.

Давайте повністю розберемо існуючий наразі код НTML, починаючи з найпершого рядка:

— HTML можна кодувати по різному, і браузери також можуть по різному читати HTML (якщо ви читали мої попередні уроки, то маєте пам’ятати про кросбраузерність). Іноді мені здається, що HTML вигадали китайці — мова одна, а діалектів багато.

Ще у ті часи, коли Internet тільки народився, веб-програмісти почали намагатися розробити загальний  HTML-стандарт на World Wide Web Consortium (W3C), що було засновано Tim Berners-Lee (так-так, саме тим хлопцем, який і винайшов HTML, а у його фамілії я такі вбачаю китайські корені).
Якщо ви кодуєте в HTML і при цьому намагаєтеся притримуватись стандартів W3C, ви розробляєте веб-сайти, які будуть читатися всіма браузерами.  Рядки на малюнку відображають, якою саме версією HTML ви користувалися в розробці, притримуючись загальноприйнятих стандартів.

Що-що?? На якому діалекті ви це сказали? Мандаринському? Ах, на діалекті HTML 4.0 Transitional… Тепер мені все зрозуміло.

— тег, за допомогою якого браузер розуміє, що ви «розмовляєте» з ним мовою HTML. Таким тегом має починатися кожний HTML-документ.

— наступний необхідний нам тег це HEAD — він містить в собі різноманітну службову інформацію документа. В нашому випадку службовою інформацією слугує посилання на таблицю CSS, яку має використовувати документ.

Отож, для того, щоб прикріпити файл CSS до інтернет-сторінки, створіть пустий файл з розширенням .css і назвіть його test (при цьому можна використати звичайний Блокнот).  Завантажте новостворений файлик на сервер, до тієї ж самої папки, де знаходиться головна сторінка, тобто до папки ~/htdocs. Пропишіть до HEAD основної HTML-сторінки рядок, наданий на малюнку вище. Якщо назва  вашого CSS-файла відмінна від test.css, введіть власну потрібну. Якщо CSS-файл зберігається не в тій самій папці, що й сторінка, до якої він прикріплюється, вам буде потрібно вказати шлях до неї.

Давайте перевіримо, чи все у нас вийшло правильно. Відкрийте файл test.css в онлайновому редакторі, який надає хостинг, і задайте будь який колір до body документа:

body { background: yellow; }

Домашнє завдання:

Прикріплюємо файл CSS до HTML-сторінки, граємося із зовнішнім виглядом за допомогою тега body.

Новий шаблон

Шаблон

Н овий шаблон в стилі гранж. Всім прихильникам індастріала присвячується 🙂

Якщо вам сподобався цей шаблон, клацніть на малюнку, а потім знайдіть у вузькій шпальті шаблона, що відкриється, кнопочку «Копіюйте мій CSS»

Нові шаблони

Шаблон

Шаблон

Д ва нових шаблона. Морський з’явився мабуть тому, що в цю пору року дуже хочеться на море — під час його розробки мені здавалося, що я дивлюся не на монітор, а в акваріум.

«Автомобільний» шаблон має порадувати любителів швидкості та автобанів. Якщо вам сподобався той чи інший шаблон, клацніть на малюнку, а потім знайдіть у вузькій шпальті шаблона, що відкриється, кнопочку «Копіюйте мій CSS»

Урок 3. Хостимося :)

Сподіваюся, ви вже зареєстрували домен? Якщо ні, подивіться у попередньому уроці, де і як це можна зробити. А якщо так, то вже час йти отримувати хостинг. Безкоштовний хостинг, як я казала раніше, можна отримати на ho.ua. Прокрутіть головну сторінку сайта донизу і заповніть форму. До графи «Желаемый логин:» введіть назву вашого домена без розширення pp.ua, а до графи «Ваши существующие домены:» повну назву отриманого домена (з розширенням).


Подальші умови реєстрації будуть вислані вам на пошту. За цими умовами заявку на хостинг треба підтвердити, виславши смс з кодом заявки на вказаний у листі номер телефона. Не переймайтеся — смс-повідомлення буде коштувати як звичайне смс (тобто більше 50 копійок у більшості випадків ви на це діло не витратите). Почекавши 10-15 хвилин клацаємо на посилання у листі.

Вводимо код, отримуємо наступний лист, який бажано зберегти (я так взагалі для таких «потрібних» листів зробила в пошті окрему папку). В цьому листі знаходяться всі ваші реквізити від щойноствореного сайту.
ho.ua попередив нас, що ще години три сайт може працювати не так вже і коректно. Що ж, не будемо лізти поперед батька в пекло і просто пороздивляємося, що до чого. Знаходимо у листі посилання на сторінку управління хостингом, клікаємо, перед нами опиниться мінімалістичне меню з інформацією про сайт і кнопочками внизу. Клацаємо на кнопочку «Управление файлами» і потрапляємо до кореневого каталога вашого сайта. З цим каталогом надалі ми будемо працювати дуже і дуже багато 🙂

1. Відкрийте папку htdocs, знайдіть файл test.html. На даний момент це — головна сторінка вашого сайта.
2. Клацніть на кнопочку «Редактировать файл» зправа від файла test.html. Відкриється віконце, у якому вже буде набрано такий простенький код:

Тепер ви можете набрати в браузері адресу свого сайта. Порівняйте те, що побачите, з кодом у віконечку редагування.  Ви можете змінити записи поміж тегами TITLE і  H1 на які забажаєте. Подивіться, як після збереження редагувань зміниться ваш сайт. Це дуже цікаво — створювати щось нове! Тепер ми майже готові запускати наш творчий майданчик з кодування. Залишилося лише дізнатися, що таке

ІНТЕРНЕТ ПРОТОКОЛИ

Інтернет-протоколами називають правила взаємодії комп’ютерів між собою в мережі інтернет. Протоколи необхідні, бо всі ми маємо різні комп’ютери і різні операційні системи. Без правил користування інтернет перетворився б на суцільну нісенітницю, чи на електронну вавилонську башту. Завдяки протоколам (загальним правилам) всі комп’ютери в мережі можуть розуміти один одного.

Протокол TCP/IP — найголовніший протокол. Вірніше, це цілих два протоколи:

TCP — транспортний протокол. Він забезпечує безпомилкову передачу даних у мережі.

IP — адресний протокол. Всі ми знаємо, що коли підключаємося до мережі, як користувачі ми отримуємо власний IP. Але також власний ІР має кожен сайт. Вірніше, насправді назва url-адреси — це і є ІР, яку вже для нас комп’ютер декодує у ту чи іншу словесну назву: www.blox.ua, www.bigmir.net…
Так вже вийшло, що комп’ютер краще розуміє цифри, а ми — літери. Важливо знати, що за кожною назвою сайта стоїть його ІР.

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

Протокол HTTP — його ми бачимо найчастіше, а тобто перед кожною назвою того чи іншого сайту. Це протокол обміну HTML-сторінками. За його допомогою ми власне, дивимося і читаємо все, що розміщено в інтернеті.

Є багато інших протоколів. але нам вони зараз не знадобляться. Головне знати про основні.

Домашнє завдання: Хостимося. Якщо ви бажаєте вчитися далі і мати можливість задавати питання протягом навчального курса, відпишіться в коментарях про власний хостинг, на якому будете експериментувати.

Урок 2 — реєструємо домен

Ми вже трохи дізналися, з чого будується адреса того чи іншого сайта. Але для того, щоб розробити власний, окремий ресурс, потрібно знати трохи більше. От саме для того, щоб оминути величезну кількість «електронних грабель» я і пишу докладно про те, яким чином працює Інтернет.
Знаєте приказку: «Зі своїм уставом до чужого монастиря не лізуть»? Роки три тому мене попрохали допомогти розмістити сайт в інтернеті. Тобто зареєструвати хостинг і правильно повикладати на ньому інтернет-сторінки. Я погодилася, бо не бачила в цьому нічого складного — мене щиро запевнили, що сайт повністю готовий і просто чекає свого часу на локальному комп’ютері. Яким було моє здивування, коли на диску з майбутнім сайтом я знайшла лише… підборку вордовських документів зі статтями. На той момент доменне ім’я мною вже було зареєстроване, хостинг — дешевий, але все ж таки куплено.
Подзвонивши власнику «сайта» я зрозуміла, що мої жахливі підозри виправдилися: ці документи і являли собою сайт. Мало того, у документах були використані нестандартні шрифти і таке форматування, яке просто неможливо коректно втілити в простому інтернет-проекті. Хіба що у флеші спрограмувати. І якщо просто по товариськи я була готова розмістити сторінки в інтернеті належним чином, то конструювати проект «з нуля» у мої плани не входило. В ітозі мені почали нарікати, що що ж то за Інтернет такий, що в ньому все так складно і довго робиться. А якщо за це складно і довго збирається братися професіонал, то це ще й дорого. Належна ситуація для пригадування вищенаведеної приказки. Інтернет було розроблено не нами, тому треба миритися з тим, що швидко гарний ресурс з нуля не побудуєш. А ще з тим, що для того, щоб реєструвати власні проекти, потрібно мати мінімальну базу інтернетних знань.
Тому давайте трохи поговоримо про…

архітектуру мережі Інтернет.


В якомусь умовному місці, на території інтернет-провайдера розташовано декілька головних комп’ютерів — серверів. Сервери можуть бути різними: сервери баз даних, веб-сервери, файлові сервери, поштові сервери, прінт-сервери і т. д. Коли ми говоримо, що підключаємося до Інтернету, ми маємо на увазі підключення до величезної мережі комп’ютерів-серверів, на яких зберігаються всі інтернет-дані.

Звісно, такі комп’ютери мають бути достатньо потужними і постійно працювати. Бо якщо скажімо, ви обрали хостинг у компанії «Воля-Кабель» (отримали місце під свій сайт на їхньому сервері, тобто комп’ютері) і цей сервер вийде з ладу… ваш сайт стає недоступним для вас і всіх інших користувачів мережі Інтернет. Проте у достатньо великих компаній обов’язково мають бути допоміжні ресурси з копіями всіх сайтів саме для такого випадку.

Знаючи структуру, ми починаємо розуміти, що мається на увазі під виразом «надійний хостинг», «безперебойний хостинг». Поняття Інтернету не абстрактне — за кожним фрагментом Всесвітньої Мережі стоять не віртуальні, а фізичні предмети, які можуть зламатися, або їх можуть зламати — якщо ви збираєтеся купувати хостинг, а не обирати безкоштовний, обов’язково поцікавтеся потужностями компанії, системами безпеки і надійністю операційних систем, які використовують сервери.

А тепер можна переходити до практичних дій 🙂
Припустимо, ви так само як і я (дякуючи username), обрали безкоштовний хостинг від ho.ua. Ми вже знаємо, що компанія ho.ua  може надати місце для інтернет-сторінки, але для цього ви спочатку маєте зареєструвати домен — свою адресу в інтернеті. Такої послуги ho.ua не надає.

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

1. Чим назва коротше, тим краще.
2. Назва має гарно запам’ятовуватися, легко вимовлятися.
3. Назва має передавати суть майбутнього ресурса.
4. І ніяких цифр і власних імен (якщо ви не збираєтеся вести проект, присвячений даному імені).

abcweb.ho.ua — гарна назва;
internetgrammarabc.ho.ua — погана назва;
intrntgrammatk2009.ho.ua — дуууже погана назва.

Ви придумали коротку, влучну назву. Давайте перевіримо, а чи не зайнято цей домен вже кимось іншим, спритнішим? Переходимо на dig.ua, вводимо щойно вигаданий домен. Нема такого? Вітаю! Можете забрати собі 🙂


Реєструємо обране доменне ім’я тут, в безкоштовній зоні pp.ua.
Майте на увазі, що при реєстрації вам потрібно буде вказати мобільний номер телефона.

Домашнє завдання: придумати і зареєструвати власне доменне ім’я, якщо звичайно, у вас його ще нема.

Нові шаблони

Шаблон

Шаблон

Щ е два шаблони, не навантажені великою кількістю малюнків. Перший шаблон виготовлено для тих, хто полюбляє останні дні літа.

Другий шаблон з веселими олівцями — справжня записна книжка для творчої людини. Якщо вам сподобався той чи інший шаблон, клацніть на малюнку, а потім знайдіть у вузькій шпальті шаблона, що відкриється, кнопочку «Копіюйте мій CSS»

Повний курс Css & HTML. Початок

Серію повних уроків з CSS та HTML (XHTML) я хочу розпочати з так званої абетки інтернету. Ніби підготовчі курси до конструювання складних проектів. Бо серед нас є такі блогери, для яких зробити простенький сайтик не проблема, а є й такі, хто не дуже розуміє, в чому різниця між хостингом та доменом. От з цих понять я і розпочну.
Кожному сайтові, щоб оселитися в інтернеті, потрібні дві речі: власне ім’я і місце, де будуть зберігатися всі його сторінки та файли.
Ім’я кожного сайта називається доменним ім’ям. У мене слово «домен» асоціюється зі словом «дім», або «домашньою адресою». Інтернетні адреси чимось схожі на реальні адреси. 
Давайте розглянемо ближче адресу мого нового сайта:

http//www.abcweb.ho.ua, де:
ua — країна, до якої належить домен
ho — домен компаніі яка дала можливість
отримати мій власний, підпорядкований їй домен abcweb;
www — назва мережі, у якій розташовано сайт;
http// — протокол, який відповідає за спосіб взаємодії з мережею.

Давайте розберемо ці поняття конкретніше.

Крім доменів верхнього рівня що відповідають за розташування сайта у тій чи іншій країні, існує багато інших, міжнародних. Ми кожного разу натрапляємо на них, подорожуючи мережею:
com — домен, у якому будуть жити сайти, що будь-яким чином пов’язані з комерцією (міжнародного значення);
edu — домен, у якому оселяться сайти учбових закладів (міжнародного значення);
info — домен, у якому оселяться інформаційні сайти (міжнародного значення).
Якщо брати до уваги географію, такий домен можна назвати асоциацією, представництво якої розташоване у різних країнах світу.

Достатньо часто ми бачимо такий варіант домена верхнього рівня:
com.ua — в цьому випадку комерційний домен верхнього рівня com відноситься не до всього світу, а тільки до України. Звісно, зареєструвати представництво лише в Україні — дешевше, аніж по всьому світу.
Давайте уявимо, що існують такі райони, як:
edu.ua, info.ua, com.ua і т. д. — стандартні райони для кожної країни. У кожному з районів розташовано багато-багато будинків (звичайних доменів), або вуличок з будинками (субдоменами чи доменами третього рівня). У кожному «будинку» (під кожним доменом) мешкає той чи інший сайт. Аж тут блукаючи районами інтернету ми наштовхуємося на таку вулицю:
Blox.ua чи таку:
Ho.ua.
Це може означати тільки одне — хтось замовив собі «вулицю» з власною назвою і ця «вулиця» не належить жодному з «районів».
По-перше, ця процедура буде коштувати замовнику набагато більше за «вулицю» у конкретному «районі».
А по-друге, щоб зробити таке, ти маєш бути справжнім громадянином країни, в якій збираєшся будувати свою власну «вулицю». Тобто, українська компанія не зможе відкрити собі доменне ім’я «myhome.ru», тільки — «myhome.ua»
Звісно, «вулиці» з власними ім’ями набагато менше відомі за стандартні «райони». Тому іноді виникає можливість відбудувати власний будиночок (сайт, блог) на такій «вулиці» безкоштовно. 
abcweb — «будиночок» (домен) саме з такої вулиці. Його повна адреса: abcweb.ho.ua

Але ж у нас попереду назви є ще www — від скороченого World Wide Web. Це любі мої, вже не частина адреси вашої сторінки, а ознака світу, в якому знаходиться ця сторінка. Світу зі своїми умовами існування і власним середовищем. 
Бо якщо ваша сторінка розташована не в мережі World Wide Web, а тільки в локальній мережі компанії, замість назви мережі www у вас буде вказано назву локальної мережі.

Далі буде 🙂