>> Давен Фарнхам: Данас, ја ћу да причати мало о ХТМЛ,
ХиперТект Маркуп Лангуаге.
Видиш ХТМЛ свуда ових дана.
У ствари, ако гледаш ово Видео у прегледачу, ти си
ХТМЛ виде одмах.
ХТМЛ није програмски језик, а, то је језик за означавање користи
веб прегледачи ће рендер странице на интернету.
>> Дакле, можете питати, како тачно пише Веб страница у ХТМЛ разликује
од писања програма у програмирању језик као Ц?
Па, Ц је језик са веома строг синтаксичких правила која треба да се
саставио пре него што може да се покрене.
Ако сте икада заборавио да укључи зарез на крају изјаве у
Ваша Ц код, знаш шта ја говорим о у односу на строгој синтаксе.
>> Веб претраживачи иако, су мало више праста када је у питању ХТМЛ.
Чак и ако је ваш ХТМЛ није синтаксички тачно, ваша страна може још увек бити
приказује у бровсеру, али да би могло не изгледају онако како сте желели.
Дакле, увек је најбоље да се пратите правила.
Најбољи начин да добијете интуицију о томе како се ствари раде је да
пролазе кроз пример.
>> Дакле, оно што имамо овде је основни план за веб страницу.
Вероватно сте приметили много ствари између угаоним заградама.
Па, они су само ознаке.
Ознаке основи информишу веб бровсера да, хеј, нешто
долази свој пут.
Запамтите ипак, сваки пут када отворите ознака, потребно је да га затворите након што су
урадио да га користите.
>> Тако, на пример, ја отворим одељак кода са отвореног
носач тело, затворена заграда.
Онда сам додати неки текст, у овом случају, мој прва страница онда када сам отишао у
затварање овог одељка, ја користим скоро идентичне ознаке осим овог пута са
коса црта пре телом.
У принципу, то је формат који сте намеравате да користите сваки пут када отварате
и затварања ознаке.
Заједно, отворен ознаке и завршна ознака компонује оно што се зове елемент.
>> Ако погледате први ред, ви ћете види узвичника затим
ДОЦТИПЕ хтмл.
Ово је стварно само говори прегледач да је фајл веб страница
написан у ХТМЛ-у.
ХТМЛ таг у суштини каже, Овде долази неки ХТМЛ.
Онда имамо главу ознаку са Титле таг унутар њега.
Глава ознака можете мислити као који садржи ХТМЛ код који долази за
највећи део ваше веб страница је стварни садржај.
>> У принципу, ставите наслов ваше Веб страница овде, мада постоје неке
друге ознаке које се појављују и овде.
Затим долази тело својој веб страници је, Стварна месо и кости вашег сајта.
У нашем примеру, ми смо само ставили једноставан реченица, Мој први страница,
који, ако смо покренули наш сајт, ће изгледати мало нешто овако.
Наша веб страница није превише настран, али не брините.
Ми ћемо га дотерам ускоро.
>> Дакле, горе ХТМЛ, ми ћемо вам дати врло основни шаблон за веб странице,
ништа фенси, само голе кости.
Али ако Правим веб странице, шта ако ја желим да додам
слика, рецимо, себе?
Па, ја могу то да урадим.
Постоји неколико начина да се додајте слике на вашем сајту.
Ако је слика у истом фолдеру као и Ваш ХТМЛ фајл, можете да повежете са
слика преко путу овако.
>> Можете отворити са слике таг следи по у Алт атрибут у
извор слике.
Вредност АЛТ атрибут је само неки алтернативни текст у случају корисник не може
види слику.
Алтернативно, можете да повежете са слике преко пуне УРЛ адресе, као што је овај.
Сада, да сајт не постоји стварно, али ако је било слика
ја на тој адреси, ја могу да користим изворни УРЛ да укључи
његова слика на мом сајту.
У сваком случају, можете завршити са много лепши сајт, нешто овако.
>> Па, то је прилично кул, али ја некако од желе неки текст и овде.
Дакле, хајде да додам супер једноставно изнад
слика, као заглавље.
Све сам урадио до сада је користити заглавље ознака, Х1, а прелом реда ознака, бр.
Заглавље ознака чини фонт мало нешто већи и израженији.
Прелом ознака, на другом рука, је некако кул.
За разлику од већине других ознака, не морате ознака отварање и затварање пауза, само
један је приказано изнад.
То је зато што пауза нема садржаја и стога је, празан елемент.
>> Празни елементи као што је овај, можете да отворите и затвори истовремено једноставно
укључујући и косом цртом на Крај почетне декларације.
Дакле, сада је мој сајт изгледа мало нешто овако.
Боље, али се некако осећа као ћорсокак.
Има где да одем по страни из ове главне странице.
Па, хајде да средимо по са линком.
>> Шта ћу да радим овде је користити атрибут означен А и да
линк на слике, рецимо, ЦС50 ТВ.
На тај начин, сваки пут када неко кликне на мене, њихов претраживач ће бити усмерена на
други, вероватно више користан, веб страница.
Ја сам морао да се смањи величину текст мало јер наш веб страница је
постаје напредније.
Али надамо се, и даље је јасно.
Мој сајт изгледа потпуно исто само Сада, кад год кликнем на слику,
мој прегледач ће отворити још један Картица за ЦС50.тв веб страници.
>> На крају, рецимо да ћу стилу овај сајт касније користећи ЦСС.
ЦСС је оно што је познато као каскадног стила.
И то је у основи обезбеђује ефикасан начин да измените и стил
слични блокови кода.
Желим да почнем да организујем свој ХТМЛ то лакше обликовати касније.
Ево, поставио сам се две различите врсте идентификатори који ће вам помоћи организовати свој код.
Ја сам користио ИД атрибут унутар подела, или див таг, и ја сам користио
Класа атрибут унутра још један див таг.
>> ИД и Цласс атрибути раде на сличан начин.
Једина разлика је што само може имати један елемент, специфичне ИД, али
било који број елемената могу да деле класу.
Тако, на пример, ја могу да користим класу слика више пута, али ја не могу
створити још једну поделу са ИД врха.
Иако нисам отишао у ЦСС, други језик обично користи
заједно са ХТМЛ, кад почнем стајлинг мој код са ЦСС, ја могу да користе ове
организационих приписује утицај естетика мојој веб страници је.
>> Све у оквиру дивизије врх ће имати сличне стајлинг или било
друга група ХТМЛ И групе у класа слика ће деле сличан изглед.
То је много лакше него покушава да измените и стил слике или блокови
текст појединачно.
>> Тако смо отишли ​​преко основе како да направи веб страницу са ХТМЛ.
ХТМЛ има превише гомилу других функција да када упарен са другим језицима
као ЦСС и ЈаваСцрипт, може заиста направити странице истичу.
Најбољи начин да се удобно са ХТМЛ је само да се зезају са тим,
види шта ради, а шта не.
>> Моје име је Давен Фарнам.
То је ЦС50.
>> Тако, на пример, ја могу да користим класа слика -
Не, постоји толико много атрибути.
Моје име је Давен Фарнам.
Ово је ЦС 650.
Хоћу да кажем ЦСС.
Ово је ЦСС.