Belajar tentang Style Sheet CSS



Salam Web11...

Apa kabar teman-teman Web11? semoga kalian dalam keadaan sehat, sehingga kita bisa sama-sama melanjutkan pembelajaran tentang script-script yang digunakan dalam pembangunan sebuah website. Pada kesempatan kali ini, kami akan berbagi tentang bagaimana cara menggunakan script CSS pada dokumen HTML. sebelum kita lanjut dalam pembahasan kali ini, seperti biasa kami akan merekomendasikan artikel-artikel terkait kami tentang Belajar CSS.


Bila teman-teman sudah membaca artikel-artikel terkait kami, maka kita akan menlanjutkan pembahasan berikutnya. Disimak ya teman-teman.

3 Cara memasukkan Style CSS pada Dokumen HTML.

Ada 3 cara memasukkan style CSS yang kita buat pada sebuah dokumen HTML.

1. External Style Sheet.
2. Internal Style Sheet.
3. Inline Style.

Disini kita akan membahas satu persatu, agar teman-teman bisa mengerti dengan 3 cara yang dimaksud.

1. External Style Sheet.

Sebuah External Style Sheet sangat cocok digunakan untuk banyak dokumen / Halaman HTMl yang kita buat. Dengan External Style Sheet anda dapat merubah seluruh halaman web dengan hanya hanya mengubah satu file saja. Setiap halaman yang diubah harus link dengan Style Sheet menggunakan tag <link>. Tag <link> diantara <head>...</head>.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Sebuah external style sheet dapat ditulis dalam teks editor apapun. File tidak boleh mengandung tag html. Style Sheet harus disimpan dengan ekstensi ".css". Contoh dari sebuah file style sheet adalah sebagai berikut.

hr {color:sienna;}
p{margin-left:20px;}
body {background-image:url("images/web11.gif");}

2. Internal Style Sheet.

Sebuah Internal Style Sheet digunakan hanya pada dokumen tunggal HTML. Anda mendefinisikan Internal Style Sheet diantara <head>...</head> dengan menggunakan tag <style>, seperti contoh dibawah ini.

<head>
<style>
hr {color:sienna;}
p{margin-left:20px;}
body {background-image:url("images/web11.gif");}
</style>
</head>

3. Inline Style

Inline Style memiliki banyak kekurangan dibandingakan Style Sheet yang lainnya. Untuk menggunakan Inline style anda harus menggunakan atribut style pada tag yang relevan. Style atribut dapat berisi properti CSS. Contoh dibawah ini menunjukkan bagaimana intuk mengubah wana dan margin kiri paragraph.

<p style="color:sienna; margin-left:20px;"> Ini adalah sebuah paragraph </p>

Demikian lah materi singkat dari kami tentang Cara memasukkan Style Sheet CSS pada dokumen HTML. Semoga artikel diatas bermanfaat bagi teman-teman yang ingin belajar Script-script dalam pembuatan Website khususnya CSS. ( Kritik dan saran dari pembaca sangat kami harapkan untuk meningkatkan kualitas artikel yang kami buat ).
Selasa, 25 Juni 2013
Posted by Admin web11

Id dan Class Selector CSS

id_dan_class_selector

Salam Web11...

Pada kesempatan kali ini, kami akan menjelaskan tentang id dan class pada CSS. sebelum masuk ke materi pembahasan. ada baiknya teman-teman membaca artikel-artikel terkait kami tentang Belajar CSS. berikut adalah artikel-artikel terkait kami :


Bila teman-teman sudah membaca artikel-artikel terkait kami diatas, maka mari kita lanjutkan materi belajar CSS pada artikel ini.

CSS Selector Id & Class

CSS selain berfungsi untuk menetapkan Style pada elemen HTML, CSS juga memungkinkan kita untuk menentukan penyeleksian sendiri. Penyeleksian tersebut berupa "Id" & "Class".

Id Selector

