Daven FARNHAM: Hari ini, aku akan berbicara sedikit tentang HTML, HyperText Markup Language. Anda melihat HTML di mana-mana hari ini. Bahkan, jika Anda menonton ini video dalam browser, Anda melihat HTML sekarang. HTML bukan merupakan bahasa pemrograman, bukan, itu adalah bahasa markup yang digunakan oleh web browser untuk membuat halaman di internet. 

Jadi, Anda mungkin bertanya, bagaimana sebenarnya menulis halaman web dalam HTML yang berbeda dari menulis sebuah program dalam pemrograman sebuah bahasa seperti C? Nah, C adalah bahasa dengan sangat ketat aturan sintaksis yang perlu dikompilasi sebelum bisa dijalankan. Jika Anda pernah lupa untuk menyertakan titik koma pada akhir pernyataan di kode C Anda, Anda tahu apa yang saya bicarakan tentang dalam hal sintaks yang ketat. 

Web browser meskipun, sedikit lebih memaafkan ketika datang ke HTML. Bahkan jika HTML Anda tidak sintaksis benar, halaman Anda mungkin masih ditampilkan oleh browser, tapi mungkin tidak terlihat seperti yang Anda inginkan. Jadi selalu yang terbaik untuk mengikuti aturan. Cara terbaik untuk mendapatkan intuisi tentang bagaimana hal-hal bekerja adalah untuk pergi melalui contoh. 

Jadi apa yang kita miliki di sini adalah dasar cetak biru untuk halaman web. Anda mungkin melihat banyak hal di antara tanda kurung siku. Nah, mereka hanya tag. Tags dasarnya menginformasikan web browser itu, hey, sesuatu yang datang dengan cara Anda. Ingat juga, setiap kali Anda membuka tag, Anda perlu untuk menutupnya setelah Anda selesai menggunakannya. 

Jadi misalnya, saya buka bagian sebuah kode dengan terbuka braket tubuh, braket dekat. Saya kemudian menambahkan beberapa teks, dalam hal ini, saya Halaman web pertama kemudian ketika saya pergi ke tutup bagian ini, saya menggunakan hampir satu tag identik kecuali kali ini dengan garis miring sebelum tubuh. Secara umum, ini adalah format Anda akan menggunakan setiap kali Anda membuka dan menutup tag. Bersama-sama, sebuah tag terbuka dan tag akhir menulis apa yang disebut elemen. 

Jika anda melihat baris pertama, Anda akan melihat tanda seru diikuti oleh DOCTYPE html. Ini benar-benar hanya memberitahu browser Anda bahwa file tersebut adalah halaman web ditulis dalam HTML. Tag HTML pada dasarnya mengatakan, di sini datang beberapa HTML. Kemudian kita memiliki tag head dengan tag judul di dalamnya. Tag kepala yang dapat Anda pikirkan sebagai terdiri dari kode HTML yang datang untuk sebagian besar halaman web Anda konten yang sebenarnya. 

Secara umum, Anda menempatkan judul Anda halaman web di sini, meskipun ada beberapa tag lain yang dapat muncul di sini juga. Selanjutnya muncul halaman web tubuh Anda, yang daging dan tulang yang sebenarnya dari situs Anda. Dalam contoh kita, kita hanya menempatkan sederhana kalimat, My Webpage Pertama, yang, jika kita menjalankan situs kami, akan terlihat sedikit sesuatu seperti ini. Halaman web kami tidak terlalu aneh, tapi jangan khawatir. Kami akan merapikan itu segera. 

Jadi HTML di atas, kami akan memberikan Anda yang sangat template dasar untuk halaman web, tidak ada yang mewah, hanya tulang-tulang. Tapi kalau aku membuat halaman web, bagaimana jika saya ingin menambahkan gambar, katakanlah, diriku sendiri? Yah, aku bisa melakukan itu. Ada beberapa cara untuk menambahkan gambar ke situs Anda. Jika gambar di folder yang sama dengan file HTML Anda, Anda dapat link ke gambar melalui jalan seperti ini. 

