Free download

News Update :
Powered by Blogger.
Showing posts with label Tutorial CSS. Show all posts
Showing posts with label Tutorial CSS. Show all posts

Browser dan W3C Support

Penulis : MJH 08 on Wednesday, May 9, 2012 | 6:01 PM

Wednesday, May 9, 2012

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



comments | | Read More...

CSS Border Padding dan Margin

Penulis : MJH 08 on Wednesday, September 7, 2011 | 7:04 PM

Wednesday, September 7, 2011

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
comments | | Read More...

Membuat Text Decoration

Penulis : MJH 08 on Saturday, August 20, 2011 | 7:51 AM

Saturday, August 20, 2011


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 :

comments | | Read More...

Membuat Teks Indent ( Paragraf yang menjorok kedalam )

Penulis : MJH 08 on Sunday, August 7, 2011 | 9:05 PM

Sunday, August 7, 2011


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 :



table html


comments | | Read More...

Komentar dalam Style Sheet

Penulis : MJH 08 on Saturday, July 30, 2011 | 8:15 PM

Saturday, July 30, 2011

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;
comments | | Read More...

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
comments | | Read More...

Insert Image ke Document

Penulis : MJH 08 on Friday, July 29, 2011 | 2:20 AM

Friday, July 29, 2011

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
comments | | Read More...

Merge Cell (colspan dan rowspan)

Penulis : MJH 08 on Wednesday, July 27, 2011 | 6:45 PM

Wednesday, July 27, 2011

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 :Colspan dan Rowspan<
comments | | Read More...

Tabel HTML

Penulis : MJH 08 on Tuesday, July 26, 2011 | 6:35 PM

Tuesday, July 26, 2011

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 : table html
comments | | Read More...

Hyperlink

Penulis : MJH 08 on Monday, July 25, 2011 | 6:36 PM

Monday, July 25, 2011