Id selector digunakan untuk menentukan style sebuah elemen unik tunggal. Id menggunakan atribut Id pada elemen HTML, Id didefinisikan dengan tanda "#". Aturan style yang diterapkan pada contoh dibawah ini diterapkan ke sebuah elemen dengan Id="web11".
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
#web11
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="web11">Hallo Dunia!!</p>
<p>Paragraph ini tidak terpengaruh pada style yang dibuat</p>
</body>
</html>

Catatan : teman-teman copy script diatas dan simpan pada folder htdocs diweb server localhost yang teman-teman instal. Simpan dengan ekstensi file ".html"  (style.html). Setelah itu teman-teman buka web browser kemudian ketik localhost pada alamat url setelah itu pilih file yang disimpan di htdocs dan teman-teman bisa melihat hasilnya.

Class Selector

Class selector digunakan untuk menentukan style beberapa elemen. Berbeda dengan id selector, Class selector lebih sering digunakan untuk menentukan style dari beberapa elemen. Hal ini memungkinkan kita untuk menetapkan style tertentu dari banyak elemen dengan class yang sama. Class selector menggunakan atribut class HTML, dan didefinisikan dengan ".". Pada contoh dibawah ini, semua elemen class="center" akan berada pada posisi tengah.
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Posisi Tengah Sebuah Judul</h1>
<p class="center">Posisi Tengah Sebuah Paragraph</p>
</body>
</html>

Catatan : teman-teman copy script diatas dan simpan pada folder htdocs diweb server localhost yang teman-teman instal. Simpan dengan ekstensi file ".html"  (center.html). Setelah itu teman-teman buka web browser kemudian ketik localhost pada alamat url setelah itu pilih file yang disimpan di htdocs dan teman-teman bisa melihat hasilnya.

Kita juga dapat menentukan sendiri elemen HTML khusus yang dipengaruhi oleh Class. Dalam contoh dibawah ini elemen HTML "p" diberi nilai class="center".
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Judul ini tidak berpengaruh pada class yang diberikan.</h1>
<p class="center">Paragraph ini berpengaruh pada class yang diberikan.</p>
</body>
</html>

