Daven Farnham: Hari ini, saya akan bercakap sedikit tentang HTML, Hiperteks Markup Language. Anda lihat di mana-mana HTML hari ini. Malah, jika anda menonton ini video dalam pelayar, anda melihat HTML sekarang. HTML bukanlah bahasa pengaturcaraan, sebaliknya, ia adalah bahasa markup yang digunakan oleh pelayar web untuk memaparkan halaman di internet. 

Jadi, anda mungkin bertanya, bagaimana sebenarnya menulis laman web dalam HTML yang berbeza dari menulis program dalam pengaturcaraan bahasa seperti C? Nah, C adalah bahasa dengan sangat ketat petua sintaksis yang perlu disusun sebelum ia boleh berjalan. Jika anda pernah lupa untuk memasukkan koma bertitik pada akhir suatu pernyataan kod C anda, anda tahu apa yang saya bercakap kira-kira dalam hal sintaks yang ketat. 

Pelayar web walaupun, adalah sedikit lebih Pengampun ketika datang ke HTML. Walaupun HTML anda tidak sintaksis betul, halaman anda mungkin masih dipaparkan oleh pelayar, tetapi ia mungkin tidak kelihatan seperti yang anda bertujuan. Jadi ia sentiasa terbaik untuk mengikut peraturan. Cara terbaik untuk mendapatkan gerak hati tentang bagaimana perkara kerja adalah untuk melalui contoh. 

Jadi apa yang kita ada di sini adalah asas pelan tindakan untuk laman web. Anda mungkin perasan banyak perkara di antara kurungan bersudut. Nah, itu cuma tag. Tags pada dasarnya memberitahu pelayar web itu, hey, sesuatu akan datang cara anda. Ingat walaupun, apabila anda membuka tag, anda perlu menutup sekali anda dilakukan menggunakannya. 

Sebagai contoh, saya membuka bahagian kod dengan terbuka badan pendakap, pendakap rapat. Saya kemudian menambah beberapa teks, dalam kes ini, saya Laman web pertama maka apabila saya pergi ke tutup bahagian, saya menggunakan hampir tag sama kecuali kali ini dengan ke hadapan slash sebelum badan. Secara umum, ini adalah format yang anda akan menggunakan setiap kali anda membuka dan menutup tag. Bersama-sama, tag terbuka dan tag penutup mengarang apa yang dipanggil unsur. 

Jika anda melihat baris pertama, anda akan melihat tanda seru diikuti oleh DOCTYPE html. Ini adalah benar-benar hanya memberitahu pelayar anda bahawa fail adalah laman web ditulis dalam HTML. Tag HTML dasarnya berkata, di sini datang beberapa HTML. Maka kita mempunyai tag kepala dengan tag tajuk di dalamnya. Tag kepala anda boleh fikirkan sebagai yang terdiri daripada kod HTML yang datang untuk isi kandungan laman web anda kandungan sebenar. 

Secara umum, anda meletakkan tajuk anda Laman web di sini, walaupun terdapat beberapa tag lain yang boleh muncul di sini juga. Seterusnya datang tubuh laman web anda, yang daging dan tulang sebenar laman web anda. Dalam contoh kita, kita baru sahaja meletakkan mudah ayat, Webpage Pertamaku, yang, jika kita menjalankan laman web kami, akan kelihatan sesuatu yang kecil seperti ini. Laman web kami tidak terlalu aneh, tetapi jangan bimbang. Kami akan merapikan ia tidak lama lagi. 

Jadi HTML di atas, kami akan memberikan yang sangat template asas untuk laman web, apa-apa mewah, hanya tulang yang terdedah. Tetapi jika saya membuat laman web, bagaimana jika saya ingin menambah gambar, katakan, diri saya sendiri? Well, saya boleh melakukannya. Terdapat beberapa cara untuk menambah imej ke laman web anda. Jika imej berada dalam folder yang sama dengan fail HTML anda, anda boleh membuat pautan kepada imej melalui jalan seperti ini. 

Anda membuka dengan tag imej diikuti oleh dalam atribut Alt dalam sumber imej. Nilai atribut Alt adalah hanya beberapa teks alternatif dalam kes pengguna tidak boleh melihat imej. Sebagai alternatif, anda juga boleh mengandungi pautan ke imej melalui URL penuh, seperti ini. Kini, laman web yang tidak benar-benar wujud, tetapi jika terdapat gambar saya di alamat itu, saya boleh menggunakan URL sumber untuk memasukkan imej di laman web saya. Sama ada cara, anda berakhir dengan yang lebih laman web lebih cantik, sesuatu seperti ini. 

