Belajar Web Design 4

Terimkasih pada pengunjung setia,

setelah dua minggu ga posting akhirnya posting kembali, bahasan kali ini mengenai paragraph,formatting, links, css, image, dan table


 

Paragraphs

Kita langsung saja ke point-point nya karen bahasan dasar html sudah di bahasa di pembahasan sebelumnya,

untuk menambahkan paragraph kita cukup menggunkan tag <p>isi paragraph<p/>, apabila ingin new line atau garis baru, cukup dengan tag <br /> , contohnya adalah sebagai berikut

<p>This is<br>a para<br>graph with line breaks</p>

 

Formatting

Untuk menambahkan bentuk-bentuk text yang berbeda-beda adalah sebagi berikut:

Format Teks Tag HTML

Label Deskripsi
<b> Mendefinisikan teks tebal
<big> Mendefinisikan teks besar
<em> Mendefinisikan teks menekankan 
<i> Mendefinisikan sebuah bagian dari teks dengan suara alternatif atau mood
<small> Mendefinisikan teks kecil
<strong> Mendefinisikan teks yang kuat
<sub> Mendefinisikan teks subscript
<sup> Mendefinisikan teks superscripted
<ins> Mendefinisikan teks yang disisipkan
<del> Mendefinisikan teks yang dihapus

HTML “Output Komputer” Tag

Label Deskripsi
<code> Mendefinisikan teks kode komputer
<kbd> Mendefinisikan teks Keyboard 
<samp> Mendefinisikan sampel kode komputer
<tt> Mendefinisikan teks teletype
<var> Mendefinisikan variabel
<pre> Mendefinisikan teks terformat

HTML Kutipan, Kutipan, dan Definisi Tag

Label Deskripsi
<abbr> Mendefinisikan sebuah singkatan
<acronym> Mendefinisikan akronim
<address> Mendefinisikan informasi kontak untuk penulis / pemilik dokumen
<bdo> Mendefinisikan arah teks
<blockquote> Mendefinisikan bagian yang dikutip dari sumber lain
<q> Mendefinisikan sebuah kutipan (pendek) inline
<cite> Mendefinisikan judul karya
<dfn> Mendefinisikan sebuah istilah definisi

Contoh bentuk variasi dari formatting text

<p>
<b>Indonesia</b> <big>mempunyai</big> <em>potensi</em> <i>besar</i> <small>untuk</small>
<sub>Yang terbaik</sub><sup>Yang terhebat</sup> bukannya <del>SOMBONG</del> tapi <ins>TEGAS</ins>
</p>
<pre>
<code>Indonesia jaya</code>
<kbd>Indonesia merdeka</kbd>
<samp>Indonesia Menang</samp>
<tt>Indonesia Fight</tt>
<var>Indonesia Corsa</var>
</pre>
<p> Indonesia <abbr title=”Dewan perwakilan daerah”>DPR</abbr></p>
<p>
<blockquote>Indonesia merdeka mempunyai hal
yang terpenting didalamnya oeky oleh karen aitu kita sebagai bangsa Indonesia harus taat dan path pada pemerintah</blockquote>
<q>Indonesia hours</q>
<cite>Jakarta</cite>
<dfn>bandung</dfn>

Dengan hasil sebagai berikut;


 LINK

Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang dapat Anda klik untuk melompat ke dokumen baru atau bagian baru dalam dokumen saat ini.

Bila Anda memindahkan kursor di atas link di halaman Web, panah akan berubah menjadi tangan kecil.

Link yang ditentukan dalam HTML menggunakan tag <a>.

Tag <a> dapat digunakan dalam dua cara:

  1. Untuk membuat link ke dokumen lain, dengan menggunakan atribut href
  2. Untuk membuat bookmark dalam dokumen, dengan menggunakan atribut nama

HTML Link Sintaks

Kode HTML untuk link sederhana. Ini terlihat seperti ini:

<a href=”url“>Link text</a>

1.Atribut target menentukan di mana untuk membuka dokumen terkait.

Contoh di bawah akan membuka dokumen terkait dalam jendela browser baru atau tab baru:

Contoh

<a href=”http://www.w3schools.com/” target=”_blank”>Visit W3Schools!</a>

2.Contoh

Sebuah anchor bernama dalam sebuah dokumen HTML:

<a name=”tips”>Useful Tips Section</a>

Membuat link ke “Bagian Tips Berguna” di dalam dokumen yang sama:

<a href=”#tips”>Visit the Useful Tips Section</a>

Atau, membuat link ke “Bagian Tips Berguna” dari halaman lain:

<a href=”http://www.w3schools.com/html_links.htm#tips”>
Visit the Useful Tips Section</a>
CSS

CSS (Cascading Style Sheets) digunakan untuk membuat halaman page lebih menarik dan indah dilihat, seperti perpaduan warna jenis huruf fint dan lain sebagainya.

CSS dapat ditambahkan ke HTML dengan cara sebagai berikut:

  • Inline – menggunakan gaya atribut dalam elemen HTML
  • Internal – menggunakan <style> elemen di bagian <head>
  • Eksternal – menggunakan CSS eksternal file 

Inline Styles