Catatan : teman-teman copy script diatas dan simpan pada folder htdocs diweb server localhost yang teman-teman instal. Simpan dengan ekstensi file ".html"  ([paragraph.html). Setelah itu teman-teman buka web browser kemudian ketik localhost pada alamat url setelah itu pilih file yang disimpan di htdocs dan teman-teman bisa melihat hasilnya.

Demikian lah materi singkat kami kali ini tetang penerapan Id & Class selector pada dokumen HTML. Bilamana teman-teman mengalami kesulitan dalam materi kami kali ini, teman-teman bisa langsung bertanya kepada kami. kami akhiri artkel ini, dan kita lanjut kepada artikel Cara menggunakan Style Sheet CSS pada dokumen HTML. ( Kritik dan saran dari pembaca sangat kami harapkan untuk meningkatkan kualitas artikel yang kami buat ).
Posted by Admin web11

Belajar membuat website dengan sintaks dan comment css

sintaks_comment_css



Salam Web11...

Dalam artikel kami kali ini, kami akan mulai memberikan materi pembelajaran CSS. Sebelum teman-teman membaca artikel ini, ada baiknya teman-teman membaca terlebih dahulu artikel kami sebelumnya tentang Sejarah dan Pengertian CSS. Disana dibahas tentang Versi CSS dan pengertian CSS. Bila teman-teman sudah membaca artikel tersebut, mari kita lanjut ke artikel kita kali ini yaitu tentang sintaks-sintaks CSS.

Pengenalan CSS

  • CSS adalah Cascading Style Sheet.
  • Styles pada CSS mendefinisikan bagaimana menampilkan elemen HTML.
  • Eksternal Style Sheet dapat mempermudah kita dalam pembuatan design website.
  • Eksternal style Sheet disimpan dalam file CSS.
CSS sebagai solusi masalah dalam design website.
HTML diciptakan tidak untuk memberi nilai pada tag untuk memformat sebuah dokumen. HTML dibuat untuk menentukan isi dari dokumen. Contoh :

<h1> Ini adalah Heading </h1>
<p> Ini adalah sebuah paragraph </p

Ketika tag <font> dan atribut warna ingin ditambahkan oleh pengembang web dalam pembuatan sebuah website besar, maka itu adalah sebuah mimpi buruk. Dikarenakan setiap jenis font dan warna yang ditambahkan ke setiap halaman menjadi proses yang sangat lama dan mahal.
Oleh karena itu, World Wide Web Consortium W3C membuat CSS. Dalam HTML 4.0, semua format ddapat dihapus dari sebuah dokumen HTML dan disimpan dalam File CSS yang terpisah. Style CSS biasanya disimpan dalam file eksternal dengan ekstensi file ".css". Style sheet eksternal memungkinkan anda untuk mengubah tampilan dan tata letak semua halaman dalam sebuah situs web, hanya dengan mengedit satu file tunggal.

Sintaks CSS

CSS terdiri dari 2 elemen utama yaitu selector dan deklarasi ( Deklarasi bisa lebih dari satu ).

h1  { color : blue; font-size: 12px;}

h1 => Selector

color : blue; => Deklarasi 1

font : size; => Deklarasi 2

Selector biasanya berupa elemen HTML.
Setiap deklarasi terdiri dari properti dan nilai.
Properti adalahh atribute style yang ingin kita ubah, setiap properti memiliki nilai.
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hallo Dunia!</p>
<p>Ini adalah Paragraph dengan style CSS.</p>
</body>
</html>

Catatan : teman-teman copy script diatas dan simpan pada folder htdocs diweb server localhost yang teman-teman instal. Simpan dengan ekstensi file ".html"  (css.html). Setelah itu teman-teman buka web browser kemudian ketik localhost pada alamat url setelah itu pilih file yang disimpan di htdocs dan teman-teman bisa melihat hasilnya.

Komentar CSS

komentar digunakan menjelaskan kode yang kita buat. Sebuah komentar akan diabaaikan oleh browser.
Contoh :

/*Ini adalah sebuah komentar*/
p
{
text-align:center;
/*Ini adalah komentar yang lain*/
color:black;
font-family:arial;
}

Demikianlah artikel kami kali ini dalam tahap awal belajar CSS. Artikel ini hanya membahas tentang contoh  sintaks CSS dan pemberian komentar pada script CSS. Semoga artikel diatas bermanfaat bagi teman-teman semua. untuk artikel selanjutnya, kita akan belajar tentang Id dan Class Selector pada CSS.  ( Kritik dan saran dari pembaca sangat kami harapkan untuk meningkatkan kualitas artikel yang kami buat ).
Minggu, 23 Juni 2013
Posted by Admin web11

Pengertian dan sejarah CSS

sejarah_dan_pengertian_css

Salam Web11...

Pada kesempatan kali ini, kami akan membahas tentang script CSS. Apakah teman-teman sudah mengetahui apa itu CSS? Bilamana teman-teman sudah mengetahui tentang CSS, tidak ada salahnya kita sedikit merefresh ingatan kita tentang sejarah dan pengertian CSS. Dan bila teman-teman ada yang belum tahu apa itu CSS, mari kita sama-sama mempelajari apa itu CSS. Pada artikel kami kali ini, seperti biasa sebelum masuk ke materi Cara membuat sebuah website dengan CSS kita terlebih dahulu mengenal dan mengetahui apa yang kita akan pelajari, dalam hal ini adalah CSS. Berikut penjelasan singkat tentang CSS dikutip dari berbagai sumber.

Sejarah CSS

  • CSS 1
Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web.
CSS 1 mendukung pengaturan tampilan dalam hal :
1. Font (Jenis ketebalan).
2. Warna, teks, background dan elemen lainnya.
3. Text attributes, misalnya spasi antar baris, kata dan  huruf.
4. Posisi teks, gambar, table dan elemen lainnya.
5. Margin, border dan padiing.

  • CSS 2
Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua atribut dari CSS 1 dan diperluas dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer. 

  • CSS 3 
CSS 3adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain website. CSS 3 dapat melakukan animasi pada halaman website, diantaranya animasi warna dan animasi 3D. Dengan CSS 3 desaigner dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple background, border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model.

Fitur terbaru CSS 3 :
1. Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight.
2. Beberapa efek teks, seperti teks berbayang, kolom koran dan "Word-Wrap".
3. Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut-sudut yang tumpul dan bayangan.

Pengertian CSS

CSS adalah singkatan dari Cascading Style Sheet yang merupakan kumpulan perintah yang dibentuk dari berbagai sumber yang disusun menurut urutan tertentu sehingga mampu mengatasi konflik style. CSS yaitu salah satu bahasa pemrograman web yang mengatur komponen dalam suatu web supaya web lebih terstruktur dan lebih seragam. CSS seperti halnya styles pada aplikasi pengolahan kata Microsoft Word yang dapat mengatur beberapa style, misalnya subbab, heading, bodytext, footer, images dan style lainnya untuk dapat dipakai bersama-sama dalam beberapa file. CSS biasanya digunakan untuk memformat tampilan web yang dibuat dengan bahasa HTML dan XHTML. CSS mampu mengatur warna body teks, ukuran gambar, ukuran border, warna mouse over, warna tabel, warna hyperlink, margin, spasi paragraph, spasi teks dan parameter lainnya. Dengan adanya CSS memungkinkan menampilkan halaman yang sama dengan format yang berbeda.

Demikian lah penjelasan singkat dari kami mengenai CSS yang dikutip dari berbagai sumber. Semoga dapat membantu teman-teman dalam mengenal apa itu CSS. Untuk artikel kami selanjutnya dalam topik cara membuat website dengan CSS yaitu 

Posted by Admin web11

Dasar-dasar membuat html bagian 2

tag_html

Salam web11...

Sebelum teman-teman membaca artikel ini, apakah teman-teman sudah membaca artikel kami sebelumnya yaitu dasar-dasar membuat html bagian 1. Bilamana teman-teman belum membacanya, alangkah baiknya teman-teman membacanya terlebih dahulu dan bila teman-teman sudah membaca artikel tersebut. Maka mari kita lanjutkan ke materi berikutnya tentang dasar-dasar cara membuat html bagian 2. Tidak perlu berlama-lama, lansung saja kita mulai.

11. Mendefiniskan bagian dokumen pada script html.

  • Teori 
<div> Mendefinisikan divisi atau bagian pada dokumen html.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama div.html pada folder belajar tag html yang telah kita buat. kemudian buka file div.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<p>ini adalah sebuah teks.</p>
<div style="color:#0000FF">
<h3>Ini adalah judul elemen div</h3>
<p>Ini adalah teks elemen div</p>
</div>
<p>Ini adalah sebuah teks.</p>
</body>
</head>
</html>

12. Mengatur ukuran huruf  pada script html.

  • Teori 
<font> Mengganti jenis, ukuran, warna huruf yang akan digunakan untuk teks.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama font.html pada folder belajar tag html yang telah kita buat. kemudian buka file font.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<font size="3" color="red">Ini adalah sebuah teks!</font>
<font size="2" color="blue">Ini adalah sebuah teks!</font>
<font face="verdana" color="green">Ini adalah sebuah teks!</font>
</body>
</head>
</html>

13. Membuat form input  pada script html.

  • Teori 
<form> Mendefinisikan input form

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama form.html pada folder belajar tag html yang telah kita buat. kemudian buka file form.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<form action="demo_form.html">
First Name :<input type="text" name="FirstName" value="mickey"><br>
Last Name :<input type="text" name="LastName" value="mouse"><br>
<Input type="submit" value="submit">
<p>Klik tombol "submit" maka data akan dikirimkan ke halaman "demo_form.html".</p>
<p>Untuk materi ini akan berhubungan dengan script php, yang nanti akan teman-teman pelajari pada tutorial php</p>
</body>
</head>
</html>

14. Merubah ukuran font pada script html.

  • Teori 
<h1>...<h6> Ukuran font.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama h.html pada folder belajar tag html yang telah kita buat. kemudian buka file h.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<h6>Ini adalah heading 6</h6>
</body>
</head>
</html>

15. Membuat garis horizontal pada script html.

  • Teori 
<hr> Membuat garis horizontal.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama hr.html pada folder belajar tag html yang telah kita buat. kemudian buka file hr.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<h1>HTML</h1>
<p>Hyper Text Markup Language</p>
<hr>
<h1>CSS</h1>
<p>Cascading Style Sheets</p>
</body>
</head>
</html>

16. Membuat teks miring pada script html.

  • Teori 
<i>Membuat teks miring.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama i.html pada folder belajar tag html yang telah kita buat. kemudian buka file i.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<p>Design-web11<i>mencoba</i> membantu anda belajar bahasa html</p>
</body>
</head>
</html>

17. Menyisipkan gambar pada script html.

  • Teori 
<img> image, imagemap atau animation.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama image.html pada folder belajar tag html yang telah kita buat. kemudian buka file image.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<image src="smiley.gif" alt="smiley face" height="42" width="42">
<p>Tentukan gambar dan lokasi dimana gambar disimpan pada script src yang ingin kamu tampilkan </p>
</body>
</head>
</html>

18. Mendefinisikan perintah input pada script html.

  • Teori 
<input> Mendefinisikan field input pada form.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama input.html pada folder belajar tag html yang telah kita buat. kemudian buka file input.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<form action="demo_action.html">
First Name :<Input type="text" name="fname"><br>
Last Name :<Input type="text" name="lname"><br>
<Input type="Submit" value="submit">
<p>Untuk materi ini akan berhubungan dengan script php, yang nanti akan teman-teman pelajari pada tutorial php.</p>
</body>
</head>
</html>

19. Membuat bullet point pada script html.

  • Teori 
<li> Membuat bullet point atau baris baru pada list <berpasangan dengan tag <dir>,<menu>,<ol> dan <ul>.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama bulletpoint.html pada folder belajar tag html yang telah kita buat. kemudian buka file bulletpoint.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<ol>
<li>cofee</li>
<li>milk</li>
<li>tea</li>
</ol>
<ul>
<li>cofee</li>
<li>milk</li>
<li>tea</li>
</ul>
</body>
</head>
</html>

20. Mendefinisikan awal dan akhir list pada script html.

  • Teori 
<ol> Mendefinisikan awal dan akhir list.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama ol.html pada folder belajar tag html yang telah kita buat. kemudian buka file ol.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<ol>
<li>cofee</li>
<li>milk</li>
<li>tea</li>
</ol>
<ol start="50">
<li>cofee</li>
<li>milk</li>
<li>tea</li>
</ol>
</body>
</head>
</html>

Dan akhirnya artikel dasar-dasar membuat html bagian 2 sudah selesai. Bagaimana teman-teman masih sanggup melanjutkan ke materi berikutnya? Bila teman-teman sudah siap, kita lanjutkan ke bagian terakhir dalam hal mempelajari tag-tag html pada artikel dasar-dasar membuat html bagian 3. ( Kritik dan saran dari pembaca sangat kami harapkan untuk meningkatkan kualitas dari artikel yang kami buat ).
Posted by Admin web11

- Copyright © Design Web11 -Metrominimalist- Powered by Blogger - Designed by Johanes Djogan -