Blog tentang kumpulan tips cara belajar seo, membuat video, mendapatkan uang dari internet serta info teknologi terbaru yang menarik lainnya

Breaking

Thursday, December 27, 2018

Cara Mengatur Tampilan Website

Yo sahabat kali ini saya sangat semangat untuk berbagi ilmu untuk kalian heee, kali ini saya akan melanjutkan postingan saya sebelumnya tentang HTML. Jadi disini saya akan mengajarkan kalian bagaimana membuat website mulai dari awal sampai akhir jadi tetap update terus ya postingan di CaraZamm.

Tag Pengaturan Text

Untuk menampilkan dokumen supaya bisa terlihat lebih baik, maka ada beberapa tag yang perlu diketahui. Tag-tag tersebut diantaranya berguna untuk mempertebal tulisan (BOLD), meng-italic-an tulisan, menggarisbawahi tulisan, pengaturan paragraf, dan lain-lain. Tag-tag tersebut diantaranya :

<b>         dan     </b>                  : Menembalkan text yang berada didalamnya
<i>          dan     </i>                   : Memiringkan text (italic)
<u>         dan     </u>                  : Menggarisbawahi text
<big>      dan     </big>               : Memperbesar text sebesar 1 tingkat
<small>  dan     </small>            : Memperkecil text sebesar 1 tingkat
<strong> dan     </strong>          : Memberikan efek tebal
<sup>      dan    </sup>               : Menuliskan text sebagai text superscript
<sub>      dan    </sub>               : Menuliskan text sebagai text subcript
<hx>        dan    </hx>                : Menulis text sebagai heading, x ditulis angka dari 1-6 <h1>                                                                                                      heading   dengan font yang lebih besar.
<tt>         dan     </tt>                  : Menuliskan text seperti tulisan pada mesin tik (monospace)
<br>                                            : Pindah baris berikutnya
<font>     dan     </font>             : Mengatur tampilan text dengan mementukan nama font dan                                                                                                      besarnya

contoh :





Tag Pengaturan Paragraf

Untuk mengatur paragraf, digunakan tag <p> dan </p>. Tag ini mempunyai atribut align yang boleh terisi dengan center, left, right, dan justify.
Contoh:


Hasil yang terlihat di browser adalah :




Tag List

Tag List digunakan untuk menampilkan beberapa daftar, ada beberapa list yang dikenal oleh HTML yaitu:

- List bernomor tag yang dipakai adalah <ol> dan diakhiri dengan </ol>
- List tidak bernomor tag yang dipakai adalah <ul> dan </ul>
- List Definisi tag yang dipakai adalah <dl> dan </dl>

untuk item list nya tag yang digunakan dalam list bernomor dan tidak bernomor adalah dengan perintah <li>. Sedangkan untuk definisi <dt> dan </dt> sebagai definisi term dan <dd> </dd> sebagai definisi description (keterangan dari definisi term).

Bentuk umum untuk membuat list bernomor adalah:

<ol type="tipenomor">
<li>Item I</li>
<li>Item II</li>
</ol>

Baca Juga : Pengertian HTML
Untuk tipenomor nilai yang bisa diisikan adalah 1 (angka), A (huruf besar), a (huruf kecil), I (romawi kapital), i (romawi kecil). Bentuk umum membuat list bernomor adalah :

<ul type="tipebullet">
<li>item I</li>
<li>item II</li>
</ul>

Untuk tipe nomor nilai yang bisa diisikan adalah disc (bulatan), circle (lingkaran), squere (segi empat). Untuk list definisi, bentuk umumnya adalah : 

<dl>
<dt>Term I</dt><dd>Keterangan lengkap mengenai Term I</dd>
<dt>Term II</dt><dd>Keterangan lengkao mengenai Term II</dd>
</dl>




Tag Pembuatan Tabel

Untuk membuat suatu tabel dalam suatu halaman website, maka tag yang dipakai adalah <table> dan </table>, <tr> dan </tr> yang berarti table row, <td> dan </td> yang berarti table data.
Untuk membuat sebuah tabel maka skrip yang harus ditulis adalah sebagai berikut



Tampilan di Browser :




Tag Gambar

Untuk memperbagus tampilan html, maka kadang diperlukan gambar baik, gambar yang tetap atau yang animasi. Tag yang dipakai untuk menampilkan gambar adalah tab <img>. Beberapa atribut yang sering digunakan dalam tag ini adalah :

- src : menunjukkan lokasi file gambar
- border : tabal bingkai gambar
- width : lebar gambar
- height : tinggi gambar
- align : peletakkan gambar

Contoh:






Tag Link HTML

Kelebihan utama dokumen HTML adalah kemampuannya untuk memberikan link dari suatu text dan atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser akan menyorot (heighlight) text atau menyorot text gambar untuk menunjukkan ini adalah hypertext link.

Untuk membuat sebuah link maka tag yang digunakan adalah tag <a> dan </a>. atribut- atribut dari tag ini adalah :

- href : lokasi yang dituju, bisa alamat internet, file, dan folder.
- terget : lokasi link tersebut ditampilkan gunakan _blank jika ingin memampilkan link yang dituju di browser baru/lain

contoh script :







Tag Form

Kadang" ketika kita surfing kita diminta untuk mengisikan suatu data yang akan dikirim ke penyedia web site. Data" tersebut bisa berupa data nama, alamat, no kartu kredit, gambar, atau file.
Untuk membuat suatu form yang dapat berinteraksi dengan visitor, maka pengembang web harus membuat suatu form dalam dokumen html-nya. Untuk membuat suatu form dalam dokumen html, tag yang digunakan adalah <form></form>. Diantara kedua tag tersebut, elemen-elemen form dituliskan.

Perintah Umum tag form adalah :

<form nama="namaform" method="jenismethod" action="fileeksekusi">
disinilah elemen form ditulis
</form>

atribut  name diisi dengan nama dari form tersebut
atribut method diisi dengan GET atau POST
atribut action diisi dengan nama file yang akan  dieksekusi ketika tombol submit ditekan.

Contoh script :

Script diatas akan menghasilkan tampilan di browser seperti di bawah ini




Oke Selesai sudah pembahasan mengenai cara mengatur tampilan website lengkap dengan tag serta elemen nya.. Oh iya untuk penulisan script html nya kalian bisa menggunakan note pad, notepad++, sublimetext, dll. Selanjutnya saya akan memposting cara instalasi web server.

Semoga apa yang saja bagi bermanfaat bagi kalian semua dan apabila ada yang ingin ditanyakan atau saran buat kemajuan blog ini silahkan tinggal kan komentar ya hee SALAM SUKSES BERJAMAAH

1 comment:

  1. Casino City Times - Hotel, Restaurants, News
    Book a stay at 속초 출장안마 Casino City Times in Robinsonville, MS. 동두천 출장마사지 Check reviews, 청주 출장마사지 hours, directions, photos and more for Casino 경주 출장마사지 City Times. Rating: 3 · ‎2 reviews 평택 출장샵

    ReplyDelete