Ruslana - Інформатика, Ruslana

Першим кроком на шляху створення гарного шаблону є розробка дизайн-макета. У ньому продумуються графічні елементи, їх розташування, гама кольорів та підбираються шрифти. Для редагування графіки використовуються популярні графічні пакети Adobe Photoshop, Coreldraw та інші. Наступний етап у підготовці шаблону сайту – верстка html-коду, відповідного до розробленого дизайну-макета. Важливо відзначити, що шаблон сайту – це не одна тільки головна сторінка, а й внутрішні. Це можуть бути розділи фото, різні опитування, форми для реєстрації й багато чого, багато чого іншого. Тому для зручності верстальники користуються спеціальними html редакторами, що дозволяють візуалізувати і прискорити роботу над кодом. Готові шаблони в основному призначені для користувачів, або взагалі не знайомих з html, або лише поверхово обізнаних. Тому розроблювачі зв'язують із шаблоном систему керування сайтом – вона дозволяє працювати з веб-сайтом без глибоких пізнань в html [13, 14].

Прийшов час поговорити також і про те, де і як застосовуються шаблони сайтів. Як ми з Вами вже з'ясували найбільш корисними вони виявляються для малобюджетных проектів. Це коли грошей немає, а гарний сайт хочеться. Але не варто вважати шаблонні сайти заздалегідь низькоякісними. Адже в каталогах готових шаблонів більшості студій веб-дизайну Ви скоріше за все знайдете навіть шаблони " премиум-класу" – дорогі, "глянцеві", здатні задовольнити найвибагливіші запити клієнтів. У тих же таки каталогах Ви також знайдете перелік різних тематик: наука й освіта, бізнес, медицина, мистецтво, розваги, автомобілі тощо. От і виходить, що шаблони сайтів можна використовувати всюди. У мережі знайдеться шаблон практично будь-якої тематики. А якщо таких все-таки немає, то шаблони саме тим і гарні, що практично повністю настроюються: Ви можете змінювати зображення, кольори, шрифти, розміщувати меню і модулі на власний розсуд.

Створимо свою першу сторінку.

Пуск – програми – стандартні – блокнот

   

Далі набираємо в блокноті текст, зберігаємо документ під своїм прізвищем, потім набираємо «.html».

Вигляд документа після збереження може бути таким (в залежності від програм на вашому комп’ютері.

Створювати сайти у веб-редакторі за допомогою майстра. Застосовувати шаблони для створення веб-сайтів і розробляти власні шаблони. Формувати веб-сторінки та їхні елементи у візуальному режимі.

 

6.2. Вступ до HTML Елементи HTML

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

HTML (англ. HyperText Markup Language – Мова розмітки гіпертекстових документів) – основана на SGML текстова мова розмітки, призначена для маркування документів, що містять текст, зображення, гіперпосилання тощо. HTML-документи лежать в основі Веб, і відображаються із допомогою веб-браузерів. Разом із видимою інформацією, HTML-документи містять додаткові метадані, такі як, наприклад, мова тексту, автор документа, стислий підсумок. Мова розмітки розроблялась консорціумом W3C, остання версія – 4. 01, очікується, що HTML буде замінена розширюваною мовою розмітки гіпертексту (XHTML) [14].

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

Головною особливістю HTML є спроможність використовувати гіперзв'язки (links), завдяки яким можливі посилання та переходи з поточної веб-сторінки на інші документи, як локальні (документи поточного сервера), так і такі, що знаходяться на серверах в найвіддаленіших регіонах земної кулі. Мова HTML, також дозволяє вставляти в документи зображення, звук, відео та ін. Перегляд HTML-документу здійснюється за допомогою веб-оглядача (таких програм як Internet Explorer, Netscape та ін.) [14].

Всі HTML документи мають починатися з оголошення типу документу: <!DOCTYPE html>.

Сам HTML документ починається тегом <html> і закінчується тегом </html>.

<!DOCTYPE html>
<html>
<body>
<h1>Мій перший заголовок</h1>
<p>Мій перший параграф. </p>
</body>
</html>

HTML заголовки визначаються за допомогою тегів від <h1> до <h6>.

Тегом <h1> визначаються найбільш важливі заголовки. Тегом <h6> визначаються найменш важливі заголовки:

         <h1>Це заголовок 1</h1>
<h2>Це заголовок 2</h2>
<h3>Це заголовок 3</h3>

HTML параграфи визначаються за допомогою тега <p>:

         <p>Це параграф. </p>
<p>Це інший параграф. </p>

HTML посилання визначаються за допомогою тега <a>: