Tutorial HTML : Dasar Dasar HTML

HTML merupakan singkatan dari HyperText Markup Language. HTML adalah blok bangunan dasar dari World Wide Web.

Hypertext adalah teks yang ditampilkan pada komputer atau perangkat elektronik lainnya dengan referensi ke teks lain bahwa pengguna dapat langsung mengakses, biasanya dengan satu klik mouse atau tekan tombol.

Selain teks, hypertext mungkin berisi tabel, daftar, bentuk, gambar, dan lainnya elemen presentasi. Ini adalah mudah-ke-menggunakan dan format yang fleksibel untuk berbagi informasi melalui Internet.

Bahasa Markup menggunakan set markup tag untuk menandai elemen-elemen teks dalam dokumen, yang memberikan instruksi kepada web browser pada bagaimana dokumen akan muncul.

HTML pada awalnya dikembangkan oleh Tim Berners-Lee pada tahun 1990. Ia juga dikenal sebagai ayah dari web. Pada tahun 1996, World Wide Web Consortium (W3C) menjadi wewenang untuk mempertahankan spesifikasi HTML. HTML juga menjadi standar internasional (ISO) pada tahun 2000. HTML5 adalah versi terbaru dari HTML. HTML5 menyediakan lebih cepat dan lebih kuat pendekatan untuk pengembangan web.

Tip : Kita HTML tutorial akan membantu anda untuk belajar dasar-dasar HTML5 terbaru bahasa, dari dasar hingga lanjutan topik langkah-demi-langkah. Jika anda seorang pemula, mulailah dengan bagian dasar dan secara bertahap bergerak maju dengan belajar sedikit setiap hari.

Apa yang Dapat Anda Lakukan dengan HTML

Ada banyak hal yang dapat anda lakukan dengan HTML.

Anda dapat mempublikasikan dokumen secara online dengan teks, gambar, daftar, tabel, dll.

Anda dapat mengakses sumber daya web seperti gambar, video atau dokumen HTML melalui hyperlink.

Anda dapat membuat bentuk untuk mengumpulkan input pengguna seperti nama, alamat e-mail, komentar, dll.

Anda dapat menyertakan gambar, video, klip suara, film flash, aplikasi, dan lain dokumen HTML secara langsung di dalam sebuah dokumen HTML.

Anda dapat membuat versi offline dari website anda yang bekerja tanpa internet.

Anda dapat menyimpan data di browser web pengguna dan akses di kemudian hari.

Anda dapat menemukan lokasi saat ini dari situs web pengunjung.

Daftar ini tidak berakhir di sini, ada banyak hal-hal menarik lainnya yang dapat anda lakukan dengan HTML. Anda akan belajar tentang semua dari mereka secara rinci dalam bab-bab mendatang.

Catatan : HTML seperti yang telah dijelaskan sebelumnya adalah sebuah bahasa markup bukan bahasa pemrograman, seperti Java, Ruby, PHP, dll. Anda membutuhkan sebuah web browser untuk melihat halaman HTML. Web browser tidak menampilkan tag HTML, tetapi menggunakan tag untuk menafsirkan isi dari halaman web.

Apa Tutorial Ini Meliputi

Ini HTML tutorial seri mencakup semua dasar-dasar HTML, termasuk ide mengenai elemen dan atribut, cara memformat teks menggunakan tag HTML, metode menambahkan informasi style untuk dokumen, teknik memasukkan gambar dan tabel, proses membuat daftar dan bentuk serta metode lain termasuk dokumen HTML dalam dokumen saat ini, dan sebagainya.

Setelah anda akrab dengan dasar-dasar, anda akan pindah ke tingkat berikutnya yang menjelaskan konsep doctype, metode untuk menciptakan halaman web layout, pentingnya menambahkan informasi meta ke halaman-halaman situs, cara menambahkan script, teknik menampilkan karakter khusus, anatomi URL, dan banyak lagi.

Akhirnya, anda akan mempelajari beberapa fitur canggih yang diperkenalkan pada HTML5 seperti jenis masukan baru, gambar grafis pada halaman web, termasuk audio dan video dalam dokumen, menyimpan data pada client-side menggunakan penyimpanan web, caching file, melakukan pekerjaan latar belakang dengan web pekerja, serta mendapatkan pengguna koordinat geografis, menciptakan drag dan drop aplikasi, dan sebagainya.

Tip : Setiap bab dalam tutorial ini berisi banyak contoh-contoh nyata yang dapat anda coba dan tes menggunakan editor online. Contoh-contoh ini akan membantu anda untuk lebih memahami konsep atau topik. Hal ini juga berisi pintar cara serta tips yang berguna dan catatan penting.

Dalam tutorial ini anda akan belajar bagaimana mudahnya untuk membuat dokumen HTML atau halaman web. Untuk memulai coding HTML, anda hanya perlu dua hal: yang sederhana-text editor dan web browser.

