Home / Uncategories / Tutorial HTML dan HTML5 Terbaik

Tutorial HTML dan HTML5 Terbaik

Tutorial HTML dan HTML5 Terbaik



HyperText Markup Language (HTML) adalah bahasa markup yang digunakan untuk membuat dokumen online dan merupakan dasar dari sebagian besar situs web saat ini.

Bahasa markup seperti HTML memungkinkan kami
  • buat tautan ke dokumen lain,
  • struktur konten dalam dokumen kami, dan
  • anggap konteks dan makna isi dokumen kami.
Dokumen HTML memiliki dua aspek. Ini berisi informasi terstruktur (Markup), dan tautan teks (HyperText) ke dokumen lain. Kami menyusun halaman kami menggunakan elemen HTML . Mereka adalah konstruksi dari bahasa yang menyediakan struktur dan makna dalam dokumen kami untuk browser dan tautan elemen ke dokumen lain di internet.
Internet pada awalnya dibuat untuk menyimpan dan menyajikan dokumen statis (tidak berubah). Aspek-aspek HTML yang dibahas di atas terlihat sempurna dalam dokumen-dokumen ini yang tidak memiliki semua desain dan gaya. Mereka menyajikan informasi terstruktur yang berisi tautan ke dokumen lain.
HTML5 adalah versi terbaru, atau spesifikasi, dari HTML. World Wide Web Consortium (W3C) adalah organisasi yang bertanggung jawab untuk mengembangkan standar untuk World Wide Web, termasuk yang untuk HTML. Ketika halaman web dan aplikasi web tumbuh lebih kompleks, W3C memperbarui standar HTML.

HTML5 memperkenalkan sejumlah elemen semantik. Meskipun kami membahas bagaimana HTML membantu memberikan makna pada dokumen kami, tidak sampai unsur - unsur semantik HTML5 direalisasikan potensinya.

Contoh sederhana Dokumen HTML

 <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
! DOCTYPE html: Menentukan dokumen ini sebagai HTML5
html: Elemen root dari halaman HTML
head: Elemen ini berisi informasi meta tentang dokumen
title: Elemen menentukan judul untuk dokumen
tubuh: Elemen ini berisi konten halaman yang terlihat
h1: Elemen mendefinisikan heading besar
p: Elemen mendefinisikan paragraf

Tutorial untuk memulai dengan HTML dan HTML5

Tempat terbaik untuk mulai belajar HTML adalah dengan tutorial intro untuk HTML 2-jam freeCodeCamp.
Kemudian, jika Anda merasa lebih suka berpetualang, kami memiliki seluruh kursus 12 jam yang mencakup HTML, HTML5, dan CSS secara detail .
Struktur Halaman
Untuk membuat halaman Anda dalam HTML , Anda perlu tahu cara menyusun halaman dalam HTML . Pada dasarnya, penataan halaman mengikuti urutan di bawah ini:
 <!DOCTYPE html> <html> <head> <title>Title of the Page</title> </head> <body> <!-- Content --> </body> </html>
1 - Pernyataan <!DOCTYPE html> harus selalu menjadi yang pertama muncul di halaman HTML dan memberi tahu browser versi bahasa apa yang sedang digunakan. Dalam hal ini, kami bekerja dengan HTML5 .
2 - Tag <html> dan </html> memberi tahu browser web tempat kode HTML dimulai dan berakhir.
3 - Tag <head> dan </head> berisi informasi tentang situs web, misalnya: gaya, tag meta, skrip, dll ...
4 - Tag <title> dan </title> memberi tahu browser apa judul halaman itu. Judul dapat dilihat dengan mengidentifikasi tab di browser internet Anda. Teks yang didefinisikan di antara tag-tag ini juga merupakan teks yang digunakan sebagai judul oleh mesin pencari ketika mereka menampilkan halaman dalam hasil pencarian.
5 - Antara <body> dan </ body> konten halaman ditempatkan, yang merupakan apa yang ditampilkan di browser.

Perubahan dalam HTML5

Pengenalan tag semantik

Alih-alih menggunakan <div> untuk setiap wadah lain, ada beberapa tag semantik (tag ini membantu pembaca layar yang digunakan oleh tunanetra) seperti <header> <footer> . Jadi disarankan untuk menggunakan tag ini alih-alih <div> generik.

Elemen HTML

