Kuliner

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.

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.

Bagaimana cara penulisan HTML? atau struktur HTML?

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++
| Download Notepad++

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 <nama_tag> dan tag penutup contoh </nama_tag>, tanda "/" pada tag penutup menandakan bahwa sifat yang dibawa oleh tanda pengenal berakhir. Namun ada beberapa Tag yang berdiri sendiri diantaranya : <br/>,<hr/>, <img src="" />. 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 <nama_tag atribut="nilai"> isi dokumen </nama_tag>, dan didalam satu Tag kita dapat memberikan beberapa atribut contoh <nama_tag atribut1="nilai" atribut2="nilai"> isi dokumen </nama_tag>, bagaimana? sudah paham? yuk kita bahas ke contoh penulisan dokumen HTML.

Langkah Pertama, Cara menulis code HTML

Buka aplikasi text editor, lalu ketikan code HTML dibawah ini.


<!DOCTYPE html>
<html>
<head>

     <meta charset="UTF-8">
     <title>Judul dari Web</title>

     <!-- Ini untuk Komentar bagian atas-->
</head>
<body>
     <p>

     </p>
          Teks yang akan ditampilkan
</body>

</html>

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".

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.

Penjelasan Struktur HTML

Didalam struktur HTML dapat kita lihat setiap Tag yang di buka contoh <nama_tag> harus di tutup kembali dengan tag </nama_tag> , tapi kenapa tag <!DOCTYPE html> tidak ditutup? mari kita simak penjelasan tentang struktur HTML :

Tag <!DOCTYPE html> 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 <html>...</html>

Tag <HTML> tugasnya adalah sebagai root, maksudnya semua tag yang berada didalam tag <HTML> merupakan gambaran dari dokumen HTML.
Tag <head>...</head>
Tag <HEAD> tugasnya adalah memberikan informasi tentang dokumen, maksudnya didalam tag <head> 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 <title>...</title>
Tag <TITLE> tugasnya adalah memberikan informasi berupa judul dokumen HTML.
Tag <body>...</body>
Tag <BODY> tugasnya adalah memberikan isi dari suatu dokumen yang akan ditampilkan oleh web browsernya.
Tag <p>...</p>
Tag <P> tugasnya adalah untuk membuat sebuah paragraf.
Tag 

Tag  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.

Apa itu HTML5 lalu apa perbedaannya HTML dengan HTML5?

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?

New Semantic Elements : Ini seperti pada elemen <header>, <footer>, and <section>.
Forms 2.0 : Perbaikan form web HTML di mana atribut baru telah diperkenalkan tag <input>.
Persistent Local Storage : Untuk menghilangkan ketergantungan pada plugin pihak ketiga.
WebSocket : Sebuah generasi teknologi terbaru komunikasi dua arah untuk aplikasi web.
Server-Sent Events : memperkenalkan even yang mengalir dari web server ke web browser yang disebut Server-Sent Events (SSE).
Canvas : Ini mendukung gambar dua dimensi surface yang dapat diprogram dengan JavaScript.
Audio & Video : Anda dapat menanamkan/embed audio atau video pada halaman web Anda tanpa menggunakan plugin pihak ketiga.
Geolocation : Pengunjung dapat memilih untuk berbagi lokasi fisik mereka dengan aplikasi web Anda..
Microdata : Ini memungkinkan Anda membuat kosakata Anda sendiri di luar HTML5 dan memperluas halaman web Anda dengan kostum semantics.
Drag and drop : Drag dan drop item dari satu lokasi ke lokasi lain pada halaman web yang sama.

Apa saja Feature yang dihapus pada HTML5?

Acronym : Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag <abbr>
Applet : Digunakan untuk memasukan file java kedalam dokumen HTML
Basefont : Membuat atribut teks default, seperti warna, ukuran, jenis font untuk semua teks dalam dokumen
Big : Memperbesar ukuran teks sebesar satu point dari defaultnya
Center : Untuk perataan tengah terhadap teks atau gambar
Dir : Mendefinisikan sebuah daftar direktori
Font : Mendefinisikan jenis font, warna dan ukuran untuk teks
Frame : Mendefinisikan frame dalam fremeset
Frameset : Mendefinisikan satu set frame
Noframes : Jika browser user tidak mendukung frame
Strike : Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del>
Tt : Mendefinisikan teletype text

Dokumen HTML5

HTML5 memiliki dukungan yang lebih baik terhadap struktur penulisan Tag HTML, berikut ini merupakan hasil kembangan pada HTML5

Penjelasan Struktuk Dokumen HTML5

Tag <section>...</section>

Tag <SECTION> merupakan dokumen atau aplikasi bagian generik. Hal ini dapat digunakan bersama-sama dengan h1-h6 untuk menunjukkan struktur dokumen.

Tag <article>...</article>

Tag <ARTICLE> merupakan sepotong independen isi dokumen, seperti sebuah blog atau artikel koran.

Tag <aside>...</aside>

Tag <ASIDE> merupakan gambaran dari sebagian konten yang berhubungan dengan isi halaman.

Tag <header>...</header>

Tag <HEADER> merupakan bagian kepala dari dukumen.

Tag <footer>...</footer>

Tag <FOOTER> merupakan bagian catatan kaki yang dapat berisi informasi tentang penulis, informasi hak cipta, dll

Tag <nav>...</nav>

Tag <NAV> merupakan bagian dari dokumen yang dimaksudkan untuk memudahkan dalam proses navigasi.

Tag <figure>...</figure>

Tag <FIGURE> dapat digunakan untuk menghubungkan keterangan bersama-sama dengan beberapa konten tertanam, seperti gambar atau video.

Oke, Pengenalan HTML5 sudah selesai.

Referensi Pengenalan HTML5 :

www.duniailkom.com

Kuliner

Rabu, 19 Februari 2020

Dasar dasar html

Kamis, 23 Januari 2020

MENGENAL HTML

Bagaimana cara penulisan HTML? atau struktur HTML?

Apa itu HTML5 lalu apa perbedaannya HTML dengan HTML5?

Dokumen HTML5

Referensi Pengenalan HTML5 :

Senin, 20 Januari 2020

Futsal