DAGS LOIDS: Tātad mēs pavadījām apmēram — ja mana matemātika ir
pareiza, un es domāju, atskatoties atpakaļ - es domāju, ka mēs
pavadījām apmēram 35 video, runājot par dažādiem C valodas aspektiem,
varbūt nedaudz vairāk, varbūt nedaudz mazāk.
Un mēs neaptvērām visu C valodā, bet mēs aptvērām lielu valodas daļu,
lielāko daļu no tās, protams, vispārīgai lietošanai.
Tagad mēs runāsim par citu valodu, HTML.
Un mēs to apskatīsim tikai vienā videoklipā.
Bet tas būs OK.
Tas faktiski kļūs par kaut ko tādu, pie kā jums būs jāpierod.
Tagad, kad jums ir vienas valodas pamati, patiesībā ir diezgan viegli
sākt mācīties citas valodas.
Tāpēc mēs sāksim nedaudz atkāpties un noklusēsim galvenās atšķirības
starp šīm valodām un atstāsim tās jums pašiem.
Internetā ir daudz patiešām lielisku resursu, uz kuriem mēs sāksim
jūs vērst, jo internets ir plaša informācijas krātuve.
Tāpēc nav tā, ka jūs noteikti zaudēsit, ja videoklipā nebūs ietverta
kāda informācija.
Jūs joprojām varēsit iegūt visu, kas jums nepieciešams, un izmantot
zināšanas, ko jau esat uzkrājuši, saprotot C, lai padarītu šo citu
valodu apguves līkni daudz taisnāku.
Es apsolu.
Bet parunāsim par vienu valodu, kas ir ļoti svarīga katrai tīmekļa
lapai, proti, HTML.
HTML ir hiperteksta iezīmēšanas valoda.
HTML ir valoda, bet tā nav programmēšanas valoda.
HTML nav mainīgo.
Tai nav loģikas vai funkciju vai kaut ka tamlīdzīga.
Mēs nevaram veikt programmēšanu kā tādu HTML valodā.
Dažreiz jūs dzirdēsiet, ka cilvēki sevi raksturo kā HTML
programmētājus, kas nav pilnīgi precīzi.
Mēs nevaram rakstīt HTML programmas.
HTML tiek izmantota tikai teksta iezīmēšanai.
To sauc par iezīmēšanas valodu.
Un ko tas dara — šis marķējums — mēs izmantojam tagus HTML kodā un
šos tagus — šis marķējums semantiski nosaka lapas struktūru un liek
pārlūkprogrammām dažādos veidos interpretēt starp tagiem esošo
vienkāršu tekstu.
Un varbūt vislabāk to izskaidrot ar ilustrāciju.
Šeit ir ļoti vienkārša HTML lapa, nevis HTML programma, atkal - HTML
lapa.
Un mēs zinām, ka tā ir HTML lapa, jo visu esam ierobežojuši ar HTML
tagiem.
Tātad, šādi izskatās HTML tags.
Tas atrodas starp leņķiekavām.
Un ievērojiet, ka augšpusē mums ir HTML, bet pašā apakšā pēc tam, kad
esam paveikuši šķietami daudz citu HTML, mums ir leņķiekavas,
slīpsvītra, HTML.
Tā ir robeža starp to, kas ir HTML un kas nav.
Un, protams, parasti, tāpat kā jūs rakstījāt visas savas C programmas
ar punkts Cpaplašinājumiem, visas jūsu HTML datnes beigsies ar punkts
HTML paplašinājumiem.
Bet šeit notiek vairāk.
Mums ir ne tikai šie HTML tagi.
Acīmredzot mums ir šī lieta, ko sauc par head tagu.
Nu labi, kas tas ir?
Varbūt vislabāk ir atšķirt pēc body, jo body ir tīmekļa lapas saturs.
Tātad, iespējams, head tags definē saturu, kas nav īsti
pārlūkprogrammas logā, betnoteiktā veidā ir svarīgs, lai mūsu tīmekļa
lapa tiktu renderēta pareizi.
Piemēram, head tagā mums ir nosaukuma tagi.
Tātad virsraksts ir hello world, patiesībā tas tiks parādīts
pārlūkprogrammas Chrome vai pārlūkprogrammas Safari vai Firefox
cilnē — neatkarīgi no tā, kuru pārlūkprogrammu izmantojat — tieši tas
tiks parādīts virsrakstā.
Un pirms cilnēm tas būtu redzams visā pārlūkprogrammas logā, un
pārlūkprogrammas logā vienlaikus var būt atvērta tikai viena lapa.
Tātad, tas būs manas lapas virsraksts cilnē vai pārlūkprogrammas loga
joslā: hello world.
Un tad manas mājas lapas saturs būs: world, hello.
Tāpēc apskatīsim, kā varētu izskatīties kaut kas līdzīgs šim.
Šī ir diezgan vienkārša HTML lapa.
Tāpēc es esmu šeit savā CS50 IDE un esmu nedaudz pietuvinājis.
Un es tikai atvēršu hello, punkts, HTML un parādīšu, ka tas ir
gandrīz tāds lapas saturs, kādu mēs redzējām iepriekš.
Mans vienkāršais HTML, head tagi, virsraksta tagi, body un tā tālāk.
Esmu izmantojis atkāpes, lai būtu skaidrs.
Un tad tas, ko es varu darīt savā IDE, ir - tikai priekšskatīt lapu.
Un tur mēs ejam.
Manas lapas saturs ir world, hello, un es tur neko neredzu no head
tagiem.
Tas ir tikai body saturs.
World, hello.
Un atkal body vienkārši teica: world, hello.
Trūkst otras daļas.
Tātad tas tiešām ir viss.
Šī ir ļoti vienkārša pamata HTML lapa.
Tagad esmu izveidojis savu HTML lapu, lai tā būtu patiešām jauka un
sakārtota, bet patiesībā man tas nav jādara.
Es varētu likt tai izskatīties diezgan neglīti.
Un tas joprojām darbotos.
Šī būtu tieši tā pati tīmekļa lapa.
Es tikko atbrīvojos no visām atstarpēm.
Kā izrādās, atstarpe ir dati.
Tātad, kad mēs sūtām datus saņēmējam no sūtītāja, klientam no
servera, dati maksā naudu.
Tāpēc, ja jūs apkalpojat daudz tīmekļa satura, tad atbrīvoties no
atstarpēm - patiesībā ir laba ideja.
Tā ir slikta ideja, ja jūs mācāties šīs lietas un vēlaties tās labi
sakārtot.
To ir daudz vieglāk parsēt.
Bet tas ir funkcionāli identiski.
Atkāpei un tamlīdzīgām lietām HTML patiesībā nav nozīmes.
Viss, kas ir svarīgi, ir tagu atvēršana un aizvēršana pareizā secībā.
Tomēr ievērojiet, kas šeit notika.
Marķējums sniedz mums iespēju sniegt papildu informāciju par to, ko
esam uzrakstījuši.
Daļa Hello, World tika interpretēta kā virsraksts.
Un world, hello daļa tika interpretēta kā saturs jeb tam, kam jābūt
redzamam manā mājaslapā.
Ir vairāk nekā 100 šo dažādo tagu, un tiešsaistē ir daudz lielisku
resursu, lai tos atrastu.
Šajā videoklipā mēs runāsim par dažiem no tiem — daži no tiem ir
patiešām fundamentāli.
Bet mēs par to visu nerunāsim, jo tas būtu nogurdinoši.
Tomēr vēl viena lieta, ko varat izdarīt, ir atvērt izstrādātāju
rīkus.
Un, ja atceraties mūsu video par HTTP, es paskaidroju, kā atvērt
izstrādātāja rīkus.
Pārlūkā Chrome parasti tas ir taustiņš F12, lai atvērtu izstrādātāja
rīkjoslu.
Tā vietā, lai izvēlētos cilni Tīkls, varat izvēlēties cilni Elementi.
Un, ja jūs ielādējat tīmekļa lapu, jūs faktiski redzēsit HTML, kas
izveido šo tīmekļa lapu.
Tādējādi jūs varat uzzināt daudz par HTML, apskatot savas
iecienītākās vietnes un redzot, kā tās veido dažādas jums tīkamās
vietnes.
Iespējams, tur ir foršais paraugs vai kaut kas tamlīdzīgs.
Kā viņi to dara ar HTML?
Varat vienkārši atvērt savus izstrādātāja rīkus un virzīt kursoru
virs šī elementa, lai redzētu, kurš HTML veido to.
Tātad tas ir patiešām labs veids, kā apgūt HTML, un es ļoti iesaku to
darīt gan, lai apgūtu HTML, gan arī uzzinātu mazliet par dažām
izstrādātāju rīku opcijām, kas noteikti noderēs, sākot intensīvāku
tīmekļa programmēšanu.
Tāpēc apskatīsim dažus izplatītākos HTML tagus.
Un mēs pārlēksim un apskatīsim, ko šie tagi atveidos, apskatot dažas
datnes manā IDE.
Tātad, šeit ir trīs ļoti vienkārši tagi teksta vizuālā izskata
pielāgošanai.
Ir B tagi, I tagi un U tagi.
Un attiecīgi viņi atveido tekstu starp tiem treknrakstā, slīprakstā
un pasvītrojumā.
Tātad, redzēsim, kā tas izskatītos faktiskā tīmekļa lapā manā IDE.
Šeit manā IDE man ir datne ar nosaukumu BIU, punkts, HTML.
BIU, punkts, HTML ir tikai treknrakstā, slīprakstā un pasvītrojumā.
Es to atvēršu.
Un mēs redzēsim, ka šeit man ir this text is B tags bold.
This text is I tags italic.
Un this text is U tags underlined.
Kā tas izskatīsies?
Atkal, viss, kas man jādara, ir jāpāriet šeit uz manu
pārlūkprogrammu, manu datņu pārlūkprogrammu, noklikšķināt uz Preview,
un tas tiek parādīts.
Teksts starp B tagiem tagad patiešām ir treknrakstā.
Teksts starp I tagiem tagad patiešām ir slīprakstā.
Un teksts starp U tagiem patiešām tagad ir pasvītrots.
Tātad tas ir diezgan labi.
Tagad mēs zinām, kā padarīt tekstu nedaudz greznāku vai uzsvērt
noteiktas lietas.
Vēl daži bieži sastopami tagi šeit ir rindkopu tagi, P un galvenes
tagi, kurus šeit esmu atveidojis kā HX.
Šie P tagi, šie rindkopu tagi, sadala jūsu tekstu rindkopās.
Nepietiek tikai nospiest Enter un atstāt atstarpes, jo dators darīs
tikai to, ko jūs tam liksit, un lielākoties tas ignorē atstarpes.
Tāpēc mēs nevaram vienkārši nospiest Enter un gaidīt, ka mūsu dators
interpretēs, ka mēs vēlamies sākt jaunu rindkopu.
Mums ir ļoti skaidri jāpasaka, ka šī ir viena rindkopa — šī ir cita —
iekļaujot katru no tām P tagu komplektā.
Un mums ir arī šīs opcijas H tagiem, šiem galvenes tagiem.
Mums ir seši dažādi galvenes līmeņi, viens, divi, trīs, četri, pieci
un seši, kas pakāpeniski kļūst arvien lielākas un lielākas.
Un tās kļūst arvien mazākas, mazākas un mazākas.
Tātad mums ir augstākā līmeņa galvene, otrā līmeņa galvene utt.
Apskatīsim dažus P tagus un dažus galvenes tagus, kas darbojas
tīmekļa lapā.
Tātad šeit manā IDE man ir datne ar nosaukumu PH, punkts, HTML, kur
PH ir rindkopas un galvenes tagi.
Atveriet to.
Šeit notiek daudz kas, jo esmu šeit ievietojis lorem ipsum, vienkārši
nejaušu tekstu.
Tāpēc es nedaudz tālināšu, jo te daudz kas notiek.
Bet ievērojiet, ka man pašā augšpusē ir H1, pirmā līmeņa galvenes
tags.
Tad man ir rindkopa, kas ir tikai nejauša teksta kopa — lorem ipsum —
vienkārši noklusējuma standarta teksta aizpildīšana.
Tātad man ir divas rindkopas šī pirmā līmeņa galvenē un pēc tam zemāk
man ir otrā līmeņa galvene šeit 24. rindā, otrā līmeņa galvene un vēl
divas rindkopas.
Kā tas izskatās, ja es skatos savā priekšskatījumā?
Paskatīsimies.
Tāpēc ņemiet vērā, ka pirmā līmeņa galvene šeit faktiski ir nedaudz
lielāka nekā otrā līmeņa galvene.
Tāpēc mēs izmantojām H1 tagus.
Un ievērojiet, ka P tagi ļauj mums sadalīt tekstu rindkopās.
Ja mēs būtu atbrīvojušies no šiem P tagiem un faktiski tikai starp
dažādām rindkopām būtu ievietojuši ievadīšanas vai atgriešanas
taustiņus, tās visas vienkārši sakristu kopā, un turnebūtu šīs jaukās
rindkopu atdalīšanas ar atstarpi augšā un apakšā.
Tāpēc rindkopu un galvenes tagus parasti izmanto, lai šādā veidā
pievērstu uzmanību mūsu tīmekļa lapas daļām.
Tālāk ir minēti daži tagi, ko izmantojam, lai savā tīmekļa lapā
izveidotu sarakstus.
Tātad mums ir nesakārtoti saraksti — UL — tie ir tikai saraksti ar
aizzīmēm, sakārtoti saraksti, kas ir numurēti — OL — un vienā no tiem
mums ir jābūt komplektiem, kā norādīt saraksta vienumus, LI.
Un tāpēc mums ir atvērts UL tags, un mēs tajā ievietojam vienumus.
Un tad, kad esam to pabeiguši, varam aizvērt UL tagu.
Un līdzīgi mums var būt sakārtots vai numurēts saraksts un tajā
ievietoti saraksta vienumi.
Apskatīsim dažus sarakstus un to, ko tie atveidos kā CS50 IDE.
Tāpēc manā IDE ir ar nosaukumu lists, punkts, HTML.
Paskatīsimies.
Un ievērojiet, ka man ir nesakārtots saraksts ar pieciem vienumiem.
Un tad man ir sakārtots saraksts, un es esmu nedaudz mainījis tagu,
vai ne?
Es teicu, ka sākums ir vienāds ar seši.
Izrādās, ka ar sakārtotu sarakstu es varu iestatīt sākumpunktu, kur
vien vēlos, - pēc noklusējuma tas būs viens - vienkārši pievienojot
šo tā saukto atribūtu savam OL tagam.
Un tāpēc šo sarakstu sāks skaitīt no seši.
Tātad numurētā saraksta elementiem jābūt seši, septiņi, astoņi,
deviņi, desmit, jo sarakstā ir pieci elementi, nevis viens, divi,
trīs, četri, pieci, kas būtu gadījumā, ja es būtu pateicis OL,
nenorādot sākuma atribūtu.
Tāpēc mēs to tikai priekšskatīsim, lai jūs varētu saprast, kas šeit
notiek.
Un te mēs esam.
Šeit ir mans saraksts.
Pirmie pieci elementi ir nesakārtoti saraksti vai aizzīmju saraksti.
Un nākamie pieci elementi ir atsevišķs sakārtots saraksts, sākot ar
seši.
Tātad mēs varam izveidot sarakstus, izmantojot HTML.
Vēl viena lieta, ko varētu darīt ar HTML, ir izveidot rindu un
kolonnu informācijas tabulu, lai informāciju sniegtu īpaši organizētā
veidā.
Lai to izdarītu, izmantojot HTML, mums var būt tabulas definīcija,
kas sākas ar atvērto iekavu tabulu.
Un tad šajā tabulā mums varētu būt rindu kopa, TR tagi, lai norādītu
katru rindu.
Un tad TD tagi nonāk TR tagos, lai norādītu kolonnu rindā.
Kāpēc to sauc par TD, nevis TC?
Nu, TD apzīmē tabulas datus.
Parasti jūs tur ievietojat savu informāciju.
Tāpēc tas ir TD, nevis TC.
Tas ir mazliet mulsinoši.
Tātad jums ir tabulas tagi, un jūsu tabulas tagos ir vairākas rindas,
TR.
Un katrā rindā jums ir TD kolonnu skaitam, ko vēlaties ievietot šajā
konkrētajā rindā.
Apskatīsim ļoti vienkāršu tabulu CS50 IDE.
Tāpēc man šeit ir datne ar nosaukumu table, punkts, HTML.
Apskatīsim, kā tas izskatās.
Šeit notiek daudz kas, bet, ja pamanāt, man ir atvērta tabula.
Es sāku definīciju ar tabulu.
Un tad manā pirmajā rindā man acīmredzot ir četras kolonnas, viena,
divas, trīs, četras.
Un tad es pabeidzu šo rindu.
Tad es sāku vēl vienu rindu un ierakstu divi, četri, seši, astoņi.
Pabeidzu šo rindu.
Izveidoju vēl vienu rindu, trīs, seši, deviņi, 12.
Un tad pēdējā rinda, četri, astoņi, 12, un, lai gan šeit tas ir
nedaudz nogriezts, 16.
Es pabeidzu šo rindu.
Es pabeidzu tabulu.
Un tad es esmu pabeidzis ar savu HTML.
Kā tas izskatās?
Nu, nav īsti ko redzēt.
Esmu skaidri sakārtojis savu informāciju nedaudz sakārtotākā veidā.
Bet šeit nav īpaši skaisti.
Un mēs ar to strādāsim, runājot par CSS.
Mēs vēlreiz izskatīsim šo ideju par to, ko mēs darām, lai izveidotu
tabulu — varbūt noformatēsim to mazliet labāk?
Bet man joprojām ir četras rindas, no kurām katrā ir četras kolonnas,
un patiesībā tas ir ļoti vienkārša četri reiz četri reizināšanas
tabula.
Vēl tikai daži tagi, par kuriem mēs runāsim.
Parunāsim par HTML formas jēdzienu.
Tātad, iespējams, esat to redzējuši saistībā ar pieteikšanos tīmekļa
lapā.
Parasti jūs ierakstāt savu lietotājvārdu.
Jūs ierakstāt savu paroli, un viss ir gatavs.
Tas būtu formas sākums.
Uz mirkli izlaidīsim div.
Mums ir arī ievades, kas iederas formās.
Tie ir elementi, kuros jūs faktiski rakstāt: vai radio pogas, kuras
atzīmējat, vai izvēles rūtiņas, kuras atzīmējat.
Tātad tie nonāk formās.
Un tie pamatā ietver katru formas rindu, ja jūsu veidlapa ir labi
formatēta.
Vēl ir šis div jēdziens, kas īsti neatbilst nevienai noteiktai tagu
kategorijai, piemēram, kādai no tām, ko esmu darījis iepriekš.
Tas tikai iezīmē kaut kāda patvaļīga lapas dalījuma — div — sākumu.
Nav vizuāla pārtraukuma.
Nav līnijas.
Tas netiek automātiski ieskaitīts kā atsevišķs gabals.
Lai to izdarītu, jums tas ir jāveido.
Tas vienkārši saka, ka es vēlos savā tīmekļa lapā brīvu vietu, un es
to vienkārši saukšu par šo savas lapas iedalījumu.
Mēs varam ievietot vienumus div daļās, un patiesībā, kad mēs pēc
sekundes pāriesim uz IDE, mēs redzēsim, ka es ievietoju savu formu
div daļā.
Tāpēc manā IDE ir datne ar nosaukumu div form, punkts, HTML.
Atvērsim to.
Ņemiet vērā, ka, kā jau teicu, div ir sava veida patvaļīga.
vai ne?
Tas īsti neko nenozīmē.
Tāpēc manā lapā ir patvaļīgais pirmais iedalījums.
Un vēlāk, sākot no astotās rindas, cita div vietā man ir šī forma.
Un formā man ir vairākas ievades, formas lauki.
Tad man ir lauks, kura nosaukums ir A — kas pašlaik neko nenozīmē, —
kurā, šķiet, ir jāievada teksts, cits lauks, kuram ir jāievada
parole, cits ir radio poga, cits ir checkbox un vēl viena ir submit
poga .
Nu, kā tas viss patiesībā izskatās?
Nu, paskatīsimies.
Mēs to atvērsim priekšskatījuma logā.
Ņemiet vērā, ka šis patvaļīgais pirmais dalījums — šeit nav vizuālas
atdalīšanas.
Tas īsti neko nedeva, vai ne?
Un tad man ir mana forma.
Un es neveicu nekādu īpašu formatējumu.
Tātad forma ir tikai viena liela informācijas rinda.
Ja es savu formu būtu formatējis citādi, iespējams, man tā būtu
rindiņa pēc rindiņas.
Bet es nekādi to nestilizēju.
Atkal mēs šeit nerunājam par CSS.
Mēs runājam tikai par HTML.
Manā text formā es varu rakstīt — atcerieties, ka formas ir
tekstveidīgas, lai es varētu ievietot savu vārdu.
Un password es varu ierakstīt savu paroli.
Un tā kā šis ir paroles veida lauks , jūs nezināt, kāda ir mana
parole.
Tikai punkti.
Es varu arī izvēlēties atzīmēt radio pogu vai atzīmēt checkbox.
Vai arī es varētu iesniegt savu formu.
Un es neko nedarīju, tāpēc, kad es iesniedzu savu formu, lapa
vienkārši tiek atsvaidzināta.
Bet es, iespējams, varētu konfigurēt submit pogu, lai izdarītu kaut
ko citu.
Un, nākamajā video par PHP, mēs redzēsim, ko mēs ar to varam darīt.
Taču tiek izveidota ļoti vienkārša forma, ko varam izmantot, lai
lietotāji mijiedarbotos un iesniegtu informāciju mūsu vietnē.
Pēdējais komentārs, pirms mēs pārejam pie dažiem citiem tagiem, ir
vēlreiz apskatīt šo ievades tagu.
Ievērojiet, ka taga galus esmu iezīmējis sarkanā krāsā.
Katram citam līdz šim redzētajam tagam ir bijis sākums un beigas,
sākuma tags un beigu tags.
Bet ievades tagam tādu nav.
Starp ievades tagiem nav teksta.
Visa informācija, ko mēs plānojam nodot, ir saistīta kā daļa no šīs
ievades atribūtiem.
Ievērojiet, ka ievades nosaukums ir vienāds ar x.
Tips ir vienāds ar y.
Tā patiešām ir visa informācija, kas mums nepieciešama.
To sauc par pašaizverošu tagu.
Tam nav nepieciešama atvēršana un aizvēršana, jo visa informācija ir
ietverta tagā un tā atribūtos.
Tāpēc dažreiz jūs to arī redzēsit.
Tāpēc ņemiet vērā, ka, ja jums ir tags, kas ir pilnībā autonoms, tas
pats atveras un aizveras ar atvērtām leņķiekavām kreisajā pusē un
slīpsvītra, leņķiekavas labajā pusē.
Mēs tūlīt arī redzēsim vienu no tiem ar attēlu tagiem.
Pirms runājam par attēliem, mums jārunā par hipersaitēm.
Ja vēlamies, lai mūsu tīmekļa lapa būtu interaktīva un pārvietotu
mūs, būtu jauki noklikšķināt uz kādas no tām - parasti - zilajām
saitēm.
Faktiski šādi mēs savā tīmekļa lapā izveidojam hipersaiti.
Interesanti, ka ir vēl viens HTML tags, ko sauc par saiti, kas nav
hipersaite.
A šeit apzīmē enkuru, un tā mēs norādām hipersaiti.
A href ir vienāds ar x nozīmē: doties uz tīmekļa lapu X.
Un viss starp atvērto A tagu un aizvērto A tagu būs tas pasvītrotais
zilais teksts, kas izskatās kā mums pazīstama saite.
Zem tā mums ir attēla tags, kas ir pašaizverošais tags, lai parādītu
attēlu, kas atrodas pie X.
Un jūs, iespējams, varēsit mainīt šo attēlu, norādot platumu un
augstumu, kā arī citus atribūtus šajos punktos.
Šeit pašā apakšā ir ļoti interesanta izskata tags, kuram nav
pašaizverošo tagu.
Tas ir izsaukuma zīme, doctype, HTML.
Tātad HTML ir bijis pieejams tīmekļa lapu veidošanā kopš deviņdesmito
gadu sākuma, un kopš tā laika tas ir vairākkārt pārskatīts.
Pavisam nesen, 2014. gadā, tas tika pārskatīts ar nosaukumu HTML5,
kas tagad ir pašreizējais de facto HTML standarta veids.
Lai norādītu, ka mūsu tīmekļa lapas ir rakstītas, izmantojot HTML5,
mēs sākam šādi.
To var izlaist, bet būtībā tas nozīmē, ka jūs nevarat izmantot
nevienu no tagiem, kas ir HTML5 tagi, tos jaunos tagus.
Tāpēc mēs vienmēr sākam no jauna, ja izmantojam HTML5.
Un visi tagi, par kuriem mēs runājām iepriekš, nav HTML5 tagi.
Bet tas norāda, ka HTML5 tagi būs klāt.
Un tāpēc mums ir izsaukuma zīme, doctype, HTML, kas atrodas mūsu HTML
datnes pašā sākumā, un pēc tam mums faktiski ir mūsu HTML atvērtais
tags, un mēs turpinām no tā punkta.
Pēdējais ir komentāru tags, kas arī izskatās nedaudz savādāk.
Tas sākas ar leņķiekavām, izsaukuma zīmi, domuzīmi, domuzīmi, bet bez
aizverošāmiekavām.
Starp šiem diviem elementiem ir vieta, kur rakstāt savus komentārus.
Un apskatīsim attēlus un komentārus, un saites CS50 IDE.
Tāpēc man šeit ir datne ar nosaukumu image link, punkts, HTML, kuru
es atvēršu.
Un ievērojiet, ka man ir daži komentāri manos HTML komentāros.
Tātad, tāpat kā C un citās programmēšanas valodās, arī HTML, kas ir
iezīmēšanas valoda, var pievienot komentārus.
Un tāpēc es acīmredzot ievietošu Rika Astlija attēlu kaut kur pa vidu
šim div tagam, šim patvaļīgajam sadalījumam.
Acīmredzot šī datne atrodas Rick, punkts, JPEG, kas, ja mēs uz
sekundi atgriezīsimies manā datņu kokā, ir datne, kas atrodas
pašreizējā direktorijā.
Tātad viss ir kārtībā.
Es varu uz to atsaukties.
Tad man var būt iekšējās saites.
Tāpēc ievērojiet, 11. rindiņā, šeit mana href is hello, punkts, HTML.
Tātad tas attiecas tikai uz hello, punkts, HTML, kas atrodas
pašreizējā direktorijā.
Un man var būt arī ārējās saites, vienkārši norādot HTTPS, lai
norādītu, ka es nerunāju par datni savā pašreizējā direktorijā.
Es runāju par datni, kas atrodas kaut kur internetā, un kura man ir
jāpieprasa, izmantojot HTTP protokolu.
Apskatīsim, kā šī lapa varētu izskatīties, un sagatavosimies, lai
jūsu ekrānā tiktu parādīts Rika Astlija attēls.
Tāpēc es priekšskatīšu šo.
Šajā patvaļīgajā sadalījumā pašā augšgalā atrodas Riks Astlijs, kuru
es to ievietoju augšpusē.
Un tad zemāk man ir savas saites, vai ne?
Man ir saite uz hello, punkts, HTML.
Un, ja es noklikšķinu uz tās, es tieku pārvirzīts uz šo lapu, kas
mums ir ļoti pazīstama jau no mūsu programmas sākuma.
Ja es vēlreiz atveru šo lapu, ja es vēlreiz atveru attēla saiti, es
varu atvērt arī CS50 vietni.
Un tur mēs redzēsim — es šeit nedaudz tālināšu — mēs redzēsim, ka
CS50 vietne ir iegulta mūsu lapas vidū.
Tāpēc es varēju izveidot gan iekšējo, gan ārējo saiti.
Pēdējais HTML noteikums, par kuru mēs šeit runāsim, ir tāds, ka jūsu
HTML ir jābūt labi veidotai.
C valodā mēs daudz runājām par dažādu lietu sintaksi.
HTML sintakse patiešām griežas ap tagiem.
Katrs atvērtais tags ir jāaizver.
Un patiesībā katrs atvērtais tags ir jāaizver apgrieztā secībā.
Tātad, ja atverat treknrakstu, slīprakstu un pēc tam pasvītrotu tagu,
lai veiktu visas trīs konkrētas teksta kopas, tās jāaizver apgrieztā
secībā.
Tātad, ja atvērāt treknrakstu, slīprakstu, pasvītrojumu, jums
jāaizver pasvītrojums, slīpraksts, treknraksts.
Šāda veida iekapsulēšana nodrošina HTML jauku un sakārtotu izskatu.
Tomēr atšķirībā no C sintakses kļūdas, iespējams, nesabojās jūsu
HTML.
Jūsu HTML var būt slikti izveidota, bet joprojām darbosies.
Un tāpēc šīs kļūdas var paslīdēt garām.
Tas, vai jūs patiešām esat modrs, ir atkarīgs no jums.
Dažreiz tās neizdosies, bet dažreiz jūs varat tikt cauri ar tām.
Tomēr tas var būt ļoti sarežģīts uzdevums izsekot, kad atvērāt tagu,
kad to aizvērāt, jo īpaši tāpēc, ka jūsu HTML datnes kļūst arvien
lielākas.
Jums būtu nepieciešama kāda palīdzība.
Ir arī tiešsaistes pārbaudītāju rīki, kurus varat izmantot, lai
apskatītu savu tīmekļa lapu un noskaidrotu, vai tajā ir labi
izveidota HTML.
Un jums noteikti vajadzētu tos apskatīt un sākt lietot, kad sākat
strādāt ar HTML, rakstīt HTML, lai jums rastos daži labi ieradumi, kā
sakārtot savu HTML labā veidā un stilā, kā arī pārliecinātos, ka
nedarat neko tādu, kas varētu radīt sintakses kļūdas, izraisot
nelielas problēmas.
Es esmu Dags Loids.
Šis ir CS50.