Автор:
Laura McKinney
Дата Створення:
3 Квітень 2021
Дата Оновлення:
1 Липня 2024
Зміст
HTML (мова розмітки HyperText) є основною мовою для створення веб-сторінок. Він був створений як проста та гнучка мова кодування. Майже кожен веб-сайт в Інтернеті розробляється з певною формою цього коду (ColdFusion, XML, XSLT). HTML легко зрозуміти, але ви можете продовжувати дізнаватися про нього довгий час, якщо вас цікавить його всебічна функціональність. Щоб додати кольору та розваги своєму веб-сайту, ви можете вивчити базові CSS, як тільки звикнете до базової HTML-сторінки.
Кроки
Частина 1 з 4: Створення документа
Відкрийте простий текстовий редактор. NotePad - хороший варіант, і його можна завантажити безкоштовно. Ви можете писати HTML у більшості текстових редакторів, але більш складне програмне забезпечення з функціями автоматичного форматування може ускладнити організацію вашої HTML-сторінки.
- Не використовуйте TextEdit, оскільки він зазвичай зберігає файл у форматі, який ваш браузер може не розпізнати як HTML.
- Ви також можете використовувати онлайн-редактор HTML. Спеціальні програми для редагування HTML не рекомендуються для початківців.
Збережіть файл як веб-сторінку. Виберіть Файл → Зберегти як у меню вгорі. Змініть формат файлу на "Веб-сторінка", ".html" або ".htm". Збережіть файл там, де його легко знайти.- Між цими трьома варіантами різниці немає.
Відкрийте файл у браузері. Двічі клацніть файл, і він автоматично відкриється у вигляді порожньої веб-сторінки у вашому браузері. Крім того, ви можете відкрити браузер, наприклад Firefox або Internet Explorer, а потім скористатися меню Файл → Відкрити файл, щоб вибрати документ.
- Цей веб-сайт не в Інтернеті. Його можна переглянути лише на вашому комп’ютері.
Оновіть веб-сторінку та перегляньте внесені зміни. Введіть у порожній документ наступне: Здрастуйте. Збережіть документ. Оновіть порожню веб-сторінку у своєму браузері, і у верхній частині сторінки ви побачите жирним шрифтом слово «Привіт». Щоразу, коли ви хочете протестувати свій новий HTML під час цього підручника, збережіть документ .htm, а потім оновіть вікно браузера, щоб побачити, як HTML компілюється.- Якщо ви бачите слова ""і"'' З'являється у вашому браузері, файл не складено правильно в HTML. Спробуйте інший текстовий редактор або інший браузер.
Вивчіть теги. Команди HTML написані "тегами", які повідомляють браузеру про те, як скомпілювати та відобразити вашу веб-сторінку. Вони завжди пишуться в одинарних лапках, і не відображаються на веб-сторінці, як ви їх використовували у прикладі вище: - є "стартовою карткою" або "відкривальною карткою". Все, що написано після цього тегу, буде визначено як "жирний" (жирний шрифт на веб-сторінці).
- є "кінцевою міткою" або "закриваючою міткою", яку можна відрізнити за символом / знаком. Він позначає кінець жирного тексту. Для функціонування більшості (не всіх) тегів потрібен кінцевий тег, тому обов’язково включіть його.
Створіть свій документ. Видаліть усе у своєму документі HTML. Почніть спочатку з наступного тексту, точно так, як він був написаний (за мінусом крапок). Цей HTML-код повідомляє браузеру, який тип HTML ви використовуєте, і що весь ваш HTML буде розміщений всередині тегів. і .
Додайте теги head (head) і body. Документи HTML поділяються на дві частини. Розділ "вгорі" призначений для спеціальної інформації, як-от заголовок сторінки. Розділ "основний текст" містить основний зміст сторінки. Додайте обидва ці розділи до свого документа та не забудьте включити кінцеві теги. Нещодавно доданий текст виділений жирним шрифтом:
Дайте своїй сторінці назву. Більшість карток у головному розділі неважливо вивчати з початківцем. Проте тег заголовка простий у використанні і визначатиме, що відображатиметься як назва вікна браузера або на вкладці браузера. Помістіть початкові та кінцеві теги заголовка всередину тегів head і напишіть між ними те, що вам подобається:
Моя перша HTML-сторінка.
Частина 2 з 4: Форматування тексту
Додайте текст до свого тіла. У цьому розділі ми працюватимемо лише з тегами body. Інший текст все ще буде у вашому документі, але ми заощадимо простір, не повторюючи його в цьому посібнику. Записуйте між картками все, що завгодно і , і він з’явиться як перший вміст на вашій сторінці. Наприклад:
- Я дотримувався інструкцій wikiHow, щоб написати HTML-сторінку.
Додайте заголовки до тексту. Впорядкуйте свою сторінку за допомогою заголовків, які вказують браузеру відображати текст між ними більшим розміром шрифту. Ці теги також використовуються пошуковими системами та іншими інструментами для визначення того, про що ваш веб-сайт і як він організований.
є найбільшим заголовком, і ви можете створювати менші заголовки до
. Спробуйте їх на своїй сторінці:Ласкаво просимо на мою сторінку.
- Я дотримувався інструкцій wikiHow, щоб написати HTML-сторінку.
Моя сьогоднішня мета:
Виконані цілі:
- Дізнайтеся, як використовувати заголовки.
Незавершені цілі:
- Дізнайтеся більше про теги форматування тексту.
Дізнайтеся більше про теги форматування тексту. Ви вже бачили "сильний" тег, але існує безліч інших способів форматування тексту. Спробуйте ці теги або з кількома тегами одночасно для одного текстового рядка. Не забудьте додати кінцеві теги ззаду!
- Важливий текст, виділений у браузері жирним шрифтом.
- Підкреслений текст, що відображається курсивом у веб-переглядачі.
- Текст трохи менший, ніж зазвичай. Цей текст автоматично змінить розмір, якщо його використовувати в заголовку.
Текст більше не актуальний, відображається тире.- Текст вставляється пізніше інших документів, відображається з підкресленням.
Впорядкуйте текст на своїй сторінці. Ви можете помітити, що натискання клавіші "enter" недостатньо, щоб текст відображався в іншому рядку. Ці теги можуть допомогти вам створити абзаци та розриви рядків або впорядкувати текст іншими способами:
Скорочено "абзац", цей тег зберігатиме весь текст між цими тегами в абзаці та відокремлюватиме його від тексту зверху та під ним.
Цей тег генерує розриви рядків. Не додавайте до нього кінцевий тег, оскільки він не заважає будь-якому іншому вмісту. Використовуйте цей тег у віршах або адресних рядках, а не в абзацах.Якщо вам потрібно дуже точно відображати текст, цей тег встановлює текст усередині нього на шрифт фіксованої ширини (кожна буква має однакову ширину) і дозволяє створювати інтервали Пробіли та розриви рядків для звичайного редагування замість тегів.
Цей тег визначає тип тексту, який цитується з джерела.
Ви можете описати джерело пізніше за допомогою цитувати картку.
Додайте невидимий текст підпису. Теги коментарів не відображаються на веб-сторінці. Вони дозволяють анотувати себе в документі HTML, не впливаючи на вміст. Не додайте кінцевий тег.
- Картки, які йдуть поодинці без закінчуваних міток, називаються «порожніми тегами».
Поєднуйте їх разом. Найкращий спосіб запам'ятати ці теги - використовувати їх на своєму веб-сайті. Ось приклад використання карток на етапах, які ви до цього часу вивчили. Спробуйте передбачити, як вони відображатимуться у браузері, а потім скопіюйте їх у свій документ і дізнайтеся. реклама
Частина 3 з 4: Додавання посилань та зображень
Дізнайтеся про атрибути. Теги можуть мати додаткову інформацію, записану всередині них, яка називається атрибутами. Ці атрибути представлені додатковими словами у самих тегах у формі ім'я властивості = "конкретне значення". Наприклад, будь-який тег HTML може мати атрибут title:
Вступний параграф тут.
Назвіть заголовок абзацу "Про", який з’явиться, коли ви наведете курсор на абзац на веб-сторінці.
Посилання на інші веб-сайти. Використання карток створити гіперпосилання на будь-яку іншу веб-сторінку. Вставте URL-адресу веб-сторінки для посилання на атрибут href. Ось приклад посилань на веб-сторінку, яку ви читаєте:
Додайте атрибут id до тегу. Іншим атрибутом, який може використовувати будь-який тег HTML, є елемент "id". На будь-якій картці пишіть id = "vidu" або використовуйте будь-яке ім’я, яке не містить пробілів. Це не дає жодного видимого ефекту, але ми використаємо його на наступному кроці.
- Наприклад, додайте до свого документа наступне:
Цей параграф використовується як приклад для опису роботи атрибута id.
- Наприклад, додайте до свого документа наступне:
Посилання на елемент із певним ідентифікатором. Тепер ми можемо використовувати тег гіперпосилання, , щоб перейти до іншого місця на тій самій сторінці. Замість URL-адреси ми будемо використовувати символ #, а потім значення id, на яке ми хочемо зробити посилання. Наприклад, Цей текст буде посилатися на текст з ідентифікатором "vidu".
- Усі значення HTML чутливі до регістру. "#VIDU" і "#vidu" будуть посилатися на одне і те ж місце.
- Якщо ваша сторінка досить коротка, щоб відображати всю сторінку відразу, ви, ймовірно, не помітите, що щось відбувається, коли ви натискаєте посилання у своєму браузері. Змініть розмір вікна, доки не з’явиться смужка прокрутки, а потім спробуйте ще раз.
Додайте фотографії. Картка
є порожнім тегом, тобто кінцевий тег не потрібен. Вся інформація, необхідна браузеру для відображення зображення, додається за допомогою атрибутів. Ось приклад для відображення логотипу wikiHow з описом кожного атрибута позаду:
- Властивості src = "" повідомляє браузеру, де знаходиться фотографія. (Зверніть увагу, що розміщення фотографії з чужого сайту вважається недоречним - і фотографія зникне, коли сторінка вже не буде активною.)
- Властивості style = "" Він може робити багато речей, але найголовніше він використовується для встановлення ширини та висоти зображення в пікселях. (Ви можете замість цього використовувати окремі атрибути width = "" і height = "", але це може призвести до дивних проблем із зміною розміру, якщо ви використовуєте CSS.)
- Властивості alt = "" - це короткий опис зображення, яке користувач побачить, якщо зображення не вдалося завантажити. Це вважається вимогою, оскільки воно використовується для читання з екрана для сліпих відвідувачів веб-сайту.
Частина 4 з 4: Дізнайтеся більше Додавання та запуск веб-сайту в Інтернеті
Підтвердьте свій HTML. Перевірка HTML перевіряє наявність помилок у коді. Якщо ваш сайт відображається неправильно, перевірка може допомогти вам знайти помилку, яка спричиняє проблему. Він також може навчити вас більше про HTML, визначивши, що код добре виглядає на дисплеї, але він більше не рекомендується через нові оновлення стандарту HTML. Використання недійсного HTML не робить ваш сайт марним, але може спричинити проблеми або відображати нестабільно в різних браузерах.
- Спробуйте безкоштовну послугу онлайн-перевірки від W3C або шукайте інший інструмент перевірки HTML 5 в Інтернеті.
Дізнайтеся більше про теги та атрибути. Існує багато інших тегів та атрибутів HTML, а також багато місць, де їх можна вивчити:
- Спробуйте w3schools та HTML Dog, щоб отримати більше підручників та повний список тегів.
- Знайдіть веб-сторінку, яка вам подобається, як вона виглядає, а потім скористайтеся функцією веб-переглядача "Переглянути джерело сторінки", щоб отримати HTML-код самостійно. Скопіюйте його у свій документ і вивчіть, як це працює.
- Прочитайте інші статті та дізнайтеся про те, як створювати таблиці в HTML, використовуйте мета-теги, щоб збільшити шанси знайти їх за допомогою пошукових систем, або використовуйте розділ. встановити область на сторінці) та інтервал (використовується для вказівки стилю текстового елемента), щоб допомогти стилізувати CSS.
Отримайте свій веб-сайт в Інтернеті. Виберіть послугу для розміщення вашого веб-сайту, і тоді ви зможете завантажити стільки HTML-сторінок, скільки захочете, у свій особистий веб-домен. Для цього вам потрібно буде використовувати програмне забезпечення для завантаження FTP, але багато служб оренди веб-сайтів пропонують і цю послугу.
- При посиланні на сторінки чи зображення, які знаходяться безпосередньо на вашому сайті, вам потрібно буде вказати повну адресу сайту. Наприклад, якщо ваше доменне ім’я www.chuyengiahtmlsieudang.com, тоді текст знаходиться в цих тегах буде посилатися на "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"
Додайте стилі за допомогою CSS. Якщо ваша HTML-сторінка виглядає дещо одноманітно, спробуйте вивчити основи CSS, щоб додати кольори, різні шрифти та краще контролювати розташування елементів. Пов’язання «таблиці стилів» CSS зі сторінкою HTML дозволить вам вносити потужні зміни на ходу, автоматично коригуючи стиль усього тексту в межах заданого тегу. Ви можете трохи пограти з основним шаром форматування тут, або заглибитися в більш детальні підручники в підручнику CSS по HTML Dog.
Додайте JavaScript на свій веб-сайт. JavaScript - це мова програмування, яка використовується для додавання багатьох функціональних можливостей на ваші HTML-сторінки. Команди JavaScript вставляються між початковим і кінцевим тегами , і може використовуватися для додавання інтерактивних кнопок, обчислення математичних задач тощо. Дізнайтеся більше на прикладах w3c. реклама
Порада
- Декларація типу документа (декларація типу документа), що використовується в цьому посібнику, є "вільним перехідним HTML 4.0.1" (HTML 4.0.1 не жорсткий перехід), легкий формат. для початківців. Використовувати () альтернативою тому, щоб браузер скомпілював його у строгому форматі HTML 5, що є рекомендованим (хоча і рідше використовуваним) стандартним стилем.
Увага
- Мета HTML - зберегти вміст у глобальному форматі. Він не контролює презентацію вашого веб-сайту, наприклад, колір фону та точне розміщення елементів. Незважаючи на те, що все ще існують теги, які дозволяють це робити, корисно використовувати CSS для створення більш керованого та послідовного веб-сайту.
Що тобі потрібно
- Простий текстовий редактор, наприклад NotePad або TextEdit
- Веб-браузер, такий як Internet Explorer або Mozilla Firefox
- (Необов’язково) Редактор HTML, такий як Adobe Dreamweaver, Aptana Studio або Microsoft Expression Web