1. Link AddressAbsolut address merupakan full internet address (URL) yang meliputi protokol, network location, path dan nama file.Contoh : http://profile.net84.net/profile.php2. Link ke Document LainUntuk membuat link ke document lain, kita harus mempunyai minimal 2 halaman link, misalkan saya ada nama halaman1.html dan halaman2.html :Contoh :halaman1.html Muryan </div> <script type='text/javascript'>createSummaryAndThumb("summary3227116295358448225");</script> <div class='post-home'> <span class='comment-home'> <a class='comment-link' href='https://mjh08.blogspot.com/2011/07/hyperlink.html#comment-form' onclick=''> comments</a> </span> | <span class='post-labels'> <a href='https://mjh08.blogspot.com/search/label/Belajar%20CSS?&max-results=5' rel='tag'>Belajar CSS</a>, <a href='https://mjh08.blogspot.com/search/label/tips%20dan%20trik%20CSS?&max-results=5' rel='tag'>tips dan trik CSS</a>, <a href='https://mjh08.blogspot.com/search/label/Tips%20Trik%20HTML?&max-results=5' rel='tag'>Tips Trik HTML</a>, <a href='https://mjh08.blogspot.com/search/label/Tutorial%20CSS?&max-results=5' rel='tag'>Tutorial CSS</a>, <a href='https://mjh08.blogspot.com/search/label/Tutotial%20HTML%20Dasar?&max-results=5' rel='tag'>Tutotial HTML Dasar</a> </span> | <span class='rmlink'><a href='https://mjh08.blogspot.com/2011/07/hyperlink.html'>Read More...</a></span> </div> <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'> Posted by <span class='fn'>MJH 08</span> </span> <span class='post-timestamp'> at <a class='timestamp-link' href='https://mjh08.blogspot.com/2011/07/hyperlink.html' rel='bookmark' title='permanent link'><abbr class='published' title='2011-07-25T18:36:00-07:00'>6:36 PM</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='https://mjh08.blogspot.com/2011/07/hyperlink.html#comment-form' onclick=''>0 comments</a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-247959059'> <a href='https://www.blogger.com/post-edit.g?blogID=4838745165635846058&postID=3227116295358448225&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons'> <a class='share-button sb-email' href='https://www.blogger.com/share-post.g?blogID=4838745165635846058&postID=3227116295358448225&target=email' target='_blank' title='Email This'> <span class='share-button-link-text'>Email This</span></a> <a class='share-button sb-blog' href='https://www.blogger.com/share-post.g?blogID=4838745165635846058&postID=3227116295358448225&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'> <span class='share-button-link-text'>BlogThis!</span></a> <a class='share-button sb-twitter' href='https://www.blogger.com/share-post.g?blogID=4838745165635846058&postID=3227116295358448225&target=twitter' target='_blank' title='Share to X'> <span class='share-button-link-text'>Share to X</span></a> <a class='share-button sb-facebook' href='https://www.blogger.com/share-post.g?blogID=4838745165635846058&postID=3227116295358448225&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Share to Facebook'> <span class='share-button-link-text'>Share to Facebook</span></a> <a class='share-button sb-buzz' href='https://www.blogger.com/share-post.g?blogID=4838745165635846058&postID=3227116295358448225&target=buzz' onclick='window.open(this.href, "_blank", "height=415,width=690"); return false;' target='_blank' title=''> <span class='share-button-link-text'><!--Can't find substitution for tag [top.shareToBuzzMsg]--></span></a> </div> </div> <div class='post-footer-line post-footer-line-2'></div><span class='post-labels'> Labels: <a href='https://mjh08.blogspot.com/search/label/Belajar%20CSS' rel='tag'>Belajar CSS</a>, <a href='https://mjh08.blogspot.com/search/label/tips%20dan%20trik%20CSS' rel='tag'>tips dan trik CSS</a>, <a href='https://mjh08.blogspot.com/search/label/Tips%20Trik%20HTML' rel='tag'>Tips Trik HTML</a>, <a href='https://mjh08.blogspot.com/search/label/Tutorial%20CSS' rel='tag'>Tutorial CSS</a>, <a href='https://mjh08.blogspot.com/search/label/Tutotial%20HTML%20Dasar' rel='tag'>Tutotial HTML Dasar</a> </span> <div class='post-footer-line post-footer-line-3'><span class='post-location'> </span> </div> </div> </div> </div> </div></div> <div class="date-outer"> <div class="date-posts"> <div class='post-outer'> <div class='post hentry'> <a name='8960747835470243189'></a> <h3 class='post-title entry-title'> <a href='https://mjh08.blogspot.com/2011/07/grouping-element.html'>Grouping Element</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <h2 class='date-header'><span>Penulis : MJH 08 on Sunday, July 24, 2011 | 6:17 PM</span></h2> <div class='post-body entry-content' id='post-body-8960747835470243189'> <script>var ultimaFecha = 'Sunday, July 24, 2011';</script> <h2 class='date-header'>Sunday, July 24, 2011</h2> <div id='summary8960747835470243189'>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
Muryan Awaludin ( HTML DASAR bagian 6 )

Div tag digunakan untuk mengelompokkan group element. Biasanya untuk block level element.

comments | | Read More...

Performatted Text

Penulis : MJH 08 on Saturday, July 23, 2011 | 6:07 PM

Saturday, July 23, 2011

Tag PRE berfungsi untuk menampilkan text sesuai dengan format aslinya.Contoh :
Ini AdalahTutorial tentang preformatted text.Berbagi ilmu desain grafis dan menjadi media pembelajaran online,website pendidikan ilmu desain grafis untuk menambah pengetahuanan.

The pre tag is good for displaying computer code:

for i = 1 to 100print inext i
Hasilnya :
comments | | Read More...

Quotes / Indentasi

Penulis : MJH 08 on Friday, July 22, 2011 | 6:17 PM

