Како да научите HTML (со илустрации)

HTML е намалување од англиски Хипер текстуален јазик (Јазик за означување на хипертекстот). Овој код, или јазик на кој се создава основната ознака на сајтови. Ако никогаш не сте програмирани, учењето може да изгледа тешко, но всушност сè што ви е потребно за да започнете со учење е наједноставниот уредувач на текст и интернет прелистувачот. Можете дури и да научите неколку примери на HTML марки кои наидоа на вас на онлајн форуми, прилагодени сопствени страници или во статии од WikiHow. HTML - корисна алатка за секој интернет корисник, и проучување на базите ќе потрае помалку време отколку што мислите.

Чекори

Дел 1 од 2:

Проучување на темелите на HTML

Еден. Отворете го документот HTML. Повеќето текстуални уредници (лаптоп или Notepad ++ за Windows, Textedit за Mac, Gedit за GNU / Linux) може да се користат за да се создадат HTML-датотеки. Креирајте нов документ и зачувајте ја со помош на датотеката → Зачувајте го и во формат на веб-страница или ја менувате продолжувањето на датотеката .HTML или .Наместо тоа, HTM .Док, .Rtf или друга експанзија.

Предупредување може да се појави дека датотеката ќе биде зачувана како "едноставен текст" наместо формат RTF или дека форматирањето и сликата нема да бидат зачувани. Ова е нормално - за HTML овие опции не се потребни.

2. Отворете ја креираната датотека во прелистувачот. Зачувајте ја празната датотека, најдете ја на вашиот компјутер и отворете го двојниот клик на глувчето. Празна страница треба да се отвори во прелистувачот. Ако ова се случи, повлечете ја датотеката во лентата за адреси на вашиот прелистувач. Во процесот на уредување на HTML-датотека, можете да ја ажурирате оваа страница за да ги видите промените.

Забележете дека на овој начин не креирате веб-страница на интернет. Други луѓе немаат пристап до оваа страница, и не ви е потребна интернет конекција за да ја тестирате вашата локална страница. Прелистувачот едноставно го толкува HTML кодот, "читање", како да е ова веб-страница.

3. Разбере што се означуваат ознаки. За разлика од обичниот текст, ознаките не се прикажуваат на страната. Наместо тоа, тие го покажуваат прелистувачот, како да ја прикажат страницата и неговата содржина. Таг "Отворање" содржи инструкции. На пример, може да го информира прелистувачот дека текстот треба да биде прикажан како Задетен. Исто така, потребна е "затворање" ознака што го прикажува прелистувачот, каде што наставата завршува. Во овој пример, текстот помеѓу ознаките за отворање и затворање ќе биде прикажан со задебелени букви. Тагови се евидентираат во знаците на нееднаквоста, но затворачката ознака започнува со аранжман.

Отворената ознака е снимена помеѓу знаците за нееднаквост: <Отворање ознака>

Во завршната ознака пред дескрипторот (наслов), ознаката е косилна карактеристика: Затворање ознака>

Прочитајте за да дознаете за употребата на разни ознаки. За овој чекор, доволно е да се запамети формат за снимање. Тагови се евидентираат помеѓу знаците за нееднаквост: < > и

Во некои упатства, HTML тагови повик елементи, и текстот помеѓу отворање и затворање на таговите се нарекува содржината на елементот.

Четири. Бирајте во ознаката за уредување . Секоја HTML-датотека мора да започне со ознака И завршува со ознака . Овие ознаки го покажуваат прелистувачот дека целата содржина помеѓу ознаките е напишана во HTML. Додајте ги овие ознаки со вашиот документ:

Често HTML датотеки започнуваат од низата , што значи дека прелистувачите мора да ја препознаат целата датотека ashtml. Меѓутоа, оваа линија не е неопходна, може да помогне во решавањето на проблемите со компатибилноста.

Бирајте На врвот на документот.

Притиснете ENTER или вратете неколку пати за да креирате повеќе празни низи, а потоа напишете

се сеќавам дека Сите Кодот што ќе го креирате со следење на овој напис ќе треба да пишувате помеѓу овие две ознаки.

Пет. Креирајте дел во датотеката . Помеѓу ознаките и Направете ознака за отворање и затворање ознака . Додајте неколку празни линии меѓу нив. Содржина снимена помеѓу ознаките и , не е прикажано на самата страница. Следете ги овие чекори и ќе видите што е потребна оваа ознака:

Помеѓу ознаките и Напиши и

Помеѓу ознаките и Напиши Како да научите HTML - WikiHow.

Зачувајте ги промените и отворете ја датотеката во прелистувачот (или ажурирајте ја страницата ако датотеката е веќе отворена). Погледнете го текстот што се појавува во насловот на страницата над стрингот на адресата?

6. Креирај дел . Сите други ознаки и текст во овој пример се евидентираат во делот на телото, чија содржина е прикажана на страницата. После Затворање ознака, но порано Taging Tag Tag и . До крајот на овој напис, работи со дел од телото. Вашата датотека треба да изгледа такво нешто:



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

7. Додајте текст користејќи различни стилови. Време е да додадете моментална страница со содржини! Сите што пишувате помеѓу ознаките на телото ќе бидат прикажани на страната по ажурирањето во прелистувачот. Не користете Симболи < или >, Бидејќи прелистувачот ќе се обиде да ја протолкува содржината како ознака наместо текст. Напиши Здраво на сите! (или што сакаш), а потоа пробајте да ги додавате овие ознаки во текстот и да видите што се случува:

Здраво на сите! Доделување текст "Италија": Здраво на сите!

