Изучаване на HTML

Видео: HTML & CSS Fundamentals - Flexbox - Константин Данков - TeachMe

Съдържание

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

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

Стъпвам

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

Отворете HTML документ. Повечето програми за обработка на текст, включително Notepad или Word за Windows и Text Editor за Mac, могат да се използват за създаване на HTML документи. Отворете нов документ и изберете File → Save As от горното меню, за да запазите документа си като уеб страница, или променете разширението на файла от ".doc", ".rtf" или нещо друго на ".html" или ".htm ".
- Вече можете да видите предупреждение, че вашият документ се променя от формат на обогатен текст (RTF) във формат „обикновен текст“ и че някои опции за форматиране и изображения не се запазват правилно. Можете да игнорирате това предупреждение; HTML документите не използват тези опции.
- Файловете .html и .htm са еднакви. И двете работи.
Преглеждайте документа си с браузър. Запазете празния си документ, затворете го и след това щракнете двукратно върху документа на мястото, където е бил запазен, за да го отворите отново. Вашият браузър вече трябва да отваря вашия документ като празна уеб страница. Ако това не работи, плъзнете иконата на файла в адресната лента на вашия браузър. По-късно, ако редактирате вашия HTML документ, следвайки стъпките в тази статия, ще продължите да се връщате към браузъра, за да проверите как изглеждат промените в кода.
- Забележка: Вашата уеб страница все още не е онлайн. Страницата не е достъпна за другите и не се нуждаете от работеща интернет връзка, за да я тествате. Просто използвате браузъра си, за да „прочетете“ HTML документа, сякаш е уебсайт.
Разберете какво представляват „таговете“. Етикетите не се виждат на крайната уеб страница, както може нормалният текст. Етикетите казват на браузъра ви как да показва страницата и съдържанието на страницата. Началният маркер съдържа инструкции. Например, той може да каже на браузъра да показва текста с получер шрифт. Крайният маркер е необходим, за да каже на браузъра къде се прилагат инструкциите: в този пример целият текст между началния и крайния маркер е получер. Крайните тагове също се поставят в скоби, но наклонената черта следва първата скоба.
- Запишете начални тагове в скоби: това е началният ден>
- Напишете крайни тагове в скоби, но поставете наклонена черта след първата скоба: /това е затварящият маркер>)
- Прочетете по-късно в статията как да пишете функционални тагове. В тази стъпка просто трябва да запомните кой начин да пишете тагове:> и />.
- В други HTML курсове етикетите също се наричат "елементи", а текстът между отварящите и затварящите тагове също се нарича "съдържание на елемента".
Напишете първия си html> таг. Всеки HTML документ започва с html>таг и завършва с a / html>етикет. Това казва на браузъра, че всичко между тези тагове е написано в HTML. Добавете следните маркери към вашия документ:
- Пишете html> в горната част на вашия документ.
- Натиснете Enter или се върнете няколко пъти, за да си осигурите малко пространство, след което напишете / html>
- Помня те всичко в тази статия между тези два маркера.
Направете главата> част от вашия документ. Между маркерите html> и / html> пишете a глава>начален таг и a / глава>-end таг. Направете малко пространство отново между тези тагове. Всичко написано между тези тагове няма да се вижда на самата уеб страница. Опитайте следните стъпки и вижте дали можете да видите къде се показва информацията:
- Запишете между маркерите head> и / head>: заглавие> и / заглавие>
- Между таговете title> и / title> пишете: Как да науча HTML (със снимки) - wikiHow.
- Запазете документа и го отворете в браузър (или запазете документа и опреснете страницата в браузъра, ако страницата все още е отворена). Виждате ли това, което току-що написахте, в горната част на страницата, над адресната лента?
Създайте тяло> раздел. Всичко останало в този документ за начинаещи се поставя в раздела body> и се показва на уеб страницата. След етикетът / главата>, но пред етикетът / html> пишете тяло> и / body>. Всичко, което обсъждаме по-нататък в тази статия, поставяме между маркерите на тялото. Вече трябва да имате документ, който изглежда така (без символите):
- html>
- глава>
- заглавие> научете HTML - wikiHow / заглавие>
- / глава>
- тяло>
- / body>
- / html>
Добавете текст в различни стилове. Сега е време да започнете да пишете нещо, което всъщност ще се вижда в браузъра! Всичко, което напишете в маркерите на тялото, ще се вижда в браузъра, след като запазите промените и опресните страницата в браузъра. Пишете не нещо със знаците и >защото вашият браузър ще интерпретира това като HTML инструкция вместо обикновен текст. Пишете например Здравей свят! (На английски за „Hello world!“, Това е глобалният стандартен текст като първия пример във всеки курс по програмиране на определен език за програмиране) или нещо друго и поставете следните тагове преди и след текста и вижте какво се случва:
- em> Здравей, свят! / em> прилича на курсив текст: Здравей свят!
- силен> Здравей, свят! / силен> изглежда като получер текст: Здравей свят!
- s> Здравей, свят! / s> изглежда като зачеркнат текст: ~~Здравей свят!~~
- sup> Здравей, свят! / sup> изглежда като индекс:
- sub> Hello world! / sub> изглежда като надпис: _{Здравей свят!}
- Изпробвайте комбинации: Как вижда em> strong> Hello world! / strong> / em> излез?
Разделете текста си на параграфи. Ако поставите различни редове текст във вашия документ, ще видите, че всички редове са поставени един след друг. Трябва сами да програмирате нови и празни редове:
- p> Това е отделен раздел. / p>
- Това изречение е на първия ред, а това изречение на следващия.
  Това е първият таг, който срещаме и който не се нуждае от краен маркер! Ние наричаме такъв етикет един празен таг.
