Belajar Web Programming

Berpindah Baris Untuk membuat tampilan pindah baris, Anda bisa menggunakan break. Tag break ini membuat hasil style teks masih bagus, tidak seperti <pre> yang membuat tulisan seperti monospace.
Tag untuk memindahkan teks ke baris berikutnya adalah tag <br/>. Tulisan br adalah singkatan dari break atau yang dimaksud adalah line break. Apa perbedaan break dengan tag <p> untuk pembuatan paragraf? 
Jawabnya adalah paragraf akan selalu memiliki jarak dengan paragraf di bawahnya. Adapun pemindahan baris dengan break tidak memberikan jarak dengan bawahnya. Jadi dengan break, tulisan teks masih akan dianggap satu paragraf.
Berikut ini contoh sebelum adanya break dan hanya menggunakan paragraf.

<html> 
<head> 
<title>Sebelum digunakan Break</title> 
</head> 
<body> 
<h1>Sebelum Break</h1> 
<p> 
Di rumahku kemarin ku
melihat sesuatu yang asing  
</p> 
<p> 
Aku melihat sesesok orang yang
memakai pakaian tebal 
</p> 
<p> 
Ternyata dia
adalah pamanku 
</p> 
</body> 
</html>

Hasilnya akan seperti ini

Pertama kita akan belajar mengenai bagaimana membuat style dari teks yang memungkinkan kalian membuat efek tebal, garis miring, garis bawah, monospace, dan coret. Efek-efek ini hampir semuanya diakomodasi oleh semua browser modern.

1. Untuk membuat efek tebal, digunakan tag <b> yang merupakan singkatan bold.
2. Untuk membuat efek garis miring, digunakan tag <i> yang merupakan singkatan italic.
3. untuk membuat garis bawah, digunakan tag tag <u> yang merupakan singkatan dari underline.
4. Untuk membuat efek monospace, digunakan tag <tt> yang merupakan singkatan dari typewriter text.
5. Untuk membuat efek coret, digunakan tag <strike>, yang artinya coret.

Sebenarnya ada beberapa efek style lain dari pemrograman HTML namun apakah style tersebut dikenali atau tidak, akan tergantung kepada browsernya. Akan tetapi, browser modern umumnya mendukung 5 efek dasar di atas. berikut ini contoh kode yang bisa kalian buat untuk mengatur style pada teks :

<html>
<head>
<title>pemformatan style teks</title>
</head>
<body>
<h1>Lirik Lagu </h1>
<p>
<b> Wherever you are, I'll always make you smile </b>
</p>
<p>
<i> Wherever you are, I'm always by your side </i>
</p>
<p>
<u> Whatever you say, kimi wo omou kimochi </u>
</p>
<p>
<tt> I promise you "forever" right now </tt>
</p>
<p>
<strike> I don't need a reason </strike>
</p>
</body>
</html>

hasilnya akan seperti ini jika di lihat di browser :

komentar di HTML cukup mudah dibuat, yaitu memberikan tag pembuka <!-- dan tag penutup -->. Sangat sederhana kan teks-teks yang ada di dalam komentar ini tidak akan ditampilkan di halaman browser. tag ini biasanya berfungsi untuk seorang pemrograman web. Karena terlalu banyak melakukan pemrograman hingga biasa nya lupa sendiri dengan fungsi script yang dia buat. tag ini berfungsi agar seorang pemrograman web tidak lupa dengan fungsi-fungsi script yang di buatnya. tag ini juga biasa di tuliskan untuk memberikan keterangan suatu script.

Hampir semua halaman web selalu memiliki gambar di dalamnya. Dengan adanya gambar, tampilan halaman web akan terlihat lebih menarik dan lebih baik. Jika tidak ada gambar, halaman web akan terlihat membosankan. Untuk menambahkan gambar, kode HTML pun mendukungnya. Memasukkan gambar diakomodasi oleh tag <img>. Berikut ini adalah format standart tag <img> untuk memasukkan gambar:

<img src="lokasi_gambar"/>

Contoh kalian ingin memasukkan gambar dengan nama file "gambar.jpg" dengan lokasi satu folder dari lokasi tempat file ".html" kalian berada. maka, kalian tinggal memasukkan kode :

<img src="gambar.jpg"/>

Contoh kodenya adalah sebagai berikut:

<html>
<head>
<title> Contoh memasukkan gambar </title>
</head>
<body>
<h1> Itachi dan Sasuke </h1>
<img src="gambar.jpg"/>
</body>
</html>

maka hasilnya akan seperti ini

Sebagai seorang pengguna internet, tentu anda tahu bahwa halaman web umumnya memiliki link. Link ini berguna untuk menuju ke tempat lainnya di belantara world wide web (WWW). apa kode untuk membuat link?
Kode untuk membuat link ternyata sangat sederhana. Kalian hanya menggunakan tag<a> untuk membuat link. Akan tetapi, pembuatan tag ini lebih kompleks daripada pembuatan tag lainnya karena kalian harus menentukan URL (Uniform Resource Locator) yang akan kalian tuju. Berikut ini format pembuatan link:
URL yang akan kita gunakan misalnya:

http://www.google.com

berikut adalah contoh sederhana untuk memperkenalkan kalian dalam membuat link:

<html>
<head>
<title>Contoh pembuatan Link</title>
</head>
<body>
Ini adalah link yang di tuju <a HREF="http://www.google.com"> google </a>
</body>
</html>

Hasilnya akan seperti ini



 

Heading adalah bagian dari halaman yang memungkinkan dipakai untuk outline. Heading yang digunakan antara heading 1 sampai heading 6. Heading dibuat menggunakan tag <h1> sampai <h6>. Berikut ini contoh penggunaan heading. Walaupun sebenarnya kalian dapat membuat layout yang baik tanpa memakai heading tapi heading ini juga penting jika ditinjau dari SEO (search engine optimization). Contoh kode pembuatan halaman untuk heading adalah sebagai berikut:


<html>
<head>
<title> Heading, Outline untuk halaman web </title>
</head>
<body>
<h1>1. Belajar Website </h1>
Website adalah Dokumen Hypertext
<h2>1.1 Komponen Web </h2>
Ada beberapa komponen web
<h3>1.1.1 Hosting Web</h3>
Ada banyak hosting yang dapat di gunakan untuk menyimpan data web
<h4>1.1.1.1 Data Wev</h4>
Web memiliki berbagai data di dalamnya
</body>
</html>


Hasilnya akan seperti ini jika di lihat di browser

Setelah title dari webpage dibuat, barulah kalian dapat memasukkan konten dari halaman web . konten ini diletakkan di antara tag <body> dan </body>.

<html>
<head>
<title> Belajar Web Programming  </title>
</head>
<body>
Semua yang ada di sini adalah konten web
Semua yang ada di tag body akan ditampilkan
di halaman browser
</body>
</html>

Dari gambar di atas, terlihat bahwa tampilan teks terus disambung  walaupun di kodenya kita sudah memisahkan teks dengan memakai Enter. Untuk membuat paragraf, kalian dapat menggunakan tag <p>.

<html>
<head>
<title> Belajar Web Programming  </title>
</head>
<body>
<p> Semua yang ada di siniadalah konten web </p>
<p> Semua yang ada di tag body akan ditampilkan </p>
<p> di halaman browser </p>
</body>
</html>