CARA MEMBUAT TABEL KLASEMEN SEPAK BOLA LIGA SPANYOL DENGAN HTML & CSS

Assalamu’alaikum Wr.Wb

Di sini saya akan memberi cara atau contoh bagaimana sih cara membuat klasemen sepak bola dengan html dan css yuk kita simak :

Pertama-tama kita buka notepad
Lalu ketik yang codingan yang ingin kita buat klasemen sepakbola seperti spanyol

3. Setelah selesai mengetik seperti gambar di atas lalu save dengan format Name.html. Dan setelah save lalu klik “Open With” file yang sudah di simpan lalu pilih browser dan setelah di klik browsernya

4. Nah gambar di atas adalah hasil codingan yang kita yang di lihat melalui browser. SELESAI

Nah itu dia cara membuat klasemen sepak bola liga spanyol dengan html dan css. Sekian dari saya semoga bermanfaat 🙂

Wassalamu’alaikum Wr.Wb

PENGERTIAN CSS DAN CARA MEMBUAT TABLE DAN LIST

Assalamu’alaikum Wr.Wb

Kali ini saya akan membahas tentang css dalam membuat tabel dan list sebelum lanjut saya akan membahas pengertian dari css itu sendiri yuk kita simak

PENGERTIAN CSS

CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumen XML, termasuk SVG dan XUL bahkan ANDROID. CSS dibuat untuk menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi darisebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tableless pada desain web.

Tujuan CSS ? untuk membedakan konten dari dokumen dan dari tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukuran dan formatting. Jadi memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu web, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan web.

Fungsi CSS ? merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik. Dengan adanya CSS anda dapat membedakan konten atau style dengan dokumen atau file website itu sendiri. Bisa dibilang salah satu tolak ukur dari kualitas halaman website yang dibuat adalah dari style yang digunakan, dan disini CSS berperan sangat vital.
Bagaimana sih cara kerja CSS ?

cara kerja penulisan kode bisa dibilang paling mudah. Seorang programmer hanya perlu menambah wawasan mengenai instruksi atau perintah untuk mendesain web secara menyeluruh. Pada CSS anda hanya perlu menulis stylenya saja yang terdiri atas selector id dan class. Contohnya jika anda berfokus pada background atau latar belakang anda dapat mengatur penggunaan image atau warna solid sebagai background, serta mensetting ukuran secara fixed atau sesuai ukuran asli dan lain sebagainya.

Jika penulisan file CSS di halaman tersendiri maka tidak ada patokan khusus, namun perlu diperhatikan pada dokumen yang menggunakan CSS haruslah ada instruksi untuk pemanggilan file CSS beserta class – classnya.

Untuk mengetahui macam – macam kode atau script dari CSS anda dapat mencari di internet baik secara utuh maupun dalam bentuk tutorial satu – persatu. Tergantung dari anda sendiri lebih cocok menggunakan metode apa dalam pembelajaran. Itulah pengertian CSS beserta fungsi dan cara kerja CSS yang perlu anda ketahui. Dengan bantuan CSS, kita dapat membuat tampilan website yang kita buat menjadi lebih keren dan menarik. Nah sekarang kita akan membahas bagaimana si cara nya membuat tabel dan list menggunakan css yuk simak ^^

Membuat Design Table

Aku akan berbagi tips untuk mendesain tampilan table dengan HTML dan CSS agar terlihat menarik.

1. Table Zebra Striping

CSS Code:

.table-zebra-striping {
	width: 100%;
	border-collapse: collapse;
}

.table-zebra-striping th {
	background: #8CAAD4;
	color: #FFFFFF;
	padding: 1em;
	text-align: left;
	text-transform: uppercase;
}

.table-zebra-striping td {
	border-bottom: 1px solid #ddd;
	padding: 1em;
}

/* EVEN */

.table-zebra-striping tr:nth-child(even) {
	background: #F5F5F5;
}

/* ODD */

.table-zebra-striping tr:nth-child(odd) {
	background: #D5DDE8;
}

HTML Code:

<table class="table-zebra-striping">
	<tr>
		<th>No.</th>
		<th>Name</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Bill Gates</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Steve Jobs</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Jack Dorsey</td>
	</tr>
	<tr>
		<td>4</td>
		<td>Mark Zuckerberg</td>
	</tr>
</table>

2. Table with Line

CSS Code:

.table-line {
	width: 100%;
	border-collapse: collapse;
}

.table-line th {
	background: #850785;
	color: #FFFFFF;
	padding: 1em;
	text-align: left;
	text-transform: uppercase;
}

.table-line td {
	border-bottom: 1px solid #DDDDDD;
	color: #666666;
	padding: 1em;
}

HTML Code:

<table class="table-line">
	<tr>
		<th>No.</th>
		<th>Name</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Bill Gates</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Steve Jobs</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Jack Dorsey</td>
	</tr>
	<tr>
		<td>4</td>
		<td>Mark Zuckerberg</td>
	</tr>
