>> Doug LLOYD: Tātad mēs pavadījām about-- ja mana matemātika ir taisnība,
un es domāju, ka meklē back-- es domāju mēs pavadījām apmēram 35 video runā
par dažādiem aspektiem, C, varbūt nedaudz vairāk, varbūt nedaudz mazāk.
Un mēs neaptvēra viss C, bet mēs
aptvēra lielu gabalu no valoda, lielākā daļa no tā,
protams par kopīgiem mērķiem.
Tagad mēs runāsim par cita valoda, HTML.
Un mēs ejam, lai segtu tas tikai vienā video.
>> Bet tas būs OK.
Tas notiek, lai tiešām kļūtu kaut kas jūs gatavojas pierast.
Tagad, ka jums ir pamati vienā valodā,
patiesībā tas ir diezgan viegli sākt mācīties citus.
Tātad mēs ejam, lai sāktu soli nedaudz atpakaļ
un spīdums pār pamata atšķirības starp šīm valodām
un veida atstāt jūs uz to.
Tur ir daudz tiešām liels resursiem internetā, kas
mēs esam gatavojas sākt virzienmaiņai jums virzienā, jo internets ir
plašs apkopojot informāciju.
Un tā tas nav kā jūs būt zaudē obligāti
ko nav informācijas pārklāti ar video.
Jūs joprojām varēs saņemt viss jums ir nepieciešams, un lietošana
zināšanas esat jau izveidojuši izprotot C
padarīt mācīšanās līkne šiem citas valodas tiešām daudz plakanāki.
ES apsolu.
>> Bet parunāsim par vienu valodu tas ir patiešām būtiski katram tīmeklī
lapa, kas ir HTML.
HTML ir Hyper Teksta iezīmēšanas valoda.
HTML ir valoda, bet tas ir nav programmēšanas valoda.
>> HTML nav mainīgie.
Tas nav loģika vai funkcijas vai kaut kā tā.
Mēs nevaram darīt jebkurš programmēšana per se HTML.
Dažreiz jūs dzirdat cilvēki aprakstīt sevi
kā HTML programmētāji, kas nav pilnīgi precīza.
Mēs nevaram rakstīt HTML programmas.
>> HTML ir tikai izmanto, lai atzīmētu up tekstu.
To sauc par iezīmēšanas valoda.
Un ko tas does-- šo markup-- mēs izmantojam tagus HTML un šajos tags--
šis markup-- semantiski definē struktūru lapas
un izraisa teksta ka pastāv starp tags jāinterpretē
pārlūkprogrammās dažādos veidos.
Un varbūt tas ir labākais, lai izskaidrotu Tas, ko veids ilustrācija.
>> Šeit ir ļoti vienkāršs HTML lapas, ne HTML programma, atkal, HTML lapas.
Un mēs zinām, tas ir HTML lapu, jo mēs esam
ierobežo visu ar HTML tagiem.
Tātad, tas ir tas, ko HTML tag izskatās.
Tas ir starp iekavām.
Un paziņojums augšpusē mums ir HTML un pašā apakšā,
kad mēs esam darījuši to, kas ir acīmredzot daudz citu HTML,
mums ir leņķis kronšteins slash HTML.
Tāpēc, ka veida ir robeža starp to, kas ir HTML, un kas nav.
Un, protams, tradicionāli, vienkārši kā jūs rakstījāt visas jūsu C programmas
ar dot C paplašinājumus, visiem jūsu HTML failu
beigsies ar punktu HTML paplašinājumiem.
Bet tur ir vairāk notiek šeit.
Mums nav vienkārši ir šādas HTML birkas.
Mums acīmredzot ir šo lieta, ko sauc par galvas tag.
Nu, OK, kas ir kas?
>> Nu varbūt tas ir labākais, lai atšķirt veidā ķermeņa,
ķermenis ir saturs mājas lapā.
Tātad, varbūt galva tag definē sīkumi kas nav pārlūka logā pareizi,
bet kaut kā svarīga mūsu mājas lapa tiek sniegti pareizi.
Tā, piemēram, no iekšpusē galvas tag mums ir nosaukums tagus.
>> Tātad virsraksts ir hello world, Tas ir tiešām būs ko
parādās izcilni Chrome vai safari vai Firefox--
kāds pārlūku jūs prefer-- tas kas notiek parādās virsrakstā.
Un pirms cilnes tas liecina up visu jūsu pārlūka logā
un jums var būt tikai viena lappuse atvērta pārlūkprogrammas logā laikā.
Tātad, kas notiek, ir nosaukums manu lapu atbalstīts cilnes
vai pārlūka logu bārs, hello world.
Un tad saturs manu mājas lapa būs pasaule, sveiki.
Tātad, pieņemsim to apskatīt to, ko daži lieta, kā tas varētu izskatīties.
Tas ir diezgan vienkāršs HTML lapas.
Tāpēc es esmu šeit, manā CS50 IDE un Esmu pietuvināto mazliet.
Un es esmu tikai gatavojas atvērt sveiks dot HTML
un parādīs, ka tas ir diezgan daudz lapas saturs, ko mēs redzējām pirms tam.
Mani vienkārši HTML, galvas tagus, nosaukums tagus, ķermeņa, un tā tālāk.
Esmu atkāpi, ka tīra.
>> Un tad ko es varu darīt manā IDE ir tikai priekšskatīt lapu.
Un tur mēs ejam.
Manas lapas saturs ir pasaule, hello, un es neredzu neko
no galvas tagus tur.
Tas ir tikai saturs organismā.
World, sveiki.
Un atkal ķermenis vienkārši teica, pasaule, sveiki.
Otra daļa ir pazudis.
>> Tātad tas ir tiešām viss tas ir.
Tas ir ļoti vienkāršs pamata HTML lapas.
Tagad es esmu atkāpi manu HTML būt patiesi jauks un organizēti,
bet man nav tiešām ir.
Es varētu to izskatās diezgan neglīts.
Un tas vēl varētu strādāt.
Tas būtu tieši tādu pašu mājas lapā.
Es esmu tikko gotten atbrīvoties no visas atstarpēm.
>> Kā izrādās, balta telpa ir dati.
Un tad, kad mēs esam nosūtot datus no sūtītāja līdz saņēmējam, no servera
klientam, datu maksā naudu.
Un tā atbrīvojoties no tukšumiem ir tiešām laba ideja
ja tu esi kāds, kurš kalpo up daudz interneta saturu.
Tā ir slikta ideja, ja jūs esat kāds, kurš ir mācīties šo stuff
un jūs vēlaties, lai būtu tas labi organizēta.
Tas ir daudz vieglāk apstrādāt nekā šis.
Bet tas ir funkcionāli identiski.
>> Ieloka un sīkumi, piemēram, ka tas tiešām nav svarīgi HTML.
Nozīme ir atvēršanas tagus un slēdzot tagus pareizā secībā.
Ievērojiet, kas notika šeit, though.
Atzīmes dod mums ceļu uz zināmu papildu informāciju
par to, ko mēs esam rakstīts.
Hello, World daļa bija interpretēt kā nosaukumā.
Un pasaule, sveiki daļa bija interpretēt kā saturu
vai to, kas būtu redzams manā mājas lapā.
>> Ir vairāk nekā 100 no tiem atšķiras tagus un daudz lielu resursu
tiešsaistē, lai tos atrastu.
Mēs ejam, lai runāt par daži no viņiem šajā video, daži
no tiešām fundamentālo sīkumi.
Bet mēs nebrauksim runāt par to visu, jo tā
būtu izsmeļošs to darīt.
>> Vēl viena lieta, ko jūs varat darīt, lai gan, ir atvērt izstrādātāju rīkus.
Un, ja jūs atceraties no Mūsu video uz HTTP,
Es paskaidroju, kā atvērt up izstrādātāju rīki.
Chrome tas parasti F12 taustiņš atvērt attīstītājs rīkjoslu.
Tad tā vietā izvēloties tīklu tab, jūs varat izvēlēties cilni elementiem.
Un, ja jūs pievienojat web lapa, jūs faktiski
skatīt HTML, kas rada šo mājas lapu.
Un tā jūs varat uzzināt daudz par HTML skatoties uz jūsu iecienītākās tīmekļa vietnes
un redzēt, kā viņi būvēt Dažādie tiem, kas jums patīk.
Tātad, varbūt tur ir šis cool raksts vai kaut kas tamlīdzīgs.
Kā viņi dara to ar HTML?
Nu jūs varat vienkārši atvērt savu attīstītājs instrumenti un lidināties virs šī elementa
un redzēt, tieši to, ko HTML padara to.
Tātad tas ir patiešām Labs veids, kā iemācīties HTML,
un es stingri iesaku jūs darīt to gan mācīties HTML
un arī uzzināt nedaudz mazliet par kādu no variantiem
jums pieejami izstrādātāju rīki, kas
noteikti noderēs kā sākat darīt intensīvāku tīmeklī
programmēšana.
>> Tātad pieņemsim apskatīt Pāris kopīgiem HTML tagiem.
Un mēs lēkt un to apskatīt ko šie tagus arī padarīt
kā, apskatot dažus failus manā IDE.
Tātad, šeit ir trīs ļoti pamata tagus tweaking vizuālo izskatu tekstu.
Ir B tagus, I tagus, un U tagus.
Un attiecīgi, ko viņi dara, ir padarīt tekstu starp tām treknrakstā,
slīprakstā, un uzsverot.
Tātad, pieņemsim redzēt, ko tas izskatās piemēram, par faktisko mājas lapā manā IDE.
>> Tātad šeit manā IDE I have a failu sauc BIU dot HTML.
BIU dot HTML vienkārši ir treknrakstā, kursīvā, uzsverot.
Es ņemšu atvērt to.
>> Un mēs redzam, ka šeit es ir šo tekstu, ir B tags treknrakstā.
Šis teksts ir I tags kursīvā.
Un šis teksts ir U tags uzsvēra.
Kas tas ir gatavojas izskatās?
Nu atkal, viss, kas man ir to darīt, ir iet pa šeit
manu pārlūku, mans failu pārlūks, noklikšķiniet Preview, un tas ir tas, kas nāk uz augšu.
>> Teksts starp B tags patiešām tagad treknrakstā.
Teksts starp I tags patiešām tagad kursīvā.
Un teksts starp U tags patiešām tagad pasvītrots.
Tātad tas ir diezgan labs.
Mēs tagad zinām, kā padarīt tekstu izskatās mazliet vairāk iedomātā
vai izdarīt uzsvaru uz konkrētām lietām.
Vēl viens kopīgiem tagiem pāris šeit ir tags punkts, P, un header tagus,
kas es esmu padarīts šeit kā HX.
>> Šie P birkas, šie punkts birkas, pauze savu tekstu augšup punktos.
Tas nav pietiekami, lai vienkārši hit Enter un atstāt telpas,
jo dators ir tikai gatavojas darīt to, ko jūs pateikt to darīt
un tas ignorē balts telpu lielāko daļu.
Tātad, mēs varam ne tikai hit Enter un gaidīt savu datoru
interpretēt, ka mēs gribam lai sāktu jaunu punktu.
Mums ir ļoti skaidri pateikt ir viens paragraph-- tas ir another--
ko pievienojot katra kopumu P tagus.
>> Un mums ir arī šīs iespējas H tagus, šiem header tagus.
Mums ir seši dažādu līmeņu no galvenes, viens, divi, trīs,
četriem, pieciem, un seši, kas ir pakāpeniski lielāks un lielāks
galvenes.
Un viņi saņem mazāku un mazākas un mazākas un mazākas.
Tātad mums ir augstākā līmeņa galveni, otrā līmenis header, un tā tālāk, un tā tālāk.
>> Pieņemsim to apskatīt varbūt daži P tagus un daži header tagus
darbībā uz mājas lapā.
Tātad šeit manā IDE man ir fails ar nosaukumu PH dot HTML, PH ir punkts
un header tagus.
Atveriet, ka līdz.
Tur ir daudz kas notiek šeit jo es esmu izvirzīti daži Lorem
ipsum, daži tikai izlases tekstu šeit.
Tāpēc es ņemšu attālinātu mazliet jo tur ir tik daudz kas notiek.
Bet paziņo, ka man ir pie ļoti top šeit man ir H1, līmenis vienu,
header tag.
Tad man ir punkts, kas ir tikai ķekars izlases text-- Lorem ipsum--
tikai noklusējuma standarta pildījumu tekstu.
Tāpēc man ir divi punkti iekšpusē, kas vienu līmeni header un tad lejā I
ir divlīmeņu galveni šeit uz līnijas 24, otrais līmenis header, un vēl divi
punkts.
Nu ko tas izskatās ja es to aplūkotu manā priekšskatījumu?
Paskatīsimies.
>> Tātad paziņojums, ka Pirmā līmeņa header šeit
faktiski ir diezgan nedaudz lielāks nekā otrā līmeņa galvenē.
Tāpēc mēs izmantojām H1 tagus.
Un paziņojums, ka P tags ļauj mums lauzt lietas ārā punktos.
Ja mēs būtu gotten atbrīvoties no šiem P tagiem un faktiski tikai nodot Ienāk vai atgriešana
starp to, ko mēs cerējām būtu būt dažādi punkti,
viņi visi vienkārši slam kopā un tas nebūtu šo nice punktu
atdalīšana ar telpu virs un zem.
Un tā tas, ko punkts tagus un header tagus
parasti tiek izmantoti, lai darīt, lai pievērstu uzmanību porcijas mūsu mājas lapā
šādā veidā.
>> Nākamā ir daži tagus, ka mēs izmantojam veidot sarakstus par mūsu mājas lapā.
Tāpēc mums ir Nekārtots lists-- ULs-- kas ir tikai
aizzīmētiem sarakstus, pasūtītās sarakstu, kurā ir numbered--
OLs-- un iekšpusē vai nu viens no tiem, mums ir nepieciešams, lai būtu
komplekti, kā norāda saraksta vienumus, Li.
Un tāpēc mums ir atvērta UL tag un mēs nodot priekšmetus iekšpusē no tā.
Un tad, kad mēs esam darījuši ar ka mēs varam aizvērt LU tag.
>> Un tāpat mēs varam būt pasūtīts vai numurētu sarakstu
un nodot saraksta vienumus iekšpusē no tā.
Tātad, pieņemsim to apskatīt pie pāris sarakstu
un to, ko viņi būtu apmetuma kā uz CS50 IDE.
Tāpēc man ir šeit manā IDE a failu sauktie saraksti dot HTML.
Pieņemsim to apskatīt.
>> Un paziņojums šeit Man ir Nekārtots uzskaitīt ar piecām lietām tajā.
Un tad man ir pasūtīts sarakstu, un Es esmu mainījies taga mazliet,
labi?
Es esmu teica sākums vienāds seši.
Izrādās, ar sakārtotu I sarakstā var noteikt sākumpunktu, kur vien
Es want-- pēc noklusējuma tas būs one-- , tikai pievienojot tā saukto atribūtu
manai OL tag.
Un tā šis saraksts būs sākas skaitīšana seši.
Tātad elementi šajā numurētu sarakstu būtu seši, septiņi, astoņi, deviņi, desmit,
jo tur ir pieci elementi sarakstā, kas ir pretējs tam,
divi, trīs, četri, pieci, kas tas būtu gadījumā, ja man bija teicis OL
nenorādot sākuma atribūts.
>> Tātad mēs vienkārši apskatīt šo, lai jūs varētu iegūt sajūtu par to, kas notiek šeit.
Un tur mēs ejam.
Tur ir mans saraksts.
Pirmie pieci elementi ir Nekārtots vai aizzīmētiem sarakstus.
Un nākamie pieci elementi ir atsevišķs pasūtīts saraksts
sākot no sešiem.
Tātad, tas ir, kā mēs varam veidot sarakstus, izmantojot HTML.
Vēl viena lieta, ko jūs varētu gribu darīt ar HTML
ir veidot tabulu Informācija par rindām un kolonnām
sniegt informāciju īpaši organizētā veidā.
Lai to izdarītu, ar HTML mēs varam būt tabulas definīcija sākas atvērto kronšteinu
galds.
Un tad iekšā šīs tabulas mēs varētu būt komplekts rindas, TR tagus
norādīt katru rindu.
Un tad TD tags iet iekšā TR tagus norādīt kolonnu laikā pēc kārtas.
>> Kāpēc to sauc TD un ne tc?
Nu, TD stendi tabulas datus.
Parasti jūs liekot Jūsu informācija tur.
Tātad, tāpēc tas ir TD un nav TC.
Tas ir mazliet mulsinoša.
>> Tātad jums ir galda tagus un iekšpusē jūsu galda tagus
Jums ir vairākas rindas, trs.
Un iekšā katrā rindā esat TDS par kolonnu skaitu
ka jūs vēlaties, lai būtu šajā konkrētajā rindā.
Pieņemsim to apskatīt ļoti vienkāršs galds pār CS50 IDE.
>> Tāpēc man ir šeit failu sauc galds dot HTML.
Pieņemsim ir apskatīt ko tas izskatās.
Tur ir daudz kas notiek šeit, bet ja ievērojat, man ir galds atvērts.
Es esmu sāk definīciju ar galdu.
Un tad manā pirmajā rindā es acīmredzot ir četras kolonnas, viens, divi, trīs,
četri.
Un tad es esmu darīts ar šīs rindas.
>> Tad es sākt citu rindu un darīt divas, četru, sešu astoņi.
Pabeidziet šo rindu.
Vai vēl rindu, trīs, seši, deviņi, 12.
Un tad pēdējā rindā, četri, astoņi, 12, un, lai gan tas ir
mazliet nogrieztu šeit, 16.
>> Es pabeidzu šo rindu.
Es pabeidzu tabulu.
Un tad es esmu darīts ar manu HTML.
Ko tas izskatās?
Nu, tas nav īsti daudz ko redzēt.
Es esmu skaidri organizēta manu informāciju ar nedaudz vairāk organizētā veidā.
Bet tas nav super diezgan šeit.
Un mēs ejam, lai risinātu ka tad, kad mēs runājam par CSS.
Mēs atkārtoti šo ideju par ko mēs darām, lai veiktu table--
varbūt formāts to mazliet labāk?
Bet man vēl ir četras rindas, katrs no kuriem ir četras kolonnas,
un tiešām, ko tas nozīmē ir ļoti vienkāršs četru līdz četrām pavairošana
galds.
>> Tikai dažus atslēgvārdus mēs runājam par.
Parunāsim par jēdziens HTML formas.
Tātad jums var būt redzējis šo konteksts ieejot mājas lapā.
Parasti jūs ierakstiet savu lietotāja vārdu.
Jūs ierakstiet paroli, un jūs labi iet.
Tas būtu sākums formā.
>> Izlaižot pa div sekundē.
Mums ir arī dati, kas veida fit iekšpusē formām.
Tie ir elementi, kas jūs faktiski rakstīt par,
vai radio pogas esat atzīmējot, vai čeks
kastes, ka jūs esat atzīmējot off.
Tātad šie iet iekšā formu.
Un tie veido galvenokārt katra rinda formu
Ja jūsu veidlapa ir formatēts labi.
Tad tur ir šis jēdziens Div, kas nav īsti
iederēties kādu konkrētu kategoriju no tagiem, piemēram, tiem, es esmu
darījis iepriekš.
Tas tikai veida norobežo sākumā kādu patvaļīgu division--
div-- lapas.
Nav vizuāli pārtraukuma.
Nav līnija.
Tas nav ieskaitīt kā atsevišķs rieciens automātiski.
Jūs ir stils ka veids, kā to darīt.
>> Tas tikai veida saka, ka es gribu gabals vietas uz manu mājas lapā,
un es esmu tikai gatavojas, lai izsauktu tā šis sadalījums manu lapu.
Mēs varam nodot sīkumi iekšā no divs, un patiesībā,
kad mēs dodies uz IDE sekundē, mēs
redzēt, ka es varēšu manu veidot iekšpusē div.
>> Tāpēc man ir šeit manā IDE a failu sauc div forma dot HTML.
Atvērsim to.
Ievērojiet, ka, piemēram, es teicu, div ir veida patvaļīga.
Tiesības?
Tas nav īsti nozīmē neko.
Tāpēc man ir patvaļīgs Pirmā nodaļa no manas lapas.
Un tad tā vietā, vēl viens div vēlāk, sākot no līnijas astoņiem,
Man ir šo formu.
Un iekšpusē veidā man ir skaits ieejas, lauki veidlapas.
Tāpēc man ir lauks, kura vārds ir A-- kas nav īsti nozīmē neko
Tiesības now-- ka acīmredzot ņem tekstu, vēl viens, kas
aizņem paroli, otru, kas ir radio poga, cits tas ir rūtiņa,
un otra, kas ir pogas Iesniegt.
Nu, ko tas viss tiešām izskatās?
Nu, pieņemsim to apskatīt.
Mēs atvērt to mūsu priekšskatījuma logā.
Ievērojiet, ka šis patvaļīgs Pirmais division-- tur
ne vizuālā atdalīšana šeit.
Tas nav īsti darīt neko, vai ne?
>> Un tad man ir mana forma.
Un es to nedarīju kādu īpašu formatējumu.
Tātad forma ir tikai viens liels rinda informācijas.
Ja es būtu formatēts manu formu savādāk, Es varētu būt tas rindu pa rindai līniju.
Bet es to nedarīju nevienu stilu.
Atkal, mēs nerunājam par CSS šeit.
Mēs esam tikai runā par HTML.
>> Nu manā teksta formā varu type-- atcerieties, ka formas tipa teksta
lai es varētu nodot manu vārdu.
Un manā paroli I varat ierakstīt savu paroli.
Un tāpēc, ka šajā jomā ir tipa paroles,
jūs nezināt, kāds ir mans parole.
Tas viss ir punktiņi.
>> Es varu arī izvēlēties atzīmējiet off radio pogu vai atzīmējiet izvēles rūtiņu.
Vai es varētu iesniegt savu formu.
Un es to nedarīju neko, tad, kad es varu iesniegt savu formu,
lapa vienkārši tiek atsvaidzināta.
Bet es, iespējams, varētu konfigurēt manu Iesniegt pogu, lai darīt kaut ko citu.
Un mēs redzēsim, ko mēs varam darīt ar ka nākamajā video PHP.
Bet tas būvē ļoti Vienkāršs veids, ka mēs
var izmantot, lai būtu lietotājiem mijiedarboties un iesniedz informāciju mūsu mājas lapā.
>> Viens no pēdējā komentārs pirms mēs pāriet uz kādu citu tagus
ir veikt apskatīt šo ievade tag vēl vienu reizi.
Paziņojums, ka es esmu uzsvērusi gali tagu sarkanā krāsā.
Katru otro tag mēs esam redzējuši līdz šim ir bija sākums un gals, atvere
tag un noslēguma tag.
>> Bet ieejas tag nav.
Nav teksta, kas iet starp ieejas tagiem.
Visu informāciju, mēs plāno nodot
ir saistīta kā daļa no atribūti šīs ieejas.
Ievērojiet, mums ir ieejas vārds ir vienāds ar x.
Type vienāds vec.
Tiešām tas ir viss informācija mums ir nepieciešama.
>> To sauc par Pašaizvēršanās tag.
Tas neprasa sākuma un aizvērt, jo visu informāciju
ir ietverts iekšpusē tag un tās atribūti.
Tātad dažreiz jūs redzēsiet to, too.
Tik vienkārši ir jāapzinās, ka, ja jums ir tag, kas ir pilnīgi pašpietiekams,
tas atveras un aizveras sevi ar atklātā leņķis kronšteins pa kreisi
un slīpsvītra leņķis kronšteins labajā pusē.
Mēs redzēsim vēl viens no tiem tagad ar attēlu tagus, kā arī.
>> Pirms mēs runājam par attēliem, mēs ir jārunā par hipersaitēm.
Ja mēs vēlamies, lai mūsu mājas lapā, lai būtu interaktīvs un pārvietot mums apkārt,
tas būtu jauki varēs noklikšķiniet uz vienas no tām,
kas ir parasti bijis zils saite.
Tas ir tiešām, kā mēs veidojam hipersaiti mūsu mājas lapā.
Un interesanti pietiekami tur ir vēl viens HTML tagu
sauc saite, kas nav hipersaite.
Šeit stendi enkuru, un tas, kā mēs norāda hipersaiti.
>> A href vienāds x līdzekļiem iet uz mājas lapa X. Un viss
starp atvērt tag un aizvērt tag
ir tas, kas notiek, lai būt, ka jāuzsver zils teksts, kas izskatās kā saiti
ka mēs esam pazīstami ar.
Zemāk, ka mums ir attēla tagu, kas ir self slēgšanas tagu izlikšana
attēls atrodas X. Un jūs varētu mainīt
ka attēls, norādot platums un augstums
un citi atribūti kas dot dot dot tur.
>> Pašā apakšā šeit mums ir ļoti interesants
meklē frāzi, kas nav ir noslēguma tag.
Tas ir izsaukuma zīme DOCTYPE HTML.
Tātad HTML ir aptuveni kopš 1990.gadu sākuma ēku web lapas,
un tā ir gājusi izgājušas vairāki labojumi kopš tā laika.
Pavisam nesen 2014. gadā tā piedzīvoja pārskatīšanu
sauc HTML5 kas tagad pašreizējais kārtot de facto HTML standartam.
>> Lai norādītu, ka mūsu mājas lapas ir rakstīts, izmantojot HTML5,
Tas ir tas, kā mēs sākt.
To var izlaist, bet ko tas būtībā
līdzeklis ir jūs nevarat izmantot kādu no tagiem ka ir HTML5 tagus, šie jaunie tags.
Tāpēc mēs vienmēr sākas off ja mēs esam izmantojot HTML5.
Un visi tagi mēs esam runājuši par iepriekš nav HTML5 tagus.
Bet tas nozīmē, ka HTML5 tags būs klāt.
Un tāpēc mums ir izsaukuma DOCTYPE HTML, kas
ir pašā sākumā mūsu HTML failu, un tad pēc tam punkts
mums tiešām ir mūsu HTML atvērts iezīmē un doties no turienes.
>> Pēdējais ir komentārs tag, kas izskatās nedaudz atšķirīgs, too.
Tas sākas off ar leņķi kronšteins izsaukuma domuzīme
domuzīme bet ne noslēgums kronšteins.
Starp šiem diviem elementiem tur ir, ja jūs rakstīt komentārus.
Un pieņemsim to apskatīt attēlus un komentārus un saites CS50 IDE.
>> Tāpēc man ir šeit failu sauc attēla saite dot HTML ko es esmu gatavojas atvērt.
Un paziņojums Man pāris komentāri šeit manā HTML komentārus.
Tātad tāpat kā C un citi programmēšanas valodas,
HTML, vienkārši būdams iezīmēšanas valoda tomēr ir spēja būt komentārus.
Un tāpēc es esmu acīmredzot gatavojas novietojiet attēlu Rick Astley
kaut kur starp šo div tag, tas patvaļīgs nodaļa.
Acīmredzot, ka fails ir atrodas Rick dot JPEG, kas
ja mēs galvu atpakaļ pār mans failu koku par otro,
ir fails, kas pastāv pašreizējā direktorijā.
Tā ka ir OK.
Es varu atsauce to.
>> Tad es varētu būt iekšējās saites.
Tātad paziņojums on line 11 šeit mans href ir sveiki dot HTML.
Tā, ka vienkārši atsaucas uz sveiki dot HTML kas pastāv pašreizējā direktorijā.
Un es varu būt arī ārējās saites, tikai norādot HTTPS
lai norādītu, ka es nerunāju par failu manā pašreizējā direktorijā.
Es runāju par failu, kas pastāv kaut kur internetā, kas man ir
pieprasīt, izmantojot HTTP protokolu.
>> Tātad pieņemsim apskatīt to, kas šīs lapas varētu izskatīties
un saņemt gatavs priekšstatu par Rick Astley parādās ekrānā.
Tāpēc es ņemšu apskatīt šo.
Tur Rick Astley pie ļoti top šajā patvaļīgs
dalīšana Man to augšpusē.
Un tad lejā I ir manas saites, vai ne?
>> Man ir saite uz Hello dot HTML.
Un, ja es noklikšķiniet, ka man pārgājuši uz šo lapu
ka mēs esam ļoti labi pārzina no paša sākuma mūsu programmā.
Ja es pop šo lapu, atklātu atkal, ja es pop image link atvērt vēl vienu reizi,
Es varu arī iet ārēji uz CS50 mājas lapā.
Un tur mēs see-- es ņemšu zoom out mazliet here--
mēs redzēsim CS50 interneta lapu veida iestrādāta vidū mūsu lapu.
Tāpēc man bija iespēja veikt iekšējo saistīt kā arī ārējo saiti.
>> Pēdējais noteikums ar HTML, ka mēs ejam runāt par šeit
ir tas, ka jūsu HTML jābūt labi veidotām.
C mēs daudz runājām dažādas sintakse lietas.
HTML sintakse patiešām griežas ap tagus.
Katru tag atverat ir jānovērš.
Un patiesībā, katrs tag atverot būtu jāslēdz apgrieztā secībā.
>> Tātad, ja jūs atvērt drosmīgu tagu, kas ir kursīvā tag, un tad pasvītrot tag
darīt visu trīs līdz A īpaši kopa teksta,
Jums vajadzētu aizvērt tos apgrieztā secībā.
Tātad, ja esat atvēris treknrakstā, kursīvu, pasvītrojumu, jūs
vēlaties aizvērt pasvītrot, slīprakstu, treknrakstu.
Šī iekapsulēšana veida ir tas, ko tur HTML jauks un organizēti.
>> Atšķirībā no C, lai gan, sintakses kļūdas nebūs faktiski kroplis savu HTML iespējams.
Jūsu HTML var nebūt labi veidojas bet joprojām strādā.
Un tā šīs kļūdas var kārtot ar slaidu pa.
Tas ir atkarīgs no jums, lai tiešām jābūt modriem.
Dažreiz viņi cietīs neveiksmi, bet dažreiz jūs varat saņemt prom ar to.
>> Tas var būt patiešām grūts uzdevums, lai gan,
lai sekotu, atverot tag, kad jūs to slēdza,
īpaši kā HTML failus saņemt lielāka un lielāka.
Jūs vēlaties kādu palīdzību.
Un tur ir online validators rīki, kas jums
var izmantot, lai apskatīt jūsu mājas lapa un redzēt, ja tas ir labi izveidotam HTML.
Un jums noteikti vajadzētu ieskatieties tiem
un sākt izmantot tos kā jums sākt darīt kādu darbu ar HTML,
rakstot HTML, tikai, lai jūs saņemsiet dažas labas ieradumus par organizēšanu
Jūsu HTML labs veids, un labs stils un pārliecinoties
ka tu neko nedaru, ka varētu radīt sintakses kļūda, ka
varētu radīt jums mazliet problēma leju ceļa.
>> Es esmu Doug Lloyd.
Tas ir CS50.