Створити персональну сторінку. Приклад створення html-сторінки в блокноті. Власний ресурс: навіщо він

21.06.2020 Огляди

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

Опис html тегів із прикладу

1. - ці теги повинні бути присутніми на кожній веб-сторінці обов'язково. Вони повідомляють браузерам та пошуковим машинам, що це html-сторінка.

Будь-яка html сторінка має таку структуру:

... Заголовні теги ... ... Тіло сторінки ...

2. - між цими тегами міститься весь видимий контент сторінки.

4. - між цими тегами прописується заголовок сторінки, яке відображається у верхньому браузері. До речі, коли Ви щось шукайте в пошукових системах, то перше, що відображається, це якраз назва сторінки. Тег часто скорочено називають "тайтлом". Раджу ознайомитись зі статтею: як скласти тег </p> <p>Тепер перейдемо до тегів, що знаходяться в тілі <a href="https://remzhuk.ru/uk/kuda-vstavit-kod-stranicy-kak-dobavit-svoi-html-kod-kod-v-vide-teksta/">html сторінки</a>(всередині <body>і</body> ).</p> <p>5. <center></center>- ці теги вирівнюють усе, що знаходиться всередині них по центру. У разі центром буде - центр екрана. У майбутньому рекомендується відмовитись від використання цих тегів.</p> <p>6. <h1></h1>- це один із класу тегів заголовних тегів <h1>..<h6>, зазвичай, у нього містять назву сторінки. Наприклад, у цій сторінці заголовний тег "Приклад <a href="https://remzhuk.ru/uk/html-formy-sozdanie-i-rabota-s-formami-v-html-input-vybor-iz-spiska/">створення html</a>сторінки".</p>Примітка <p>ці теги мають велику вагу в ранжируванні сайту, тому ними необхідно користуватися акуратно і розумно.</p> <p>При складанні html-коду потрібно дотримуватися простого правила: спочатку має йти заголовний тег <h1>, а далі можуть уже йти <h2> , <h3>і т.д. Головне, щоб не було спершу <h2>, потім <h1>, потім <h3>і т.п. Має бути строга ієрархія. Заголовків <h2> , <h3>і т.п. може бути багато.</p> <p>7. <br/>- це одиночний тег, який не вимагає тега, що закриває. Він здійснює перехід на наступний рядок. У моєму прикладі написано два одиночні теги поспіль, щоб двічі перейти на наступний рядок.</p> <p>8. <span><img src='https://i0.wp.com/URL_ИЗОБРАЖЕНИЯ' loading=lazy loading=lazy> </span>- Це одиночний тег, який виводить зображення.</p> <ul><li>src - обов'язковий параметр, в якому вказується адреса зображення (замість URL_ЗОБРАЖЕННЯ необхідно прописати адресу, де зберігається Ваше зображення). <br><u>Примітка</u>: <ul><li>Якщо зображення знаходиться в одній папці з Вашою html-сторінкою, достатньо написати назву зображення, інакше потрібно прописувати або абсолютний або відносний URL ;</li> <li>Не забудьте вказати розширення зображення. Наприклад, .jpg, .gif, .jpeg.</li> </ul></li> <li>alt або title – у ці параметри можна записати опис до Вашого зображення. Коли Ви наведете мишкою на зображення, з'явиться цей опис. Ці параметри важливі для просування сайту, особливо в пошуку картинок. Якщо зображення не вдалося завантажити, буде виведено цей текст, що також є плюсом.</li> </ul><p>9. <font></font>- ці теги створені зміни шрифту, тла, розміру тощо. Коротше кажучи, все, що пов'язане з форматуванням тексту, можна налаштувати в одному тегу. Це теги мають досить багато атрибутів, про які я розповім в окремому уроці.</p> <p>- аналогічний тег.</p> <p>Існує також властивість CSS font , в якому можна задавати всі ці параметри.</p> <p>10. - Виділити жирним. Все, що укладено між <b>і</b>буде виділено жирним. Наприклад, якщо Ви напишите його на самому початку контенту, а закриєте в самому кінці, весь текст на сторінці буде виділений жирним. Це досить часто зустрічається тег, аналогом якого є <strong></strong> .</p> <p>Пошукові системи звертають увагу на цей тег у плані посилення впливу ключових слів. Але потрібно бути обережним, оскільки виділяти щоразу жирним ключові слова буде сприйнято як спам.</p> <p>Персональна сторінка - Ваша особиста сторінка, сторінка компанії/організації/дослідження, де зібрані всі ваші анкети. Зручна для централізованого збирання інформації.</p> <p>Створити персональну сторінку можна через підвал сайту http://anketolog.ru/, розділ Персональні сторінки: http://anketolog.ru/personalpage.html, натиснувши кнопку .</p> <p>Або через ваш Особистий кабінет - блок Персональні сторінки - <b>Створити персональну сторінку</b>.</p> <p>На Безкоштовному тарифі доступні 3 персональні сторінки, на тарифі Базовий – 5, на тарифі Профі – нескінченна кількість персональних сторінок.</p> <h3>Налаштування змісту сторінки</h3> <p>Увага! Обов'язкові для заповнення поля виділені зірочкою.</p> <p>В полі <i>Назва</i>введіть найменування вашої компанії/організації/дослідження, якщо це ваша сторінка, то персональні дані або інформацію, яку вважаєте необхідною.</p> <p>Натисніть на посилання <i>Прикріпити анкети</i>, зі списку у вікні виберіть ваші анкети, які хочете прикріпити до персональної сторінки. Кількість прикріплених анкет не обмежена. Ви можете видаляти або переміщувати анкети за допомогою натискання на відповідні значки "Хрестик" (для видалення) та "Стрілочка" (для переміщення).</p> <p>В полі <i>Опис</i>введіть потрібну інформацію, яку хочете донести до респондентів.</p> <p><img src='https://i2.wp.com/help.anketolog.ru/img/help/attachments/2359331/2687078.png' width="100%" loading=lazy loading=lazy></p> <h3><span>Налаштування зовнішнього вигляду</span></h3> <p>Можна змінити стандартний вигляд персональної сторінки, додавши логотип, фонове зображення для шапки сторінки, колір фону.</p> <ul><li>Логотип <br></li> </ul><p>Зверніть увагу на такі умови, додавши логотип. Ви можете використовувати зображення формату .jpg, .jpeg, .png. Розмір картинок буде виставлений автоматично. Рекомендований розмір – 205*165 пікселів.</p> <p>Щоб прикріпити/видалити логотип, натисніть кнопку <b>Прикріпити/Видалити</b>під ним.</p> <ul><li><span>Фонове зображення у шапці</span></li> </ul><p>Зверніть увагу на такі умови, додавши фонове зображення. Ви можете використовувати зображення формату <span>.jpg, .jpeg, .png. Рекомендований розмір – 1140*360 пікселів.</p> <ul><li><span>Колір фону</span></li> </ul><p>Колір фону можна вибрати з панелі представлених кольорів (натисніть квадрат у рядку Колір фону). Також можна ввести у поле html-код кольору.</p> <ul><li><span>Логотип Анкетолога</span></li> </ul><p>Щоб усунути наш логотип, встановіть галочку у відповідному пункті.</p> <p><br><img src='https://i0.wp.com/help.anketolog.ru/img/help/attachments/2359331/2687079.png' width="100%" loading=lazy loading=lazy><br></p> <p>Докладно розглядаються аспекти використання Інтернету як посередника між вами та роботодавцями, а також всі основні етапи працевлаштування, найважливіші статті трудового законодавства. Багато уваги приділено питанням підготовки до співбесіди, тонкощам ділового спілкування, описано способи тестування претендентів на вакантні посади, наведено інформацію про грантові фонди, що фінансують продовження наукових досліджень та навчання.</p> <h3>* * *</h3> <p>Наведений ознайомлювальний фрагмент книги <b>Як зробити кар'єру за допомогою Інтернету (В. Г. Соломенчук, 2002)</b>наданий нашим книжковим партнером-компанією ЛітРес.</p> <p>Як створити персональну сторінку</p> <p>Сімейство Яндекс</p> <p>Сьогодні пошукова машина Яндекс не просто пошукова система, а ціла родина зручних та безкоштовних сервісів для користувачів. Якщо заглянути на першу сторінку Яндекса (http://www.yandex.ru), то ви виявите, окрім вже традиційного каталогу, посилання на безкоштовну електронну пошту, служби Яндекса та багато іншого.</p> <p>Практично все, що пропонує відвідувачам Яндекс, можна використовувати, так чи інакше, для пошуку роботи, зваблення роботодавця, створення свого іміджу, підвищення своїх шансів на кар'єрне зростання… Нижче буде згадано багато сервісів Яндекса.</p> <p>Ви можете запитати, чому так багато потрібно говорити про Яндекс - адже є інші сервери, які надають подібний сервіс. На це можна відповісти досить просто – команді Яндекса вдалося створити найбільш вдалий та виважений проект у Рунеті. До того ж їм вдалося уникнути рекламних перегинів, якими, наприклад, рясніє проект Атрус і багато інших дрібніших.</p> <p>Крім того, всі сервіси Яндекса інтегровані з найпотужнішою пошуковою системою у Росії. Навіть можна сказати, що в Рунеті Яндекс виконує роль пошукової системи AltaVista, без якої немислимий англомовний Інтернет. Тому інформація з вашої персональної сторінки дуже швидко починає потрапляти до списку результатів пошуку за ключовими словами, а її веб-адреса до бази даних пошукової системи. Тобто, можна сказати, що ваша інформація виявляється на людному перехресті Інтернету, де має максимальні можливості потрапити на очі тому, хто вам дуже потрібен!</p> <blockquote class="book-cite"> <p><b>Примітка</b></p> <p>Зауважте, що для пошукової системи Яндекс використовується кілька варіантів назви: Яндекс, Yandex, Япс1ех.</p> </blockquote> <p>Як введення згадаємо про можливості, якими можна скористатися при пошуку інформації в Інтернеті, щоб надалі знати, що може стати в нагоді для реклами власного сайту:</p> <br><p><i>Для тих, хто шукає: Пошук по регіонах, Сімейний Яndex, Швидкий пошук, Аскетичний пошук.</i></p> <br><p>Дуже зручний тематичний каталог Яндекс, який має такі основні розділи:</p> <p>Культура та мистецтво</p> <p>Суспільство та політика</p> <p>Розваги та відпочинок</p> <p>Дім та сім'я</p> <p>Наука та освіта</p> <p>Структури економіки</p> <p>Комп'ютери та зв'язок</p> <p>Виробництво та постачання</p> <p>Організація бізнесу</p> <p>Товари та послуги</p> <p>Довідники</p> <p>З аналізом стану Рунету можна познайомитись у розділах:</p> <br><p><i>Всім про Рунет: Казки, Статистика запитів (НІНІ), Статистика запитів (політика), Числа, Прямий ефір.</i></p> <br><p>Для власників сайтів пропонуються такі можливості:</p> <br><p><i>Додати сайт, Форми для пошуку, Яndex.Site БЕЗКОШТОВНО, Індекс цитування.</i></p> <br><p>Ряд проектів Яндекса згруповано в <b>СЛУЖБИ ЯНДЕКСУ</b></p> <p>Пошта: безкоштовна, зручна та безпечна.</p> <p>Новини: свіжі новини від провідних агенцій.</p> <p>Народ: необмежений простір для твого сайту.</p> <p>Товари: найкращі пропозиції в інтернет-магазинах.</p> <p>Листівки: свято, яке завжди з тобою.</p> <p>Фото: твої плівки в електронному вигляді.</p> <p>Dz online: журнал для справжніх комп'ютерників.</p> <p>Підписка: інформація на тему з доставкою додому.</p> <p>Гуру: інтелектуальна система вибору товарів.</p> <p>Ви не повірите, але всі служби Яндекса можна успішно застосовувати для підвищення популярності вашого сайту або вашого імені. Все залежить від вашої фантазії та вміння використовувати пропоновані Яндексом сервіси.</p> <p>Для тих, хто претендує на командні (керівні) посади або має види на кар'єру, наприклад, аналітика, будуть цікаві <b>НОВИНИ ЯНДЕКСУ, Курс долара (ЦП), Індекс РТС.</b></p> <p>Для мешканців Москви та Санкт-Петербурга корисний прогноз погоди, який стане в нагоді перед походом на співбесіду. Наприклад, ви можете згадати, що потрібно взяти з собою парасольку, щоб не виглядати мокрою куркою.</p> <p>Звичайно, крім Яндекса існують і інші, не менш популярні місця в Росії та інших країнах. Наприклад, на сервері Chat.RU дуже багато цікавих сайтів, але пошукові роботи не роблять по ньому тотальний пошук. І якщо ви самі не вживете дій щодо популяризації свого сайту, то він так і залишиться в невідомості. Інші російські публічні сервери перебувають у ще більшому забутті – адже часто про їхнє існування більшість користувачів навіть не підозрюють.</p> <p>Публічні сервери за межами Росії також можна використовуватиме розміщення персональної сторінки з резюме. Але ефект від цього буде не дуже великий, причому не через якісь технічні причини, а діятимуть нав'язані стереотипи мислення. Наприклад, багатьом російських роботодавців англомовні сервери це щось зарубіжне і, швидше за все, щось еротичне.</p> <p>Якщо ваша мета – робота, наприклад, у США, то це певною мірою виправдано. Тільки вам доведеться врахувати, що подібних сторінок на найпопулярніших серверах десятки мільйонів. Тому можете повірити, ваша сторінка просто загубиться в нетрях найрізноманітніших сайтів. Так що краще все ж таки використовувати російські сервери, які не так перевантажені, та й роботодавець буде мати більш ясне уявлення про ваше походження.</p> <p>Яндекс – Narod.Ru</p> <p>Давайте познайомимося з <b>Народом</b>за адресою http://narod.yandex.ru або http://www.narod.ru (рис. 3.2).</p> <p>Мал. 3.2. Сервер Narod.Ru</p> <br><p>Перше, що впадає у вічі, це гасло: <b>"Побудуйте свій сайт за 60 секунд!".</b>В принципі це можливо, але зазвичай потрібно трохи більше часу.</p> <p>Взагалі, перш ніж розпочати якесь будівництво, треба познайомитися з тим, що є на сервері. Для першого знайомства вам пропонують наступні посилання.</p> <p>Вперше з народом? - Навіщо це треба, Що тут дають, Пробний тур, Зразки сторінок.</p> <p>Познайомся з народом – Каталог, Чати, Форуми, Найкращі сайти, Сімейний фільтр.</p> <p>Спільноти народу – Що таке спільноти, Оглядовий тур, Реєстрація.</p> <p>Не полінуйтеся, познайомтеся з <b>Народом,</b>адже ви теж увімкнетеся в цю спільноту. Тим більше, що вам пропонують знайомство з творчістю не всього <b>Народу,</b>а лише з низкою сайтів, відібраних або за принципом популярності, або з використанням генератора випадкових чисел.</p> <p>Після первинного огляду поля вашої майбутньої битви загляньте у тематичний каталог <b>Народу:</b></p> <p>Автомобілі та мотоцикли (2227)</p> <p>Бізнес та фінанси (7117)</p> <p>Будинок та сім'я (2398)</p> <p>Здоров'я (1433)</p> <p>Знайомства (11513)</p> <p>Комп'ютери, Інтернет та технології (6564)</p> <p>Краса та мода (351)</p> <p>Культура, релігія, філософія (2142)</p> <p>Література та мистецтво (4594)</p> <p>Музика та кіно (6584)</p> <p>Наука та освіта (2085)</p> <p>Політика та право (1165)</p> <p>Робота та кар'єра (2696)</p> <p>Вільний час, розваги та ігри (9778)</p> <p>Спорт (2626)</p> <p>Техніка та виробництво (1040)</p> <p>Туризм (2771)</p> <p>У дужках вказано кількість сайтів у цій категорії на початок 2001 року.</p> <p>Тому що ми зайшли на <b>Народ</b>для цілком конкретної мети – створити сторінку з резюме, то треба ретельно переглянути зміст розділу <b>Робота та кар'єра.</b>Можливо, якщо вам щастить, ви навіть знайдете те, що так довго шукали. Зверніть увагу, що треба переглянути всі підрозділи, а не обмежитися лише, наприклад, підрозділом <b>Вакансії</b>Можна навіть пошукати за ключовими словами, використовуючи пошукову систему <b>Народу – Шукати за Narod.RU.</b>Змив таку рекомендацію в тому, що користувачі не завжди правильно реєструють свої сайти в каталозі <b>Народу.</b></p> <p>Ще можна порадити прочитати новий випуск <b>Народної газети</b>(http://gazeta.narod.ru/), щоб познайомитися з новинами народного життя, оглядами, конкурсами та опитуваннями. Корисний та цікавий розділ, присвячений огляду «народних сайтів». Крім того, можна отримати важливу інформацію, ознайомившись з оголошеннями та листами читачів.</p> <p>Будівництво сайту</p> <p>Сервер Narod.Ru пропонує досить великий простір для вашого сайту (є певні обмеження). Щоправда, вам навряд чи знадобиться понад 200 Кбайт для вашої персональної сторінки з резюме. Можливо, знадобиться навіть менше місця, особливо якщо ви будете використовувати готові варіанти дизайну, які пропонуються на сервері. Але завжди приємно знати, що у вас в запасі майже необмежені можливості.</p> <p>Крім дискового простору на сервері, члену спільноти <b>Народу</b>надаються у користування лічильники для підрахунку числа відвідувачів. Маючи лічильники на кожній сторінці сайту, можна отримувати статистичні відомості, які будуть корисними при ухваленні рішення про коригування вмісту сайту.</p> <p>Якщо ви не боїтеся критики, то використовуйте сторінку з гостьовою книгою, в якій ваші гості записуватимуть свої скарги та пропозиції. Щоправда, вам треба буде щодня контролювати її зміст, щоб не допускати хуліганських вчинків із боку несвідомої частини відвідувачів.</p> <p>Для тих, хто має необмежений доступ до Інтернету, можна порекомендувати створити персональний форум і чат для своїх друзів. Тільки не забувайте бувати в ньому самому, бо він захиріє і "помре".</p> <p>Оскільки об'єм книги обмежений, ми зупинимося на створенні персональної сторінки на основі готових шаблонів. Зауважимо, що не треба «шурхати» від запропонованих рішень – всі вони професійно зроблені і залишають багато простору для творчості. Тим більше, підходячи з практичної точки зору, це заощадить ваш дорогоцінний час. Зауважимо, що за допомогою шаблону <b>Зробіть свій</b>Ви можете створити досить оригінальний дизайн сторінки.</p> <p>Реєстрація</p> <p>Процес реєстрації дуже простий, за єдиним винятком – важко вибрати ім'я для сторінки. Складність тут у тому, що на початок 2001 року зареєстровано понад 200 тисяч сайтів. А це означає, що вибрати коротке та гучне ім'я вже не вдасться. Звичайно, можна спробувати, але зверніть увагу, що в більшості словників кількість слів у два-три рази менша.</p> <p>Але все ж таки для першого кроку, який потрібно зробити, можна вибрати будь-яке слово для ініціалізації процесу реєстрації на сервері. Для цього введіть у поле введення ваше улюблене слово або словосполучення (тільки латинські символи, цифри та ряд знаків) і клацніть на кнопці <b>Зайняти.</b></p> <p>Після цього ви потрапите на сторінку реєстрації (рис. 3.3), де потрібно буде запровадити ваші персональні дані. Зверніть увагу, що для можливості реєстрації на сервері вашому браузеру потрібно дозволити виконувати сценарії JavaScript і приймати файли cookie.</p> <p>Мал. 3.3. Сторінка реєстрації</p> <br><p>Перш ніж заповнювати всі поля реєстраційної форми, треба перевірити: чи можливо використовувати введене вами слово (логін) на сервері (не всі символи дозволені в імені), чи вільна обрана адреса. Зауважимо, що багато гучних імен зарезервовані для суспільних потреб.</p> <p>Для перевірки вашого варіанта клацніть на гіперпосиланні <b>Перевірити.</b>Найімовірніше, якщо вибрано коротке та звучне слово, ви отримаєте повідомлення про помилку:</p> <br><p><i>Введений Вами логін вже зайнятий!</i></p> <p><i>Використання цього логіну заборонено!</i></p> <br><p>Не хвилюйтеся і підберіть якусь іншу комбінацію слів та цифр або дуже довгу назву. Якщо ваше ім'я буде схвалено, то відповідь буде такою:</p> <br><p><i>Це ім'я можна використовувати.</i></p> <br> <p>У полях <b>Пароль</b>і <b>Повторіть пароль</b>введіть ланцюжок символів, яких має бути щонайменше 4 (оптимальний варіант пароля – 8-10 символів). Для пароля завжди використовуйте латинський алфавіт, цифри та знаки, що друкуються. Застосування кирилиці майже обов'язково призведе до втрати доступу до вашої сторінки (через технічні проблеми з перекодуванням у вас на комп'ютері та сервері).</p> <p>Небажано для пароля використовувати якісь поширені слова чи імена, наприклад pass, login, name, sex тощо. буд. Для спрощення запам'ятовування пароля можна скористатися російськими словами, набраними при розкладці клавіатури. Але, зауважте, не треба використовувати російські імена в латинському виконанні, наприклад, Діма (Lbvf), Іван (Bdfy), і особливо ваше власне. Краще придумати комбінацію коротких слів із цифрами. Детальну інформацію про паролі та безпеку в Інтернеті ви знайдете в наступному розділі.</p> <p>Найбільш суттєвий етап під час заповнення реєстраційної форми – це вказівка ​​ваших персональних даних:</p> <p>Прізвище*;</p> <p>По-батькові;</p> <p>Дата народження;</p> <p>Країна проживання;</p> <p>Місто (село);</p> <p>Адреса E-Mail* (використовується для пересилання пароля, якщо ви забудете його).</p> <p>Поля, позначені зірочками, є обов'язковими для заповнення, а решта, за бажання, можна залишити порожніми.</p> <p>При зазначенні персональної інформації слід враховувати такі моменти. Хоча від вас вимагають правди і лише правди, ніхто не повинен вказувати справжню поштову адресу та прізвище. У більшості випадків, коли створюється, наприклад, розважальний сайт, краще вказати псевдонім, а не своє прізвище. Власну поштову адресу конкретизуйте лише до міста проживання, а номер квартири, і тим більше домашній телефон, вказувати не бажано.</p> <blockquote class="book-cite"> <p><b>Примітка</b></p> <p>На сервері Narod.Ru поки що не вимагають повних особистих відомостей, але все може змінитися. Можливо, ви скористаєтеся іншим публічним сервером для розміщення сайту, де у вас цілком серйозно вимагатимуть навіть номер паспорта.</p> </blockquote> <p>Зверніть увагу, якщо ваша мета - створення персональної сторінки з резюме, то при реєстрації треба вказати справжні персональні дані. Але все ж таки, навіть у цьому випадку, при вказівці поштової адреси рекомендується обмежитися назвою вашого міста та мікрорайону.</p> <p>Електронна поштова адреса (E-mail) також входить до обов'язкових відомостей. Якщо у вас його немає, то введіть адресу ще не створеної поштової скриньки на сервері Яндекс – логін_сайту@уапс1ех.ш. Так можна діяти тому, що реєструючись в будь-якій службі Яндекса, ви автоматично резервуєте за собою те саме ім'я (логін) та у всіх інших. Але можна повернутися на головну сторінку Яндекса та зареєструвати поштову скриньку з іншим ім'ям або за бажання отримати поштову скриньку на сервері Mail.RU чи Rambler, а також на багатьох інших серверах.</p> <p>Заповнивши всі поля реєстраційної форми, перевірте ще раз правильність усієї зазначеної вами інформації. Якщо все правильно, то клацніть на кнопці <b>Зареєструвати.</b></p> <p>Майстерня</p> <p>Успішна реєстрація на сервері дозволить вам увійти до вашої персональної майстерні, де можна скористатися тим чи іншим інструментом для створення та підтримки сайту.</p> <p>Фактично, всі пропоновані послуги діляться на дві основні групи: <b>Створення сайту</b>і <b>Редагування та управління.</b>Нас зараз цікавить створення персональної сторінки з резюме, тому подивіться, які можливості ви маєте (кожний пункт – це окрема веб-сторінка):</p> <br><p><b>Головна сторінка</b></p> <br><p><b>Про мене</b></p> <p>Фотоальбом</p> <br> <p>Для фанатів та шанувальників</p> <br><p><b>Оголошення</b></p> <p>Романтика</p> <p>Оголошення або запрошення</p> <br><p><b>Бізнес</b></p> <p>Ділова сторінка</p> <p>Прайс лист</p> <br><p><b>Думки</b></p> <p>Гостьова книга</p> <br><p><b>Спілкування</b></p> <p>Персональний чат</p> <p>Персональний форум</p> <p>Спільноти</p> <br><p><b>Додаткова графіка</b></p> <p>Функціональний кліпарт</p> <p>Новорічний кліпарт</p> <p>Логотипи та банери Narod.ru</p> <br><p><b>Пошук</b></p> <p>Форми пошуку</p> <p>Індексування у пошукових системах</p> <br><p>Залежно від сфери вашої професійної діяльності вам будуть корисні не лише пункти <b>Головна сторінка</b>і <b>Резюме,</b>та й інші можливості. Наприклад, про хобі зазвичай не пишуть у резюме, але сторінки <b>Фотоальбом</b>або <b>Улюблені посилання</b>можуть ненав'язливо розповісти про ваші захоплення. Тобто все залежить лише від вашої фантазії та того, що ви готові розповісти про себе.</p> <p>Часто буває, що людина займається на роботі дуже нудними проблемами, але за порогом установи чи заводу вона може займатися будівництвом дельтапланів, спортивними танцями, радіоспортом... У ряді випадків саме позаслужбова сфера інтересів є вирішальним аргументом на користь того чи іншого кандидата на престижну вакансію.</p> <p>Головна сторінка</p> <p>Будь-який сайт починається з головної сторінки, яка має ім'я index.htm або index.html. Цю веб-сторінку завжди шукають браузери за промовчанням, якщо не вказано конкретне ім'я файлу. Самих веб-сторінок може бути скільки завгодно: одна, дві, три, десять, сто… В принципі, можна обмежитися однією сторінкою з текстом резюме, але краще, тим більше, що Яндекс вам у цьому допоможе зробити кілька сторінок: головну – вашу « візитну картку», сторінку з резюме і, скажімо, сторінку з фотографіями вашого домашнього улюбленця – кота чи собаки.</p> <p>Для початку будівництва сайту на сторінці <b>Майстерня - Проект: ваше_імя.narod.ru</b>клацніть мишею на гіперпосиланні <b>Створення сайту/Головна сторінка</b>(Рис. 3.4).</p> <p>Мал. 3.4. Майстерня Народу</p> <br><p>На наступній сторінці <b>Майстерня/Вибір варіанта шаблону «Головна сторінка сайту» – Проект: ваше_імя.narod.ru</b>(рис. 3.5) виберіть один із шаблонів, який найбільш повно відповідає вашим вимогам (зазначимо, що назви шаблонів не надто вдалі):</p> <p>Апельсиновий</p> <p>Бузковий</p> <p>Шкільний</p> <p>Пустельний</p> <p>Дослідницький</p> <p>Конструктивний</p> <p>Простий</p> <p>Кам'яний</p> <p>Зробіть свій</p> <p>Мал. 3.5. Шаблони для головної сторінки сайту</p> <br><p>Виберемо, наприклад, шаблон <b>Простий,</b>який досить вдало підходить для наших цілей – уявити себе роботодавцю (рис. 3.6). Його досить часто використовують для сайтів з резюме, тому що відвідувачеві не треба довго шукати навігаційні елементи – кнопки із назвами інших розділів сайту. Але ви можете вибрати на свій смак будь-який інший шаблон. Зауважимо, що надалі можна замінити шаблон, тому що коригування дизайну сторінок, створених за їх допомогою, дуже проста і не вимагає повної обробки того, що ви створили.</p> <p>Мал. 3.6. Шаблон <b>Простий</b>для головної сторінки</p> <br><p>Першим пунктом у процесі створення сторінки вам пропонують вибрати колір фону, тобто той основний колір (колір паперу) сторінки, на якому ви писатимете. Для цього проведіть вказівником миші прямокутником з палітрою кольорів. Клацніть лівою кнопкою миші на бажаному вами кольорі – буде вашим вибором (квадратик праворуч прийме цей колір).</p> <p>Найбільш суттєвий з погляду досягнення вашої мети – пункт <b>Про що сайт.</b>Отут треба серйозно подумати, як написати. Дурне чи не культурне назва привабить лише любителів «полунички». Неписьменна пропозиція створить про вас не надто гарну думку. Тому, не знайшовши цікавої чи оригінальної назви, обмежтеся або – <b>Персональний сайт Івана Івановича,</b>або чимось нейтральним: <b>Резюме, Шукаю роботу</b>і т.д.</p> <p>Назва вашої сторінки буде виконана як заголовок. Колір, розмір і стиль літер можна вибрати в полях, що знаходяться нижче. Не рекомендується вибирати занадто великий або дрібний шрифт. Текст повинен читатись на вибраному вами фоні. Якщо у вас немає улюблених сполучення кольорів, то загляньте в розділ 19 "Психологічні тести" (спочатку прочитайте розділ "Веб-дизайн", а потім вже зверніться до самих тестів).</p> <p>Під заголовком розміщується текст, який має пояснити гостю, куди він потрапив. Можна помістити, наприклад, маленький шматочок вашого резюме (не анкетні дані). Непогано сприймається кілька фраз про причини створення сайту. Взагалі-то, варіантів безліч, тому все залежить тільки від вашої особистості і вашого вміння стисло викласти суть того, що ви хочете сказати.</p> <p>Параметри шрифту встановлюються як і для заголовка. Але розмір кегля має бути меншим у 3–4 рази. По-перше, це досить великий текст, який незручно читатиме за одним словом у рядку, а по-друге – ви виділяєте другорядну частину інформації на вашій сторінці. Можливо, відвідувач прочитає заголовок, після чого зверне увагу на гіперпосилання, які ведуть інші ваші сторінки. Дуже зайнятим людям, до яких належать роботодавці, зазвичай ніколи досконально вивчати все, що розташоване на персональній сторінці можливого кандидата на вакантне місце. Часто достатньо глянути на заголовок і пройти по одному посиланню, щоб вирішити: <i>не потрібен…</i>Ось якщо вам вдасться вашого гостя зацікавити чимось, то, можливо, він навіть захоче прочитати те, що ви написали, або в нашому випадку дасть вказівку відділу кадрів докладніше про вас дізнатися. Отже, все те, що ви розмістите на сайті, може відіграти позитивну або негативну роль.</p> <p>Наступний етап – створення посилань на інші веб-сторінки. Це можуть бути ваші сторінки на <b>Народ,</b>ви ще не створили, але запланували це зробити. Можливо, ви маєте сайт на інших серверах, який може вас рекомендувати з потрібного боку. Іноді можна зробити посилання на сайти своїх рекомендацій чи фірми, де ви працюєте чи працювали. Щоправда, потрібно дуже ретельно зважити всі фактори, щоб не потрапити в халепу. Єдине, що треба помітити, не слід робити посилання з вашої першої сторінки на загальновідомі сервери, і особливо на каталоги та пошукові системи. Якщо ви все-таки бажаєте створити свій каталог посилань, то розмістіть його на одній із внутрішніх сторінок свого сайту, зробивши на нього недвозначне посилання. Корисно використовувати сервіс <b>Закладки</b>(див. рис. 3.10) на вашій веб-сторінці <b>Мої улюблені посилання (links.html)</b></p> <p>При вказівці посилання на внутрішні сторінки вашого сайту в адресному полі вказується не повна URL-адреса потрібної сторінки, а лише ім'я файлу з розширенням (якщо ви не створюєте каталоги). Вам може допомогти випадаюче меню, в якому присутні назви стандартних на <b>Народі</b>або ваші існуючі сторінки.</p> <p>Можна створити майже необмежену кількість посилань, хоча в шаблоні за промовчанням пропонуються поля для п'яти. Але завжди слід бути помірним, тим більше під час використання шаблону. Достатньо двох або трьох посилань у заголовку, щоб ваша головна сторінка була простою та інформативною для роботодавця. Додаткові посилання краще зробити в тексті або наприкінці сторінки.</p> <p>Наступний важливий етап – це вибір <b>Колір посилання, Колір відвідуваного посилання</b>і <b>Колір активного заслання.</b>Намагайтеся підібрати ті кольори, які не пропадуть на кольорі фону. Можна навіть вибрати один колір для всіх посилань, тому що завдання вашого сайту залучити покупця вашої робочої сили, а не зручна навігація сайтом або Інтернетом!</p> <p>Прапорець <b>Показувати заголовок «Головна сторінка»</b>можна встановити, тому що в нашому випадку це не мінус дизайну. Тим більше, у будь-який час можна змінити дизайн сторінки, користуючись функціями редагування.</p> <p>Щоб підтвердити, що веб-форма заповнена, клацніть на кнопці <b>Готово.</b></p> <p>За бажанням завжди існує можливість повернутися назад на всіх етапах роботи з шаблоном, скориставшись кнопкою <b>Змінити дизайн.</b>Це одна з приємних властивостей шаблонів, які пропонуються на сервері <b>Народ.</b></p> <p> <b>Резюме</b></p> <p>Створивши головну сторінку, слід розпочати будівництво веб-сторінки з резюме. Звичайно, можна зробити і навпаки, але «обличчя» вашого сайту задасть певний стиль решті сторінок. Насамперед це стосується кольорової гами та стилю тексту. Буває, що, розробивши велику сторінку, вебмастер переробляє весь проект. А оскільки більшість росіян стикаються з проблемою оплати за Інтернет, то пропонований у книги план будівництва найбільш розумний. Тільки треба помітити, що передбачається наявність у вас підготовлених текстів і файлів для розміщення на веб-сторінках, які вам не важко зробити, прочитавши цей розділ до кінця (про те, як написати резюме, ви дізнаєтесь у розділі 10).</p> <p>Вибір шаблону для резюме відбувається на сторінці <b>Майстерня / Вибір варіанта шаблону «Резюме»,</b>на яку краще пройти з головної сторінки <b>Майстерня,</b>скориставшись посиланням <b>Резюме</b>в розділі <b>Про мене.</b>Вам пропонуються такі варіанти шаблонів:</p> <p>Класичне</p> <p>Оригінальне</p> <p>Фанерне</p> <p>Вишукане</p> <p>Суворе</p> <p>Сучасне</p> <p>Яскраве, як ви</p> <p>Наприклад виберемо шаблон <b>Класичний</b>(Рис. 3.7), але якщо він вам не сподобається, то встановіть прапорець біля іншого шаблону. Тільки не робіть помилку, що найчастіше зустрічається - підбір шаблону за його назвою. Придивіться до іконок із образами пропонованих шаблонів. Можливо, ви дізнаєтеся, що вам сподобався до цього дизайн, який зустрівся, коли ви переглядали сторінки з чужими резюме. Якщо ви все ж вагаєтеся, не можете зробити свій вибір, то згадайте - дизайн шаблону завжди легко змінити. Проблеми можуть виникнути лише тоді, коли ви відкоригували свою веб-сторінку в HTML-редакторі та завантажили її на сервер.</p> <p>Мал. 3.7. Шаблон <b>Класичний</b>для резюме</p> <br><p>Так чи інакше, але ви маєте зробити свій вибір. Для повідомлення про цей сервер клацніть мишею на кнопці <b>Далі.</b></p> <p>Наступний етап, зауважимо, що він найбільш відповідальний, полягає у заповненні веб-форми вашими особистими відомостями. Будь-яка помилка у введених вами даних може призвести до негативних результатів – ваше резюме спрацює проти вас. Тому рекомендується заздалегідь підготувати текст для всіх полів у текстовому процесорі MS Word. Нижче перелічені поля <b>Особисті дані,</b>які ви повинні заповнити, а також подано коментарі.</p> <p>Прізвище.</p> <p>По-батькові.</p> <p>Рік народження – вкажіть чотири цифри, а не дві.</p> <p>Сімейне становище – повідомите коротко, але не змушуйте читача ламати голову над хитрими скороченнями у вигляді однієї або двох літер.</p> <p>Адреса – не бажано вказувати номер будинку та квартири, тому що ваша сторінка доступна для всіх.</p> <p>Телефон – номер телефону вказуйте лише у тому випадку, коли немає іншого способу зв'язатися з вами.</p> <p>E-mail – найкраще вказати адресу вашої поштової скриньки на сервері провайдера, а не на публічному сервері.</p> <p>Ваше фото – треба вказати повний шлях до файлу на вашому вінчестері, але зручніше це зробити, клацнувши мишею на кнопці <b>Огляд.</b></p> <p>Ціль – дуже чітко сформулюйте, яку роботу ви хочете знайти, тому що у роботодавця немає часу для з'ясування того, що ви хочете.</p> <p>Досвід роботи – вказуйте лише те, що може підтвердити ваші претензії на зайняття того робочого місця, на яке ви претендуєте.</p> <p>Освіта – відомості у цьому полі мають підтверджувати вашу кваліфікацію.</p> <p>Додаткові відомості – тут вкажіть найцікавішу для роботодавця інформацію про вас, наприклад наявність прав водія.</p> <p>Шаблон <b>Класичний</b>не надає додаткових можливостей щодо оформлення вашого резюме, тому можна клацнути на кнопці <b>Готово,</b>щоб вашу сторінку з резюме було передано на сервер.</p> <p>Інші шаблони пропонують додаткові інструменти для прикрашання резюме, наприклад, вибір кольору та стилю шрифту, показувати чи ні стандартний заголовок. Тому уважно перегляньте веб-форму, щоб не пропустити суттєві деталі, тому що на виправлення завжди потрібно багато часу.</p> <blockquote class="book-cite"> <p><b>Увага!</b></p> <p>Не забудьте видалити своє резюме, коли отримаєте постійну роботу. Інакше ваш новий начальник може подумати, що ви не збираєтеся довго працювати в нього, а це може шкідливо позначитися на вашій кар'єрі.</p> </blockquote> <p> <b>Фотоальбом</b></p> <p>У попередніх розділах було розглянуто створення обов'язкових сторінок, необхідних вашої мети – пошуку роботи. Але, як ви в подальших розділах дізнаєтеся, треба створити собі певний імідж, який допоможе вам при співбесіді та й при відборі резюме свідчить на вашу користь. Найкраще для цього підходить сторінка, яка розповідає про ваше цікаве хобі. Наприклад, заняття раціоспортом різко підвищує ваші шанси бути прийнятим на роботу як радіоінженер або судновий радист. Любителя автомотоспорту із задоволенням приймуть на роботу фірми, що займаються продажем автомобілів. Але, наприклад, про колекціонера пивних етикеток можуть подумати, що він любить випити, хоч, буває і так – він спиртного в рот не бере.</p> <p>З іншого боку, у перелічених вище випадках, можна отримати прямо протилежний результат – можуть взяти на роботу любителя пивних етикеток, а спортсмена одразу відбракують. Зауважте, розповідати про своє хобі в резюме треба дуже обережно та виважено. Крім того, для створення гарної сторінки з розповіддю, наприклад, про ваші акваріумні рибки потрібно відмінне володіння веб-дизайном.</p> <p>Найбільш просто вирішується проблема додаткової розповіді про себе при використанні шаблону <b>Фотоальбом</b>Напевно, у вас досить хороших фотографій, які можна відсканувати і розмістити на сайті. До того ж сканування фотографій перестало бути екзотичною справою. Навіть більше можна скористатися ще одним сервісом Яндекса (рис. 3.8).</p> <p>Мал. 3.8. Сервіс Яндекса <b>Фото: твої плівки в електронному вигляді</b></p> <br><blockquote class="book-cite"> <p><b>Примітка</b></p> <p>Поки сервіс Яндекса Фотки: твої плівки в електронному вигляді доступні лише гостям та жителям Москви.</p> </blockquote> <p>Для створення фотоальбому на головній сторінці <b>Майстерні</b>знайдемо посилання <b>Фотоальбом</b>і клацнемо на ній мишею. На новій сторінці <b>Майстерня / Вибір варіанта шаблону «Фотоальбом»</b>можна вибрати такі шаблони:</p> <p>Зелений, по одній на сторінці, з гортанням</p> <p>Синій, по одній на сторінці, з гортанням</p> <p>Зелений, з переглядом</p> <p>Синій, з переглядом</p> <p>По три до ряду</p> <p>За однією оригінального розміру</p> <p>Перш ніж вибрати шаблон, потрібно підготувати файли з фотографіями, які будуть розміщені на сервері. Цій процедурі треба приділити якнайбільше уваги, тому що вам доведеться вирішити дві складні проблеми: вибір дійсно корисних для вашої характеристики фотографій і підготовку графічних файлів.</p> <p>Перша проблема вирішується досить просто: перегляньте свої фотоальбоми та відберіть потрібні фотографії. Обов'язково порадьтеся з родичами чи друзями – погляд з боку дозволить видалити з добірки зайві знімки. Можливий варіант, коли, наприклад, ваша дружина (завжди треба просити дозвіл у того, хто сфотографований) не захоче, щоб її розглядали в Інтернеті. Також не рекомендується розміщувати свої дитячі фотографії, а тим більше грудного віку – роботодавця не цікавить, яким вундеркіндом ви були в дитинстві! Найкраще, коли фотографії не старіші за 2–3 роки. Адже ваша удача може відвернутися від вас, коли у відділі кадрів запитають про те, навіщо ви помістили старі фотографії, або, не дай боже, фотографію свого друга чи кіноактора, видавши їх за себе. Зауважимо, що така практика дуже поширена в Інтернеті, але абсолютно не підходить для сайту з резюме.</p> <p>Фотографії, розміщені на веб-сторінках, зберігаються на сервері у вигляді графічних файлів. На жаль, ті файли, які ви отримуєте після сканування, найчастіше не підходять для Інтернету за двома параметрами – форматом та розміром.</p> <p>По-перше, графічні файли мають бути у форматі JPG (JPEG), який добре підходить для художніх фотографій, хоча якість зображення в ньому гірша, ніж в інших популярних форматах. По-друге, краще оптимізувати зображення для роздільної здатності 800x640, що скоротить розмір файлу, та й браузеру буде легше з ним працювати (може просто не вистачити оперативної пам'яті для розшифровки графічного файлу). По-третє, при створенні файлу використовуйте максимальне стиснення інформації, що зменшує його розмір (правда за рахунок якості). Якщо ви зробите все, як треба, то розмір ваших графічних файлів буде в межах від 15 до 35 Кбайт. Зауважимо, що менше – то краще.</p> <p>Звичайно, якщо вам хочеться похвалитися чудовою фотографією, але при цьому розмір графічного файлу більше 100 Кбайт, потрібно зробити для неї окрему сторінку. Посилання на цю сторінку найкраще виконати у вигляді іконки та вказати поряд, якого розміру є графічний файл. Тільки в цьому випадку ви можете розраховувати на позитивний ефект від розміщення такої фотографії на вашому сайті.</p> <blockquote class="book-cite"> <p><b>Примітка</b></p> <p>Всі рекомендації дано не для професійного вебмайстра, який може використовувати свої відпрацьовані методи, а на користувача, який має дуже обмежені технічні можливості з обробки відсканованого зображення.</p> </blockquote> <p>Для продовження розповіді будемо вважати, що деякий набір графічних файлів вже знаходиться на вашому вінчестері. А якщо так, то можна приступити до будівництва <b>Фотоальбоми.</b>Для цього виберіть один із шаблонів, і клацніть мишею на кнопці <b>Далі.</b></p> <blockquote class="book-cite"> <p><b>Примітка</b></p> <p>Тип шаблону не впливає на час завантаження із сервера готової сторінки <b>Фотоальбоми.</b></p> </blockquote> <p>На сторінці <b>Майстерня / Редагування фотоальбому</b>(photoalbum.html) вам в першу чергу треба вказати, які фотографії будуть у фотоальбомі. Зауважимо, що авторам шаблону вдалося знайти досить вдале вирішення проблеми впровадження у веб-сторінку різношерстних малюнків та фотографій, але воно, як і слід очікувати, накладає певні обмеження, які треба враховувати (можливо, будуть розроблені й інші шаблони).</p> <p>При використанні пропонованих шаблонів слід пам'ятати, що браузеру для відображення сторінки, створеної за допомогою цих шаблонів, необхідно завантажити з сервера всі графічні файли, які ви вказали при її створенні. До завершення завантаження файлів на моніторі буде показана лише не надто гарна заставка з текстовою інформацією. Але після закінчення завантаження фотографії миттєво перегортаються. З такої особливості запропонованих шаблонів випливає наступна рекомендація – загальний обсяг всіх графічних файлів для однієї сторінки фотоальбому має перевищувати 100–150 Кбайт. В іншому випадку, швидше за все, вашому гостю не вистачить терпіння дочекатися закінчення завантаження. Отже, можна зробити зразковий розрахунок максимальної кількості фотографій, які можна використовувати для фотоальбому – це 5-7 штук. Зауважимо, що і веб-майстри рідко пропонують серії більш ніж 10 фотографій. Якщо ж ви хочете розмістити більше фотографій, то зробіть кілька <b>Фотоальбомів,</b>вказавши на них окремі посилання. Згрупуйте всі фотографії за темами, вважаючи, що кожен створюваний <b>Фотоальбом</b>(одна веб-сторінка, створена за допомогою шаблону) – це один аркуш вашого великого <b>Фотоальбоми.</b></p> <p>Як бачите, підготовчі роботи під час створення <b>Фотоальбома</b>займають чимало часу. Зате збудувати <b>Фотоальбом</b>за допомогою шаблону надзвичайно просто та швидко. Для кожного графічного файлу треба у розділі <b>Нова фотографія</b>(рис. 3.9) вказати у полі <b>Завантажити</b>повний шлях до цього файлу на вашому вінчестері. Але, звичайно, краще скористатися для цього кнопкою <b>Огляд.</b>Якщо ж ви раніше завантажували графічні файли на сервер, їх повний список перебуває у випадаючому меню <b>Вже на сайті.</b></p> <p>Мал. 3.9. Шаблон <b>Фотоальбом</b></p> <br><p>Не забудьте забезпечити кожну фотографію коротким підписом, який повинен бути інформативним і незабутнім. Щоправда, в жодному разі не можна допускати вульгарності та грубості. Адже ваша мета – привернути увагу роботодавця, а не створення собі слави великого фотографа.</p> <p>Повторіть наведені вище операції для кожної фотографії.</p> <p>Після закінчення завантаження всіх файлів не поспішайте клацати на кнопці <b>Готово,</b>тому що у вас є ще можливості для прикрашання вашого <b>Фотоальбоми.</b>Щоправда, вони більше відносяться до технічних питань, тобто вам не вдасться використовувати їх для надання оригінальності своєму <b>Фотоальбому,</b>хоча можна спробувати.</p> <p>Для початку зверніть увагу на прапорець <b>Показувати заголовок «Мій фотоальбом»,</b>який знаходиться внизу шаблон. За умовчанням він встановлений, але залишити його чи ні, залежить тільки від вас, оскільки такий заголовок сторінки цілком нейтральний.</p> <p>Більше проблем виникає з полями <b>Заголовок</b>і <b>Текст.</b>Використовуйте їх лише в тому випадку, якщо ви бажаєте вказати на сторінці під фотографіями посилання на ресурси Інтернету. Але, зауважте, у цьому випадку сторінка буде перевантажена зайвою інформацією. Швидше за все, тут найбільше підійшло б розміщення посилань на інші <b>Фотоальбоми,</b>але посилання на них все ж таки краще помістити на головну сторінку сайту (згадайте, яку мету ви переслідуєте). Можна порекомендувати використовувати лише поле <b>Заголовок,</b>скажімо, для девізу чи назви циклу фотографій.</p> <p>Коли ви вирішите, що всі роботи з шаблоном ви виконані, клацніть мишею на кнопці <b>Готово.</b></p> <p>На наступній сторінці <b>Вибір рубрики,</b>яка буде вам надіслана з сервера, якщо все зроблено правильно, зверніть увагу на фразу:</p> <br><p><i>Будь ласка, не поміщайте сторінку в каталог, якщо вона знаходиться на стадії розробки або ще не наповнена цікавим змістом.</i></p> <br><p>Якщо <b>Головна сторінка</b>і <b>Резюме</b>можна було одразу зареєструвати в каталозі <b>Народу,</b>тому що їх зміст, сподіваюся, ви заздалегідь багаторазово відредагували, то <b>Фотоальбом</b>треба спочатку погортати самому і виправити можливі помилки. Ймовірно, якась фотографія може виявитися непридатною для даного типу <b>Фотоальбоми.</b>Тому, не знімаючи прапорець <b>Не розміщувати мій сайт у каталозі,</b>клацніть мишею на кнопці <b>Далі.</b></p> <p> <b>Закладки</b></p> <p>Часто, вельми непогано показати майбутньому роботодавцю свою ерудицію та коло інтересів. Звичайно, це не так легко зробити, якщо використати традиційні методи подання інформації. Крім того, для створення такого насиченого сайту потрібно добре володіти веб-програмуванням. Але, на щастя, технології Інтернету надають можливість посилатися на чужі ресурси Всесвітньої мережі для демонстрації ваших інтересів і знання віртуального простору. Це досить поширена практика серед користувачів Інтернету. А вершиною комерційного успіху у застосуванні гіперпосилань вважається каталог Yahoo!</p> <p>Ви також можете створити свій маленький і чудовий каталог, який, якщо ви підійдете виважено до підбору посилань, надасть найсприятливіший вплив на думку роботодавця про вас. Тим більше, що технічно це не дуже складно зробити, а сервер <b>Народу</b>надасть вам для створення персонального каталогу цілий набір шаблонів <b>Улюблені посилання.</b></p> <p>Кінець ознайомлювального фрагмента.</p> <footer>Сайтобудування від А до Я <br />Всі права захищені</footer> </div> </body> </html></p> <p>Скопіюйте цей код у новий текстовий файл та збережіть його на своєму комп'ютері. Задайте для файлу ім'я index.html . Потім відкрийте цей файл у будь-якому браузері та подивіться на результат.</p> <p>Зверніть увагу, що за замовчуванням будь-який веб-сервер намагається видати браузеру саме сторінку під назвою index.html. Тому в 99% випадків вихідний код головної сторінки сайту зберігається у файлі під такою назвою і вважається хорошим тоном.</p> <p>Повну версію цього найпростішого HTML-сайту ви можете завантажити у вигляді <span>архів</span>(10,8 Mb). Після розпакування архіву запускаємо html/index.html.</p> <h4>Ключові етапи створення сайту</h4> <p>Самостійне створення сайту з нуля складається із трьох основних етапів:</p> <ul><li><span>Створення макету сайту</span>. Саме на цьому етапі з'являється чітке візуальне уявлення, як виглядатиме створюваний інтернет-ресурс. Найчастіше використовується Adobe Photoshop або інші растрові редактори.</li> <li>Верстка сайту . На цьому етапі приступають до верстки сайту з макета .psd, мобільної адаптації та тестування на коректне відображення в різних браузерах.</li> <li>Впровадження PHP. На цьому етапі сайт перетворюється зі статичного на динамічний.</li> </ul><p>Давайте розберемося з усіма цими етапами докладніше.</p> <h4>Створення макету сайту</h4> <p>Найчастіше макет ( <span>у цьому випадку під цим словом варто розуміти візуальне оформлення</span>) сайту створюється у програмах, які прийнято називати графічними редакторами. Найбільш популярними є Adobe Photoshop і CorelDRAW. Ми рекомендуємо використовувати саме Photoshop, так як він трохи простіше в освоєнні і при цьому має багаті можливості. Крім того, саме ним користуються усі веб-дизайнери.</p> <p>Створюємо новий документ в Adobe Photoshop. Задаємо йому ім'я - MySite.</p> <p>Вибираємо роздільну здатність 1000 на 1000 пікселів. Воно гарантує коректне відображення будь-якого користувача, розмір по вертикалі надалі можна буде збільшити.</p> <p>Вибираємо роздільну здатність 72 пікселя на дюйм і RGB-колір. Ці установки робимо обов'язково, оскільки вони відповідають за коректне відображення веб-сторінки.</p> <p>Потім встановлюємо колір фону F7F7C5 у шістнадцятковому форматі або вибираємо його за допомогою палітри кольорів.</p> <p>Після цього вибираємо пункт меню « <span>Перегляд» – «Напрямні»</span>і активуємо відображення лінійок та напрямних.</p> <p>У пункті меню « <span>Перегляд » - «Прив'язка до »</span>необхідно перевірити, чи включена прив'язка до напрямних та кордонів документа.</p> <p>За допомогою інструмента « <span>Текст»</span>, вводимо текстову назву майбутнього сайту, слоган під ним, а також контактний номер телефону праворуч вгорі макету.</p> <p>Зліва від логотипу та праворуч від контактного номера телефону проводимо напрямні, які дозволять позначити рамки по ширині сайту.</p> <p>Потім за допомогою інструмента « <span>Форми »</span>створюємо прямокутник із закругленими краями (радіус – 8 точок) і за його допомогою позначаємо місце під зображення, яке розташовуватиметься у шапці сайту.</p> <p>Тепер настав час вставити зображення у шапку сайту.</p> <p>За допомогою інструмента « <span>Текст »</span>, та шрифту Georgia , що входить у стандартний набір операційної системи Windows , створюємо навігаційне меню та заголовок головної сторінки сайту.</p> <p>Потім, використовуючи інструмент « <span>Текст »</span>та шрифт « <span>Arial »</span>додаємо текст головної сторінки. У цьому випадку краще використовувати блоковий текст для подальшої роботи з ним.</p> <p>Для заголовка тексту використовуємо чорний шрифт. Для навігаційного меню – білий.</p> <p>Переміщаючи праву межу основного текстового блоку, вставляємо зображення в текст сторінки ( <span>праворуч від тексту</span>).</p> <p>Використовуючи інструмент « <span>Форми »</span> - « <span>Пряма »</span>проводимо заключну лінію під текстом сторінки.</p> <p>За допомогою інструмента « <span>Текст »</span> (<span>шрифт Arial</span>) розміщуємо копірайт у підвалі сторінки (під лінією).</p> <p>Нарізаємо необхідні для верстки сайту фрагменти зображень за допомогою інструмента « <span>Розкрійка »</span> (<span>ми виділили основну картинку в шапці та картинку в тексті сторінки</span>).</p> <p>В результаті виконаної роботи ми створили повноцінний макет сайту. Якщо ви захочете внести власні зміни до макету сторінки, файл PSD також можна знайти в архіві .</p> <p>Для того щоб зберегти та використовувати результати виконаної роботи у вигляді зображень для подальшої верстки сайту, переходимо в меню « <span>Файл »</span>та вибираємо пункт <span>« <span>Зберегти для Інтернет</span>» </span>. Потім налаштовуємо якість вихідних зображень та зберігаємо їх.</p> <p>У результаті ми отримаємо безліч графічних фрагментів нашого майбутнього шаблону. У папці, де було збережено сам шаблон, з'явиться папка із зображеннями ( <span>images</span>). Відбираємо потрібні та перейменовуємо.</p> <p>Макет сторінки створено, необхідні фрагменти отримані можна переходити до верстки.</p> <h4>Верстка сайту</h4> <p>Перш за все необхідно створити новий текстовий файл і зберегти його під назвою index.html .</p> <p>Перший рядок цього файлу має виглядати так:</p> <p><!DOCTYPE html></p> <p>Вона повідомить браузеру, як обробляти вміст сторінки. Далі слідує набір тегів:</p> <p><html><head>«Голова» документа</head><body>«Тіло» документа</p> <p>Пара тегів <html>…</html>говорить про те, що всередині міститься HTML-код.</p> <p>Усередині <head>…</head>розміщуються теги, які не відображаються у вікні браузера користувача. Як правило, вони починаються зі слова meta, і називаються мета-тегами, а ось тег <title>…відображається як заголовок вікна браузера та аналізується пошуковими системами.

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

) та у вигляді таблиць ( …
).

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

