Gudang Ku

Senin, 15 Agustus 2016

Membuat Unordered List/Bulleted List

Praktek 1.6 Membuat Unordered List/Bulleted List

Untuk membuat unordered list/bulleted list ketikkan seperti contoh di bawah pada Text Editor:

<html>
<head>
<title>List Dalam HTML</title>
</head>
<body>
HTML mendukung penggunaan List:
<UL>
<LI>Order List/Number List
<LI>Unordered List/Bulleted List
<LI>Menu List
<LI>Directory List
<LI>Definition List
</UL>
</body>
</html>

Berikut ini Screenshotnya:

Setelah itu simpan file dengan cara klik menu File, lalu klik Save As.

Simpan file di folder Praktek1. Ketikkan pada File name: PRAKTEK6.html. Ekstensi .html digunakan untuk dapat ditampilkan di browser. Lalu klik Save.

Setelah tersimpan, buka folder Praktek1. Dan double klik pada file PRAKTEK6.html.

Kemudian akan muncul browser dan isinya seperti di bawah ini. Akan muncul Unordered List/Bulleted List.

Tag <UL><LI>...</UL> berfungi menampilan unordered list/bulleted list (list simbol).

Sekian dan terima kasih. Semoga bermanfaat bagi pembaca.

Membuat Tulisan di Tengah

Praktek 1.5 Membuat Tulisan di Tengah

Untuk membuat tulisan di tengah ketikkan tag seperti contoh di bawah:

<html>

<head>

<title>Letak Heading</title>

</head>

<body>

<h1 align = "center">Judul di Tengah</h1>

<p>Membuat judul terletak di tengah</p>

</body>

</html>

Di bawah ini Screenshotnya:

Setelah diketik lalu simpan dengan cara klik File. Lalu klik Save As.

Simpan di folder Praktek1, pada File name: isikan PRAKTEK5.html. Ekstensi .html digunakan untuk setelah disimpan dapat dibuka dan ditampilkan di browser. Lalu klik Save untuk menyimpan.

Untuk membuka file yang telah kita buat tadi double klik PRAKTEK5.html yang terdapat pada folder Praktek1.

Maka akan muncul browser dengan tampilan seperti di bawah.

Tag <h1 align = "center">Judul di Tengah</h1> digunakan untuk menampilkan Heading 1 (huruf besar) berada di tengah (center).

Sekian dan terima kasih. Semoga bermanfaat bagi pembaca.

Membuat Break Line (Baris Baru) atau Enter

Praktek 1.4 Membuat Break Line (Baris Baru) atau Enter

Untuk membuat break line (baris baru) atau enter, kita ketikkan tag seperti contoh di bawah ini:

<html>
<title>Praktek 4</title>
<body>
Selamat Datang<br> Di Kampus Bina Darma</br> Palembang
</body>
</html>

Di bawah ini screenshotnya:

Setelah diketik, simpan dengan cara klik File, lalu klik Save As.

Akan muncul tampilan seperti di bawah ini. Simpan di folder Praktek1 dengan nama PRAKTEK4.html. Menggunakan ekstensi .html agar dapat dibuka di browser. Klik Save untuk menyimpan.

Double klik pada file PRAKTEK4.html yang ada pada folder Praktek1 untuk membuka file HTML tersebut.

Akan muncul browser dengan isi seperti tampilan seperti di bawah.

Tag yang digunakan <br>...</br> sehingga tampilannya membuat baris baru atau enter untuk kalimat berikutnya.

Sekian dan terima kasih. Semoga bermanfaat bagi pembaca.

Membuat Paragraf

Praktek 1.3 Membuat Paragraf

Untuk membuat paragraf kita ketikkan tag seperti contoh di bawah ini:

<html>

<title>

Praktek 3

</title>

<body>

<p>Hyper Text Markup Language atau HTML adalah bahasa yang digunakan untuk menampilkan web. </p>

<p>Dibuat oleh W3C (World Wide Web Consortium), dan digunakan sebagai bahasa standar untuk menampilkan halaman web.</p>

</body>

</html>

Screenshotnya seperti di bawah ini:

Setelah itu simpan file dengan cara klik File, lalu klik Save As.

Simpan di folder Praktek1. Pada File name: ketikkan PRAKTEK3.html menggunakan ekstensi .html agar dapat tampil di browser. Klik Save.

Setelah itu double klik file PRAKTEK3.html yang telah kita simpan tadi di folder praktek1.

