Pengenalan HTML5 | Belajar HTML - Halo teman- teman sebelum kita belajar html kali ini saya akan membahas pengenalan HTML, fungsi HTML, konsep HTML, cara kerja HTML dan cara penulisan HTML dari dasar, pasti sudah pada tau dong apa itu HTML? HTML adalah singkatan Hyper Text Markup Language, Hyper Text Markup Language dapat kita kelompokan menjadi dua suku kata yaitu :

Hyper Text berarti teks aktif maksudnya adalah sebuah teks yang memiliki kemampuan dapat terhubung antara teks suatu halaman dengan halaman yang lain.

Markup Language menjelaskan bahwa dokumen HTML ini disusun oleh tag- tag markup dan setiap tag pada HTML menjelaskan perintah isi dokumen yang berbeda- beda.
Baca juga : <a href="https://www.codepolitan.com/melihat-halaman-html-pertama-dunia/">Melihat Halaman HTML Pertama di Dunia</a>
Apa Fungsi dari HTML?

HTML adalah teknologi dasar yang digunakan untuk membuat dasar dari sebuah halaman web dengan menghubungkan teks / link antar halaman, memberi struktur dan membagikan informasi yang terkait dengan sebuah halaman web. Lalu kenapa HTML pada Web bisa menampilkan animasi- animasi dan efek-efek yang bagus?Hal itu dikarenakan Konten sebuah web selain teks dapat bermacam- macam seperti video, audio, gambar, dan agar tampilan web kita semakin menarik biasanya didalam sebuah web di tambahkan Javascript sebagai animasi, dan CSS (Cascading Style Sheet) sebagai pemberi make-up atau style.
<h2>Bagaimana cara penulisan HTML? atau struktur HTML?</h2>
Sebelum kita bahas cara penulisan HTML kalian harus memiliki aplikasi text editor, apa itu text editor? text editor adalah sebuah aplikasi yang digunakan untuk membuat atau mengedit teks. Ada banyak sekali aplikasi text editor yang dapat digunakan dalam membuat dokumen HTML seperti sublime text, notepad, dreamweaver, notepad++. Berikut ini tampilan salah satu text editor untuk membuat file HTML :

Notepad++

[caption id="attachment_9789" align="aligncenter" width="459"]<img class="wp-image-9789" src="https://www.codepolitan.com/wp-content/uploads/2016/05/pengenalan-html-1-700x457.jpg" alt="gambar text editor notepad++" width="459" height="300" /> gambar text editor notepad++ | <a href="https://notepad-plus-plus.org/">Download Notepad++</a>[/caption]

Setelah itu ada beberapa poin yang harus kalian ingat- ingat dan kalian perhatikan, peraturan pertama didalam struktur HTML terdapat TAG dan ATRIBUT.

Apa itu Tag? apa yang dimaksud dengan Tag?

Tag adalah suatu tanda pengenal dokumen pada html yang terdiri 2 bagian yaitu tag pembuka contoh &lt;nama_tag&gt; dan tag penutup contoh &lt;/nama_tag&gt;, tanda "/" pada tag penutup menandakan bahwa sifat yang dibawa oleh tanda pengenal berakhir. Namun ada beberapa Tag yang berdiri sendiri diantaranya : <code>&lt;br/&gt;</code>, <code>&lt;hr/&gt;</code>, <code>&lt;img src="" /&gt;</code>. Tag - tag ini bersifat unik karena tag ini tidak perlu menggunakan tag penutup.

Apa itu Atribut? apa yang dimaksud dengan Atribut?

Atribut adalah suatu sifat khusus yang dapat diberikan pada tag pembuka contoh &lt;nama_tag atribut="nilai"&gt; isi dokumen &lt;/nama_tag&gt;, dan didalam satu Tag kita dapat memberikan beberapa atribut contoh &lt;nama_tag atribut1="nilai" atribut2="nilai"&gt; isi dokumen &lt;/nama_tag&gt;, bagaimana? sudah paham? yuk kita bahas ke contoh penulisan dokumen HTML.
Baca juga : <a href="https://www.codepolitan.com/tutorial/memahami-konsep-elemen-html/">Belajar HTML – Memahami Konsep Elemen HTML</a>
Langkah Pertama, Cara menulis code HTML