Elemen adalah blok bangunan HTML yang menggambarkan struktur dan konten halaman web. Mereka adalah "Markup" bagian dari HyperText Markup Language (HTML).
Sintaks HTML menggunakan kurung sudut ("<" dan ">") untuk menyimpan nama elemen HTML. Elemen biasanya memiliki tag pembuka dan tag penutup, dan memberikan informasi tentang konten yang dikandungnya. Perbedaan antara keduanya adalah bahwa tag penutup memiliki garis miring ke depan.
Berikut ini contoh menggunakan elemen p ( <p> ) untuk memberi tahu browser bahwa sekelompok teks adalah paragraf:
 <p>This is a paragraph.</p>
Tag pembuka dan penutup harus cocok, jika tidak, browser dapat menampilkan konten dengan cara yang tidak terduga.




Komik XKCD menampilkan teks "T: Bagaimana Anda mengganggu pengembang?" dikelilingi oleh tag pembuka div dan tag span penutup

Elemen yang menutup sendiri

Beberapa elemen HTML self-closing, artinya mereka tidak memiliki tag penutup yang terpisah. Elemen yang menutup sendiri biasanya memasukkan sesuatu ke dalam dokumen Anda.
Contohnya adalah elemen br ( <br> ), yang menyisipkan potongan baris dalam teks. Sebelumnya, tag penutup sendiri memiliki garis miring di dalamnya ( <br /> ), namun, spesifikasi HTML5 tidak lagi memerlukan ini.

Fungsi Elemen HTML

Ada banyak elemen HTML yang tersedia. Berikut daftar beberapa fungsi yang mereka lakukan:
  • berikan informasi tentang halaman web itu sendiri (metadata)
  • struktur konten halaman menjadi beberapa bagian
  • sematkan gambar, video, klip audio, atau multimedia lainnya
  • buat daftar, tabel, dan formulir
  • berikan lebih banyak informasi tentang konten teks tertentu
  • tautan ke stylesheet yang memiliki aturan tentang bagaimana browser harus menampilkan halaman
  • tambahkan skrip untuk membuat halaman lebih interaktif dan dinamis

Elemen HTML Bersarang

Anda bisa membuat elemen di dalam elemen lain dalam dokumen HTML. Ini membantu menentukan struktur halaman. Pastikan saja tag ditutup dari elemen paling dalam terlebih dahulu.
Benar: <p>This is a paragraph that contains a <span>span element.</span></p>
Salah: <p>This is a paragraph that contains a <span>span element.</p></span>

Elemen Blok Tingkat dan Inline

Elemen datang dalam dua kategori umum, yang dikenal sebagai level blok dan sebaris. Elemen tingkat blok secara otomatis mulai pada baris baru sementara elemen inline duduk di dalam konten di sekitarnya.
Elemen yang membantu menyusun halaman menjadi beberapa bagian, seperti bilah navigasi, heading, dan paragraf, biasanya merupakan elemen tingkat blok. Elemen yang menyisipkan atau memberikan lebih banyak informasi tentang konten pada umumnya inline, seperti tautan atau gambar .

Elemen HTML

Ada elemen <html> yang digunakan untuk berisi markup lain untuk dokumen HTML. Ini juga dikenal sebagai elemen "root" karena merupakan induk dari elemen HTML lain dan konten halaman.
Berikut adalah contoh halaman dengan elemen kepala , elemen tubuh , dan satu paragraf :
 <!DOCTYPE html> <html> <head> </head> <body> <p>I'm a paragraph</p> </body> </html>

Elemen KEPALA

Ini adalah wadah untuk memproses informasi dan metadata untuk dokumen HTML.
 <head> <meta charset="utf-8"> </head>

Elemen BODY

Ini adalah wadah untuk konten yang dapat ditampilkan dari dokumen HTML.
 <body>...</body>

Elemen P

Membuat paragraf, mungkin elemen level blok paling umum.
 <p>...</p>
Membuat hyperlink untuk mengarahkan pengunjung ke halaman atau sumber daya lain.
 <a href="#">...</a>

Gambar dalam HTML

Anda dapat menentukan gambar dengan menggunakan tag <img> . Tidak memiliki tag penutup karena hanya dapat berisi atribut. Untuk menyisipkan gambar, Anda menentukan sumber dan teks alternatif yang ditampilkan ketika gambar tidak dapat dirender.
src - Atribut ini menyediakan url ke gambar yang ada di PC / Laptop Anda atau untuk disertakan dari beberapa situs web lain. Ingat tautan yang disediakan tidak boleh rusak jika tidak, gambar tidak akan diproduksi di halaman web Anda.
alt - Atribut ini digunakan untuk mengatasi masalah gambar rusak atau ketidakmampuan browser Anda untuk menghasilkan gambar di halaman web. Atribut ini, seperti namanya, memberikan "Alternatif" untuk gambar yang merupakan 'TEXT' yang menggambarkan gambar.

