>> DAVEN Farnham: Šodien, es esmu gatavojas runāt mazliet par HTML,
Hiperteksta iezīmēšanas valoda.
Redzat HTML visur šajās dienās.
Patiesībā, ja jūs skatītos šo video pārlūkprogrammā, jūs
redzot HTML tieši tagad.
HTML nav programmēšanas valoda, Drīzāk, tas ir iezīmēšanas valoda, ko izmanto
interneta pārlūkiem, lai padarītu lapas internetā.
>> Tātad, jūs varētu jautāt, kā tieši ir rakstiski mājas lapa HTML dažādās
no rakstīšanas programmu plānošanas valodas, piemēram, C?
Nu, C ir valoda ar ļoti stingriem sintakses noteikumi, kas vajadzīga, lai būtu
apkopoti pirms tā var darboties.
Ja esat kādreiz aizmirst iekļaut semikols beigās apgalvojumu
savu C kodu, jūs zināt, ko es runāju par to, kas attiecībā uz stingri sintaksi.
>> Interneta pārlūkprogrammas, lai gan, ir nedaudz vairāk piedošanu, kad runa ir par HTML.
Pat ja jūsu HTML nav sintaktiski pareizi, jūsu lapā joprojām var būt
parādīts ar pārlūku, bet tas varētu neizskatās, kā paredzēts.
Tātad, tas vienmēr ir labākais, lai ievēro noteikumus.
Labākais veids, kā iegūt intuīcija par to, kā lietas darbu ir
iet caur piemēru.
>> Tātad, ko mēs esam šeit ir pamata projektu par mājas lapā.
Jūs droši vien ievērojuši, daudz lietas starp leņķveida iekavās.
Nu, tie ir tikai tagus.
Tags būtībā informēt interneta pārlūkiem ka, hey, kaut
nāk savu ceļu.
Atcerieties, lai gan, kad jūs atverat tag, jums ir nepieciešams, lai novērstu to, kad esat
darīts, izmantojot to.
>> Tā, piemēram, I atvērt sekciju Koda ar atvērtu
kronšteins ķermenis, tuvu kronšteins.
Tad es pievienot tekstu, šajā gadījumā, my Pirmā mājas lapa, tad, kad es devos uz
slēgt šo sadaļu, es izmantoju gandrīz identiski tag izņemot šajā laikā ar
slīpsvītra pirms organismā.
Kopumā, tas ir formāts tu esi gatavojas izmantot ikreiz, kad atverat
un noslēguma tagus.
Kopā, atvērtu tagu un beigu tagu sacerēt ko sauc elements.
>> Ja paskatās pirmajā rindā, jūs redzat izsaukuma zīmi, kam seko
DOCTYPE html.
Tas ir patiešām vienkārši stāsta savu pārlūkprogrammu ka fails ir mājas lapa
rakstīts HTML.
HTML tag būtībā saka, Šeit nāk daži HTML.
Tad mums ir galvas tagu ar nosaukums tag tā iekšpusē.
Galva tag jūs varat iedomāties, kā ietver HTML kods, kas nāk par
lielākā daļa no jūsu mājas lapā ir faktiskais saturs.
>> Vispār, jūs nodot nosaukumu jūsu mājas lapā šeit, lai gan ir daži
citi tagus, kas var parādīties arī šeit.
Tālāk seko jūsu mājas lapa ķermenis, faktiskais gaļa un kauli jūsu mājas lapā.
Mūsu Piemēram, mēs esam tikai izvirzīti vienkārši teikumu, Mans pirmais adrese,
kas, ja mēs palaist mūsu vietni, meklēs mazliet kaut kas līdzīgs šim.
Mūsu mājas lapa ir ne pārāk savādi, bet neuztraucieties.
Mēs egles to uz augšu ātrāk.
>> Tāpēc iepriekš HTML, mēs jums ļoti Pamata šablons mājas lapā,
nekas fancy, tikai tukša kauli.
Bet, ja es esmu veidojot mājas lapā, Ko darīt, ja es gribu, lai pievienotu
attēlu, teiksim, sevi?
Nu, es varu darīt.
Ir vairāki veidi, kā pievienot attēlus, lai jūsu vietnē.
Ja attēls ir vienā mapē jūsu HTML failu, jūs varat saistīt ar
attēlu pa ceļu, kā šis.
>> Jūs atvērt ar attēla tagu seko ar Alt atribūtu
avots attēla.
ALT atribūta vērtība ir tikai daži alternatīvo tekstu, ja lietotājs nevar
skatīt attēlu.
Varat arī saistīt ar attēlus, izmantojot pilnu URL, piemēram, šo.
Tagad, ka mājas lapā nav īsti nepastāv, bet, ja tur bija bilde
man šajā adresē, es varētu izmantot avota URL iekļaut
tās tēls manā mājas lapā.
Nu tā, jūs galu galā ar daudz glītāka mājas lapā, kaut kas līdzīgs šim.
>> Nu, tas ir diezgan foršs, bet es veida un vēlaties kādu tekstu šeit, kā labi.
Tāpēc pieņemsim tikai piebilst super vienkārši iepriekš
attēlu, piemēram, galvenes.
Viss, ko es esmu darījusi līdz šim, ir izmantot galveni tag, H1, un līnijas pārtraukumu tag, br.
Header tag padara Fonts nedaudz nedaudz lielāks un pamanāmāks.
Line break tag, no otras puses No otras puses, ir veida atdzist.
Atšķirībā no vairuma citu tagus, jums nav atvēršana un aizvēršana pauze tag, vienkārši
viena parādīts iepriekš.
Tas ir tāpēc, ka pārtraukums nav satura un tādēļ, tukša elements.
>> Tukšas elementi, piemēram, tas, jūs varat atvērt un gandrīz vienlaicīgi vienkārši
ieskaitot slīpsvītra pie beigas sākotnējā deklarācijā.
Tātad tagad manā mājas lapā izskatās nedaudz kaut kas līdzīgs šim.
Labāk, bet tas veida jūtas kā strupceļā.
Tur ir nekur citur iet malā No šīs galvenajā lapā.
Nu, pieņemsim noteikt, ka, ieskaitot saiti.
>> Ko es esmu gatavojas darīt, šeit ir izmantot atribūtika apzīmē ar A un padarīt
attēlu saiti uz, teiksim, CS50 TV.
Tādā veidā, kad kāds noklikšķina uz mani, viņu pārlūkprogramma tiks novirzīti
citu, iespējams, vairāk noderīgi, web lapas.
Man bija, lai samazinātu izmēru teksta mazliet, jo mūsu mājas lapā ir
kļūst vairāk uzlabotas.
Bet, cerams, tas joprojām ir skaidrs.
Mana mājas lapa izskatās tieši tāds pats tikai Tagad, kad es noklikšķiniet uz attēla,
mana pārlūkprogramma atvērs vēl vienu tab par CS50.tv mājas lapā.
>> Visbeidzot, pieņemsim, ka es esmu gatavojas stilu šajā mājas lapā vēlāk, izmantojot CSS.
CSS ir tas, kas ir pazīstams kā kaskādes stila lapas.
Un tas būtībā sniedz efektīvu veids, rediģēt un stils
līdzīgi bloki kodu.
Es gribu, lai sāktu organizēt savu HTML vieglāk stils vēlāk.
Lūk, es izveidot divas dažādas identifikatori, lai palīdzētu organizēt savu kodu.
Esmu izmantojis ID atribūts iekšpusē nodaļa, vai div tag, un es esmu, ko izmanto
Klases atribūts iekšpusē cits div tag.
>> ID un klases atribūti strādā līdzīgi.
Vienīgā atšķirība ir tā, jūs varat tikai viens elements, īpaša ID, bet
jebkuru no vairākiem elementiem var dalīties klasi.
Tā, piemēram, var izmantot klasi attēlu vairākas reizes, bet es nevaru
izveidojiet citu sadalījumu ar ID augšpusē.
Lai gan es neesmu gājusi uz CSS, citā valodā, ko parasti izmanto
kopā ar HTML, kad es sāku stils mans kods ar CSS, es varu izmantot šos
organizatoriskās atribūti ietekmēt mana web lapas estētika.
>> Viss ietvaros rajons augšu būs līdzīgas stylings vai jebkura
otra grupa HTML I grupas uz klases attēla dalīsies līdzīgu izskatu.
Tas ir daudz vieglāk, nekā mēģināt rediģēt un stila attēlus vai bloki
individuāli tekstu.
>> Tātad, mēs devāmies pār pamatus par to, kā padarīt mājas lapu ar HTML.
HTML ir ķekars citas funkcijas too ka tad, kad pārī ar citām valodām
piemēram, CSS un JavaScript, tiešām var padarīt lapas izceļas.
Labākais veids, kā iegūt apmierināti ar HTML ir tikai putru apmēram ar to,
redzēt, kas darbojas un kas ne.
>> Mans vārds ir Daven Farnham.
Tas ir CS50.
>> Tā, piemēram, var izmantot klase image -
Nē, tur ir tik daudz īpašības.
Mans vārds ir Daven Farnham.
Tas ir CS 650.
Es gribu teikt CSS.
Tas ir CSS.