Belajar Html Tingkat Lanjutan-1
HTML Tingkat lanjutan 1
Jika Anda gres terjun di dunia maya khususnya ingin mengikuti bisnis secara online alias pemula (newbie) diharuskan Anda berguru perihal kegiatan web HTML. Di blog-bisnisonlinetop1 ini Anda akan mendapat tutorial, tips, triks dan artikel-artikel perihal bagaimana cara berguru HTML untuk membantu Anda dalam menjalani bisnis online perihal bagaimana menciptakan website semoga profesional.
Di Internet bahu-membahu kita sanggup saja mendapat banyak template baik yang gratis maupun yang berbayar, namun untuk lebih baiknya semoga Anda sanggup memanipulasi tampilan website/blog secara elegan dan profesional khususnya script-script HTML yang berkaitan dengan promosi iklan Anda semoga Anda tidak mengalami kesulitan untuk me-reposisikan tampilan-tampilan banner atau gambar, teks Link, dan untuk mempercantik tampilan website/blog Anda.
Di blog-bisnisonlinetop1 ini Anda akan mendapat tutorial berguru HTML yang disertai dengan contoh-contoh mulai dari dasar, sehingga akan gampang dipahami dan sangat cocok bagi Anda yang masih pemula.
Sebelumnya sudah dijelaskan pada blog ini perihal berguru dasar-dasar HTML untuk pemula dari dasar 1 , dasar 2 hingga dasar 3, semoga Anda lebih jago lagi mengenai HTML silahkan Anda mempelajari tingkat lanjutannya diblog ini , tentunya Anda sudah mengetahui untuk berguru kegiatan HTML Anda sanggup memakai software kegiatan HTML ibarat Ms FrontPage, Dreamweaver atau Text Editor (Notepad), sesuai dengan selera Anda masing-masing. Namun untuk tutorial ini akan diajarkan dengan memakai teks editor yang simpel yaitu Notepad yang sudah dijelaskan sebelumnya di blog ini, kalau Anda ingin teks editor yang lebih interaktif Anda sanggup memakai Notepad.
Dalam berguru sebaiknya Anda eksklusif praktek di kegiatan HTML Anda, sehingga akan lebih gampang untuk dipahami, Anda sanggup ketik atau copy/paste contoh-contoh HTML-nya di Notepad kegiatan HTML Anda, simpan file dengan extention .html dan tampilkan di browser untuk melihat hasilnya.
Pengenalan HTML lanjutan :
Pengertian singkat perihal HTML
Sebenarnya sudah dijelaskan diblog ini perihal apa itu HTML ? HTML (Hyper Text Markup Language) merupakan bahasa standar untuk menciptakan suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari banyak sekali macam format file ibarat texs, grafik, animasi link maupun audio-video.
Sedangkan Web browser ialah sebuah progam yang sanggup menterjemahkan aba-aba perintah dari dokumen HTML tersebut sehingga sanggup kita lihat, baca dan dengar. Contoh dari Web Browser ialah Internet Exsplorer, Netscape Navigator, Mozilla Firefox, Opera, Safari dll.
HTML memiliki file ekspansi (extention) htm atau html. Dimana kedua ekspansi tersebut ialah sama, jadi Anda boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html".
Sebelumnya sudah dijelaskan juga diblog ini perihal pola suatu dokumen HTML yang sangat sederhana dengan memakai software text dokument HTML Notepad, pada cuilan ini dijelaskan hanya untuk tingkat lanjutan berguru kegiatan HTML.
Format Font HTML
Tag HTML untuk font ialah <font>…</font>, dengan tag ini kita sanggup memilih jenis font (face), warna (color), dan ukuran (size), untuk lebih jelasnya mari kita perhatikan pola berikut ini:
<html>
<head></head>
<body>
Untuk menciptakan jenis font (face):
<h1><font face="Verdana">Judul dengan font Verdana</font></h1>
<p><font face="Times">Konten dengan font Times</font></p>
Untuk menciptakan ukuran (size):
<h1><font size="5">Judul dengan size 5</font></h1>
<p><font size="3">Konten dengan size 3</font></p>
Untuk menciptakan warna font (color):
<h1><font color="blue">Judul dengan warna biru</font></h1>
<p><font color="red">Konten dengan warna merah</font></p>
Contoh komplit untuk menciptakan jenis font (face),size dan color:
<h1><font face="Verdana" size="4" color="green">Judulnya Tentang Font</font></h1>
<p><font face="Arial" size="3" color="#660000">Ini ialah pola goresan pena dengan <i>pengaturan font</i> yang menggunakan<br>
tag HTML elemen <b>font</b> dengan atribut face, size dan color...</font></p>
</body>
</html>
Berikut ialah sebagai rujukan bagi Anda untuk memanipulasi atribut face, color dan size:
Atribut :
face="Jenis font yang digunakan", contoh: face="Tahoma"
size="Ukuran dari font (1-7)", contoh: size="3"
size="Memperbesar ukuran font", contoh: size="+1"
size="Memperkecil ukuran font", contoh: size="-1"
color="Warna dari font", contoh: color="blue"
color="Warna dari font", contoh: color="#FF0000"
Sesuai dengan recomendasi dari World Web Consortium (W3C), Untuk HTML 4.0 keatas, tag <font> tidak dipergunakan lagi, sebagai gantinya dibentuk tag <style> atau disebut dengan Cassading Style Sheets (CSS). Dengan CSS penggunaanya akan lebih kompleks dan lebih luas lagi alasannya sanggup dikombinasikan dengan tag elemen-elemen lainnya di dalam dokumen HTML. Berikut ialah pola penggunaan tag style sheets:
<html>
<head></head>
<body>
Untuk menciptakan jenis font (face):
<h1 style="font-family:verdana">Judul Menggunakan font verdana</h1>
<p style="font-family:tahoma">Konten memakai font tahoma</p>
Untuk menciptakan ukuran (size):
<h1 style="font-size:150%">Judul dengan ukuran 150%</h1>
<p style="font-size:80%">Konten dengan ukuran 80%</p>
Untuk menciptakan warna font (color):
<h1 style="color:blue">Judul dengan warna Biru</h1>
<p style="color:red">Konten dengan warna merah</p>
Contoh komplit untuk menciptakan jenis font (face),size dan color:
<p style="font-family:verdana;font-size:80%;color:green">
Ini ialah pola goresan pena pengaturan font dengan <i>Cassading Style Sheets</i> (CSS) yang<br>
menggunakan tag HTML elemen <b>style:</b> font-family, font-size dan color...</p>
</body>
</html>
Untuk mengetahui lebih lanjut perihal pemrograman CSS, nanti akan dibentuk tutorial khusus untuk membahas hal ini.
Format text HTML
Untuk menulis biasanya ada paragraf dan baris baru, lantas bagaiman cara menuliskannya di dokumen HTML?. Dari pola yang sudah kita buat sebelumnya, coba tambahkan dengan tag-tag berikut ini:
<html>
<head>
<title>Selamat Datang di Websiteku</title>
</head>
<body>
Ini ialah halaman Program HTML pertamaku.
<p>Aku sedang menciptakan paragraf dan ini contohnya.</p>
<p>Ini pola paragraf yang lainnya.</p>
<p>Ini juga paragraf keduaku, tapi de-<br>
ngan baris baru.<br>
Ini baris paragraf gres yang lain.</p>
</body>
</html>
Untuk menciptakan suatu paragraf, tag elemennya ialah <p>…</p>, dan untuk baris gres ialah <br>, perlu diketahui bahwa sebagian tag elemen HTML tidak memerlukan tag penutup, sebagai pola ialah <br> ada juga <hr>, apa itu <hr>?, coba lanjutkan lagi dengan pola berikut ini:
<html>
<head>
<title>Selamat Datang di Websiteku</title>
</head>
<body>
<hr>
<h1>Ini ialah halaman HTML pertamaku.</h1>
Dikerjakan oleh: <!-- Tolong isikan dengan nama Anda -->
<hr>
<p>Aku sedang menciptakan paragraf dan ini contohnya.</p>
<p>Ini pola paragraf yang lainnya.</p>
<p>Ini juga paragraf keduaku,…tapi de-<br>
ngan baris baru.<br>
Ini baris gres yang lain.</p>
</body>
</html>
Sampai disini mudah-mudahan Anda memahami apa itu <hr>. Garis Horizontal <hr> juga tidak memakai tag penutup. Kemudian ada <h1>…</h1> disebut dengan Heading, merupakan ukuran teks yang biasa di pakai untuk judul, bab, maupun sub-bab lainnya. Ukurannya ada 6 jenis mulai dari <h1> hingga <h6>, ukuran yang paling besar ialah h1 dan yang terkecil ialah h6.
Selanjutnya tag <!–…–> adalah Comments dipakai untuk memasukkan (menyisipkan) suatu komentar di dalam HTML. Suatu comments akan diabaikasn oleh browser. Kamu sanggup memakai komentar untuk menjelaskan sesuatu hal.
Dibawah ini ialah pola format teks yang sering dipakai di dalam dokumen HTML :
<html>
<head></head>
<body>
<hr>
<h1>Ini ialah halaman HTML pertamaku.</h1>
Dikerjakan oleh: <!-- Tolong isikan dengan nama anda -->
<hr>
<p>Aku sedang mempelajari format-format teks.<br>
Contoh-contohnya ialah sebagai berikut:</p>
<p>Teks Normal<br>
<tt>Teks mesin ketik</tt><br>
<b>Teks tebal (bold)</b><br>
<strong>Teks tebal dengan perintah Strong</strong><br>
<i>Teks dengan italic (miring)</i><br>
<em>Teks miring dengan perintah Emphasized</em><br>
<u>Teks bergaris bawah (underline)</u><br>
<strike>Teks tercoret (strike)</strike><br>
<big>Teks lebih besar dari normal</big><br>
<small>Teks lebih kecil dari normal</small><br>
Teks memakai Subscript: Molekul Air ialah H<sub>2</sub>O<br>
Teks memakai Superscript: Hasil dari 10<sup>2</sup>=100<br></p>
</body>
</html>
Kemudian untuk menampilkan teks sesuai dengan yang tertulis kita gunakan tag <pre>…</pre>, contohnya kalau anda menuliskan syair sebuah lagu atau puisi:
<html>
<body>
<pre>
<b>BELAJAR ITU INDAH</b>
Hari ini...
Aku sedang berguru HTML...
Belajar perihal HTML itu ternyata mudah.
Tidak sulit 'ntuk dimengerti,
Karena gampang di fahami teks-teks nya.
Tapi saya tetap belajar,… biarlah...
Akan kucoba berguru terus...
Sampai saya mahir.
</pre>
</body>
</html>
Sampai disini semoga Anda benar-benar memahami perihal format font dan paragraf dengan kegiatan HTML, untuk lanjutan berguru HTML dengan elemen gambar dan Hypertext silahkan Anda klik disini yaitu Belajar HTML tingkat lanjutan cuilan ke 2
Komentar
Posting Komentar