Nah, mari kita mulai dengan membuat anda pertama halaman HTML.

Mulailah dengan membuat Dokumen HTML

Mari kita berjalan melalui langkah-langkah berikut. Pada akhir tutorial ini, anda akan membuat sebuah file HTML yang menampilkan "Hello world" pesan di browser web anda.

Langkah 1: Membuat file HTML

Membuka komputer anda editor teks biasa dan membuat file baru.

Langkah 2: Ketik beberapa HTML

Mulai dengan jendela kosong dan ketik kode berikut:

<!DOCTYPE html>

<html lang="en">

<head>

    <title>A simple HTML document</title>

</head>

<body>

    <p>Hello World!<p>

</body>

</html>

Langkah 3: Menyimpan file

Sekarang simpan file di desktop anda seperti "myfirstpage.html ".

Catatan : adalah penting bahwa ekstensi .html ditentukan — beberapa teks editor, seperti Notepad, akan secara otomatis menyimpannya sebagai .txt sebaliknya.

Untuk membuka file tersebut di browser. Arahkan ke file anda, kemudian double klik di atasnya. Ini akan terbuka di Web browser default anda. Jika tidak, buka browser anda dan tarik file ke dalamnya.

Penjelasan dari kode

Anda mungkin berpikir apa kode itu adalah semua tentang. Nah, mari kita cari tahu.

Baris pertama <!DOCTYPE html> adalah jenis dokumen deklarasi. Itu memerintahkan web browser bahwa dokumen ini adalah dokumen HTML5. Ini adalah case-sensitive.

Satu <head> elemen adalah wadah untuk tag yang memberikan informasi tentang dokumen tersebut, misalnya, <title> tag mendefinisikan judul dari dokumen.

Satu <body> elemen yang berisi dokumen asli konten (paragraf, link, gambar, tabel, dan sebagainya) yang diberikan dalam web browser dan ditampilkan kepada pengguna.

Anda akan belajar tentang berbagai elemen HTML secara rinci dalam bab-bab mendatang. Untuk saat ini, hanya fokus pada struktur dasar dari dokumen HTML.

Catatan : SEBUAH deklarasi DOCTYPE muncul di bagian atas halaman web sebelum semua unsur-unsur lain; namun deklarasi doctype itu sendiri bukan merupakan tag HTML. Setiap dokumen HTML membutuhkan sebuah dokumen deklarasi tipe untuk memastikan bahwa anda halaman ditampilkan dengan benar.

Dengan <html>, <head>, dan <body> kategori make up kerangka dasar dari setiap halaman web. Konten di dalam <head> dan </head> tidak terlihat oleh pengguna dengan satu pengecualian: antara teks <title> dan </title> kategori yang muncul sebagai judul pada tab browser.

Tag HTML dan Elemen

HTML ditulis dalam bentuk elemen HTML terdiri dari markup tag. Ini markup kategori ini adalah karakteristik dasar dari HTML. Setiap markup tag terdiri dari satu kata kunci, dikelilingi oleh kurung sudut seperti <html>, <head>, <body>, <title>, <p>, dan seterusnya.

Tag HTML secara normal selalu berpasangan seperti <html> dan </html>. Tag pertama dalam pasangan ini sering disebut tag pembuka (atau tag awal), dan tag kedua adalah yang disebut tag penutup (atau tag akhir).

Tag pembuka dan tag penutup adalah identik, kecuali slash (/) setelah pembukaan angle bracket tag penutup, untuk memberitahu browser bahwa perintah telah selesai.

Di antara awal dan tag akhir, anda dapat menempatkan sesuai isi. Misalnya, sebuah paragraf, yang diwakili oleh p elemen, akan ditulis sebagai:

<p>This is a paragraph.</p>

<!-- Paragraph with nested element -->

<p>

    This is <b>another</b> paragraph.

</p>

Elemen HTML Sintaks

Sebuah elemen HTML adalah sebuah komponen individu dari sebuah dokumen HTML. Ini merupakan semantik, atau makna. Misalnya, title elemen merupakan judul dari dokumen.

Sebagian besar elemen HTML yang ditulis dengan tag awal (atau tag pembuka) dan tag akhir (atau tag penutup), dengan konten di antara. Elemen juga dapat berisi atribut yang mendefinisikan sifat tambahan. Misalnya, sebuah paragraf, yang diwakili oleh p elemen, akan ditulis sebagai:

Tag HTML Elemen Vs

Secara teknis, sebuah elemen HTML adalah koleksi dari start tag, atribut, tag akhir dan segala sesuatu di antara. Di sisi lain HTML tag (baik terbuka atau tertutup) digunakan untuk menandai awal atau akhir dari sebuah elemen, seperti yang dapat anda lihat dalam ilustrasi di atas.

