A Say Science!

Kamis, 26 Mei 2016

Hyperlink pada HTML

Unknown 19.30 HTML, IT, Programming, Tutorial

Hay sob, kali ini saya akan membagikan materi tentang bagaimana membuat sebuah link pada sebuah HTML. Jika biasanya kalian membuka sebuah halaman web atau blog dan disana terdapat sebuat teks atau gambar yang jika kalian klik maka akan menuju sebuah halaman web lain atau file lain, maka itulah yang dimaksud dengan hyperlink.

Syntak :

Pada syntak tersebut, elemen yang kita pelajari adalah elemen A. Elemen a ini memiliki beberapa atribute, yaitu href, name, dan target. Attribute href berfungsi sebagai hypertext reference yang mempunyai nilai URI (uniform resource identifier) yang akan menghubungkan ke eksternal halaman web. Attribute name berfungsi untuk menghubungkan ke tempat tujuan dalam halaman web (anchor). Attribute target berfungsi untuk menampilkan halaman web pada suatu jendela frame atau jendela baru.

Nah langsung seperti biasa, Untuk mempermudah pemahaman, silahkan pelajari script berikut dengan copy dan simpan dengan nama terserah anda (jangan lupa tambahkan ekstensi .html) lalu jalankan dengan web browser.

<html>

<head>

<title>Latihan6-2</title>

</head>

<body>

<h1>Hyperlink pada HTML</h1>

Ini adalah link menuju <a href="http://www.google.com">google</a><br>

Dibawah adalah contoh link internal dan anchor adalah link yang menunjuk ketempat yang ada dalam dokument ini.<br>

<br>

<a href="#akhir">kebagian akhir</a>

<p>paragraf pertama. paragraf pertama. paragraf pertama. paragraf pertama.

paragraf pertama. paragraf pertama. paragraf pertama. paragraf pertama.

paragraf pertama. paragraf pertama. paragraf pertama. paragraf pertama. </p>

<p>paragraf kedua. paragraf kedua. paragraf kedua. paragraf kedua.

paragraf kedua. paragraf kedua. paragraf kedua. paragraf kedua.

paragraf kedua. paragraf kedua. paragraf kedua. paragraf kedua. </p>

<p>paragraf ketiga. paragraf ketiga. paragraf ketiga. paragraf ketiga.

paragraf ketiga. paragraf ketiga. paragraf ketiga. paragraf ketiga.

paragraf ketiga. paragraf ketiga. paragraf ketiga. paragraf ketiga. </p>

<p>paragraf keempat. paragraf keempat. paragraf keempat. paragraf keempat.

paragraf keempat. paragraf keempat. paragraf keempat. paragraf keempat.

paragraf keempat. paragraf keempat. paragraf keempat. paragraf keempat. </p>

<p>paragraf kelima. paragraf kelima. paragraf kelima. paragraf kelima.

paragraf kelima. paragraf kelima. paragraf kelima. paragraf kelima.

paragraf kelima. paragraf kelima. paragraf kelima. paragraf kelima. </p>

<a href="#pertama">kebagian pertama</a>

</body>

</html>

Sekian untuk materi kali ini, selamat belajar dan mencoba. Terima kasih ^_^

Membuat Tabel Pada HTML

Unknown 12.30 HTML, IT, Programming, Tutorial

Pada kesempatan kali ini saya akan membagikan materi bagaimana cara membuat tabel didalam tampilan web menggunakan bahasa pemrograman HTML.

Untuk lebih jelas kita pelajari terlebih dahulu dasar-dasar atau element-elementnya.

ELEMENT TABLE
Element TABLE memiliki fungsi untuk membuat suatu data yang terdiri atas kolom dan baris. Element ini mempunyai attribute seperti align untuk perataan teks, bgcolor untuk warna background, border untuk garis tepi, cellpadding untuk jarak antara tepi sel dengan isi sel, cellspacing untuk jarak antara sel, width untuk lebar tabel, height untuk tinggi tabel. Element TABLE berisikan element CAPTION, TH, TR dan TD.

Sintaks:
<table
align="left"|"center"|"right"
bgcolor="color"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
width="pixel"|"%"
height="pixel"|"%" >
........................
</table>

ELEMENT CAPTION
Element CAPTION berfungsi untuk membuat judul dari sebuah tabel yang kita buat. Element ini harus ada dalam element TABLE dan mempunyai attribute align dengan nilai top atau judul terletak di atas tabel, dan bottom atau judul terletak di bawah tabel.

Sintaks:
<caption align="top"|"bottom">
..........................
</caption>