Здраво на сите! Го доделува текстот "задебелен": Здраво на сите!

Здраво на сите! Стори текст: ~~Здраво на сите!~~

Го прикажува фонтот како главен индекс:

_{Здраво на сите!} Го прикажува фонтот во форма на долниот индекс: _{Здраво на сите!}

Обидете се со различни ознаки заедно. Што ќе изгледа Здраво на сите!?

осум. Поделете го текстот на ставовите. Ако се обидете да напишете неколку линии на текст во HTML-датотеката, забележете дека паузите на редови не се прикажуваат во прелистувачот. За да го поделите текстот за ставовите, треба да додадете ознаки:

Ова е посебен став.

По таа реченица треба да биде јаз ред 
 Пред да започнете со оваа линија.

Ова е првата ознака што не бара затворање. Таквите ознаки се нарекуваат "празна".

Креирај наслови за прикажување на имиња на партиции:
Текст заглавие: Најголемиот насловот
Текст заглавие (насловот на второто ниво)
Текст заглавие (насловот на трето ниво)
Текст заглавие (Четврто заглавие)
Текст заглавие (најмал заглавие)

Девет. Научете како да креирате листи. Постојат неколку начини да креирате листи на веб-страница. Пробајте ги следните опции и одлучете што ви се допаѓа најдобро. Забележете дека е потребен еден пар ознаки за листа како целина (на пример

и За обележана листа), и секој елемент на листата е нагласен од друг пар на тагови, на пример

Обележана листа:

Прва линија
Втор низа
Итн

Нумерирана листа:

Еден

Двајца

Три

Листа на дефиниции:

Кафе
- Топла пијалок
Лимонада
- Студен пијалок

10. Земете страница користејќи Rasp редови, Хоризонтални линии и Слики. Време е да додадете нешто покрај текстот на страницата. Пробајте ги следните ознаки или следете ги линковите за да добиете повеќе информации. Користете онлајн хостинг за да креирате врска до сликата што сакате да ја објавите:

Хоризонтална линија:

Вметнете слика:

Единаесет. Додади линкови. Можете да ги користите овие ознаки за да креирате хиперлинкови на други страници и сајтови, но бидејќи немате веб-сајт, сега ќе научите како да креирате "сидро" врски, односно линкови до одредени места на страницата:

Креирајте ознака за прицврстување На местото на страната сакате да се однесувате. Дојдете со разбирливо и незаборавно име:

Текстот во кој се однесувате.

Користете ознака , За да креирате релативна врска или упатување на надворешниот ресурс:

Текст или слика која ќе служи како врска.

За да се однесуваат на релативната врска на друга страница, додадете знак # по главната врска и името на сидро. На пример, https: // ma.panoutx.info / lower-html # совети Се однесува на делот од советите на оваа страница.

Дел 2 од 2:

Напредно HTML ниво

Еден. Се запознаат со атрибути. Атрибути се евидентираат во внатрешноста на ознаката, што укажува на дополнителни информации. Формат на атрибути како: Наслов = "Вредност", Каде Име го одредува атрибутот (на пример, Боја За атрибутот во боја), а вредноста ја означува неговата вредност (на пример, црвено за црвено).

Атрибути всушност биле користени во претходниот дел од темелите на HTML. Таг Користи атрибут СРЦ, Сидрата на релативните врски го користи атрибутот Име, И линкови користат атрибут href. Како што веќе сте забележале, сите атрибути се напишани во формат ___ = "___".

2. Експериментирајте со HTML табели. Креирањето на табелата вклучува употреба на разни ознаки. Можете да експериментирате, или Прочитајте повеќе детални инструкции.

Креирајте тагови:

Содржината на секој ред на табелата влегува во Тагови:

Насловот на колоната е определена со ознаката:

Клетки во последователни линии:

Пример за користење на овие ознаки:

Колона 1: месец Колона 2: Заштеди
Јануари 5000 рубли

Колона 1: месец	Колона 2: Заштеди
Јануари	5000 рубли

3. Дознајте дополнителни ознаки за глава. Веќе сте ја научиле ознаката , Одење на почетокот на секоја HTML-датотека. Покрај ознаката , Постојат и други ознаки за овој дел:

Мета тагови, во кои се содржани Метаподатоци, што се користи од пребарувачите за индексација на сајтови. За да го направите вашиот сајт полесен во пребарувачите, користете едно или повеќе тагови за откривање (Завршни ознаки не се потребни). Користете еден атрибут и вредност на ознаката: - или

Тагови , Водејќи ги датотеките од трети страни, на пример, на стилски листови (CSS), кои се креираат со користење на друг тип на кодирање и ви овозможуваат да ја промените страницата HTML со користење на бои, усогласување со текст и многу други функции.

Тагови

Четири. Експериментирајте со HTML код на други сајтови. Одличен начин за истражување на HTML ќе го гледа изворниот код на други веб-страници. Можете да кликнете со десното копче на страницата и изберете "Преглед на изворниот код" или нешто слично во горниот мени на прелистувачот. Обидете се да одредите што прави некоја непозната ознака или бара информации за тоа на интернет.

Иако не можете да ги уредувате сајтовите на другите луѓе, можете да го копирате изворниот код во вашата датотека за да експериментирате со ознаките подоцна. Ве молиме имајте предвид дека оценката на CSS не може да биде достапна, а бојата и форматирањето може да изгледаат поинаку.

Пет. Студија подетални водичи. На интернет има многу сајтови посветени на 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)
Хартија / Notepad (не е потребно)
HTML уредник, како што е Notepad ++ (Windows) или TextWrangler (MAC) (не е потребно)