Anda membuka dengan tag gambar diikuti by di Alt atribut di sumber gambar. Nilai Alt atribut itu hanya beberapa teks alternatif dalam hal pengguna tidak bisa lihat gambar. Atau, Anda juga dapat membuat link ke gambar melalui URL lengkap, seperti ini. Sekarang, situs web yang tidak benar-benar ada, tetapi jika ada gambar saya di alamat itu, saya bisa menggunakan URL sumber untuk memasukkan citranya di website saya. Either way, Anda berakhir dengan banyak situs cantik, sesuatu seperti ini. 

Nah, itu cukup keren, tapi aku agak dari ingin beberapa teks di sini juga. Jadi mari kita menambahkan sesuatu super sederhana di atas gambar, seperti header. Semua yang telah saya lakukan sejauh ini adalah menggunakan header tag, H1, dan istirahat tag line, br. Header tag membuat font sedikit sedikit lebih besar dan lebih menonjol. Tag line istirahat, di sisi lain tangan, agak dingin. Tidak seperti kebanyakan tag lain, Anda tidak memiliki tag pembukaan dan penutupan istirahat, hanya salah satu yang ditunjukkan di atas. Hal ini karena istirahat tidak memiliki konten dan karena itu, elemen kosong. 

Elemen kosong seperti ini, Anda dapat membuka dan dekat secara bersamaan hanya dengan termasuk garis miring di akhir deklarasi awal. Jadi sekarang website saya terlihat sedikit sesuatu seperti ini. Lebih baik, tapi jenis rasanya seperti jalan buntu. Ada tempat lain untuk pergi ke samping dari halaman utama ini. Nah, mari kita memperbaikinya dengan termasuk link. 

Apa yang akan saya lakukan di sini adalah menggunakan atribut dinotasikan dengan A dan membuat image link ke, katakanlah, CS50 TV. Dengan cara itu, setiap kali ada yang mengklik pada saya, browser mereka akan diarahkan untuk lain, mungkin lebih berguna, halaman web. Aku sudah untuk meminimalkan ukuran teks sedikit karena halaman web kami adalah semakin maju. Tapi mudah-mudahan, itu masih jelas. Website saya tampak persis sama hanya sekarang, setiap kali saya klik pada gambar, browser saya akan membuka lain tab untuk halaman web CS50.tv. 

Terakhir, katakanlah aku akan gaya website ini kemudian menggunakan CSS. CSS adalah apa yang dikenal sebagai cascading style sheet. Dan pada dasarnya menyediakan efisien cara untuk mengedit dan gaya blok kode yang sama. Saya ingin memulai mengatur HTML saya membuatnya lebih mudah untuk gaya nanti. Di sini, saya mendirikan dua macam pengidentifikasi untuk membantu mengatur kode saya. Saya telah menggunakan ID atribut di dalam divisi, atau tag div, dan aku telah menggunakan Kelas atribut dalam tag div lain. 

ID dan Kelas atribut bekerja sama. Satu-satunya perbedaan adalah Anda hanya dapat memiliki satu elemen, ID tertentu, tetapi sejumlah elemen dapat berbagi kelas. Jadi misalnya, saya dapat menggunakan kelas gambar beberapa kali, tapi aku tidak bisa membuat divisi lain dengan ID bagian atas. Meskipun saya belum pergi ke CSS, bahasa lain yang umum digunakan bersama HTML, setelah saya mulai styling kode saya dengan CSS, saya dapat menggunakan ini atribut organisasi untuk pengaruh estetika halaman web saya. 

Semuanya dalam atas divisi akan memiliki stylings yang sama atau kelompok lain dari kelompok I HTML ke dalam image kelas akan berbagi tampilan yang mirip. Ini jauh lebih mudah daripada mencoba untuk mengedit dan gaya gambar atau blok teks secara individual. 

Jadi kami pergi atas dasar-dasar cara untuk membuat sebuah halaman web dengan HTML. HTML memiliki banyak fitur lain juga bahwa ketika dipasangkan dengan bahasa lain seperti CSS dan JavaScript, dapat benar-benar membuat halaman menonjol. Cara terbaik untuk membiasakan diri dengan HTML adalah hanya untuk main-main dengan hal itu, melihat apa yang berhasil, dan apa yang tidak. 

Nama saya Daven Farnham. Ini adalah CS50. 

Jadi misalnya, saya dapat menggunakan gambar kelas - Tidak, ada begitu banyak atribut. Nama saya Daven Farnham. Ini adalah CS 650. Saya ingin mengatakan CSS. Ini adalah CSS.