Baik, itu agak sejuk, tetapi saya jenis daripada mahu beberapa teks di sini juga. Jadi mari kita hanya menambah sesuatu super mudah di atas yang imej, seperti pengepala. Semua yang saya lakukan setakat ini adalah menggunakan pengepala tag, H1, dan satu baris tag, br. Tag header membuat fon sedikit sedikit lebih besar dan lebih menonjol. Perpecahan slogan, di pihak yang lain tangan, adalah jenis sejuk. Tidak seperti kebanyakan tag lain, anda tidak perlu pembukaan dan penutup rehat tag, hanya yang ditunjukkan di atas. Ini kerana rehat tiada kandungan dan oleh itu, satu elemen kosong. 

Elemen kosong seperti ini, anda boleh membuka dan berhampiran pada masa yang sama hanya dengan termasuk tanda palang ke hadapan di akhir pengisytiharan awal. Jadi sekarang laman web saya kelihatan sedikit sesuatu seperti ini. Lebih baik, tetapi ia jenis merasakan seperti buntu. Tiada tempat lain untuk pergi mengetepikan kepada page utama. Nah, mari kita menetapkan bahawa dengan termasuk pautan. 

Apa yang saya akan lakukan ialah menggunakan menyifatkan ditandakan oleh A dan membuat imej pautan untuk, katakan, CS50 TV. Dengan cara itu, setiap kali sesiapa klik pada saya, pelayar mereka akan diarahkan ke satu lagi, mungkin lebih berguna, laman web. Saya terpaksa mengurangkan saiz teks sedikit kerana laman web kami adalah semakin maju. Tetapi mudah-mudahan, ia masih jelas. Laman web saya kelihatan betul-betul sama hanya kini, setiap kali saya klik pada gambar, pelayar saya akan membuka satu lagi tekan untuk laman web CS50.tv. 

Akhir sekali, katakan saya akan gaya laman web ini kemudian menggunakan CSS. CSS adalah apa yang dikenali sebagai lembaran gaya melata. Dan pada dasarnya menyediakan yang cekap cara untuk mengedit dan gaya blok yang sama kod. Saya ingin memulakan menganjurkan HTML saya untuk membuat lebih mudah untuk gaya nanti. Di sini, saya telah menubuhkan dua jenis pengenalan untuk membantu menganjurkan kod saya. Saya telah menggunakan atribut ID di dalam bahagian, atau tag div, dan saya telah menggunakan Kelas atribut di dalam satu lagi tag div. 

ID dan Kelas sifat-sifat bekerja juga. Satu-satunya perbezaan adalah anda hanya boleh mempunyai satu elemen, ID tertentu, tetapi apa-apa bilangan elemen boleh berkongsi kelas. Sebagai contoh, saya boleh menggunakan kelas imej beberapa kali, tetapi saya tidak boleh mewujudkan bahagian lain dengan bahagian atas ID. Walaupun saya tidak pergi ke dalam CSS, satu lagi bahasa yang lazim digunakan bersama HTML, sekali saya mulakan penggayaan kod saya dengan CSS, saya boleh menggunakan sifat-sifat organisasi untuk pengaruh estetika laman web saya. 

Semua dalam golongan bahagian ini akan mempunyai stylings sama atau mana-mana kumpulan lain HTML saya kumpulan ke dalam imej kelas akan berkongsi pandangan yang sama. Ini adalah lebih mudah daripada cuba untuk mengedit dan imej gaya atau blok teks secara individu. 

Jadi kami pergi ke asas-asas bagaimana untuk membuat laman web dengan HTML. HTML mempunyai sekumpulan ciri-ciri lain juga bahawa apabila dipasangkan dengan bahasa-bahasa lain seperti CSS dan JavaScript, boleh benar-benar membuat laman menonjol. Cara terbaik untuk mendapatkan selesa dengan HTML hanya untuk keadaan huru-hara di sekitar dengan itu, melihat apa kerja-kerja, dan apa yang tidak. 

Nama saya Daven Farnham. Ini adalah CS50. 

Sebagai contoh, saya boleh menggunakan imej kelas - Tidak, terdapat banyak sifat-sifat. Nama saya Daven Farnham. Ini adalah CS 650. Saya mahu mengatakan CSS. Ini adalah CSS.