kali ini saya akan memberikan tips2 dalam membuat web html.langkah pertama yang harus dilakukan adalah mengetahui bentuk dasar dari html yaitu sebagei berikut :
<html>
<head>
<title>Judul Website Anda</title>
</head>
<body>
Isi dari halaman HTML anda
</body>
</html>
Jika anda perhatikan ada banyak tulisan yang berada dalam kurung siku ( < ... > ). Suatu
tulisan yang berada dalam kurung siku inilah yang dinamakan Tag. Tag inilah yang akan
dieksekusi oleh Web Browser dan menentukan tampilan dari laman Web anda.
beberapa tag - tag yang digunakan adalah
- <b>membuat tulisan huruf menjadi tebal </b>
- <i>membuat tulisan huruf menjadi miring </i>
- <u>membuat tulisan bergaris bawah </u>
Jika anda mengenal style heading di Microsoft Word, maka dengan menggunakan HTML
anda dapat menggunakan heading untuk menentukan ukuran suatu text. Heading terbesar
adalah Heading 1 dan yang terkecil adalah heading 6.
<h1>ini judul saya</h1>
<h2>ini judul saya</h2>
<h3>ini judul saya</h3>
<h4>ini judul saya</h4>
<h5>ini judul saya</h5>
<h6>ini judul saya</h6>
Baris dan Paragraph
<br> dan <p> merupakan tag yang digunakan untuk membuat baris baru dan paragraph baru.
contoh :
text ganti baris <br>
text ganti paragraph<p>
trimakasih
Font
Font merupakan jenis huruf yang kita pakai. Dalam membuat web page kita dapat
mengubah jenis, ukuran dan warna dari huruf yang kita pakai. Font face digunakan untuk
mengganti jenis huruf. Font size digunakan untuk merubah ukuran huruf. . Font Color digunakan untuk mengubah warna huruf.
Contoh penulisan Tagnya :
<font face = “Arial”> text anda </font>
<font size = “1” > text anda </font>
<font color = “red”> text anda </font>
dan jika ketiganya digabung akan menjadi :
<font face = “Arial” size = “2” color = “blue”> text anda </font>
Align
ketika kita ingin mengubah perataan kalimat dalam suatu paragraph maka tag - tag yang digunakan adalah
- <div align = "left">untuk rata kiri </div>
- <div align = "right">untuk rata kanan </div>
- <div align = "center">untuk rata tengah </div>
- <div align = "justify">untuk rata kiri - kanan</div>
Pada tag <body> anda dapat melakukan formatting untuk beberapa hal, seperti : warna
latar web page, warna text keseluruhan, gambar sebagai latar belakang, dll. Namun pada
bagian ini akan ditunjukkan tag untuk mengatur warna latar dan text saja.
contoh penulisan tagnya adalah
<body bgcolor = "red" text = "#aabbcc">
List
Jika kita ingin mendaftar atau menulis list suatu barang, maka HTML juga memfasilitasi kita
untuk melakukan hal tersebut. List ada 2 macam :
Unordered List : list dengan index menggunakan simbol – simbol.
Contoh : List kamar :
- bantal
- guling
- kasur
Contoh : List perangkat kamar :
- meja
- lemari
- kipas angin
<ul>
<li> bantal
<li> guling
<li> kasur
</ul>
<ol>
<li> meja
<li> lemari
<li> kipas angin
</ol>
Memasukkan Gambar
Web Page yang kita buat tentu saja akan kurang bervariasi jika hanya berisi tulisan-tulisan
saja. Oleh karena itu HTML memfasilitasi kita untuk menempel gambar di website kita. File
gambar yang biasa digunakan adalah yang berekstensi .jpg, .bmp, .gif. Selain itu dapat juga
digunakan file gambar berekstensi lain. Yang perlu diperhatikan adalah besarnya ukuran file
gambar.
Contoh tag untuk meletakkan gambar di web page adalah :
<img src = “file gambar.jpg”>
sebaiknya file gambarnya ditempatkan pada folder yang sama dengan web anda agar memudahkan anda dalam memasukkan gambar di web anda.
Anda dapat menempel gambar yang anda miliki sebagai background website anda. Akan
tetapi jika gambar yang anda miliki tidak cukup besar maka gambar tersebut akan
ditampilkan berulang dalam background ( seperti model tile ). Penulisan tag background
menjadi satu pada tag <body>.
Contoh tag penulisannya :
<body background = “file gambar.jpg”>
Link
Pernahkan anda berpikir bahwa dari website yang anda buat, anda bisa mengakses website
atau web page lain ? Hal ini dapat dilakukan di HTML dengan fasilitas link. Dengan
melakukan click pada link yang ada, anda dapat mengakses website lain baik yang lokal
maupun yang ada di seluruh dunia.
Contoh penulisan tag link :
<a href = “alamat website”>tampilan text untuk diclick</a>
Selain itu ada juga dapat mengatur apakah halaman web yang anda akses tadi akan
ditampilkan di halaman baru atau tidak.
Contoh :
<a href = "http://www.yahoo.com" target = _blank>Ini link ke yahoo.com </a>
Tabel
Pada HTML anda dapat membuat tabel sesuai dengan jumlah baris dan kolom yang anda inginkan.
Tag yang digunakan untuk membuat tabel :
- <table> .... </table> : mendefinisikan keseluruhan tabel
- <tr> ... </tr> : mendefinisikan baris
- <th> ... </th> : mendefinisikan judul kolom
- <td> ... </td> : mendefinisikan kolom
<table border = "2">
<tr>
<th> Nama </th>
<th> alamat </th>
</tr>
<td> usman </td>
<td> Jl. banteng </td>
</table>
Form
- Text field digunakan untuk memasukkan data dengan cara diketik. Tag penulisannya :
<input type = “text” name = “text” value = “nilai” >
Biasanya value dibiarkan kosong pada awalnya, karena menunggu input dari user. - Text area mirip dengan text field namun memiliki bidang penulisan yang lebih besar . Tag penulisannya :
<textarea name="textarea"></textarea> - Check box digunakan jika kita ingin user untuk memilih pilihan yang telah kita tetapkan. Cara
memilihnya adalah dengan cukup meng-click saja. Tag penulisannya :
<input type="checkbox" name="checkbox" value="checkbox"> - Radio button mirip penggunaannya dengan check box, namun pada radio button pilihan user
hanya ditentukan 1 saja dari sekian pilihan yang ditawarkan dengan cara nama dari masing masing pilihan dibuat sama. Tag penulisannya :
<input type="radio" name="radiobutton" value="radiobutton"> - List/menu digunakan untuk memilih pilihan yang sudah kita list dalam bentuk kata-kata. Namun apa beda list dengan menu ? Jika kita menggunakan menu maka pilihan yang ditampilkan hanya satu baris saja dan akan merunut ke bawah jika kita click tombol panah di sampingnya. Catatan : jika pilihan lebih dari satu. Penulisan tag Menu :
<select name="select">
<option>pilihan 1</option>
<option>pilihan 2</option>
<option>pilihan 3</option>
:
<option>pilihan ke-n</option>
</select>
Lain halnya dengan list. List langsung menampilkan semua pilihan yang ada namun
tergantung dari ukuran height yang kita tentukan. Penulisan tag List :
<select name="select" size="x" >
<option>pilihan 1</option>
<option>pilihan 2</option>
:
<option>pilihan ke-n</option>
</select> - Tombol submit digunakan untuk mengeksekusi semua input dari user dan mengirimkan nilainya ke file script. Sedangkan tombol reset digunakan untuk menghapus semua input user dan mengulangnya dari awal. Nama dari tombol submit dan reset bisa diganti sesuai keinginan kita, namun pada dasarnya tombol tersebut tetap tombol submit atau reset.
Penulisan tag submit :
<input type="submit" name="Submit" value="Submit">
<input type="reset" name="Reset" value="Reset">
Tidak ada komentar:
Posting Komentar