Buka aplikasi text editor, lalu ketikan code HTML dibawah ini.
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;Judul dari Web&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;!-- Ini untuk Komentar bagian atas--&gt;
 &lt;p&gt;
 Teks yang akan ditampilkan
 &lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
Langkah Kedua, Cara melakukan save file HTML

Setelah code HTML dimasukan, kita akan mulai melakukan save file HTML dengan cara klik "File", pilih menu "Save As", Kemudian pilih lokasi sesuai dengan keinginan. Disini yang harus diperhatikan yaitu untuk "File Name" kalian bisa mengisikan nama file bebas, dan untuk "Save as type" kalian ubah menjadi "Hyper Text Markup Language".

[caption id="attachment_9794" align="aligncenter" width="404"]<img class="wp-image-9794" src="https://www.codepolitan.com/wp-content/uploads/2016/05/save-1-350x260.png" alt="save" width="404" height="300" /> proses penyimpanan file dokumen HTML[/caption]

Langkah Ketiga, Cara membuka dokumen HTML

Untuk melihat tampilan atau membuka file dokumen HTML, kita butuh aplikasi Web Browser, contoh Browser : Google Chrome, Mozilla Firefox, Opera, Dll. Jika aplikasi Web browser belum terinstall maka install terlebih dahulu dan jika sudah terinstall di komputer kalian, pertama kalian buka lokasi file HTML yang kalian simpan tadi, lalu klik 2x pada file tersebut.

[caption id="attachment_9795" align="aligncenter" width="358"]<img class="wp-image-9795" src="https://www.codepolitan.com/wp-content/uploads/2016/05/tempat-file-html-350x294.png" alt="tempat file html" width="358" height="300" /> Sorot dan klik file dokumen HTML[/caption]

[caption id="attachment_9796" align="aligncenter" width="356"]<img class="wp-image-9796" src="https://www.codepolitan.com/wp-content/uploads/2016/05/tampilan-file-html-340x350.png" alt="tampilan file html" width="356" height="365" /> Tampilan dari hasil code HTML[/caption]

Dari dokumen yang kita buat di atas kita telah berhasil menampilkan tulisan "Teks yang akan ditampilkan". Jika teman- teman ingin membuat tulisan heading atau membuat paragraf di HTML kalian bisa melihat tutorial :
<ul>
 	<li><a href="https://www.codepolitan.com/tutorial/belajar-html-cara-membuat-paragraf/">Belajar HTML – Cara Membuat Paragraf </a></li>
 	<li><a href="https://www.codepolitan.com/tutorial/belajar-html-cara-membuat-heading/">Belajar HTML – Cara Membuat Heading</a></li>
</ul>
Penjelasan Struktur HTML

Didalam struktur HTML dapat kita lihat setiap Tag yang di buka contoh &lt;nama_tag&gt; harus di tutup kembali dengan tag &lt;/nama_tag&gt; , tapi kenapa tag  &lt;!DOCTYPE html&gt; tidak ditutup? mari kita simak penjelasan tentang struktur HTML :

Tag <code>&lt;!DOCTYPE html&gt;</code> adalah sebuah deklerasi atau untuk mengidentifikasi jenis dokumen HTML yang digunakan agar browser dapat menentukan bagaimana memperlakukan kode tersebut. Proses deklarasi ini cukup dilakukan sekali saja saat dokumen HTML dijalankan.

Tag <code>&lt;html&gt;...&lt;/html&gt;</code>

Tag &lt;HTML&gt; tugasnya adalah sebagai root, maksudnya semua tag yang berada didalam tag &lt;HTML&gt; merupakan gambaran dari dokumen HTML.

Tag <code>&lt;head&gt;...&lt;/head&gt;</code>

Tag &lt;HEAD&gt; tugasnya adalah memberikan informasi tentang dokumen, maksudnya didalam tag &lt;head&gt; kita bisa menambahkan tag- tag yang biasanya digunakan untuk memberikan informasi berupa penulis, judul dokumen, kata kunci pada dokumen dan masih banyak lagi informasi yang bisa di tambahkan pada tag ini.

Tag <code>&lt;title&gt;...&lt;/title&gt;</code>

Tag &lt;TITLE&gt; tugasnya adalah memberikan informasi berupa judul dokumen HTML.

Tag <code>&lt;body&gt;...&lt;/body&gt;</code>

