Учење ХТМЛ-а

Видео: Джо Диспенза. Творчество в квантовом поле, мысли и практика. Joe Dispenza. Draw your future

Садржај

На корак
1. део од 2: Учење основа ХТМЛ-а
2. део од 2: Учење напредног ХТМЛ-а
Савети
Упозорења
Неопходности

ХТМЛ је скраћеница за Језик за опис хипер-текста, то је код или Језик која се користи за израду веб страница. Можда изгледа компликовано ако никада раније нисте програмирали, али да бисте испробали све што вам треба је једноставан програм за обраду текста и интернет прегледач. Можда ћете препознати неки ХТМЛ са форума, мрежних профила или чланака викиХов. ХТМЛ је користан ресурс за свакога ко користи Интернет, а учење ХТМЛ-а може потрајати краће него што бисте очекивали.

На корак

1. део од 2: Учење основа ХТМЛ-а

Отворите ХТМЛ документ. Већина програма за обраду текста, укључујући Нотепад или Ворд за Виндовс и Тект Едитор за Мац, могу се користити за креирање ХТМЛ докумената. Отворите нови документ и у горњем менију изаберите Датотека → Сачувај као да бисте документ сачували као веб страницу или промените екстензију датотеке из ".доц", ".ртф" или било шта друго у ".хтмл" или ".хтм ".
- Сада ћете видети упозорење да се ваш документ мења из формата обогаћеног текста (РТФ) у формат „обичног текста“ и да неке опције форматирања и слике нису правилно сачуване. Ово упозорење можете занемарити; ХТМЛ документи не користе ове опције.
- Датотеке .хтмл и .хтм су исте. Обоје успева.
Прегледајте свој документ помоћу прегледача. Сачувајте празан документ, затворите га, а затим двапут кликните на документ на месту где је сачуван да бисте га поново отворили. Ваш прегледник би сада требало да отвори ваш документ као празну веб страницу. Ако то не успе, превуците икону датотеке на траку за адресу прегледача. Касније, ако уредите ХТМЛ документ пратећи кораке у овом чланку, враћаћете се у прегледач да бисте проверили како изгледају промене у коду.
- Напомена: Ваша веб страница још увек није на мрежи. Страница није доступна другима и није вам потребна функционална интернет веза да бисте је тестирали. Ви само користите свој прегледач да бисте „читали“ ХТМЛ документ као да је веб локација.
Схватите шта су „ознаке“. Ознаке нису видљиве на завршној веб страници, као што то може уобичајени текст. Ознаке вашем прегледачу говоре како да прикаже страницу и садржај на страници. Почетна ознака садржи упутства. На пример, претраживачу може рећи да текст приказује подебљано. Крајња ознака је потребна да би претраживачу рекла где се примењују упутства: у овом примеру сав текст између почетне и крајње ознаке је подебљан. Крајње ознаке се такође постављају унутар заграда, али коса црта прати прву заграду.
- У заграде напиши почетне ознаке: ово је почетни дан>
- У заграде напишите крајње ознаке, али ставите косу црту након прве заграде: /ово је завршна ознака>)
- Прочитајте касније у чланку како писати функционалне ознаке. У овом кораку само треба да запамтите на који начин да напишете ознаке:> и />.
- У другим ХТМЛ течајевима ознаке се такође називају „елементи“, а текст између отварања и затварања ознака назива се „садржај елемента“.
Напишите свој први хтмл> таг. Сваки ХТМЛ документ започиње словом хтмл>ознака и завршава се словом / хтмл>ознака. Ово говори претраживачу да је све између ових ознака написано у ХТМЛ-у. Додајте ове ознаке у свој документ:
- Напишите хтмл> на врху вашег документа.
- Притисните неколико пута да бисте унели или вратили да бисте си дали мало простора, а затим напишите / хтмл>
- Сећам се да си све у овом чланку између ове две ознаке.
Нека глава> буде део вашег документа. Између ознака хтмл> и / хтмл> пишете а глава>старт таг и а / хеад>-завршна ознака. Поново направите размак између ових ознака. Све написано између ових ознака неће бити видљиво на самој веб страници. Испробајте следеће кораке и погледајте да ли можете да видите где се информације приказују:
- Напишите између ознака хеад> и / хеад>: наслов> и / титле>
- Између ознака титле> и / титле> пишете: Како научити ХТМЛ (са сликама) - викиХов.
- Спремите документ и отворите га у прегледачу (или сачувајте документ и освежите страницу у прегледачу ако је страница и даље била отворена). Да ли видите оно што сте управо написали на врху странице, изнад траке за адресу?
Направите тело> одељак. Све остало у овом почетном документу смештено је у одељак боди> и приказано је на веб страници. После ознака / глава>, али испред ознака / хтмл> коју напишете тело> и / боди>. Све о чему ћемо даље разговарати у овом чланку, постављамо између ознака тела. Сада бисте требали имати документ који изгледа овако (без метака):
- хтмл>
- глава>
- титле> научи ХТМЛ - викиХов / титле>
- / хеад>
- тело>
- / боди>
- / хтмл>
Додајте текст у различитим стиловима. Сад је време да почнете да пишете нешто што ће заправо бити видљиво у прегледачу! Све што напишете унутар ознака тела биће видљиво у прегледачу након што сачувате промене и освежите страницу у прегледачу. Напишите не нешто са знаковима и >јер ће ваш прегледач то протумачити као ХТМЛ упутства уместо као обичан текст. Напишите на пример Здраво Свете! (На енглеском за „Хелло ворлд!“, Ово је глобални стандардни текст као први пример у било ком курсу програмирања на одређеном програмском језику) или нешто друго, и ставите следеће ознаке пре и после текста и погледајте шта ће се догодити:
- ем> Здраво свете! / ем> изгледа у курзиву: Здраво Свете!
- јак> Здраво свете! / јак> изгледа подебљано: Здраво Свете!
- с> Здраво свете! / с> изгледа као прецртани текст: ~~Здраво Свете!~~
- суп> Здраво свете! / суп> изгледа као надпис:
- суб> Здраво свете! / суб> изгледа као натпис: _{Здраво Свете!}
- Испробајте комбинације: Како види ем> јак> Здраво свете! / јак> / ем> изађи?
Поделите свој текст на пасусе. Ако у документ ставите различите редове текста, видећете да су сви редови постављени један за другим. Нове линије и празне редове морате сами програмирати:
- п> Ово је засебан одељак./п>
- Ова реченица је у првом реду, а ова реченица у следећем.
  Ово је прва ознака на коју наилазимо и којој није потребна завршна ознака! Такву ознаку називамо једном празна ознака.
