Цей розділ сайту повністю присвячений двом мовам створення сайту, а саме HTML та CSS. Тут ви зможете поетапно вивчити мови, дізнатися все від основ до найскладніших моментів.

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

В даному розділірозміщені уроки за стандартами мови HTML5 і CSS3, відповідно, якщо ж будуть якісь нові версії даних мов, вони так само будуть відображені в нових уроках цього розділу, і ви обов'язково дізнаєтеся .

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

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

Як і в мові html, так і в CSS є свої особливості, правила та структура. У цьому уроці я розповім вам про основні поняття мови CSS, його структуру, пристрій і ми зробимо з вами першу CSS таблицю стилів і дізнаєтеся, як підключити таблицю стилів до html документа.

Селектори в CSS є основою самої мови та їх вивчення та розуміння дуже важливе, тому в цьому уроці я вам розповім ще про декілька видів селекторів та опишу їх можливості.

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

Після того як ви дізналися всі html теги для роботи з текстом, тепер настав час перейти безпосередньо до CSS роботи з текстом, яка вже значно розширить ваші пізнання та можливості.

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

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

CSS значно розширює можливості роботи з будь-якими об'єктами html, у цьому уроці я хотів би вам докладно розповісти про ті параметри, які можна застосовувати до зображень.

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

Класнути

Запинити

Для вивчення уроку завантажте архів з необхідними файлами.

HTML- це мова розмітки документів. Правильна вимова - Ейч Ті Ем Ель.

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

Навіщо, запитаєте ви, писати у статті, присвяченій HTML про текстові процесори? А ось навіщо. Якщо з'ясувати, що таке офісний редактор? Ця програма для редагування та відображення документів.

Ключове слово тут документ . Тобто, ми створюємо, редагуємо та переглядаємо документ у якійсь програмі, у даному випадку – у офісному редакторі. Якщо відкрити такий документ у простому текстовому редакторіНаприклад, у Блокноті ми побачимо безліч дивних символів і знаків. Ця каша із символів незрозуміла людству, але зрозуміла комп'ютерам. Завдяки цій внутрішній мові, документ Wordнабуває певної структури та вигляду в самому редакторі, а документ постає перед нами у всій своїй красі з відформатованим текстом і картинками на своєму місці.

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

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

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

Такий собі Word для HTML. Такі візуальні редактори називаються:

WYSIWYG редактори - W hat Y ou S ee I s W hat Y ou G et. Тобто, якщо перекласти російською: що бачимо, те й отримуємо.

Я їх називаю "вузівуги". Хоча це фонетично і не правильно, зате яскраво свідчить про безглуздість даного винаходу. Новачки дуже часто використовують такі редактори для створення перших сайтів. Звичайно, це зручно – не потрібно заглиблюватися у вивчення тегів, стилів оформлення та інших, на перший погляд, неприємних та складних речей. Редактор сам автоматично перетворює наші дії на код HTML.

Але, як кажуть, нічого просто так не буває. А якщо конкретніше – такий підхід має дуже серйозні недоліки. Що ж заважає всім підряд використовувати візуальні редактори для оформлення сторінок? Справа в тому, що сформовані таким чином сторінки мають, як правило, дуже багато зайвого коду, дуже багато помилок із семантичної точки зору. Зараз, звичайно, немає проблем зі швидкісний інтернетз'єднанням і різниця в розмірі сторінки в 400 кб і 100 кб не суттєва для швидкості, проте оптимізований і правильно написаний HTML код позбавляє безлічі проблем і дає масу переваг, а саме:

