Video Tutorial HTML dan CSS Membuat TopRight-Banner-MidleRight

Salam blogging sahabat blogger, video tutorial yang saya share berikut membuat layout dasar desain web dengan HTML dan CSS.

Dengan menggunakan editor Adobe Dreamweaver, semoga dengan dibuatkannya video tutorial html dan css tentang pembuatan top-right dan midle right tersebut bisa bermanfaat....

HTML 5, Membuat Tabel Belang

Pada tutorial kali ini saya akan berbagi mengenai pembuatan tabel belang-belang abu-abu gelap seperti gambar disamping itu tidaklah sulit. Dengan menggunakan sedikit code css, maka setiap sel dengan warna yang berbeda dan dalam waktu yang relatif singkat.
Oleh karena itu pada tutorial html berikut ini, akan dibuatkan css style untuk mengotomasisasikan proses pemberian warna abu-abu muda dan abu-abu tua seperti pada gambar diatas.
Untuk melakukan hal tersebut, maka teman-teman blogger khususnya teman-teman blogger Indonesia bisa menggunakan nth-of-type selector. Coba perhatikan potongan script dibawah ini:

tr:nth-of-type(even){
    background-color:#f3f3f3;
}
tr:nth-of-type(odd){
    background-color:#ddd;
}

Langkah awal, selector tersebut saya tuliskan paada tag <tr> yang merupakan tag pembuat baris tabel (tabel row). Selanjutnya, ada nilai even yang berarti genap serta odd yang berarti ganjil. Untuk baris-baris dalam urutan genap, maka akan digunakan warna abu-abu terang. Sedangkan baris-baris dalam urutan ganjil akan digunakan warna abu-abu gelap penggunaan warna untuk baris-baris tabel itu menggunakan background-color. 

Berikut script selengkapnya bisa didownload DISINI

Tutorial CSS "Input Image and teks"

Tutorial berikut adalah masih lanjutan dari tutorial sebelumnya, seperti tutorial membuat topage (leftbar). Video tutorial ini merupakan, video base learning yang diajarkan pada matakuliah html atau web design dasar. Pada blog Ilmu desain grafis ini semoga bermanfaat bagi temen-temen semua...

Step by step membuat top-page pada leftbar dengan html dan css

Berikut saya mencoba share lagi tutorial tentang html dan css. Tutorial berikut merupakan request dari mahasiswaku yang ada di Universitas Suryadarma, program studi sistem informasi. Kebetulan mendapat matakuliah HTML dasar. Nah untuk mempermudah mahasiswa untuk belajar kembali, atau untuk mengulang apa yang sudah diajarkan, saya buatkan video rekamannya. Istilah kerennya mungkin video based learning.
Langsung saja lihat video tutorialnya

Browser dan W3C Support

Untuk mengetahui support browser pada properti Background,dapat dilihat pada tabel berikut ini. Browser dan W3C Support untuk Background

Properti	Value	Browser			W3C
		IE	Firefox	Netscape
Background	background-color background-image background-repeat background-attachment background-position	4	1	6	1
Background attachment	scroll fixed	4	1	6	1
Background color	color-rgb color-hex color-name transparent	4	1	4	1
Background image	url (URL) none	4	1	4	1
Background position	top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos	4	1	6	1
Backgroundrepeat	repeat repeat-x repeat-y no-repeat	4	1	4	1

sumber tabel :www.w3schools.com

CSS Border Padding dan Margin

Assalammualaikum temen2 semua, maaf sudah beberapa hari ini saya jarang update, karena dalam masa lebaran biasa banyak kegiatan dari banyak tamu yang silaturahmi sampai jalan-jalan sama temen, maklum lah lebaran. Alhamdulillah libur sudah usai jadi balik lagi beraktifitas. Kali ini saya akan memposting beberapa pertanyaan yang sudah saya terima dari temen-temen blogger maupun mahasiswa yang bertanya tentang seputar CSS khususnya pada pembahasan CSS Border, padding dan margin. Oke langsung saja kita belajar bersama mudah2an bermanfaat bagi kita semua.....

Pengertian dari CSS Border, padding dan margin itu adalah:
# Border : Merupakan garis tepi dari komponen
# Margin : merupakan ukuran jarak bagian luar atau ukuran jarak sesudah border
# Padding : Menentukan jarak komponen body content ke border atau ukuran jarak bagian dalam

