Cara menggunakan html5 editor

Editor teks yang sederhana adalah segala hal yang paling dibutuhkan untuk mempelajari dan menulis kode HTML.

Table of Contents Show

Belajar HTML Menggunakan Notepad atau TextEdit
Langkah 1: Buka Notepad (PC)
Langkah 1: Buka TextEdit (Mac)
Langkah 2: Tulis kode HTML
Langkah 3: Simpan Halaman HTML
Langkah 4: Lihat Halaman HTML di Browser Anda
Bagaimana cara menggunakan HTML?
Jenis editor apa yang digunakan untuk mengedit kode HTML?
Tag HTML dimulai dengan kode apa?
Sebutkan editor HTML apa saja yang dapat kamu gunakan?

Section Artikel

1 Belajar HTML Menggunakan Notepad atau TextEdit
2 Langkah 1: Buka Notepad (PC)
3 Langkah 1: Buka TextEdit (Mac)
4 Langkah 2: Tulis kode HTML
5 Langkah 3: Simpan Halaman HTML
6 Langkah 4: Lihat Halaman HTML di Browser Anda

Belajar HTML Menggunakan Notepad atau TextEdit

Halaman web dapat dibuat dan dimodifikasi dengan menggunakan editor HTML profesional.

Namun, untuk mempelajari HTML, kami merekomendasikan editor teks yang paling sederhana seperti Notepad (PC) atau TextEdit (Mac).

Penggunaan editor yang sederhana dipercayai bahwa itu adalah cara yang baik untuk mulai mempelajari HTML.

Ikuti langkah-langkah di bawah ini untuk membuat halaman web pertama dengan Notepad atau TextEdit.

Langkah 1: Buka Notepad (PC)

Pada Windows 8 atau versi lebih baru:

Pilih start menu (simbol jendela di kiri bawah layar Anda). Ketik Notepad.

Windows 7 atau versi lebih lama:

Buka Start > Programs > Accessories > Notepad

Langkah 1: Buka TextEdit (Mac)

Pilih Finder > Applications > TextEdit.

Ubah juga beberapa preferensi agar aplikasi dapat menyimpan file dengan benar. Caranya buka Preferences > Format > lalu pilih “Plain Text”.

Lalu dibawah “Open and save” centang kotak yang bertuliskan “Display HTML files as HTML code instead of formatted text”.

Kemudian buka dokumen baru untuk memulai menuliskan kode.

Langkah 2: Tulis kode HTML

Tulis atau salin kode HTML berikut ke dalam Notepad:

<!DOCTYPE html>
<html>
<body>

<h2>Heading pertamaku</h2>

<p>Paragraf pertamaku.</p>

</body>
</html>

Langkah 3: Simpan Halaman HTML

Simpan file pada komputer Anda. Pilih File> Save as di menu Notepad.

Beri nama file “index.htm” dan setel encoding ke UTF-8 (yang merupakan pengkodean pilihan untuk file HTML).

Tips: Anda dapat menyimpan file dalam bentuk .htm atau .html sebagai ekstensi file. Tidak ada bedanya, tergantung keinginan anda.

Langkah 4: Lihat Halaman HTML di Browser Anda

Buka file HTML yang telah disimpan pada browser pilihan anda (klik dua kali pada file tersebut, atau klik kanan – dan pilih “Open with”).

Hasil yang akan ditampilkan akan seperti ini:

Tutorial Hari Ini

Pengantar Pemrograman Web-HTML
Persiapan Penulisan HTML
Memahami Struktur Penulisan HTML
Latihan Penggunaan TAG HTML
Pembahasan Materi Selanjutnya

Penutup

Pengantar Pemrograman Web-HTML

Hai sahabat semua, apa khabar ? semoga sehat selalu. Pada tutorial hari ini belajar tentang dasar-dasar pemrograman web berbasis HTML. Sahabat semua, diluar sana sudah banyak sekali yang membahas tentang pemrograman web dari dasar sampai studi kasus begitupun dilingkungan kampus akan selalu diberikan materi dengan judul "Pemrogaman Web Dasar 1". Dari pengalaman penulis dilingkungan kampus masih banyak adik-adik mahasiswa baru yang masih kesulitan memahami apa yang diberikan sehingga membutuhkan banyak catatan atau referensi dari berbagai sumber yang ada, salah satunya mungkin dari tutorial ini.

Perlukah belajar HTML? jawabannya perlu, karena HTML merupakan bahasa yang digunakan untuk membangun antarmuka halaman web, serta dapat digabungkan dengan bahasa pemrograman yang lain dapat berfungsi sebagai logika dan mengelola data. Oleh sebab itu pengetahuan tentang HTML sangat penting dalam pembangunan aplikasi web. Hampir semua bahasa pemrograman berbasis web menerapkan code dasarnya adalah HTML, ketika mau belajar PHP Native, framework yang saat ini banyak digunakan, seperti CodeIgniter, Laravel dll. Untuk itu, bahasa HTML wajib dikuasai terlebih dahulu.

