Как да научите html

HTML е намаление от английския Език за маркиране на хипер текст (Хипертекст Маркиращ език). Този код или език, на който е създаден основната маркировка на сайтовете. Ако никога не сте програмирани, ученето може да изглежда трудно, но всъщност всичко, което трябва да започнете, е най-простият текстов редактор и интернет браузъра. Можете дори да научите някои примери за HTML маркировки, които се натъкнаха на вас на онлайн форуми, персонализирани потребителски страници или в изделия WikiHow. HTML - полезен инструмент за всеки интернет потребител и изучаването на базите ще отнеме по-малко време, отколкото си мислите.

Стъпка

Част 1 от 2:
Изучаване на основите на HTML
  1. Изображение, озаглавено Научете HTML Стъпка 1
един. Отворете HTML документа. Повечето текстови редактори (преносим компютър или бележник ++ за Windows, Textedit за Mac, Gedit за GNU / Linux) могат да се използват за създаване на HTML файлове. Създайте нов документ и го запазете с помощта на файла → Запазете както в уеб страницата, или променете разширяването на файла до .HTML OR .HTM вместо това .Док, .RTF или друга експанзия.
  • Може да се появи предупреждение, че файлът ще бъде запазен като "прост текст" вместо RTF формат или че форматирането и изображението няма да бъдат запазени. Това е нормално - за HTML тези опции не са необходими.
  • Изображение, озаглавено Научете HTML Стъпка 2
    2. Отворете създадения файл в браузъра. Запазете празния файл, намерете го на компютъра си и отворете кликчето с двоен мишката. В браузъра трябва да се отвори празна страница. Ако това се случи, плъзнете файла в адресната лента на браузъра. В процеса на редактиране на HTML файл можете да актуализирате тази страница, за да видите промените.
  • Обърнете внимание, че по този начин не създавате уебсайт в интернет. Други хора нямат достъп до тази страница и не се нуждаете от интернет връзка, за да тествате местната страница. Браузърът просто интерпретира HTML кода, "четенето", сякаш това е уебсайт.
  • Изображение, озаглавено Научете HTML Стъпка 3
    3. Разберете какви са маркерите за маркиране. За разлика от обикновения текст, маркерите не се показват на страницата. Вместо това те показват браузъра, как да показват страницата и съдържанието му. "Отваряне" етикет съдържа инструкции. Например, той може да информира браузъра, който текстът трябва да бъде показан като удебелен. Също така се нуждаете от "затварящ" етикет, показващ браузъра, където инструкцията завършва. В този пример текстът между отварянето и затварящите маркери ще бъде показан в удебелен шрифт. Таговете се записват в знаците на неравенство, но затварящият маркер започва с наклон.
  • Отговорният етикет се записва между знаци за неравенство: <Отваряне на етикет. T
  • В заключителния маркер преди дескриптора (заглавие), етикетът се прави наклонена черта: Затварящ етикет. T
  • Прочетете, за да научите за използването на различни тагове. За тази стъпка е достатъчно да запомните записания формат. Таговете се записват между знаци за неравенство: < > и
  • В някои уроци, HTML таговете се наричат ​​елементи и текстът между отварянето и затварящите маркери се нарича съдържанието на елемента.
  • Изображение, озаглавено Научете HTML Стъпка 4
    4. Наберете в етикета на редактора . Всеки HTML файл трябва да започне с маркер И завършва с етикет . Тези маркери показват браузъра, че всички съдържания между етикетите са написани в HTML. Добавете тези маркери към документа:
  • Често HTML файловете започват от низ , което означава, че браузърите трябва да разпознаят целия файл ashtml. Тази линия обаче не е необходима, може да помогне за решаването на проблемите на съвместимостта.
  • Набиране В горната част на документа.
  • Натиснете Enter или се върнете няколко пъти, за да създадете няколко празни струни, след това въведете
  • не забравяйте, че всичко Кодът, който ще създадете, ще трябва да пишете между тези два етикета.
  • Изображение, озаглавено Научете HTML Стъпка 5
    пет. Създайте раздел във файла . Между маркерите и Създайте маркер за отваряне и затварящ етикет . Добавете няколко празни линии между тях. Съдържание, записано между тагове и , не се показва на самия страница. Следвайте тези стъпки и ще видите какво е необходим този маркер:
  • Между маркерите и Пиша и
  • Между маркерите и Пиша Как да научите HTML - WikiHow.
  • Запазете промените и отворете файла в браузъра (или актуализирайте страницата, ако файлът вече е отворен). Вижте текста, който се появява в заглавието на страницата по-горе?
  • Изображение, озаглавено Научете HTML Стъпка 6
    6. Създайте секция . Всички други маркери и текст в този пример се записват в секцията на тялото, чието съдържание се показва на страницата. След Затваряне на етикет преди TEGGING TAG маркер и . До края на тази статия, работа с секцията на тялото. Вашият файл трябва да погледне нещо такова:


    Как да научите HTML - WikiHow



  • Изображение, озаглавено Научете HTML Стъпка 7
    7. Добавяне на текст с помощта на различни стилове. Време е да добавите настоящо съдържание на съдържание! Всичко, което пишете между етикетите на тялото, ще се показват на страницата след актуализиране в браузъра. Не използвай Символи < или . T, Тъй като браузърът ще се опита да интерпретира съдържанието като етикет вместо текст. Пиша Здравейте! (или каквото искате), след това опитайте да добавите тези маркери към текста и вижте какво се случва:
  • Здравейте! Маркирайте текста "Italic". T Здравейте!
  • Здравейте! Маркирайте текста "удебелен". T Здравейте!
  • Здравейте! Текстът на Strors: Здравейте!
  • Показва шрифта като горен индекс:
  • Здравейте! Показва шрифта под формата на долния индекс: Здравейте!
  • Опитайте различни етикети заедно. Какво ще изглежда Здравейте!?
  • Изображение, озаглавено Научете HTML Стъпка 8
    Осем. Разделете текста на параграфите. Ако се опитате да напишете няколко реда текст в HTML файла, забележете, че реките не се показват в браузъра. За да разделите текста на параграфи, трябва да добавите етикети:
  • Това е отделен параграф.

  • След това изречение трябва да бъде ред
    Преди да започнете тази линия.

    Това е първият маркер, който не изисква затварящ маркер. Такива тагове се наричат ​​"празни".
  • Създаване на заглавия за показване на имена на дял:

    Текстово заглавие

    : Най-големият заглавие

    Текстово заглавие

    (заглавие на второ ниво)

    Текстово заглавие

    (заглавие на трето ниво)

    Текстово заглавие

    (Четвърто заглавие)
    Текстово заглавие
    (най-малкия заглавие)
  • Изображение, озаглавено Научете HTML Стъпка 9
    девет. Научете се да създавате списъци. Има няколко начина за създаване на списъци на уеб страница. Опитайте следните опции и решете кой ви харесва най-добре. Имайте предвид, че един чифт етикети е необходим за списък като цяло (например
      и
    За маркиран списък) и всеки списък се подчертава от друга двойка маркери, например
  • и
  • .
    • Маркирани списък:
    • Първа линия
    • Втори низ
    • И т.н
  • Номериран списък:
  • Един
  • Две
  • Три
  • Списък на определенията:
    Кафе
    - гореща напитка
    Лимонада
    - Студена напитка
  • Изображение, озаглавено Научете HTML Стъпка 10
    10. Направете страница с помощта на Rasp редове, хоризонтални линии и Снимки. Време е да добавите нещо освен текста към страницата. Опитайте следните етикети или следвайте връзките, за да получите повече информация. Използвайте онлайн хостинг, за да създадете връзка към снимката, която искате да публикувате:
  • Хоризонтална линия:
  • Поставете снимка. T
  • Изображение, озаглавено Научете HTML Стъпка 11
    единадесет. Добавете връзки. Можете да използвате тези маркери за създаване на хипервръзки към други страници и сайтове, но тъй като все още нямате уебсайт, сега ще научите как да създавате "котва" връзки, т.е. връзки към определени места на страницата:
  • Създаване на котва На мястото на страницата, към която искате да се обърнете. Измислете с разбираемо и запомнящо се име:

    Текстът, който наричате.
  • Използвайте етикет , Да създадете относителна връзка или позоваване на външния ресурс:

    Текст или изображение, който ще служи като връзка.
  • За да се обърнете към относителната връзка на друга страница, добавете знак # след основната връзка и името на котвата. Например, https: // ru.Уикихоу.Com / wrave-html # съвети се отнася до раздела на съветите на тази страница.
  • Част 2 от 2:
    Разширено HTML ниво
    1. Изображение, озаглавено Научете HTML Стъпка 12
    един. Запознайте се с атрибутите. Атрибутите се записват в етикета, което показва допълнителна информация. Атрибутен формат такъв: Име ="значение", където заглавие определя атрибута (например, Цвят За цветовия атрибут) и стойността показва неговата стойност (например, червен за червено).
    • Атрибутите всъщност бяха използвани в предишния раздел на основите на HTML. Tag Използва атрибут SRC, Анкерите на относителните връзки използват атрибута Име, И връзки използват атрибут href. Както вече сте забелязали, всички атрибути са написани във формат ___ ="___".
  • Изображение, озаглавено Научете HTML Стъпка 13
    2. Експериментирайте с HTML таблици. Създаването на таблица включва използването на различни маркери. Можете да експериментирате или Прочетете повече подробни инструкции.
  • Създаване на тагове за таблици:
  • Съдържанието на всеки ред на таблицата влиза в етикети:
  • Заглавката на колоната се определя от маркера:
  • Клетки в следващите линии:
  • Пример за използване на тези маркери:

    Колона 1: месецКолона 2: Спестяване
    Януари5000 рубли
  • Изображение, озаглавено Научете HTML Стъпка 14
    3. Научете допълнителни маркери за глава. Вече сте научили етикета , Отивате в началото на всеки HTML файл. Освен това , Има и други тагове за този раздел:
  • Мета тагове, в които се съдържат Метаданни, използвани от търсачките за индексация на сайта. За да направите вашия сайт по-лесен в търсачките, използвайте един или повече открити маркери (Затварящи маркери не се изискват). Използвайте един атрибут и стойност на етикета: - или
  • Тагове , Водене на файлове на трети страни, например, на стилови листове (CSS), които се създават с помощта на друг тип кодиране и ви позволяват да промените HTML страницата, използвайки цвят, подравняване на текста и много други функции.
  • Тагове
  • Изображение, озаглавено Научете HTML Стъпка 15
    4. Експериментирайте с HTML код на други сайтове. Отличен начин да проучите HTML ще гледате изходния код на други уеб страници. Можете да кликнете с десния бутон на мишката върху страницата и изберете "Преглед на изходен код" или нещо подобно в горното меню на браузъра. Опитайте се да определите какво прави непознат маркер или да търсите информация за това в интернет.
  • Въпреки че не можете да редактирате сайтовете на други хора, можете да копирате изходния код във вашия файл, за да експериментирате с маркерите по-късно. Моля, обърнете внимание, че маркировката CSS може да не е налична, а цветът и форматирането може да изглежда различно.
  • Изображение, озаглавено Научете HTML Стъпка 16
    пет. Проучете по-подробни ръководства. В интернет има много сайтове, посветени на HTML тагове, например W3Schools или HTMLBook. Има хартиени книги за продажба, но се опитват да намерят сегашната публикация, тъй като стандартите се променят и развиват. Още по-добре е да овладеят CSS за контрол на маркирането и появата на сайта. След изучаването на CSS WebDescriptions обикновено научават jаvascript.
  • Съвети

    • Notepad ++ - чудесна безплатна програма, подобна на редовен преносим компютър, но можете да запазите и тествате кода си в браузъра онлайн. (Също така поддържа почти всеки език - HTML, CSS, Python, jаvascript и т.н.).
    • Намерете някаква проста страница в мрежата, запазете кода на компютъра и експериментирайте с него. Опитайте да премествате текст, променете шрифта, сменете изображенията - всичко!
    • Можете да стартирате бележника, където ще записвате тагове, за да ги имате винаги. Можете също да отпечатате тази страница и да опитате с нея.
    • Когато пишете код, направете го внимателно, така че вие ​​и други хора да го разберете. Използване на коментари в HTML: те няма да бъдат отразени на страницата, но ще бъдат видими в документа за документи.
    • XML I RSS все по-популярни. Код на страницата, съдържащ XML и RSS технологии, неопитни на потребителя по-трудни за четене и разбиране, но тези инструменти са много полезни.
    • HTML маркировъчни маркери не зависят от регистъра, но се препоръчва използването само на малки букви (както в примерите в тази статия) - както за целите на стандартизацията, така и за съвместимост с XHTML.

    Предупреждения

    • Някои маркери през последните няколко години излязоха от ежедневието и са заменени с нови, дават същите или някои допълнителни ефекти.
    • Ако искате да проверите страницата си, отидете на уебсайта на W3 и разберете съвременните HTML изисквания. HTML стандартите се променят с течение на времето и да замени някои маркери идват нови, които работят по-добре в съвременните браузъри.

    От какво имаш нужда

    • Текстов редактор, като Notepad (Windows) или Textedit (MAC)
    • Хартия / бележник (не е задължително)
    • HTML редактор, като Notepad ++ (Windows) или Textwrangler (MAC) (не е задължително)
    Подобни публикации