Tag &lt;BODY&gt; tugasnya adalah memberikan isi dari suatu dokumen yang akan ditampilkan oleh web browsernya.

Tag <code>&lt;p&gt;...&lt;/p&gt;</code>

Tag &lt;P&gt; tugasnya adalah untuk membuat sebuah paragraf.

Tag <code>&lt;!-- komentar --&gt;</code>

Tag &lt;!-- komentar --&gt; tugasnya adalah memberikan komentar pada sebuah dokumen HTML, namun tulisan yang dimasukan dalam tag ini tidak akan terlihat pada Web browser saat dijalankan tetapi dapat dilihat pada source program.
<h2>Apa itu HTML5 lalu apa perbedaannya HTML dengan HTML5?</h2>
HTML5 adalah singkatan Hyper Text Markup Language Versi 5, HTML5 merupakan sebuah teknologi penerus dari generasi sebelumnya yang dikeluarkan oleh W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group). dengan tambahan feature- feature baru untuk memperbaiki dan melengkapi dari HTML versi sebelumnya.

Apa saja Feature baru pada HTML5?
<ol>
 	<li>New Semantic Elements : Ini seperti pada elemen &lt;header&gt;, &lt;footer&gt;, and &lt;section&gt;.</li>
 	<li>Forms 2.0 : Perbaikan form web HTML di mana atribut baru telah diperkenalkan tag &lt;input&gt;.</li>
 	<li>Persistent Local Storage : Untuk menghilangkan ketergantungan pada plugin pihak ketiga.</li>
 	<li>WebSocket : Sebuah generasi teknologi terbaru komunikasi dua arah untuk aplikasi web.</li>
 	<li>Server-Sent Events : memperkenalkan even yang mengalir dari web server ke web browser yang disebut Server-Sent Events (SSE).</li>
 	<li>Canvas : Ini mendukung gambar dua dimensi surface yang dapat diprogram dengan JavaScript.</li>
 	<li>Audio &amp; Video : Anda dapat menanamkan/embed audio atau video pada halaman web Anda tanpa menggunakan plugin pihak ketiga.</li>
 	<li>Geolocation : Pengunjung dapat memilih untuk berbagi lokasi fisik mereka dengan aplikasi web Anda..</li>
 	<li>Microdata : Ini memungkinkan Anda membuat kosakata Anda sendiri di luar HTML5 dan memperluas halaman web Anda dengan kostum semantics.</li>
 	<li>Drag and drop : Drag dan drop item dari satu lokasi ke lokasi lain pada halaman web yang sama.</li>
</ol>
Apa saja Feature yang dihapus pada HTML5?
<ol>
 	<li>Acronym : Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag &lt;abbr&gt;</li>
 	<li>Applet : Digunakan untuk memasukan file java kedalam dokumen HTML</li>
 	<li>Basefont : Membuat atribut teks default, seperti warna, ukuran, jenis font untuk semua teks dalam dokumen</li>
 	<li>Big : Memperbesar ukuran teks sebesar satu point dari defaultnya</li>
 	<li>Center : Untuk perataan tengah terhadap teks atau gambar</li>
 	<li>Dir : Mendefinisikan sebuah daftar direktori</li>
 	<li>Font : Mendefinisikan jenis font, warna dan ukuran untuk teks</li>
 	<li>Frame : Mendefinisikan frame dalam fremeset</li>
 	<li>Frameset : Mendefinisikan satu set frame</li>
 	<li>Noframes : Jika browser user tidak mendukung frame</li>
 	<li>Strike : Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag &lt;del&gt;</li>
 	<li>Tt : Mendefinisikan teletype text</li>
