Home-theater-designers
HTML adalah bagian penting dari web seperti yang kita kenal. Dan sementara beberapa desainer web membuat halaman dengan mengetik HTML secara manual, masih berguna untuk mengetahui sedikit tentangnya.
Kita akan melihat beberapa dasar bahasa, termasuk apa sebenarnya HTML itu, beberapa konsep dasar, dan bagaimana ia berinteraksi dengan bahasa lain. Anggap ini sebagai kursus kilat 'HTML untuk boneka'.
Dasar-dasar HTML: Apa itu HTML?
HTML singkatan dari Hyper Text Markup Language . Dan meskipun terkadang disamakan dengan bahasa pemrograman, ini tidak akurat.
Sebagai bahasa markup , HTML hanya memungkinkan Anda membuat tata letak tampilan halaman. Benar bahasa pemrograman , seperti Java atau C++, berisi logika dan perintah yang dijalankan.
Meskipun sederhana, HTML adalah tulang punggung setiap halaman di web. Ini bertanggung jawab atas teks apa yang muncul sebagai huruf tebal, menambahkan gambar, dan menautkan ke halaman lain. Kami memiliki FAQ HTML yang menjelaskan lebih lanjut.
Anda dapat mengklik kanan pada sebagian besar halaman web di browser Anda dan memilih Lihat sumber halaman atau serupa untuk melihat HTML di belakangnya. Ini kemungkinan juga akan berisi banyak kode yang bukan HTML, tetapi Anda dapat menyaringnya.
Bahkan jika Anda tidak memiliki pengalaman dengan markup atau bahasa pemrograman, belajar sedikit tentang HTML akan membuat Anda menjadi pengguna web yang lebih terinformasi. Mari kita telusuri lima langkah dasar untuk membantu Anda memahami cara kerja HTML. Kami akan memberikan contoh di sepanjang jalan.
Langkah 1: Memahami Konsep Tag
HTML menggunakan sistem tag untuk mengkategorikan elemen yang berbeda dari dokumen.
Sebagian besar tag berpasangan untuk membungkus teks yang terpengaruh di dalamnya. Berikut adalah contoh sederhana (
tag membuat teks berani ; kita akan membahas ini lebih lanjut sebentar lagi.)
This is some bold text .Perhatikan bagaimana tag penutup dimulai dengan garis miring (/). Ini menandakan tag penutup, yang penting. Jika Anda tidak menutup tag, semuanya dari awal dan seterusnya akan memiliki atribut itu.
cara meningkatkan ke kodi 17 di firestick
Namun, tidak semua tag memiliki pasangan. Beberapa elemen HTML, disebut elemen kosong , tidak memiliki konten dan berdiri sendiri. Contohnya adalah
tag, yang merupakan jeda baris. Anda dapat 'menutup' tag tersebut dengan menambahkan garis miring (seperti
) tetapi itu tidak sepenuhnya diperlukan.
Langkah 2: Tata Letak HTML Kerangka
Dokumen HTML yang tepat harus memiliki tag tertentu yang ditentukan sehingga ditata dengan benar. Ini adalah bagian-bagian penting:
- Setiap dokumen HTML harus dimulai dengan |_+_| untuk menyatakan dirinya seperti itu. Jadi, tag penutupnya, |_+_| , adalah item terakhir dalam file HTML.
- Selanjutnya, |_+_| Bagian berisi informasi seperti judul halaman, berbagai skrip yang berjalan di halaman, dan sejenisnya. Seperti namanya, ini biasanya muncul tepat setelah awal |_+_| menandai. Pengguna akhir tidak melihat banyak konten dalam tag ini.
- Akhirnya, |_+_| tag memegang teks halaman yang dilihat pembaca (ditambah banyak lagi). Di sini Anda akan menemukan gambar, tautan, dan lainnya.
Sejak
bagian membuat sebagian besar dokumen HTML, sisa panduan kami melihat elemen yang berkaitan dengannya.
Langkah 3: Tag HTML Dasar untuk Pemformatan
Selanjutnya, mari kita lihat beberapa tag umum yang menyusun dokumen HTML. Tentu saja, tidak mungkin untuk mencakup setiap elemen, jadi kami akan meninjau beberapa yang paling penting. Kami telah membahas banyak lagi contoh HTML jika ini tidak memuaskan Anda.
Jika tag ini tampak cukup mendasar, ingatlah bahwa HTML dibuat sejak tahun 1993. Web sangat banyak berbasis teks saat itu pada tahap awal.
Pemformatan Teks Sederhana
HTML mendukung gaya teks dasar seperti yang Anda temukan di Microsoft Word:
- |_+_| tag membuat teks berani .
- |_+_| tag (yang merupakan singkatan dari 'emphasis') akan cetak miring teks.
HTML juga mendukung yang lebih tua
tag untuk huruf tebal dan
untuk huruf miring. Namun, lebih baik menggunakan yang di atas.
Pendeknya,
dan
menunjukkan bagaimana sesuatu harus dipahami, sedangkan tag yang terakhir hanya memberi tahu Anda bagaimana seharusnya terlihat. Tag sebelumnya ini lebih mudah diakses oleh pembaca layar yang digunakan oleh tunanetra.
Paragraf dan Bagian Lainnya
HTML
tag memungkinkan Anda menentukan bagian dari dokumen. Biasanya, ini dipasangkan dengan CSS (lihat di bawah) untuk memformat bagian dengan cara tertentu.
NS
tag memungkinkan Anda membagi teks menjadi paragraf. Peramban akan secara otomatis menempatkan beberapa ruang sebelum dan sesudah ini, memungkinkan Anda memecah teks secara alami.
Anda dapat menambahkan header ke dokumen Anda dan membuatnya lebih mudah untuk diikuti menggunakan
melalui
tag. H1 adalah header yang paling penting, sedangkan H6 adalah yang paling tidak penting. Hampir setiap artikel MakeUseOf menggunakan header H2 dan H3 untuk mengatur informasi.
Memukul Memasuki untuk menambahkan jeda baris dalam dokumen HTML Anda tidak akan benar-benar menampilkannya. Sebagai gantinya, Anda dapat menggunakan
untuk menambahkan jeda baris.
Berikut adalah contoh yang menggunakan semua ini:
Langkah 4: Memasukkan Gambar
Gambar adalah bagian penting dari sebagian besar halaman web. Anda dapat menambahkannya dengan mudah dengan HTML, dan bahkan mengatur properti yang berbeda untuknya.
Anda menyisipkan gambar menggunakan
menandai. Menggabungkan ini dengan
atribut memungkinkan Anda menentukan dari mana Anda ingin memuat gambar.
Atribut penting lainnya dari
cara mengatasi cd yang loncat
tag adalah
. Teks alternatif memungkinkan Anda mendeskripsikan gambar untuk pembaca layar atau jika gambar tidak dimuat dengan benar. Anda dapat mengarahkan mouse ke gambar untuk melihat teks alternatifnya.
Menggunakan
dan
elemen untuk menentukan jumlah piksel tempat gambar muncul.
Gabungkan semuanya, dan tag gambar terlihat seperti ini:
Example Heading
This is one paragraph.
This is a second
paragraph split between two lines.
Langkah 5: Menambahkan Tautan
World Wide Web tidak akan banyak menjadi web tanpa tautan ke halaman lain. Menggunakan
![]()
tag, Anda dapat menautkan ke halaman lain pada teks apa pun.
Di dalam
srctag, itu
![]()
atribut memberi tahu di mana Anda menautkan. Cukup menempelkan URL akan berfungsi dengan baik. Anda dapat menggunakan
altelemen untuk menambahkan sedikit teks yang muncul saat seseorang mengarahkan kursor ke tautan.
Tautan dasar terlihat seperti ini:
widthNS
heighttag memiliki banyak elemen lain yang mungkin, tetapi kami tidak akan membahasnya di sini.
Bagaimana HTML Terhubung Dengan CSS dan JavaScript
Kami telah melihat dasar-dasar HTML dan bagaimana hal itu membuat halaman web. Tetapi seperti yang dapat Anda bayangkan, HTML saja tidak cocok untuk web modern. Halaman web HTML sederhana sudah umum di masa 'Web 1.0', ketika sebagian besar situs web tidak lebih dari teks statis.
Tapi sekarang, kita punya lebih banyak. CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk menjelaskan tampilan teks yang Anda siapkan dalam HTML. Ingat itu
tag yang kita bahas? Di dalam ini (dan tag lainnya), Anda dapat menentukan
atribut. Kemudian, dalam dokumen CSS yang menyertai Anda, Anda dapat menulis instruksi bagaimana caranya
harus melihat.
Anda dapat mendefinisikan elemen gaya ini sebaris dalam kode HTML Anda, tetapi ini dianggap praktik yang buruk karena jauh lebih sulit untuk mempertahankannya. Pelajari lebih lanjut dengan contoh CSS sederhana ini . Lihat juga cara mengoptimalkan file CSS Anda .
JavaScript
Kita telah melihat bahwa HTML mendefinisikan konten dan CSS menentukan tampilan. JavaScript, anggota terakhir dari trio penting untuk web, memungkinkan halaman web untuk menanggapi tindakan orang tanpa memuat halaman baru setiap saat.
Misalnya, JavaScript memungkinkan situs web untuk memperingatkan Anda bahwa kata sandi yang Anda masukkan tidak memenuhi persyaratannya sebelum Anda mencoba mengirimkannya. Seorang desainer web mungkin menggunakan JavaScript untuk menelusuri gambar dalam tayangan slide atau meminta masukan dari pengguna.
Ini hanya beberapa contoh dasar. JavaScript adalah bahasa scripting yang mampu melakukan banyak hal, dan secara komparatif jauh lebih rumit daripada HTML dan CSS. Lihat gambaran umum kami tentang JavaScript untuk lebih banyak lagi.
Melihat cakupan lengkap desain web berada di luar cakupan artikel ini, tetapi cukup untuk mengatakan bahwa HTML berinteraksi dengan bahasa lain untuk membuat halaman web yang kita kenal sekarang.
Evolusi HTML
Penting untuk dicatat bahwa HTML tidak statis. HTML telah melalui beberapa revisi, yang terbaru adalah HTML 5. Khususnya, standar ini mendukung penyematan video asli alih-alih mengandalkan format berpemilik seperti Adobe Flash.
Iterasi baru HTML juga mendeklarasikan tag kuno tertentu sebagai usang dari waktu ke waktu. Ini termasuk tag yang mengerikan seperti
hrefdan
title(yang masing-masing menggulir dan mem-flash teks) biasanya terlihat pada desain situs web tahun 1990-an. Jadi perlu diingat bahwa standar berubah seiring waktu.
Sedikit Pengetahuan HTML Sangat Bermanfaat
Kami telah melakukan tur singkat tentang cara kerja dokumen HTML. Sekarang Anda tahu dasar-dasar bagaimana halaman web terstruktur. Bahkan jika Anda tidak terus membangun halaman web, Anda sedikit lebih sadar tentang web yang Anda gunakan setiap hari.
cara menyusun instagram secara kronologis
Untuk mempelajari lebih lanjut, tingkatkan keterampilan pengembangan web Anda dengan alat penting, lalu periksa panduan kami tentang cara mendesain situs web pertama Anda .
Kredit Gambar: Belyaevskiy/ foto deposit
Membagikan Membagikan Menciak Surel 5 Tips untuk Meningkatkan Mesin VirtualBox Linux AndaBosan dengan kinerja buruk yang ditawarkan oleh mesin virtual? Inilah yang harus Anda lakukan untuk meningkatkan kinerja VirtualBox Anda.
Baca Selanjutnya Topik-topik yang berkaitan- Pemrograman
- HTML
- Pengembangan web
- JavaScript
- Alat Webmaster
- Pemrograman
- HTML5
Ben adalah Wakil Editor dan Manajer Orientasi di MakeUseOf. Dia meninggalkan pekerjaan IT-nya untuk menulis penuh waktu pada tahun 2016 dan tidak pernah menoleh ke belakang. Dia telah meliput tutorial teknologi, rekomendasi video game, dan lebih banyak lagi sebagai penulis profesional selama lebih dari tujuh tahun.
More From Ben StegnerBerlangganan newsletter kami
Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
Klik di sini untuk berlangganan