ELEMENT TR (Table Row)
Element TR berfungsi mendefinisikan baris pada sebuah tabel, element ini harus berada di dalam element TABLE. Pada element TR terdapat element TH dan TD. Attribute yang terdapat pada element ini adalah align, valign(posisi vertikal), dan bgcolor.

Sintaks:
<tr
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color">
..........................
</tr>

ELEMENT TH (Table Header) dan TD (Table Data)
Element TH dan TD merupakan sebuah informasi yang terdapat pada tabel. TH mendefinisikan isi sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel. Element TH dan TD ini harus terletak di dalam element TR. Attribute kedua element ini adalah align, valign, bgcolor, colspan, rowspan

Sintaks:
<th
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</th>

<td
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</td>

Untuk menambah pemahaman seperti biasa silahkan kalian copy dan simpan source code html berikut dan simpan dengan nama terserah anda.

<html>
<head>
<title>Latihan membuat tabel dalam HTML</title>
</head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel daftar barang</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Daftar barang</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>CPU</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>Monitor</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>Mouse</td>
</tr>
</table>
</body>
</html>

Sekian materi untuk kali ini, selamat belajar dan mencoba ^_^

Membuat daftar urut dalam HTML

Unknown 06.00 HTML, IT, Programming, Tutorial

Kali ini saya akan membagikan tutorial bagaimana cara membuat daftar urut atau biasanya lebih diketahui dengan sebutan bullet atau numberin. Lalu bagaimana caranya? Langsung saja kita pelajari dasar-dasarnya dulu

ELEMENT OL (Orderd List)
Element OL berfungsi untuk membuat nomor dalam daftar urut. Element ini mempunyai beberapa attribute yaitu start, dan type. Attribute start memiliki fungsi untuk memberi nilai awal dari daftar urut, attribute type berfungsi untuk memilih bentuk daftar urut yaitu A untuk abjad huruf besar,a untuk abjad huruf kecil, I untuk abjad romawi besar, i untuk abjad romawi kecil, 1 untuk angka decimal (default: start="1" type="1" ). Dalam element OL harus terdapat beberapa element LI.

Sintaks:
<ol start="number" type="x ">
........................
</ol>

X= "A"|"a"|"I"|"i"|"1"

ELEMENT UL (Unordered List)
Element UL memiliki fungsi untuk membuat daftar tanpa nomor urut (bullet atau simbol). Element ini mempunyai attribute yaitu type. Attribute type berfungsi untuk memilih bentuk bullet yang digunakan. Nilai dari pada attribute type ini adalah "circle", "square" dan "disc" . Dalam element UL harus terdapat beberapa element LI.

Sintaks:
<ul type="x ">
..........................
</ul>

X="circle"|"square"|"disc"

ELEMENT LI (List Item)
Element LI merupakan isi pada daftar. Element ini harus berada di dalam element OL atau UL. Element ini mempunyai attribute type dan value. Nilai attribute type adalah A, a, I, i, 1, circle, square, disc dan attribute value berisikan nilai nomor urutan dari attribute type.

Sintaks:
<li type="x ">
..........................
</li>

X="A"|"a"|"I"|"i"|"1"|"circle"|"square"|"disc"

Untuk mempermudah pemahaman, silahkan pelajari script berikut dengan copy dan simpan dengan nama terserah anda (jangan lupa tambahkan ekstensi .html) lalu jalankan dengan web browser.

<html>
<head>
<title>Belajar membuat daftar urut</title>
</head>
<body>
Daftar belanja:
<ol>
<li>Beras</li>
<li>Gula</li>
<li>Teh</li>
<li>Kopi</li>
<li>Minyak </li>
</ol>
</body>
</html>

Sekian untuk materi kali ini, selamat belajar dan mencoba. Terima kasih ^_^

Rabu, 25 Mei 2016

Memasukan dan Menampilkan Gambar Pada HTML

Unknown 19.30 HTML, IT, Programming, Tutorial

Web tanpa gambar pastilah kurang menarik. Nah, pada materi kali ini saya akan memberi tutorial bagaimana memasukan dan menampilkan gambar dengan bahasa pemrograman HTML. Langsung saja kita pelajari syntak berikut:

Dari syntak tersebut kita melihat beberapa atribut yang bisa kita beri dalam elemen img dan tidak mempunyai tag penutup.Attribut yang dapat kita beri untuk menyeting gambar antara lain yaitu: align berfungsi untuk mengatur posisi gambar, bisa berupa left, right, top, middle dan bottom.

