Berubah Untuk Membuat Hidup Lebih Berarti: February 2018

Friday, February 16, 2018

Format Font HTML dan Tag Style

Sebelumnya saya sudah membuat tulisan untuk anda blogger pemula tentang Strukur Dasar HTML , serta Heading dan Paragarph HTML sekarang kita lanjutkan pembahasan berikut ini tentang format font.

Meskipun blogspot atau wordpress sudah menyediakan format dan ukuran font secara instant, tetapi jenis dan warnanya terbatas. jika kita ingin berkreasi maka kita perlu memahami bagaimana tag-tag untuk format font tersebut.

Tag HTML untuk font adalah <font>…</font>, dengan tag ini kita bisa membuat format sendiri, seperti :

jenis font (face)
warna font (color), dan
ukuran font(size)

Membuat jenis font

Format font menggunakan tag <font>...</font>

Kalau ingin menggunakan jenis font tertentu maka tag dalam tag font ditambahkan face="nama font". Contoh jika kita akan menggunakan jenis font Verdana, maka tag dibuat <font face="Verdana">...</font>. Jadi dalam tag font pembuka diisi face="Verdana" , kemudian setelah teks dibuat tag penutup.

Untuk membuktikan cobalah buat script berikut pada Notepad, dan simpan dengan nama FormatFont.html

   <html>
   <head>
     <title>Format Font</title>
    </head>
    <body>
    <font face="Cooper Black">Judulnya menggunakan format font Cooper Black</font>
    <br>
    <font face="Verdana">Konten dengan menggunakan Verdana</font>
    </body>
    </html>

Setelah itu silakan dibuka , maka akan tampil pada halaman browser sebagai berikut

Mengatur Warna Font

Secara default blogspot menyiapkan format untuk warna font, tetapi tentu saja jenisnya terbatas. Untuk jenis warna lain anda harus melakukannya dalam bahasa html.
Untuk warna dalam tag font kita sisipkan attribut color, bisa menggunakan nama warna ( tentu saja dalam bahasa inggris) atau menggunakan kode warna. Penulisan kode warna di awali dengan tanda pagar

Untuk kode ini di internet banyak sekali, tetapi jika ingin warna khusus anda juga bisa menggunakan aplikasi editor photo seperti photosop.

Contoh tag warna font :
<font color="yellow">
<font color="#8A2BE2">

Untuk memahami dengan benar cobalah edit script yang dibuat sebelumnya, ditambahkan dengan tag warna sehingga menjadi :

<html>
<head>
<title>Format Font</title>
    </head>
    <body>
    <font face="Cooper Black" color="#006400">Judulnya menggunakan format font Cooper Black</font>
   <br>
    <font face="Verdana" color="red">Konten dengan menggunakan Verdana</font>
    </body>
    </html>

Tampilannya akan menjadi

Untuk mengetahui kode warna html anda bisa lihat pada link berikut http://ngeblogayo.blogspot.com/p/see-more-at-httpwww.html

Baca juga : ColorPic Version 4.1 Aplikasi Warna HTML Gratis

Mengatur Ukuran Font

Untuk mengatur ukuran fon ditambahkan atribut size. Sehingga tag-nya menjadi <font size="ukuran dari font (1-7)">. Contoh <font size="5">

Sekarang kita coba tambahkan format font pada script di atas menjadi

<html>
<head>
<title>Format Font</title>
</head>
<body>
<font face="Cooper Black" color="#006400" size="5">Judulnya menggunakan format font Cooper Black</font>
<br>
<font face="Verdana" color="red" size="3">Konten dengan menggunakan Verdana</font>
</body>
</html>

Hasilnya adalah

Sesuai dengan recomendasi dari World Web Consortium (W3C), Untuk HTML 4.0 keatas, tag <font> tidak dipergunakan lagi, sebagai gantinya dibuat tag <style> atau disebut dengan Cassading Style Sheets (CSS). Dengan CSS penggunaanya akan lebih kompleks dan lebih luas lagi karena dapat dikombinasikan dengan tag elemen-elemen lainnya di dalam dokumen HTML.