- Създайте заглавки, за да направите имената на разделите ясни:
  h1> заглавка / h1>: възможно най-големият хедър
  h2> заглавка / h2> (заглавката от 2 нива)
  h3> заглавка / h3> (заглавката от 3 нива)
  h4> заглавка / h4> (заглавката от 4 нива)
  h5> заглавка / h5> (възможно най-малката заглавка)
Научете как да правите списъци. Има няколко начина за създаване на списъци на уеб страница. Опитайте следните методи, за да разберете какво ви харесва най-много. Обърнете внимание, че една двойка тагове се поставя около целия списък (като ul> и / ul> тагове за неподредени списъци) и че около всеки елемент в списъка се поставя различна двойка маркери, като li> и / li> .
- Използвайте следния код, за да създадете списъци с водещи символи:
  ul> li> Един елемент / li> li> Друг елемент / li> li> Друг елемент / li> / ul>
- Или този код за създаване на номерирани списъци:
  ol> li> Позиция 1 / li> li> Позиция 2 / li> li> Позиция 3 / li> / ol>
- Или този код, за да създадете така наречения списък с дефиниции:
  dl> dt> Кафе / dt> dd> - Топла напитка / dd> dt> Мляко / dt> dd> - Студена напитка / dd> / dl>
Направете страницата си по-привлекателна с нови линии, хоризонтални линии и изображения. Сега е време да започнете да добавяте други неща към вашата страница. Опитайте следните етикети (изображението трябва да бъде публикувано онлайн, за да можете да използвате връзка към изображението):
- Поставете ред: br> или hr>
- Вмъкване на изображения: img src = "the_url_of_your_image">
Поставете връзки към други места на страницата. Можете също да използвате този код за връзка към други страници и уебсайтове, но тъй като все още нямате уебсайт, ще се съсредоточим върху „котви“, които са конкретни места на страницата, към които можете да направите връзка:
- Първо, създайте котва с маркера a> в точката на страницата, към която искате да свържете. Дайте на котвата си ясно име, което е лесно за запомняне:
  
  a name = "Tips"> Това е текстът, около който поставяте котвата си. / a>
- Използвайте маркера href>, за да свържете към вашата котва или към друга уеб страница:
  
  a href = "url на уеб страницата или име на котва на тази страница"> Тук напишете текста или изображението, показани като връзка. / a>
- За да направите връзка към котва на друга страница, добавете символа # след URL адреса, последван от името на котвата ви. Например http://www.wikihow.com/HTML-leren#Tips ще ви отведе директно до раздела "Съвети" на тази страница.

Част 2 от 2: Изучаване на напреднал HTML