У нашому випадку структура елементів сайту виглядає так:

Основними документами, в яких описуються всі компоненти тієї чи іншої мови, що використовується при створенні сайтів, є специфікації.

Більш докладно вивчити всі основні HTML-теги, їх призначення, використання таблиць стилів (CSS ) можна скориставшись книгами, представленими в розділі « » , крім того, корисні поради щодо організації контенту, верстки, CSS наводяться в .

Створення сайту за допомогою PHP

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

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

Для створення таких сторінок необхідно використовувати мови веб-програмування. Серед них найбільш поширені PHP, Python і Ruby on Rails для Unix-систем, а для Windows характерна розробка динамічного контенту з використанням засобів .NET.

Це стосується серверної частини, а для програмування на клієнтській стороні найчастіше використовується JavaScript.

У підготовленому нами архівіє папка php, у якій збережено файл index.php. Саме він дозволяє реалізувати три сторінки нашого тестового сайту за допомогою PHP.

PHP – це популярна мова веб-програмування, призначена для створення динамічних веб-сторінок. Головна відмінність динамічної веб-сторінки від статичної полягає в тому, що вона формується на сервері, а готовий результат передається в браузер користувача.

В рамках цієї статті ми не заглиблюватимемося в нетрі PHP-програмування і для наочності обмежимося простими вставками фрагментів коду.