· alt berfungsi untuk menampilkan teks alternatif jika gambar tidak tampil karena eror atau kesalahan lain.
· Border berfungsi untuk mengatur garis tepi.
· Height berfungsi mengatur tinggi gambar yang akan ditampilkan.
· Width berfungsi mengatur lebar gambar yang akan ditampilkan.
· hspace berfungsi mengatur jarak kosong dengan gambar dari posisi horizontal.
· vspace berfungsi mengatur jarak kosong dengan gambar dari posisi vertical.
· src merupakan lokasi dari gambar itu disimpan beserta nama file-nya.

Sekian untuk materi kali ini, selamat belajar dan mencoba ^_^

Format Teks Dalam HTML

Unknown 02.24 HTML, IT, Programming, Tutorial

Setelah materi sebelumnya kita mengenal HTML dan struktur dasar HTML, maka kali ini kita akan mempelajari bagaimana cara membuat format teks seperti membuat tulisan bercetak tebal, miring, bergaris bawah dan lain sebagainya. Untuk itu langsung saja:

ELEMENT BR (Line Break)
Element BR berfungsi untuk mengganti barisan teks, gambar, atau yang lain sebagainya. Dan element BR ini tidak mempunyai tag penutup.

Sintaks:
<br>

ELEMENT P (Paragraph)
Element P berfungsi untuk membuat sebuah paragraf yang diikuti dengan baris kosong di awal dan akhir paragraf.

Sintaks:
<p align="left"|"center"|"right">
..........................
</p>

Tag penutup </p> sifatnya optional jika suatu paragraf diikuti oleh paragraf berikutnya. Jika tag </p> diabaikan, maka paragraf itu tidak akan diikuti dengan baris kosong di akhir paragraf.
Element P mempunyai attribute yaitu align yang bernilai "left", "center", "right" yang menspesifikasikan posisi tepi horizontal dari paragraf (default: "left").

ELEMENT H (Heading)
Element Heading berfungsi untuk membuat heading dengan format 6 jenis ukuran huruf dan tercetak tebal. Nilai ukuran huruf terbesar adalah H1 dan terkecil adalah H6. Element ini mempunyai attribute yaitu align yang bernilai "left", "center", "right" yang menspesifikasikan posisi horizontal dari header (default: "left").

Sintaks:
<hx align="left"|"center"|"right">
..........................
</hx>

X=1/2/.../6

ELEMENT B (Bold)
Element B berfungsi untuk membuat tampilan teks tercetak tebal (bold).

Sintaks:
<b>
..........................
</b>

ELEMENT I (Italic)
Element I berfungsi untuk membuat tampilan teks tercetak miring (italic).

Sintaks:
<i>
..........................
</i>

ELEMENT U (Underline)
Element U berfungsi untuk membuat tampilan teks tercetak garis bawah (underline).

Sintaks:
<u>
..........................
</u>

ELEMENT PRE (Preformated text)
Element PRE berfungsi untuk menampilkan teks seperti apa adanya yang dituliskan.

Sintaks:
<pre>
..........................
</pre>

ELEMENT CENTER
Element CENTER berfungsi untuk menampilkan teks dengan posisi horizontal ditengah atau center.

Sintaks:
<center>
..........................
</center>

ELEMENT BASEFONT
Element BASEFONT berfungsi untuk merubah dasar ukuran huruf tampilan dari web browser. Attribute dari element ini adalah size yang merupakan ukuran huruf dengan nilai "1" sampai dengan "7" dalam ukuran pixel, atau bisa berupa ukuran relatif ( + atau - ), huruf secara default adalah "3" pixel. Element ini tidak mempunyai tag penutup.

Sintaks:
<basefont size="pixel">

ELEMENT FONT
Element FONT berfungsi untuk merubah jenis huruf, ukuran huruf dan warna dari tampilan huruf. Element ini mempunyai attribute color yang berfungsi untuk merubah warna huruf, face untuk merubah jenis huruf (jika lebih dari satu jenis huruf, dipisah dengan koma), dan size untuk merubah ukuran huruf (pixel).

Sintaks:
<font color="warna" face="font" size="pixel">
..........................
</font>

ELEMENT HR (Horizontal Rule)
Element HR berfungsi untuk membuat suatu garis horizontal. Element ini tidak mempunyai tag penutup dan mempunyai attribute align untuk menempatkan posisi secara horizontal baik secara center, left atau right, size untuk ukuran ketebalan garis (pixel), width untuk ukuran panjang garis (persen), dan noshade (garis solid).

