Memilih Text Editor Serta Struktur dasar HTML

 

belajar html dasar memilih text editor html

Part 2 : Memilih Text Editor Serta Struktur dasar HTML

Untuk membuat sesuatu, apapun itu tentunya kita harus mempersiapkan alat dan bahan untuk sarananya. Nah begitu juga ketika kita Belajar Pemrograman tentunya kita harus tau alat dan bahan apa yang harus digunakan.  Lalu apa saja alat dan bahan yang di perlukan untuk belajar pemrograman khususnya membuat website statis berbasis HTML.. ?

Ada dua alat yang harus disiapkan ..

Text Editor & webbrowser
Nah kita akan ulas satu persatu secara perlahan lur..

  1. Text Editor Untuk menulis code HTML

Text Editor adalah salah satu aplikasi yang digunakan dalam penulisan syntax atau kode program. Tentu saja dalam hal ini sangat bisa digunakan untuk penulisan kode program HTML. Banyak sekali text editor yang ada seperti notepad yg sudah tertanam pada sistem operasi windows, atau nano pada Mac.

Yang perlu diperhatikan adalah Text Editor itu berbda denga Word Processor seperti ( Microsoft Word, King Soft, WordPerfect). Ini disebabkan karena text editor tidak bisa digunakan untuk mengatur format document serta tidak ada fitur desktop publishing. Nah sekarang kita akan Belajar HTML memilih Text Editor yang cocok dengan diri kita..

 

Berikut ini Beberapa Text editor yang penulis sarankan lur…

1. Notepad ++
Text editor ini khusus digunakan untuk windows dan free lisensi (tidak dipungut biaya). Editor ini memiliki ciri khas tersendiri dan banyak tambahan fitur-fitur yang bisa diinstall di text editor ini. jika ingin menggunakan text editor notepad++ bisa download disini kas..

 

                belajar html dasar memilih text editor html cahsemarang.com    belajar html dasar memilih text editor html cahsemarang.com

2. Sublime Text
Ini dia Text editor yang paling populer digunakan oleh programmer termasuk saya kas, editor ini memiliki tampilan yang elegan yang khas dengan warna kecoklatannya.  Editor ini bisa jalan di banyak sistem operasi seperti windows, Mac, dan Linux. Buat kamu yang ingin menggunakan sublime Text silahkan download saja disini

             belajar html dasar memilih text editor html cahsemarang.com    belajar html dasar memilih text editor html cahsemarang.com

3. Atom
Text editor ini mirip dengan sublime Text namun memakan resource yang banyak jadi agak terasa berat jika dibandingkan dengan sublime text namun ini tidak begitu terasa sih khas. Editor ini bisa digunakan oleh platform Mac, Windows, dan Linux.  yang mau dan pengen menggunakan text editor ini silahkan download saja disini.

belajar html dasar memilih text editor html cahsemarang.com    belajar html dasar memilih text editor html cahsemarang.com

4. Netbeen
Ini juga salah satu yg saya suka kas. Banyak juga programmer yang memakai ini. Text editor ini juga memakan resource yang banyak, jadi agak berat juga, terasa banget klo laptop kamu laptop kentang. Keunggulan editor ini ada pada kemudahan dan tampilan kode program yang ditulis lebih rapi. Yang ingin menggunakan silahkan download disni

netbeans belajar html dasar memilih text editor html cahsemarang.com

 

5. Visual Studio Code
Text editor buatan Microsoft ini favorit programmer juga.. kelebihannya banyak sekali salah satu nya sudah terintegrasi dengan GIT, jadi kamu lebih mudah dalam menyelesaikan conflict atau mengetahui mana baris yang berubah atau ditambahkan.Jadi akan lebih memudahkan dalam kerja tim. baik yang mau pake silahkan download disini ..

belajar html dasar memilih text editor html cahsemarang.com   belajar html dasar memilih text editor html cahsemarang.com

 

2. Webbrowser

File HTML memiliki file ekstensi berupa dot html (.html) yang dapat dijalankan atau di running pada semua web browser seperti : Google Chrome, Mozzila Firefox, Opera, Safari, dan teman- temannya.

browsers  belajar html dasar memilih text editor html cahsemarang.com

Saya sarankan gunakan web browser yang terbaru, karena kita juga akan menggunakan HTML versi yang terbaru.  Mungkin cukup dengan Firefox atau Google Chrome.

 

Struktur Dasar HTML

HTML Mempunyai Struktur dasar penulisan syntax seperti gambar dibawah ini

belajar html dasar memilih text editor html cahsemarang.com

Penulisan kode HTML selalu dimulai dengan deklarasi DOCTYPE, lalau menuliskan tag <html> dan di dalamnya terdapat tag <head> dan <body>.

Jelas disini struktur dasar kode HTML terdiri dari tiga bagian Yaitu:

  1. Bagian Deklarasi

Pada kode pada baris pertama <!DOCTYPE html> adalah tag deklarasi untuk menyatakan tipe dokumen dan versinya. Pada baris itu menyatakan dokumen bertipe HTML dangan versinya adalah HTML 5.

untuk HTML versi 4 penulisanya <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

lalu pada baris ke 2 terdapat tag deklarasi <html lang=”en”> Tag <html> wajib ada di setiap dokumen HTML..

lalu ada atribut lang=”en” ini menyatakan kalau konten dokumen HTML menggunakan bahasa inggris.

setelah itu di dalam tag <html> ada dua tag penting lagi yaitu: tag <head> dan tag <body>.

dan yang terakhir tag HTML ditutup dengan </html>.

 

  1. Bagian HEAD

tag head adalah bagian kepala HTML diawali tag <head> ditutup dengan </head> pada bagian HEAD, digunakan untuk menuliskan tag-tag yang akan dibaca oleh mesin.

Contohnya :

Tag meta untuk SEO;
Tag <title> untuk judul;
Tempat menulis kode CSS dan Javascript;
dan lain-lain.

  1. Bagian BODY

Body adalah tampilan dari web yang kita buat penulisanya diwalai dari tag<body> ditutup dengan </body>. Dimana semua konten akan dituliskan pada bagian ini .

Kesimpulannya adalah text editor sangat memudahkan sebagai alat untuk membuat web. Untuk pemilihan text editor mana yang akan kita pilih.. mungkin saya akan menyarankan untuk sublime text, netbean atau visual studio code.. namun saya sendiri sering memakai sublime text dalam pembuatan program berbasis website.

Untuk struktur dasar HTML ada banyak tag – tag HTML.

Lalu apa sebenarnya tag HTML itu ..?

Nah kita akan bahas tag HTML ini dalam Tutorial Berikutnya …

Sampai sini dulu tutorial kali ini selanjutnya kita akan bahas tutorial

 

Part 3 tentang penggunaan tag, element, attribute HTML

 

TUTORIAL HTML DASAR DAN PEMULA LAINNYA

Belajar HTML Part 1 #1. Pengenalan HTML
Belajar HTML Part 2 #2. Text editor & struktur dasar HTML

Leave a Reply

Your email address will not be published. Required fields are marked *