5 корака за разумевање основног ХТМЛ кода

5 корака за разумевање основног ХТМЛ кода

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





Погледаћемо неке основе језика, укључујући оно што ХТМЛ заиста јесте, неке основне концепте и његову интеракцију са другим језицима. Замислите ово као кратак курс „ХТМЛ за лутке“.



Основе ХТМЛ -а: Шта је ХТМЛ?

ХТМЛ стоји за Језик за опис хипер-текста . Иако је понекад повезан са програмским језицима, то није тачно.





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

Иако је једноставан, ХТМЛ је окосница сваке странице на вебу. Он је одговоран за то што се текст приказује подебљано, додавањем слика и повезивањем на друге странице. Имамо ХТМЛ ФАК који објашњава више.



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

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



Корак 1: Разумевање концепта ознака

ХТМЛ користи систем ознаке за категоризацију различитих елемената документа.

Већина ознака долази у паровима како би омотали захваћени текст унутар себе. Ево једноставног примера (



ознака прави текст одважан ; за тренутак ћемо о томе више разговарати.)

This is some bold text .

Обратите пажњу на то како завршна ознака почиње косом цртом (/). Ово означава завршну ознаку, што је важно. Ако не затворите ознаку, све ће од почетка па надаље имати тај атрибут.

шта учинити са старим мониторима са равним екраном

Међутим, немају све ознаке пар. Неки ХТМЛ елементи, тзв празни елементи , немају садржај и постоје самостално. Пример је


таг, који представља прелом редова. Такве ознаке можете „затворити“ додавањем косе црте (нпр


) али то није стриктно неопходно.

Корак 2: ХТМЛ изглед скелета

Одговарајући ХТМЛ документ мора имати одређене ознаке да би био правилно постављен. Ово су битни делови:

  • Сваки ХТМЛ документ мора почети са | _+_ | да се као такав изјасни. Дакле, његова завршна ознака, | _+_ | , је последња ставка у ХТМЛ датотеци.
  • Затим, | _+_ | одељак садржи информације као што су наслов странице, разне скрипте које се покрећу на страници и слично. Као што име говори, ово обично долази одмах након почетних | _+_ | таг. Крајњи корисник не види много садржаја у овим ознакама.
  • Коначно, | _+_ | ознака садржи текст странице који читалац види (плус много више). Овде ћете пронаћи слике, везе и још много тога.

Пошто је

одељак чини већину ХТМЛ документа, остатак нашег упутства разматра елементе који се на њега односе.

Корак 3: Основне ХТМЛ ознаке за обликовање

Затим, погледајмо неке уобичајене ознаке које чине ХТМЛ документе. Наравно, није могуће покрити сваки елемент, па ћемо прегледати неке од најважнијих. Покрили смо још много примера ХТМЛ -а ако вас ово не задовољава.

Ако вам се ове ознаке чине прилично основним, запамтите да је ХТМЛ створен све до 1993. године. Веб је тада био веома заснован на тексту у својим раним фазама.

Једноставно обликовање текста

ХТМЛ подржава основне стилове текста какве ћете пронаћи у Мицрософт Ворд -у:

  • | _+_ | ознаке праве текст одважан .
  • | _+_ | ознаке (што значи „нагласак“) ће курзивом текст.

ХТМЛ такође подржава старије

ознака за подебљано и

за курзив. Међутим, боље је користити горе наведене.

Укратко,

и

показују како нешто треба разумети, док вам последње ознаке само говоре како би требало да изгледа. Ове бивше ознаке су приступачније читачима екрана које користе особе са оштећеним видом.

Став и друге поделе

ХТМЛ -ови

таг вам омогућава да дефинишете део документа. Обично је ово упарено са ЦСС -ом (види доле) за форматирање одељка на одређени начин.

Тхе

ознака вам омогућава да текст поделите на пасусе. Прегледачи ће аутоматски поставити мало простора пре и после ових, омогућавајући вам да природно разбијете текст.

Можете додати заглавља у документ и олакшати праћење помоћу

кроз

ознаке. Х1 је најважније заглавље, док је Х6 најмање важно. Скоро сваки чланак МакеУсеОф -а користи Х2 и Х3 заглавља за организовање информација.

Ударање Ентер додавање прелома редова у ваш ХТМЛ документ их заправо неће приказати. Уместо тога, можете користити

да бисте додали прелом редова.

Ево примера који користи све ово:

Корак 4: Уметање слика

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

Убацујете слику помоћу

таг. Комбинујући ово са

Атрибут вам омогућава да наведете одакле желите да се слика учита.

Још један важан атрибут

ИП адреса сервера с0.2мдн.нет није пронађена.

