-->

Belajar HTML Lengkap untuk pemula 2023 - Bahasa Indonesia

Konten [Tampil]

    Belajar HTML untuk pemula

    Sebelum memulai alangkah lebih baik kita ketahui dulu apa itu HTML.

    HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat dan mengatur konten pada halaman web. HTML adalah fondasi dari setiap situs web, sehingga penting bagi pemula untuk memahami HTML dasar dasarnya. 

    Setelah kita mengetahui apa itu HTML selanjutnya pada artikel Belajar HTML lengkap untuk pemula 2023 ini akan dijelaskan dari nol secara detail agar dapat anda praktekan dengan mudah. Untuk memperluas wawasan kita, pembahasan kita kali ini akan di mulai dari sejarah HTML.

    Belajar HTML Lengkap untuk pemula (2023) - Bahasa Indonesia


    Sejarah HTML

    HTML pertama kali dikembangkan pada tahun 1989 oleh seorang fisikawan bernama Tim Berners-Lee di CERN (Organisasi Eropa untuk Penelitian Nuklir) sebagai cara untuk membagikan informasi antar peneliti.

    CERN (Organisasi Eropa untuk Penelitian Nuklir)


    Sejarah HTML dimulai tahun 1980-an ketika peneliti-peneliti di CERN mulai mencari cara untuk memudahkan pertukaran informasi di antara mereka. Pada saat itu, sebagian besar informasi di CERN disimpan dalam bentuk dokumen tertulis atau cetak, dan sulit untuk membagikannya secara elektronik.

    Tim Berners-Lee mulai mengembangkan sistem yang disebut "Enquire" di tahun 1980-an sebagai cara untuk menyimpan dan berbagi informasi di antara para peneliti di CERN. Enquire menggunakan konsep hiperteks, yang memungkinkan pengguna untuk mengakses informasi secara tidak terstruktur melalui tautan yang terkait satu sama lain.

    Tim Berners-Lee


    Tahun 1989, Tim Berners-Lee mengembangkan HTML sebagai bahasa markup untuk membuat dan memformat dokumen hiperteks. HTML awalnya hanya terdiri dari sejumlah kecil tag dasar, seperti <p> untuk paragraf dan <h1> untuk header. HTML awalnya hanya digunakan di dalam lingkungan akademik, tetapi seiring waktu semakin banyak orang mulai menggunakan internet, HTML menjadi semakin penting dalam pembuatan halaman web.

    Perkembangan Versi HTML

    Sejak pertama kali diperkenalkan tahun 1990, HTML terus mengalami perkembangan dan evolusi hingga saat ini. Dalam artikel ini, kita akan membahas perkembangan HTML dari versi awal hingga versi terbaru.

    HTML 1.0

    HTML 1.0 adalah versi pertama dari HTML yang dirilis pada tahun 1993 yang hanya memiliki sekitar 18 elemen dan tag, yang digunakan untuk memformat dan menampilkan teks pada halaman web. HTML 1.0 juga belum mendukung gambar, tabel, atau form.

    HTML 2.0

    HTML 2.0 dirilis tahun 1995 dan menambahkan beberapa elemen baru seperti tabel, gambar, dan form. juga memperkenalkan atribut, yaitu fitur ditambahkan untuk memberikan informasi tambahan pada elemen HTML.

    HTML 3.2

    HTML 3.2 dirilis tahun 1997 dan merupakan versi HTML yang sangat populer pada masanya. Dengan menambahkan lebih dari 70 elemen baru, termasuk frame, image map, dan script. HTML 3.2 juga memperkenalkan Cascading Style Sheets (CSS), yang memungkinkan pengguna untuk mengontrol tampilan dan layout halaman web dengan lebih menarik.

    HTML 4.0

    HTML 4.0 dirilis tahun 1997 dan memperkenalkan beberapa elemen baru seperti iframe, layer, dan meta. Selain itu juga menambahkan fitur lainnya seperti Cascading Style Sheets level 2 (CSS2), pemformatan teks dengan tag <font>, dan pemrograman skrip dengan bahasa JavaScript.

    HTML 4.01

    HTML 4.01 dirilis tahun 1999 dan merupakan versi HTML yang paling stabil dan konsisten dan hanya menambahkan beberapa elemen dan atribut baru, serta memperbaiki beberapa masalah keamanan dan kestabilan pada versi sebelumnya.

    XHTML 1.0

    XHTML (Extensible Hypertext Markup Language) 1.0 dirilis pada tahun 2000 dan merupakan versi HTML yang lebih ketat dan lebih berorientasi pada XML. Versi ini menggabungkan elemen dan atribut dari HTML dan XML, serta memperkenalkan sintaks yang lebih ketat dan lebih konsisten.

    HTML5

    HTML5 adalah versi terbaru dari HTML yang diresmikan pada tahun 2014 dengan penambahan banyak elemen baru seperti audio, video, canvas, dan drag-and-drop. HTML5 juga memperkenalkan atribut baru seperti data-* dan aria-* yang digunakan untuk memperbaiki aksesibilitas dan interaktivitas halaman web.

    HTML5 juga memperkenalkan fitur baru seperti Web Storage, Web Workers, dan Geolocation, yang memungkinkan pengembang untuk membuat aplikasi web yang lebih kaya dan lebih interaktif.

    Hingga saat ini, HTML masih merupakan bahasa markup yang sangat penting dalam sebuah halaman web, dan telah berkembang menjadi standar terbuka dan interoperabel yang digunakan di seluruh dunia.

    Membuat Halaman HTML

    Untuk belajar HTML dan membuat halaman web, hal yang perlu di siapkan yaitu peralatan yang dibutuhkan untuk memulai belajar pembuatan halaman atau Dokumen HTML berikut ini :

    Menyiapkan Text Editor 

    Text editor adalah software yang digunakan untuk menulis kode HTML. Sebetulnya Windows sudah memiliki text editor bawaan yang sudah disiapkan untuk membuat kode program yaitu Applikasi notepad, applikasi Notepad adalah applikasi yang sangat sederhana dari windows. Selain itu ada alternatif text editor lain dengan fitur yang lebih lengkap dan dapat membantu membuat kode program menjadi lebih mudah yang dapat digunakan, seperti Notepad++, Sublime Text, atau Visual Studio Code.

    Namun saya sendiri lebih menyarankan dan nyaman menggunakan Text Editor Visual Studio Code atau vscode, anda dapat mengintal Applikasi tersebut pada tautan yang sudah saya siapkan di atas. Tinggal install dan ikuti instruksi yang diberikan, mudah sekali.

    Setelah berhasil terinstall, silahkan buka melalui menu start -> Visual Studio Code, inilah tampilan dari Applikasi vscode tersebut :

    Visual Studio Code

    Menyiapkan Browser

    Applikasi Browser yang ada biasanya sudah tersedia di komputer adalah Internet explorer atau Google Chrome, namun anda dapat mempergunakan browser-browser lain yang disukai. Applikasi Browser untuk menjalankan file html ini banyak tersedia selain 2 jenis browser yang saya sebutkan di atas anda juga dapat memakai Opera, Mozila Firefox, Microsoft Edge dll.

    Anda boleh memakai browser manapun yang anda suka, sebagai catatan sebaiknya anda gunakan browser terbaru yang bisa anda update terlebih dahulu. Pada tutorial kali ini saya sendiri memakai browser Chrome.

    Menulis Kode HTML 

    Kode HTML terdiri dari tag dan isi dari tag tersebut. Tag adalah simbol-simbol yang digunakan untuk memberitahu browser tentang jenis konten yang akan ditampilkan pada halaman web.

    Sebelum memulai, silahkan anda membuat folder terlebih dahulu di drive manapun di komputer anda kemudian beri nama dengan latihan_html seperti gambar berikut ini

    Membuat Folder


    Untuk memulai belajar HTML silahkan buka text Editor vscode  kemudian pilih menu File -> New Text File kemudian ketikan Dokumen HTML dasar berikut ini.

    