Научете за атрибутите. Атрибутите се поставят в маркера и се използват за допълнителни корекции на „съдържанието на елемента“ между началния и крайния маркер. Те никога не стоят сами. Те са написани по следния начин: name = "стойност". име представлява името на атрибута (например "цвят") и стойност описва този конкретен случай (напр. "червен").
- Ако сте разгледали внимателно в предишната част на тази статия, вече сте срещнали атрибути. Тагът img> използва атрибута src, котва използва атрибута име и връзките използват атрибута href. Можете да кажете, че всички са с размери ___='___’ да последвам.
Експериментирайте с HTML таблици. За да направите таблица или графика, имате нужда от няколко маркера:
- Започнете с етикетите на таблицата ("таблица" на английски) около цялата таблица:таблица> / маса>
- Поставете маркери около съдържанието на всеки ред: tr>
- Поставете заглавките на колоните в първия ред: th>
- Поставете клетки в последователни редове: td>
- Това е пример за това как всичко това се събира:
  
  таблица> tr> th> Колона 1: Месец / th> th> Колона 2: Спестени пари / th> / tr> tr> td> Януари / td> td> 100 € / td> / tr> / таблица>
Научете другите маркери, използвани в главата. Вече сте научили маркера head>, който поставяте в началото на всеки документ. В допълнение към заглавието> таг, в секцията за глава може да има и други тагове:
- За създаване се използват мета тагове метаданни за уеб страница. Тези данни се използват от търсачките за категоризиране на уеб страници. За да направите страницата си видима за търсачките, можете да поставите един или повече мета тагове (крайните маркери не са необходими), всеки маркер трябва да съдържа точно един атрибут на име и атрибут на съдържанието, например: meta name = "description" content = "поставете тук описание ">; или meta name = "keywords" content = "напишете тук списък с ключови думи, винаги разделени със запетая">
- link> таговете се използват за свързване на други файлове към страницата. Обикновено се използват за свързване на CSS таблици със стилове с HTML страници, тези страници са конструирани с различен вид код и се използват за определяне на общия стил на страницата.
- таговете> се използват за свързване на javascript файлове с HTML страницата. Javascript позволява страницата да се променя, ако потребителят направи нещо на страницата.
Играйте с HTML от съществуващи страници. Преглеждането на изходния код на уеб страници е чудесен начин да разширите познанията си по HTML. Щракнете с десния бутон върху страницата и изберете „Преглед на източника“, „Показване на източника на страницата“ или подобни. Разберете какво прави определен маркер, който не знаете, или потърсете отговора онлайн.
- Не можете да редактирате уебсайтове на други хора, но можете да копирате HTML кода в собствения си документ и да си поиграете с него, за да видите какви са различните настройки. Забележка: тъй като много уебсайтове използват CSS таблици със стилове, може да не успеете да видите много цветове или други стилове.
Научете за HTML, като прочетете по-задълбочени статии. В интернет има много ресурси за овладяване на повече HTML тагове като W3Schools или Codecademy. Налични са и много HTML книги, но се уверете, че използвате скорошно издание, тъй като HTML стандартът се променя от време на време. След като овладеете HTML до добро ниво, можете да се обърнете към CSS за повече контрол върху дизайна и стила на вашата уеб страница. След това следващата стъпка обикновено е javascript.

Съвети

Може да е полезно да намерите проста уеб страница в Интернет и след това да започнете да се забърквате с кода. Опитайте се да преместите малко текст, да промените шрифта, да промените изображенията, каквото искате!
Можете да използвате тетрадка, за да запишете кода, така че да имате на какво да се върнете, ако не го запомните за миг. Можете също да отпечатате тази страница и да я запазите за справка.
В днешно време XML и RSS се използват все по-често на уебсайтовете. Кодът може да изглежда недостъпен за човешкото око, особено когато се гледа в изходния код, но функционалността може да бъде полезна.
Маркерите, използвани в HTML, не са чувствителни към малки и малки букви, но по подразбиране се използват малки букви (както правим в тази статия). Силно се препоръчват малки букви за маркерите, също и за съвместимост с XHTML.

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

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

Необходимост

Програма за текстообработка, като Notepad (Windows) или Text Editor (Mac).
лист хартия или тетрадка (по избор)
Програма, специално проектирана за писане на HTML, като Notepad ++ за Windows или TextWrangler за Mac (по избор)