</table>

Nah itu sedikit tips dan tutorial cara mendesain table dengan CSS.

Dan terakhir saya akan membahas bagaimana cara mengatur dan membuat list menggunakan css.

Cara Mengatur List Dengan CSS

Properti list-style-type di css

Penggunaan properti list-style-type digunakan untuk menentukan bentuk atau gaya penanda atau marker pada tiap list nantinya, karena telah kita ketahui bahwa ada dua tipe list yang bisa digunakan yaitu unordered list dan ordered list.

Unordered list

Berikut ini daftar-daftar tipe penanda yang bisa digunakan untuk menentukan bentuk unordered list dengan css.

Nilai	Keterangan
None	Digunakan untuk menghilangkan tanda pada list
Disc (default)	Digunakan untuk menampilkan tanda lingkaran solid
Circle	Digunakan untuk menampilkan tanda lingkaran
Square	Digunakan untuk menampilkan tanda kotak solid

Ordered list

Lalu berikut ini daftar bentuk tanda yang bisa digunakan untuk menentukan bentuk ordered list (daftar terurut) dengan css.

Nilai	Keterangan	Contoh
Decimal	Angka	1, 2, 3, 4, 5
decimal-leading-zero	Pengurutan angka dengan 0 didepan	01, 02, 03, 04, 05
lower-alpha	Pengurutan alfabet dengan huruf kecil	a, b, c, d, e
upper-alpha	Pengurutan alfabet dengan huruf besar	A, B, C, D, E
lower-roman	Pengurutan romawi dengan huruf kecil	i, ii, iii, iv, v
upper-roman	Pengurutan romawi dengan huruf besar	I, II, III, IV, V
lower-greek	Pengurutan menggunakan huruf kecil yunani	alpha, beta, gamma, dan lain-lain
lower-latin	Pengurutan menggunakan huruf kecil latin	a, b, c, d, e
upper-latin	Pengurutan menggunakan huruf besar latin	A, B, C, D, E

Nah berikut ini contoh penggunaan list-style-type untuk mengatur bentuk penanda pada list atau daftar html.

<li>JAVASCRIPT</li>

</ul>

<li>JAVASCRIPT</li>

</ul>

<li>JAVASCRIPT</li>

</ol>

<li>JAVASCRIPT</li>

</ol>

<li>JAVASCRIPT</li>

</ol>

Kode diatas akan menampilkan bentuk penanda list atau daftar html seperti gambar dibawah ini.

Properti list-style-position di css

Properti list-style-position di css digunakan untuk menentukan posisi penanda urutan daftar atau list, apakah berada didalam atau diluar urutan daftar tersebut, berikut ini adalah nilai-nilai yang bisa digunakan untuk menentukan posisi penanda.

Nilai	Keterangan
outside (default)	Penanda akan berada diluar urutan daftar atau list
inside	Penanda akan berada didalam urutan daftar atau list

Lalu dibawah ini adalah contoh source code cara penggunaan properti list-style-position…

<li>JAVASCRIPT</li>

</ul>

<li>JAVASCRIPT</li>

</ol>

Hasil dari kode diatas

berikut ini kode setelah ditambahkan border kiri.

<ul style="list-style-type: circle; list-style-position: outside;">
    <li style="border-left: 1px solid #000">PHP</li>
    <li style="border-left: 1px solid #000">HTML</li>
    <li style="border-left: 1px solid #000">JAVASCRIPT</li>
    <li style="border-left: 1px solid #000">CSS</li>
 </ul>
 <ol style="list-style-type: decimal; list-style-position: inside;">
    <li style="border-left: 1px solid #000">PHP</li>
    <li style="border-left: 1px solid #000">HTML</li>
    <li style="border-left: 1px solid #000">JAVASCRIPT</li>
    <li style="border-left: 1px solid #000">CSS</li>
 </ol>

Berikut ini tampilan setelah ditambahkan border kiri

Nah demikian tutorial cara mengatur list atau daftar html dengan css.

Sebelumnya saya mengucapkan terimakasih semoga pembahasan yang saya sampaikan tadi bermanfaat bagi semua. Mohon maaf jika ada kekurangan:).

Wassalamu’alaikum Wr.Wb

Macam-Macam Jenis dan Gaya desain web

Assalamu’alaikum wr.wb

Hallo kali ini saya akan membahas beberapa macam-macam jenis dan gaya desain web. Sebelum kita membahas lebih lanjut kita akan memberikan anda yang ingin mendesain sebuah web jenis dan gaya desain web yang bisa menjadi inspirasi desain anda.
Dalam dunia desain pastilah terdapat jenis dan gaya yang membedakan atau menjadi pembeda antara satu dengan yang lain. Begitu pula dalam dunia desain web, tentu jenis dan gaya juga bermacam-macam serta memiliki khas masing-masing.
Dalam desain web terdapat pula tren desain, yaitu jenis dan gaya yang sedang banyak dipakai dan banyak digemari oleh pemilik serta para desainer web itu sendiri. Misalnya pada tahun 2014 lalu, gaya flat design menjadi favorit dan menjadi popular dikalangan desainer web. Gaya ini diperkirakan akan terus menjadi pilihan favorit sampai beberapa tahun mendatang. lalu apa sajakah jenis dan gaya tersebut? Yuk kita simak^^