Cara penulisan dan penggunaan Kode CSS
# Border di tulis dengan CSS
border:1px dotted #000000; : artinya ukuran tebal border, style border dan warna border
atau anda bisa menuliskannya seperti ini:
border-width:1px; : adalah nilai tebal border
border-style:dotted; : adalah jenis border dan bisa anda ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainnya
atau anda bisa menuliskannya seperti ini:
border-color:#FFFFFF; : adalah warna border dan anda bisa mengganti warnanya

# Margin di tulis dengan CSS

margin:5px 5px 5px 5px; : urutan nilai angka untuk atas, kanan, bawah dan kiri
atau anda bisa menuliskannya seperti ini:
margin-left:5px; : untuk pengaturan margin bagian kiri
margin-right:5px; : untuk pengaturan margin bagian kanan
margin-top:5px; : untuk pengaturan margian bagian atas
margin-bottom:5px; : untuk pengaturan margin bagian bawah

Pada kode CSS tersebut, satuan yang digunakan adalah pixel disingkat dengan "px" yang bisa anda ganti dengan satuan lain.

# Padding ditulis dengan CSS

padding:5x 5px 5px 5px; : urutan nilai angka atas, kanan, bawah dan kiri
atau anda bisa menuliskannya seperti ini:
padding-left:5px; : untuk pengaturan padding bagian kiri
padding-right:5px; : untuk pengaturan padding kanan
padding-top:5px; : untuk pengaturan padding atas
padding-bottom:5px; : untuk pengaturan padding bawah

pada kode CSS tersebut, satuan yang digunakan adalah pixel disingkat dengan "px" yang bisa anda ganti dengan satuan lain.

Satuan dalam CSS

1. Statik

in = satuan inchi
cm = satuan centimeter
mm = satuan milimeter
pt = satuan point (1 point = 1/72 inchi)
pc = satuan pica (1 pica = 12 point)
px = satuan pixel (satu titik gambar terkecil dalam layar monitor)

2. Relatif

% = satuan persen
em atau ems = 1em = ukuran font yang tengah ada dalam elemen
ex - 1ex = x-height suatu font (x-height biasanya setengah ukuran font)

Membuat Text Decoration

Kali ini saya akan berbagi tutorial css dasar tentang teks style decoration, untuk trik berikut juga bisa membuat text decoration seperti underline, overline, line through maupun blink dengan pilihan properti.
Text-decoration : option;
Dengan option kita bisa mengganti beberapa type text decoration .
Contoh :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Decoration</title>
<style type="text/css">
#heading1 {
text-decoration : blink; /* membuat teks berkelap kelip */
}

#heading2 {
text-decoration : line-through; /* membuat garis ditengah text/ dicoret */
}

#heading3 {
text-decoration : underline; /* membuat garis bawah */
}

#heading4 {
text-decoration : overline; /* membuat garis di atas text */
}
</style>
</head>
<body>
<h1 id="heading1">Muryan Awaludin ( blink )</h1>
<h1 id="heading2">Muryan Awaludin ( line-through )</h1>
<h1 id="heading3">Muryan Awaludin ( underline )</h1>
<h1 id="heading4">Muryan Awaludin ( overline )</h1>
</body>
</html>

Hasil pada Browser :

DOWNLOAD
Password : www.ilmudesain.web.id

Membuat Teks Indent ( Paragraf yang menjorok kedalam )

Dalam pembuatan kalimat biasanya agar lebih rapih kita buatkan paragraf yang menjorokl kedalam. dengan menggunakan kode HTML kita sudah bisa membuat paragraf yang kalimat pertamanya menjorok kedalam secara otomatis. Mudah-mudahan bisa bermanfaat..langsung aja ke TKP >>
1. Tuliskan teks html seperti berikut :

<html>
<head>
<title> table html</title>
</head>
<body>
<p class="MsoNormal" style="text-align: justify; text-indent: 0.5in;">Tulisan semua ada di dalam sini....</p>
</body>
</html>

2. Apabila teks HTML di tulis dengan benar maka hasilnya akan tampak seperti gambar dibawah:


DOWNLOAD
Password : www.ilmudesain.web.id

Komentar dalam Style Sheet

Komentar biasanya digunakan oleh programmer tujuannya untuk memudahkan dan mengingat kembali script yang sudah ditulis. Comments di CSS hampir sama dengan comments di C atau C++ yaitu dengan menggunakan tanda :

/* isi comments */

Contoh :

H1 { color : red; } /*H1 elements akan menjadi merah */
body {
margin:0;
padding:0;
background:#1c1b1c;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#919191;
}/*tutup div body*/

Form dan Input Element