Namun, dalam penggunaan umum persyaratan elemen HTML dan tag HTML yang dipertukarkan yaitu sebuah tag adalah elemen tag. Untuk mudahnya situs ini, istilah "tag" dan "elemen" yang digunakan untuk maksud yang sama, karena akan menentukan sesuatu pada halaman web anda.

Kasus Ketidakpekaan di Tag dan Atribut HTML

Dalam HTML, tag dan atribut nama-nama yang tidak case-sensitif (namun sebagian besar nilai-nilai atribut adalah case-sensitive). Itu berarti tag <P>, dan tag yang <p> mendefinisikan hal yang sama dalam HTML yang merupakan paragraf.

Namun dalam XHTML mereka adalah case-sensitive dan tag <P> berbeda dari tag <p>.

Contoh :

<p>This is a paragraph.</p>

<P>This is also a valid paragraph.</P>

Saya menyarankan untuk menggunakan huruf kecil untuk tag dan menghubungkan nama-nama dalam HTML, karena dengan melakukan hal ini anda dapat membuat dokumen anda lebih sesuai untuk upgrade di masa mendatang.

Elemen HTML Kosong

Unsur-unsur yang kosong (disebut juga menutup diri atau membatalkan elemen) yang tidak kontainer kategori — yang berarti, anda tidak dapat menulis <hr>some content</hr> atau <br>some content</br>.

Sebuah contoh khas dari elemen kosong, adalah <br> elemen, yang merupakan garis istirahat. Beberapa umum lainnya kosong unsur-unsur <img>, <input>, <link>, <meta>, <hr>, dll.

<p>This paragraph contains <br> a line break.</p>

<img src="images/sky.jpg" alt="Cloudy Sky">

<input type="text" name="username">

Catatan: Dalam HTML, self-closing elemen ini ditulis hanya sebagai <br>. Dalam XHTML, self-closing elemen membutuhkan ruang dan trailing slash, seperti <br />.

Bersarang Elemen HTML

Sebagian besar elemen HTML yang dapat berisi sejumlah elemen lebih lanjut (kecuali unsur-unsur yang kosong), yang, pada gilirannya, terdiri dari tag, atribut, dan konten atau unsur-unsur lain.

Contoh berikut menunjukkan beberapa elemen yang bersarang di dalam <p> elemen.

<p>Here is some <b>bold</b> text.</p>

<p>Here is some <em>emphasized</em> text.</p>

<p>Here is some <mark>highlighted</mark> text.</p>

Menempatkan elemen yang satu di dalam yang lain disebut bersarang. Bersarang elemen, yang disebut juga sebagai elemen anak, bisa menjadi elemen induk juga jika unsur-unsur lain yang bersarang di dalamnya.

Tag HTML harus diulang dalam urutan yang benar. Mereka harus ditutup dalam urutan terbalik dari cara mereka didefinisikan, yang berarti tag terakhir dibuka harus ditutup terlebih dahulu.

<p><strong>These tags are nested properly.</strong></p>

<p><strong>These tags are not nested properly.</p></strong>

Penulisan Komentar dalam HTML

Komentar yang biasanya ditambahkan dengan tujuan membuat source code lebih mudah untuk memahami. Hal ini dapat membantu pengembang lain (atau anda di masa depan ketika anda mengedit kode sumber) untuk memahami apa yang anda coba lakukan dengan HTML. Komentar tidak akan ditampilkan di browser.

Sebuah komentar HTML dimulai dengan <!--, berakhir dengan -->, seperti yang ditunjukkan pada contoh di bawah ini:

<!-- This is an HTML comment -->

<!-- This is a multi-line HTML comment 

     that spans across more than one line -->

<p>This is a normal piece of text.</p>

Anda juga dapat komentar bagian dari kode HTML anda untuk tujuan debugging, seperti yang ditunjukkan di sini:

<!-- Hiding this image for testing

<img src="images/smiley.png" alt="Smiley">

→

Jenis Elemen HTML

Elemen-elemen yang dapat ditempatkan dalam dua kelompok yang berbeda: tingkat blok dan inline level element. Bekas make up dokumen struktur, sedangkan yang kedua berdandan isi dari blok.

Juga, elemen blok menempati 100% dari lebar yang tersedia dan diberikan dengan satu baris sebelum dan setelah. Padahal, inline elemen akan mengambil hanya ruang sebanyak yang dibutuhkan.

Yang paling umum digunakan blok-tingkat unsur-unsur <div>, <p>, <h1> melalui <h6>, <form>, <ol>, <ul>, <li>, dan seterusnya. Padahal, umumnya digunakan inline-level elemen <img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input>, <button>, dll.

Anda akan belajar tentang elemen-elemen ini secara rinci dalam bab-bab mendatang.

Catatan: blok-tingkat unsur-unsur tidak harus ditempatkan dalam inline-level elemen. Misalnya, <p> elemen tidak harus ditempatkan di dalam <b> elemen.