- Направите заглавља како бисте појаснили називе одељака:
  х1> заглавље / х1>: највеће могуће заглавље
  х2> заглавље / х2> (заглавље на два нивоа)
  х3> заглавље / х3> (заглавље на три нивоа)
  х4> заглавље / х4> (заглавље од 4 нивоа)
  х5> заглавље / х5> (најмањи могући заглавље)
Научите како да правите листе. Постоји неколико начина за креирање листа на веб страници. Испробајте следеће методе да бисте сазнали шта вам се највише свиђа. Имајте на уму да је један пар ознака постављен око целе листе (као што су ул> и / ул> ознаке за неуређене листе) и да је различит пар ознака постављен око сваке ставке на листи, као што су ли> и / ли> .
- Користите следећи код за прављење набраних листа:
  ул> ли> Једна ставка / ли> ли> Друга ставка / ли> ли> Друга ставка / ли> / ул>
- Или овај код за стварање нумерисаних листа:
  ол> ли> Предмет 1 / ли> ли> Предмет 2 / ли> ли> Предмет 3 / ли> / ол>
- Или овај код за стварање такозване листе дефиниција:
  дл> дт> Кафа / дт> дд> - Топли напитак / дд> дт> Млеко / дт> дд> - Хладно пиће / дд> / дл>
Учините своју страницу атрактивнијом помоћу нових линија, водоравних линија и слика. Сада је време да почнете да додајете друге ствари на своју страницу. Испробајте следеће ознаке (слика мора бити објављена на мрежи да бисте могли да користите везу до слике):
- Убаци ред: бр> или хр>
- Уметни слике: имг срц = "тхе_урл_оф_иоур_имаге">
Уметните везе до других места на страници. Ову шифру можете користити и за повезивање са другим страницама и веб локацијама, али пошто још увек немате веб локацију, усредсредићемо се на „сидра“, а то су одређена места на страници до којих можете повезати:
- Прво створите сидро са ознаком а> на месту на страници на коју желите да повежете. Дајте свом сидру јасно име које је лако запамтити:
  
  а наме = "Типс"> Ово је текст око којег постављате сидро. / а>
- Користите ознаку хреф> за везу до вашег сидра или друге веб странице:
  
  а хреф = "урл веб странице или име сидра на овој страници"> Овде напишите текст или слику приказану као веза. / а>
- Да бисте се повезали са сидром на другој страници, додајте знак # након урла, а затим име сидра. На пример, хттп://ввв.викихов.цом/ХТМЛ-лерен#Типс ће вас одвести директно до одељка „Савети“ на овој страници.

2. део од 2: Учење напредног ХТМЛ-а