Sebuah gaya inline dapat digunakan jika gaya yang unik yang akan diterapkan ke satu kejadian tunggal dari sebuah elemen.

Untuk menggunakan gaya inline, menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. Contoh di bawah ini menunjukkan bagaimana untuk mengubah warna teks dan margin kiri paragraf:

<p style=”color:blue;margin-left:20px;”>This is a paragraph.</p>

Gaya HTML Contoh – Warna Latar Belakang

Properti background-color mendefinisikan warna latar belakang untuk elemen:

Contoh

<!DOCTYPE html>
<html><body style=”background-color:yellow;”>
<h2 style=”background-color:red;”>This is a heading</h2>
<p style=”background-color:green;”>This is a paragraph.</p>
</body>

</html>


Contoh Gaya HTML – Font, Warna dan Ukuran

Font-family, warna, dan font-size sifat mendefinisikan font, warna, dan ukuran teks dalam suatu elemen:

Contoh

<!DOCTYPE html>
<html><body>
<h1 style=”font-family:verdana;”>A heading</h1>
<p style=”font-family:arial;color:red;font-size:20px;”>A paragraph.</p>
</body>

</html>


Gaya HTML Contoh – Penyelarasan Teks

Properti text-align menentukan keselarasan horizontal teks dalam suatu elemen:

Contoh

<!DOCTYPE html>
<html><body>
<h1 style=”text-align:center;”>Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

Internal Style Sheet

Sebuah style sheet internal yang dapat digunakan jika satu dokumen tunggal memiliki gaya yang unik. Gaya internal didefinisikan dalam bagian <head> halaman HTML, dengan menggunakan tag style, seperti ini:

<head>
<style type=”text/css”>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

 


Eksternal Style Sheet

Sebuah style sheet eksternal sangat ideal bila gaya diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian <head>:

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
Image

HTML Images – Tag <img> dan Atribut Src

Dalam HTML, gambar didefinisikan dengan tag <img>. 

Tag <img> kosong, yang berarti bahwa mengandung atribut saja, dan tidak memiliki tag penutup.

Untuk menampilkan gambar pada halaman, Anda perlu menggunakan atribut src. Src singkatan dari “sumber”. Nilai atribut src adalah URL gambar yang ingin ditampilkan.

Sintaks untuk mendefinisikan gambar:

<img src=”url” alt=”some_text“>

URL yang menunjuk ke lokasi di mana foto tersebut disimpan. Sebuah gambar yang bernama “boat.gif”, yang terletak di direktori “images” pada “www.w3schools.com” memiliki URL: http://www.w3schools.com/images/boat.gif.

Browser menampilkan gambar di mana tag <img> terjadi dalam dokumen. Jika Anda menempatkan tag gambar antara dua paragraf, browser menunjukkan paragraf pertama, maka gambar, kemudian paragraf kedua.


HTML Images – The Atribut Alt

Atribut alt diperlukan menentukan sebuah teks alternatif untuk gambar, jika gambar tidak dapat ditampilkan.

Nilai atribut alt adalah teks penulis-didefinisikan:

<img src=”boat.gif” alt=”Big Boat”>

Atribut alt memberikan informasi alternatif untuk gambar jika pengguna untuk beberapa alasan tidak bisa melihatnya (karena koneksi yang lambat, kesalahan dalam atribut src, atau jika pengguna menggunakan pembaca layar).


HTML Images – Tinggi dan Lebar Set Image

Atribut tinggi dan lebar yang digunakan untuk menentukan tinggi dan lebar dari suatu gambar.

Nilai-nilai atribut yang ditetapkan dalam piksel secara default:

<img src=”pulpit.jpg” alt=”Pulpit rock” width=”304″ height=”228″>

Table

HTML Tabel

Tabel didefinisikan dengan tag table  <table>

Sebuah tabel dibagi menjadi baris (dengan tag <tr>), dan setiap baris dibagi menjadi sel-sel data (dengan tag <td>). td singkatan dari “data tabel,” dan memegang isi sel data. Sebuah tag <td> dapat berisi teks, link, gambar, daftar, bentuk, tabel lain, dll

Contoh

<table border=”1″>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Bagaimana kode HTML di atas terlihat dalam browser:

baris 1, sel 1 baris 1, sel 2
baris 2, sel 1 baris 2, sel 2

 


HTML Tabel dan Atribut Perbatasan

Jika Anda tidak menentukan atribut border, tabel akan ditampilkan tanpa batas. Kadang-kadang hal ini dapat berguna, tetapi sebagian besar waktu, kita ingin perbatasan untuk menunjukkan.

Untuk menampilkan tabel dengan perbatasan, menentukan atribut border:

<table border=”1″>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

 


HTML Tabel Header

Informasi header dalam tabel didefinisikan dengan tag <th>.

Semua browser utama menampilkan teks dalam elemen <th> sebagai berani dan terpusat.

<table border=”1″>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Bagaimana kode HTML di atas terlihat pada browser Anda:

Header 1 Header 2
baris 1, sel 1 baris 1, sel 2
baris 2, sel 1 baris 2, sel 2

sumber referencee : www.w3schools.com

Sekarang ngerti kan..

mau tambah ilmu lagi ??

Kunjungi terus blog “Engineering Apllications

About priyatna