</ol>
<h2>Dokumen HTML5</h2>
HTML5 memiliki dukungan yang lebih baik terhadap struktur penulisan Tag HTML, berikut ini merupakan hasil kembangan pada HTML5 :
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;Pengenalan HTML5&lt;/title&gt;
 &lt;/head&gt; 
 &lt;body&gt; 
 &lt;header role="banner"&gt;
 &lt;h1&gt;Contoh Struktur Dokumen HTML5&lt;/h1&gt;
 &lt;p&gt;HTML5 memiliki dukungan yang lebih baik terhadap struktur penulisan Tag HTML.&lt;/p&gt;
 &lt;/header&gt; 
 &lt;nav&gt; 
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;Pengenalan HTML5&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Elemen, Tag dan Atribut&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Heading dan Paragraf&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Formating&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt; 
 &lt;/nav&gt; 
 &lt;article&gt;
 &lt;section&gt;
 &lt;h3&gt;Satu artikel dapat memiliki lebih dari satu sections&lt;/h3&gt;
 &lt;/section&gt;
 &lt;/article&gt; 
 &lt;aside&gt;
 &lt;p&gt;Ini adalah aside, bagian dari konten yang hanya sedikit berhubungan dengan sisa halaman&lt;/p&gt;
 &lt;/aside&gt; 
 &lt;figure align="right"&gt;
 &lt;img src="https://www.codepolitan.com/wp-content/themes/open_cp/assets/img/codepolitan_new_logo.png" alt="Code Politan" width="350" height="100"&gt;
 &lt;/figure&gt; 
 &lt;footer&gt;
 &lt;p&gt;Created by &lt;a href="#"&gt;Code Politan&lt;/a&gt;&lt;/p&gt;
 &lt;/footer&gt; 
 &lt;/body&gt;
&lt;/html&gt;</pre>
Contoh hasil tampilan code diatas

[caption id="attachment_9859" align="alignnone" width="350"]<img class="wp-image-9859 size-medium" src="https://www.codepolitan.com/wp-content/uploads/2016/05/belajar-html5-350x332.png" alt="belajar html5" width="350" height="332" /> tampilan html5 dengan feature baru[/caption]

Penjelasan Struktuk Dokumen HTML5

Tag <code>&lt;section&gt;...&lt;/section&gt;</code>

Tag &lt;SECTION&gt; merupakan dokumen atau aplikasi bagian generik. Hal ini dapat digunakan bersama-sama dengan h1-h6 untuk menunjukkan struktur dokumen.

Tag <code>&lt;article&gt;...&lt;/article&gt;</code>

Tag &lt;ARTICLE&gt; merupakan sepotong independen isi dokumen, seperti sebuah blog atau artikel koran.

Tag <code>&lt;aside&gt;...&lt;/aside&gt;</code>

Tag &lt;ASIDE&gt; merupakan gambaran dari sebagian konten yang berhubungan dengan isi halaman.

Tag <code>&lt;header&gt;...&lt;/header&gt;</code>

Tag &lt;HEADER&gt; merupakan bagian kepala dari dukumen.

Tag <code>&lt;footer&gt;...&lt;/footer&gt;</code>

Tag &lt;FOOTER&gt; merupakan bagian catatan kaki yang dapat berisi informasi tentang penulis, informasi hak cipta, dll

Tag <code>&lt;nav&gt;...&lt;/nav&gt;</code>

Tag &lt;NAV&gt; merupakan bagian dari dokumen yang dimaksudkan untuk memudahkan dalam proses navigasi.

Tag <code>&lt;figure&gt;...&lt;/figure&gt;</code>

Tag &lt;FIGURE&gt; dapat digunakan untuk menghubungkan keterangan bersama-sama dengan beberapa konten tertanam, seperti gambar atau video.

Oke, Pengenalan HTML5 sudah selesai, kita akan sambung belajar HTMLnya pada kesempatan berikutnya, sampai ketemu lagi keep watch and learn at CodePolitan.
<h2>Referensi Pengenalan HTML5 :</h2>
<ul>
 	<li><a href="http://www.tutorialspoint.com/html/">www.tutorialspoint.com</a></li>
 	<li><a href="http://www.w3schools.com/html/html_intro.asp">www.w3schools.com</a></li>
 	<li><a href="http://www.nurulimam.com/2013/10/pengenalan-tentang-doctype-html.html">www.nurulimam.com</a></li>
 	<li><a href="https://id.wikipedia.org/wiki/HTML5">www.id.wikipedia.org</a></li>
 	<li><a href="http://www.duniailkom.com/tutorial-belajar-html5-cara-membuat-struktur-html5-tag-header-footer-dan-aside/">www.duniailkom.com</a></li>
</ul>

Pengenalan HTML5 | Belajar HTML

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Pengenalan HTML5 | Belajar HTML

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Pengenalan HTML5 | Belajar HTML

Sejarah dan Perkembangan HTML5 | Belajar HTML

Pengertian Elemen pada HTML | Belajar HTML