Сазнајте више о атрибутима. Атрибути се постављају унутар ознаке и користе се за додатна прилагођавања „садржаја елемента“ између почетне и крајње ознаке. Никада не стоје сами. Они су написани на следећи начин: наме = "вредност". име представља име атрибута (на пример, "боја") и вредност описује овај конкретан случај (нпр. „црвени“).
- Ако сте пажљиво погледали претходни део овог чланка, већ сте се сусрели са атрибутима. Ознака имг> користи атрибут срц, сидро користи атрибут име а везе користе атрибут хреф. Можете рећи да су све величине ___='___’ пратити.
Експериментишите са ХТМЛ табелама. Да бисте направили табелу или графикон, потребно вам је неколико ознака:
- Почните са ознакама табеле („табела“ на енглеском) око целе табеле:табле> / табле>
- Поставите ознаке око садржаја сваког реда: тр>
- Поставите заглавља колона у први ред: тх>
- Поставите ћелије у узастопне редове: тд>
- Ово је пример како се све ово спаја:
  
  табела> тр> тх> Колона 1: Месец / месец> тх> Колона 2: Уштеђени новац / тх> / тр> тр> тд> Јануар / тд> тд> 100 € / тд> / тр> / табела>
Научите остале ознаке коришћене у одељку главе. Већ сте научили ознаку хеад>, коју стављате на почетак сваког документа. Поред наслова> таг, у одељку главе могу бити и друге ознаке:
- Метатагови се користе за стварање метаподаци о веб страници. Ови подаци користе претраживачи за категоризацију веб страница. Да бисте своју страницу учинили видљивом претраживачима, можете да поставите једну или више метатагова (крајње ознаке нису потребне), свака ознака мора да садржи тачно један атрибут имена и атрибут садржаја, на пример: мета наме = "десцриптион" цонтент = "овде ставите опис ">; или мета наме = "кеивордс" цонтент = "овде напишите листу кључних речи, увек одвојених зарезом">
- ознаке линк> користе се за повезивање других датотека са страницом. Типично се користе за повезивање ЦСС листова стилова са ХТМЛ страницама, ове странице су направљене са другом врстом кода и користе се за одређивање укупног стила странице.
- скрипте> ознаке се користе за повезивање јавасцрипт датотека са ХТМЛ страницом. Јавасцрипт омогућава да се страница мења ако корисник нешто уради на страници.
Играјте се са ХТМЛ-ом са постојећих страница. Преглед изворног кода веб страница је одличан начин да проширите своје знање о ХТМЛ-у. Кликните десним тастером миша на страницу и одаберите „Прикажи извор“, „Прикажи извор странице“ или слично. Сазнајте шта ради одређена ознака коју не знате или потражите одговор на мрежи.
- Не можете уређивати туђе веб локације, али можете копирати ХТМЛ код у свој документ и поиграти се с њим да бисте видели шта раде различита прилагођавања. Напомена: јер многе веб странице користе ЦСС табеле стилова, можда нећете моћи да видите много боја или других стилова.
Сазнајте о ХТМЛ-у читајући детаљније чланке. На Интернету постоји много ресурса за савладавање више ХТМЛ тагова као што су В3Сцхоолс или Цодецадеми. Доступно је и много ХТМЛ књига, али обавезно користите недавно издање јер се ХТМЛ стандард с времена на време мења. Када савладате ХТМЛ на добром нивоу, можете се обратити ЦСС-у за већу контролу над дизајном и стилом ваше веб странице. После тога, следећи корак је обично јавасцрипт.

Савети

Може бити корисно пронаћи једноставну веб страницу на Интернету, а затим почети да се зезате са кодом. Покушајте да преместите мало текста, промените фонт, промените слике, шта год желите!
Можете да користите бележницу да запишете код, тако да имате на шта да се вратите ако се ни на тренутак не сетите. Ову страницу можете и одштампати и задржати за референцу.
КСМЛ и РСС се данас све више користе на веб локацијама. Код може изгледати неприступачно за људско око, посебно када се гледа у изворном коду, али функционалност може бити корисна.
Ознаке које се користе у ХТМЛ-у не разликују велика и мала слова, али подразумевано је да се користе мала слова (као што то радимо у овом чланку). Мала слова за ознаке се топло препоручују, такође због компатибилности са КСХТМЛ-ом.

Упозорења

Неке ознаке се више не користе и замењене су другим ознакама које раде исто, али често нуде више опција.
Ако желите да будете сигурни да је ваша страница у складу са ХТМЛ стандардом, посетите веб локацију В3 да бисте тестирали свој код у складу са тренутним стандардом. Многе ознаке су застареле и замењене су ознакама које боље функционишу у модерним прегледачима.

Неопходности

Програм за обраду текста, као што је Нотепад (Виндовс) или Тект Едитор (Мац).
лист папира или свеску (опционо)
Програм посебно дизајниран за писање ХТМЛ-а, као што је Нотепад ++ за Виндовс или ТектВранглер за Мац (опционо)