Untuk membuat jenis font (face):
<h1 style="font-family:verdana">Judul Menggunakan font verdana</h1>
<p style="font-family:tahoma">Konten menggunakan font tahoma</p>

Untuk membuat ukuran (size):
<h1 style="font-size:150%">Judul dengan ukuran 150%</h1>
<p style="font-size:80%">Konten dengan ukuran 80%</p>

Untuk membuat warna font (color):
<h1 style="color:blue">Judul dengan warna Biru</h1>
<p style="color:red">Konten dengan warna merah</p>

Contoh komplit untuk membuat jenis font (face),size dan color:

<html>
<head>
<title>Format Font</title>
</head>
<body>
<p style="font-family:Cooper Black; color:#4CDFB3; font-size:150%">Judulnya menggunakan format font Cooper Black</p><br>
<p style="font-family:verdana; color:blue; font-size:120%">Konten dengan menggunakan Verdana</p>
</body>
</html>
<html>
<head></head>
<body>

Silahkan dicoba ,dan lihat hasilnya sendiri

Thursday, February 08, 2018

Heading dan Paragraph HTML

Sekarang kita lanjutkan belajar tentang html, setelah sebelumnya saya menjelaskan untuk anda pemula/newbe tentang Struktur Dasar HTML.

Pada saat ini sebenarnya baik blogspot maupun wordpress telah menyediakan menu instan untuk melakukan format baik font maupun paragraph dan sebagainya , tetapi biasanya dalam ukuran dan jenis terbatas. Jika kita ingin melakukan kreasi dan lebih memahami tampilan web maka sebaiknya anda juga belajar format-format html tersebut.

Kali ini saya akan menguraikan tentang heading dan paragraph

Heading

Dalam penulisan html ada yang disebut tag Heading yaitu <h1></h1>, <h2></h2> dan seterusnya. Tag heading digunakan untuk judul ,bab, sub-sub bab dan lainnya. Untuk judul yang paling atas bisasnya menggunakan tag <h1></h1>. Jika ada judul bab di bawahnya menggunakan <h2></h2>. Heading mulai dari <h1></h1> sampai dengan <h6></h6> dengan tampilan <h1> ukuran font paling besar dan <h6> ukuran font yang paling kecil.

Untuk membuktikannya silakan copy script berikut pada Notepad , kemudian simpan dengan nama heading.html setelah itu cobalah file tadi dibuka.

<html>

<head>

<title>Heading</title>

</head>

<body>

<h1>Judul dengan Tag h1</h1>

<h2>Bab dengan Tag h2</h2>

<h3>Sub Bab dengan tag h3</h3>

<h4>Sub sub bab dengan tag h4</h4>

</body>

</html>

Nah jika penulisnnya benar setelah dibuka akan tampil sebagai berikut :

Paragraph

Perpindahan baris/paragraph

