DAVEN Farnham: Hodiaŭ, mi tuj paroli iom pri HTML, Hipertekstaj Markup Language. Komprenu HTML ĉie ĉi tiuj tagoj. Fakte, se vi rigardas ĉi video en foliumilo, vi estas vidante HTML nun. HTML ne estas programlingvo, pli ĝuste, ĝi estas markaĵojn uzata de foliumiloj por repagi paĝoj sur la interreto. 

Do eble vi demandas, kio precize estas skribanta TTT-paĝo en HTML malsamajn el skribi programon en programado lingvo kiel C? Nu, C estas lingvo kun tre strikta sintaksa reguloj kiuj bezonas esti kompilis antaŭ ĝi povas kuri. Se vi iam forgesis inkludi punktokomo ĉe la fino de formulita en via C kodon, vi scias pri kio mi parolas pri koncerne al strikta sintakso. 

Foliumiloj kvankam, estas iom pli pardonante, kiam temas pri HTML. Eĉ se via HTML ne estas sintakse korekta, via paĝo eble ankoraŭ estos montrata per foliumilo, sed eble Ne rigardu kiel vi celas. Do ĝi estas ĉiam bona por sekvi la regulojn. La plej bona maniero por akiri intuicio pri kiel la aferoj laboro estas iri tra ekzemplo. 

Do kion ni havas ĉi tie estas baza blukopio di retpaĝo. Vi verŝajne rimarkis multajn aferojn en inter angled krampoj. Nu, tiuj estas nur etikedojn. Tags baze informi foliumiloj ke, hey, iu Venas vian vojon. Memoru tamen, kiam ajn vi malfermas etikedo, vi bezonas fermi ĝin iam vi estas farita uzante gxin. 

Do, ekzemple, Mi malfermos sekcion de kodo kun malfermita krampo korpo, proksime krampo. Mi tiam aldoni iun tekston, en ĉi tiu kazo, mia unuan retpaĝon tiam kiam mi iris al fermi ĉi tiu sekcio, mi uzas preskaŭ identa tag krom tiu tempo kun antaŭen oblikvo antaux korpo. Ĝenerale, ĉi tiu estas la formaton vi estas tuj uzu kiam ajn vi estos la malfermo kaj fermante etikedojn. Kune, malfermita etikedon kaj finon etikedon formi kio nomiĝas ero. 

Se vi rigardas la unuan linion, vi vidi ekkrion punkto sekvita de DOCTYPE html. Tio estas vere nur diras via retumilo ke la dosiero estas retpaĝo skribita en HTML. La HTML-etikedo esence diras: jen kelkaj HTML. Tiam ni havas kapon etikedon kun titolo etikedon en ĝi. La kapo tag vi povas pensi pri kiel komprenante HTML kodo kiu venas por la plejparto de via TTT-paĝo de efektiva enhavo. 

Ĝenerale, oni metis la titolon de via retpaĝo ĉi tie, kvankam estas kelkaj aliaj etikedoj kiu povas aperi tie ankaŭ. Sekva venas vian retpaĝon la korpo, la efektiva karno kaj ostoj de via retejo. En nia ekzemplo, ni simple metu simplan frazo: Mia Unua Retpaĝo: kio, se ni kuras nia retejo, aspektos iom io kiel tio. Nia TTT-paĝo ne estas tro stranga, sed ne maltrankvilu. Ni Spruce ĝin baldaŭ. 

Do la supre HTML, ni donos al vi tre baza ŝablono por retpaĝo, nenio fantazio, nur la nudaj ostoj. Sed se mi kreas retpaĝon, kio se mi volas aldoni bildo de, ekzemple, mi mem? Nu, mi povas fari tion. Ekzistas kelkaj manieroj aldoni bildojn al via retejo. Se la bildo estas en la sama dosierujo kiel vian HTML-dosiero, vi povas alligi la bildo tra vojeto kiel ĉi tio. 

