>> Daven FARNHAM: Сьогодні, я збираюся трохи поговоримо про HTML,
Мова розмітки гіпертексту.
Ви бачите HTML всюди в ці дні.
Справді, якщо ви дивитеся це відео в браузері, ви
бачачи HTML прямо зараз.
HTML не є мовою програмування, скоріше, це мова розмітки, яка використовується на
веб-браузери, здатні відтворювати сторінки в Інтернеті.
>> Таким чином, ви можете запитати, як саме пише Адреса сторінки в мережі HTML відрізняється
від написання програми в програмуванні мову, як C?
Ну, C є мовою з дуже строгим синтаксичні правила, які необхідно
складений до того, як може працювати.
Якщо ви коли-небудь забули включити Крапка з комою в кінці заяві в
ваша C код, ви знаєте, про що я говорю про відносно суворого синтаксису.
>> Веб-браузери проте, трохи більше прощаючи коли справа доходить до HTML.
Навіть якщо ваш HTML не синтаксично правильно, ваша сторінка все ще може бути
відображається в браузері, але це могло б Не дивіться, що хотіли.
Так що це завжди краще слідувати правилам.
Кращий спосіб отримати інтуїцію про те, як все це працює, щоб
пройти через прикладу.
>> Отже, що ми маємо тут справу з основним основою для веб-сторінки.
Ви, напевно, помітили багато речей між кутовими дужками.
Ну, це тільки теги.
Теги основному інформує веб-браузерів що, гей, щось
приходить на ваш сайт.
Пам'ятайте, кожен раз при відкритті тег, необхідно закрити його, як тільки ви
закінчите його використання.
>> Так, наприклад, я відкриваю розділ коду з відкритим
Кронштейн тіло, закриває дужка.
Потім я додати текст, в даному випадку, мій Перший веб-сторінки, то коли я пішов в
На закінчення цього розділу, я використовую майже ідентичні тег крім цього часу з
коса риса перед тілі.
Загалом, це формат ви збираєтеся використовувати всякий раз, коли ви відкриваєте
та закривають теги.
Разом з відкритим теги і кінцевий тег складати те, що називається елемент.
>> Якщо ви подивитеся на першій лінії, ви будете см. знак оклику з подальшим
DOCTYPE HTML.
Це дійсно просто кажу ваш браузер , Що файл є веб-сторінка
написано в HTML.
HTML тегів суті говорить, ось іде деякі HTML.
Тоді у нас є голова тег з тег назва всередині нього.
Глава тег ви можете думати про якість включає HTML код, який приходить для
основна частина вашої веб-сторінки Фактичне зміст.
>> Загалом, ви поклали назву вашого веб-сторінки тут, хоча є деякі
інші теги, які можуть з'явитися тут також.
Далі йде тіло вашої веб-сторінці, тим фактичне м'ясо і кістки вашого сайту.
У нашому прикладі, ми просто поставити простий Вирок, Мій перший веб-сторінки,
які, якщо ми запустимо наш сайт, буде виглядати трохи щось на зразок цього.
Наша веб-сторінка не надто дивно, але не хвилюйтеся.
Ми їли його найближчим часом.
>> Таким чином, вище HTML, ми дамо вам дуже базовий шаблон для веб-сторінки,
ніщо не вважає, просто голі кістки.
Але якщо я створюю веб-сторінку, що робити, якщо я хочу додати
картина, скажімо, себе?
Ну, я можу це зробити.
Є кілька способів додавати зображення на ваш сайт.
Якщо зображення в тій же папці, Ваш HTML файл, ви можете за посиланням
Зображення за допомогою шляху, як це.
>> Ви відкриваєте з тега зображення з подальшим на в атрибуті Alt в
джерело зображення.
Значення Альт атрибута є лише деякі Альтернативний текст у разі, якщо користувач не може
бачити зображення.
Крім того, ви можете перейти за посиланням Зображення за допомогою повного URL, як це.
Тепер, що веб-сайт насправді не існує, але якби картина
мені за цією адресою, я міг би використовувати джерело URL включити
його образ на моєму сайті.
У будь-якому випадку, ви в кінцевому підсумку з набагато гарніше сайт, щось на зразок цього.
>> Ну, це дуже здорово, але я як би від того, хочете небудь текст тут.
Так що давайте просто додати щось супер просто вище
Зображення, як і заголовок.
Все, що я зробив до сих пір, це використовувати заголовок тег, H1, і розрив фраза, шир.
Тег заголовка робить шрифт трохи трохи більше і більш помітним.
Тег обриву лінії, з іншого З іншого боку, це круто.
На відміну від більшості інших тегів, ви не повинні відкриття і закриття перерву тег, просто
один показано вище.
Це тому, що перерва не має змісту і тому, порожній елемент.
>> Порожні елементи, як це, ви можете відкрити і близько одночасно просто
в тому числі косою риси в кінець первісної заяви.
Так що тепер мій сайт виглядає трохи щось на зразок цього.
Краще, але це частково відчуває як глухий кут.
Там в нікуди йти в сторону з цієї головній сторінці.
Ну, давайте виправити, включаючи посилання.
>> Те, що я збираюся зробити ось використовувати атрибут позначається і зробити
Зображення посилання на, скажімо так, CS50 телевізор.
Таким чином, всякий раз, коли хто-небудь натискає на мене, їх браузер буде спрямована на
другий, ймовірно, більш корисно, веб-сторінки.
Мені довелося звести до мінімуму розмір текст трохи, тому що наш веб-сторінка
стає все більш просунуті.
Але, сподіваюся, це все ще ясно.
Мій сайт виглядає точно так само тільки Тепер, всякий раз, коли я натискаю на зображенні,
мій браузер відкриє другий Вкладка для веб-сторінки CS50.tv.
>> Нарешті, припустимо, що я збираюся стилі цей сайт пізніше за допомогою CSS.
CSS є те, що відомо як каскадні таблиці стилів.
І це в основному забезпечує ефективний спосіб редагування і стиль
подібні блоки коду.
Я хочу почати організації моєї HTML до щоб було легше укладати надалі.
Тут, я створив два різних види ідентифікатори, які допоможуть організувати свій код.
Я використовував атрибут ID всередині поділ або справ тег, і я використав
Клас атрибутів всередині другий справ тег.
>> ID і атрибути класу працюють аналогічно.
Різниця лише в тому, ви можете мати тільки один елемент, питома ID, але
будь-яку кількість елементів можете поділитися клас.
Так, наприклад, я можу використовувати клас зображення кілька разів, але я не можу
створити ще один відділ з ID вершині.
Хоча я не пішов в CSS, іншу мову зазвичай використовується
поряд HTML, як тільки я починаю стиль мій код з CSS, я можу використовувати ці
організаційні атрибути до впливу естетика мого веб-сторінки.
>> Все в рамках Відділу верхньої матиме такі ж стилю або будь-якого
Інша група HTML I групи в Клас зображення поділяться подібний погляд.
Це набагато легше, ніж намагатися редагувати і зображення або блоки стиль
текст індивідуально.
>> Таким чином, ми перейшли основи того, як щоб зробити веб-сторінку з HTML.
HTML має купу інших функцій занадто що, коли в парі з іншими мовами
як CSS і JavaScript, можуть насправді зробити сторінки виділитися.
Кращий спосіб навчитися працювати з HTML просто возитися з ним,
подивитися, що працює, а що ні.
>> Мене звуть Daven Фарнхем.
Це CS50.
>> Так, наприклад, я можу використовувати образ клас -
Ні, є дуже багато атрибутів.
Мене звуть Daven Фарнхем.
Це CS 650.
Я хочу сказати, CSS.
Це CSS.