Contoh

 <img src="URL of the Image" alt="Descriptive Title" />

Untuk menentukan tinggi dan lebar gambar, Anda dapat menggunakan atribut tinggi dan lebar:

 <img src="URL of the Image" alt="Descriptive Title" height="100" width="150"/>

Anda juga dapat menentukan ketebalan tepi (0 berarti tidak ada batas):

 <img src="URL of the Image" alt="Descriptive Title" border="2"/>

Sejajarkan gambar:

 <img src="URL of the Image" alt="Descriptive Title" align="left"/>

Anda juga dapat menggunakan gaya dalam atribut gaya:

 <img src="URL of the Image" alt="Descriptive Title" style="width: 100px; height: 150px;"/>

Cara menggunakan tautan dalam HTML

Dalam HTML Anda dapat menggunakan tag <a> untuk membuat tautan. Misalnya Anda dapat menulis <a href="https://www.freecodecamp.org/">freeCodeCamp</a> untuk membuat tautan ke situs web freeCodeCamp.
Tautan ditemukan di hampir semua halaman web. Tautan memungkinkan pengguna mengeklik jalannya dari halaman ke halaman.
Tautan HTML adalah hyperlink. Anda dapat mengklik tautan dan melompat ke dokumen lain.
Saat Anda menggerakkan mouse di atas tautan, panah mouse akan berubah menjadi tangan kecil.
Catatan: Tautan tidak harus berupa teks. Ini bisa berupa gambar atau elemen HTML lainnya.
Dalam HTML, tautan didefinisikan dengan tag:
 <a href="url">link text</a>
Contoh
 <a href="https://www.freecodecamp.org/">Visit our site for tutorials</a>
Teks tautan adalah bagian yang terlihat (Kunjungi situs kami untuk tutorial).
Mengklik pada teks tautan akan mengirim Anda ke alamat yang ditentukan.

Cara Menggunakan Daftar dalam HTML

Daftar digunakan untuk menentukan satu set item yang berurutan atau informasi terkait dengan cara yang baik dan semantik, seperti daftar bahan atau daftar langkah-langkah prosedural.
Markup HTML memiliki tiga jenis daftar - urutan , daftar dan deskripsi merah .

Daftar yang dipesan

Daftar yang dipesan digunakan untuk mengelompokkan satu set barang terkait, dalam urutan tertentu. Daftar ini dibuat dengan <ol> . Setiap item daftar dikelilingi dengan <li> .
Kode
 <ol> <li>Mix ingredients</li> <li>Bake in oven for an hour</li> <li>Allow to stand for ten minutes</li> </ol>
Contoh
  1. Campur bahan
  2. Panggang dalam oven selama satu jam
  3. Diamkan selama sepuluh menit

Daftar Tidak Berurutan

Daftar tidak berurutan digunakan untuk mengelompokkan satu set item terkait, tanpa urutan tertentu. Daftar ini dibuat dengan <ul> . Setiap item daftar dikelilingi dengan <li> .
Kode
 <ul> <li>Chocolate Cake</li> <li>Black Forest Cake</li> <li>Pineapple Cake</li> </ul>

Contoh

  • Kue cokelat
  • Kue black forest
  • Kue Nanas

Deskripsi Daftar

Daftar deskripsi digunakan untuk menentukan daftar istilah dan deskripsi mereka. Daftar ini dibuat dengan <dl> . Setiap item daftar dikelilingi dengan <dd> .
Kode
 <dl> <dt>Bread</dt> <dd>A baked food made of flour.</dd> <dt>Coffee</dt> <dd>A drink made from roasted coffee beans.</dd> </dl>
Keluaran
Roti Makanan panggang yang terbuat dari tepung. Kopi Minuman yang dibuat dari biji kopi panggang.

Daftar Styling

Anda juga dapat mengontrol gaya daftar. Anda dapat menggunakan properti list-style . Daftar Anda bisa berupa peluru, kotak, dalam angka Romawi, atau bisa berupa gambar jika Anda mau.
properti list-style adalah singkatan untuk list-style-type list-style-position list-style-image , list-style-position list-style-image , list-style-image .

0 Response to Tutorial HTML dan HTML5 Terbaik

Posting Komentar
Langganan: Posting Komentar (Atom)