Friday, July 22, 2011

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 : Formating FontMuryan Awaludin ( HTML DASAR )

Berbagi ilmu desain grafis dan menjadi media pembelajaran

comments | | Read More...

Format Halaman Break dan Font

Penulis : MJH 08 on Thursday, July 21, 2011 | 6:15 PM

Thursday, July 21, 2011

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

Muryan Awaludin HTML

Berbagi ilmu desain grafis dan menjadi media pembelajaran online
website pendidikan ilmu desain grafis untuk menambah pengetahuan

2. Font Dengan Tag font anda
comments | | Read More...

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

Penulis : MJH 08 on Wednesday, July 20, 2011 | 6:30 PM

Wednesday, July 20, 2011

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 ) Unordered list

Muryan Awaludin

  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe Flash
  • Adobe Dreamweaver
  • Adobe
comments | | Read More...

Struktur HTML Document

Penulis : MJH 08 on Tuesday, July 19, 2011 | 6:15 PM

Tuesday, July 19, 2011

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. HTMLSetiap document HTML harus diawali dan ditutup dengan tag HTMLcontoh : Tag HTML diatas tersebut adalah tampilan document HTML2. HEAD Pada bagian header ditulis dengan tag sebagai berikut :
comments | | Read More...

Tutorial HTML Dasar (Bag 1)

Penulis : MJH 08 on Monday, July 18, 2011 | 6:03 PM

Monday, July 18, 2011

Untuk memulai bekerja dengan TAG HTML kamu bisa gunakan editor NotePad, NotePad ++, Dreamweaver atau editor lainnya....caranya sebagai berikut :1. Ketikan tag berikut di notepadwww.ilmudesain.web.id

Latihan HTML Dasar

Paragraf Pertama Saya 2. Simpan dengan membuat folder baru misalnya html dasar dan nama file index.html ( untuk nama

comments | | Read More...

Membuat Tampilan Rounded Rectangle

Penulis : MJH 08 on Tuesday, May 3, 2011 | 4:28 PM

Tuesday, May 3, 2011

Tutorial kali ini saya akan membahas tentang bagaimana cara membuat tampilan Raounded Rectangle pada desain web, walau trik kali ini mungkin sudah lama tapi ga ada salahnya kan kalau saya mencoba share barangkali aja bisa berguna bagim temen2 yang belum tau, kalau bagi para web designer yang profesional sih udah ga asing lagi, untuk trik ini tidak dibuat di file CSS tapi langsung di tampilan html
comments | | Read More...

Membuat Efek Hover Opacity

Penulis : MJH 08 on Wednesday, February 9, 2011 | 11:32 PM

Wednesday, February 9, 2011

Untuk membuat efek hover opacity dari gambar yang di hover oleh mouse langkah pertama kita siapkan file CSS untuk mengatur tampilan hover, misalnya beri nama file style.cssTuliskan kode berikut : .button_opacity img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity:0.5;}.button_opacity:hover img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity:1
comments | | Read More...

Membuat Menu Pop-Up Gambar

Penulis : MJH 08 on Thursday, February 3, 2011 | 6:31 PM

Thursday, February 3, 2011

Dengan bantuan elemen CSS dengan posisi absolute dan relative, gambar yang akan di pop-up akan dengan mudah dilatekan pada halaman html...oke deh ga perlu panjang lebar penjelasannya langsung aja ke TKP >>>1. Buatlah sebuah file CSS dan isikan kode berikut @charset "utf-8";/* CSS Document */.thumbnail { position:relative; z-index:0;}.thumbnail:hover { background-color:transparent; z-index:
comments | | Read More...

Categories

About

 
Company Info | Contact Us | Privacy policy | Term of use | Widget | Advertise with Us | Site map
Copyright © 2011. mjh 08 . All Rights Reserved.
Design Template by panjz-online | Support by creating website | Powered by Blogger