Selasa, 11 Agustus 2015

Struktur Dasar HTML

HTML adalah bahasa dasar dalam pembuatan tampilan website, lalu bagaimana cara kita memulai html? banyak sekali sumber belajar di Internet tentang HTML, ini hanya salah satu saya dan mudah-mudahan dapat bermanfaat.
Anda dapat memulai HTML dengan membuka Web Editor, atau Text Editor seperti Notepad atau Notepad ++. Struktur dasar HTML dapat dilihat pada baris kode berikut.
    

  1. <html>
    2. 

  2. <head>
    3. 

  3. <title>Judul yang akan ditampilkan pada title bar Browser</title>
    4. 

  4. <!-- disini tempat menyisipkan atau memanggil CSS / Javascript -->
    5. 

  5. </head>
    6. 

  6. <body>
    7. 

  7. <!-- Disinilah tempat untuk mengisi konten web, text, gambar, dan lain-lain -->
    8. 

  8. </body>
    9. 

  9. </html>
    10.
Dari sedikit baris kode di atas dapat anda simpan pada folder anda dan beri nama coba.html. kalau anda ingin menggunakan html 5, anda cukup tambahkan definisi pada baris pertama dengan kode:
    

  1. <!DOCTYPE html>
    2.
Dengan memberikan kode di atas, maka anda sudah dapat menggunakan Tag-tag baru pada HTML 5 seperti video, audio dan lain-lain. Contoh kode lengkapnya menjadi :
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <title>Judul yang akan ditampilkan pada title bar Browser</title>
    5. 

  5. <!-- disini tempat menyisipkan atau memanggil CSS / Javascript -->
    6. 

  6. </head>
    7. 

  7. <body>
    8. 

  8. <!-- Disinilah tempat untuk mengisi konten web, text, gambar, dan lain-lain -->
    9. 

  9. </body>
    10. 

  10. </html>
    11.
Semoga bermanfaat..
Diposting oleh di Tidak ada komentar:

Minggu, 09 Agustus 2015

dasar dasar web programming(3)

4.
Buat file baru lagi, kemudian ketik kode berikut:
1.
<html>
2.
<head>
3.
<title>
Daftar situs favorit JSL
</title>
4.
</head>
5.
<body>
6.
<h2>
Daftar Situs favoritku
</h2>
7.
<ol>
8.
<li><a
target
=
"_blank"
href
=
"http://www.google.com/"
>
Om Google
</a></li>
9.
<li><a
target
=
"_blank"
href
=
"http://www.milw0rm.com"
>
10.
Cacing Underground
</a></li>
11.
</ol>
12.
<p><a
href
=
"profilku.html"
>
Lihat profil lengkap
</a></p>
13.
</body>
14.
</html>
5.
Simpan dilokasi yang sama dengan 
profilku.html 
dan beri nama 
daftar­situs.html
6.
Buka file profilku.html dengan browser anda, dan coba klik link yang ada untuk memahami
cara kerjanya
Gambar 1.3
1.5 Membuat Tabel
Untuk membuat tabel kita dapat menggunakan tag <table></table>. Dalam beberapa tahun terakhir,
penggunaan tabel sebagai layout website sudah tidak relevan lagi, dan digantikan oleh tag DIV. Saat
ini penggunaan tabel dikhususkan hanya untuk menampilkan data secara tabular saja tidak untuk
design halaman.
 Beberapa tag yang sering digunakan saat membuat tabel adalah:

Tag               Keterangan

<tr></tr>         Digunakan untuk membuat baris baru
<th></th>*         Digunakan untuk membuat header tabel
<td></td>*            Digunakan untuk membuat kolom
 * Tag tersebut selalu berada didalam tag <tr>...</tr>

Seperti halnya tag lain yang digunakan untuk presentasi teks, seperti <
span>
, anda dapat
menggunakan attribut 
style
 untuk memformat tampilan tampilan tabel. Berikut ini adalah contoh pembuatan tabel menggunakan HTML.

