Belajar html untuk pemula Selamat datang! Anda Telah Menemukan Cara Termudah untuk Mempelajari HTML dan CSS. Apakah Anda seorang pemula, berharap untuk mempelajari dunia desain web atau webmaster berpengalaman yang ingin meningkatkan keterampilan Anda, kami memiliki tutorial online yang disesuaikan dengan kebutuhan desain web Anda.
Tutorial pemula mutlak kami akan mengubah Anda dari wannabe menjadi webmaster hanya dalam beberapa jam. Tidak seperti banyak tutorial HTML lainnya, ini adalah panduan langkah demi langkah (bukan referensi panjang lebar yang membosankan). Tutorial pemula mutlak kami akan mengubah Anda dari wannabe menjadi webmaster hanya dalam beberapa jam.
Panduan langkah demi langkah kami mengajarkan Anda dasar-dasar HTML dan cara membuat situs web pertama Anda. Itu berarti cara menata halaman HTML, cara menambahkan teks dan gambar, cara menambahkan judul dan pemformatan teks, dan cara menggunakan tabel. Selain itu, Anda juga bisa membaca posting kami sebelumnya tentang Pengenalan Dasar HTML dan Contohnya.
Kami akan membantu Anda membangun situs web baru dalam hitungan menit, bukan jam. Tapi itu semua tergantung pola pikir Anda untuk memahami teori dan praktek yang akan kami jelaskan di postingan kali ini. Untuk itu agar tidak ketinggalan ilmu yang bermanfaat ini, simak penjelasan postingan kali ini yang membahas tentang belajar html lengkap.
Belajar HTML Lengkap
Dalam posting ini kami akan menunjukkan beberapa contoh HTML dasar. Jangan khawatir jika kami menggunakan tag yang belum Anda pelajari. Karena semuanya bisa dipelajari dengan mudah disini tentang cara membuat html yang benar.
Pertama Anda tanpa menghabiskan seluruh tutorial yang terlalu berfokus pada teori dan sedikit latihan. Jika anda ingin mempelajari tentang html secara utuh, anda dapat mendownload file pdf yang telah kami kompilasi lengkap dengan contoh coding html website. Download file pdf belajar html lengkap untuk pemula melalui tombol download dibawah ini.
Belajar html lengkap untuk pemula pdf
Download Here
Dokumen HTML
Semua dokumen HTML harus dimulai dengan deklarasi tipe dokumen: <!DOCTYPE html>.
Dokumen HTML itu sendiri dimulai dengan <html> dan diakhiri dengan </html>.
Bagian yang terlihat dari dokumen HTML adalah antara <body> dan </body>.
Contoh Coding HTML
Deklarasi <!DOCTYPE>
Deklarasi <!DOCTYPE> mewakili tipe dokumen, dan membantu browser untuk menampilkan halaman web dengan benar.
Seharusnya hanya muncul sekali, di bagian atas halaman (sebelum tag HTML apa pun).
Deklarasi <!DOCTYPE> tidak peka huruf besar/kecil.
Deklarasi HTML5 <!DOCTYPE> adalah:
Judul HTML
Judul HTML didefinisikan dengan tag <h2> ke <h6>.
<h2> mendefinisikan heading yang paling penting. <h6> mendefinisikan heading yang paling tidak penting:
Contoh Coding HTML
<h2>This is heading 1</h2> <h2>This is heading 2</h2> <h3>This is heading 3</h3>
Paragraf HTML
Paragraf HTML didefinisikan dengan tag <p>:
Contoh Coding HTML
<p>This is a paragraph.</p> <p>This is another paragraph.</p>
Tautan HTML
Tautan HTML didefinisikan dengan tag <a>:
Contoh Coding HTML
<a href="//www.w3schools.com">This is a link</a>
Tujuan tautan ditentukan dalam href atribut.
Atribut digunakan untuk memberikan informasi tambahan tentang elemen HTML.
Anda akan belajar lebih banyak tentang atribut di bab selanjutnya.
Gambar HTML
Gambar HTML didefinisikan dengan tag <img>.
File sumber (src), teks alternatif (alt), width, dan height disediakan sebagai atribut:
Contoh Coding HTML
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Bagaimana Cara Melihat Sumber HTML?
Pernahkah Anda melihat halaman Web dan bertanya-tanya "Hei! Bagaimana mereka melakukannya?"
Lihat Kode Sumber HTML:
Klik kanan pada halaman HTML dan pilih "View Page Source" (di Chrome) atau "View Source" (di Edge), atau yang serupa di browser lain. Ini akan membuka jendela yang berisi kode sumber HTML halaman.
Periksa Elemen HTML:
Klik kanan pada elemen (atau area kosong), dan pilih "Periksa" atau "Periksa Elemen" untuk melihat elemen apa yang dibuat (Anda akan melihat HTML dan CSS). Anda juga dapat dengan cepat mengedit HTML atau CSS di panel Elemen atau Gaya yang terbuka.
Contoh Coding HTML Website
Pertama, Anda perlu membuka editor HTML Anda, di mana Anda akan menemukan halaman putih bersih untuk menulis kode Anda.
Dari sana Anda perlu menata halaman Anda dengan tag berikut.
Konstruksi Halaman HTML Dasar
Tag ini harus ditempatkan di bawah satu sama lain di bagian atas setiap halaman HTML yang Anda buat.
<!DOCTYPE html> — Tag ini menentukan bahasa yang akan digunakan untuk menulis halaman. Dalam hal ini, bahasanya adalah HTML 5.
<html> — Tag ini menunjukkan bahwa dari sini kita akan menulis dalam kode HTML.
<head> — Di sinilah semua metadata untuk halaman pergi — hal-hal yang sebagian besar dimaksudkan untuk mesin pencari dan program komputer lainnya.
<body> — Di sinilah konten halaman pergi.
Contoh template HTML pada gambar di atas menggambarkan bagaimana rata-rata halaman HTML Anda terstruktur secara visual.
Tag Lainnya
Di dalam tag <head>, ada satu tag yang selalu disertakan: <title>, tetapi ada tag lain yang tidak kalah pentingnya:
<Title>
Di sinilah kita memasukkan nama halaman karena akan muncul di bagian atas jendela atau tab browser.
<meta>
Di sinilah informasi tentang dokumen disimpan: pengkodean karakter, nama (konteks halaman), deskripsi.
Mari kita coba bagian <head> dasar:
Menambahkan Konten
Selanjutnya kita akan membuat tag <body>.
HTML <body> adalah tempat kami menambahkan konten yang dirancang untuk dilihat oleh mata manusia.
Ini termasuk teks, gambar, tabel, formulir, dan semua hal lain yang kita lihat di internet setiap hari.
Cara Menambahkan Teks Dalam HTML
Menambahkan teks ke halaman HTML kami sederhana menggunakan elemen yang dibuka dengan tag <p> yang membuat paragraf baru . Kami menempatkan semua teks biasa kami di dalam elemen <p>.
Saat kita menulis teks dalam HTML, kita juga memiliki sejumlah elemen lain yang dapat kita gunakan untuk mengontrol teks atau membuatnya muncul dengan cara tertentu .
Elemen Kunci Lainnya
Mereka adalah sebagai berikut:
| <b> | Bold | Menyorot informasi penting |
| <strong> | Strong | Sama halnya dengan huruf tebal, untuk menyorot teks utama |
| <i> | Italic | Untuk menunjukkan teks |
| <em> | Emphasised Text | Biasanya digunakan sebagai keterangan gambar |
| <mark> | Marked Text | Sorot latar belakang teks |
| <small> | Small Text | Untuk mengecilkan teks |
| <strike> | Striked Out Text | Untuk menempatkan garis horizontal melintasi teks |
| <u> | Underlined Text | Digunakan untuk tautan atau sorotan teks |
| <ins> | Inserted Text | Ditampilkan dengan garis bawah untuk menampilkan teks yang disisipkan |
| <sub> | Subscript Text | Pilihan gaya tipografi |
| <sup> | Superscript Text | Gaya presentasi tipografi lainnya |
Tag ini harus dibuka dan ditutup di sekitar teks yang dimaksud.
Mari kita coba. Pada baris baru di editor HTML, ketik kode HTML berikut:
<p>Welcome to <em>my</em> brand new website. This site will be my <strong>new<strong> home on the web.</p>
Jangan lupa untuk menekan simpan lalu segarkan halaman di browser Anda untuk melihat hasilnya.
Kesimpulan
Sekarang Anda telah memulai HTML, Anda dapat meningkatkan keterampilan Anda. Sangat menyenangkan melihat semua yang dapat Anda lakukan dengan halaman web. Lihat lebih banyak tutorial kami dan mulailah belajar sekarang! Dengan mempelajari dasa-dasar HTML dapat dengan mudah membantu Anda untuk menguasai bahasa pemrograman seperti CSS, JavaScript, XML, dll.
Kuncinya agar tidak membingungkan ketika Anda belajar pengkodean adalah tidak perlu menjadi ahli untuk menyelesaikan masalah besar. Hal yang paling penting adalah komitmen dan fokus dengan kode-kode yang saling berfungsi satu sama lain.
Oke, sekian postingan tentang Belajar HTML Lengkap untuk Pemula. Semoga artikel ini bermanfaat dan dapat membantu Anda. Mari bagikan artikel ini untuk membantu teman-teman yang lain. Jangan lupa untuk follow blog ini dengan mengirimkan email Anda pada kolom NEWSLETTER agar Anda mendapatkan informasi terbaru dari apa yang kami posting di blog sederhana ini. Terima kasih!
Samuel Pasaribu
Samuel Pasaribu working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.