<!DOCTYPE html> 
<html> 
    <head> <title>Judul Halaman Web</title> </head> 
    <body> 
        <h1>Header Utama</h1> 
        <p>Ini adalah contoh paragraf.</p> 
    </body>
 </html>

    Pada contoh kode di atas, terdapat tag <html>, <head>, <title>, <body>, <h1>, dan <p>. Setiap tag elemen memiliki fungsinya masing-masing.

    <!DOCTYPE html>: Deklarasi tipe dokumen yang digunakan, yaitu HTML. Deklarasi ini penting karena menunjukkan kepada browser bahwa halaman yang dihasilkan adalah dokumen HTML.

    <html>: Elemen ini menandakan bahwa permulaan dokumen HTML. Semua elemen HTML harus ada di dalam elemen ini.

    <head>: Elemen ini berisi informasi tentang dokumen, seperti judul halaman dan metadata lainnya. Informasi ini tidak akan ditampilkan pada halaman web, tetapi akan digunakan oleh browser dan mesin pencari. Selain itu di Elemen head ini bisa diisi tag Meta, CSS dan Javascript yang akan dipelajari pada pertemuan selanjutnya.

    <title>: Elemen ini menentukan judul halaman yang akan ditampilkan pada tab browser. Isi dalam tag ini sangat penting untuk mesin pencari seperti google search untuk mengenali halaman yang anda buat.

    <body>: Elemen ini berisi konten halaman web yang akan ditampilkan pada browser. Didalam tag elemen ini anda dapat mengisi dengan apapun tag-tag lain yang merupakan halaman utama dan menjadi konten yang akan dilihat oleh pengunjung web anda

    <h1>: Elemen ini merupakan heading atau judul utama halaman anda, dalam sebuah halaman sangat penting untuk hanya menggunakan satu elemen <h1>

    <p>: Elemen ini untuk membuat sebuah paragraf 

    Setiap Elemen HTMl yang di buat selalu di awali dengan tag pembuka seperti <namaelemen> dan diakhiri dengan tag penutup yang di tandai dengan backslash seperti </namaelemen>. Itulah Elemen HTML dasar yang harus dikuasai oleh seorang yang ingin membuat halaman web.

    Dengan Elemen HTML, anda dapat membuat tabel, menampilkan gambar, membuat link, menampilkan video, daftar isi dan lain-lain sehingga halaman web anda menjadi halaman yang menarik bagi pengunjung yang datang ke halaman web anda.

    Menyimpan File HTML 

    Setelah selesai membuat halaman web menggunakan HTML, Anda akan perlu menyimpan file tersebut untuk dapat diakses melalui browser. Ada beberapa cara untuk menyimpan file, tergantung pada alat yang digunakan untuk membuat halaman web.

    Berikut adalah beberapa cara untuk menyimpan file HTML:

    Menyimpan dari editor HTML

    Jika Anda menggunakan editor HTML seperti VSCode atau Sublime Text, Anda dapat menyimpan file dengan cara klik "File" dan pilih "Save As". Beri nama pada file tersebut, pastikan untuk menyimpannya dengan ekstensi .html atau .htm. Pastikan juga untuk menyimpan file tersebut di    folder yang tepat di dalam proyek Anda.

    Menyimpan dari browser

    Jika Anda sudah memiliki halaman web yang ingin Anda simpan, Anda dapat menyimpannya langsung dari browser. Caranya adalah dengan membuka halaman web tersebut di browser, klik "File" dan pilih "Save Page As" atau tekan Ctrl+S pada keyboard. Beri nama pada file tersebut, pastikan untuk menyimpannya dengan ekstensi .html. Pastikan juga untuk menyimpan file tersebut di folder yang sesuai di dalam proyek Anda.

    Menggunakan FTP

    Anda dapat menggunakan FTP (File Transfer Protocol) untuk mengunggah halaman web Anda ke server, Anda dapat menyimpan file HTML di dalam folder yang tepat pada server. Caranya adalah dengan mengakses server melalui FTP client seperti FileZilla atau Cyberduck, lalu cari folder yang sesuai dengan proyek Anda dan unggah file yang telah Anda simpan pada folder tersebut.

    Menggunakan platform web builder

    Selain itu Anda bisa menggunakan platform web builder seperti Wix atau WordPress, Anda dapat menyimpan file HTML dengan mengunduh file tersebut dari dashboard atau panel kontrol. Cari opsi "Export" atau "Download" pada platform yang digunakan, dan pilih format file yang anda butuhkan.

    Dari cara menyimpan file HTML yang saya sebutkan di atas, pada tutorial html kali ini anda hanya menggunakan cara pertama, sedangkan cara cara yang lain akan di jelaskan pada pertemuan lainnya.

    Halaman pertama HTML

    dalam penyimpanan nama file html, sebaiknya hindari hal hal berikut ini :

    Jangan menggunakan Spasi

    Jika nama file lebih dari satu kata jangan menggunakan spasi seperti "file saya.html", tapi gunakanlah tanda strip (-) seperti "file-saya.html" atau bisa juga menggunakan underscore (_) seperti "file_saya.html"

    Jangan gunakan symbol 

    Dalam penamaan file jangan menggunakan symbol atau karakter karakter yang sulit di baca misal "file*$$.html" dan lain sebagainya.

    Belajar Lebih Lanjut 

    Setelah memahami dasar HTML, pemula dapat melanjutkan dengan mempelajari CSS (Cascading Style Sheets) untuk mengatur tampilan halaman web, atau JavaScript untuk menambahkan interaksi dan animasi pada halaman web. Anda dapat mengunjunginya di link berikut

    Baca Juga :

    Dalam mempelajari HTML, penting untuk mencoba-coba dan berlatih membuat halaman web sederhana. Dengan berlatih dan mempelajari lebih lanjut, pemula akan semakin memahami dasar HTML dan dapat mengembangkan kemampuan mereka dalam membuat halaman web yang lebih kompleks dan interaktif.

    Belajar HTML di Android

    Pada Penjelasan di atas merupakan Tutorial Belajar HTML untuk pemula yang dikerjakan pada perangkat Laptop atau komputer. Lalu bagaimana bagi anda yang tidak mempunyai Laptop atau komputer ?, jangan khawatir anda tetap dapat Belajar HTML pada perangkat Android.

    Membuat HTML di Android sebenarnya cukup mudah. Ada beberapa aplikasi yang tersedia di Google Play Store yang dapat membantu Anda membuat, mengedit, dan mengelola file HTML langsung dari perangkat Android Anda. Dalam artikel ini, kita akan membahas beberapa aplikasi dan cara untuk membuat HTML di Android.

    Aplikasi HTML Editor

    Adalah salah satu aplikasi yang sangat populer untuk membuat HTML di Android. Aplikasi ini menyediakan antarmuka pengguna yang mudah digunakan dan fitur-fitur canggih seperti syntax highlighting, auto-indentation, auto-complete, dan banyak lagi. Selain itu, aplikasi ini juga menyediakan banyak template dan snippet yang dapat digunakan untuk mempercepat proses pembuatan Dokumen HTML.

    Aplikasi DroidEdit

    DroidEdit adalah aplikasi editor teks yang serbaguna dan dapat digunakan untuk membuat HTML di Android. Aplikasi ini menyediakan fitur-fitur seperti syntax highlighting, auto-indentation, dan dukungan untuk banyak bahasa pemrograman termasuk HTML, CSS, JavaScript, dan lain-lain. Aplikasi ini juga menyediakan integrasi dengan Dropbox dan Google Drive untuk menyimpan dan berbagi file.

    Aplikasi WebMaster's HTML Editor Lite

    Adalah aplikasi yang dirancang khusus untuk membuat HTML di Android. Aplikasi ini menyediakan fitur-fitur seperti syntax highlighting, auto-indentation, auto-complete, dan dukungan untuk banyak bahasa pemrograman termasuk HTML, CSS, JavaScript, dll. Selain itu, aplikasi ini menyediakan template dan snippet yang dapat digunakan untuk mempercepat proses pembuatan Dokumen  HTML.

    Aplikasi Quoda Code Editor

    Quoda Code Editor adalah aplikasi editor teks serbaguna yang dapat digunakan untuk membuat HTML di Android. Aplikasi ini menyediakan fitur-fitur seperti syntax highlighting, auto-indentation, dan dukungan untuk banyak bahasa pemrograman termasuk HTML, CSS, JavaScript, dll. Selain itu, aplikasi ini juga menyediakan integrasi dengan Dropbox dan Google Drive untuk menyimpan dan berbagi file.

    Untuk membuat HTML di Android, Anda dapat mengikuti langkah-langkah berikut:
    1. Unduh dan instal salah satu aplikasi yang disebutkan di atas dari Google Play Store.
    2. Buka aplikasi dan mulai membuat kode HTML.
    3. Gunakan fitur-fitur seperti syntax highlighting dan auto-indentation untuk membuat kode lebih mudah dibaca dan dipahami.
    4. Gunakan template dan snippet yang disediakan oleh aplikasi untuk mempercepat proses pembuatan Dokumen HTML.
    5. Simpan file Anda di perangkat Android Anda atau di cloud storage seperti Dropbox atau Google Drive.

    Dalam membuat HTML di Android, pastikan Anda memahami dasar HTML terlebih dahulu agar dapat membuat kode HTML yang berkualitas dan efisien. Selamat mencoba!

    Demikianlah panduan dasar Belajar HTML untuk pemula bahasa Indonesia. Semoga artikel ini bermanfaat bagi pemula yang ingin memulai belajar HTML.

    Facebook Twitter