Съдържание

• Стъпки
• Част 1 от 2: Изучаване на основите на HTML
• Част 2 от 2: Разширен HTML
• Съвети
• Предупреждения
• Какво ти е необходимо

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

Стъпки

Част 1 от 2: Изучаване на основите на HTML

1. 1 Отворете HTML документ. Повечето текстови редактори (Notepad или Notepad ++ за Windows, TextEdit за Mac, gedit за GNU / Linux) могат да се използват за генериране на HTML файлове. Създайте нов документ и го запазете, като използвате File → Save As във формат на уеб страница или променете разширението на файла на .html или .htm вместо .doc, .rtf или друго разширение.
   • Може да получите предупреждение, че файлът ще бъде записан като "обикновен текст" вместо RTF формат, или че форматирането и изображенията няма да бъдат запазени. Това е добре; за HTML тези опции не са необходими.
2. 2 Отворете генерирания файл в браузър. Запазете празния файл, намерете го на компютъра си и щракнете двукратно върху него, за да го отворите. В браузъра трябва да се отвори празна страница. Ако това не стане, плъзнете файла в адресната лента на браузъра си. Докато редактирате HTML файла, можете да опресните тази страница, за да видите промените.
   • Моля, обърнете внимание, че по този начин не създавате уебсайт в Интернет. Други хора няма да имат достъп до тази страница и нямате нужда от интернет връзка, за да тествате локалната си страница. Браузърът просто интерпретира HTML кода, като го "чете", сякаш е уебсайт.
3. 3 Разберете какво представляват маркерите за маркиране. За разлика от обикновения текст, етикетите не се появяват на страницата. Вместо това те казват на браузъра как да покаже страницата и нейното съдържание. Етикетът "отваряне" съдържа инструкции. Например, той може да каже на браузъра, че текстът трябва да се показва като удебелен... Той също така се нуждае от маркер "край", за да покаже на браузъра къде завършва инструкцията. В този пример текстът между началния и крайния етикет ще бъде показан с удебелен шрифт. Етикетите се изписват в неравни знаци, но крайният етикет започва с наклонена черта напред.
   • Отварящият таг се изписва между знаците за неравенство: отварящ етикет>
   • В затварящия маркер, наклонена черта се поставя пред дескриптора на тага (име): /краен маркер>
   • Прочетете, за да разберете как се използват различните тагове. За тази стъпка просто трябва да запомните формата на записа. Етикетите се изписват между знаците за неравенство:> и />
   • В някои уроци HTML таговете се наричат ​​елементи, а текстът между началния и затварящия тагове се нарича съдържание на елемент.
4. 4 Въведете html> tag в редактора. Всеки HTML файл трябва да започва с маркер html> и завършва с етикет / html>... Тези тагове казват на браузъра, че цялото съдържание между маркерите е в HTML. Добавете тези тагове към вашия документ:
   • Често HTML файловете започват с реда ! DOCTYPE html>което означава, че браузърите трябва да разпознават целия файл като HTML. Този ред не е необходим, но може да ви помогне да отстраните проблеми със съвместимостта.
   • Наберете html> в горната част на документа.
   • Натиснете Enter или Return няколко пъти, за да създадете множество празни редове, след което въведете / html>
   • не забравяйте, че цялото кодът, който ще създадете в тази статия, ще трябва да бъде написан между тези два маркера.
5. 5 Създайте глава> раздел във файла. Между маркерите html> и / html> създайте начален маркер глава> и затварящият маркер / глава>... Добавете няколко празни реда между тях. Съдържанието, записано между маркерите head> и / head>, не се показва на самата страница. Следвайте тези стъпки и ще видите за какво служи този маркер:
   • Между маркерите head> и / head> напишете заглавие> и / заглавие>
   • Между етикетите заглавие> и / заглавие> напишете Как да научите HTML - wikiHow.
   • Запазете промените си и отворете файла в браузър (или опреснете страницата, ако файлът вече е отворен). Виждате ли текста, който се появява в заглавието на страницата над адресната лента?
