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