Tutorial kali ini saya akan berbagi tentang form dan macam-macam Input Element HTML, yang pertama kita harus tahu bagaimana sih kegunaan form. Berikut ini beberapa kegunaan form sebagai berikut :
1. Memperoleh data-data user seperti nama, alamat dan data lainnya untuk mendaftar pada service yang disediakan.
2. Memperoleh informasi pembelian secara online.
3. Memperoleh feedback dari user mengenai website sendiri.
Contoh Element Tag form digunakan untuk membuat form dalam document HTML.
Berikut contoh-contoh HTML Input Element :

<html>
<head>
<title>input element</title>
</head>
<body>
<form>
<input type="button" name="button" value="kirim/submit"><br><br>

<input type="text" name="text" size="30"> <br><br>

<input type="radio" name="sex" value="male"/> Male
<br />
<input type="radio" name="sex" value="female" /> Female
<br>
<br>

Adobe Photoshop:
<input type="checkbox" name="vehicle" value=" Adobe Photoshop " />
<br />
Adobe Flash:
<input type="checkbox" name="vehicle" value="Adobe Flash" />
<br />
Adobe Dreamweaver:
<input type="checkbox" name="vehicle" value="Adobhttp://www.blogger.com/img/blank.gife Dreamweaver" />

</form>
</body>
</html>

Hasil pada Browser :

DOWNLOAD
Password : www.ilmudesain.web.id

Insert Image ke Document

Nah sekarang tutorial kali ini saya akan mengajak temen2 belajar bareng insert atau memasukan ataupun menampilkan gambar kedalam halaman browser, ya udah langsung saja biar ga kelamaan...
Ada banyak format gambar, tapi ada tiga jenis format yang paling sering digunakan :
1. JPEG ( Joint Photographic Expert Image )
2. PNG ( Portable Network Graphics )
3. GIF ( Graphical Interchange Format )

Tag img di gunakan untuk membarikan gambar ke dalam dokument HTML.
Contoh :
1. Contoh insert gambar dengan mengambil link di internet:

<html>
<head>
<title> insert gambar link </title>
</head>
<body>
<img src="http://img442.imageshack.us/img442/3669/muryanawaludin.jpg" width="104" height="142" />
</body>
</html>

Hasilnya :
KLIK DISINI

2. Contoh insert gambar pada komputer offline :
Untuk mengambil gambar di komputer offline, sebelumnya kita harus membuat folder sendiri, kemudian file html dan file gambar dimasukan dalam 1 folder tersebut.

<html>
<head>
<title> insert gambar di komputer </title>
</head>
<body>
<img src="../ilmudesain/hyperlink.jpg" />
</body>
</html>

Keterangn : "..    = mencari lokasi folder
       /ilmudesain   = nama folder
      /hyperlink.jpg"  = nama file gambar

Hasil pada browser :


DOWNLOAD
Password : www.ilmudesain.web.id

Merge Cell (colspan dan rowspan)

Colspan dan rowspan adalah html attribute yang digunakan untuk memperlebar atau menggabungkan beberapa kolom atau row menjadi satu, sehingga satu unit kolom atau row ini menjadi lebih lebar. Colspan adalah kependekan dari “column span” yang bisa mengartikan sebagai “berapa kotak kesamping” sedangkan rowspan mengartikan “berapa kotak kebawah”.
Contoh :

<html>
<head>
<title>Colspan dan Rowspan</title>
</head>
<body>
<table bgcolor="#CCCFF" width="65%" border="1" cellpadding="0">
<tr>
<td colspan="3" align="center">Desain 1 ( Muryan Awaludin )</td>
<td colspan="3" align="center">Desain 2 ( Muryan Awaludin )</td>
</tr>
<tr align="center">
<td> Adobe Photohop</td>
<td> Adobe Dreamweaver</td>
<td> Adobe Illustrator</td>
<td> Adobe Flash</td>
<td> Adobe Pagemaker</td>
<td> Adobe InDesign</td>
</tr>
<tr align="center">
<td> Januari</td>
<td> Februari </td>
<td> Maret </td>
<td> April </td>
<td> Mei </td>
<td> Juni </td>
</tr>
<tr align="center">
<td> 9 kali pertemuan</td>
<td> 12 kali pertemuan </td>
<td> 9 kali pertemuan </td>
<td> 9 kali pertemuan </td>
<td> 9 kali pertemuan </td>
<td> 9 kali pertemuan </td>
</tr>
</table>
</body>
</html>

Hasil di browser :

DOWNLOAD TUTORIAL Merge Cell (colspan dan rowspan)
Password Rar: www.ilmudesain.web.id

Tabel HTML