1.
Buka teks editor (gedit/Notepad++)
2.
Ketik kode berikut:
1.
<html>
2.
<head>
3.
<title>
TABEL IPS/IPK
</title>
4.
</head>
5.
<body>
6.
<h2>
Tabel IP Sampai semester 4:
</h2>
7.
<table
style
=
"width:600px;"
border
=
"1"
>
8.
<tr
style
=
"background­color:#cfcfcf"
>
9.
<th>
SEMESTER
</th>
10.
<th>
IPS
</th>
11.
</tr>
12.
<tr>
13.
<td>
SEMESTER 1
</td><td
style
=
"text­align:right"
>
4.0
</td>
14.
</tr>
15.
<tr>
16.
<td>
SEMESTER 2
</td><td
style
=
"text­align:right"
>
4.0
</td>
17.
</tr>
18.
<tr>
19.
<td>
SEMESTER 3
</td><td
style
=
"text­align:right"
>
4.0
</td>
20.
</tr>
21.
<tr>
22.
<td>
SEMESTER 4
</td><td
style
=
"text­align:right"
>
4.0
</td>
23.
</tr>
24.
<tr
style
=
"text­align:right;background­color:#FFCB68;font­weight:bold"
>
25.
<td
style
=
"text­align:center;"
>
NILAI IPK 
&gt;&gt;&gt;
</td>
26.
<td
style
=
"text­align:inherit;"
>
4.0
</td>
27.
</tr>
28.
</table>
29.
</body>
30.
</html>
3.
Simpan denan nama 
tabel.html
Diposting oleh di Tidak ada komentar:

dasar dasar web programming(2)

Output:
Aku adalah teks tebal
Pada contoh diatas kita memberikan attribut style, yang berisi “font­weight:bold”. Maksudnya
adalah kita akan mengaplikasikan style bold pada teks yang diapit oleh tag <span></span>.
Pemberian style tidak hanya terbatas pada satu bagian saja. anda dapat memberikan beberapa style
sekaligus dengan memberi tanda pemisah berupa “;” untuk setiap style.
<span style=”font­weight:bold;text­decoration:underline;font­style:italic”>Aku
adalah teks tebal, bergaris bawah dan miring</span>
Output
Aku adalah teks tebal, bergaris bawah, dan miring
Pada contoh diatas kita menerapkan tiga style pada tag span. Dapat dilihat kalau setiap style
dipisahkan oleh titik koma. Intinya kita dapat memberikan banyak style sekaligus pada suatu tag.
Penerapan Teori Manipulasi Teks
1.Buka gedit/Notepad++
2.Ketik kode HTML berikut ini
1.<html>
2.<head>
3.<title>Manipulasi Teks</title>
4.</head>
5.<body>
6.<h1style="color:red;text­decoration:underline">PENGUMUMAN!</h1>
7.<spanstyle="color:#FF0000">
8.Barang siapa yang menemukan dompet saya, akan saya beri 
9.<spanstyle="font­weight:bold;font­style:italic">
ISTRI, MOBIL, RUMAH dan 
10.Segala SERTIFIKAT TANAH SAYA</span>DIJAMIN!!!.</span>
11.</body>
12.</html>
3.Simpan dengan nama manipulasi­teks.html
4.Buka dengan browser anda

1.4 Hyperlink
Anda tentu sering melngklik gambar atau tulisan yang mengarah ke halaman lain atau website
lainnya. Yang anda klik itu adalah 
hyperlink 
atau lebih dikenal dengan istilah 
link
 saja. Untuk
membuat link kita dapat menggunakan tag <a></a>.  Dua attribut yang paling sering digunakan
pada tag <a> adalah 
href 
dan
 target
.
href
 digunakan untuk menentukan lokasi tujuan dari link. Dapat berupa relatif URL atau absolut
URL.
target
 digunakan untuk menentukan apakah halaman akan dibuka pada jendela/window baru atau
tidak. Defaultnya adalah 
self 
dimana link tidak dibuka pada window baru. Jika ingin membuka pada
window baru gunakan nilai 
_blank
.
Untuk lebih memahami cara kerja link, kita akan membuat dua file yaitu 
profilku.html
 dan 
daftar­
situs.html
.
1.
Buka gedit/Notepad++
2.
Ketik kode berikut:
1.
<html>
2.
<head>
3.
<title>
Profil JSL
</title>
4.
</head>
5.
<body>
6.
<h2>
ProfilKu
</h2>
7.
<ul>
8.
<li><strong>
Nama Lengkap:
</strong>
 John Septian Lennon
<li>
9.
<li><strong>
Tempat/Tgl. Lahir: 
</strong>
Lipermboh, 14 September 1940
</li>
10.
<li><strong>
Pekerjaan:
</strong>
 Rocker Jalanan
<li>
11.
<li><strong>
Wafat: 
</strong>
 Tewas tertembak oleh penggemar di depan 
12.
kandang sapi pada 1980
</li>
13.
</ul>
14.
<p>
Ingin lihat daftar situs favorit saya? 
<a
href
=
"daftar­situs.html"
>
15.
klik disini
</a>
.
</p>
16.
</body>
17.
</html>
3.
Simpan dengan nama 
profilku.html
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)