6. 6 Създайте тяло> раздел. Всички други тагове и текст в този пример са написани в основния раздел, чието съдържание се показва на страницата. След затварящ таг / глава>, но преди tag / html> добавяне на тагове тяло> и / тяло>... За останалата част от тази статия работете със секцията за тяло. Вашият файл трябва да изглежда така:
   html>
   глава>
   заглавие> Как да научите HTML - wikiHow / заглавие>
   / глава>
   тяло>
   / тяло>
   / html>
7. 7 Добавете текст, използвайки различни стилове. Време е да добавите истинското съдържание към страницата! Всичко, което пишете между маркерите на тялото, ще се показва на страницата, след като бъде опреснено в браузъра. Не използвай символи или >тъй като браузърът ще се опита да интерпретира съдържанието като маркер вместо текст. Пиши Здравейте! (или каквото искате), след това опитайте да добавите тези тагове към текста и вижте какво се случва:
   • em> Здравейте на всички! / em> прави текста „курсив“: Здравейте!
   • strong> Здравейте на всички! / strong> прави текста „удебелен“: Здравейте!
   • s> Здравейте на всички! / s> зачеркнат текст: Здравейте!
   • sup> Здравейте на всички! / sup> показва шрифта като горен индекс:
   • sub> Здравейте на всички! / sub> показва шрифта като индекс: _{Здравейте!}
   • Опитайте заедно различни тагове. Как ще изглежда em> strong> Здравейте на всички! / strong> / em>?
8. 8 Разделете текста на абзаци. Ако се опитате да напишете няколко реда текст в HTML файл, ще забележите, че прекъсванията на редовете не се показват в браузъра. За да разделите текста на абзаци, трябва да добавите тагове:
   • p> Това е отделен параграф. / p>
   • Това изречение е последвано от прекъсване на ред br> преди началото на този ред.
     Това е първият таг, който не изисква краен маркер. Тези тагове се наричат ​​„празни“ тагове.
   • Създайте заглавия, за да покажете заглавията на разделите:
     h1> текст на заглавието / h1>: най -голямото заглавие
     h2> текст на заглавието / h2> (заглавие второ ниво)
     h3> текст на заглавието / h3> (заглавие трето ниво)
     h4> текст на заглавието / h4> (заглавие четвърто ниво)
     h5> текст на заглавието / h5> (най -малкото заглавие)
9. 9 Научете се да създавате списъци. Има няколко начина за създаване на списъци на уеб страница. Опитайте опциите по -долу и решете коя ви харесва най -много. Обърнете внимание, че една двойка тагове е необходима за списъка като цяло (например ul> и / ul> за списък с маркиран списък) и всеки елемент от списъка е маркиран с различна двойка тагове, например li> и / li>.
   • Маркериран списък:
     ul> li> Първи ред / li> li> Втори ред / li> li> И така нататък / li> / ul>
   • Номериран списък:
     ol> li> One / li> li> Two / li> li> Three / li> / ol>
   • Списък с дефиниции:
     dl> dt> Кафе / dt> dd> - топла напитка / dd> dt> Лимонада / dt> dd> - студена напитка / dd> / dl>
10. 10 Оформете страницата с помощта прекъсвания на редове, хоризонтални линии и Снимки. Време е да добавите нещо различно от текст към страницата. Опитайте следните маркери или следвайте връзките за повече информация. Използвайте онлайн хостинг услуга, за да създадете връзка към изображението, което искате да публикувате:
    • Хоризонтална линия: hr>
    • Вмъкване на снимка: img src = "връзка към изображението">
