Html готова робота. Створення html сторінки в блокноті: роз'яснення для чайників
Вам терміново потрібно зробити сайт, використовуючи тільки HTML, і викласти його в інтернет? Тоді вам не важко буде скопіювати готовий код і слідувати моїм інструкціям.
Правда повноцінний ресурс, із застосуванням однієї мови програмування, зробити важко, але ось сайт-візитку з декількох сторінок, цілком можливо.
Якщо у кого-то саме він і є метою, і немає бажання вивчати інші мови, то ця стаття для них.
Коротше, в самопісний виконанні, без використання CMS, простіше вже нічого не існує.
А для тих кому потрібно щось по крутіше, в кінці статті є посилання на статті з кодом блочного шаблону, з використанням CSS, І кодом динамічного сайту з використанням PHP.
Сайт на чистому html зробимо прямо на цій сторінці, так би мовити - сайт в сайті, цілком робочий і готовий до заповнення контентом.
Розділимо весь процес на три частини.
1. Створення директорії сайту на своєму комп'ютері.
2. Створення сайту.
3. Переклад сайту з нашого компа на хостинг, тобто в інтернет.
Створення директорії сайту на своєму комп'ютері
Перший пункт найпростіший. Про те як створити директорію дуже наочно показано в статті (всі посилання з цієї сторінки відкриваються в окремому вікні, щоб не загубитися).
А що, і в яку папку покласти, я детально покажу після коду головної сторінки, Щоб вже було з чим йти в директорію.
Потім приступимо до другого пункту, самого творчого.
Створення шаблону сайту
Для створення шаблону потрібно редактор, в який потрібно буде вставити наведений нижче код.
Це може бути як простий віндовскій Блокнот, так і будь-який інший текстовий редактор.
За основу шаблону візьмемо багатошарову таблицю HTML. Раніше, до появи CSS всі сайти писалися таблицями, тепер же більш популярною стала блокова верстка.
Але і досі, таблична структура не застаріла і з успіхом застосовується.
Наприклад інвестиційна CMS H-script зі складним функціоналом, цілком зверстаний на основі таблиць.
Отже, ось такий сайт, з мінімальним оформленням.
Як надалі оформляти таблиці, дуже докладно показано в статті.
Назва сайту (організації)
опис сайту
сторінка
Привіт шановні майбутні веб-майстри! Мені 55 років і я радий вітати Вас на своєму сайті. Цей сайт перший, який я розробив самостійно, а до цього вмів тільки входити в інтернет.
Чому я вирішив його зробити? За ті 3 місяці, поки розбирався в Сайтобудування і створював цей ресурс виявилося, що автори посібників зі створення сайтів вважають багато нюансів самі по собі зрозумілі і не звертають на них уваги. А мені, з огляду на вік і відсутність досвіду, було не просто зрозуміти як раз ці нюанси, вони забирали найбільше часу.
Меню
Загальна інформація
Текст загальної інформації
Назва сайту
<! - Створюємо таблицю контейнер, якій задаємо наступне оформлення: border \u003d "1" - рамка навколо контейнера. Збільшивши число, можна збільшити товщину рамки. align \u003d "center" - розміщуємо контейнер по центру екрана. rules \u003d "rows" - прибираємо подвійну рамку. style \u003d "width: 60%;" - додаємо стильове властивості, що робить контейнер і весь сайт "гумовим". Зробити повноцінний адаптивний дизайн, цим способом неможливо .-->
- між цими тегами полягає весь видимий контент сторінки.
4.
- між цими тегами прописується заголовок сторінки, яке відображається в самому вгорі браузера. До речі, коли Ви щось шукайте в пошукових системах, то перше, що відображається, це як раз назву сторінки. тег часто скорочено називають "тайтлов". Раджу прочитати статтю: як скласти тег
Тепер перейдемо до тегам, які знаходяться в тілі html сторінки (всередині
і
).
5.
- ці теги вирівнюють все, що знаходиться всередині них по центру. В даному випадку центром буде - центр екрана. В майбутньому рекомендується відмовитися від використання цих тегів.
6.
- це один з класу тегів заголовків тегів
..
, Зазвичай в нього укладають назву сторінки. Наприклад, у цій сторінці заголовки тег "Приклад створення html сторінки". Примітка
ці теги мають велику вагу в ранжуванні сайту, тому ними необхідно користуватися акуратно і з розумом.
При складанні html-коду потрібно дотримуватися простого правила: спочатку повинен йти заголовки тег
, А далі можуть йти вже
,
і т.д. Головне, щоб не було спочатку
, потім
, потім
і т.п. Повинна бути сувора ієрархія. заголовків
,
і т.п. може бути багато.
7. - це одиночний тег, який не вимагає закриває тега. Він здійснює перехід на наступний рядок. У моєму прикладі написані два одиночних тега поспіль, щоб двічі перейти на наступний рядок.
8. - це одиночний тег, який виводить зображення.
src - обов'язковий параметр, в якому вказується адреса зображення (замість URL_ІЗОБРАЖЕНІЯ необхідно прописати адресу, де зберігається Ваше зображення). Примітка:
Якщо зображення знаходиться в одній папці з Вашої html-сторінкою, то досить написати назву зображення, інакше потрібно прописувати або абсолютний або відносний URL;
Не забудьте вказати розширення зображення. Наприклад, .jpg, .gif, .jpeg.
alt або title - в ці параметри можна записати опис до Вашого зображенню. Коли Ви наведете мишкою на зображення, то з'явиться цей опис. Ці параметри важливі для просування сайту, особливо в пошуку по картинках. Якщо зображення не вдалося завантажити, то буде виведений цей текст, що також є плюсом.
9. - ці теги створені для зміни шрифту, фону, розміру і т.д. Коротше кажучи, все, що пов'язано з форматуванням тексту можна налаштувати в одному тезі. Це тег мають досить багато атрибутів, про які я розповім в окремому уроці.
Примітка: - аналогічний тег.
Є також властивість CSS font, в якому можна задавати всі ці параметри.
10. - виділити жирним. Все, що укладено між і буде виділено жирним. Наприклад, якщо Ви напишіть його на самому початку контенту, а закриєте в самому кінці, то весь текст на сторінці буде виділено жирним. Це досить часто зустрічається тег, аналогом якого є
.
Пошукові системи звертають увагу на цей тег в плані посилення вліяеніе ключових слів. Але потрібно бути акуратним, оскільки виділяти кожен раз жирним ключові слова буде сприйнято за спам.
У сучасному світі часом мати власний сайт також важливо, як наприклад, наявність номера телефону або адреси електронної пошти. На жаль, не кожен самостійно може зробити собі гарний професійний сайт, а часом навіть і кривої не виходить. Замовляти у програмістів теж не ідеальний вихід, так як не всім це по кишені.
З такої ситуації допоможуть вийти безкоштовні HTML шаблони сайтів. HTML шаблон сайту - це набір вже готових статичних сторінок для сайту певної тематики. За допомогою такого шаблону, створити простий сайт можна буквально за пару годин, при наявності базового знання HTML розмітки. У розділі HTML Ви отримаєте ці знання, якщо витратите ще пару годин на вивчення, а якщо не пошкодуєте час на розділ CSS, то зможете повністю керувати дизайном HTML шаблонів сайтів і налаштовувати їх повністю під свої потреби.
Ще одним незаперечним плюсом шаблонів сайтів є, то що їх пишуть в більшості випадків професіонали. Під професійним шаблоном сайтом розуміється не тільки красивий і сучасний дизайн, а й тому що написаний код. Пошукові системи дивляться, як у Вас написаний сайт, SEO оптимізований код чи ні, на підставі цього знижують або підвищують Ваші позиції у видачі. Тому хороший сайт повинен бути не тільки красивий і сучасний, що важливо, а й грамотно написаний в плані коду.
Завантажуйте безкоштовні HTML варіанти дизайну і створюйте свої проекти в найкоротші терміни.
Я вас всіх радісно вітаю, мої дорогі друзі. Сьогодні з вами як завжди Дмитро Костін, і у мене для вас невеликий сюрприз, а саме іспит! Хоча добре, щодо іспиту я пожартував. Просто я вирішив закінчити уроки з основ html і в цій статті застосувати знання, отримані на попередніх уроках на практиці.
Я хочу вам показати простий приклад створення сайту html в блокноті Notepad ++ за лічені хвилини. Звичайно сайтик ми створимо простий, що не заморочений, швидкий, і я б навіть сказав лохівський (вибачте за мій французький))). Але все ж, завдяки цьому ви зможете закріпити отримані знання. Це дійсно важливо в цій справі.
Тільки не забудьте при створенні нового документа в Notepad ++ перекодувати його в UTF-8.
Ви запитаєте: «А чому так мало уроків? В html набагато більше тегів і атрибутів ». Так-так, ви дійсно праві, але час йде і багато теги вже не працюють в останніх версіях html, або ж просто вважаються непотрібними і ними ніхто не користується.
Ось наприклад є тег , Який відповідає за шрифт. Завдяки йому і атрибутам, можна змінювати внутрішній контент, наприклад розмір шрифту, колір, сам шрифт. Але сьогодні, як я вже і сказав, не прийнято використовувати. Такий код вже не буде дійсним. Замість цього ми використовуємо CSS. Це набагато зручніше і практичніше. Ну да ладно. Давайте краще приступимо створення сайту.
Я в документі зазначив ті місця, де ви повинні будете ці списочки робити, але звичайно ж про всяк випадок я покажу як це має виглядати.
Зберігаємо і дивимося, що у нас вийшло. Начебто все як треба. Відмінно. Уже просунулися далеко вперед.
вставка таблиці
Відкрийте в блокноті сторінку table.html, Перетягніть з однойменного вордовского документа все заголовки і текст, після чого розставте всі теги і атрибути як треба.
Ось тепер переходимо до того, що нам потрібно. Створюємо таблицю в 5 рядків і 5 стовпців, після чого вставляємо в них відповідні значення. Не забуваємо ставити потрібні атрибути, а саме border \u003d "2", cellpadding і cellspacing по 5. У коді це повинно виглядати приблизно так:
Зберігаємо і дивимося, що у нас вийшло. Все відмінно!
Сторінка про автора
Ми вже майже все зробили. Нам тільки залишилося закінчити сторінку про автора. Зайдіть в сторінку obo-mne.html і вставте з однойменного вордовского документа весь текст з усіма заголовками і розставте теги.
Коротше, тепер після тегів шапки сайту і менюшек вам потрібно буде прописати адресу цієї картинки і поставити атрибут align \u003d "left", що текст обплітав фотографію. Якщо виглядає негарно, то можна погратися з відступами на кілька пікселів. Приблизно це повинно виглядати так.
Все зробили? Все вийшло? Я сподіваюсь що так. Але тепер нам потрібно. У документі посилання є. Все, що вам потрібно - це просто вставити її після основного тексту. Якщо раптом відео налазить на фотографію автора, то просто після тексту зробіть парочку відступів за допомогою .
Ну ось начебто і все. За завданням все виконано і тепер у вас є такий простенький html сайт, зроблений в блокноті Notepad ++ буквально за 10-15 хвилин. Незважаючи на те, що це найпростіший html каркас без CSS властивостей та інших приблуд, виявляється досі існують люди, які продають курси аля «Як створити сайт» з інформацією, подібної до цієї. Причому беруть за це гроші - і 500 рублів, і навіть 2000. Я просто в шоці!)
Якщо вже і брати якісь курси, то краще у професіоналів, які собаку на цьому з'їли. Особисто я рекомендую вам подивитися курс Андрія Бернадського " HTML5 та CSS3 з нуля до гуру". Курс просто приголомшливий, нескладний в освоєнні і розрахований на будь-який рівень користувача. Завдяки йому ви реально навчитеся верстати досить непогані сайти.
До речі як ваші ручки? Сподіваюся, що ви не Філонов і все прописували своїми чудовими ручками. Я сподіваюся, що каші в голові у вас немає і я все нормально пояснив. Ну а якщо у вас щось не вийшло, то в папці лежить готова версія нашого сайту з усіма коментарями, щоб ви змогли розібратися.
Фух. Загалом на сьогодні я все. Води сьогодні випив літра 4 напевно через спеку. Так що сподіваюся, що вам моя стаття сподобалася і була корисною в плані вивчення. Не забувайте підписуватися на нові статті мого блогу. Я вам розповім ще багато всього цікавого. А вам я бажаю удачі і спокійно перетерпіти спеку. Ну а я пішов охолоджуватися. Побачимося. Бувай!
З повагою, Дмитро Костін.
Чи не знайшли відповідь на своє питання? Подивіться тут