Scribd Logo
Unggah

Selamat datang di Scribd!

  • Selamat Datang Di HTML

    Diunggah oleh

    fiqri bae
    13 tayangan28 halaman

    Judul Asli

    Selamat datang di HTML

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    13 tayangan28 halaman

    Selamat Datang Di HTML

    Diunggah oleh

    fiqri bae

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 28

    Selamat datang di dunia kode!

    Tahun lalu, jutaan pelajar dari komunitas


    kami mulai dengan HTML. Mengapa? HTML adalah kerangka semua
    halaman web. Ini sering merupakan bahasa pertama yang dipelajari
    oleh pemasar dan desainer dan merupakan inti dari pekerjaan
    pengembangan front-end. Jika ini adalah kode sentuh pertama kali
    Anda, kami senang dengan apa yang akan Anda buat.

    Jadi apa sebenarnya HTML itu? HTML menyediakan struktur untuk


    konten yang muncul di situs web, seperti gambar, teks, atau video. Klik
    kanan pada halaman mana saja di internet, pilih "Inspect," dan Anda
    akan melihat HTML di panel layar Anda.

    HTML adalah singkatan dari HyperText Markup Language:

    Bahasa markup adalah bahasa komputer yang mendefinisikan


    struktur dan penyajian teks mentah.

    Dalam HTML, komputer dapat menafsirkan teks mentah yang


    dibungkus dengan elemen HTML.

    HyperText adalah teks yang ditampilkan di komputer atau perangkat


    yang menyediakan akses ke teks lain melalui tautan, juga dikenal
    sebagai hyperlink. Anda mungkin mengklik beberapa hyperlink dalam
    perjalanan ke kursus Codecademy ini.
    Mempelajari HTML adalah langkah pertama dalam membuat situs web,
    tetapi bahkan sedikit pengetahuan dapat membantu Anda
    menyuntikkan cuplikan kode ke buletin, blog, atau templat situs web.
    Ketika Anda terus belajar, Anda dapat melapisi HTML dengan CSS dan
    JavaScript untuk membuat situs web yang menarik secara visual dan
    dinamis. Tetapi untuk saat ini, kami akan fokus pada bagaimana
    menambah dan memodifikasi konten dasar pada halaman, seperti teks,
    gambar, dan video. Jangan khawatir jika situs web terlihat jelek - kami
    baru memulai.

    HTML terdiri dari elemen. Elemen-elemen ini menyusun halaman web


    dan menentukan kontennya. Mari kita lihat bagaimana mereka ditulis.

    Diagram di sebelah kanan menampilkan elemen paragraf HTML. Seperti


    yang bisa kita lihat, elemen paragraf terdiri dari satu tag pembuka
    (<p>), konten (teks "Hello World!"), Dan tag penutup (</p>). Tag dan
    konten di antaranya disebut elemen HTML. Ada banyak tag yang dapat
    kita gunakan untuk mengatur dan menampilkan teks dan jenis konten
    lainnya, seperti gambar.

    Mari kita cepat meninjau setiap bagian elemen yang digambarkan:

        Elemen HTML (atau elemen,) - unit konten dalam dokumen HTML


    yang dibentuk oleh tag HTML dan teks atau media yang dikandungnya.

        Tag HTML - nama elemen, dikelilingi oleh braket sudut pembuka (<)
    dan penutup (>).

        Membuka Tag - tag HTML pertama yang digunakan untuk memulai


    elemen HTML. Jenis tag dikelilingi oleh kurung sudut buka dan tutup.
        Konten - Informasi (teks atau elemen lain) yang ada di antara tag
    pembuka dan penutup elemen HTML.

        Tag penutup - tag HTML kedua yang digunakan untuk mengakhiri


    elemen HTML. Tag penutup memiliki garis miring (/) di dalamnya,
    langsung setelah braket sudut kiri.

    Tubuh

    Salah satu elemen HTML utama yang kami gunakan untuk membangun
    halaman web adalah elemen tubuh. Hanya konten di dalam tag tubuh
    yang dibuka dan ditutup yang dapat ditampilkan ke layar. Seperti apa
    bentuk tag pembuka dan penutup:

    <body>

    </body>

    Setelah file memiliki tubuh, berbagai jenis konten - termasuk teks,


    gambar, dan tombol - dapat ditambahkan ke tubuh.

    <body>
      <p> Ada apa, doc? </p>
    </body>

    Tambahkan tubuh ke halaman web Anda menggunakan elemen


    <body>.
    <p> "Hidup ini sangat singkat dan apa yang harus kita lakukan harus
    dilakukan sekarang." - Audre Lorde </p>
    Struktur HTML

    HTML diatur sebagai kumpulan hubungan silsilah keluarga. Seperti yang


    Anda lihat pada latihan terakhir, kami menempatkan tag <p> di dalam
    tag <body>. Ketika suatu elemen terkandung di dalam elemen lain, itu
    dianggap sebagai anak dari elemen itu. Elemen anak dikatakan
    bersarang di dalam elemen induk.

    <body>
      <p> Paragraf ini adalah anak dari tubuh </p>
    </body>

    Pada contoh di atas, elemen <p> bersarang di dalam elemen <body>.


    Elemen <p> dianggap sebagai anak dari elemen <body>, dan elemen
    <body> dianggap sebagai induk. Anda juga dapat melihat bahwa kami
    telah menambahkan dua spasi indentasi (menggunakan bilah spasi)
    untuk keterbacaan yang lebih baik.

    Karena bisa ada beberapa tingkat bersarang, analogi ini dapat diperluas
    ke cucu, cicit, dan seterusnya. Hubungan antara unsur-unsur dan
    leluhurnya dan unsur turunannya dikenal sebagai hierarki.

    Mari kita pertimbangkan contoh yang lebih rumit yang menggunakan


    beberapa tag baru:

    <body>
      <div>
        <h1> Sibling to p, tetapi juga cucu tubuh </h1>
        <p> Sibling ke h1, tetapi juga cucu tubuh </p>
      </div>
    </body>
    Dalam contoh ini, elemen <body> adalah induk dari elemen <div>. Baik
    elemen <h1> dan <p> adalah anak-anak dari elemen <div>. Karena
    elemen <h1> dan <p> berada pada level yang sama, mereka dianggap
    saudara kandung dan keduanya cucu dari elemen <body>.

    Memahami hierarki HTML adalah penting karena elemen anak dapat


    mewarisi perilaku dan gaya dari elemen induknya. Anda akan belajar
    lebih banyak tentang hierarki halaman web ketika Anda mulai menggali
    ke dalam CSS.

    Pos

    Judul di HTML mirip dengan judul di jenis media lainnya. Misalnya, di


    surat kabar, pos besar biasanya digunakan untuk menarik perhatian
    pembaca. Lain kali, pos digunakan untuk menggambarkan konten,
    seperti judul film atau artikel pendidikan.

    HTML mengikuti pola yang sama. Dalam HTML, ada enam pos berbeda,
    atau elemen tajuk. Judul dapat digunakan untuk berbagai tujuan,
    seperti judul bagian, artikel, atau bentuk konten lainnya.

    Berikut ini adalah daftar elemen tajuk yang tersedia dalam HTML.
    Mereka dipesan dari yang terbesar hingga yang terkecil.

        <h1> - digunakan untuk judul utama. Semua pos kecil lainnya


    digunakan untuk subpos.
        <h2>
        <h3>
        <h4>
        <h5>
        <h6>
    Contoh kode berikut menggunakan judul yang dimaksudkan untuk
    menarik perhatian pembaca. Menggunakan heading terbesar yang
    tersedia, elemen heading utama:

    Atribut

    Jika kami ingin memperluas tag elemen, kami dapat melakukannya


    menggunakan atribut. Atribut adalah konten yang ditambahkan ke tag
    pembuka elemen dan dapat digunakan dalam beberapa cara berbeda,
    mulai dari memberikan informasi hingga mengubah gaya. Atribut terdiri
    dari dua bagian berikut:

        Nama atribut
        Nilai atribut

    Salah satu atribut yang biasa digunakan adalah id. Kita dapat
    menggunakan atribut id untuk menentukan konten yang berbeda
    (seperti <div>) dan sangat membantu ketika Anda menggunakan
    elemen lebih dari sekali. id memiliki beberapa tujuan berbeda dalam
    HTML, tetapi untuk sekarang, kami akan fokus pada bagaimana mereka
    dapat membantu kami mengidentifikasi konten di halaman kami.

    Saat kami menambahkan id ke <div>, kami menempatkannya di tag


    pembuka:

    <div id = "intro">
      <h1> Pendahuluan </h1>
    </div>
    Menampilkan Teks

    Jika Anda ingin menampilkan teks dalam HTML, Anda dapat


    menggunakan paragraf atau rentang:

        Paragraf (<p>) berisi blok teks biasa.


        <span> berisi potongan teks pendek atau HTML lainnya. Mereka
    digunakan untuk memisahkan potongan-potongan kecil konten yang
    berada di baris yang sama dengan konten lainnya.

    Lihatlah setiap elemen ini di bawah ini:

    <div>
      <h1> Teknologi </h1>
    </div>
    <div>
      <p> <span> Mobil self-driving </span> diperkirakan akan
    menggantikan hingga 2 juta pekerjaan selama dua dekade berikutnya.
    </p>
    </div>

    Pada contoh di atas, ada dua yang berbeda <div>. <div> kedua berisi
    <p> dengan <span> Mobil self-driving </span>. Elemen <span> ini
    memisahkan "Mobil yang bisa menyetir sendiri" dari sisa teks dalam
    paragraf.

    Yang terbaik adalah menggunakan elemen <span> ketika Anda ingin


    menargetkan bagian tertentu dari konten yang sebaris, atau pada baris
    yang sama dengan teks lainnya. Jika Anda ingin membagi konten Anda
    menjadi blok, lebih baik menggunakan <div>.
    Teks Styling

    Anda juga bisa mendesain teks menggunakan tag HTML. Tag <em>
    menekankan teks, sedangkan tag <strong> menyoroti teks penting.

    Kemudian, ketika Anda mulai mendesain situs web, Anda akan


    memutuskan bagaimana Anda ingin browser menampilkan konten di
    dalam tag <em> dan <strong>. Namun, peramban memiliki lembar gaya
    bawaan yang umumnya akan menata tag ini dengan cara berikut:

        Tag <em> umumnya akan ditampilkan sebagai penekanan miring.


        <strong> Umumnya akan ditampilkan sebagai penekanan berani.

    Lihatlah setiap gaya yang sedang beraksi:

    <p> <strong> Sungai Nil </strong> adalah sungai <em> terpanjang


    </em> di dunia, berukuran lebih dari 6.850 kilometer (sekitar 4.260
    mil). </p>

    Dalam contoh ini, tag <strong> dan <em> digunakan untuk


    menekankan teks untuk menghasilkan yang berikut:

    Sungai Nil adalah sungai terpanjang di dunia, berukuran lebih dari 6.850
    kilometer (sekitar 4.260 mil).

    Seperti yang bisa kita lihat, "Sungai Nil" tebal dan "terpanjang" dicetak
    miring.
    Line Breaks

    Jarak antar kode dalam file HTML tidak memengaruhi posisi elemen di
    browser. Jika Anda tertarik untuk memodifikasi spasi di browser, Anda
    dapat menggunakan elemen pemisah baris HTML: <br>.

    Elemen pemisah baris unik karena hanya terdiri dari tag awal. Anda
    dapat menggunakannya di mana saja dalam kode HTML Anda dan satu
    baris akan ditampilkan di browser.

    <p> Sungai Nil adalah Situs sungai terpanjang di dunia, berukuran lebih
    dari 6.850 Situs kilometer panjangnya (sekitar 4.260 Situs mil). </p>

    Kode dalam contoh di atas akan menghasilkan output yang terlihat


    seperti berikut:

    Sungai Nil adalah sungai terpanjang


    di dunia, berukuran lebih dari 6.850
    kilometer panjangnya (sekitar 4.260)
    mil).
    Daftar Tidak Berurutan

    Selain mengatur teks dalam bentuk paragraf, Anda juga dapat


    menampilkan konten dalam daftar yang mudah dibaca.

    Dalam HTML, Anda dapat menggunakan tag daftar tidak berurutan


    (<ul>) untuk membuat daftar item tanpa urutan tertentu. Daftar tidak
    berurutan menguraikan item daftar individual dengan poin.

    Elemen <ul> tidak boleh menyimpan teks mentah dan tidak akan secara
    otomatis memformat teks mentah ke dalam daftar item yang tidak
    diurutkan. Setiap item daftar harus ditambahkan ke daftar yang tidak
    diurut menggunakan tag <li>. Tag <li> atau daftar item digunakan untuk
    menjelaskan item dalam daftar.

    <ul>
      <li> Limes </li>
      <li> Tortillas </li>
      <li> Ayam </li>
    </ul>

    Pada contoh di atas, daftar dibuat menggunakan tag <ul> dan semua
    item daftar individual ditambahkan menggunakan tag <li>.

    Outputnya akan terlihat seperti ini:


    Jeruk nipis
    Tortilla
    Ayam
    Daftar yang dipesan

    Daftar yang dipesan (<ol>) seperti daftar yang tidak berurutan, kecuali
    bahwa setiap item daftar diberi nomor. Mereka berguna ketika Anda
    perlu mendaftar langkah-langkah yang berbeda dalam suatu proses
    atau memberi peringkat item untuk pertama hingga terakhir.

    Anda dapat membuat daftar berurutan dengan tag <ol> dan kemudian
    menambahkan masing-masing item daftar ke daftar menggunakan tag
    <li>.

    <ol>
      <li> Memanaskan lebih dulu oven ke 350 derajat. </li>
      <li> Campur tepung terigu utuh, soda kue, dan garam. </li>
      <li> Krim mentega, gula dalam mangkuk terpisah. </li>
      <li> Tambahkan telur dan ekstrak vanila ke mangkuk. </li>
    </ol>

    Outputnya akan terlihat seperti ini:

        Memanaskan lebih dulu oven ke 350 derajat.


        Campur tepung terigu utuh, baking soda, dan garam.
        Krim mentega, gula dalam mangkuk terpisah.
        Tambahkan telur dan ekstrak vanila ke mangkuk.
    Gambar

    Semua elemen yang telah Anda pelajari sejauh ini (pos, paragraf, daftar,
    dan rentang) berbagi satu kesamaan: semuanya seluruhnya terdiri dari
    teks! Bagaimana jika Anda ingin menambahkan konten ke halaman web
    Anda yang tidak terdiri dari teks, seperti gambar?

    Tag <img> memungkinkan Anda untuk menambahkan gambar ke


    halaman web. Sebagian besar elemen membutuhkan tag pembuka dan
    penutup, tetapi tag <img> adalah tag penutup sendiri. Perhatikan
    bahwa akhir tag <img> memiliki garis miring /. Tag yang menutup
    sendiri dapat menyertakan atau menghilangkan garis miring akhir -
    keduanya akan ditampilkan dengan benar.

    <img src = "image-location.jpg" />

    Tag <img> memiliki atribut yang diperlukan yang disebut src. Atribut src
    harus disetel ke sumber gambar, atau lokasi gambar. Dalam hal ini, nilai
    src harus menjadi pencari sumber daya yang seragam (URL) dari
    gambar. URL adalah alamat web atau alamat lokal tempat file disimpan.
    Alts Gambar

    Bagian dari menjadi pengembang web yang luar biasa adalah membuat
    situs Anda dapat diakses oleh pengguna dari semua latar belakang.
    Untuk membuat Web lebih inklusif, kita perlu mempertimbangkan apa
    yang terjadi ketika teknologi bantuan seperti pembaca layar
    menemukan tag gambar.

    Atribut alt, yang berarti teks alternatif, membawa makna pada gambar
    di situs kami. Atribut alt dapat ditambahkan ke tag gambar seperti
    atribut src. Nilai alt harus merupakan deskripsi gambar.

    <img src = "#" alt = "Bidang bunga matahari kuning" />

    Atribut alt juga melayani tujuan berikut:

        Jika gambar gagal dimuat pada halaman web, pengguna dapat


    mengarahkan mouse ke area yang awalnya dimaksudkan untuk gambar
    dan membaca deskripsi singkat gambar. Ini dimungkinkan oleh
    deskripsi yang Anda berikan di atribut alt.
        Pengguna tunanetra sering menelusuri web dengan bantuan
    perangkat lunak membaca layar. Saat Anda menyertakan atribut alt,
    perangkat lunak pembacaan layar dapat membaca deskripsi gambar
    dengan keras kepada pengguna yang memiliki gangguan penglihatan.
        Atribut alt juga berperan dalam Optimasi Mesin Pencari (SEO), karena
    mesin pencari tidak dapat "melihat" gambar di situs web saat merayapi
    internet. Memiliki atribut alt deskriptif dapat meningkatkan peringkat
    situs Anda.

    Jika gambar pada halaman web bukan salah satu yang menyampaikan
    informasi yang berarti kepada pengguna (tunanetra atau sebaliknya),
    atribut alt harus dibiarkan kosong.
    Video

    Selain gambar, HTML juga mendukung menampilkan video. Seperti tag


    <img>, tag <video> membutuhkan atribut src dengan tautan ke sumber
    video. Berbeda dengan tag <img>, elemen <video> membutuhkan tag
    pembuka dan penutup.

    <video src = "myVideo.mp4" width = "320" height = "240" mengontrol>


      Video tidak didukung
    </video>

    Dalam contoh ini, sumber video (src) adalah myVideo.mp4 Sumbernya


    dapat berupa file video yang di-host di samping halaman web Anda,
    atau URL yang menunjuk ke file video yang di-host di halaman web lain.

    Setelah atribut src, atribut lebar dan tinggi digunakan untuk mengatur
    ukuran video yang ditampilkan di browser. Atribut kontrol
    memerintahkan browser untuk memasukkan kontrol video dasar: jeda,
    putar dan lewati.

    Teks, "Video tidak didukung", antara tag video pembukaan dan


    penutup hanya akan ditampilkan jika browser tidak dapat memuat
    video.
    Mempersiapkan HTML

    Sekarang Anda telah belajar tentang beberapa elemen HTML yang paling umum,
    sekarang saatnya untuk belajar cara mengatur file HTML.

    File HTML memerlukan elemen tertentu untuk mengatur dokumen dengan benar. Anda
    dapat memberi tahu browser web bahwa Anda menggunakan HTML dengan memulai
    dokumen Anda dengan deklarasi tipe dokumen.

    Deklarasi terlihat seperti ini:

    <! DOCTYPE html>

    Deklarasi ini adalah instruksi, dan itu harus menjadi baris kode pertama dalam
    dokumen HTML Anda. Ini memberitahu browser apa jenis dokumen yang diharapkan,
    bersama dengan versi HTML apa yang digunakan dalam dokumen. Untuk saat ini,
    browser akan menganggap dengan benar bahwa html di <! DOCTYPE html> merujuk ke
    HTML5, karena ini adalah standar saat ini.

    Namun, di masa depan, standar baru akan menggantikan HTML5. Untuk memastikan
    dokumen Anda ditafsirkan selamanya dengan benar, selalu sertakan <! DOCTYPE
    html> di bagian paling awal dokumen HTML Anda.

    Terakhir, kode HTML selalu disimpan dalam file dengan ekstensi .html.
    Tag <html>

    Deklarasi <! DOCTYPE html> memberi browser dua informasi (tipe dokumen dan
    versi HTML yang diharapkan), tetapi sebenarnya tidak menambahkan struktur atau
    konten HTML apa pun.

    Untuk membuat struktur dan konten HTML, kita harus menambahkan membuka dan
    menutup tag <html> setelah mendeklarasikan <! DOCTYPE html>:

    <! DOCTYPE html>


    <html>

    </html>

    Apa pun di antara tag pembuka <html> dan penutup </html> akan ditafsirkan
    sebagai kode HTML. Tanpa tag ini, ada kemungkinan browser salah mengartikan
    kode HTML Anda.
    Kepala

    Sejauh ini Anda telah melakukan dua hal untuk menyiapkan file dengan benar:

        Dinyatakan di browser bahwa kode Anda adalah HTML dengan <! DOCTYPE html>
        Menambahkan elemen HTML (<html>) yang akan berisi sisa kode Anda.

    Kami telah menambahkan elemen-elemen ini ke halaman Brown Bears yang Anda buat
    sebelumnya. Sekarang, mari kita juga memberi browser informasi tentang halaman
    itu sendiri. Kita bisa melakukan ini dengan menambahkan elemen <head>.

    Ingat tag <body>? Elemen <head> adalah bagian dari metafora HTML ini. Itu
    melampaui elemen <body> kami.

    Elemen <head> berisi metadata untuk halaman web. Metadata adalah informasi
    tentang halaman yang tidak ditampilkan langsung di halaman web. Berbeda dengan
    informasi di dalam tag <body>, metadata di kepala adalah informasi tentang
    halaman itu sendiri. Anda akan melihat contohnya di latihan selanjutnya.

    Tag kepala pembuka dan penutup biasanya muncul sebagai item pertama setelah
    tag HTML pertama Anda:

    <head>
    </head>
    Judul Halaman

    Metadata macam apa tentang halaman web yang bisa mengandung elemen <head>?

    Jika Anda menavigasi ke katalog Codecademy dan melihat di bagian atas browser
    Anda, Anda akan melihat kata-kata Catalog | Codecademy, yang merupakan judul
    halaman web.

    Tab browser menampilkan judul yang ditentukan dalam tag <title>. Tag <title>
    selalu di dalam <head>.

    <! DOCTYPE html>


    <html>
      <head>
        <title> Jurnal Pengodean Saya </title>
      </head>
    </html>

    Jika kami membuka file yang berisi kode HTML dalam contoh di atas, browser
    akan menampilkan kata-kata Jurnal Pengodean Saya di bilah judul (atau dalam
    judul tab).
    Di mana Judul Muncul?

    Kerja bagus! Sayangnya, panel browser yang digunakan oleh lingkungan


    Codecademy tidak memiliki bilah judul, sehingga judul "Beruang Coklat" yang
    Anda tulis dalam latihan sebelumnya tidak akan ditampilkan. Namun, di luar
    lingkungan Codecademy, judul Anda akan muncul seperti yang digambarkan dalam
    diagram di sebelah kanan.

    Sejauh ini, kami telah belajar tentang:

        <! DOCTYPE html>, deklarasi yang menentukan versi HTML untuk browser
        Tag <html> yang melampirkan semua kode HTML Anda
        Tag <head> yang berisi metadata dari halaman web, seperti <title> nya

    Selanjutnya, Anda akan belajar tentang jenis elemen baru yang masuk ke dalam
    tubuh.
    Menautkan ke Halaman Web Lain

    Salah satu aspek kuat HTML (dan Internet), adalah kemampuan untuk menautkan ke
    halaman web lain.

    Anda dapat menambahkan tautan ke halaman web dengan menambahkan elemen jangkar
    <a> dan menyertakan teks tautan di antara tag pembuka dan penutup.

    <a> Ini Adalah Tautan ke Wikipedia </a>

    Tunggu sebentar! Secara teknis, tautan dalam contoh di atas tidak lengkap.
    Bagaimana tepatnya tautan di atas berfungsi jika tidak ada URL yang akan
    mengarahkan pengguna ke halaman Wikipedia yang sebenarnya?

    Elemen anchor pada contoh di atas tidak lengkap tanpa atribut href. Atribut
    ini adalah singkatan dari referensi hyperlink dan digunakan untuk menautkan ke
    jalur, atau alamat ke mana file itu berada (apakah itu di komputer Anda atau
    lokasi lain). Jalur yang disediakan untuk atribut href sering berupa URL.

    <a href="https://www.wikipedia.org/"> Ini Adalah Tautan ke Wikipedia </a>

    Pada contoh di atas, atribut href telah disetel ke nilai URL


    https://www.wikipedia.org/. Contoh sekarang menunjukkan penggunaan elemen
    anchor yang benar.

    Saat membaca dokumentasi teknis, Anda mungkin menjumpai istilah hyperlink.


    Jangan khawatir, ini hanyalah istilah teknis untuk tautan. Istilah-istilah ini
    sering digunakan secara bergantian.
    Membuka Tautan di Jendela Baru

    Pernahkah Anda mengklik tautan dan mengamati halaman web yang dihasilkan
    terbuka di jendela browser baru? Jika demikian, Anda dapat berterima kasih
    pada atribut target <a> elemen.

    Atribut target menentukan cara membuka tautan.

    Mungkin saja satu atau lebih tautan di halaman web Anda terhubung ke situs web
    yang sama sekali berbeda. Dalam hal ini, Anda mungkin ingin pengguna membaca
    situs web yang tertaut, tetapi berharap mereka kembali ke halaman web Anda.
    Inilah tepatnya ketika atribut target berguna!

    Agar tautan terbuka di jendela baru, atribut target memerlukan nilai _blank.
    Atribut target dapat ditambahkan langsung ke tag pembuka elemen anchor,
    seperti atribut href.

    <a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank"> The Brown


    Bear </a>

    Pada contoh di atas, mengatur atribut target ke "_blank" memerintahkan browser


    untuk membuka halaman Wikipedia yang relevan di jendela baru.

    Dalam latihan ini, kami telah menggunakan terminologi "buka di jendela baru."
    Kemungkinan Anda menggunakan peramban modern yang membuka situs web di tab
    baru, bukan jendela baru. Sebelum munculnya browser dengan tab, jendela
    browser tambahan harus dibuka untuk melihat lebih banyak situs web. Atribut
    target = "_ blank", ketika digunakan di browser modern, akan membuka situs web
    baru di tab baru.
    Menautkan ke Halaman Relatif

    Sejauh ini Anda telah belajar cara menautkan ke halaman web eksternal. Banyak
    situs yang juga menautkan ke halaman web internal seperti Beranda, Tentang,
    dan Kontak.

    Sebelum kita mempelajari cara menautkan antara halaman internal, mari kita
    tentukan di mana file kita disimpan. Saat membuat situs web statis multi-
    halaman, pengembang web sering menyimpan file HTML di direktori root, atau
    folder utama tempat semua file untuk proyek disimpan. Ketika ukuran proyek
    yang Anda buat bertambah, Anda dapat menggunakan folder tambahan di dalam
    folder proyek utama untuk mengatur kode Anda.

    folder proyek/
    | ——Tentang.html
    | —— contact.html
    | —— index.html

    Contoh di atas menunjukkan tiga file berbeda - about.html, contact.html, dan


    index.html dalam satu folder.

    File HTML sering disimpan dalam folder yang sama, seperti yang ditunjukkan
    pada contoh di atas. Jika browser saat ini menampilkan index.html, ia juga
    tahu bahwa about.html dan contact.html berada di folder yang sama. Karena file
    disimpan dalam folder yang sama, kita dapat menautkan halaman web bersama-sama
    menggunakan jalur relatif.

    <a href="./contact.html"> Kontak </a>

    Dalam contoh ini, tag <a> digunakan dengan jalur relatif untuk menautkan dari
    file HTML saat ini ke file contact.html di folder yang sama. Di halaman web,
    Kontak akan muncul sebagai tautan.

    Jalur relatif adalah nama file yang menunjukkan jalur ke file lokal (file di
    situs web yang sama, seperti ./index.html) versus jalur absolut (URL lengkap,
    seperti https://www.codecademy.com/ pelajari / pelajari-html yang disimpan di
    folder lain). ./ dalam ./index.html memberitahu browser untuk mencari file di
    folder saat ini.
    Menghubungkan Saat Akan

    Anda mungkin mengunjungi situs web tempat tidak semua tautan terdiri dari
    teks. Mungkin tautan yang Anda klik adalah gambar atau bentuk konten lainnya.

    Sejauh ini, kami telah menambahkan tautan yang hanya terdiri dari teks,
    seperti yang berikut:

    <a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"> Pir Berduri


    </a>

    Namun, tautan hanya teks akan secara signifikan mengurangi fleksibilitas Anda
    sebagai pengembang web!

    Untungnya, HTML memungkinkan Anda untuk mengubah hampir semua elemen menjadi
    tautan dengan membungkus elemen tersebut dengan elemen anchor. Dengan teknik
    ini, dimungkinkan untuk mengubah gambar menjadi tautan dengan hanya membungkus
    elemen <img> dengan elemen <a>.

    <a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"> <img src =


    "#" alt = "Buah pir berduri merah" /> </a>

    Pada contoh di atas, gambar pir berduri telah diubah menjadi tautan dengan
    membungkus bagian luar elemen <img> dengan elemen <a>.
    Menautkan ke Halaman yang Sama

    Pada titik ini, kami memiliki semua konten yang kami inginkan di halaman kami.
    Karena kami memiliki begitu banyak konten, itu tidak semua cocok di layar.
    Bagaimana kita membuatnya lebih mudah bagi pengguna untuk melompat ke bagian
    halaman yang berbeda?

    Ketika pengguna mengunjungi situs kami, kami ingin mereka dapat mengklik
    tautan dan meminta halaman tersebut secara otomatis menggulir ke bagian
    tertentu.

    Untuk menautkan ke target di halaman yang sama, kami harus memberikan target
    id, seperti ini:

    <p id = "top"> Ini adalah bagian atas halaman! </p>


    <h1 id = "bawah"> Ini adalah bagian bawah! </h1>

    Dalam contoh ini, elemen <p> diberi id "atas" dan elemen <h1> ditugaskan
    "bawah." Sebuah id dapat ditambahkan ke sebagian besar elemen di laman web.

    Id harus deskriptif untuk memudahkan mengingat tujuan tautan. Tautan target


    adalah string yang berisi karakter # dan id elemen target.

    <ol>
      <li> <a href="#top"> Top </a> </li>
      <li> <a href="#bottom"> Bawah </a> </li>
    </ol>

    Pada contoh di atas, tautan ke <p id = "atas"> dan <h1 id = "bawah">


    disematkan dalam daftar yang diurutkan. Tautan ini muncul di browser sebagai
    daftar tautan bernomor. Id sangat membantu untuk mengatur konten milik div!
    Ruang putih

    Sisa pelajaran ini akan fokus pada beberapa alat yang digunakan pengembang
    untuk membuat kode lebih mudah diinterpretasikan.

    Seiring bertambahnya kode dalam file HTML, semakin sulit untuk melacak
    bagaimana elemen terkait. Pemrogram menggunakan dua alat untuk
    memvisualisasikan hubungan antara elemen: spasi putih dan lekukan.

    Kedua alat memanfaatkan fakta bahwa posisi elemen dalam browser tidak
    tergantung pada jumlah spasi putih atau lekukan dalam file index.html.

    Misalnya, jika Anda ingin menambah ruang antara dua paragraf di halaman web
    Anda, Anda tidak akan dapat mencapai ini dengan menambahkan ruang antara
    elemen paragraf dalam file index.html. Browser mengabaikan spasi dalam file
    HTML saat merender halaman web, sehingga dapat digunakan sebagai alat untuk
    membuat kode lebih mudah dibaca dan diikuti.

    Apa yang membuat contoh di bawah ini sulit dibaca?

    <body> <p> Paragraf 1 </p> <p> Paragraf 2 </p> </body>

    Anda harus membaca seluruh baris untuk mengetahui elemen apa yang ada.
    Bandingkan contoh di atas dengan ini:

    <body>
        <p> Paragraf 1 </p>
        <p> Paragraf 2 </p>
    </body>

    Contoh ini lebih mudah dibaca, karena setiap elemen berada pada barisnya
    masing-masing. Sementara contoh pertama mengharuskan Anda membaca seluruh
    baris kode untuk mengidentifikasi elemen, contoh ini membuatnya mudah untuk
    mengidentifikasi tag tubuh dan dua paragraf.

    Browser merender kedua contoh dengan cara yang sama:

    Paragraf 1
    Paragraf 2

    Dalam latihan selanjutnya Anda akan belajar cara menggunakan lekukan untuk
    membantu memvisualisasikan elemen bersarang.
    Lekukan

    Alat kedua yang digunakan pengembang web untuk membuat struktur kode lebih
    mudah dibaca adalah lekukan. Spasi dimasukkan menggunakan spasi dan bilah tab
    pada keyboard Anda.

    Konsorsium World Wide Web, atau W3C, bertanggung jawab untuk menjaga standar
    gaya HTML. Pada saat penulisan, W3C merekomendasikan 2 spasi indentasi saat
    menulis kode HTML. Meskipun kode Anda akan bekerja tanpa dua spasi, standar
    ini diikuti oleh sebagian besar pengembang web profesional. Lekukan digunakan
    untuk dengan mudah memvisualisasikan elemen mana yang bersarang di dalam
    elemen lain.

    <body>
      <p> Paragraf 1 </p>
      <div>
        <p> Paragraf 2 </p>
      </div>
    </body>

    Pada contoh di atas, Paragraph 1 dan tag <div> bersarang di dalam tag <body>,
    jadi mereka diberi indentasi dua spasi. Elemen Paragraph 2 bersarang di dalam
    tag <div>, sehingga diberi indentasi dua spasi tambahan.
    Komentar

    File HTML juga memungkinkan Anda untuk menambahkan komentar ke kode Anda.

    Komentar dimulai dengan <! - dan diakhiri dengan ->. Semua karakter di
    antaranya akan diabaikan oleh browser Anda.

    <! - Ini adalah komentar yang tidak akan ditampilkan oleh browser. ->

    Menyertakan komentar dalam kode Anda sangat membantu karena berbagai alasan:

        Mereka membantu Anda (dan orang lain) memahami kode Anda jika Anda
    memutuskan untuk kembali dan memeriksanya di kemudian hari.
        Mereka memungkinkan Anda untuk bereksperimen dengan kode baru, tanpa harus
    menghapus kode lama.

    <! - Bagian Film Favorit ->


    <p> Berikut ini adalah daftar film favorit saya: </p>

    Dalam contoh ini, komentar digunakan untuk menyatakan bahwa teks berikut
    membentuk bagian tertentu dari halaman.

    <! - <p> Kode Tes </p> ->

    Dalam contoh di atas, elemen HTML yang valid (elemen paragraf) telah
    "dikomentari." Praktek ini berguna ketika ada kode yang ingin Anda coba, atau
    kembalikan, di masa mendatang.
    Tag HTML

    Anda sekarang tahu semua elemen dasar dan pengaturan yang Anda butuhkan untuk
    menyusun halaman HTML dan menambahkan berbagai jenis konten. Dengan bantuan
    CSS, Anda akan segera membuat situs web yang indah!

    Sementara beberapa tag memiliki tujuan yang sangat spesifik, seperti tag
    gambar dan video, sebagian besar tag digunakan untuk menggambarkan konten yang
    mengelilinginya, yang membantu kami memodifikasi dan menata konten kami nanti.
    Tampaknya ada jumlah tag yang tak terbatas untuk digunakan (lebih banyak dari
    yang kami ajarkan). Mengetahui kapan harus menggunakan masing-masing
    didasarkan pada bagaimana Anda ingin menggambarkan konten HTML Anda. Tag
    deskriptif dan dipilih dengan baik adalah salah satu kunci untuk pengembangan
    web berkualitas tinggi. Daftar lengkap tag HTML yang tersedia dapat ditemukan
    di dokumentasi Mozilla.

    Mari tinjau apa yang telah Anda pelajari dari pelajaran ini:

        Deklarasi <! DOCTYPE html> harus selalu menjadi baris kode pertama dalam
    file HTML Anda. Ini memungkinkan browser mengetahui versi HTML apa yang
    diharapkan.
        Elemen <html> akan berisi semua kode HTML Anda.
        Informasi tentang halaman web, seperti judul, milik dalam <head> halaman.
        Anda dapat menambahkan judul ke halaman web Anda dengan menggunakan elemen
    <title>, di dalam kepala.
        Judul halaman web muncul di tab browser.
        Tag jangkar (<a>) digunakan untuk menautkan ke halaman internal, halaman
    eksternal atau konten pada halaman yang sama.
        Anda dapat membuat bagian pada halaman web dan melompatinya menggunakan
    tag <a> dan menambahkan id ke elemen yang ingin Anda lompati.
        Ruang kosong di antara elemen HTML membantu membuat kode lebih mudah
    dibaca tanpa mengubah bagaimana elemen muncul di browser.
        Lekukan juga membantu membuat kode lebih mudah dibaca. Itu membuat
    hubungan orangtua-anak terlihat.
        Komentar ditulis dalam HTML menggunakan sintaks berikut: <! - komentar ->.

    Luangkan waktu untuk mengedit ruang kerja yang Anda buat dan amati bagaimana
    itu berubah!

    Anda mungkin juga menyukai