Суть цих дій полягає в тому, що ми виносимо шапку та підвал сайту в окремі файли: header.php та footer.php відповідно. А потім на сторінках з текстовим змістом вставляємо їх у макет сайту за допомогою PHP. Зробити це можна за допомогою наведеного нижче коду:

...

Спробуйте запустити у браузері файл php/index.php. Не вийшло? Звичайно, ні. Адже браузер не знає, що йому робити з командами, з яких складається PHP-файл (він же PHP-скрипт).

Для того, щоб будь-який PHP-скрипт виконався успішно, він повинен бути оброблений інтерпретатором мови. Такий інтерпретатор обов'язково присутній на всіх веб-серверах і дозволяє обробляти PHP-код. Але як подивитися, що змінилося в результаті нашої роботи?

Для налагодження веб-додатків та реалізації повноцінного веб-сервера на комп'ютерах, що працюють під керуванням операційної системи Windows, було створено безкоштовний пакет Denwer (для вашої зручності він присутній у підготовленому нами архіві). Він включає веб-сервер Apache, інтерпретатори таких мов веб-програмування як PHP і Perl, базу даних MySQL, а також засоби для роботи з електронною поштою.

Встановлення пакета програм Denwer не потребує серйозних зусиль. Запускаємо інсталяційний файл, виконуємо всі його вимоги. Вибираємо букву віртуального диска для швидкого доступу до веб-сервера, створюємо ярлики. От і все! Denwer готовий до роботи!

