Senin, 15 Agustus 2016

Membuat Order List/Number List

Praktek 1.7 Membuat Order List/Number List

Untuk membuat order list/number list ketikkan seperti contoh di bawah:


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

Screenshotnya seperti di bawah ini:

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

Lalu simpan di folder Praktek1. Pada File name: ketik PRAKTEK7.html . Ekstensi .html digunakan agar dapat ditampilkan di browser. Klik Save.

Setelah disimpan, double klik untuk membuka file PRAKTEK7.html dari folder Praktek1.

Akan muncul browser dengan tampilan seperti di bawah ini.

Tag <OL><LI>...</OL> akan menampilkan Order List/Number List (list dengan huruf, angka, atau huruf romawi).
Sekian dan terima kasih. Semoga bermanfaat bagi pembaca.
Diposting oleh di Tidak ada komentar:

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.
Diposting oleh di Tidak ada komentar:

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.
Diposting oleh di Tidak ada komentar:

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.

Diposting oleh di Tidak ada komentar:

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.

Diposting oleh di Tidak ada komentar:

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.
Diposting oleh di Tidak ada komentar:

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.

Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)