>> 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.