Tag table digunakan untuk membuat tabel dalam document HTML. Sebuah meja dibagi ke dalam baris (dengan tag tr), dan setiap baris data dibagi ke dalam sel (dengan tag td). Surat-surat td singkatan dari "data tabel", yang merupakan isi sel data. Sebuah sel data dapat berisi teks, gambar, daftar, paragraf, form, aturan horisontal, meja, dll.
Contoh :

<html>
<head>
<title> table html</title>
</head>
<body>
<table border="1">
<tr>
<td>Baris 1,Kolom 1</td>
<td> Baris 1,Kolom 2</td>
</tr>
<tr>
<td> Baris 2, Kolom 1</td>
<td> Baris 2, Kolom 2</td>
</tr>
</table>
</body>
</html>

Hasil tampilan pada browser :

Hyperlink

1. Link Address
Absolut address merupakan full internet address (URL) yang meliputi protokol, network location, path dan nama file.
Contoh : http://profile.net84.net/profile.php

2. Link ke Document Lain
Untuk membuat link ke document lain, kita harus mempunyai minimal 2 halaman link, misalkan saya ada nama halaman1.html dan halaman2.html :
Contoh :
halaman1.html

<html>
<head>
<title> Muryan Awaludin-Halaman 1</title>
</head>
<body>
<center><h1>Creating Link</h1></center>
<br>
<center>h3><<a href="halaman2.html"> Klik disini untuk link ke halaman2</a>></h3></center>
</body>
</html>

halaman2.html

<html>
<head>
<title> Muryan Awaludin-Halaman 2</title>
</head>
<body>
<center><h1>Creating Link</h1></center>
<br>
<center><h3><a href="halaman2.html"> Klik disini untuk link ke halaman1</a></h3></center>
</body>
</html>

Hasilnya :


DOWNLOAD
Password : www.ilmudesain.web.id

Grouping Element

Tag DIV dan SPAN berfungsi untuk mengelompokan element-element HTML. SPAN digunakan untuk mendefinisikan inline content, sementara DIV digunakan untuk blok-level content.
Contoh :

<html>
<head>
<title> DIV dan SPAN</title>
</head>
<body>
<div>
Muryan Awaludin ( HTML DASAR bagian 6 )
<p>
Div tag digunakan untuk mengelompokkan group element. Biasanya untuk block level element.
</p>
<div>
<div align="right">
Muryan Awaludin ( HTML DASAR Bagian 6 - Kanan )
<p>
Tulisan ini ada didalam Muryan Awaludin ( html dasar bagian 6 rata kanan ).
</p>
</div>
<span style="font-size:30; color:red">
Baris ini merupakan didalam span yang mempunyai warna Merah.
</span>
</body>
</html>

Hasilnya :


DOWNLOAD

Performatted Text

Tag PRE berfungsi untuk menampilkan text sesuai dengan format aslinya.
Contoh :

<html>
<body>
<pre>
Ini Adalah
Tutorial tentang preformatted text.
Berbagi ilmu desain grafis dan menjadi media pembelajaran online,
website pendidikan ilmu desain grafis untuk menambah pengetahuanan.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 100
print i
next i
</pre>
</body>
</html>

Hasilnya :

Quotes / Indentasi

Indentasi adalah penulisan paragraf yang agak menjorok masuk ke dalam. Untuk membuat indenatasi paragraph kita bisa menggunakan BLOCKQUOTE dan untuk menggunakan indentasi pendek anda bisa gunakan element Q.
Contoh :

<html>
<head>
<title> Formating Font</title>
</head>
<body>
<font color="green" size="5">
Muryan Awaludin ( HTML DASAR )
</font>
<p> Berbagi ilmu desain grafis dan menjadi media pembelajaran online,website pendidikan ilmu desain grafis untuk menambah pengetahuan.
<blockquote>
Website pendidikan tentang ilmu desain grafis dan tutorial desain grafis baik dari tingkat pemula sampai tingkat lanjut semuanya dapat di download gratis namun tidak merubah atribut penulis dan bukan untuk tujuan komersial.
</blockquote>
Membahas tentang : ilmu desain grafis, desain desain, ilmu grafis, tutorial photoshop, tutorial desain, tutorial, Adobe Photohsop, Adobe PageMaker, Corel Draw,Adobe Flash CS,Tutorial CSS, CSS, Tips Trik desain grafis, ilmu grafis, Illustrator, Microsoft PAINT, e-book gratis, Graphics Design, Dreamweaver, PageMaker, Software, InDesign, Anti Virus, Download Antivirus Smadav, Download Antivirus Artav, free download ebook, facebook ,Les Private Desain grafis,Pesta Blogger, keygen, crack, skripsi, serial number, digital imaging, drawing and painting
</p>
</body>
</html>