• Грамотний HTML-код позитивно впливає на пошукову оптимізацію, швидкість сканування пошуковим роботом сайту. Згенеровані вузивугою кілобайти коду тут не прийнятні і навіть шкідливі;
• HTML код, згенерований WYSIWYG редактором, має безліч семантичних помилок. Тобто, теги, що генеруються таким редактором використовуються не за призначенням, де потрібно використовувати, наприклад, списки
  редактор згенерує нам інший, непотрібний нам тег. Залежить, звичайно, від редактора, але тут маються на увазі комплексні рішення для створення сайтів, а не простого редагування тексту в текстовій області засобами WYSIWYG.
  • Генерується багато зайвих тегів і структура документа виходить роздутою. Допустимо, ви пересуваєте елемент у такій програмі спочатку праворуч, потім ліворуч, потім по центру - від кожної дії залишається слід у вихідному HTML коді. Редактор – це програма і він не може знати, що саме ви хочете отримати в результаті, він формує тонни коду з урахуванням усіх можливих варіантівповедінки документа у браузері.
  • Як правило, редактори для візуального оформлення HTML коду швидко застарівають. А через відсутність інтересу з боку професіоналів – взагалі позбавляються підтримки та зупиняються у розвитку. А HTML розвивається. Все розвивається, крім вузівуги. Відповідно, вони не можуть генерувати правильний і сучасний код, в якому були б задіяні нові фішки та рішення.
  • Підтримувати такі проекти та розвивати – кара небесна. Про використання патернів та повторне використаннякоду мови взагалі бути не може.

  Отже, HTML писатимемо тільки ручками. Адекватних інструментів для візуального редагування HTML ще не вигадали, та й навряд чи вони з'являться. Мова розмітки HTML проста в освоєнні та розумінні, а засобів автоматизації написання HTML коду безліч, але про це в інших уроках.

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

  Структура документа HTML

  Рекомендую для занять завантажити та встановити редактор Sublime Text. Вкрай не рекомендую використовувати для HTML верстки вбудований у Windows Блокнот, якщо ви не хочете зламати собі психіку на ранніх порах вивчення HTML.

  Ми вирішили, що код HTML документа писатимемо вручну, тобто верстати. HTML Верстка- процес створення HTMLдокумента. У народі та обізнаних колах - просто верстка. Будь-який документ має структуру та певні правила побудови. З яких елементів складається код, яка структура у HTML?

  Давайте створимо на комп'ютері початковий шаблон - файл index.html, відкриємо за допомогою редактора та вставимо в нього наступний код:

  Тіло документа Зверніть увагу, документи HTML мають розширення .html.

  Отже, по порядку із прикладу.

  - тип документа (доктайп)

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

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

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

  - Початок документа

  Перший тег, який ми зустрічаємо після доктайпу, це .

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

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

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

  , і т.д.

  Тег є обов'язковим, оскільки містить всю структуру документа і є оболонкою для інших елементів.

  Тег

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

  <тег>зміст або інші теги

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

  Тег

  Заголовок
  
  

  Это заголовок

  
  

  Это параграф.

  
  
  

  Онлайн-примеры HTML

  В учебнике HTML для вас подготовлено более 100 онлайн-примеров, благодаря которым вы легко освоите язык разметки. Лучше один раз увидеть, чем сто раз услышать! Теория плюс практика - залог вашего успеха в освоении HTML.

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

  Но если начинать с изучения движка, то некоторая часть пользователей, которая не знает HTML , окажется обделена. Поэтому я решил начать с основ и сделать это так, чтобы даже любой новичок мог разобраться что да как.

  Итак, что же такое HTML ?

  Сама аббревиатура расшифровывается как Н урегТ ехt M arkиp L aпguage (язык гипертекстовой разметки ).

  А если выражаться просто, то HTML – это специальный язык разметки, который объясняет браузеру, как отображать ту или иную веб-страничку . Т. е. каким шрифтом показывать текст, в каком порядке компоновать элементы, какие элементы отображать подчеркнутыми и т. д. И в зависимости от того, какой элемент будет встречаться браузеру, в соответствии с заложенными в сам браузер правилами, этот элемент так и будет отображаться. Однако, эти правила потом можно будет поменять, но об этом я уже буду говорить в своих следующих уроках, которые будут посвящены CSS .

  Предлагаю для начала рассмотреть пример самой простой веб-странички , которая может быть. Сейчас вы не должны заострять свое внимание на том, что обозначают те или иные тэги . Всему свое время, для начала просто обратите внимание на то, где что находится в коде и как это всё соотносится с тем, что отображается в браузере. Рассмотрим пример документа HTML :

  Один день из моей жизни

  Подготовка к концерту

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

  Репетиция

  Всё прошло без сучка и задоринки. Из нашей команды никто не сбивался с ритма, и как оказалось все напрасно волновались.

  Концерт

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

  Для начала вам надо будет набрать этот текст в каком-нибудь текстовом редакторе (наиболее удобным я считаю является Notepad ++ ) и сохранить файл под именем index .html где-нибудь у себя на диске. При двойном щелчке на сохраненном файле у вас откроется страничка примерно такого вида.

  Обратите внимание на то, что сами тэги при этом не отображаются, а отображается сам контент, который находится между ними. А отсюда вы можете сделать вывод, что тэги выступают в HTML в качестве оформительского элемента.

  Посмотрите на исходный код. Как вы могли уже заметить, в нем перед словом “Один”, есть небольшой отступ. Однако браузер его не учел, он просто его проглотил молча, как будто и не было его никогда. Более того, если вы попробуете поставить множество пробелов между словами, то они все будут восприняты браузером как один пробел, - у HTML есть такая особенность.

  И вот ещё такой совет, - когда пишите HTML -код, приучайте себя к тому, чтобы делать отступы в тех тэгах, которые являются вложенными в другие. Например, тэги title и body вложены в тэг html . Значит, когда будете писать эти тэги, то не забывайте делать соответствующие отступы. Обычно они делаются с помощью двух пробелов, либо табуляции, - это уже дело вкуса. Зачем это нужно? Сейчас, в том небольшом кусочке документа, который я привёл как пример выше - информации немного, поэтому и запутаться там довольно проблематично. Однако, если на страничке будет находиться множество вложенных элементов, то не будет ничего проще, как заплутать в этом огромном коде и с трудом сообразить, в какой части документа вы сейчас находитесь. Так что лучше приучать себя к хорошему стилю сразу, потом вы это сами поймете и вам это сыграет в дальнейшем хорошую службу.

  Стоит также указать и самый необходимый минимум тэгов, которые должны быть в HTML -документе. Я говорю про эту часть:

  Но даже если этой части и не будет, то большинство браузеров посмотрит на все это сквозь пальцы и всё равно отобразит вашу страничку. Однако такой фривольный стиль написания кода, при котором человек пропускает большое количество тэгов, является дурным тоном написания, поэтому желательно, чтобы все эти элементы были на вашей странице в любом случае. Иначе это может грозить проблемой совместимости с другими браузерами, что в результате сможет повлиять на внешний вид вашего сайта, и как следствие – посещаемости.

  Кроме того, вы можете писать комментарии в HTML -документ, - это чисто служебная информация, которая предназначена исключительно для вас. Обычно это какие-то важные пометки, которые служат для вас напоминанием или просто чем-то, на что стоит обратить своё внимание. Комментарии не обрабатываются браузером и, а это значит что пользователь их не увидит. Пишутся они обычно вот так:

  А теперь попробуем разобрать сами, какой тэг нашего примера выше за что отвечает.

  Тэг html означает, что начинается вывод html кода.

  head – раздел служебной информации. В числе прочего здесь находится title , который отвечает за текст в заголовке окна браузера. К этому разделу можно отнестись ещё как к информации, которую мы хотим рассказать браузеру о данной страничке.

  body – начинается основная часть документа.

  h 1 – заголовок.

  h 2 – подзаголовок.

  p – абзац.

  На этом пожалуй всё! Если это был ваш первый HTML -документ, то я вас поздравляю! Да, он выглядит не так здорово, как нам бы того хотелось. Но тем не менее, у нас есть материал, над которым мы уже можем работать. А в следующих уроках, всё будет ещё интереснее, и мы потихоньку коснёмся работе с каскадными таблицами стилей (CSS ) .

  • < Назад

  Для комментирования, вам необходимо зарегистрироваться.