Flat Design
Flat Design sendiri adalah Desain yang mengusung bentuk simpel dengan membuang segala bentuk effect gradasi,bayangan,glossy dan lain-lain. Sehingga yang tampil adalah bentuk flat simple dan perpaduan warna yang enak dilihat. Beberapa desainer dulu menganggap flat desain ini membawa kemunduruan pada dunia desain karena seperti kembali kejaman dulu, padahal jaman sekarang banyak software desain yang dapat membuat desain bahkan seperti aslinya atau realistic. Tetapi pada kenyataannya begitu pula pada dunia web desain gaya-seperti ini menjadi booming,popular dan menjadi favorit banyak orang.

Minimize
gaya minimize, gaya ini merupkan gaya yang memadukan flat design dan typography tetapi dibuat menjadi jauh lebih simpel dan sederhana. tetapi jangan salah walau sangat sederhana tetapi jenis dan gaya ini tetap menjadi pilihan banyak desainer dan pemilik web. pernah dengar istilah KISS (“Keep It Simple, Stupid!” atau “Keep It Short and Simple“)? Istilah ini sudah sejak lama digunakan. Dan tampaknya ini masih akan terus berlaku untuk web design. yang unik dalam membuat jenis ini adalah bagaimana kita membuat deain web yang sesimpel dan sesederhana mungkin tetapi masih terlihat menawan.

Hand Drawn Illustrations
selanjutnya adalah hand drawn illustration, gaya desain web ini yaitu menggunakan gambar atau illustrasi yang wujudnya seperti buatan tangan alami yang tidak berwarna maupun berwarna seperti memakai crayon atau pensil warna. Walaupun gambar atau illustrasi tersebut dibuat dengan software/aplikasi namun dengan mengambil bentuk seperti buatan tangan hasilnya menjadi natural, unik dan menarik.

Better Typography

Better typography merupakan jenis dan gaya desain web yang banyak menggunakan tulisan didalamnya. tulisan yang ada bukanlah sembarang tulisan, karena tulisan yang digunakan dibuat dan dibentuk sedemikian rupa sehingga menjadi bagus dan dapat menjadi daya tarik utama yang membedakan dari gaya desain web yang lain. Tulisan yang dipilihpun merupakan kata atau kalimat yang tak sembarangan, tulisan yang dipilih biasanya menunjukkan identitas web, informasi atau kata-kata untuk meyakinkan pembaca mengenai web tersebut.

itulah beberapa jenis dan gaya desain web yang baik dan sedang ngetren pula. bagaimana, sudah dapat insprasi untuk mendesain? semoga postingan kali ini bermanfaat dan sampai jumpa di postingan lainnya..

Dan Terimakasih sudah membaca blog saya ^^

Wassalmu’alaikum Wr.Wb

Beberapa cara dalam memahami desain web

Assalamu’alaikumWr.Wb

Hai kali ini saya akan membahas bagaimana sih supaya kita mudah memahami desain dengan mudah. Pertama kita butuh pengetahuan mengenai desain web. Nah ini beberapa susunan pembelajaran tersebut dan apa saja yang dapat kita pelajari yuk simak ^^

Berikut ini adalah agar kita mudah mempelajari desain web :

>Kenali dulu dasar-dasar dalam pembuatan web.Hal ini penting untuk dilakukan, pada saat berada dibangku SMK karena memang pada materi dalam pelajari saya diharuskan menguasai syntax dasar html, beberapa pemrograman php dasar tapi tidak terlalu banyak untuk mempelajari css.
Inilah pentingnya mempelajari dasar-dasar dunia ini, anda akan menentukan kecocokan anda dalam memahami desain web, jika tidak dan anda merasa ini membosankan berarti anda tidak benar-benar mencintai dunia ini, anda mungkin hanya sekedar suka.
> Ketahuilah perbedaan desain web dari desain lainnya. Desain web bukanlah perancangan buku, bukan desain poster, bukan ilustrasi, dan pencapaian tertinggi dari disiplin ilmu tersebut bukanlah apa yang disasar oleh desain web. Meskipun situs web bisa menjadi sistem penyedia bagi permainan dan video, dan walaupun sistem tersebut bisa jadi sangat cantik untuk dilihat, situs-situs tersebut lebih merupakan contoh dari desain game dan video tutur-cerita, bukan desain web.
Nah itu dia beberapa yang bisa saya sampaikan dan terimakasih sudah membaca blog saya semoga bermanfaat ^^.