Showing posts with label Tutorial CSS. Show all posts
Showing posts with label Tutorial CSS. Show all posts

Video Tutorial HTML dan CSS Membuat TopRight-Banner-MidleRight

Author: Administrator | Posted at: Saturday, November 07, 2015 | Filed Under: , , , , , , |
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......

Tutorial CSS "Input Image and teks"

Author: Muryan Awaludin | Posted at: Sunday, June 14, 2015 | Filed Under: , , , |
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

Author: Muryan Awaludin | Posted at: Sunday, June 07, 2015 | Filed Under: , , , , |
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...

HTML 5 - Mendefinisikan Teks di dalam Website

Author: Muryan Awaludin | Posted at: Friday, March 13, 2015 | Filed Under: , , , , , |
Jika ingin menulis sebuah definisi teks pada sebuah website yang dibuat, maka paling tidak ada tiga buah tag yang harus silibatkan yaitu: ° Tag <dl> yang merupakan singkatan dari definition list, berfungsi sebagai pembuka untuk sebuah definisi. ° Tag <dt> yang merupakan singkatan dati definition term, berfungsi sebagai teks untuk menulis kata yang akan didefinisakan. ° Tag <dd>...

HTML5, Redirect ke Situs yang lain

Author: Muryan Awaludin | Posted at: Friday, March 13, 2015 | Filed Under: , , , , |
Terima kasih atas kunjungannya buat sahabat blogger. Kali ini saya akan mulai menulis tentang html5 dan css3 mulai dari dasar. Ada beberapa cara yang dilakukan untuk membuat pengalihan ke situs yang lain, terutama bagi sahabat blogger yang akan menghalihkan website nya dari alamat domain yang lama ke domain yang baru. salah satu caranya yaitu redirect pengunjung secara otomatis ke alamat yang baru...

Browser dan W3C Support

Author: Muryan Awaludin | Posted at: Thursday, May 10, 2012 | Filed Under: , , , |
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 ...

CSS Border Padding dan Margin

Author: Muryan Awaludin | Posted at: Thursday, September 08, 2011 | Filed Under: , , |
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...

Membuat Text Decoration

Author: Muryan Awaludin | Posted at: Saturday, August 20, 2011 | Filed Under: , |
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...

Membuat Teks Indent ( Paragraf yang menjorok kedalam )

Author: Muryan Awaludin | Posted at: Monday, August 08, 2011 | Filed Under: , , , , |
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...

Komentar dalam Style Sheet

Author: Muryan Awaludin | Posted at: Sunday, July 31, 2011 | Filed Under: , , |
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...

Form dan Input Element

Author: Muryan Awaludin | Posted at: Saturday, July 30, 2011 | Filed Under: , , , , |
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...

Insert Image ke Document

Author: Muryan Awaludin | Posted at: Friday, July 29, 2011 | Filed Under: , , , , |
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...

Merge Cell (colspan dan rowspan)

Author: Muryan Awaludin | Posted at: Thursday, July 28, 2011 | Filed Under: , , , , |
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...

Tabel HTML

Author: Muryan Awaludin | Posted at: Wednesday, July 27, 2011 | Filed Under: , , , , |
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...

Hyperlink

Author: Muryan Awaludin | Posted at: Tuesday, July 26, 2011 | Filed Under: , , , , |
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<html><head><title> Muryan...

Grouping Element

Author: Muryan Awaludin | Posted at: Monday, July 25, 2011 | Filed Under: , , , , |
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...

Performatted Text

Author: Muryan Awaludin | Posted at: Sunday, July 24, 2011 | Filed Under: , , , , |
Tag PRE berfungsi untuk menampilkan text sesuai dengan format aslinya.Contoh :<html><body><pre>Ini AdalahTutorial 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 100print...

Quotes / Indentasi

Author: Muryan Awaludin | Posted at: Saturday, July 23, 2011 | Filed Under: , , , , |
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...

Format Halaman Break dan Font

Author: Muryan Awaludin | Posted at: Friday, July 22, 2011 | Filed Under: , , , , |
1. BreakTag 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>...

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

Author: Muryan Awaludin | Posted at: Thursday, July 21, 2011 | Filed Under: , , , , |
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...

Subscribe to: Posts (Atom)

Entri Populer

  • Cara Membuat Buklet Buku
    1. Buka Program Corel Draw > Pilih Layout > Page Setup > Potrait, Paper: A4. 2. Langkah selanjutnya menambah Page ( Halaman ) >...
  • Cara Membuat Doraemon
    1. Buatlah 5 buah objek bulat ( untuk membuat kepala, kedua mata dan hidung ) serta berikan mulut menggunakan line dan Ellipse 2. Hapusl...
  • Cara Mengatur Jarak Teks pada Program Photoshop
    1. Buka Program Photoshop > New File > 471 x 138 Pixel. 2. Pilih Horizontal Type Tool > Jenis Font = Arial . Tulis Teks Misalnya “ ...
  • Break Apart Teks
    Perintah Break Apart berfungsi untuk memecahkan obek yang sebelumnya merupakan satu kesatuan atau kombinasi dari beberapa objek lain. Kali ...
  • Buku Pintar CorelDRAW X6
    Setiap orang yang bekerja di dunia desain grafis pasti pernah mendengar nama CorelDRAW. Sejak muncul pertama kali, CorelDRAW memang diranc...
  • Membuat Kuis Pilihan Ganda
    Langkah-Langkah: 1. Aktifkan program Macromedia Flash anda. Pada Creat New, pilih Flash Document. 2. Opsional: Pada Frame 1 Layer 1, bua...
  • Efek Animasi Teks Api
    Efek animasi teks api ini merupakan lanjutan artikel sebelumnya yaitu Membuat Teks Api ..Oke ga usah panjang lebar, langsung aja ke TKP pela...
  • Cara Membuat Efek Teks Emas
    1.Buat Lembar kerja baru CTRL + N pada photoshop dengan Spesifikasi : Ukuran : 1024 x 768 px Resolusi : 72 px/cm Colour Mode : RGB 8 bi...
  • Cara Membuat Sketsa Foto
    Alhamdulillah, saya bisa kembali menulis artikel tentang photoshop . Biasalah ada kerjaan offline nya..trus nulis request tutorial html dan...
  • Membuat Text Asap Rokok
    Berikut adalah previewnya: Langkah 1 Buat dokumen baru (600 px X 400 px X 72 dpi) Buat layer baru dengan nama ‘background’ dan membe...

Kontak Saya

HP/WA : 08562616116

Total Pageviews

Teman-Teman Blogger

Ilmu Desain Grafis Copyright © 2009 Community is Designed by Bie | development by Muryan Awaludin