Akan muncul browser dengan isinya seperti di bawah

Hasilnya akan seperti kalimat paragraf yang terpisah. Karena menggunakan tag <p>...</p> yang dimaksudkan untuk membuat paragraf.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Membuat Heading

Praktek 1.2 Membuat Heading

Untuk membuat heading, kita ketikkan tag seperti di bawah ini:
<html>
<title>
Praktek 2
</title>
<body>
<h1>Isi Praktek 2</h1>
<h2>Isi Praktek 2</h2>
<h3>Isi Praktek 2</h3>
<h4>Isi Praktek 2</h4>
<h5>Isi Praktek 2</h5>
<h6>Isi Praktek 2</h6>
</body>
</html>

Berikut screenshotnya:

Setelah diketik seperti di atas lalu simpan dengan cara klik File, lalu klik Save As.

Kemudian ketikkan PRAKTEK2.html. Disimpan dengan ekstensi .html agar dapat dibuka dengan menggunakan browser. Setelah itu klik Save.

Lalu double klik file PRAKTEK2.html yang telah kita buat tadi di dalam folder Praktek1.

Kemudian akan muncul browser dengan tampilan seperti di bawah ini:

Tampilan di atas muncul karena tag yang digunakan:

<h1>Isi Praktek 2</h1>

<h2>Isi Praktek 2</h2>

<h3>Isi Praktek 2</h3>

<h4>Isi Praktek 2</h4>

<h5>Isi Praktek 2</h5>

<h6>Isi Praktek 2</h6>

yang mana heading dimulai dengan angka 1 lalu sampai 6.Semakin besar angkanya, tampilan tulisannya semakin kecil.

Sekian dan terima kasih. Semoga bermanfaat bagi pembaca.

Menggunakan Aplikasi Text Editor

Praktek 1.1 Membuat Web HTML Sederhana

Menggunakan Aplikasi Text Editor

Untuk membuat web HTML sederhana dibutuhkan aplikasi Text Editor. Contohnya seperti Sublime Text Bulid atau juga bisa menggunakan aplikasi Notepad++. Di bawah ini ada link untuk mendownload aplikasi tersebut:

Sublime Text Build 3

Notepad++

Setelah didownload install salah satu aplikasi text editor yang dikehendaki seperti biasa. Di sini penulis menggunakan aplikasi Sublime Text Build. Di bawah ini merupakan tampilan awal Sublime Text Build setelah dibuka.

1. Membuat file HTML Sederhana

Setelah aplikasi Text Editor dibuka lalu ketikkan:

<html>

<title>

Praktek 1

</title>

<body>

Isi Praktek 1

</body>

</html>

Screenshotnya seperti berikut:

Setelah itu klik File, klik Save As..

Simpan di Local Disk (D:) atau di drive manapun. Buat Folder Praktek1. Ketikkan "PRAKTEK1.html" pada File name: , lalu klik Save. File disimpan menggunakan ekstensi .html agar hasil ketikkan tadi dapat tampil lewat browser.

Setelah itu buka Local Disk (D:) kemudian buka Folder Praktek1. Double klik pada PRAKTEK1.html

Setelah itu akan muncul browser dan isinya seperti di bawah ini.

Judul webnya akan bernama Praktek 1 dikarenakan pada penulisan tag menggunakan tag <title>Praktek 1</title>. Dan Isi Praktek 1 dari tag <body>Isi Praktek 1</body>.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Selasa, 26 April 2016

PEMROGRAMAN WEB HTML

PRAKTIKUM 1

PENGENALAN HTML

HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.

Disini saya akan memposting bagaimana cara membuat web sederhana menggunakan aplikasi text editor sublime text, bisa menggunakan aplikasi text editor yang lain yaitu aplikasi notepad ++ atau dreamweaver.

Berikut adalah contoh HTML Editor :

disini kita akan belajar membuat web sederhana menggunakan Aplikasi Text Editor yaitu aplikasi notepad++ atau Sublime Text, aplikasi tersebut dapat di download secara gratis di Website Site Resminya.

saya akan menyediakan link download aplikasi tersebut.

Notepad++
Sublime Text

sesudah anda menginstall aplikasi terserbut, selanjutnya buka aplikasinya, di sini saya memakai aplikasi Sublime Text. dan ikutilah penulisan tag html di bawah ini :

Praktek 1 : Membuat File Html Sederhana Menggunakan Tag Title dan Body

Praktek 1 : Membuat File Html Sederhana Menggunakan Tag Title dan Body