Ноу Інти, лекція, основи html
У цій лекції ми познайомимося з основами мови HTML - що це таке, що він робить, його історією коротко, і як виглядає структура документа HTML. Наступні лекції будуть розглядати кожну окрему частину HTML зі значно більшою глибиною. Лекція має наступну структуру:
- Що таке HTML
- Як виглядає HTML
- Історія HTML
- Структура документа HTML
- Синтаксис елементів HTML
- Елементи блокового рівня і рядкові елементи
- Символьні посилання
- висновок
Що таке HTML
HTML ( "Мова розмітки гіпертексту") є мовою опису вмісту документів Web. Він використовує спеціальний синтаксис. що містить маркери (звані "елементами"), які охоплюють текст в документі, щоб вказати, як агенти користувача повинні інтерпретувати цю частину документа.
Як виглядає HTML
HTML є просто звичайним текстовим поданням вмісту і його загального сенсу. Наприклад, код заголовка "Що таке HTML" вище виглядає наступним чином:
частина "
"Є маркером (який ми називаємо" тегом "), який означає" те, що слід далі, має розглядатися, як заголовок другого рівня "."
"Є тегом для вказівки, де знаходиться закінчення заголовка другого рівня (який ми називаємо" закриває тег "). Хто відкриває тег. Закриває тег і все, що між ними називаються" елементом ". Однак багато людей використовують терміни елемент і тег взаимозаменяемо, що ні зовсім строго правильно.Історія HTML
Хоча HTML значно змінився з тих пір, велика частина вмісту сучасного HTML реалізована в цьому першому документі і більше половини "тегів", описаних у вихідному документі "Теги HTML" як і раніше існують.
Чернетка HTML 3.0 з'явився пізніше в цьому ж році, але робота над цією версією була перервана, в зв'язку з відсутністю підтримки з боку виробників браузерів. HTML 3.2 втратив багато нових властивостей 3.0, і замість цього прийняв багато розробки популярних в той час браузерів Mosaic і Netscape Navigator.
Структура документа HTML
Мінімальний можливий дійсний документ HTML буде виглядати приблизно так:
Документ починається з елемента типу документа, або doctype (описаного більш детально в "лекції 14". Вибір правильного типу документа ...). Він описує, який тип HTML буде використовуватися - щоб агенти користувача могли визначити, як інтерпретувати документ, і вирішити, чи слід він тими правилами, яким збирався слідувати за своєю заявою.
Після цього можна бачити відкриває тег елемента html. Це оболонка навколо всього документа. Закриває тег html є останнім об'єктом у будь-якому документі HTML.
Усередині елемента html є елемент head. Він є оболонкою, яка містить інформацію про документ (метадані). Це описано більш докладно в наступній лекції. Усередині head знаходиться елемент title. який визначає заголовок "Example page" в панелі меню.
Після елемента head слід елемент body. який є оболонкою, яка містить реальний вміст сторінки - в даному випадку тільки елемент заголовка першого рівня (h1), який містить текст "Hello world". І це, власне, і є весь документ.
Як можна бачити, елементи часто містять інші елементи. Тіло документа завжди буде містити безліч вкладених один в одного елементів.
Розділи сторінки створюють загальну структуру документа, і будуть містити підрозділи. Вони міститимуть заголовки. параграфи, списки і т.д. Параграфи можуть містити елементи. які створюють посилання на інші елементи. цитати, виділення і т.д. Більше про ці елементи буде сказано надалі.
Синтаксис елементів HTML
Як ви вже бачили, базовий елемент в HTML складається з двох маркерів навколо блоку тексту. Існують елементи. які не є оболонкою для тексту, і майже в кожному випадку елементи можуть містити піделементи (як html містить head і body в прикладі вище).
Елементи можуть також мати атрибути. які можуть модифікувати поведінку елемента і вводити додаткове значення.
У цьому прикладі елемент div (розділ сторінки, спосіб розбиття документів на логічні блоки) має доданий атрибут id. для якого задано значення masthead. Елемент div містить елемент h1 (заголовок першого, або самого важливого рівня), який в свою чергу містить деякий текст. Частина цього тексту упакована в елемент abbr (який використовується для визначення розширення скорочень), який має атрибут title. значення якого задано як Hypertext Markup Language.
Багато атрибути в HTML є загальними для всіх елементів. хоча деякі є специфічними для даного елемента або елементів. Вони завжди мають форму ключевое_слово = "значення". Значення повинне існувати в одиночні або подвійні лапки (в деяких ситуаціях лапки можуть бути відсутніми, але це не дуже добре з точки зору передбачуваності, розуміння і ясності - необхідно завжди укладати значення в лапки).
Елементи блокового рівня і рядкові елементи
Блоковий рівень означає більш високий рівень елемента. зазвичай інформує про структуру документа. Елементи блокового рівня можна представляти як елементи. які починаються з нового рядка, відриваючись від того, що було перед цим. Поширеними блоковими елементами є параграфи, пункти списку, заголовки і таблиці.
Строкові елементи містяться всередині структурних елементів блочного рівня і охоплюють лише частини тексту документа, а не цілі області. Строковий елемент не призводить до появи в документі нового рядка, вони є елементами. які з'являються в параграфі тексту. Поширеними строковими елементами є гіпертекстові посилання, виділені слова або фрази і короткі цитати.
Символьні посилання
Останнім питанням, яке варто згадати про документ HTML. є використання спеціальних символів. В HTML символи <.> і є спеціальними. Вони починають і закінчують частини документа HTML. а не уявляють символи менше, більше і амперсанд.
Символ амперсанда ( ) Вводить посилання, а крапка з комою (;) закінчує її. Однак, багато агентів користувача можуть бути досить поблажливі до помилок HTML. таким як відсутність крапки з комою, і інтерпретувати "pound" як символьне посилання. Посилання можуть бути або числами (числові посилання) або скороченими словами (об'єктні посилання).
висновок
У цій лекції ми познайомилися з основами HTML. як він з'явився, і трохи познайомилися зі структурою документа HTML. Потім ми опишемо розділи
документа HTML більш докладно, перш ніж переходити до розгляду вмісту .Марк Норман Френсіс працює з Інтернет з моменту винаходу Web. Він працює в даний час в компанії Yahoo! в якості архітектора зовнішнього інтерфейсу для найбільшого в світі Web-сайту, визначаючи кращі методи, стандарти кодування і якості розробки Web.