Apa HTML itu?

» HTML, merupakan singkatan dari Hyper Text Markup Language

» HTML, merupakan bahasa markup(penanda) standar untuk membuat halaman Web

» HTML, menggambarkan struktur dari halaman Web

» HTML terdiri dari serangkaian elemen-elemen

» Elemen HTML akan ditampilkan lewat browser, menampilkan konten-konten, seperti:

"Judul halaman", "sebuah paragraf", "tautan ke url.video", "gambar-gambar", dll.

HTML5 memiliki beberapa TAG baru untuk memperkaya struktur halaman, seperti <article>, <nav>, <aside> dan <header>, selain TAG untuk struktur halaman juga memilki TAG baru multimedia, antara lain <audio>, <video> dan <canvas>.

Sejarah Singkat Hyper Text Markup Language

Tahun 1991, HTML dibuat oleh Tim Berners-Lee pembuatan ini belum resmi diumumkan.

Tahun 1995, HTML 2.0. versi kedua dirilis oleh IETF.

Pada tahun yang sama tahun 1995, dirilis HTML 3.0 versi ini banyak penambahan fitur baru dan memberikan banyak kemudahan kepada web master, salah satunya seperti untuk mendesain halaman web, tetapi fitur-fitur yang baru ini agak memperlambat web browser.

Tahun 1999, HTML 4.01 dirilis yang mana merupakan versi utama dan versi ini banyak digunakan sehingga versi yang paling sukses sebelum rilis versi 5.0.

Tahun 2014 oleh World Wide Web Consortium (W3C), Rilis versi HTML 5.0. merupakan pengembangan versi (extended version) dari HTML 4.01 sampai sekarang, merupakan standar dari HTML. (sumber: id.wikipedia.org)

Persiapan Penulisan HTML

Untuk membuat aplikasi berbasis web dengan HTML tentunya memerlukan persiapan-persiapan terutama yang berkaitan dengan penulisan HTML. Persiapan dan media yang diperlukan adalah, sbb:

» Komputer PC/Laptop/Netbook

» Sistem Operasi Multiplatform (Windows, Linux, MacOS)

» Text Editor (PSPad, Notepad/Notepad++, Visual Studio Code, Atom, Sublime Text3, dll)

» Browser (Google Chrome, Mozila Firefox, Microsoft Edge, dll)

» Estimasi waktu kira-kira 25 menit

» Tidak kalah penting secangkir kopi... he he he optional saja

» Mulai belajar...

Memahami Struktur Penulisan HTML

Penulisan struktur HTML terdiri atas <TAG> pembuka artinya penanda pembuka, kemudian isi dari halaman atau konten dan diakhiri dengan </TAG> penutup artinya penanda penutup. <TAG> atau penanda merupakan kata kunci didalam halaman web yang menentukan bagaimana web browser memformat dan menampilkan isi atau konten. Aturan penulisan <TAG> pembuka dan </TAG> penutup adalah, sbb:

Sintaks:<TAG>isi atau konten</TAG>

Struktur penulisan dasar dari HTML 4.01 adalah, sbb:

<html>

<head>

<title>Judul Aplikasi Web, ditampilkan di title Browser</title>

</head>

<body>

<h2><b>Judul Aplikasi H1</b></h2>

<h2><b>Sub Judul Aplikasi H2</b></h2>

<> ... </>

<p>paragraf isi sub judul H2</p>

<h3><b>Sub Judul Aplikasi H3</b></h3>

<p>paragraf isi sub judul H3</p>

</body>

</html>

Struktur penulisan dasar dari HTML 5.0 adalah, sbb:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Judul Aplikasi Web, ditampilkan di title Browser</title>
</head>
<body>
<h2><b>Judul Aplikasi H1</b></h2>

<h2><b>Sub Judul Aplikasi H2</b></h2>

<p>paragraf isi sub judul H2</p>

<h3><b>Sub Judul Aplikasi H3</b></h3>

  <p>paragraf isi sub judul H3</p><br>
<div>
<img src="gamabr | foto">
   </div>
<audio controls>
       <source src="nama-video" type="audio/mp3|mp4">
   </audio>
<ul><span>Tema | judul terdiri dari:</span>
<a href="link1"><li><span>Keterangan link1</span></li></a>
<a href="link2"><li><span>Keterangan link2</span></li></a>

<a href="link3"><li><span>Keterangan link3</span></li></a>

</ul>
</body>
<footer>

</footer>
</html>

Keterangan singkat:

» ,  TAG ini untuk memberi komentar/keterangan.

» <!DOCTYPE html>, TAG ini berfungsi memulai mendeklarasikan code HTML & diletakkan

pada baris pertama.

» <html> --- </html>, ini merupakan TAG pembuka dan penutup.

» <Meta charset ="utf-8">, TAG ini berfungsi bila menggunakan karakter khusus

» <head><title></title></head>, setiap TAG akan selalu ditulis berpasangan dan

seterusnya seperti itu, penanda dibuka dan penanda ditutup.

