>> [MUSIC PLAYING]
>> DAVID J Malan: Bu CS50 edir və Bu həftə 7 başlanğıc.
Belə ki, geri salamlayıram.
Və siz geri bilər problemi, dörd müəyyən
bir zibilçi ov bir az var idi bəzi inanılmaz mükafatlar vasitəsi üçün
Siz photos bərpa sonra həm də burada New Haven heyəti,
Siz kimi bir çox tapmaq üçün etiraz edildi Siz ola bilər kimi bu kompüter elm.
Və biz bütün var təqdim dəstə.
Mən bir neçə bölüşmək istədiyiniz düşündüm Bu gün burada sizinlə.
>> Biz online Bütün bunlar göndərmək lazımdır.
Amma xüsusilə də istədi Yaxşı bir to-- diqqəti cəlb,
Sam onların bir neçə idi ümumiyyətlə, bu kimi çəkdirən.
Amma bu kimi görünür bu səhər, qalib
Müəyyən bir kimsə ilə Ken seçildi Heyəti 24 kamerası
Siz daxil almaq zaman daha çox və ya bir neçə şəkillər çox heyəti hesab.
Burada təsvir növbəti Ken edir New Haven Məryəm.
>> İndi Ken, baxmayaraq ki, çevrilir bir künc işin az
ki, hələ əvvəl baş deyil.
Bu baş vermədi çıxır ki, Mənə problem gözəl çap qoymaq üçün
heyəti var ki, deyir ki, dörd müəyyən inanılmaz mükafatlar üçün qeyri-münasib
Ken, əlbəttə, biridir, çünki Bizim heyəti fotoqraflar.
İndi bildirib ki, o ilk demək mənə yazdı
online bu photos göndərmək etməyin.
Mən böyük bir hissəsi hesab photos ən çünki
Bu fotoqraf baxmaq etdi ki bu kimi bir az bir şey.
Və s.
>> Amma Ken mənə Sizi əmin etmək istəyirəm ki, o, bir çox yaxşı fotoqraf ki,
o, bir professional alır bulanık deyil photos,
diqqət daha yaxşı ki, o, öz işçilərinin bir neçə etdi.
Əksinə yalnız çox etiraf Biz nə istədiyiniz fikir nə Ken,
siyahısını getmək təqdim faktiki tələbələr.
Və bu ilə Lance çıxır Bu səhər etibarilə 15 photos
Bizim qalibi olmuşdur.
>> Və Lance Colton ilə burada təsvir özüm ilə Skaz, və Sam ilə.
Lakin o çıxır ki, kimi 11:46 AM, yalnız bir az əvvəl, belə ki,
Mən e-poçt geri getdi və aşkar Biz hələ bir daha təqdim ki,
Bonnie adlı bir şagird tərəfindən kimin e-poçt yalnız bildirib.
Yalan fikrində deyil, mən sinif zamanı bunu.
Və sonra yalnız əlavə davam 14 photos, Lance 15 utancaq biridir.
>> Amma Bonnie nin photos, bu çevrilir həyata çox heyət üzvləri, Sam idi
Onların arasında, belə ki, biz fikir nə Bunu ki, bu, həm də etiraf edir.
Belə ki, Dropbox əldə əlavə space ki qatılan hər kəsə
qəbul, bu iki bölmələr də olacaq onlar üçün gözəl catered nahar almaq
və onların bölmə bu gələn həftə mates.
Və belə ki, bizdən eşitmək, Ki Lance və Bonnie.
Onlara belə böyük Congrats.
İndi, sizin kim ki nahar Kimi daha çox, ümumiyyətlə,
Cambridge ki, CS50 nahar bilirik və New Haven bu cümə deyil.
CS50 veb çizgi RSVP gedin.
İndi seminarlar bir söz.
Daha curricularly.
Beləliklə, biz yaxınlaşır edirik dövr point
Siz başlamaq lazımdır son layihələr haqqında düşünür.
Və əslində, yalnız bir az olacaq pre təkliflər ola qondarma.
Belə ki, pre təkliflər üçün nəzərdə tutulub ola olduqca aşağı təsir və həqiqətən
yalnız bir imkan Siz qısa bir qeyd yaratmaq üçün
tədris fellow bildirmək üçün ona və ya onun sizə düşüncə etdiyiniz nə
son layihə üçün nə edə bilərsiniz.
>> İndi, bir çox tələbələr son bunu web final layihələr əsaslanır.
Əlbəttə, biz yalnız istəyirik bu artıq ötən həftə
və web proqramlaşdırma dalğıc kənarda.
Belə ki, əgər narahat deyil heç bir fikir necə var
Siz fikir qurmaq ki, Əgər fikrinizi ola bilər.
Bu, həqiqətən, yalnız bir məcbur funksiyası var Əgər düşüncə və söhbət üçün
bu barədə TF ilə.
Amma ki, sizə kömək, və nəticədə final layihələri ilə,
CS50 bir ənənə var ki, bilirik seminarların təklif.
>> Və bu əlləri, on, isteğe bağlıdır və ya imkanları əsasında mühazirə
olan mövzular haqqında daha ətraflı məlumat üçün Əlbəttə nin bir az əlavə
proqramı, lakin buna baxmayaraq gözəl material final layihələr çəkmək üçün.
Və bu var siyahısı Burada New Haven CS50 heyəti
üçün ilə gəlmişəm IOS bu il
proqramlaşdırma, Android proqramlaşdırma, oyun inkişaf,
daha alətləri və dəstələri və dil və texnika.
>> Belə ki, CS50 saytda bir göz saxlamaq.
Və bu arada, siz istəyirsinizsə bu hər hansı sizin maraq qeydiyyatdan
CS50 çizgi reyestrinə gedin.
Və biz sonra kimi təqib edəcək gün və uçuş dəfə və yeri
və, hər şey ən hər şey edəcək ola axın və tələb də mövcuddur
Siz, həqiqətən, bunu edə bilməz, əgər sonra.
Belə ki, daha ADO olmadan, biz GET ilə son dəfə off sol.
>> Və bu idi mesajı kimi idi virtual zərf daxilində, geri,
biz router router-dən keçdiyini bir web browser və web arasında router
server.
Və mesaj baxdı bu kimi kiçik bir şey.
Bu gizli mesaj idi ki, bir zərf daxilində həqiqətən idi
olan kağız parçası üzərində yazılmış ilk line sanki, çizgi almaq deyir.
>> Və yalnız bir ağlı başında olma çek kimi, slash nə işarə idi?
Slash zaman nə deməkdir bir web tələb?
Siz hər zaman tələb.
Ən heç bir zaman bir web saytına girə, siz həqiqətən bir fayl adı yazın yoxdur.
Siz yəqin ki, yalnız, Facebook.com getmək , gmail.com, və ya kimi daxil edin.
Və çizgi nə təmsil edir?
Nə fayl?
Xüsusi və ya nə səhifə?
>> index, evet.
Default səhifə So.
Bir fayl daxil deyil, əgər belə biz görmək başlamaq lazımdır kimi ad,
Siz, həqiqətən, yalnız tələb edirik Mənə Facebook default səhifə verir
və ya mənə inbox vermək və ya vermək Mənə xəbər default səhifə
CNN-nin veb və ya belə.
Və bir server sonra cavab bir şey ilə mesaj
bu kimi, mən, bəli deyərək HTTP versiyası 1.1 danışmaq.
>> Statusu 200, biz nadir hallarda insanlar code
yaxşı, çünki heç görəcəksiniz.
OK, sorğu deməkdir qəbul və düzgün ele edildi.
Və məzmun növü yəqin cavab
tez-tez, lakin həmişə mətn.
Və xüsusilə, HTML.
Və həqiqətən biz bu gün oldu.
>> Belə ki, əslində, mən getmək üçün gedirəm irəli və browser açmaq.
Mən Chrome istifadə gedirəm, istifadə edə bilərsiniz həftə hər hansı bir brauzer ən gəlib.
Biz, ümumiyyətlə, Chrome gəlir xüsusilə, çünki
proqram geliştiriciler üçün yaxşı.
Inşa bir çox var daha asan alətləri
HTML və CSS yalnız inkişaf etdirmək, biz bu gün söhbət başlamaq lazımdır hər şeyi,
həm də digər dillərdə həmçinin.
>> Mən irəli getmək və to-- getmək üçün gedirəm Mən klik və ya sağ nəzarət gedirəm
bir web page yerdə basın.
Mən Element Inspect getmək üçün gedirəm.
Mən çimdik gedirəm mənim Burada ekran yalnız bir az.
Mənə alt bu hərəkət edək.
Belə ki, bu deyirlər nə Chrome-nin Inspector.
Belə ki, bu ayıklama kimi alət Chrome daxil.
>> Hamınız artıq bu Siz Chrome istifadə edilmişdir varsa.
Və bu neler görmek üçün imkan verir Bəzi web page başlıq altında.
Belə ki, əslində bir götürək Aşağıdakı kimi bu baxmaq.
Bu yol daha çox xüsusiyyətləri vardır və biz bu gün qayğı.
Amma burada artıq bu Nişanlar var.
Elements, şəbəkə, mənbələri, qrafiki, və bəzi digər stuff.
Mən basın gedirəm Bir an şəbəkə.
>> Və bu bir az böyük var Burada ilk baxışda.
Amma mən nə gedirəm edək Mənə bir az asanlaşdırmaq.
Mən yandırmaq üçün gedirəm qırmızı, belə ki, işıq qeyd.
Mən log qorumaq demək gedirəm.
Və bu, yalnız bir az şey fiqurlu
zamanla ki, saxlamaq olacaq brauzerinizin olur hər şey.
İndi getmək üçün gedirəm http://facebook.com üçün.
>> Əslində, bu www edək yaxşı tədbir üçün, doğramaq.
Daxil edin.
Belə ki, bir URL bir çox Siz ziyarət ola bilər.
İndi Facebook web səhifə üst gəlir.
Və sonra bütün dəstə stuff altındakı uçdu.
Və əslində, bu çıxır ki, Siz Facebook.com ziyarət zaman,
yalnız bir HTTP sorğu edilməsi deyilik Bu Facebook.com gedir çıxır
bu zərflərin 41 göndərir öz get xahişi ilə hər,
ekran arxasında olsa da, göstərilən Burada ekranın altındakı,
Bu, həqiqətən, onu göstərir ki, mənim browser 41 sorğu etdi.
>> Və ümumi, bu 861 transfer kilobayt və nədənsə etdi
çox səkkiz kimi seconds ki, bütün yükləmək üçün.
Belə ki, həqiqətən bir az qəribə Facebook site ki alacağını
uzun, lakin bu halda ola bilər.
İndi bütün bu mən, həqiqətən, qayğı yoxdur topmost tələbi istisna olmaqla haqqında.
Belə ki, burada bu bir gedək və mənə yalnız bir an üçün zoom imkan verir.
>> Və mənə bu zoom imkan verir.
Mən hətta baxmayaraq sol etdik Belə ki, nə burada gedən bir çox var
Mən qeyd etdik ki, Facebook.com və sonra
Mən aşağı scrolling edirəm ki, qeyd , aşağı kaydırarak aşağı kaydırarak,
başlıqlarını tələb etmək.
Və Chrome göstərir ki, görürsünüz Mənə mahiyyətcə daxili məzmunu
sorğunun Mən.
Bu olduqca eyni format deyil yol, lakin almaq qeyd var qeyd,
, ev sahibi qeyd var qeyd Facebook.com, yol, və ya çizgi,
Mən xahiş fayl.
>> Və sonra mən hərəkət əgər geri, biz, həqiqətən lazımdır
görmək Facebook döndü nə Mənə bu başlıqlarını bütün.
Ki, virtual zərflərin içərisində belə Həqiqətən əsas dəyər cüt bir çox var.
Bir söz, bir kolon, sonra dəyəri.
Bir söz, bir kolon, və dəyəri.
Bu adlı mövzular var.
Və yol daha ətraflı çox burada var biz, həqiqətən, indi qayğı.
>> Amma bu ikinci orada son bir,
qeyd, Facebook.com server ki, Həqiqətən burada dedi bəzi mətn HTML gəlir.
Belə ki, bu bütün demək deyil Bir web tələb zaman ki,
bir bir brauzer səhifə server ki, server cavab
öz bir zərf ilə olan daxili mətn.
Başqa sözlə, HTML.
Hypertext Markup Language.
Hansı bir dil biz bu gün təqdim ki,
insanlar və ya kompüter yaratmaq məqsədilə web pages həyata keçirmək.
>> Xüsusilə, bu baxaq.
İndi geri getmək üçün gedirəm Facebook saytına.
Mən gedirəm yalnız nəzarət klik və ya sağ klik
və View Page Source basın.
Və Chrome istifadə bile, IE bu, Firefox bunu edə bilərsiniz edə bilər,
Safari hətta menyu baxmayaraq, bunu edə bilərsiniz variantları bir az fərqli ola bilər.
Bu HTML ki, Mark və Facebook şirkəti yazıblar.
>> Və kollektiv, bu dil burada mavi və ağ səhifə həyata keçirir
ki, biz bir an əvvəl gördüm.
İndi, bu bir az böyük deyil.
Biz sol üst yuxarı baxmaq əgər Lakin, biz istəyirik bəzi nümunələri görmək üçün başlamaq niyyətindədir.
Bir çox var kimi görünür bu açıq bucaqlı bracket
və sonra bu söz HTML var.
Burada başqa bir açıq bucaq bracket və baş.
>> Biz aşağı diyirləyin əgər burada var və aşağı və aşağı, mən
irəli getmək və cəhd edir bir şey axtarmaq üçün.
Orada yol üzərində sağ Burada açıq bracket orqanıdır.
Və son geri biz təklif olunan vaxt
sadə web page ki, bir insan yazmaq bilər ki,
bu kimi bir az bir şey ola bilər.
Open HTML tag, açıq rəhbəri tag, açıq adı tag,
sonra qapalı adı, qapalı baş, açıq bədən tag, bəzi mətn, bədən qapalı
qapalı HTML.
>> Amma yalnız bir an üçün burada fasilə.
Bu kodu, siz var olsa əvvəl yazılı heç vaxt
lakin hələ də kifayət qədər başa düşmürəm neler, olduqca yaxşı görünür.
Sağ, bu, çox təmiz.
Bu, çox stylistically gözəl.
Abzas və ağ kosmik bir çox.
Facebook deyil.
Belə ki, niyə Facebook qədər deyil HTML yazılı mən daha pis?
Görünür.
>> Sağ, bu kimi stil üçün beş həyata.
Bir çekici səbəb var onlar üçün bu küncləri kəsilmiş.
Bütün hüquqlar, belə ki, onlar istəmirəm daha asan oxumaq üçün edir.
Belə ki, bəzi mənada, onlar bu obfuscating, sort onu Scrambling
ən azı estetik belə Bu Myspace üçün çətindir ki,
getmək və off rip onların ana və bunun üçün HTML.
Bu proqramları ilə çıxır ki, Chrome, o cümlədən baxmayaraq,
biz super asanlıqla bu qədər təmiz olar.
Belə ki, səbəb kimi olduqca var.
Nə səbəb ola bilər.
Bəli.
Bəli, ağ kosmik xərcləri data.
Nəyi nəzərdə tutursan?
Bəli, dəqiq.
Siz Tab Açar çox və ya hit əgər space bar, nəticələrini hesab edir.
Belə ki, klaviatura hər əsas bir deyil [Işitilemez] bir byte kimi təmsil.
>> Belə güman ki, Mark və ya devs hər hansı bu gün yalnız bir dəfə boşluq edib
Bu HTML səhifə ki, Facebook ana təmsil edir.
Və Facebook bir çox var istifadəçi bu gün.
Belə güman ki, Facebook homepage Bu gün bir milyard adam tərəfindən ziyarət olunur.
Və Facebook kimsə var yalnız bir dəfə yer bar basın.
>> Belə ki, bir əlavə byte, bir milyard sorğu,
nə qədər daha çox məlumat Facebook internet üzərindən köçürülməsi
kimsə hit çünki onun klaviatura boşluq?
A milyard bytes, və ya bir gigabyte data Facebook server göndərilir
ətrafında insanlar üçün heç bir yaxşı səbəbdən dünya.
İndi ki, yalnız bir yer var.
>> Biz, həqiqətən, bu təmiz əgər Təsəvvür edin şey və girintili və əlavə
ağ kosmik bir çox və tab simvol və fəzalarında,
Siz xərcləri gigabayt başa, əgər terra bytes yer daha çox.
Və belə super ümumi web inkişaf faktiki dünya
Sizin kodu küçültmek üçün.
Və biz nəhayət görürsünüz Bunu necə.
>> Ancaq bu gün biz kodu yazılı başlamaq lazımdır bizə insanlar tərəfindən həqiqətən oxunaqlı deyil.
Geri getmək əgər, baxmayaraq ki, çıxır Chrome bu alət, Element Inspect
Əvvəllər biz Network nişanı idi.
Bu getmək əgər çıxır ki, Siz, həqiqətən, görmək nə elementləri tab,
Chrome olduqca çap həmin HTML versiyası.
Belə ki, biz bunu deobfuscated etdik.
Belə ki, bir kompüter üçün heç bir oyunu var.
İndi həqiqətən bilərsiniz ətrafında basın və başlamaq
bir web səhifə iyerarxiya görmək.
Belə ki, həqiqətən bunu edək.
Mən irəli getmək və açmaq üçün gedirəm Mənim Mac mətn redaktə adlı proqram.
Və bu, yalnız ki, xatırlayıram super sadə mətn proqram.
Windows Notepad.exe var.
Mən birə gedirəm Aşağıdakı yazın.
Doc növü HTML, açıq bracket HTML, bracket HTML qapalı
biz burada səhifənin baş Burada səhifə rəhbəri sonu,
bir adı, salam dünya kimi olacaq.
>> Və sonra burada, biz lazım web page orqanı.
Bağlı bədən.
Və sonra burada, salam dünya.
Oldu.
Beləliklə, biz bir super sürətli web page yazdıq.
Mən kimi saxlamaq üçün gedirəm mənim masa üstü hello.html.
My Mac, gedərək şikayətçi ki, düşüncə, bir dəqiqə gözləyin,
Bu mətn faylı, nə Siz Txt zəng etmək istəyirsiniz?
Amma xeyr, mən dot HTML istifadə etmək istəyirik.
>> Mən onda gözəl nə var yalnız bu faylı basın,
hello.html, burada mənim web səhifə var.
Təəssüf ki, mən dünyada yeganə şəxs
kim indi bu səhifə bilər.
Harada yəqin yaşayır çünki?
Bu, mənim Mac var, sağ?
Hansı əhəmiyyətsizdir.
Bu otaqda heç kimi internet Dursun
həqiqətən səhifəsini ziyarət edə bilərsiniz.
Belə ki, bu gün biz lazımdır başqa element təqdim edir.
>> Və bunu, mən gedirəm davam və bulud 9 açmaq.
Belə ki, bulud 9 kurs a deyil bulud-based service-- CS50
IDE-- Yəni bizim İş bütün var haradasa internet çalışan.
Və bizim faylları bütün deməkdir artıq açıq erişilebilir.
Belə ki, irəli getmək və bunu bildirin.
Mən irəli getmək üçün gedirəm və yeni bir fayl NCS50IDE yaradır.
Mən əvvəl kimi saxlamaq üçün gedirəm və hello.html kimi saxlamaq basın.
Və indi yalnız vaxt saxlamaq, mən gedirəm Bu kodu yapışdırıb irəli getmək və surəti
yerine köçürmək.
Və saxlamaq.
Və indi mən bir var Fayl hello.html çağırıb.
Amma necə, həqiqətən, Mən nə bir web page kimi açmaq?
Bəli, bu CS50 üçün inşa çıxır IDE cingilti kimi yalnız bir compiler deyil
və gdb kimi ayıklama və digər proqramların dəstələri,
tam hüquqlu həqiqətən var CS50 IDE ərzində çalışan web server.
>> Hamınız ki, demək deyil, öz web server.
Və bir web server yalnız bir parça kimin məqsədi həyat proqram
web pages xidmət etməkdir.
Brauzerlər sorğu üçün qulaq asmaq üçün və az virtual zərflərin ilə cavab
içərisində olan edir yazdıq content.
Belə ki, bu web server həqiqətən pulsuz və açıq mənbə.
Harada açıq mənbə yalnız deməkdir Başqası var ki, proqram
yazılı hamımız bilər ki, həqiqətən görmək və hətta download və
mənbə kodu dəyişdirmək.
Və Apache deyirlər.
>> Və biz bir az daha asan etdik Apache 50 zəng tərəfindən CS50IDE istifadə edin.
Bu, həqiqətən bilər ki, Aşağıdakı başa düşürük.
Mən Apache 50 başlanğıc demək gedirəm.
Və sonra mən yalnız dot demək gedirəm.
Və biz bir qədər çox deyərək gizli mesaj
Apache sənəd [qəbulu? qrup?] ev, ubuntu, ki, nə,
iş doğramaq.
Başlanğıc web server Uğurla Apache 2.
>> Belə ki, uzun hekayə qısa, I yalnız bir düyməsini basdı
və indi bir web server çıxdı TCP port internet dinləmək
Xüsusi ünvanda 80.
Və burada deyir və Bu Based dəyişəcək
Istifadəçi adınızı və digər amillər, Mən bu basın əgər, artıq qeyd
IDE50 dot jharvard və belə belə ki, qeyd bütün bu vaxt ki,
Son bir neçə üçün həftə, siz ola bilər
Öz istifadəçi adı fark sağ üst tərəfdən daxil edilir
CS50IDE künc.
>> Və həqiqətən olmuşdur bütün bu Ünvanı zaman siz bilərsiniz
internet vasitəsilə bütün faylları edin.
İndiyədək bu mattered deyil, C, çünki siz, ümumiyyətlə,
bir çalışan şeyi istəyirəm terminal deyil, web.
Amma bu gün biz başlamaq web-based kodu yazmaq
biz istəyirik ki, ictimai URL əlçatan.
Belə ki, nə mən gedirəm Bunu bu URL basın.
>> Mən kifayət qədər çox ki, qeyd çirkin index, bir kataloq siyahısı
lakin nə Fayl yəqin ki, sizin həyata Jumps?
Hello.html.
Mən xilas olmasıdır Mənim iş fayl.
Mən Apache web server bildirib etdik nə Davudun iş kataloq baxmaq.
Və hər kəs imkan Dünya bu faylları bax.
>> Şübhəsiz ki, mən indi hello.html basın
Mən məhz bu nişanı fayl ərzində görmək.
İndi Cloud 9 işi, qeyd bizim üçün bir az faydalı bir şey.
CS50 IDE ərzində var qeyd birdən-birə bir ünvan bar.
Biz olmalarına baxmayaraq ki, var CS50IDE ziyarət Chrome istifadə edərək,
CS50IDE daxilində öz var İndi bir web browser versiyası.
Və belə daha çox kimi şeyi çətinləşdirir,
Mən irəli getmək üçün gedirəm və yalnız bu URL surəti.
Mən irəli və yalnız getmək üçün gedirəm öz Chrome pəncərə açmaq.
Belə ki, burada heç bir sehrli, heç CS50IDE var.
Mən yalnız sözün yapışdırıb gedirəm Mənim J Harvard URL və Enter düyməsini basın.
Və voiture, indi, və nəzəri, hər kəs
internet, mən konfiqurasiya olsanız müvafiq icazələrin
Bu faylı edə bilərsiniz.
Və indi mən söylədi hello.html, voiture var
Mənim olduqca underwhelming web səhifə.
Belə ki, tez ağlı başında olma çek bunu bildirin.
Ki, bütün Çünki konseptual set edir.
Və biz, həqiqətən, həqiqətən var necə HTML özlüyündə yazmaq üçün öyrətdi.
Hər hansı bir sualınız indiyə qədər yalnız baş nə?
Bəli.
CS50 bu web pages sahibi varmı?
Hansı mənada?
Yaxşı sualdır.
Belə ki, CS50 nin CS50.io. sahibi
Biz bilirik ki, domen adı alıb etdik.
Və uşaqlar təbiət CS50IDE daxil,
Siz bütün bir subdomain deyirlər nə almaq.
>> Belə ki, Malan IDE50-, və ya IDE50-Rob.CS50.io, ki, ərzində unikal ünvanı var
bizim domen adı.
Əlbəttə məqsədləri üçün, belə ki, Siz öz unikal ünvan var.
Amma biz şeyi sadələşdirilmiş etdik domeni alınması, CS50 dot
I / O və sonra başqa hər kəs ki, daxili, belə danışmaq.
Və biz geri gəlmək lazımdır yəqin ki, bir neçə həftə ilə,
xüsusilə final layihəsi Siz vaxt, bəzi
Öz domen adları almaq isteyebilirsiniz.
Bu nisbətən həqiqətən sadə.
Oldu.
Belə ki, indi bunu edək.
Mən geri getmək üçün gedirəm CS50IDE, mənim fayl indi,
hello.html, bütün maraqlı deyil.
Mən bir şey etmək istərdim ki, bir az gözəl.
Mən bu kimi bir şey üçün gedirəm.
Açıq paragraphs.html mənə bildirin.
Belə ki, bu mən əvvəlcədən yazdığı bir fayl.
Bunun başında, kimi həmişə biz şərh yoxdur.
Lakin HTML, şərh bir az fərqli baxmaq.
Xətti üç və xətt 14-də, siz Şərh başlamaq üçün sintaksis görəcəksiniz
və comment son.
>> Amma məhsullarının heç biri funksional məsələlər arasında.
Bu yalnız bir qeyd var burada neler insan.
Və yalnız bir sürətli ağlı başında olma kimi mən aşağı diyirləyin əgər, yoxlamaq,
Aşkar yeni nə var biz təqdim etdik tag?
qədər biz gördük beləliklə tags açıqdır bracket HTML, baş, adı və bədən.
Amma indi açıq-aydın yeni nə var?
>> Bəli, belə p.
p tag və ya paraqraf tag.
Və sonra mən yalnız bir default borc Latin mətn mənim ci maddələrdə təşkil.
Mən istəyirdim nə çünki nümayiş necə güc var
HTML mətn ci maddələrdə əks etdirir.
Və nə baş başlayan burada artıq var ki
bir model inkişaf edir.
Və mənə irəli getmək və bunu bildirin.
Mənə ilk Apache söndürmək edək.
Mən özü başlamaq üçün demək gedirəm daha bugünkü mənbə yeddi daxilində
m directory.
Belə ki, Mən hər şeyi etmək imkanı var.
>> Və indi mən geri getmək əgər Bu kataloq siyahısı,
Mən bu gün hər fayl bildiriş.
Və görəcəksiniz növbəti problem set alacağıq
Sizə təlimatlar verə bilər məhz bu etmək üçün.
Mən paragraphs.html açmaq varsa, bu bilər eləcə də bir proqramlaşdırma dili kimi baxmaq
sizə danışmaq və ya latın oxumaq yoxdur.
Amma bu yalnız üç-ci maddələrdə var Mətn HTML qədər qeyd olunur.
>> Və paraqraf qeyd Onların arasında fasilələri.
, Bu çıxır, çünki və hətta sizin olsa
Bunu etmək üçün meylli ola bilər, real dünyada isə,
Siz line qoymaq istəyirsinizsə şeylər arasında fasilələri,
güc sadəcə Bunu və Saxla edib.
Və indi mən burada yeniden əgər bildiriş ki, hər şey yalnız birlikdə blurs
Mətn yalnız bir damcı da.
HTML bir lal dil növüdür, çünki.
>> Bu istifadə üçün nəzərdə tutulmuşdur bir yol browser olacaq ki, yalnız
açıq-aydın nə demək nə.
Siz onu demək deyil Belə ki mənə yeni-cü bəndə vermək,
Yeni bir bəndə bax fikrində deyilik.
Və əslində, nə browser nə olacaq
Siz Enter düyməsini basın, hətta əgər, nin təkrar deyək
və yenə bu mətn şəkildə hərəkət sonra ekranda və aşağı saxlamaq
və sonra browser gedir, yenidən ağ alan bütün Daraltmak üçün
yalnız bir, görünən ağ daxil.
Oldu.
Belə ki, paraqraf tag var.
Və belə model nə burada inkişaf var?
Bəli, bu halda görünür ki, HTML bütün tag başlayaraq haqqında
və tag başa.
Və tag nədir?
Bəli, bu sintaksis bir yığın var.
Open bracket, bir söz, qapalı bracket, bir tag edir.
Və ya tag başlayın.
Və sonra olduğunuzda özünüzü ifadə edildiyini,
kimi siz-ci bəndinə ilə tamamlayın, Siz qarşı danışmaq üçün bunu.
Amma qarşı olduqca geri deyil.
>> Siz sadəcə eyni tag nin prefiks oxşar irəli çizgi ilə ad.
Oldu.
Belə ki, bütün maraqlı deyil.
Və əslində, biz edilməsi deyilik web bütün daha maraqlı.
Mən etmək istəyirsinizsə böyük və cəsarətli şeyi?
Belə ki, burada bir misal var ki, həyata çevirir headings.html da, mənim bədən,
Mən bir H1 tag, H2, H3 var dörd, beş və ya altı, olan
olduqca gizli görünür.
Amma bu açıq getmək əgər Məsələn, bir nəzər salaq.
Headings.html.
>> Default brauzerlər verə bilər, belə ki, mətn ki, böyük və disparate ölçülü qalın.
H1 böyük.
H6 sonra kiçik və arasında başqa hər şey.
Belə ki, hələ maraqlı, lakin var həqiqətən bilirəm web.
Biz istəyirsinizsə Mən siyahısı kimi bir şey. .
Belə ki, burada bir bulleted siyahısı Harvard evlərin üç.
>> Siz bunu necə haqqında getmək idi?
Yaxşı, list.html nəzər.
Və burada, biz bir çox funkiness az
lakin nə hesab edək.
Belə ki, yalnız gördüm nə əsasında, UL unordered siyahısı üçün dayanır.
Unordered siyahısı yalnız bulleted deməkdir.
Heç bir nömrə var.
Də var ki, bir şey bir adlı tag bir OL edir siyahısını verdi.
Sonra LI siyahısı maddə deməkdir deyil.
>> Və belə ki, avtomatik olaraq Sizin üçün nömrələri hər şey.
Amma mənim abzas yenidən, bütün və ağ kosmik yalnız mənim naminə edir.
browser deyil həqiqətən qayğı gedir.
Belə ki, baxmayaraq ki, bilmədi Bu, yalnız aydın olmaq üçün nə,
olsa belə olmamalıdır browser hələ olacaq
yalnız gözəl onu anlamaq mümkün.
Mən yenidən vuruş edirəm mənim browser, mən yenidən tıklayarak alıram
və heç bir dəyişiklik baş hələ browser çünki
Mən bunu demək dəqiq nə.
>> Oldu.
Belə ki, bu yalnız mətn.
İndi daha maraqlı bir şey edək.
Mən irəli getmək üçün gedirəm və Bu HTML bəzi borc.
Mən irəli getmək üçün gedirəm və Burada yeni bir fayl yaratmaq.
Və biz bu rick.html zəng edəcəyik.
Biz qeyri-mütənasib var istifadə bir şey
bu bir rick roll adlı class bu il, mən bilmirəm,
yalnız üzvi baş verib.
>> Və indi idarədən var.
Mən yalnız onunla getmək üçün gedirəm.
Mən Google getmək əgər Şəkillər və Rick Astley.
Biz nə niyə bilmirsinizsə Bu, yalnız Wikipedia oxumaq.
Siz link tıklayan sonra hər zaman, kimsə haradasa laughing edilmişdir.
Və mənə ahead-- getmək imkan biz bu image keçirmək imkan, gedin.
>> Belə ki, burada biz bir var Google Şəkillər image.
Və bu ki, güman edək əsaslı hər yerdə internet.
Belə ki, bu, mənim üçün OK güman gedirəm həqiqətən, mənim web page bu qoymaq.
Mən irəli getmək üçün gedirəm və image URL surəti.
İndi Cloud geri getmək əgər 9, mən burada nə görmək edək.
Belə ki, burada yalnız bir web səhifə.
Bu haha, Rick Astley deyil, İndi geri getmək üçün gedirəm
mənim brauzerinizin, yenidən, və maraqlı.
>> Rick haradadır?
Belə ki, mənə baş nə görmək bildirin.
Əslində, mən gedirəm Mən bunu etmədi kimi iddia.
[Işitilemez] burada onu qoymaq.
Biz bir anda geri gəlmək lazımdır.
Belə ki, burada rick.html var.
Belə ki, Rick Astley deyil.
Bu çıxır ki, biz edə bilərsiniz həqiqətən, burada ona əlavə edin.
Bu Rick Astley edir.
Mənə onun bir şəkil vermək demək gedirəm mənbə Mən yalnız sitemizi URL olan
yəqin xoşbəxt ad bir şey və ya digər.
>> İndi gedirəm oxşar tag yaxın.
Belə ki, bu super uzun wrapping edir.
Amma bütün var fark açıq bracket image edilir,
bu bir atributu ilə mənbəyidir.
Və bu həqiqətən uzun URL var.
Və çox sonunda, bu bildiriş.
Niyə etmiş çizgi bucaqlı bracket əvəzinə, hər tag kimi,
açıq bracket olan, IMG, bracket bağlanıb?
Just hətta əgər bir tahmin almaq heç bir tanışlıq heç yoxdur
HTML ilə əvvəl.
>> Belə ki, bu bağlayıb necə komanda, amma niyə
bu, həqiqətən intuitiv etmir mənada bir az daha bir şey etmək
yaxın image kimi Verbose?
Bəli.
Just semantically, heç mənada var bir resim başlayan və bir şəkil bitən,
bu da var və ya deyil.
Belə ki, bir boşluğu tərk etmək məntiqli deyil bir resim daxilində başqa bir şey üçün.
Siz yalnız bunu edə bilməz.
Və belə syntax ümumiyyətlə yalnız olardı
daxili irəli çizgi etmək açıq tag və ya start tag
və sonra Save edib.
>> Əgər mən indi bu faylı yeniden Mən burada bir yaxşı web səhifə yemək var.
Və biz, əlbəttə, ola bilər həqiqətən insanların annoy
əvəzinə daxilolma ilə YouTube linki kimi.
Və əslində, heç bir zaman Əgər YouTube getdi sonra
və təsadüfən həqiqətən mənə imkan rick burada özümü roll.
Belə ki, Rick roll.
Belə ki, rick Mən burada getmək üçün gedirəm roll--.
>> [MUSIC PLAYING]
>> OK, bir adam ki, xoşuma gəldi.
Belə ki, bütün bu dəfə qeyd əgər Əlbəttə, siz Share link basın
URL almaq ki, siz həqiqətən bilərsiniz Bir e-poçt və ya məhkəmə image bütünləşdirmək
və ya bir problem və ya bir slayd.
İndi, mən əvəzinə embed basın əgər, qeyd edir ki, bütün bu vaxt, bu məhsulları
olmuşdur.
Mən irəli getmək və bu surəti gedirəm.
>> Və yalnız biz Mən, daha yaxşı görə bilərsiniz Mənim mətn redaktoru yapışdırıb gedir.
Bu bildirək ki nə YouTube belirten edilmişdir.
Bir səfər hər dəfə YouTube video, əgər
video embed istəyirəm sizin veb səhifə, sadəcə bu qamarlamaq.
Belə ki, bu başqa bir deyil HTML tag bir iframe çağırıb.
Və ya line çərçivəsində bir.
Belə ki, çox bir az daha görünür bütün digər daha mürəkkəb.
Belə ki, image çıxır ki, tag və yəqin iframe tag
adlı atributları nə almaq.
>> Bu başqa HTML sintaksis parça.
Tag nin əlavə adı, açıq bracket tag adı,
Siz tag davranış nəzarət edə bilərsiniz atributu bütün dəstə olan
dəyəri bərabərdir.
Atribut dəyər bərabərdir.
Və belə, məsələn, YouTube bizə izah edir
Bu video eni istəyirsinizsə 420 piksel və hündürlüyü olmaq
315 piksel olmalıdır ki, var necə HTML bildirirəm.
>> Video mənbəyi gedir ki, uzun YouTube URL olmaq
və sonra bəzi digər məhsulları , frame sərhəd sıfır kimi
ki, yəqin ki, var deməkdir şey ətrafında heç bir sərhəd.
Yəqin ki, tam ekran imkan verir istifadəçi o deməkdir ki,
bir düyməsini basın və həqiqətən tam ekran video.
Mən, həqiqətən, olmaq istəyirsinizsə Belə ki, Rick dot HTML burada təsirli,
image tag istifadə daha çox imkan Mənə silmək, əvəzinə bu yapışdırıb.
İndi yeniden.
İndi burada biz yenə getmək.
Bütün hüquqlar, kifayət qədər var.
Bütün hüquqlar çalışacağıq, belə ki, ağır yenidən bunu etmək deyil.
Belə ki, burada takeaways bir nə var?
Bu web pages kimi belə HTML, kimi çirkin ki, həqiqətən olduqca sadədir.
Bu proqramlaşdırma dili deyil.
Bu funksiyaları yoxdur.
Bu loops yoxdur.
Bu şərait yoxdur.
Bu bütün onlarla deyil müxtəlif tags, hər hansı
sıfır və ya daha çox atributları var.
Və əslində, fun haqqında nə HTML daxil dalış başlamaq kimi
bu, çox self tövsiyyələri var ki.
>> Edir Bütün bir anlayış deyil HTML ümumi çərçivəsində.
Bir tag nədir, bir atributu nə, Siz, həqiqətən, bir web page konfiqurasiya necə
göstərildiyi kimi.
Və başqa hər şey həqiqətən nəticəsidir bir online istinad axtarır
və ya bəzi bunu necə googling texnika və ya biz gördük kimi,
Facebook mənbə axtarır indeksi, bir web baxaraq
Siz onu istəyirəm ki, mənbə kodu və anlamaqda necə orada developers
həqiqətən şeyi qoydu.
>> Beləliklə, biz həmçinin images edə bilərsiniz.
Və əslində, biz bir an əvvəl bunu.
Mənə davam və yalnız göstərmək edək.
Burada bir nümunə kodu var.
Əgər grumpy pişik görmək istəyirsinizsə.
Belə ki, mən fark Burada bir resim tag var.
Mən yuxarıda şərh var.
Mən alternativ var accessibility üçün mətn.
Bir ekran istifadə, belə ki, kimsə görmə səbəblərdən oxucu
həqiqətən, sonra ola bilər onların ekran oxucu grumpy pişik deyirlər.
Əgər onlar bilməz, çünki image görmək, onlar
ən azı onların kompüter ola bilər Bu şifahi nə onlara.
Və fayl mənbəyidir cat.jpeg edir.
Belə ki, əslində, mən, həqiqətən istəyirdi Mən ola bilər nə, ağıllı almaq done--
Mən, Rick Astley getməmək üçün söz Mən əvəzinə pişik google gedirəm.
Mən Google Şəkillər getmək əgər Burada biz güman lazımdır
bu mənim pişik bir şəkil edir.
>> Mən nəzarət tıklayan ki, düşünək və ya sağ təsadüfən, bu tıklayan
ürpertici.
Və cat.jpeg Mən gedirəm mənim masa üstü saxlamaq üçün.
Mənə indi bulud 9 geri gedək.
Ki, burada edə bilərsiniz edək yerli faylları yüklemek üçün getmək.
Mən bu işğalçı əgər fayl, cat.jpeg, bildiriş
Mən bunu sürükleyin bilər ki, bulud 9 onu buraxın
və burada mənə fəğan olacaq.
>> Biz artıq etdik, çünki bir cat.jpeg fayl verilmiş,
lakin bu super asandır Siz var bir şəkil işğalçı
Facebook götürülmüşdür Flickr və ya kimi və ya
və həqiqətən sürükleyin və düşmək sonra bulud 9 daxil və bunu etmək
öz şəxsi hissəsi veb və ya problem
biz tezliklə görəcəksiniz kimi yeddi və ya səkkiz seçin.
Və sonra zaman nəhayət ki, pişik ziyarət
Hesab edirəm ki, eyni pişik nazil fərz, ki that-- bildiriş sitayişə layiq idi.
>> Nə görmək olardı Burada bu üz kimi bir şey.
Faylları Belə ki, bir web page arayış
ya öz yerli ola bilər bəzi digər server hesabı və ya uzaq
Rick olduğu kimi Bir az əvvəl Astley photo.
Belə ki, burada nə else-- başqa biz burada edə bilərsiniz?
Belə ki, aşağıdakı bir nəzər salaq.
Siz növ nə sərin bilirik?
>> Biz indiyədək edilməsi olmuşdur çox statik web pages.
Mən aşağıdakı kimi ədviyyə şeyi etmək istəyirəm.
Mən öz search engine etmək istəyirəm.
Belə edək, bir axtarışı etmək irəli getmək və bunu başlayın.
Mən irəli getmək və yaratmaq üçün gedirəm yeni bir fayl search.html çağırıb.
Və biz online versiyasını prefabed var.
Whoops.
Sizin terminal pəncərə yapışdırıb etməyin.
Online Prefab versiyasını.
Mən belə başlamaq üçün gedirəm.
Belə ki, burada başlanğıcı var bir fayl search.html çağırıb.
Mən onu saxlamaq üçün gedirəm bugünkü mənbə directory.
Mən bu Axtar zəng etmək üçün gedirəm.
Əslində, biz daha yaxşı etmək lazımdır.
CS50 Axtar və həqiqətən marka.
Və indi mən demək gedirəm H1 CS50 Axtarış kimi bir şey.
Və sonra burada, H2 tezliklə.
Və yalnız, H1 recap üçün və H2 nə müvafiq olaraq deməkdir?
>> Bəli, belə böyük və qalın, və kimi böyük, lakin hələ də qalın deyil.
Mən bu saxlamaq və burada getmək əgər, fayl search.html görək.
Bütün hüquqlar, bu bir [Işitilemez] right-- edir.
Yanındayız.
David səhv edir.
Oh, sağ var.
David bir idiot var.
OLDU.
Belə ki, orada deyil.
Belə ki, CS50 axtarış tezliklə.
Belə ki, indi, bu sintez edək Keçən həftə nə.
>> Biz danışdıq harada HTTP aşağı səviyyədə mexanika.
Və bu yeni ideyalar HTML, hansı yalnız
bu biçimlendirme dili harada dəqiq nə etmək üçün bir browser demək
və öz axtarış mühərriki həyata keçirir.
Belə ki, əvəzinə yalnız Tezliklə deyərək, mən
təqdim etmək niyyətindədir bir şey forması tag çağırıb.
Bu formada, mən gedirəm giriş sahəsində kimi bir şey var.
>> Bu giriş adı sahəsində Mən zəng etmək üçün gedirəm Q.
Bu giriş sahəsində növü Mən demək gedirəm yalnız "text" dir.
Bir mətn sahəsində və biz lazımdır bax, yalnız bir mətn qutusu edir.
Və belə ki, var burada hiss deyil Bu nöqtədə daxilində bir şey.
Və mən sadəcə gedirəm ki, tag yaxın
irəli tag özü sağ doğramaq.
Və sonra mən gedirəm başqa bir giriş var.
Input type təqdim bərabərdir.
Və sonra mən gedirəm də bu bir bağlayın.
>> İndi mən burada geri getmək üçün gedirəm.
Və artıq biz, bax olduqca çirkin olsa, mən var
əvvəlinə var Burada öz axtarış səhifə.
Əslində, mənə edək bir az bu qədər təmiz.
Bu barədə çıxır ki, Burada giriş, mən ola bilər
tutucu adlı bir atribut.
Mən açar sözlər kimi bir şey görə bilərsiniz, və ya daha çox xüsusi, q üçün sorğu.
>> İndi, mən qeyd boz mətn bu cür
ki, yox Mən yazmağa başlamaq kimi,
lakin yəqin ki, bir şey digər web pages gördüm.
Mən, həqiqətən, təqdim düyməsinə kimi deyil.
Mən, həqiqətən vermək gedirəm Düyməsini axtarış bir dəyər göndərin.
Mən yenidən əgər İndi, fark Mənim düyməsinə axtarış adlı olur.
Mən, həqiqətən, yoxdur, bilmək Burada logo kimi.
Belə ki, Google Font generator.
>> Mən daha bu qədər ədviyyə istəyirəm.
Belə ki, CS50 axtarış.
Mənə öz logo yaratmaq imkan verir.
Ki, gözəl görünür.
Belə ki, indi mənə bu barədə gəlib as-- xilas edək.
Harada gedir?
Orada.
OLDU.
Buraxılmış.
Kimi saxla.
Stupid brauzerlər.
Yanındayız, biz olacaq Bu dəfə və bütün üçün düzeltmek.
Biz orada getmək.
Oldu.
Sorry.
Off gün.
İndi bu funky edir.
Tam ekran çıxın.
Oldu.
>> İndi normal kimi şəxs kimi image edin.
Logo.gif.
İndi CS50IDE və getmək üçün gedirəm Mən sadəcə loqosu qamarlamaq üçün gidiyorum,
Mən daxil sürükleyin gedirəm Mənim mənbə yeddi directory,
fayl artıq mən ki, OK deyiləm, mövcuddur.
Belə ki, mən yalnış gedirəm Mən artıq idi, çünki.
İndi necə bu xilas edirsiniz?
>> Burada irəli getmək və bunu edək image mənbə logo.gif bərabərdir.
Bu bağlayın.
Yadda saxla.
İndi mən axtarış geri əgər səhifə, indi olduqca yaxşı axtarır.
Bütün hüquqlar, bu deyil, belə ki, olduqca faydalı bir şey.
Əslində, mənə axtarış edək və pişik üçün nə görmək.
Cats.
Lənət olsun.
Bu, sadəcə yəqin, işləmir.
Belə ki, əsas parça var burada itkin?
>> Sağ, hər hansı bir HTML bilmək bile, Mən telefon formu qeyd açılmış etdik
və mən giriş əldə etmək üçün necə izah etdik Mənə bir mətn qutusuna vermək və bir düyməsinə təqdim
yəqin nə parça eksik?
Biz, həqiqətən almaq istəyirəm düşünək düzgün iş bu şey.
Biz nə etmək lazımdır?
Biz geri son həyata keçirilməsi üçün ehtiyac var verilənlər bazası və ya search engine özü,
ki, bir almaq olacaq səmimi zaman bütün çox.
>> Belə ki, biz son dəfə nə xatırlayıram.
Belə ki, Google bir şey üçün axtarış əgər və siz əvvəlcədən, off çevrilmişdir
Xatırladaq ki, ani axtarış.
Belə ki, mənə söndürmək imkan ki, bu, həqiqətən,
köhnə məktəb browser kimi davranır, İndi pişik kimi bir şey üçün axtarış əgər,
URL kimi görünür nə xatırlayıram.
Bu olduqca sirli var.
Amma əlaqədar, Xatırladaq ki, çizgi axtarış edir.
Sual işarəsi q pişik bərabərdir.
>> Və mənə vermək görünür axtarış nəticələri bütün dəstə.
Belə ki, mən gedirəm nə bilirik?
Mən borc gedirəm Yalnız bir dəqiqə üçün Google.
Mən artıq getmək gedirəm burada və mən demək gedirəm
bu hərəkəti təşkil edir və ya təyinat, belə ki, danışmaq
sözün Google olmalıdır.
Və metodu Mən istəyirdim istifadə etmək olacaq.
>> Belə ki, fəaliyyət nədir?
Fəaliyyət weirdly, adlı lakin yalnız o deməkdir
kim idarə gedir Bu formada fəaliyyət?
Mən axtarış, basın nəticə getmək lazımdır?
Və mən indi mənim forma geri getmək əgər burada mənim web səhifə yeniden
və indi bir şey üçün axtarış it kimi, indi qeyd
Google həyata yenidən var.
Sağ?
>> Mən bir şey axtarmaq istəyirsinizsə başqa, bu yalnız itlər üçün çalışır,
bu da pişiklər üçün çalışır.
O, həmçinin CS50 üçün çalışır.
Və OK, bu, yalnız var whelming altında deyilmi?
Bütün hüquqlar, lakin bu, həqiqətən işləyir.
Belə ki, həqiqətən, nə davam edir?
Beləliklə, mən istifadə edərək, mənim brauzerinizin tədris etdik HTML, istifadəçi daxil etmək
və həqiqətən daxil göndərmək bir uzaq server HTTP istifadə.
>> Və mənim brauzerinizin çünki HTTP, bu, həqiqətən anlayır
nə ki, URL tikintisi Mən brauzerinizin üzərində son
nə görürsünüz mən it üçün axtarış.
Mən axtarış basın, fark Mən nəzərdə tutulmuş URL dəyişikliklər
sorğu it bərabərdir google.com/search üçün.
Və şəklində, çünki metodu almaq, çünki bilir,
sadəcə var ki, URL üçün əlavə.
>> İndi, bu web pages hələ çirkin var.
Belə ki, başqa bir təqdim edək sintaksis parça bu gün əgər.
Bu məlum bir şeydir Cascading Style Sheets kimi.
Belə ki, mənə bir nəzər edək burada bu nümunə və görmək
biz neler çıxarmaq bilər.
Bu CSS0.html edir.
Bu harada şeylər bir az çirkin almaq.
Təəssüf ki, çünki web dünyada,
HTML tək hər şeyi edə bilməz.
Və belə ki, istəyirsinizsə , web page stylize
Siz, həqiqətən, diqqət etmək lazımdır fərqli bir şəkildə estetik.
Belə ki, burada, mən web bədən olan daxili səhifə böyük div var.
Və div yalnız bölgüsü deməkdir.
Belə ki, bir bəndin ancaq kimi eyni semantika yoxdur
mətn bir bəndin.
>> Bu yalnız deməkdir browser, burada gəlir
Mənim web bir böyük düzbucaqlı region səhifə, mən xüsusi onu idarə etmək istəyirəm.
Ki, div başlayır İndi, line 21 edir.
Və yalnız bir tahmin edir.
On line 21 təsiri nədir səhifənin məzmunu qalan?
Bu mərkəzə.
Bu hamısıdır.
Beləliklə, biz bir yol görmədim həqiqətən mətn mərkəzə.
>> Əslində, mənim search engine, faktiki Google fərqli olaraq,
bütün sol üzərində haqq qazandırmaq.
Və indi line 21, mən hey deyərək alıram browser, səhifə bölgüsü yaratmaq.
Yalnız mənə böyük, görünməz düzbucaqlı vermək.
Mən istəyirəm necə web page haqqında düşünürəm.
Aşağıdakı kimi və sonra stylize.
Bu quotes daxilində, İndi, ikinci dil
biz bu gün təqdim ki, adlı Cascading Style Sheets.
Təşəkkürlə, bu, çox deyil bir proqramlaşdırma dili,
belə ki, çox onun sintaksis məhdud, lakin də çox onun funksionallığı məhduddur
HTML halbuki bütün haqqında bir web page məlumatın qeyd
və bir web page strukturu.
CSS haqqında ümumiyyətlə son mil, estetik,
ölçüsü və rəngi və əldə bir web page tam doğru yerləşdirilməsi.
Şübhəsiz ki, bu, formalaşır əsas dəyər cüt ilə.
>> Bu mətn kimi A əmlak bir kolon izlədi align,
ki, dəyəri izlədi bu halda mərkəzi əmlak.
İndi sizə bildiriş yuva bu şeyi edə bilərsiniz.
Hesab edirəm ki, hər şey istəyirdi Mən mərkəzi üçün qeyd etdik
ki, niyə xətt 21 və müvafiq line 31.
Amma indi güman John demək istəyirəm Harvard, mənim ana səhifəsinə xoş gəlmisiniz.
>> Copyright simvolu John Harvard.
Mən ilk istəyirəm Güman bu xətləri olduqca böyük olacaq.
36 piksel.
Belə ki, layiqli ölçüsü var.
Mən qalın olması onun çəki istədi.
Amma sonra aşağıda, Mən kiçik mətn istəyirəm.
Və aşağıda, mən istəyirəm hətta kiçik mətn.
Sorry.
Bu gün off gün kimi hiss edir.
>> Belə ki, indi mən bu ifadə nə edirəm?
Burada line 22-də əlaqədar deyil div və ya nested div, siz əgər.
Bu da, öz stil tag var.
Mən 36 font ölçüsü daxil.
Mən qalın bir font çəki daxil.
Burada, mən yalnız 24 piksel daxil.
Və nəhayət, line 28, mən 12 daxil.
Belə ki, yalnız tez ağlı başında olma çek kimi və insan oxu bu,
Ekranda olan sözlər həqiqətən cəsarətli olacaq?
Hansı xətləri həqiqətən cəsarətli var?
>> Just John Harvard.
Sağ?
Line 22 hey deyir, çünki browser, burada səhifə bölgüsü var.
Bu font size 36 point etmək.
Font çəki qalın olun.
Kimi tezliklə olmaq kimi müvafiq end tag
və ya line 24-də qapalı tag, o deməkdir ki, hey browser,
bu edirik nə bunu dayandırmaq.
Və bildiriş baxmayaraq, aydın olmaq line 22 bu atributları bütün var
stil kimi, zaman line 24 tag yaxın,
Yalnız tag adını.
>> Siz söz stil təkrar etməyin və ya bu quotes daxilində bir şey.
Və mən indi bu baxmaq əgər mənim brauzerinizin, bu götürək
Bir son nəticə baxmaq. Getməmə qabaqda CSS 0 bu faylı üçün.
Və bu, olduqca düz hələ lakin olduqca maraqlı əldə.
Amma bu var çıxır Mən burada edə bilərsiniz başqa şeylər,
və edilməsi riski tamamilə çirkin bu,
burada da qeyd my Mənim web page bədən,
Mən funny bir şey edə bilərsiniz BG və ya fon rəngi kimi.
>> Və tez sevdiyiniz rəng var?
Green eşitdim.
Oldu.
Belə ki, indi mən indi yenidən hit əgər, Biz yaşıl web page var.
Bütün hüquqlar, belə ki, pis deyil.
Və indi mən bu etmək istəyirsinizsə, həqiqətən cool, mən mətn rəng edə bilərsiniz
hətta qırmızı.
Belə ki, bu kimi görünür nə edək.
İndi olduqca yaxşı axtarır.
Və aşağı burada, əgər həqiqətən kimsə ilə mess istəyirəm
və ya olmaq istəyirsinizsə insanların bir olan
Bir web ziyaret sizi bezemek çalışır səhifə Google aldatdığı etdik, çünki
düşüncə bütün dəstə var Açar sözlər görək like-- ki, yeniden.
Harada getmək idi?
Bizi orada.
Oldu.
Mən kənara olaraq söyləyirəm ki, biz lazımdır bir neçə həftə bu məhsulları haqqında danışmaq
Biz haqqında danışmaq zaman təhlükəsizlik, əgər həqiqətən
bir embed bütün dəstələri bir web page açar sözlər,
Onlar üçün görünən deyilik, hətta Google kimi insan, kimsə, əlbəttə,
hələ həqiqətən bu tapa bilərsiniz.
Bütün hüquqlar, belə ki, olduqca var olduqca tez çirkin.
>> Və əslində, bu, bütün deyil Öz web fərqli olaraq çox
bir lisenziya kimi səhifə olan Mən tapmaq üçün ətrafında googling başladı
mənim köhnə web son versiyasını.
Bu olduqca pis idi.
Əslində, mən almısan yalnız sinif əvvəl bir.
Amma orada pis var.
Bu yəqin mənim 1996-cı ildə ana səhifə.
Görünür Mən idi düşündüm insanlar öz adını soruşmaq uyğun
onlar bilər əvvəl həqiqətən, mənim web səhifəsinə baxın.
>> Və sonra mən onlara göstərdi yəqin ki, axmaq bir şey.
Mən növbəti dəfə daha çıxartmaq lazımdır.
Amma indi, edək dizayn bir az hesab edir.
Biz stil haqqında söhbət etdik.
Bu səhifə indiyədək və yazdıq ən hər şey
stylistically olduqca təmiz.
Amma dizayn haqqında nə?
Bəli, ixtisar bir çox var Mən burada bunu etdik nə.
>> Mən söz qeyd etdik yerlərdə bir neçə rəng.
Mən bir neçə font ölçüsü qeyd etdik yerlərdə bir neçə yerləri və qalın.
Və əsaslı mən co deyiləm iki dildə qarışaraq.
Mən tags ilə HTML var mənim atributları və sonra qəflətən,
quotes arasında, mən ikinci dil bu gün
yenə yalnız bu adlanır CSS, əsas dəyər cüt və ya bu xassələri
colons ayrılmış.
>> Bu çox çıxır kimi C biz
amil başlaya bilərsiniz header faylları bəzi indeksi,
belə ki, biz HTML eyni edə bilərsiniz.
Belə ki, doğru bir addımdır.
Bu versiya, CSS1.html olduğunu qeyd eyni web page struktur.
Beləliklə, mən bütün dəstə var divs, lakin bu dəfə mən var
banderol xilas kazanılmış Siz görəcəksiniz kimi div.
>> Mən bu üç divs təqdim etdik top, orta və alt, unikal kimlikleri.
Bu, çox gözəl, o bölmələri verilməsi
səhifə unikal tanımlayıcıları, Mən başqa yerdə onlara istinad edə bilər.
Harada?
Yaxşı, mənə diyirləyin bildirin.
Və bu günə qədər, zaman biz baxdı etdik bir web page başında, nə
biz yaşadığınız yalnız tag bir web page rəhbəri?
Bir az louder.
Just adı bu günə qədər.
Amma bu var çıxır bir neçə başqa şeylər
Siz orada bir qoya bilər hansı bir stil tag deyirlər.
Belə ki, bir an əvvəl biz baxdı bir stil atributu da.
Bir stil tag var çıxır.
Bu daxili məxsusdur bir web page rəhbəri.
İndi edirəm nə görürsünüz.
Mən bu daxilində var stil tag aşağıdakı.
Mən sözün line 20-də qeyd edirəm Mən stylize istəyirəm ki, bir tag adı.
>> Sonra mən açıq buruq brace var və buruq brace bağladı.
, C ruhu belə oxşar, lakin yenə bu bir funksiyası deyil,
burada yalnız bir sintaktik detal.
Və sonra, əlbəttə, mən deyirəm browser, hey browser,
səhifənin bütün bədən etmək mərkəzi mətn alignment var.
Və sonra bu aşağıdakı deyib.
Hey browser, bir HTML görmək əgər səhifə element və ya tag ki,
, üst benzersiz bir tanıdan var belə hash simvolu burada yalnız deməkdir
üst unikal fikir, davam və font ölçüsü etmək 36
və onun font çəki qalın.
>> Hey browser, onun bir element ID 24 piksel etmək, orta edir.
Və hey browser, görürsünüz əgər alt ideyası 12 piksel edir.
sonunda təsiri tam sam edir.
Mən CSS 1 getmək varsa, səhifə eyni görünür.
Amma biz doğru bir addım istəyirik bir az daha yaxşı dizayn.
Mənə indi CSS2 burada qayıdaq və mən etdik nə görmək.
>> İndi səhifə, həqiqətən, həqiqətən təmiz.
Əslində, mən bütün uyğun Burada bir səhifə məzmunu.
Amma nə yeni tag Mən var təbii ki, təqdim?
Link.
Və bu, bir tag üçün ən yaxşı ad deyil Bu mənada bir link deyil, çünki
biz bunu bilirik, lakin bu o deməkdir ki, bəzi digər fayl bir link.
Bu kəskin C. daxil kimi növ
>> Bu HTML yoldur browser hey demək,
məzmunu almaq getmək Fayl css2.css çağırıb.
əlaqələr, mənə, bu bir stil var ki.
And olsun ki, nə bir Cascading Style Sheets vasitələri S var.
Bu stil edir.
Bu olan yalnız mətn faylı əmlakın bütün dəstə.
Bu üslub bütün dəstə var Bir səhifə müraciət etmək istəyirəm.
>> Və bu yəqin deyil ikinci fayl istinad.
Mən ki, CSS2.css açmaq əgər, Mən etdik ki, görürsünüz
surəti və bütün yapışdırıb edir Bu fayla bu.
İndi, siz heç vaxt belə əvvəl bu məhsulları kodlu,
yalnız ilə hesab atasözü mühəndis papaq
on, niyə bu bir yəqin ki, yaxşı dizayn?
Bu CSS xassələri Factoring, öz fayl onları qoyulması.
Baxmayaraq biz bu həll problem kimi beş dəqiqə əvvəl
ilk versiyası.
>> Biz təkmilləşdirilmiş etdik səhifə stylistically,
bu yalnız daha yaxşıdır müəyyən mənada dizayn.
Niyə düşünürsünüz?
Bəli.
Daha çevik necə?
Bəli.
Siz getmək istəyirsinizsə Belə ki, geri və hər şeyi dəyişdirmək,
İndi, bir yer var burada şeyi dəyişə bilərsiniz.
Və əslində, bir şey üçün kimi problem, yeddi müəyyən
biz həyata lazımdır fond ticarət haqqinda,
ki, bir var olacaq pages bütün dəstə.
Və həqiqətən olardı annoying siz istəsəniz, hm,
Mən, həqiqətən, Mən istəyirəm 24 piksel kimi deyil 28 piksel və ya bir qədər daha böyük olmalıdır.
Və sonra bir nə var tapmaq və əvəz qlobal
və ya web faylları bütün açmaq sadəcə həqiqətən bir dəyər dəyişdirmək üçün.
Bu üslub faktoring ilə bir mərkəzi yer daxil,
İndi bir mətn faylı aça bilərsiniz hər hansı bir proqram CS50IDE da,
, dəyişdirmək saxlamaq və görülən.
Siz bu təbliğ etdik Hər yerdə dəyişikliklər.
Və eyni olardı bir dot h fayl həmçinin.
Belə ki, hər hansı bir sualınız beləliklə qədər bu sintaksis?
Bütün hüquqlar, belə ki, biz var hər şey görünür həyata
həqiqətən başqa hiperlink həyata keçirir.
Və belə ki, irəli getmək və bunu bildirin.
Mənə davam edək Burada yeni bir fayl yaratmaq.
Mən zəng etmək üçün gedirəm link.html, bugünkü kodu qoymaq.
>> Mən açıq gedirəm bracket doc növü html.
Bir kənara, bu şey kimi top, bu doc ​​növü bəyannamə,
Bu qəribə yalnız biri ünlem ilə.
Siz yalnız orada nə var və bu, biz HTML versiyası 5 istifadə olunur deməkdir.
Eski versiyasını dil çox uzun idi
Siz lazım strings var qoymaq.
Belə ki, burada link adlı bir nümunəsidir.
>> Mən burada mənim web page bir bədən lazımdır.
Və burada bir href bərabər nin HTTP://www.disney.com deyək
və mənim sevimli haqqinda, biz demək lazımdır.
Bütün hüquqlar, belə ki, bir çox xətərsiz, istifadəçi dostu səhifə.
İndi mənim kataloq daxil edin burada siyahısı və link.html açmaq,
biz hiper mətn var.
>> And olsun ki, bu harada HTTP H gəlir.
Hipermətn Ötürmə Protokolu Mətn köçürülməsi haqqında
digər resursları hiperlink var.
Şübhəsiz ki, burada tanış retro, əgər mavi link tıklayan ki,
həqiqətən Disney.com məni gətirib çıxaracaq.
İndi oh ki, tezliklə həyata gəlir.
Bütün hüquqlar, belə ki, indi, nə bəzi Bu nəticələrinin?
>> Və səmimi, dünya başlayır bir az daha yaxından tanış olmaq üçün
və həmçinin bir az scarier həm də bir az daha
Siz başlamaq bir dəfə müdafiə self bu şeyləri anlamaq üçün.
Oran, siz bəzi, siz getmək əgər, çünki Gmail spam qovluq və ya hətta
Sizin gelen qutusu, siz yəqin ki, var E-poçt bir növ kazanılmış
ki, dəyişdirmək isteyen sizin parol bəlkə ya bəlkə yoxlamaq
PayPal etimadnaməsini və ya etajer.
>> Və əslində, siz qəbul ola bilər burada klik kimi deyir ki, bir şey
PayPal Parolu sıfırlamak üçün.
İndi, əgər, qeyd bu Disney.com deyil
lakin kimi badplace.com və , yeniden Qeyd edək ki, burada mətn
heç bir şey deyə bilər.
Və əslində, bu, yalnız söz edir.
Niyə Mən, həqiqətən, super zərərli deyil və http://www.paypal.com deyirlər.
>> PayPal yenidən buraya basın parol və indi yeniden.
Bu hüquq, olduqca qanuni görünür?
Mən basın deyil, demək bu deyir ki, bir e-poçt.
Amma burada dichotomy qeyd.
Bu www.paypal.com deyir, və əslində, bir dəqiqə gözləyin,
biz istədiyiniz bilirik ki, təhlükəsizlik s.
Belə ki, indi, www.paypal.com HTTPS getmək, lakin siz əvvəl bunu heç vaxt varsa,
vərdiş halına alıram Burada kiçik links üzərində hovering.
Və görmək çətindir orada ekranda,
və burada bütün asandır.
Amma yol aşağı burada kiçik kiçik künc
həqiqətən browser edir gedirik ki, sizə xəbər
əvəzinə Paypal.com bir badplace.com üçün.
İndi biz bu gedir?
Biz bu gün etdiyiniz bütün nümunələri, biz ağır kodlu və əl həyata çap etdik.
web inanılmaz maraqsız zaman ağır
ki, content, sizin web pages kod statik və heç vaxt dəyişir.
Əlbəttə, bütün Sevimli saytları bu gün,
Bu Gmail və ya Twitter və ya olub Facebook və ya digər hər hansı bir sayı
dinamikdir.
Onlar dəyişir edirik istifadəçi daxil reaksiya
Google axtarış nəticələri kimi.
>> Və belə Çərşənbə günü biz nə deyil biz HTML və CSS tətbiqi tərk
biz almaq və arxamızda İndi ki, biz verilən üçün
bunu və biz təqdim yeni proqramlaşdırma dili
kimi adlı PHP, C, bizə vermək niyyətindədir
həqiqətən proqramları yaratmaq üçün güc özləri ki, çıxış yaratmaq.
Bu halda, biz istifadə edəcəyik PHP dinamik web yaratmaq üçün
Bu yeni dil istifadə pages.
Çərşənbə günü ki, daha çox.
Sonra baxın.
>> [MUSIC PLAYING]