11. 11 Добавете връзки. Можете да използвате тези тагове за създаване на хипервръзки към други страници и сайтове, но тъй като все още нямате уебсайт, сега ще научите как да създавате връзки за закрепване, тоест връзки към конкретни места на страница:
    • Създайте котва с маркер a>, към който искате да свържете на страницата. Измислете ясно и запомнящо се име:
      
      a name = "Tips"> Текстът, към който свързвате. / a>
    • Използвайте маркера href>, за да създадете относителна връзка или връзка към външен ресурс:
      
      a href = "връзка към страницата или име на котва в страницата"> Текст или изображение, което ще служи като връзка. / a>
    • За да свържете към относителна връзка на друга страница, добавете знак # след основната връзка и името на котвата. Например, https://en.wikihow.com/learn-HTML#Tips връзки към раздела за съвети на тази страница.

Част 2 от 2: Разширен HTML

1. 1 Запознайте се с атрибутите. Атрибутите се записват вътре в маркера, указвайки допълнителна информация. Форматът на атрибутите е следният: name = "стойност", където заглавие дефинира атрибут (например цвят за цветен атрибут), а стойността показва неговата стойност (например, червен за червено).
   • Атрибутите всъщност са били използвани в предишния раздел за основите на HTML. Тагът img> използва атрибута src, котвата за относителна връзка използва атрибута имеа връзките използват атрибута href... Както вече забелязахте, всички атрибути са написани във формат ___='___’.
2. 2 Експериментирайте с HTML таблици. Създаването на таблица включва използването на различни тагове. Можете да експериментирате или да прочетете по -подробни инструкции.
   • Създайте тагове за таблица:таблица> / таблица>
   • Оградете съдържанието на всеки ред в таблицата в тагове: tr>
   • Заглавието на колоната се определя от маркера: th>
   • Клетки в следващите редове: td>
   • Пример за използване на тези тагове:
     
     таблица> tr> th> Колона 1: месец / th> th> Колона 2: спестявания / th> / tr> tr> td> януари / td> td> 5000 рубли / td> / tr> / таблица>
3. 3 Научете допълнителните тагове за раздел глава. Вече сте научили head> tag, който идва в началото на всеки html файл. Освен tag> tag, има и други тагове за този раздел:
   • Мета тагове, които съдържат метаданниизползвани от търсачките за индексиране на сайта. За да улесните намирането на вашия сайт в търсачките, използвайте един или повече отварящи се мета> тагове (не се изискват затварящи тагове).Използвайте един атрибут и една стойност на етикет: meta name = "description" content = "page description">; или мета име = "ключови думи" content = "ключове, разделени със запетая">
   • Връзка> тагове, които сочат към файлове на трети страни, като стилови таблици (CSS), които са създадени с различен тип кодиране и ви позволяват да променяте HTML страницата с помощта на цвят, подравняване на текст и много други функции.
   • Скриптът> тагове, използвани за прикачване на JavaScript файлове към страницата. Тези файлове са необходими за интерактивна промяна на страницата (в отговор на действия на потребителя).
4. 4 Експериментирайте с HTML кода на други сайтове. Преглеждането на изходния код на други уеб страници е чудесен начин да научите HTML. Можете да щракнете с десния бутон върху страницата и да изберете Преглед на източника или нещо подобно от горното меню на вашия браузър. Опитайте се да разберете какво прави непознат маркер или потърсете в Интернет информация за него.
   • Въпреки че не можете да редактирате сайтове на други хора, можете да копирате изходния код във файла си, за да експериментирате с тагове по -късно. Моля, обърнете внимание, че CSS маркировката може да не е налична и цветовете и форматирането може да изглеждат различно.
5. 5 Започнете да изследвате по -подробни ръководства. В интернет има много сайтове, посветени на HTML тагове, като W3Schools или HTMLbook. В продажба има и хартиени книги, но се опитайте да намерите най -новото издание, тъй като стандартите се променят и развиват. Още по -добре, овладейте CSS, за да имате много по -голям контрол върху оформлението и външния вид на вашия сайт. След като научат CSS, уеб дизайнерите обикновено научават JavaScript.

Съвети

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

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

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

Какво ти е необходимо

• Текстов редактор като Notepad (Windows) или TextEdit (Mac)
• Хартия / бележник (не е задължително)
• HTML редактор като Notepad ++ (Windows) или TextWrangler (Mac) (не е задължително)