Vi malfermas kun bildo tag sekvis per en Alt atributo en la fonto de la bildo. La Alt atributo valoro estas nur iuj Alternativa teksto en kazo de uzanto ne povas vidi la bildon. Alternative, vi povas ankaux ligi al bildoj pere kompletan URL, kiel ĉi tio. Nun, ke retejo ne vere ekzistas, sed se estis bildo de mi ĉe tiu adreso, mi povus uzi la fonto URL por inkluzivi lia bildo sur mia retpaĝo. Ĉiaokaze, vi finu kun multe bela retejo, io kiel tio. 

Nu, tio estas sufiĉe malvarmaj, sed mi specon de want some text here tiel. Do ni simple aldoni ion super simpla supre la bildon, kiel la ĉapon. Ĉio kiun mi faris ĝis nun estas uzi la kaplinio tag: H1, kaj sxnuro break tag: br. La kaplinio tag faras la tiparo iom iom pli grandaj kaj pli elstara. La linerompo etikedon, sur la alia mano, estas speco de malvarmeta. Malkiel plej parto de aliaj etikedoj, vi ne havas malfermo kaj fermo break tag, simple la montrita supre. Ĉi tio estas ĉar ripozon ne havas enhavon kaj estas pro tio, malplena elemento. 

Malplena elementoj kiel tiu, vi povas malfermi kaj proksima samtempe simple per inkludante antaŭen oblikvo ĉe la fino de la komenca deklaro. Do nun mia retejo aspektas iom iu kiel ĉi tio. Pli bona, sed speco de sentas kiel morta fino. Estas neniu alia foriri de tiu ĉefa paĝo. Nu, ni fiksas, ke per inkludante ligon. 

Kion mi faros cxi tie estas uzi atribui signifita per A kaj fari la bildo ligilon al, ni diru, CS50 TV. Tiel, kiam ajn iu alklakas sur mi, ilia retumilo estos direktita al alia, probable pli utila, retpaĝo. Mi havis minimumigi la grandeco de la teksto iom pro nia TTT-paĝo atingi pli progresintaj. Sed mi esperas, ĝi estas ankoraŭ klara. Mia paĝo aspektas ekzakte la samaj nur Nun, kiam mi klakas sur la bildo, mia retumilo malfermos alian langeton por la CS50.tv retpaĝo. 

Laste, ni diru Mi tuj stilo ĉi retejo poste uzi la CSS. CSS estas kio estas konata kiel kaskadan stilo folio. Kaj esence provizas efikan maniero por redakti kaj stilo simila blokoj da kodo. Mi volas komenci organizi mian HTML por plifaciligi stiligi poste. Ĉi tie, mi starigis du malsamaj specoj de ensalutiloj helpi organizi mia kodo. Mi uzis la ID atributo ene divido, aux div etikedon, kaj mi uzis Klaso atribui interne alia div etikedo. 

ID kaj Klaso atributoj funkcias simile. La sola diferenco estas vi nur povas havi unu elemento, la specifa ID, sed ajna kvanto de eroj povas dividi klaso. Do ekzemple, mi povas uzi la klaso bildo plurfoje, sed mi ne povas krei alian divido kun la ID supro. Kvankam mi ne eniris en CSS, alian lingvon komune uzita apud HTML, unufoje mi komencas stilo mia kodo kun CSS, mi povas uzi tiujn organizaj atributojn al influo mia retpaĝo de estetiko. 

Ĉio ene de la divido supro havos similajn stylings aŭ ajna alia grupo de HTML Mi grupo en la klaso bildo dividos similan aspekton. Tiu estas multe pli facile ol por provi redaktanton kaj stilo bildoj aŭ blokoj de teksto individue. 

Do ni iris trans la fundamentojn de kiel fari retpaĝon kun HTML. HTML havas faskon da aliaj trajtoj tro ke kiam parigita kun aliaj lingvoj kiel CSS kaj JavaScript, ĉu vere fari paĝojn elstaras. La plej bona maniero por akiri komforta kun HTML estas nur por salato ĉirkaŭ ĝi, vidi kio funkcias kaj kio ne. 

Mia nomo estas Daven Farnham. Ĉi tio estas CS50. 

Do ekzemple, mi povas uzi la klaso bildo - Ne, tie estas tiom da atributoj. Mia nomo estas Daven Farnham. Ĉi tio estas CS 650. Mi volas diri CSS. Tiu estas la CSS.