Tutorial Teknik Informatika: Pemrograman Web | Tutorial pemrograman Komputer

Mudah nya Belajar Pemrograman Web seperti Membalikan Telapak Tangan.–PART 4 (Editor HTML)

Editor untuk HTML

Menulis HTML menggunakan Notepad atau TextEdit

HTML dapat di edit dengan menggunakan editor HTML profesional seperti
· Microsoft WebMatrix
· Sublime Text
· Notepad++
· Atom
· Dream Weaver
Namun untuk memahami HTML, kita merekomendasi text editor seperti Notepad++(Windows) atau TextEdit (MAC).
Kami percaya dengan menggunakan text editor yang simple merupakan cara baik untuk mempelajari HTMl.
Ikuti 4 tahap dibawah ini untuk membuat halaman web mu yang pertama dengan notepad++.

Langkah 1: Buka Notepad++

To open Notepad in Windows 7 or earlier:
Untuk membuka notepad++ di windows 7 dan seterusnya :
Buka web site https://notepad-plus-plus.org/download maka akan ditampilakakn halaman download Notepad++ versi yang paling baru.
Dihalaman tersebut terdapat berbagai jenis installer. Klik “Notepad++ Installer”

Setelah didownload, maka klik dua kali hasil download tadi dan ikuti proses instalasi yang ada. Cukup mudah untuk dilakukan.
Jika proses instalasi telah berhasil dilakukan maka buka aplikasi notepad++.
Namun jika anda tidak menginginkan notepad++ namun lebih ingin menggunakan notepaf yang telah terinstalasi langsung di windows 7. Caranya Klik Start (bagian bawah kiri di screen). Klik All Programs. Klik Accessories. Click Notepad
Jika menggunakan Windows 8 dan versi selanjutnya maka ikuti langkah berikut : Buka StartScreen (Simbol window yang berada di kiri bawah pada layar). Ketik Notepad. Lalu enter.

Langkah 2: Tulis Beberapa Kode HTML

Tulis atau kopi beberapa kode HTML kedalam notepad++ atau notepad biasa.

Langkah 3: Menyimpan Halaman HTML

Simpan file di komputer mu dengan Pilih Select > Save as di Notepad menu. Lakukan hal yang sama pada notepad++.
Beri nama file “index.html”(dengan tanda petik) atau dengan nama lain yang berkahiran html atau htm.
UTF-8 adalah encoding yang cocok dengan file HTML.
Karena ANSI hanya mengliputi encoding karakter US dan eropa barat.

Kau bisa menggunakan ekstensi .html atau .htm.
Tidak ada perbedanan di keduanya. Jadi terserah kamu mau piliih yang mana.

Step 4: Melihat Halaman HTML di Web Browsermu

Buka file HTML yang telah disimpan tadi dengan browser favoritmu. Hasilnya akan tampil seperti ini :

Untuk membuka file di browser, klik dua kali file tersebut atau klik kanan dan pilih
Open with

Mudah nya Belajar Pemrograman Web seperti Membalikan Telapak Tangan. Part 1

Pengenalan HTML

HTML adalah bahasa pemrogrman markup yang mendeskrisikan sebuah halaman web.

l HTML merupakan singkatan dari Hyper Text Markup Languange

l Bahasa pemrogrman markup merupakan sekumpulan dari markup tag

l Dokumen HTML dideskripsikan dengan tag HTML

l Setiap tag html menjelaskan konten dokumen yang berbeda-beda

HTML Example

<!DOCTYPE html>

<html>

<head>

<title>Judul Halaman</title>

</head>

<body>

<h1>Header pertama</h1>

<p>Paragraf pertama.</p>

</body>

</html>

Penjelasan dari contoh

· Deklarasi DOCTYPE yang ada di paling atas menjelaskan bahwa dokumen yang ditulis merupakan bertipe HTML

· Text yang ada di antara tag <html> dan </html> menjelaskan dokumen HTML tersebut

· Text yang ada di antara tag <head> dan </head> memberikan informasi mengenai dokumen tersebut

· Text yang ada diantara tag <title> dan </title> memberikan informasi mengenai judul dai dokumen tersebut. Title ini akan muncul seperti di bawah ini

· Text yang ada di antara tag <body> dan </body> menjelaskan konten halaman yang terlihat di browser

· Text yang ada di antara tag <h1> dan </h1> mendiskripsikan sebuah heading

· Text yang ada di antara tag <h1> dan </h1> mendiskrisikan sebuah paragraph

Dengan menggunakan deskripsi diatas, web broswer dapat menampilkan dokumen dengan sebuah heading dan sebuah paragraf.

HTML Tags

HTML tags are keywords (tag names) surrounded by angle brackets:

HTML tag merupakan kata kunci (nama tag) yang di apit oleh dua buah kurung “<” dan “>” (tanpa tanda petik)

<tagname>Konten</tagname>

· BIasanya tag HTML muncul berpasangan seperti <p> dan </p>

· Tag pertama yang ada di pasangan tag tersebut disebut dengan tag awal (atau start tag dalam bahasa inggris) , dan tag kedua disebut dengan tag akhir (atau disebut juga dengan end tag dalam bahasa inggris )

· Tag akhir ditulis sama persis sperti dengan tag awal namun ditambahi slash “/” (tanpa tanda petik) sebelum nama tag tersebut

Tag awal atau start tag terkadang disebut juga dengan tag pembuka atau opening tag. Tag Akhir atau end tag disebut juuga dengan tag penutup atay closing tag.

Web Browsers

Tujuan utama dati web browser (seperti chrome, IE, Firefox, Safari) untuk membaca halaman HTML dan menampilkannya.

Browser tidak menampilkan tag HTML namun menggunakan tag-tag tersebut untuk menentukan bagaimana menampilkan dokumen tersebut :

Struktur Halaman HTML

Dibawah ini menggambarkan struktur dari halaman HTML :

Hanya bagian <body> yang ada di area box hijau akan ditampilkan di web browser.

Deklarasi <!DOCTYPE>

Deklasi <!DOCTYPE> membantu browser untuk mendisplay halaman web secara benar.

Ada berbagai tipe dokumen web.

Untuk menampilkan dokumen dengan benar, Browser harus mengetahui tipe dan versi dokumen tersebut.

The doctype declaration is not case sensitive. All cases are acceptable:

Deklarasi doctype tidak bersifat case sensitive. Artinya semua cara penulisan dibawah ini benar :

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

Deklasri yang Umum Digunakan

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Semua materi yang ada di elerarning semuanya menggunakan HTML5

Tutorial Teknik Informatika