Щойно встановлений нами веб-сервер запускається кліком по ярлику Start Denwer ( у вас він може називатися інакше). Після старту веб-сервера скопіюйте в папку home/test1.ru/www/ , розташовану на віртуальному диску, що з'явився в системі (звичайно Z), вміст папки php з архів, з яким ми працюємо, крім файлу index.html.

Після цього наберіть в адресному рядку браузера test1.ru. Знайома картина? А тепер пройдіться за посиланнями, розташованими зверху сторінки. Чи працює? Чудово!

Створювати сайт із нуля чи на конструкторі сайтів?

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

У свою чергу створення інтернет-ресурсу за допомогою того чи іншого конструктора сайтів не вимагатиме від вас наявності спеціальних технічних навичок. Будь-який із перерахованих вище конструкторів дозволяє створити повноцінний сайт буквально за кілька годин. Однак до вибору конструктора потрібно поставитися дуже уважно. Вибір за вами!

У наведеній нижче таблиці ми постаралися узагальнити ключові переваги та недоліки сайту з нуля VS конструктора сайтів:

Порівняльна характеристика Сайти, створені за допомогою конструктора Сайти, створені самостійно з нуля
Простота створення Просто Важко
Швидкість створення Дуже швидко Довго
Можливість редагування вихідного коду Ні Є
Можливість просування у пошукових системах Можливі нюанси Повна свобода
Гнучкість у налаштуванні дизайну та функціональності Обмежена Не обмежена
Можливість перенести на інший хостинг Частіше ні Є

