>> Doug LLOYD: Yani biz harcanan about-- benim matematik doğru ise,
ve sanırım back-- seyir düşünüyorum Biz konuşurken yaklaşık 35 videolar geçirdi
Belki C'nin çeşitli yönleri hakkında Biraz daha, belki biraz daha az.
Ve biz kapağı yoktu C şeyi, ama biz
büyük bir yığın kapalı dil, bunun büyük çoğunluğu,
kesinlikle ortak kullanımlar için.
Şimdi konuşmak için gidiyoruz hakkında başka bir dil, HTML.
Ve biz karşılamak için gidiyoruz sadece bir video.
>> Ama bu Tamam olacak.
Bu aslında olmaya gidiyor bir şey mi alışmak için gidiyoruz.
Şimdi var Bir dilden temelleri,
aslında oldukça kolaydır diğerlerini öğrenmeye başlamak için.
Yani biz başlatmak için gidiyoruz biraz geri adım
ve temel geçiştirmeye bu gibi dillerde arasındaki farklar
ve çeşit ona bırakın.
Gerçekten harika bir sürü var internet, kaynakları olan
Sizi yönlendiren başlatmak için gidiyoruz İnternet, çünkü doğru
bilgilerin büyük bir depo.
Ve böylece edeceğiz seni gibi değil mutlaka olacak kaybetmekten
bilgi sahip değil Bir video kaplı.
Hala almak mümkün olacak ihtiyacınız olan her şey ve kullanımı
Zaten ettik bilgi C anlayarak inşa
Bu öğrenme eğrisi yapmak aslında diğer diller çok daha düz.
Söz veriyorum.
>> Ama bir dilden konuşalım her web için gerçekten önemli olduğunu
HTML sayfası.
HTML Hyper Text Markup Language olduğunu.
HTML bir dildir ama o bir programlama dili.
>> HTML değişkenleri yok.
Bu mantığı yok ya fonksiyonlar ya da böyle bir şey.
Biz herhangi bir yapamayız HTML başına programlama.
Bazen duyarsınız insanlar kendilerini tarif
HTML programcılar olarak hangi tamamen doğru değildir.
Biz HTML programları yazamazsınız.
>> HTML sadece metni işaretlemek için kullanılır.
Bir biçimlendirme dili denir.
Ve bu markup-- does-- Ne Biz HTML ve bu tags-- etiketleri kullanabilirsiniz
Bu anlamsal markup-- bir sayfanın yapısını tanımlar
ve düz metin neden olur etiketler yorumlanmalıdır arasında var
farklı şekillerde tarayıcılar tarafından.
Ve belki de açıklamak için en iyisi Bir örnek bu kadar yolu.
>> İşte çok basit bir HTML sayfası değil, HTML programı, yine bir HTML sayfası.
Ve biz bir olduğunu biliyoruz HTML sayfası biz ettik çünkü
HTML etiketleri ile her şeyi sınırlı.
Yani bu bir HTML etiketi gibi görünüyor budur.
Bu açılı ayraçlar arasında.
Ve biz de fark üst HTML ve çok altta,
Biz ne olduğunu yaptıktan sonra görünüşe göre diğer HTML bir sürü
Biz açılı ayraç çizgi HTML var.
Yani bir çeşit sınırdır HTML nedir ve ne değildir arasındadır.
Ve tabii ki, geleneksel, sadece Eğer C tüm programları yazdığı gibi
nokta C uzantıları ile, HTML dosyalarının tüm
nokta HTML uzantıları ile sona erecek.
Ama daha orada burada oluyor.
Biz sadece bu HTML etiketlerini yok.
Biz görünüşe göre bu var şey bir kafa etiketi denir.
Peki, tamam, o da ne?
>> Belki de en iyisi Bir cismin yoluyla ayırt
vücut web sayfasının içeriğini olmak.
Yani belki kafa etiketi şeyler tanımlar Bu, tarayıcı penceresinde doğru değil
ama nedense önemlidir bizim Web sayfası düzgün işlenmiş.
Örneğin, inside Baş etiketi biz başlık etiketleri var.
>> Yani başlık merhaba dünya olma, aslında ne olacak
Chrome'da sekmesinde gösterir veya safari veya Firefox-- içinde
ne olursa olsun tarayıcı işte prefer-- Ne başlığında göstermek için gidiyor.
Ve sekmelerde önce gösterir tüm tarayıcı penceresinde yukarı
ve yalnızca bir sayfa olabilir Bir seferde bir tarayıcı penceresinde açın.
Yani olacak sekmesinde benim sayfa yukarı başlık
veya tarayıcı penceresi bar, merhaba dünya.
Ve sonra içeriği benim web sayfası merhaba dünya olacak.
Yani bazı ne bir göz atalım Böyle bir şey gibi görünebilir.
Bu oldukça basit HTML sayfası.
Yani benim CS50 IDE buradayım ve Ben biraz yakınlaştırılmış ettik.
Ve ben sadece gidiyorum merhaba nokta HTML açmak
ve bu oldukça fazla olduğunu göstermek Daha önce gördüğümüz sayfa içeriği.
Benim basit HTML, baş etiketleri, başlık etiketleri, böylece vücut ve.
Ben temiz olması girintili ettik.
>> Ve ben de yapabilirim sonra ne benim IDE sadece sayfa önizleme edilir.
Ve işte başlıyoruz.
Benim sayfanın içeriği, dünya Merhaba, ben bir şey görmüyorum
Orada kafa etiketleri içinde.
Vücudun sadece içeriği değil.
Dünya, merhaba.
Ve yine vücudun sadece dedi, dünya, merhaba.
Diğer kısmı eksik.
>> Yani gerçekten hepsi bu.
Bu çok basit bir temel HTML sayfası.
Şimdi benim HTML girintili ettik gerçekten güzel ve organize olmak
ama aslında gerek yok.
Ben oldukça çirkin yapabiliriz.
Ve bu hala çalışmaya devam eder.
Bu aynı web sayfası olacaktır.
Ben sadece kurtulmak kazanılmış beyaz alan tüm.
>> O çıkıyor, beyaz boşluk verilerdir.
Ve böylece biz veri gönderirken gönderen sunucu, alıcıya
müşteriye, veri masraf.
Ve böylece boşluk kurtulmak aslında iyi bir fikir olduğunu
Birini iseniz kim hizmet vermektedir web içeriği bir sürü kadar.
Sen eğer kötü bir fikir Bu şeyler öğrenme var biri
ve sahip olmak istiyorum o güzel organize etti.
Bu, daha ayrıştırmak için çok daha kolay olur.
Ama işlevsel aynıdır bu.
>> Böyle girinti ve malzeme aslında HTML önemli değil.
Bütün mesele açılış etiketleri ve bir Doğru sırayla etiketleri kapanış.
Olsa da, burada ne dikkat edin.
Işaretleme, bize bir yol verir ekstra bilgi iletişim
Biz ne yazdık hakkında.
Merhaba, Dünya parçası oldu başlık olarak yorumlanır.
Ve, merhaba bölüm dünyaydı içerik olarak yorumlanır
ya da ne olmalıdır Benim web sayfasında görülebilir.
>> Bu farklı 100'ün üzerinde vardır etiketleri ve büyük kaynakların bir sürü
Onları bulmak için çevrimiçi.
Biz hakkında konuşmak için gidiyoruz Bu video birkaç tanesi, bazı
Gerçekten temel şeyler.
Ama biz konuşma gitmiyoruz tüm bu konuda çünkü o
Bunu yapmak için kapsamlı olacaktır.
>> Eğer olsa, yapabileceğiniz başka bir şey, geliştirici araçları açmak olduğunu.
Ve sizden çağırmak durumunda HTTP bizim video
Ben nasıl açılacağını açıkladı geliştirici araçları kadar.
Chrome'da genellikle F12 tuşu bulunuyor Geliştirici araç çubuğunu açmak için.
Sonra yerine Ağ seçme sekmesi, Elements sekmesini seçebilirsiniz.
Ve bir web yüklerseniz sayfa, aslında edeceğiz
Bu web sayfası oluşturur HTML bakın.
Ve böylece HTML hakkında çok şey öğrenebilirsiniz En sevdiğiniz web siteleri bakarak
ve onlar nasıl inşa görünce sizin gibi onlara çeşitli parçalar.
Yani belki bu serin var desen veya böyle bir şey.
Nasıl HTML ile yapabilirim?
Peki sadece geliştirici açabilirsiniz Bu öğe üzerinde araçları ve hover
ve HTML yapar tam olarak ne olduğunu görmek.
Yani gerçekten var HTML öğrenmek için iyi bir yol,
ve ben şiddetle tavsiye Eğer her ikisi de öğrenmek için yapmanız HTML
ve de biraz öğrenmek seçeneklerden bazıları hakkında biraz
size uygun geliştirici araçları, hangi
Kesinlikle olarak kullanışlı gelecektir Eğer daha yoğun web yapıyor başlar
programlama.
>> Yani bir göz atalım yaygın HTML etiketleri çift.
Ve biz atlamak ve bir göz atacağız Bu etiketleri de ne hale
Benim IDE bazı dosyalara bakarak olduğu gibi.
Yani burada üç çok temel etiketleri Metnin görünümünü verdiği.
B etiketleri, ben etiketler ve U etiketleri var.
Ve daha doğrusu ne olduğunu kalın aralarında metin oluşturmak,
italik, altı çizili ve.
Yani bu nasıl olacağını görelim Benim IDE gerçek bir web sayfası üzerinde gibi.
>> Yani burada benim IDE içinde ben bir BIU nokta HTML olarak adlandırılan dosya.
BIU nokta HTML sadece varlık kalın, italik, altı çizili.
Ben bu kadar açık olacak.
>> Ve biz burada göreceksiniz Bu metin olması B etiketleri kalın.
Bu metin ben etiketleri eğik.
Ve bu metin U etiketleri altı çizili olduğunu.
Bu neye benziyor olacak?
Peki yine tüm ben Buraya gitmek yapmak için
Benim tarayıcı, benim dosya tarayıcı, tıklayın Önizleme ve bu ne kadar gelir olduğunu.
>> B arasında metin etiketler gerçekten artık kalın.
I arasında metin etiketler gerçekten artık eğik.
Ve U arasında metin etiketler gerçekten şimdi altı çizilmiştir.
Yani oldukça iyi.
Biz şimdi metin yapmak için biliyorum Biraz daha fantezi bakmak
veya belirli şeylere vurgu çizin.
Burada ortak etiketleri Başka bir çift vardır paragraf etiketleri, P ve başlık etiketleri,
hangi ı HX burada render ettik.
>> Bunlar P etiketleri bu paragraf etiketleri, paragraflar halinde metin break up.
Sadece için yeterli değil Girin ve boşluk bırakın vurmak,
Bir bilgisayar yalnızca gidiyor çünkü Yapmanız bunu söylemek ne yapacağını
ve beyaz sayar çoğunlukla boşluk.
Yani biz sadece Enter hit olamaz ve bizim bilgisayar bekliyoruz
Biz istiyoruz yorumlamak için Yeni bir paragrafa başlamak için.
Biz çok açıkça söylemek zorundayım Bu paragraph-- bir another-- olduğu
P etiketleri kümesinin her içine alarak.
>> Ve biz de bu seçenek var H etiketleri, bu başlık etiketleri için.
Biz altı farklı seviyeleri var başlıkları, bir, iki, üç,
dört, beş, altı, giderek daha büyük ve daha büyük bir
başlıkları.
Ve onlar küçülür ve Daha küçük ve daha küçük ve daha küçük.
Bu yüzden, ikinci bir üst düzey başlık var seviye başlık ve benzeri, ve benzerleri.
>> En belki bazılarına bir göz atalım P etiketleri ve bazı başlık etiketleri
Bir web sayfasında eylem.
Yani burada benim IDE içinde ben adında bir dosya var PH nokta HTML, PH olan paragraflar
ve başlık etiketleri.
Bu kadar aç.
Burada bir sürü oluyor Bazı lorem koyduk çünkü
ipsum, burada bazı sadece rastgele metin.
Yani biraz uzaklaştırmak edeceğiz var çünkü çok oluyor.
Ama çok az olduğunu fark Ben bir H1, bir seviye bir tane var burada top
başlık etiketi.
Sonra ben sadece bir paragraf var Rasgele text-- lorem bir demet ipsum--
sadece metinde standart dolum varsayılan.
Yani bunun içinde iki paragraf var seviye bir başlık ve ardından aşağı aşağıda
hat 24 burada bir seviye iki başlık var, ikinci düzey başlık ve başka bir iki
paragraflar.
Peki bu neye benziyor Benim önizlemede görüntülemek olur?
Görelim.
>> Yani fark Burada ilk seviye başlığı
aslında biraz daha büyük İkinci seviye başlığında daha.
Bu yüzden H1 etiketleri kullanılır.
Ve P etiketleri bize izin fark paragraflar halinde şeyler kırmak için.
Biz bu P etiketleri kurtulmak kazanılmış olsaydı ve aslında sadece koymak girer veya İade
ne biz ümit arasında olur Farklı paragraflar olacak,
hepsi sadece birlikte slam olur ve Bu güzel paragraf olmazdı
Yukarıda ve aşağıda alanı ayırma.
Ve böylece bu ne paragraf var etiketleri ve başlık etiketleri
yaygın çizmek için yapmanız kullanılır Web sayfamızın bölümlerine dikkat
bu şekilde.
>> Sonraki kadar kullandığımız bazı etiketleri vardır web sayfamızda listeleri oluşturmak için.
Bu yüzden sırasız var lists-- ULs-- hangi sadece vardır
sipariş madde işaretli listeler, numbered-- olan liste
OLs-- ve içinde ya Bunlardan biri bizim olmalı
, LI liste öğelerini belirtmek için nasıl setleri.
Ve böylece biz açık UL etiketi ve biz bunun içine öğeleri koymak.
Ve sonra biz bitince Bu, biz UL etiketi kapatabilirsiniz.
>> Ve aynı şekilde biz olabilir sıralı veya numaralı liste
ve bunun içine liste öğeleri koydu.
Yani bir göz atalım listelerin bir çift
ve ne olur CS50 IDE olarak işlemek.
Yani benim IDE a burada var Dosya adı verilen listeler HTML nokta.
Hadi bir bakalım.
>> Ve burada haber ben sırasız var İçinde beş şeyi listeleyin.
Ve sonra sıralı bir liste var ve Ben etiketini biraz değiştirdim,
sağ?
Ben başlangıç ​​eşittir altı söyledim.
Bir sıralı liste I çıkıyor başlangıç ​​noktası her yerde ayarlayabilirsiniz
Ben Şehre olacak varsayılan want-- tarafından sadece bu sözde öznitelik ekleyerek
Benim OL etiketine.
Ve böylece bu liste olacak altıda saymaya başlar.
Bu numaralı listenin Yani elemanları olmalı, altı, yedi, sekiz, dokuz, on,
Beş element olduğundan Listede, bir karşıt olarak,
iki, üç, dört, beş, burada Ben OL demişti eğer durum olurdu
Başlangıç ​​özniteliği belirtmeden.
>> Yapabilirsiniz, böylece Yani biz sadece bu önizleme edeceğiz Burada neler oluyor bir anlamda olsun.
Ve işte başlıyoruz.
Benim listesi var.
İlk beş elemanları sırasız veya madde işaretli listeler.
Ve önümüzdeki beş element Ayrı bir sipariş listesi vardır
Altı itibaren.
Bu yüzden nasıl biz HTML kullanarak listeleri oluşturmak.
Başka bir şey olabilir HTML ile yapmak istiyorum
bir tablo oluşturmak olduğunu satır ve sütun bilgileri
Bir de bilgi sunmak için Özellikle yol düzenledi.
Biz olabilir HTML ile bunu yapmak için Açık dirsek başlayan tablo tanımı
tablo.
Ve o tablonun içinde biz satır, TR etiketleri bir dizi olabilir
Her bir satır gösterir.
Ve sonra TD etiketleri TC etiketleri içeri bir satır içinde bir sütunu belirtmek için.
>> Neden TD aradı ve TC, değil mi?
Peki, TD tablo verileri için duruyor.
Genellikle koyuyoruz Orada bilgi.
O TD ve TC yüzden Böylece bu.
Biraz kafa karıştırıcı.
>> Yani masa etiketleri ve tablo etiketlerinin içinde
Eğer satır, TRs bir dizi var.
Ve her satır içinde var Sütun sayısı için TDS
Sahip istediğiniz söz konusu satırda.
En çok bir göz atalım CS50 IDE üzerinde basit tablo.
>> Yani burada bir dosya var masa nokta HTML denir.
En az bir göz atalım Ne böyle görünüyor.
Burada bir sürü oluyor ama Eğer dikkat ederseniz ben bir tablo açık var.
Ben tablo ile tanımını başlıyorum.
Ve sonra benim ilk satırda ben görünüşte sahip dört sütun, bir, iki, üç,
Dört.
Ve sonra o satır ile işim bitti.
>> Sonra başka bir satır başlatmak ve iki, dört, altı, sekiz yapın.
Bu satır bitir.
Başka bir satır, üç, altı, dokuz, 12 yapın.
Ve sonra son satır, dört, Sekiz, 12, ve olsa
Biraz, 16 burada kesti.
>> O satır bitirdim.
Masayı bitirdim.
Ve sonra benim HTML ile işim bitti.
Ne bu neye benziyor?
Peki, gerçekten görmek için çok değil.
Ben açıkça bilgilerimi organize ettik biraz daha organize bir şekilde.
Ama burada süper hoş değil.
Ve biz başa gidiyoruz Biz CSS hakkında konuşmak söyledi.
Biz bu fikri tekrar edeceğiz Biz table-- yapmak ne
belki biraz daha iyi biçimlendirmek?
Ama hala dört satır var mı, her biri dört sütun vardır,
Bir olduğu ve gerçekten bu ne miktarda Çok basit dört dört çarpma tarafından
tablo.
>> Biz bahsedeceğiz sadece birkaç etiket.
En bahsedelim bir HTML formu kavramı.
Yani bu görmüş olabilirsiniz Bir web sayfasının giriş bağlamında.
Genellikle kullanıcı adınızı yazın.
Siz, şifrenizi yazın ve gitmek için iyi bir konum.
Bu form başlangıcı olacaktır.
>> Atlayarak ikinci bir div.
Biz de girdiler sahip olan tür formların içine sığacak.
Bu elementler olduğu Aslında, yazarak ediyoruz
veya radyo düğmeleri sen geçiyor, ya da çek
kapalı geçiyor konum kutuları.
Yani bu formların içeri.
Ve temelde oluşmaktadır Formun her satır
Formunuz iyi biçimlendirilmiş olup olmadığını.
Sonra bu kavram var Gerçekten değil bir div,
herhangi bir kategoriye sığacak Ben ettik olanlar gibi etiketleri
Daha önce yapıyor.
Sadece bir çeşit çizmektedir Bazı rasgele division-- başlangıcı
Sayfanın div--.
Hiçbir görsel kırılma var.
Hiçbir satır yok.
Bu kadar yola değil otomatik olarak ayrı yığın.
Bunu stil olurdu bu şekilde yapmak.
>> Sadece bir çeşit ben istiyorum diyor Benim web sayfasında yer parçalı,
ve ben sadece diyeceğim Benim sayfanın bu bölümü.
Biz içeride bir şeyler koyabilirsiniz divs ve aslında,
Biz sından zaman Bir saniye IDE, yaparız
Ben atıyorum görmek benim bir div içinde oluşturur.
>> Yani benim IDE a burada var div formu nokta HTML olarak adlandırılan dosya.
Haydi açalım.
Dediğim gibi dikkat edin, div keyfi türüdür.
Sağ?
Gerçekten bir şey ifade etmiyor.
Yani keyfi bir var Benim sayfanın ilk bölümü.
Sonra, yerine başka bir div Daha sonra, hat sekiz başlayarak
Bu form var.
Ve formun içinde bir var girişlerin sayısı, form alanları.
Yani ismi olan bir alan var A- gerçekten bir şey demek değildir ki
Sağ şimdi-- görünüşte metin, başka bir alır
Bir Radyo bir şifre, başka sürer düğmesi, bir onay kutusu olduğunu başka,
ve bu başka bir düğmeye gönderin.
Peki, bu yapar Tüm aslında benziyor?
Peki, bir göz atalım.
Bizim önizleme penceresinde açmak gerekir.
Bu keyfi fark Önce orada division--
Burada hiçbir görsel ayrılması.
Bu gerçekten doğru, bir şey yapmadım?
>> Ve sonra benim form var.
Ve ben herhangi bir özel biçimlendirme yapmadım.
Yani formu sadece biridir bilgi büyük satır.
Ben farklı formumu biçimlendirilmiş olsaydı, Ben satır satır satır olabilir.
Ama herhangi bir stil yapmadım.
Yine, burada CSS bahsetmiyoruz.
Biz sadece HTML bahsediyoruz.
>> Eh benim metin şeklinde ben type-- edebilirsiniz unutmayın tipi metin biçimleri
bu yüzden benim adını koyabilirsiniz.
Ve benim şifre I Şifremi yazabilirsiniz.
Ve bu alanda, çünkü tip şifre olduğunu
sen benim şifre ne olduğunu bilmiyorum.
Tüm noktalar var.
>> Ben de bir kene seçebilirsiniz radyo düğmesi veya onay kutusunu işaretleyiniz.
Ya da benim formu gönderin olabilir.
Ve ben hiçbir şey yapmadım, bu yüzden benim formunu gönderdiğinizde,
sayfa yenileniyor.
Ama belki de yapılandırabilirsiniz benim Başka bir şey yapmak için düğmeye gönderin.
Ve biz neler yapabileceğini göreceğiz PHP üzerinde bir gelecekte video söyledi.
Ama bu çok oluşturur basit bir form biz
Kullanıcıların etkileşim olması için kullanabileceğiniz ve Web sitemize bilgilerinizi gönderin.
>> Son bir açıklama biz önce diğer bazı etiketler geçmek
Bu bir göz atın için vardır giriş etiketi bir kez daha.
Ben vurguladık Bildirimi kırmızı etiketin biter.
Şimdiye kadar gördüğüm her etiket vardır Bir başlangıcı ve sonu, bir açılış vardı
etiket ve kapatma etiketi.
>> Ama bir giriş etiketi yok.
Gider metin yok Giriş etiketleri arasında.
Tüm bilgiler Biz iletmek niyetinde ediyoruz
bir parçası olarak bağlı Bu girişin bağlıyor.
Biz girdi adı x eşittir var dikkat edin.
Tür y eşittir.
Budur gerçekten tüm bilgi İhtiyacımız.
>> Bu kendi kendine kapatma etiketi denir.
Bir açıklığı ve bir gerektirmez yakın tüm bilgileri nedeniyle
içinde bulunan etiket ve nitelikleri.
Yani bazen de bu görürsünüz.
Eğer bir varsa o yüzden sadece farkında olmak tamamen kendi kendine yeten etiket,
o açar ve kendini kapatır Soldaki açık açılı ayraç
ve çizgi açısı Sağdaki braket.
Biz onlardan bir tane görürsünüz Şu anda görüntü etiketleri ile de.
>> Biz görüntüleri hakkında konuşmaya başlamadan önce, biz köprüler hakkında konuşmalıyız.
Biz isterseniz web sayfası olmak interaktif ve bize hareket,
o muktedir güzel olurdu onlardan biri tıklayın
Ne tipik mavi linki olmuştur.
Biz nasıl inşa aslında Web sayfasında bir köprü.
Ve ilginç bir şekilde Başka bir HTML etiketi var
Köprü değil, hangi bağlantı denir.
Bir Burada çapa anlamına gelir, ve biz bir köprü işaret nasıl.
>> Bir href x aracı gitmek eşittir web sayfası X. Ve her şey
Bir etiket arasında açık ve yakın bir etiket
Ne olacak ki altı çizili bir bağlantı gibi görünüyor mavi metin
Biz aşina olduğunu.
Bunun altında biz bir görüntü etiketi, sahip olduğu Bir öz görüntülemek için etiket kapatıyor
X bulunan bir görüntü ve Değiştirmek mümkün olabilir
belirterek bu görüntü genişlik ve yükseklik
ve diğer özellikler de Bu dot dot dot var.
>> Burada çok altında Biz çok ilginç var
etiket görünümlü bu değil bir kapanış etiketi var.
Bu ünlem doctype HTML var.
Yani HTML yana civarında olmuştur web sayfaları oluşturmak için 1990'ların başında,
ve geçirmiş gitti O zamandan beri birkaç revizyonlar.
En son 2014 yılında Bir revizyon uygulandı
Şu anda mevcut olan HTML5 denilen fiili HTML standardının tür.
>> Gösteriyor ki için web sayfalar, HTML5 kullanılarak yazılmış olan
Biz başlamak nasıl budur.
Bu ihmal edilebilir ancak Ne temelde
araç size etiketleri herhangi birini kullanmak olamaz HTML5 etiketleri, bu yeni etiketleri vardır.
Yani biz hep başlamak Biz HTML5 kullanıyorsanız.
Ve tüm etiketler biz konuştuk Daha önce HTML5 etiketleri değildir.
Ancak bu, işaret eder HTML5 etiketleri mevcut olacaktır.
Ve böylece biz ünlem var doctype HTML, hangi
başında olan bizim HTML dosyası ve daha sonra bundan sonra nokta
biz aslında bizim HTML açık olan etiketlemek ve oradan devam edin.
>> Sonuncusu, bir açıklama etiketi çok hangi biraz farklı görünüyor.
Bu açı ile başlar braket ünlem çizgi
tire ama hiçbir kapanış dirsek.
Orada bu iki unsur arasında Eğer yorum yazmak yerdir.
Ve görüntülerin bir göz atalım ve yorumlar CS50 IDE bağlantıları.
>> Bu yüzden bir dosya olarak adlandırılan görüntü bağlantısı burada var Ben açacağım nokta HTML.
Ve ben bir arkadaşım var Bildirimi benim HTML açıklamalarda burada yorumlar.
Dolayısıyla, sadece C ve diğer benzeri Programlama dilleri,
Sadece bir işaretleme dili olarak HTML yorumlarınız için yeteneği var.
Ve bu yüzden görünüşte gidiyorum Rick Astley bir resmini koymak
bir yerde bu div arasında etiketi, bu keyfi bölünme.
Görünüşe göre o dosya Rick dot JPEG, bulunan hangi
biz üzerinde geri kafa eğer İkinci benim dosya ağaç,
var olan bir dosyadır Geçerli dizin.
Yani tamam.
Bunu başvuruda bulunabilir.
>> Sonra iç bağlantıları olabilir.
Yani burada hat 11 fark Benim href merhaba nokta HTML.
Yani bu sadece nokta HTML merhaba anlamına gelir hangi geçerli dizinde bulunmaktadır.
Ve ben de harici olabilir HTTPS sadece belirterek bağlantılar
Ben konuşuyor değilim belirtmek için Benim geçerli dizinde bir dosya hakkında.
Ben var olan bir dosyaya bahsediyorum bir yere sahip internet üzerinde
HTTP protokolünü kullanarak istemek için.
>> Yani bir göz atalım neler Bu sayfayı gibi görünebilir
ve Rick bir resim için hazır olsun Astley ekranda göstermek için.
Yani bu önizleme olacak.
Rick Astley de var Bu keyfi olarak çok üst
bölünme ben üstündeki koydu.
Ve sonra aşağı aşağıda Benim bağlantıları var, değil mi?
>> Merhaba nokta HTML bir bağlantı var.
Ve bunu tıklarsanız, ben olsun Bu sayfa için üzerinde taşındı
biz kimden çok aşina olduğunuzu Programımızın başından.
Ben yine açık bu sayfayı pop ise, eğer ben pop görüntü bağlantısı, bir kez daha açmak
Ben de dışarıdan gidebilir CS50 web sitesine.
Ve orada biz olacak see-- biraz uzaklaştırmak var--
biz CS50 web sitesini tür görürsünüz Bizim sayfanın ortasında gömülü.
Yani bir iç yapmak başardı bir harici link yanı sıra bağlantı.
>> HTML ile son kural Burada hakkında konuşmak için gidiyoruz
HTML de oluşmuş gerektiğidir.
C biz çok konuştuk şeylerin çeşitli sözdizimi.
HTML'de sözdizimi gerçekten etiketleri etrafında döner.
Açtığınız her etiket kapatılması gerekiyor.
Ve aslında, her etiket açmak tersten kapatılmalıdır.
>> Yani cesur bir etiketi açarsanız, bir italik etiketi, ardından bir alt çizgi etiketi
a her üç yapmak Metnin özellikle seti,
Eğer ters sırayla kapatmak gerekir.
Eğer cesur açıldı Yani, italik, sen altını
kalın, çizgi, italik kapatmak istiyor.
Kapsülleme Bu tür ne olduğunu HTML, güzel ve organize tutar.
>> C farklı olsa da, sözdizimi hataları olmaz Aslında muhtemelen HTML sakat.
Sizin HTML değil de olabilir oluşmuş ama yine de çalışmaya devam eder.
Ve böylece bu hatalar tarafından slayt sıralayabilirsiniz.
Gerçekten uyanık olmak size kalmış.
Bazen başarısız olur ama bazen onunla uzak alabilirsiniz.
>> Bu gerçekten olabilir zor bir görev olsa da,
Eğer açıldığında izlemek için Bir etiket, bunu ne zaman kapalı,
özellikle HTML olarak Dosyaları büyük ve daha büyük olsun.
Sen biraz yardım isteyeceksiniz.
Ve çevrimiçi vardır validator araçları olduğunu sen
web bir göz için kullanabileceğiniz sayfa ve iyi biçimlendirilmiş HTML olmadığını görmek.
Ve kesinlikle gerekir Bu bir göz atın
ve senin gibi bunları kullanmaya başlayabilirsiniz HTML ile bazı işler yapıyor başlar,
olsun sadece bu yüzden, HTML yazma düzenleme hakkında bazı iyi alışkanlıklar
iyi bir şekilde HTML ve iyi stil ve emin
Eğer bir şey yapmıyoruz o sözdizimi hatası yaratabileceği
Size biraz neden olur yolda bir sorun.
>> Ben Doug Lloyd değilim.
Bu CS50 olduğunu.