Sintaks:
<hr align="left"|"center"|"right" size="pixel" width="persen" noshade>

Untuk mempermudah pemahaman silahkan copy script html berikut dan simpan dengan nama terserah anda lalu jalankan dengan web browser.

<html>

<head>

<title>Belajar format teks HTML</title>

</head>

<body>

Belajar bahasa pemgrograman web.<br>

Dengan materi format teks dasar HTML.<br>

Tampilan teks sebelum paragraf.

<p>Tampilan teks paragraf pertama.</p>

<p>Tampilan teks paragraf kedua.</p>

Tampilan teks setelah paragraf.

p>Paragraf ini pada posisi rata kiri (default)</p>

<p align="center">Paragraf ini pada posisi rata tengah</p>

<p align="right">Paragraf ini pada posisi rata kanan</p>

<p align="left">Paragraf ini pada posisi rata kiri</p>

<h1>Ini Heading-1</h1>

<h2>Ini Heading-2</h2>

<h3>Ini Heading-3</h3>

<h4>Ini Heading-4</h4>

<h5>Ini Heading-5</h5>

<h6>Ini Heading-6</h6>

<b>Ini teks tercetak tebal (bold)</b><br>

<i>Ini teks tercetak miring (italic)</i><br>

<u>Ini teks tercetak garis bawah (underline)</u>

</body>

</html>

Semoga artikel materi yang saya buat ini bermanfaat. Selamat belajar dan mencoba ^_^

Minggu, 08 Mei 2016

Mengenal HTML dan HTML Dasar

Unknown 07.59 HTML, IT, Programming, Tutorial

HTML atau singkatan dari HyperText Markup Language adalah bahasa pemrograman web dasar atau script untuk membuat dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan terdapat tag-tag yang memerintahkan web browser untuk mengeksekusi perintah yang diberikan.
Struktur dasar dokumen HTML adalah sebagai berikut:
<html>
<head>
<title>Disini adalah judul web yang kita buat</title>
</head>
<body>
Disini adalah isi dari document web yang kita buat dan ditampilkan di web browser
</body>
</html>

Jika diperhatikan, struktur HTML mirip seperti halnya dengan roti isi yaitu jika kita memberi tag pembuka maka kita harus memberi tag penutup.
Berikut adalah penjelasan lebih rinci dari struktur HTML diatas:

Tag
Tag Adalah sebuah teks khusus (markup) berupa dua karakter yaitu "<" dan ">". sebagai contoh <body> adalah tag dengan nama body.
Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"). sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML. Jadi jika saat kita membuat tag pembuka dan lupa membuat tag penutup, ini dapat menyebabkan perintah tersebut tidak terlaksana atau bisa menyebabkan eror pada bagian tertentu pada documen web yang kita buat.

Element
Element dalam HTML terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana:

<title> ini adalah tag pembuka judul dokumen HTML
Disini adalah Judul Dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML

Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.
Contoh penulisan tag-tag yang benar

<p>
<b>
................
</b>
</p>

Contoh penulisan tag-tag yang salah

<p>
<b>
................
</p>
</b>

Atribut
Attribute dalam HTML berfungsi mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Syntax atau penulisannya adalah sebagai berikut:

<TAG
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
>
.................
</TAG>

Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk latarbelakang halaman web menjadi biru, maka penulisannya adalah

<body bgcolor="blue">
.................
</body>

Element html
Element html berfungsi untuk menyatakan pada browser bahwa dokumen Web yang digunakan adalah documen HTML.

Sintaks:
<html>
..........
</html>

Element head
Element head merupakan bagian kepala dari dokumen HTML.

Sintaks:
<head>
...........
</head>

Element title
Element title berfungsi untuk membuat judul pada dokumen HTML yang nantinya akan ditampilkan pada judul jendela browser. Tag ini terletak di antara tag <head> dan tag </head>

Sintaks:
<title>
.........
</title>

Element body
Element body adalah element yang berfungsi untuk menampilkan isi dari dokumen HTML yang kita buat. Tag ini terletak di bawah tag <head> dan tag </head>.
Element body ini mempunyai beberapa attribute-attribute yang menspesifikasikan perintah khususnya warna dan latarbelakang dokumen yang akan ditampilkan pada browser.

Sintaks:
<body text="v" bgcolor="w" background="url" link="x" alink="y" vlink="z">
..............
</body>