Який спосіб створення сайту найбільш переважний?

Насправді однозначної відповіді на це питання не існує. Все залежить від ваших цілей та завдань. Можливо, ви хочете вивчити найпопулярніші CMS-системи? А може, навчитися самостійно формувати вихідний код сайту? Немає нічого неможливого!

Але якщо ви хочете створити сучасний і дійсно якісний сайт в короткий термін, ми рекомендуємо скористатися саме !

Корисні програми для вебмастерів-початківців

Ми перерахуємо кілька корисних програм, які значно полегшать та прискорять процес самостійного створення сайту:

Notepad++- текстовий редактор, що дозволяє створювати та редагувати вихідний код створюваного сайту. Відмінна заміна програмі "Блокнот", що входить до складу операційної системи Windows.

Adobe Dreamweaver- потужна та багатофункціональна програма для створення сайтів. Крім усього іншого вона включає можливість попереднього перегляду створюваного ресурсу.

NetBeans– середовище розробки додатків, яке дозволяє ефективно працювати з такими мовами розмітки та Веб-програмування, як HTML, CSS, JavaScript та PHP.

Публікація створеного сайту в Інтернеті

Допустимо, ви вже створили свій перший сайт, але що потрібно зробити, щоб на нього міг зайти будь-який користувач Всесвітнього павутиння?