» <a href="link">, TAG ini berfungsi menuju ke alamat lain dapat berupa text, gambar dll.

DOCTYPE(document type declaration), merupakan sebuah keterangan yang wajib ditulis untuk memberitau web browser tentang aturan penulisan dari dokumen yang akan ditampilkan. Doctype dideklarasikan pada baris pertama halaman HTML.

Charset UTF-8 merupakan meta TAG yang paling sering digunakan dalam HTML5, aturan penulisannya adalah sebagai berikut <meta charset="UTF-8">.

Meta TAG merupakan sebuah instruksi kepada web browser untuk menerjemahkan karakter-karakter khusus seperti penggunaan (ASCII dan ANSI) pada halaman HTML, hampir setiap halaman HTML5 menggunakan meta TAG ini. Perintah dari charset="UTF-8" berfungsi untuk menerjemahkan bit-bit di dalam halaman HTML5 menjadikan sebuah karakter.

Latihan Penggunaan TAG HTML5

Pada latihan dasar-dasar penggunaan TAG HTML5 disini menggunakan text editor PSPad yang sederhana tapi lengkap dengan browsernya. PSPad dapat didownload disini .

Untuk memperjelas pemahaman penjelasan singakat sebelumnya, mari mulai dengan praktikum dengan langkah kerjanya, sbb:

Langkah-1: aktifkan text editor yang digunakan, dalam kasus in menggunakan PSPad editor.

Keterangan:

Setelah text editor PSPad diaktifkan klik combo box kemudian akan ditampilkan beberapa pilihan Bahasa pemrograman.
Pada kasus ini pilih yang HTML.
Setelah scriptnya di ketik jalankan / RUN dengan memilih salah satu HTML Page Preview atau HTML Preview Web Server.

Langkah-2: ketikkan atau lengkap strktur script HTML berikut ini

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Latihan1</title>

</head>

<body>

<H1><b>Selamat Belajar Pemrograman WEB Pagi Pemula</b></h2>

<h2><u>Dengan Bahasa HTML5 Yang Powerfull</u></h2>

<h3><i>Di Blog www.geriatama.com</i></h3>

<h4>Semangat...!</h4>

<br>

<h5><b>Catatan:</b><br>

>>letak folder pada kasus ini di C:/laragon/www/html.<br>

>>folder dapat dibuat atau diletakkan dimana saja (bebas)</h5>

</body>

</html>

Langkah-3: setelah disimpan dan jalankan / RUN, hasilnya, sbb:

Sekian pembahasan tutorial belajar HTML5, mengenai pengantar HTML5, sejarah singkat HTML serta memahami TAG (penanda) pada struktur penulisan HTML. Pada latihan kesatu dibahas cara penggunaan header (h2,h2,h3) untuk penataan tulisan, juga penggunaan b(bold/tebalkan), i(italic/miring), u(underline/garis bawah) dan br(line break/baris baru) serta cara penggunaan PSpad editor yang sederhana tapi powerfull.

Sekian dan terima kasih sudah mengikuti terus tutorial diblog ini, semoga bermanfaat.

Salam penulis.🙏

Bagaimana cara menggunakan HTML?

Cara Membuat Halaman Web Sederhana dengan HTML.

Buka editor teks. ... .

Atur jenis dokumen untuk HTML. ... .

Tambahkan tab judul untuk halaman web kamu. ... .

Ketik di bawah tag "Head" yang tertutup. ... .

Selanjutnya membuat judul halaman. ... .

Tambahkan judul tambahan jika kamu mau. ... .

Membuat paragraf. ... .

Mengubah warna teks..

Jenis editor apa yang digunakan untuk mengedit kode HTML?

Berikut ini beberapa aplikasi text editor lainnya yang bisa digunakan untuk belajar penulisan kode HTML..

Notepad++ logo Notepad++ ... .

Atom. gambar Atom. ... .

BracketsText. logo BracketsText. ... .

Sublime Text Editor. logo SublimeText. ... .

Visual Studio Editor. logo Visual Code Studio. ... .

Emacs. logo Emacs. ... .

Netbeans. logo Netbeans. ... .

Aptana Studio..

Tag HTML dimulai dengan kode apa?

Pengertian Tag Tag adalah sebauh penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat dengan kurung siku ( <...> ), lalu di dalamnya berisi nama tag dan kadang juga ditambahkan dengan atribut. Contoh: <p> , <a> , <body> , <head> , dan sebagainya. Tag selalu ditulis berpasangan.

Sebutkan editor HTML apa saja yang dapat kamu gunakan?

Namun, kemampuan tinggi dari belajar coding saja belum cukup. Anda harus menggunakan tool yang tepat agar pekerjaan Anda jadi lebih mudah. Nah, tool tersebut adalah HTML editor..

Notepad++ ... .

2. Atom. ... .

3. Brackets. ... .

4. Sublime Text. ... .

Light Table. ... .

6. Bluefish. ... .

7. Aptana Studio. ... .

8. CoffeeCup..