Hasilnya :


DOWNLOAD FILE
Password : www.ilmudesain.web.id

Format Halaman Break dan Font

1. Break
Tag break digunakan untuk memulai baris baru pada document HTML, tag ini fungsingya mirip dengan carriage return.
Contoh :

<html>
<head>
<title> Break Line</title>
</head>
<body>
<h2> Muryan Awaludin HTML</h2>
<p>Berbagi ilmu desain grafis dan menjadi media pembelajaran online<br>
website pendidikan ilmu desain grafis untuk menambah pengetahuan<br>
</p>
</body>
</html>

2. Font
Dengan Tag font anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lain sebaginya.
Contoh :

<html>
<head>
<title> Format FONT</title>
</head>
<body>
<font color="blue" size="7"> Muryan Awaludin HTML</font>
<p>
<font face="verdana, arial, Courier, mono">
Berbagi ilmu desain grafis dan menjadi media pembelajaran online,website pendidikan ilmu desain grafis untuk menambah pengetahuan tentang Ilmu Desain Grafis, Tutorial Adobe Photohsop, Tutorial Adobe Illustrator, Tutorial Adobe Flash, Tutorial Adobe Dreamweaver, Tutorial Corel Draw, Tutorial Adobe Page Maker, Tutorial Paint, ebook desain grafis, font dan brush desain, free software desan grafis, Peduli Blogger, Pesta Blogger, Internet Sehat, Crack dan Keygen Software dan lain sebagainyahttp://www.blogger.com/img/blank.gif...
</font>
</p>
</body>
</html>

DOWNLOAD

LI, UL dan OL ( BASE HTML BAG-3)

Tutorial HTML DASAR ( Bagian 3 )
List Item ( LI )
List Item digunakan untuk mengelompokan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list ).
Contoh :
1. Unordered List ( Bullet )

<html>
<head>
<title> Unordered list</title>
</head>
<body>
<p>Muryan Awaludin</p>
<ul>
<li>Adobe Photoshop</li>
<li>Adobe Illustrator</li>
<li>Adobe Flash</li>
<li>Adobe Dreamweaver</li>
<li>Adobe InDesign</li>
<li>Adobe Page Maker</li>
</ul>
</body>
</html>

Maka akan tampak pada browser :


2. Ordered List ( Numbering )

<html>
<head>
<title> Ordered List</title>
</head>
<body>
<p>Muryan Awaludin</p>
<ol>
<li>Tutorial Corel Draw</li>
<li>Tutorial CSS</li>
<li>Free ebook desain</li>
<li>Free Software desain</li>
<li>Free FONT design</li>
<li>Free Brush desing</li>
</0l>
</body>
</html>

Maka akan tampak pada browser :


DOWNLOAD TUTORIAL LI, UL dan OL ( BASE HTML BAG-3)

Struktur HTML Document

Tutorial kali ini adalah lanjutan dari Tutorial HTML Dasar (Bag 1). Selanjtnya Struktur HTML Document adalah Tutorial HTML Dasar bagian ke-2. Dokument HTML dibagi menjadi 3 bagian :
1. HTML
Setiap document HTML harus diawali dan ditutup dengan tag HTML
contoh :

<html> </html>

Tag HTML diatas tersebut adalah tampilan document HTML

2. HEAD
Pada bagian header ditulis dengan tag sebagai berikut :

<head></head>

Header juga memuat tag META yang bisanya digunakan untuk menentukan informasi mengenai document HTML, kamu bisa menentukan author name, keyword, distribution, googlebot, msnbot, MSSmartTagsPreventParsing, generator, rating, robots, creator, copyright, google-site-verification dan lainnya pada tag META.
Contoh :

<META name="Author" contents="Ilmu Desain Grafis">

Author dari document tersebut adalah "Ilmu Desain Grafis"
Atribut http-equiv dapat digunakan untuk meletakkan nama HTTP Server untuk menciptakan HTTP header
contoh :

<META http-equiv="Expires" content="Wed, 1 July 2011 10:03 GMT">

yang akan menampilkan HTTP header :
Expires:Wed,1 July 2011 10:03 GMT
Sehingga jika document di cached, HTTP akan mengetahui kapan untuk mengupdate document tersebut pada cache.

3. BODY
Document body digunakan untuk menampilkan teks, image, link, dan semua yang akan ditampilkan pada halaman web

<html>
<head>
<title> Muryan Awaludin</title>
</head>
<body bgcolor="blue">
<p> Tampilan document HTML </p>
</body>
</html>