MODUL DASAR HTML PRESENTED BY JEFRI MARULI H PENGERTIAN HTML HTML merupakan singkatan dari (Hyper Text Markup Language) adalah bahasa markup atau bahasa markah yang digunakan untuk membangun sebuah halaman website. Di dalam dunia pemrograman berbasis web (web programming), HTML menjadi pondasi dasar pada halaman website FUNGSI HTML Membuat suatu halaman website yang bisa dibaca dan dipahami oleh pengguna dengan lebih mudah. Menampilkan berbagai informasi di dalam sebuah browser internet. Membuat link menuju halaman web lain dengan kode tertentu (hypertext). Sebagai dasar pada sebuah website. KEGUNAAN HTML Mengintegrasikan gambar dan tulisan pada sebuah website. Membuat sebuah form/formulir pada halaman website. Mengintegrasikan berkas suara (audio), video dan gambar yang bergerak (animasi) TOOLS YANG DIBUTUHKAN Tools/perangkat lunak yang dibutuhkan untuk membangun sebuah web menggunakan HTML yaitu: Text Editor/IDE (Integrated Development Environment) Web Browser TEXT EDITOR Text Editor merupakan aplikasi yang digunakan untuk menulis syntax atau kode program, disini khususnya untuk penulisan kode program HTML itu sendiri. Text editor sendiri sangatlah banyak yang bisa digunakan untuk penulisan kode HTML WEB BROWSER Web Browser atau biasa disebut browser) adalah sebuah software aplikasi untuk menerima, menampilkan, dan menerjemahkan informasi dari world wide web (www). Dan salah satu informasi itu dibuat dalam format HTML. Kode HTML yang kita buat akan diterjemahkan oleh web browser agar tampil seperti yang dirancang MEMILIH TEXT EDITOR Untuk memilih text editor yang sesuai dengan keinginan, berikut beberapa text editor yang penulis sarankan untuk digunakan dalam penulisan code program bagi kalian yang baru belajar bahasa pemrograman. TEXT EDITOR TERPOPULER Link Survey : https://insights.stackoverflow.com/survey/2018 Keterangan Aplikasi size Kecil atau ringan Aplikasi size besar atau perlu spesifikasi yang tinggi Berdasarkan Survey Developer Stack Overflow's 2018, dari beberapa aplikasi yang di atas .Microsoft Visual Studio Code yang paling diminati oleh para Developer dan Programmer, kemudian ada Notepad++, Sublime Text, VIM dan Atom PENILAIAN TEXT EDITOR Sumber : https://www.software.com/review/ranking-the-top-5-code-editors-2019 Jika ingin memilih teks editor mana yang terbaik dari beberapa teks editor yang terpopuler dan ringan digunakan, berikut penilaian mulai dari kepuasan pengguna, perfomance, kemungkinan diperpanjang atau dikembangkan dan mudah dipelajari atau tidaknya dari aplikasi tersebut. VISUAL STUDIO CODE Visual Studio Code adalah aplikasi text editor yang dikembangkan oleh Perusahaan Microsoft, aplikasi ini rilis di pertengahan tahun 2015, VS Code mendapatkan popularitas dengan cepat yang sangat signifikan oleh komunitas karena dari segi penggunaan aplikasi yang mudah dipelajari, kepuasan pengguna , dan Extension yang dikembangkan sangat mempermudah developer dalam membangun sebuah aplikasi untuk mengunduh aplikasi ini silahkan kunjungi link https://code.visualstudio.com/ SUBLIME TEXT Sublime Text adalah aplikasi Text editor terpopuler setelah Notepad++, dari segi Perfomance Sublime bisa di sebut aplikasi teks editor yang ringan dan lebih kompatibel. Tetapi ada fitur -fitur yang dibatasi oleh Sublime karena kita harus membayar untuk mendapat full akses dari fitur aplikasi ini, tidak seperti aplikasi lainnya yang bersifat open source atau gratis. Untuk mengunduh aplikasi ini silahkan kunjungi link https://www.sublimetext.com/. ATOM Atom adalah aplikasi Text editor yang cukup populer yang dikembangkan oleh Github dan rilis pada pertengahan tahun 2015, meskipun aplikasi ini kurang diminati oleh developer , tetapi fitur dalam aplikasi ini sangat berguna mulai tampilan yang menarik diliat, dan extension bawaan dari Atom, Bahkan pengguna Visual Studio Code pun menggunakan extension dari Atom seperti Atom One Dark Theme, Atom Keymap , dan Atom snippet, tapi dari segi Perfomance Atom lumayan memakan RAM yang cukup besar , untuk download aplikasi ini silahkan kunjungi link https://atom.io/. VIM vIm adalah aplikasi Text editor open source yangrilis pada pertengahan tahun 1991, meski aplikasi ini bisa disebut lebih tua dari aplikasi yang lain tetapi aplikasi ini masih populer dari kalangan developer menengah atas. Tetapi dari segi tampilan aplikasi tidak seperti tampilan aplikasi text editor lainnya karena aplikasi ini berbasis CLI (Command Line Interface) dan kurang cocok untuk pemula yang ini belajar bahasa pemrograman , karena serba menggunakan command/perintah jika ingin melakukan sesuatu pada aplikasi ini . Untuk segi perfomance bisa disebut aplikasi yang paling ringan untuk download aplikasi ini silahkan kunjungi link https://www.vim.org/. NOTEPAD++ Notepad++ adalah aplikasi Text editor open source didesain untuk Windows yang dirilis tahun 2003 , dari segi kepopuleran aplikasi ini mendapat kedudukan text editor terpopuler setelah Visual Studio Code. Tetapi dari segi penilaian aplikasi ini banyak kekurangannya, meskipun aplikasi ini terlihat simple dan cocok untuk pemula, justru text editor ini sangat sulit digunakan jika ingin membuat sebuah project aplikasi berskala besar karena keterbatasan fitur yang dimiliki oleh Notepad++. untuk download aplikasi ini silahkan kunjungi link https://notepad-plus-plus.org/ MEMULAI HTML Komponen HTML yang harus diketahui yaitu: Tag Element Attribute TAG Tag merupakan penanda yang menandakan awalan dan akhiran sebuah elemen HTML. CIRI-CIRI TAG SIMBOL TAG PENULISAN TAG PENUTUP TAG Tag HTML diapit Hampir semua tag di Tag penutup di HTML dengan simbol kurung HTML ditulis secara mempunyai garis siku "<...>" . berpasangan ,yakni miring atau slash di tag pembuka dan tag depan nama tag. contoh : <head>, penutup. <body>, <i> , <li> , dsb. contoh: <body> contoh : </p>, </body>,<div></div> , </body>, </li>, dsb. <p> </p>, dsb. Sumber Referensi : https://www.petanikode.com/html-tag-elemen-atribut/ GAMBARAN TAG Sumber Gambar : https://clearlydecoded.com/assets/images/posts/2017-09-04-anatomy-of-html-tag/simple-p-tag.png TAG YANG TIDAK MEMILIKI PASANGAN Meskipun hampir semua tag di HTML memiliki pasangan, namun ada juga tag HTML yang tidak memiliki pasangan seperti : <hr> <link> <br> <input> <img> <meta> IMPLEMENTASI PENULISAN TAG Sebelum memulai implementasi HTML, langkah pertama yang dilakukan yaitu membuat folder baru dengan nama "Belajar HTML" sesuai direktori drive masing-masing. Kemudian buka Text Editor sesuai, setelah itu pilih 'File' pada menu kemudian pilih open folder, cari folder "Belajar HTML" yang telah dibuat, lalu pilih select Folder. Setelah membuka folder "Belajar HTML" kemudian pilih new file, lalu buatlah file dengan nama "tag.html". Ketik tag HTML seperti di gambar Hasil dari penulisan tag HTML kemudian ditampilkan melalui browser seperti di gambar ini ELEMENT Element merupakan isi atau objek yang berada pada tag atau bisa disebut dengan isi yang berada diantara tag pembuka dan tag penutup. CIRI-CIRI ELEMENT NESTED ELEMENT Element dapat dibuat bersarang (Nested) atau element dapat berada di dalam element seperti digambar. PARENT ELEMENT Element bisa bersarang jika Induk(parent) element mempunyai pasangan tag. Tambahkan element HTML seperti di gambar Hasil dari penulisan element HTML ditampilkan melalui browser seperti di gambar. LATIHAN Buatlah element HTML yang menggunakan tag <hr>, dan tag <ol> yang akan menampilkan hasil seperti digambar. ATTRIBUTE Attribute merupakan informasi tambahan yang digunakan dalam tag pembuka. Informasi ini bisa berupa intruksi untuk memberikan efek warna, ketebalan, posisi, dll. CIRI-CIRI ATTRIBUTE Attribute memiliki 2 bagian, yaitu nama attribute dan nilai attribute. Contoh : name="value" Penulisan nilai attribute diapit oleh satu atau dua tanda kutip (lebih sering menggunakan dua kutip). Penulisan attribute diawali dengan penulisan tag pembuka, dan atribut berada didalam tag tsb. Contoh: <h2 align="center"> Tambahkan element dan atribut HTML di bagian tag heading dan list seperti di gambar. Hasil dari penulisan element HTML ditampilkan melalui browser seperti di gambar. LATIHAN Ubahlah atribut heading menjadi posisi di sebelah kanan, tag list <li> ubahlah warna atribut merah menjadi biru, dan tambahkan atribut warna hijau pada tag number <ol> . TERIMA KASIH