Що таке «домен» і навіщо він потрібний

Домен – це ім'я сайту. Крім того, під терміном «дом н» найчастіше розуміють адресу вашого сайту в мережі «Інтернет».

Відмінним прикладом домену може бути ім'я сайту, на якому ви зараз знаходитесь - сайт .

Як видно з наведеного вище прикладу доменне ім'ясайту складається з двох частин:

  • безпосередньо назви сайту - у нашому випадку це internet-technologies;
  • обраної доменної зони. У нашому випадку було обрано доменну зону « .ru». Доменна зона вказується на адресі сайту після його назви.

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

  • сайт – домен другого рівня;
  • forum.сайт - домен третього рівня (він же піддомен).

Доменні зони можуть бути різними. Найчастіше вибір доменної зони залежить від країни чи призначення кожного конкретного сайту.

Найчастіше використовуються такі доменні зони:

  • .ru - найпопулярніша доменна зона в рамках російськомовного сегмента Всесвітньої павутини;
  • .biz – часто доменна зона використовується для сайтів бізнес-тематики;
  • .com – ця доменна зона найчастіше використовується для комерційних та корпоративних сайтів;
  • .info - у цій доменній зоні досить часто розташовуються саме інформаційні сайти;
  • .net - ще одна популярна доменна зона, що підходить для проектів, пов'язаних з Інтернетом;
  • .рф - офіційна доменна зона Російської Федерації