ознаке је

. Замењени текст вам омогућава да опишете слику за читаче екрана или у случају да се слика не учита правилно. Пређите мишем преко слике да бисте видели њен алтернативни текст.

Користити

и




елемената за одређивање броја пиксела на којима се слика приказује.

Све то спојите и ознака слике изгледа овако:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



Ворлд Виде Веб не би био много веб без веза на друге странице. Помоћу

ознаку, можете се повезати са другим страницама у било ком тексту.

Унутар

src

ознака,

атрибут говори где се повезујете. Једноставно лепљење УРЛ -а ће добро функционисати. Можете користити

alt

елемент за додавање дела текста који се појави када неко пређе курсором преко везе.

Основна веза изгледа овако:

width

Тхе

height

таг има много других могућих елемената, али овде нећемо улазити у њих.

Како се ХТМЛ повезује са ЦСС -ом и ЈаваСцрипт -ом

Погледали смо основе ХТМЛ -а и начин на који успоставља веб страницу. Али као што можете замислити, ХТМЛ сам по себи није намењен модерном вебу. Једноставне ХТМЛ веб странице биле су уобичајене у данима „Веб 1.0“, када већина веб страница није била ништа више од статичког текста.

Али сада имамо много више. ЦСС (Цасцадинг Стиле Схеетс) је језик који се користи за описивање изгледа текста који сте припремили у ХТМЛ -у. Запамтите

Dr. Phil

ознака о којој смо разговарали? Унутар ове (и других ознака) можете дефинисати

атрибут. Затим, у свом пратећем ЦСС документу, можете написати упутства за то

треба погледати.

Ове елементе стила можете дефинисати у свом ХТМЛ коду, али то се сматра лошом праксом јер их је много теже одржавати. Сазнајте више са ови једноставни примери ЦСС -а . Такође се одјавите како да оптимизујете своје ЦСС датотеке .

ЈаваСцрипт

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

На пример, ЈаваСцрипт дозвољава веб локацији да вас упозори да лозинка коју сте унели не испуњава њене захтеве пре него што покушате да је пошаљете. Веб дизајнер може користити ЈаваСцрипт за кретање по сликама у слидесхов -у или затражити од корисника да унесе.

Ово је само неколико елементарних примера. ЈаваСцрипт је скриптни језик који може учинити много и релативно је компликованији од ХТМЛ -а и ЦСС -а. Види наш преглед ЈаваСцрипт -а за много више.

Разматрање комплетног опсега веб дизајна превазилази оквире овог чланка, али довољно је рећи да ХТМЛ комуницира са другим језицима како би створио веб странице које данас познајемо.

Еволуција ХТМЛ -а

Важно је напоменути да ХТМЛ није статичан. ХТМЛ је прошао кроз неколико ревизија, од којих је најновији ХТМЛ 5. Посебно, овај стандард подржава уграђивање видео записа уместо да се ослања на власничке формате попут Адобе Фласх -а.

Нове итерације ХТМЛ -а такође проглашавају одређене архаичне ознаке с времена на време застарелим. Ово укључује ужасне ознаке попут

href

и

title

(тај помицни и флеш текст) уобичајено виђен у дизајну веб странице 1990 -их. Зато имајте на уму да се стандарди временом мењају.

Мало ХТМЛ знања иде далеко

Кратко смо обишли како функционише ХТМЛ документ. Сада знате основе структуре веб страница. Чак и ако не наставите са прављењем веб страница, свеснији сте о вебу који свакодневно користите.

како направити гиф као позадину

Да бисте сазнали више, надоградите своје вештине развоја веба основним алатима, а затим се одјавите наш водич о томе како да дизајнирате своју прву веб локацију .

Кредит за слику: Белиаевскии/ Депоситпхотос

Објави Објави Твеет Емаил 5 савета за суперпуњење ваших ВиртуалБок Линук машина

Уморни сте од лоших перформанси које нуде виртуелне машине? Ево шта треба да урадите да бисте побољшали перформансе ВиртуалБок -а.

Прочитајте следеће Повезане теме
  • Програмирање
  • ХТМЛ
  • Веб Девелопмент
  • ЈаваСцрипт
  • Алати за вебмастере
  • Програмирање
  • ХТМЛ5
О аутору Бен Стегнер(Објављено 1735 чланака)

Бен је заменик уредника и онбоардинг менаџер у МакеУсеОф -у. Напустио је свој ИТ посао да би писао са пуним радним временом 2016. године и никада се није осврнуо. Он покрива техничке водиче, препоруке за видео игре и више као професионални писац више од седам година.

Више од Бена Стегнера

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

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