Attribute text memberikan warna pada teks, bgcolor memberikan warna pada latarbelakang dokumen HTML, background memberikan latarbelakang dokumen HTML dalam bentuk gambar, link memberikan nilai warna untuk link, alink memberikan warna untuk link yang sedang aktif, vlink memberikan warna untuk link yang telah dikunjungi.
Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute background yang akan digunakan, akan tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan.

Untuk menambah pemahaman tentang materi diatas silahkan copy syntax HTML berikut, simpan dengan nama terserah anda dan jalankan pada web browser.

<html>
<head>
<title>Belajar HTML</title>
</head>
<body text="white" bgcolor="black">
Belajar HTML itu mudah!
</body>
</html>

Sekian penjelasan tentang mengenal HTML dan HTML dasar, semoga dapat bermanfaat untuk anda ^_^

Mengenal Desain Grafis

Unknown 06.27 design

Desain grafis mungkin bukanlah kata asing bagi orang-orang, bahkan dalam dunia keseharian kita sering mendengar kata desain grafis. Lalu apa sih arti desain grafis itu?? Lalu seperti apakah wujud desain grafis itu??. Nah, pada artikel ini kita akan mengenal tentang apa itu desain grafis dan aplikasi apa saja yang digunakan untuk membuat desain grafis.

Pengertian
Definisi dari Desain grafis adalah seni dalam berkomunikasi dalam bentuk tulisan, ruang, dan gambar. Bidang seni ini merupakan bagian dari komunikasi visual yaitu komunikasi lewat penglihatan (dalam bentuk gambar). Ilmu dari desain grafis ini antara lain mencakup seni visual, tipografi, tata letak, dan desain interaksi.

Seni visual dalam desain grafis biasanya berupa fotografi, kartun, dan lain-lain.

Tipografi adalah suatu keterampilan menyusun dan memodifikasi huruf atau tulisan. Dalam hal ini yang dimaksud adalah seperti mengatur jarak antar huruf dalam tulisan, mengatur jarak antar baris tulisan, tegak atau miringnya suatu huruf, dan lain-lain. Hal ini dimaksudkan agar orang yang membaca huruf atau tulisan tersebut dapat tertarik dan merasa nyaman saat melihat dan membaca huruf atau tulisan tersebut.

Tata letak adalah suatu teknik dalam seni menyusun suatu tata letak suatu konten. Yang dimaksud dalam hal ini adalah semisal mengatur tata letak suatu konten dalam majalah atau koran, mengatur tata letak suatu tulisan dan gambar pada poster, dan masih banyak lainnya.

Desain interaksi atau biasa disebut Graphical User Interface (GUI) adalah mengatur tampilan perangkat lunak atau web agar terlihat nyaman dan mudah digunakan oleh pengguna.

Aplikasi atau software yang digunakan untuk membuat disain grafis
Sebenarnya dalam disain grafis ini bukanlah hal yang mutlak tetapi aplikasi ini berperan hanya sebagai pendukung, karena pada dasarnya dalam dunia desain grafis yang diutamakan adalah kreatifitas. Aplikasi yang saya list dibawah hanya sebagai pilihan. Anda tidak akan dituntut menguasai semua software tersebut, karena setiap dari software tersebut memiliki karakteristik tertentu (misalnya adobe photoshop sangat handal digunakan untuk mengedit foto dan adobe indesign sangat handal digunakan untuk mengatur tata letak atau menglayout majalah atau sebagainya), tetapi jika anda bisa menguasai beberapa maka itu akan lebih baik. Berikut adalah beberapa software yang paling populer digunakan oleh para desaigner adalah sebagai berikut :
1. Adobe Photoshop
2. Adobe Illustrator
3. CorelDraw
4. Adobe InDesign
5. Paint Tool Sai
6. GIMP
7. Inkscape
8. Clip Studio Paint

Sekian untuk pengenalan tentang desain grafis dari saya, jika ada kekurangan atau pertanyaan silahkan beri komentar di kolom komentar. Terima kasih telah membaca!

A Say Science!

Featured Post Via Labels

Kamis, 26 Mei 2016

Hyperlink pada HTML

Membuat Tabel Pada HTML

Membuat daftar urut dalam HTML

Rabu, 25 Mei 2016

Memasukan dan Menampilkan Gambar Pada HTML

Format Teks Dalam HTML

Minggu, 08 Mei 2016

Mengenal HTML dan HTML Dasar

Mengenal Desain Grafis

Join on Facebook

Popular Posts

Labels

About me

Submenu Section

Slider Section

Blog Archive

Subscribe

Pages

recent posts

Flickr Images

Like us on Facebook

@Templateism

Instagram Photo Gallery

Instagram

A Say Science!