Якщо більшість цільової аудиторії перебуває у Росії, ми рекомендуємо реєструвати домен у зоні «.ru ».

Як вибрати домен

При виборі домену для власного сайту ми рекомендуємо керуватися такими принципами:

  • оригінальність та легкість запам'ятовування;
  • максимальна довжина – 12 символів;
  • легкість набору на латиниці;
  • відсутність імені домена знака «тире» (бажано, але з обов'язково).
  • Чистота історії домену та відсутність на ньому будь-яких санкцій з боку пошукових систем. Це можна перевірити за допомогою сервісу whois history.

Де можна придбати домен?

Крім того, сайт цього реєстратора дозволяє прямо в режимі онлайн підібрати ім'я (домен) для свого сайту. Зробити це досить легко.

Для цього достатньо ввести у відповідне поле бажане ім'я домену та натиснути кнопку «Шукати домен».

Що таке «хостинг»

Для того, щоб створений вами сайт став доступним всім користувачам Всесвітньої павутини, крім домену вашому інтернет-ресурсу знадобиться ще й хостинг.
Терміном «хостинг» позначається послуга розміщення вашого сайту в Інтернеті. Наданням подібних послуг займається велика кількість компаній, які називають «хостерами».

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

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

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

Як вибрати хостинг

При виборі хостингу для створюваного сайту ми рекомендуємо керуватися такими критеріями:

  • Стабільна робота. Вибраний вами хостинг має стабільно працювати 24 години на добу, 7 днів на тиждень. Інакше ви нестимете репутаційні втрати в очах відвідувачів, а також втратите довіру з боку пошукових систем. У зв'язку з цим варто звернути особливу увагу на такий параметр, як uptime хостингу. Uptime - це час, протягом якого сайт працює в штатному режимі і відвідувачі можуть відкрити його у своєму браузері без будь-яких проблем. Воно має бути максимально наближеним до 100%. У свою чергу, час відгуку сайту демонструє, наскільки швидко ваш сайт відповідає на запит, що надходить від браузера користувача. Чим менший час відгуку, тим краще.
  • Простота та зручність інтерфейсу користувача . При вході до особистий кабінетвся панель управління має бути не тільки доступна, а й інтуїтивно зрозуміла. Зокрема, ви маєте бачити поточний баланс, а також мати швидкий доступдо всіх основних функцій хостингу.
  • Професійна російськомовна служба підтримки. Швидка, кваліфікована та розмовляюча рідною для вас мовою технічна підтримка дуже важлива у разі виникнення різних збоїв у роботі сайту та необхідності їх оперативного усунення.
  • Вартість послуг . Цей аспект важливий як для вебмастерів-початківців, які мають у своєму розпорядженні обмежений бюджет, так і для власників масштабних інтернет-проектів, що вимагають використання дійсно дорогого хостингу.

Зі свого боку ми можемо порекомендувати вам таких надійних та перевірених часом хостинг-провайдерів, як Beget (для початківців та просунутих вебмайстрів), а також FastVPS (для тих, кому потрібний високопродуктивний хостинг).

Розміщення готового сайту на сервері

Допустимо, ви вже створили сайт, купили домен та хостинг. Що робити далі?

Тепер потрібно розмістити всі файли нашого сайту на сервері вибраного хостинг-провайдера. Є одразу кілька способів зробити це. Давайте поговоримо про них.

  1. Це завантаження вмісту вашого сайту за протоколом HTTP за допомогою панелі управління хостингом.
  2. за протоколу FTPза допомогою так званого FTP-клієнта.

Саме другий спосіб є найшвидшим. Для цього завдання ми рекомендуємо один із найкращих безкоштовних FTP-клієнтів – FileZilla.

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

Відповіді на поширені запитання

З чого розпочати навчання майбутньому вебмайстру (творцю сайтів)?

  • основи HTML;
  • основи CSS;
  • основи PHP.

Що стосується подальшого навчання та розвитку, для створення односторінкових сайтів буде корисно освоїти таку програму як Abobe Muse. Якщо ж ви захочете створювати багатофункціональні сайти на замовлення, обов'язково знайдіть час на освоєння CMS WordPress, адже саме вона зараз є найпопулярнішою та найпоширенішою.

Як знайти та вибрати фахівців для створення сайту

Вам потрібен сайт, але ви не хочете створювати його самостійно? Тоді потрібно буде знайти справді добрих та грамотних фахівців. Давайте розберемося, як це зробити.

Є відразу кілька критеріїв, на які слід спиратися при виборі спеціалістів для створення сайту. Виділимо основні:

  • Наявність портфоліо успішно завершених проектів. Якщо у вибраного виконавця або команди виконавців немає портфоліо, це викликає запитання.
  • Вміння пояснювати складні речі простою мовою. Якщо вас із самого початку спілкування «вантажать» складними термінами і не дають їм якихось зрозумілих пояснень, краще знайти іншого виконавця.
  • Бажана наявність у виконавця власного сайту. Пам'ятайте вираз «с сапожник без чобіт»? Часто це аналогія вірна, але тут бувають винятки.
  • Позитивні відгуки реальних клієнтів. Відмінно, якщо вдасться поспілкуватися з клієнтами, попросивши контакти у виконавця.

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

  • fl.ru;
  • weblancer.net;
  • freelance.ru;
  • work-zilla.com.

Де можна пройти професійне навчання для створення сайтів?

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

  • дизайнер;
  • верстальник;
  • програміст;
  • менеджер.

У зв'язку з цим необхідно розуміти, що спеціалізовані курси дозволяють освоїти конкретну професію та закрити певний фронт робіт, пов'язаних із створенням сайту. Якщо ви шукайте саме такі курси, зверніть увагу на такі навчальні онлайн-платформи:

  • geekbrains.ru;
  • netology.ru.

Чи можна безкоштовно вивчити основи сайтобудування?

Чи можна самостійно створити власний сайт?

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

Чи можна створити повноцінний сайт абсолютно безкоштовно?

Ні, не можна. Навіть якщо ви все розроблятимете самі (з нуля або на CMS), вам все одно знадобиться купити хостинг і домен. Це варто не великих грошей, Але все-таки грошей.

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

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

Тому вкладення, хай і мінімальні, будуть потрібні. Але не варто засмучуватися - варто це зазвичай, як пара чашок кави на місяць.

Чи можна заробити на розробці веб-сайтів?

Звичайно можна! Якщо ви станете кваліфікованим фахівцем і створюватимете сайти для інших людей, обов'язково зможете на цьому заробити.

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

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

Так Так, різні типисайтів (їх створення) стоять по-різному. Якщо говорити про середні ціни ринку, на даний момент вони такі:

  • створення сайту-візитки - від 100 $;
  • створення корпоративного сайту - від 500 $;
  • створення інтернет-магазину - від 1000 $;
  • створення новинного сайту - від 700 $;
  • створення інформаційного SEO-сайту - від 300 $;
  • створення інтернет-порталу - від 3000 $;
  • створення односторінкового сайту - від 400 $;
  • створення блогу - від 50 $;
  • створення форуму - від 300 $.

Крім того, не варто забувати, що можна успішно монетизувати свій власний сайт. Цьому питанню ми присвятили одразу дві цікаві статті. Перша розповідає у тому, як , а друга присвячена тому, . Обов'язково ознайомтеся з ними!

Створити свій сайт безкоштовно!

Замість ув'язнення

Дякуємо вам за прочитання цієї статті. Ми будемо дуже раді, якщо вам допоможуть наші рекомендації. Крім того, дякуємо вам за лайки та шаринги. Залишайтеся з нами, і ви дізнаєтесь ще багато цікавого!

Можливо, у вас є якісь питання щодо створення сайтів? Задайте їх у коментарях, і ми постараємось вам допомогти!