Dalam penulisan html suatu paragraph atau kalimat tidak akan berpindah baris kalau tidak diberi tag break (br>. Meskipun ketika mengetik di Notepad sudah dienter tetapi nanti tampilannya akan terus menyambung.

Untuk memindahkan kalimat atau paragraph ke baris berikutnya menggunakan tag break <br>. Tag ini tanpa penutup. Jadi setelah menulis kalimat tertentu isikan tag <br> kemudian ketik lagi teks berikutnya, maka nanti akan tampil di bawah tek sebelumnya.

Untuk memperjelas mari kita coba, buat script berikut pada Notepad dan simpan dengan nama paragraph.html

<html>

<head>

<title>Paragraph</title>

</head>

<body>

Kali ini saya akan mencoba untuk menulis paragrah pertama

Dan yang ini adalah paragraph kedua dengan harapan bisa berbeda baris dengan paragraph di atas

Sedangkan ini adalah kalimat penutup

</body>

</html>

Setelah disimpan, silakan dibuka dan lihat hasilnya.

Nampak bahwa semua kalimat menjadi satu.

Sekarang kita coba perbaiki scripnya dengan menambahkan tag <br> , copy script berikut pada Notepad paragraph.html.

<html>

<head>

<title>Paragraph</title>

</head>

<body>

Kali ini saya akan mencoba untuk menulis paragrah pertama<br>

Dan yang ini adalah paragraph kedua dengan harapan bisa berbeda baris dengan paragraph di atas<br>

Sedangkan ini adalah kalimat penutup

</body>

</html>

Simpan file dan pada brwoser buka kembali atau refresh , maka akan tampil adanya paragraph.

Disini hasilnya nampak bahwa kalimat ke dua berada di bawah kalimat pertama demikian juga kalimat ketiga berada di bawah kalimat kedua.

Perataan/Alignment
Tag ini berfungsi untuk mengatur tampilan perataan teks. Untuk pengaturan ini maka harus diberikan tag paragraph <p>...</p>. Jadi aturan perataan ini hanya berlaku untuk kalimat yang ada diantara kedua tag tersebut. Tag perataan diletakkan dalam tag paragraph tersebut

Ada empat jenis perataan dengan tag-nya masing-masing sebagai berikut :

Rata kiri dengan tag < p align="left">...</p>
Rata kanan dengan tag < p align="right">...</p>
Rata tengah dengan tag < p align="center">...</p>
Rata kiri-kanan dengan tag < p align="justify">...</p>

Ketentuan tag adalah teks yang berwarna biru.

Sekarang kita coba untuk memberikan perataan script di atas, sehingga menjadi

<html>

<head>

<title>Paragraph</title>

</head>

<body>

<p align="center">Kali ini saya akan mencoba untuk menulis paragrah pertama<br>

Dan yang ini adalah paragraph kedua dengan harapan bisa berbeda baris dengan paragraph di atas<br>

Sedangkan ini adalah kalimat penutup</p>

</body>

</html>

Setelah script Notepad diubah, simpan kembali dan halaman browser coba di refresh. Lihat hasilnya akan menjadi :

Sekarang silakan mencoba tag perataan yang lainnya.

Demikian dulu untuk heading dan paragraph. Semoga anda bisa lebih berkreasi setelah memahami tag heading dan paragraph ini.

Berikutnya mari kita belajar tentang Format Font

Wednesday, February 07, 2018

Belajar Dasar HTML untuk Blogger Pemula

Oke gays, khusus untuk anda blogger pemula/newbe , jika ingin mengembangkan diri dalam dunia blog maka anda dari sekarang harus mulai mengenal sedikit-demi sedikit tentang bahasa html.

HTML merupakan singkatan dari kata-kata Hypertext Markup Language

Hypertext berarti sebuah text biasa yang dapat berfungsi lain. Misalnya membuat link disatu text yang dapat berpindah dari satu halaman ke halaman lainnya hanya dengan meng-klik text itu saja. Dalam dunia blogging, ini biasa disebut link, dan di HTML kemampuan ini dinamakan hypertext.

Sementara kata Markup Language dalam HTML disematkan karena bahasanya menggunakan tanda (mark), untuk menandai bagian-bagian dari text. Misalnya, text yang berada di antara tanda tertentu akan menjadi tebal, dan di antara tanda lainnya akan tampak besar. Tanda ini akan dikenal di HTML sebagai tag.

Intinya adalah HTML merupakan bahasa dasar pembuatan web, namun bukan satu-satunya bahasa yang harus dipelajari. Karena untuk menampilkan sebuah web yang menarik tidak cukup dengan html saja.

Perlu diketahui HTML bukanlah bahasa pemprograman (programming language). Memang aneh, namun begitulah kenyataanya, karena HTML hanyalah sebuah bahasa struktur yang fungsinya untuk menandai bagian-bagian dari sebuah halaman.

Kalau bahasa pemprograman yang biasa digunakan di web cukup banyak, namun yang paling banyak digunakan dan digemari adalah JavaScript dan PHP

Baiklah kita mulai dari yang paling dasar.

Struktur Dasar HTML
Jika anda benar-benar sangat pemula, maka setidaknya anda harus mengerti dan mengetahui contoh dan strukturnya si HTML ini. Secara dasar, anda bisa melihat bagaimana struktur HTML tersebut seperti dibawah ini.

Contoh Halaman Web dengan Bahasa HTML dasar:

    <html>
    <head>
    <title></title>
    </head>
     <body>
    </body>
    </html>

Kode kode diatas di sebut tag. Tag-tag ini tidak akan tampil di halaman web, tetapi tag inilah yang akan menentukan tampilan web.

Halaman web diawali dengan tag <html> dan diakhiri dengan tag </html> di antara tag inilah isi web akan dibuat.

Setiap tag ditulis di antara <...> misalkan ; <html> , <div>, <body>, dll

Setiap tag terdiri dari tag pembuka dan tag penutup. Tag penutup sama dengan tag pembuka tetapi ditambahkan tanda garis miring di depannya.

contoh :

pembuka <html> dan penutupnya </html> , pembuka <head> dan penutupnya </head>

Tapi perlu diingat tidak semua tag menggunakan tag penutup, misalkan tag <br> atau <hr>. Fungsi tag ini kita pelajari pada waktu berikutnya.

Kembali kepada struktur dasar html, secara garis besar terdiri dari dua bagian yaitu :

1. Tag <head></head> yaitu kepala web

Pada bagian ini akan berisi judul web termasuk menu-menu web

2. Tag <body></body> yaitu badan web

Pada bagian ini tempat menulis dan mengisi halaman web

Untuk mengetahui seperti apa bentuknya, cobalah buka aplikasi Notepad , kemudian copy kode berikut :

    <html>
    <head>
    <title>HTML Pemula</title>
    </head>
     <body>
   Selamat Datang pada halaman web saya ini. Saya pemula untuk belajar html. Semoga dengan mengenal html ini saya bisa menjadi lebih memahami cara membuat web.
    </body>
    </html>

Simpan file tersebut dengan nama webku.html sedangkan typenya All Files

Sekarang cobalah buka file yang disimpan tadi maka akan tampil menjadi halaman web dengan judul HTML Pemula

Inilah tampilan web anda, nah ini baru sangat mendasar, jika ingin membuat tampilan lainnya harus belajar bahasa-bahasa yang lain.

Silakan mengikuti tulisan saya berikutnya tentang berbagai tag html.

Selamat belajar, semoga sukses, yang penting jangan pernah menyerah jika ingin menjadi blogger yang handal.

Thursday, February 01, 2018

USBN Berbasis Komputer Dengan CBT Mandiri

Aplikasi CBT Mandiri seperti UNBK Parktis dan Mudah

Aplikasi CBT Mandiri adalah aplikasi untuk penilaian tertulis berbasis komputer secara mandiri oleh sekolah. Bisa digunakan untuk ujian sekolah, ulangan semester, ulangan tengah semester mupun ulangan harian yang berbasis komputer.

Kelebihan aplikasi ini adalah :

Bisa digunakan secara offline maupun online
Menggunakan ExamBrowser Client dengan tampilan seperti UNBK.
Fitur admin sederhana berbasis wordpress dengan fitur mudah dan sederhana
Soal ditulis dengan menggunakan Ms Word yang langsung bisa dipublish
Soal bisa dilengkapi dengan simbol/Equation (untuk matematika /fisika/kimia dll)
Bisa langsung diisi suara untuk soal listening untuk Bhs Inggris
Bisa langsung diisi gambar pad Ms Word yang nanti tampil di soal
Daftar Peserta , Daftar Nilai dan Hasil test berbasis Ms Excel yang langsung bisa diupload.
Fitur pengaturan nilai dapat dilihat atau tidak setelah siswa selesai mengerjakan soal
Fitur wkatu berjalan untuk mengingatkan siswa tentang sisa waktu mengerjakan soal
Dilengkapi analisis butir soal untuk setiap mata pelajaran
Dilengkapi fitur untuk acak nomor soal dan pilihan jawaban
Dilengkapi dengan panduan tertulis lengkap setiap langkah dan video tutorial.
Aplikasi yang berlisensi gratis konsultasi dan memperoleh upgrade aplikasi secara gratis

disamping itu bagi anda yang membeli dari situs resminya akan mendapatkan tambahan bonus berupa kumpulan soal yang siap diupload serta gratis aplikasi lin yang dibutuhkan sekolah

selengkapnya silakan langsung menuju www.iwanyasa.com

Laman