AdityaDees: Web desain

Hot

https://publishers.chitika.com/

Contact us for advertising.
Showing posts with label Web desain. Show all posts
Showing posts with label Web desain. Show all posts

02 September 2021

Ask Belajar HTML untuk pemula ,mengenal tag Meta dan Iframe AdityaDees

22:46 0
Setiap elemen HTML dapat juga membawa atribut kelas. Atribut kelas HTML digunakan untuk menentukan satu atau lebih nama kelas untuk suatu elemen. Umumnya, atribut class menunjuk ke sebuah class dalam sebuah style sheet. Nama kelas sensitif huruf besar ataupun kecil, itu artinya Jono dan jono itu beda .

				
								
<pclass="classname"></p>


kelas di gunakan, ketika Anda mungkin memiliki beberapa paragraf teks yang mengandung informasi yang lebih penting daripada yang lain dan inginkan untuk membedakan elemen-elemen ini, atau Anda mungkin ingin membedakan antara tautan yang mengarah ke yang lain halaman di situs dan tautan Anda sendiri yang mengarah ke situs eksternal.

Atribut ini juga dapat digunakan oleh JavaScript melalui DOM HTML untuk membuat perubahan tertentu pada elemen HTML dengan nama kelas tertentu.

				
								
								
<!DOCTYPE html> 
<html> 
<head> 
<title>Title of the document</title>
 <style> 
.red { 
color: red; 
} 
.orange { 
color: orange; 
} 
</style> 
</head> 
<body> 
 
<p class="red">Ini adalah paragraf kelas merah</p> 
<p>Ini adalah beberapa teks.</p> 
<p class="orange">Ini adalah paragraf kelas orannye</p> 
</body> 
</html>


Hasil :

Ini adalah paragraf kelas merah

Ini adalah beberapa teks.

Ini adalah paragraf kelas orannye



Di CSS , jika Anda ingin memilih elemen dengan kelas tertentu, gunakan karakter titik (.) diikuti dengan nama kelas.

Iframe

Tag iframe membuat bingkai sebaris untuk menyematkan konten pihak ketiga (media, applet, dll.). Meskipun konten frame dan halaman web independen, mereka dapat berinteraksi melalui JavaScript.

Iframe seperti jendela kecil yang telah dipotong menjadi kotak halaman, dan di jendela itu Anda dapat melihat halaman lain. Syarat iframe adalah singkatan dari inline bingkai.

Salah satu penggunaan umum iframe (yang mungkin pernah Anda lihat di berbagai situs web) adalah untuk menyematkan Google Map ke dalam sebuah halaman.isi iframe bisa apa saja halaman html (baik terletak di server yang sama atau di mana pun di Web).


				
								
<iframe 
width="450" 
height="350" 
src="http://selawesewelas.blogspot.com">
</iframe>


Hasil:


Untuk mengatur ukuran iframe, gunakan atribut width dan height , atau gunakan CSS . Nilai atribut ditetapkan dalam piksel secara default, tetapi juga dapat dalam persen.

Informasi tentang halaman <meta>

Tag <meta> mengandung metadata, yang menentukan deskripsi halaman, kata kunci, penulis dokumen, dll .Metadata yang digunakan oleh browser, mesin, dan layanan web lainnya mencari, dan tidak ditampilkan pada halaman web. Dokumen web dapat berisi lebih dari satu tag <meta> , tetapi umumnya, tampilan fisik dokumen tidak terpengaruh olehnya.

Menentuka kata kunci untuk mesin pencari: 

				
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">


Tentukan deskripsi situs web:

				
<meta name="description" content="Belajar HTML">


Tentukan penulis halaman:

				
								
<meta name="author" content="namaauthor">


Refresh dokumen setiap satu menit (60 detik):

				
								
<meta http-equiv="refresh" content="60">


Atur viewport untuk membuat situs web terlihat bagus di semua perangkat: 


				
<meta name="viewport" content="width=device-width, initial-scale=1.0">


Tag <meta> ditempatkan di tag <head> . Anda harus menentukan atribut konten jika nama atau atribut http-equiv didefinisikan. Jika atribut ini tidak ditentukan, atribut konten juga tidak dapat ditentukan.

Tag <meta> adalah kosong, yang berarti bahwa tag penutup tidak diperlukan. Namun dalam XHTML , tag (<meta> ) harus ditutup ().




Selanjutnya
Read More
By di No comments:
Label: ,

Ask Perbedaan desain web dan pengembang web yang sering di salah pahami AdityaDees

18:55 0
Anda mungkin telah memperhatikan bahwa masih ada banyak kebingungan seputar peran pekerjaan pengembang web dan desainer web web . Jika Anda berpikir untuk menjadi pengembang web , mungkin sulit untuk mengetahui dari mana harus memulai.

Untuk membantu memperjelas sedikit, dalam artikel ini saya akan menunjukkan perbedaan antara pengembang web dan perancang web dengan terlebih dahulu mendefinisikan setiap peran, melihat alat dan sumber daya yang dibutuhkan untuk masing-masing bidang.

Apa itu desainer web

Desain web merupkan tampilan visual dari sebuah situs web dan fungsionalitas dari sudut pandang pengguna. Desainer web sering bekerja dalam perangkat lunak desain seperti Figma atau Adobe XD untuk menciptakan pengalaman pengguna yang menarik secara visual. Mereka kemudian menyerahkan desain itu kepada pengembang.

Aplikasi web dan desain situs web melibatkan desainer ux ,ui dan desainer visual menggunakan keahlian mereka untuk membuat gambar rangka, maket, sistem desain, palet warna, templat, dan lainnya untuk membantu pengembang membangun produk.

1. Desainer UX

UX dikenal sebagai Pengalaman Pengguna. Pada dasarnya bagaimana perasaan pengguna dan tuntutannya terpenuhi setelah menggunakan perangkat lunak atau mobil atau gadget lain yang dirancang.

Dalam istilah sederhana "apakah pengguna dapat menggunakan produk dengan cara yang efisien, seperti yang dimaksudkan pengembang untuk menggunakan artefaknya.

2. Desainer perancang antarmuka penggun UI

Desain Antarmuka Pengguna (UI) adalah pembuatan grafik, ilustrasi, dan penggunaan karya seni fotografi dan tipografi untuk menyempurnakan tampilan dan tata letak produk digital dalam berbagai tampilan perangkatnya.

Elemen antarmuka terdiri dari kontrol input (tombol, menu tarik-turun, bidang data), komponen navigasi (bidang pencarian, penggeser, ikon, tag), komponen informasi (bilah kemajuan, pemberitahuan, kotak pesan).

3. Desainer Visual

Peran desainer visual adalah untuk membidik produk yang sudah jadi harus terlihat menarik. Mereka adalah campuran dari User Interface dan desainer Grafis. Jangan bingung antara desainer grafis dan desainer visual.

Apa itu pengembang web

Pengembangan web adalah proses pengkodean situs web untuk membuat desain yang dimaksudkan menggunakan bahasa pemrograman seperti CSS, HTML, JavaScript, Python, Ruby on Rails, dan banyak lagi.

Ada pengembang back-end yang fokus pada infrastruktur situs atau aplikasi web (hosting, keamanan, dll), ada pengembang front-end yang fokus pada fungsionalitas situs/aplikasi, dan ada pengembang full-stack yang bekerja di front-end dan back-end.

Tujuan utama mereka adalah membangun situs web yang berjalan lancar dan berfungsi dengan baik. Pengembang web bertanggung jawab atas kolaborasi dengan desainer UX, desainer UI, dan desainer visual untuk membuat halaman web berdasarkan desain yang disediakan oleh desainer.

Berdasarkan perannya, pengembang web juga dapat dibagi menjadi tiga jenis:

1. Front-end developer

Bagian dari situs web yang berinteraksi dengan pengguna secara langsung disebut sebagai front end. Ini juga disebut sebagai 'sisi klien' dari aplikasi. Ini mencakup semua yang dialami pengguna secara langsung: warna dan gaya teks, gambar, grafik dan tabel, tombol, warna, dan menu navigasi.

HTML, CSS, dan Javascript adalah bahasa yang digunakan untuk pengembangan Front End. Struktur, desain, perilaku, dan konten dari semua yang terlihat di layar browser saat situs web, aplikasi web, atau aplikasi seluler dibuka, diimplementasikan oleh pengembang Front End .

Daya tanggap dan kinerja adalah dua tujuan utama Front-End. Pengembang harus memastikan bahwa situs tersebut responsif yaitu muncul dengan benar pada perangkat dari semua ukuran, tidak ada bagian dari situs web yang berperilaku tidak normal terlepas dari ukuran layar.

2. Back-end developer

Backend adalah sisi server situs web. Ini menyimpan dan mengatur data, dan juga memastikan semua yang ada di sisi klien situs web berfungsi dengan baik. Ini adalah bagian dari situs web yang tidak dapat Anda lihat dan berinteraksi dengannya.

Ini adalah bagian dari situs web yang tidak dapat Anda lihat dan berinteraksi dengannya. Ini adalah bagian dari perangkat lunak yang tidak bersentuhan langsung dengan pengguna.

Bagian dan karakteristik yang dikembangkan oleh desainer backend diakses secara tidak langsung oleh pengguna melalui aplikasi front-end.

Aktivitas, seperti menulis API, membuat library, dan bekerja dengan komponen sistem tanpa antarmuka pengguna atau bahkan sistem pemrograman ilmiah, juga disertakan di backend.

3. Full stack developer

Pengembang web tumpukan penuh memiliki kemampuan untuk merancang aplikasi web dan situs web yang lengkap. Mereka bekerja di frontend, backend, database dan debugging aplikasi web atau situs web.

Alat yang di gunakan pengembang web dan desainer web

Pengembang web bekerja dengan bahasa pemrograman seperti HTML , CSS , dan Javascript untuk membuat situs web dan aplikasi web. Mereka juga kemungkinan besar akan menggunakan bahasa lain untuk mengatur layanan email, otentikasi pengguna, basis data, dan aspek teknis situs web lainnya.

Untuk melakukan ini, pengembang menggunakan beberapa alat penting seperti editor teks, antarmuka baris perintah, dan sistem kontrol versi untuk membangun informasi teknis (kode) yang akan menyajikan data.

Desainer web tidak bertanggung jawab terutama untuk mengetahui cara kerja kode — tetapi memastikannya secara estetika menyenangkan dan ramah pengguna bagi pengunjung situs web.

Mereka akan menggunakan perangkat lunak desain grafis—termasuk produk seperti Adobe Photoshop, Illustrator, Inkscape (alternatif yang sangat baik untuk Photoshop), dan GIMP.

Pada akhirnya, mereka akan merancang tata letak situs web melalui pembuatan prototipe dan gambar rangka . Desainer mengontrol aliran informasi dan bahkan dapat bertanggung jawab atas analisis situs web.

Apakah pengembang web lebih dominan menggunakan berotak kanan atau berotak kiri

Saat melihat perbedaan antara pengembang web dan perancang web, perbandingan "berotak kanan" (imajinatif) vs "berotak kiri" (logis) kadang-kadang dibuat.

Dikatakan bahwa orang yang berpikir lebih linier dan logis adalah dominan otak kiri dan akan menikmati dan lebih nyaman dengan pengembangan web, sedangkan orang yang menikmati kreativitas dan memiliki sifat artistik dominan otak kanan dan akan berkembang dalam desain web.

Namun, ada penelitian yang dilakukan yang menunjukkan bahwa orang tidak memiliki bagian otak yang dominan — seperti yang dikatakan Neil deGrasse Tyson, “Jangan panggil saya berotak kiri, berotak kanan. Panggil aku manusia.”

Jangan berpikir bahwa Anda cenderung untuk melakukan lebih baik di satu bidang daripada yang lain — seorang seniman dapat menjadi mahir dalam pengembangan web seperti halnya seorang ahli matematika dapat secara kreatif terampil dalam desain web.

Read More
By di No comments:
Label:

Ask Belajar JavaScript mengenal Variabel ,untuk pemula AdityaDees

15:01 0
Variabel merupakan segala bentuk sesuatu yang dapat bervariasi. Dalam bahasa scripting JavaScript, variabel menyimpan nilai data yang dapat diubah nanti. Gunakan kata kunci yang dicadangkan Var untuk mendeklarasikan variabel dalam JavaScript.


				
								
var < nama-variabel > 
var < nama-variabel > = < nilai >


Sebuah variable harus memiliki nama yang unik atau tidak sama dengan nama variable lainya dalam struktur kode anda. Perlu di ingat bahawa namaVariable Javascript sangat sensitif dimana namaVariabel dan namavariabel itu berbeda atau CaseSensitif.

Dalam aturan penulisan JavaScript itu bersifat CaseSensitif yaitu penulisan huruf kapital dan huruf kecil itu berbeda. Misalnya penulisan kode document.getElementById("namaVariabel").innerHTML; perhatikan dalam kurung "getElementById dan " dan "inner.HTML" huruf harus di tulis sama persis namaVariabel ,jangan seperti ini namavariabel. 

				
								
var  melon;


Perhatikan kode di atas, itu var melon; adalah deklarasi variabel. Itu belum memiliki nilai apa pun. Nilai default dari variabel yang tidak memiliki nilai apapun disebut undefined.

Anda dapat menetapkan nilai ke variabel menggunakan = operator saat Anda mendeklarasikannya atau setelah deklarasi dan sebelum mengunakanya.


				
var melon; 
    melon = "Hello JavaScript!"; // diberi nilai string
    
    alert(melon); // mengakses variabel
    
    
     // berikut ini mendeklarasikan dan menetapkan nilai numerik 
    
    var num = 100;
    var apel = num; // menetapkan variabel ke variabel




Dalam contoh di atas,variabel melon dideklarasikan terlebih dahulu dan kemudian diberi nilai string dalam pernyataan berikutnya. Variabel num dideklarasikan dan diinisialisasi dengan numerik nilai dalam laporan yang sama. Akhirnya, variabel apel dideklarasikan dan diinisialisasi dengan nilai variabel lain.

Mendeklarasikan beberapa variabel

Anda dapat juga mendeklarasikan beberapa variabel dalam satu baris yang dipisahkan oleh koma.

				
								
var satu= 1, dua = 'dua', tiga;




Variabel yang di ketik secara longgar

C# atau Java memiliki variabel yang diketik. Ini berarti variabel harus dideklarasikan dengan tipe data yang menentukan tipe data yang akan disimpan oleh variabel.

JavaScript adalah bahasa yang diketik secara longgar. Ini berarti tidak memerlukan tipe data untuk dideklarasikan. Anda dapat menetapkan nilai literal apa pun ke variabel, misalnya string, integer, float, boolean, dll.

				
var myvariable = 1; // numeric value myvariable = 'one'; // string value myvariable = 1.1; // decimal value 
myvariable = true; // Boolean value 
myvariable = null; // null value


Lingkup variabel
dalam JavaScript, variabel dapat dideklarasikan baik dalam lingkup global atau lingkup lokal. Sedangkan Lingkup Global.

Variabel Global
Variabel yang dideklarasikan dari fungsi apa pun disebut variabel global. Mereka dapat diakses di mana saja dalam kode JavaScript, bahkan di dalam fungsi apa pun.

Variabel Lokal Variabel yang dideklarasikan di dalam fungsi disebut variabel lokal untuk fungsi itu. Mereka hanya dapat diakses dalam fungsi di mana mereka dideklarasikan tetapi tidak di luar. Contoh berikut mencakup variabel global dan lokal.

				
var kacang = "Hello " // variabel global
		
function myfunction(){
var jambu = "JavaScript!"; //variabel lokal
			alert(kacang + jambu); // mengakses variabel global dan lokal
		}
      
		myfunction();
		
		alert(kacang);//dapat mengakses variabel global
		alert(jambu); //kesalahan: tidak dapat mengakses variabel lokal




Variabel yang dideklarasikan di luar fungsi apa pun menjadi variabel global. Variabel global dapat diakses dan dimodifikasi dari fungsi apa pun.

				
								
 var nama = "Bill";

		function modifyUserName() {
            nama = "Steve";
        };

	    function showUserName() {
            alert(userName);
        };


		alert(nama);

		modifyUserName();
		showUserName();




Pada contoh di atas, variabel nama menjadi variabel global karena dideklarasikan di luar fungsi apa pun. Fungsi modifikasiUserName() memodifikasi namapengguna karena namapengguna adalah variabel global dan dapat diakses di dalam fungsi apa pun.

Dengan cara yang sama, fungsi showUserName() menampilkan nilai variabel userName saat ini. Mengubah nilai variabel global dalam fungsi apa pun akan tercermin di seluruh program.

Harap dicatat bahwa variabel yang dideklarasikan di dalam fungsi tanpa kata kunci Var juga menjadi variabel global.


Contoh variabel global 


				
								
function createUserName() {
				userName = "Jono";
			};

		function modifyUserName() {
				if(userName)
					userName = "Lono";
			};

		function showUserName() {
				alert(userName);  
			};
    
		createUserName();
		showUserName(); // Jono

		modifyUserName();
		showUserName(); // Lono




Pada contoh di atas, variabel userName dideklarasikan tanpa kata kunci var di dalam createUserName(), sehingga menjadi variabel global secara otomatis setelah memanggil createUserName() untuk pertama kalinya.

Variabel userName akan menjadi variabel global hanya setelah createUserName() dipanggil setidaknya sekali. Memanggil showUserName() sebelum createUserName() akan mengeluarkan pengecualian "namapengguna tidak ditentukan.


Contoh variabel lokal

Variabel yang dideklarasikan di dalam fungsi apa pun dengan kata kunci var disebut variabel lokal. Variabel lokal tidak dapat diakses atau dimodifikasi di luar deklarasi fungsi.


				
	function xdor() {
			var nama = "jono";
		}

		function showUserName() {
			try{
				alert(nama);
			}
			catch(ex)
			{
				document.getElementById("error").innerHTML = ex;
			}
		}

		xdor();
		showUserName(); // kesalahan: nama pengguna tidak ditentukan




Dalam contoh di atas, namapengguna adalah lokal untuk fungsi xdor(). Itu tidak dapat diakses di fungsi showUserName() atau fungsi lainnya. Ini akan menimbulkan kesalahan jika Anda mencoba mengakses variabel yang tidak dalam lingkup lokal atau global. Gunakan blok coba tangkap untuk penanganan pengecualian.

Jika variabel lokal dan variabel global memiliki nama yang sama maka perubahan nilai dari satu variabel tidak mempengaruhi nilai variabel lainnya.


Deklarasi variabel tanpa kata kunci

Variabel dapat dideklarasikan dan diinisialisasi tanpa var kata kunci. Namun, nilai harus diberikan ke variabel yang dideklarasikan tanpa var kata kunci.

				
	function myfunction(){
			kidung = "Hello JavaScript!"; 
		}
		myfunction();
		document.getElementById("p1").innerHTML = kidung; // kidung menjadi variabel global sehingga dapat diakses di sini


Variabel yang dideklarasikan tanpa var kata kunci menjadi variabel global, di mana pun mereka dideklarasikan.Hal ini tidak dianjurkan untuk mendeklarasikan variabel tanpa var kunci karena sengaja dapat menimpa variabel global yang ada.




Selanjutnya
Read More
By di No comments:
Label: , ,

Ask Membuat program pertama dengan JavaScript untuk pemula AdityaDees

09:24 0
Ada beberapa cara untuk mencoba JavaScript, dan saat mempelajarinya, yang terbaik adalah mencobanya untuk melihat apa yang cocok untuk Anda. Sebelum mulai menulis code program JavaScript , silahkan persiapkan dulu teks editor dan web browser yang akan digunakan untuk menampilkan halaman web yang mengandung kode-kode Java Script.

Web browser yang digunakan harus mendukung Java Srcipt. Browser yang dapat digunakan adalah internet explorer dan Netscape Navigator.


Penulisan JavaScript

JavaScript ditulis pada file yang sama

Untuk menggunakan metode penulisan cara ini lihat berikut :

				
<script type="text/Javascript">
				
				
// kode js anda di sini	
				
				
</script>


JavaSript di tulis dalam file terpisah

Kode Javascript bisa juga kita buat dalam file terpisah dengan tujuan agar dokumen HTML isinya tidak terlalu panjang. Atribut yang digunakan adalah:

				
<script	src="namafile.js"></script>


Ketika anda menggunaka cara ini, anda tidak peru lagi menulis kode javaScript lagi seperti yang pertama tadi ,karena kode anda sudah di dala namafile.js, perlu di inggat bahwa file ekstensi dari JavaSript berakhiran .js .

Program pertama JavaScript

jika Anda ingin mencetak pesan langsung ke halaman web menggunakan JavaScript, Anda dapat menggunakan perintah JavaScript bawaan. Anda buka teks editor ,kemudian buat file sederhana index.html .

Anda juga dapat menempatkan program JavaScript langsung di badan halaman HTML dengan tag <script> muncul di bagian <head>, silahkan tulis kode berikut dan anda coba di tab anda : 

				
<!DOCTYPE HTML> 
<html> 
<head> 
<link href="../_css/style.css" rel="stylesheet"> 
</head> 
<body> 
<p>Sebelum script</p> 
<script> 
document.write('<p>Welcome to JavaScript!</p>'); 
</script> 
</body> 
</html>


Hasil :



Document.write() adalah perintah JavaScript seperti fungsi alert(), itu menulis apa pun yang Anda tempatkan di antara tanda kurung buka dan tutup. Dalam contoh ini HTML <p>Welcome to JavaScript! </p> ditambahkan ke halaman: tag paragraf dan dua kata.

Konsole JavaScript Chrome

Banyak pengembang web lebih suka menggunakan browser Google Chrome. Atribut DevTools-nya memberi Anda banyak cara untuk memperbaiki dan menyeimbangkan masalah HTML, CSS, dan JavaScript. Konsol JavaScript adalah tempat yang tepat untuk melacak kesalahan dan kesalahan dalam kode Anda. Itu juga mengenali baris dalam kode Anda di mana setiap kesalahan terjadi.

				
<!DOCTYPE HTML> 
<html> 
<head> 
<link href="../_css/style.css" rel="stylesheet"> 
</head> 
<body> 
<p>Sebelum teks</p> 
<script> 
alert('Welcome to JavaScript!'); 
</script> 
</body> 
</html>


Klik tombol menu Customize untuk membuka konsol JavaScript dan pilih Tools→JavaScript Console. Atau gunakan pintasan keyboard Ctrl+Shift+J (Windows) atau -Option-J (Mac) dll.

Menggunakam komentar di JavaScript

Penggunaan komentar JavaScript bertujuan untuk menjelaskan kode JavaScript dan membuatnya lebih mudah dibaca. Mereka juga dapat digunakan untuk mencegah eksekusi selama pengujian kode alternatif.

				
	
<!DOCTYPE HTML> 
<html> 
<body> <p>Komentar JavaScript: //</p> <script> 
				
// console.log('Welcome to Javascript!'); 

</script> 
</body> 
</html>


Komentar // ini digunakan satu baris untuk menulis catatan kecil. Anda hanya perlu menambahkan // sebelum kode atau teks Anda. Perhatikan bahwa semua jenis teks antara // dan akhir baris akan diabaikan oleh JavaScript dan tidak dieksekusi browser tampil di layar.

Mengenai komentar multi-baris, ketika anda mempunyai segmen kode yang panjang yang akan digunakan untuk menonaktifkan. Anda perlu menambahkan /* sebelum kode Anda dan */ setelahnya. Mulai dengan /* dan akhiri dengan */ . Ingat, bahwa teks apa pun antara /* dan */ akan diabaikan oleh JavaScript dan tidak dieksekusi browser.

				
<!DOCTYPE HTML> 
<html> 
<body> 
<p>Komentar JavaScript: /* */</p> 
<script>
/* console.log('Welcome to JavaScript!'); alert("Welcome to JavaScript"); */ 
 
</script> 
</body> 
</html>



Selanjutnya
Read More
By di No comments:
Label: , ,

01 September 2021

Ask Software terbaik untuk membantu pekerjan desain web AdityaDees

19:23 0
Apakah Anda seorang desainer web pemula yang ingin memahami perangkat lunak desain web modern atau Anda seorang ahli desain web yang ingin mengikuti pasar modern, sejumlah besar sumber daya tersedia secara online untuk membantu Anda berkembang.

Ketika anda sedang mempertimbangkan untuk mengunduh atau membeli lisensi perangkat lunak desain web, tentu ada beberapa aspek penting yang harus anda pertimbangkan. Karena itu akan mempengaruhi bagaimana pekerjaan anda akan berlangsung nantinya.

Pertama Anda harus memahami tidak ada perangkat lunak yang mencakup semua aspek kebutuhan desain web anda , jadi penting untuk memahami jika Anda memiliki anggaran untuk beberapa alat perangkat lunak. Sementara beberapa opsi gratis yang luar biasa, tersedia untuk membantu Anda mempelajari dasar-dasar desain web.

Kedua, Anda harus mempertimbangkan apakah perangkat lunak desain web akan cocok dengan alur kerja Anda. Hampir setiap alat modern yang bagus akan menawarkan integrasi dengan alat perangkat lunak lain seperti Slack, dan beberapa bahkan akan berintegrasi dengan alat desain web lain untuk memudahkan pengerjaan berbagai aspek desain Anda.

Sederhananya, perangkat lunak desain web terbaik untuk Anda adalah yang memiliki semua fitur dan dukungan yang Anda butuhkan, dan yang sesuai dengan anggaran Anda.

Penulis telah mengumpulkan beberapa perangkat lunak terbaik untuk memenuhi kebutuhan desain web anda, Semoga ada Software yang tepat untuk mempermudah pekerjaan anda . Desain web saat ini masih menjadi pekerjaan yang berkembang ,mengingat banyak industri startup yang semakin meningkat.

1. Figma

Figma adalah platform yang fantastis untuk setiap pengembang web yang ingin bekerja pada keterampilan merancang dan membuat prototipe tanpa khawatir tentang bagaimana mereka mengkodekannya.

Bahkan Figma mempunyai banyak tool untuk membantu Anda membuat situs web responsif dan elemen desain web, komponen yang dapat digunakan kembali yang dapat Anda salin di berbagai halaman web, dan bahkan perpustakaan aset desain yang dapat Anda tarik dan lepas ke dalam desain Anda.

Figma sangat baik untuk desain dan prototipe dengan ketelitian rendah dan tinggi selain itu Figma juga tersedia untuk OS Windows dan macOS, dengan aplikasi pratinjau langsung untuk iOS dan Android.

2. Skecth

Skecth hadirtersedia untuk Windows dan macOs,dan juga dengan aplikasi pratinjau langsung untuk iOS serta Android. Skecth sangat cocok untuk melakukan desain web drag-and-drop fantastis lainnya, yang membantu desainer web untuk membangun desain dan prototipe yang menakjubkan tanpa memerlukan pengetahuan pengkodean apa pun.

Salah satu fitur terbaik yang akan Anda dapatkan dengan Sketch adalah kemampuan untuk memperbesar komponen atau elemen apa pun hingga ke tingkat piksel, sehingga Anda dapat menyelaraskan setiap bagian dari desain Anda dengan sempurna.

3. Webflow

Di Webflow memiliki Antarmuka intuitif cerdas kami dirancang untuk bekerja sepenuhnya dengan HTML, CSS, dan JavaScript, jadi Anda tidak perlu tahu cara mengkodekannya. Namun, kami masih mendukung pembuat kode.

Jika Anda perlu menambahkan kode custom apa pun ke desain web Anda untuk membuatnya bekerja dengan cara yang belum didukung oleh Webflow, Anda dapat dengan mudah memasukkan kode kustom di mana pun Anda membutuhkannya.

Dan jika Anda tidak mahir dalam JavaScript tetapi ingin merancang interaksi elemen, Webflow juga sangat membantu Anda. Webflow memudahkan untuk mendesain interaksi dan animasi tanpa perlu menambahkan kode khusus sama sekali.

4. Adobe XD

Adobe XD memiliki berbagai alat untuk membantu Anda membuat prototipe dan desain dengan ketelitian rendah dan tinggi secara kolaboratif. Anda juga akan mendapatkan pustaka aset desain tempat Anda dapat menentukan font, warna, dan komponen, dan seperti kebanyakan pustaka komponen lainnya, mengedit komponen ini akan memperbarui setiap instance di seluruh desain Anda.

Banyaj desainer web berpengalaman telah menggunakan Photoshop selama bertahun-tahun untuk membuat prototipe dan mendesain mock-up, Adobe merilis XD pada tahun 2019 sebagai alat perangkat lunak desain web berbasis vektor yang lengkap. Jika Anda sudah terbiasa dengan Photoshop, kemungkinan besar Anda akan akrab dengan Adobe XD.

5. Framer

Awalnya dimulai sebagai pustaka JavaScript untuk pembuatan prototipe, Framer sekarang menjadi alat lengkapnya sendiri yang dirancang untuk membantu tim desain membuat prototipe tanpa kode yang menakjubkan.

Apa yang membuat Framer berbeda dari alat lain dalam daftar ini adalah ia memiliki perpustakaan besar aset visual, yang semuanya dapat disesuaikan agar sesuai dengan proyek Anda. Sangat mudah untuk menyesuaikan bagaimana elemen desain yang berbeda bekerja satu sama lain dan transisi di layar.

Meskipun antarmukanya sangat mirip dengan Sketch, Anda mendapatkan lebih banyak dukungan dalam hal animasi tingkat lanjut dan desain yang sepenuhnya responsif.

6.Flowmap

Salah satu elemen kunci dari desain web adalah memahami perjalanan pelanggan. FlowMapp dirancang untuk membantu Anda membuat diagram alur dan peta perjalanan serta memahami apa yang dicari pengunjung situs Anda. Ini juga sepenuhnya dirancang untuk kolaborasi dan memungkinkan tim untuk mengerjakan proyek bersama secara real time.

Meskipun tidak dirancang untuk menjadi alat desainer yang lengkap, FlowMapp hadir dengan perpustakaan ikon, editor teks, alat penunjuk, dan semua yang Anda butuhkan untuk membuat diagram alur yang menarik yang siap Anda presentasikan pada pertemuan berikutnya.

7. Balsamiq

Balsamiq adalah alat yang fantastis bagi siapa saja yang ingin mempelajari lebih lanjut tentang membangun antarmuka pengguna dan meningkatkan pengalaman pengguna. Ini adalah alat wireframing dengan ketelitian rendah yang membuatnya cepat dan mudah untuk menyusun beberapa versi antarmuka pengguna tanpa terjebak dalam detail tentang warna, font, dan elemen desain lainnya yang muncul kemudian dalam prosesnya.

Baik Anda baru mengenal desain web atau ingin mempelajari lebih lanjut tentang desain antarmuka pengguna, Balsamiq memiliki salah satu kurva pembelajaran terendah dari semua perangkat lunak desain web. Ini memiliki ratusan aset untuk Anda gunakan dalam editor drag-and-drop sederhana, dan Anda bahkan dapat menautkan desain bersama untuk pembuatan prototipe dasar.

8. Optimal Workshop

Dengan Riset Optimal, Anda mendapatkan banyak alat berbeda yang membantu Anda merancang gambar rangka dan mengujinya dengan peserta riset nyata. Anda dapat dengan cepat menyiapkan desain situs web, membuat studi, merekrut peserta, dan melihat rute apa yang mereka ambil untuk mencoba menemukan informasi yang Anda tentukan di awal studi.

Ini fantastis untuk pengembang web yang bekerja dengan toko online karena memberi Anda gambaran fantastis tentang bagaimana pengguna akan mencoba menemukan produk.Ini memberi Anda semua data yang Anda butuhkan untuk membuat bingkai gambar dan membuat desain situs web yang berfungsi penuh dan melayani pengguna Anda.

9 . Google Web Desainer

Ketika Anda memulai dengan desain web, kemungkinan besar Anda tidak ingin membayar untuk perangkat lunak desain web. Google Web Designer , meskipun dirancang untuk bekerja dengan Google Ads dan Google Display & Video 360, adalah alat yang hebat untuk memulai.

Tidak hanya gratis, tetapi juga berjalan pada HTML5, yang merupakan salah satu bahasa pengkodean termudah untuk dipahami. Karena itu, Anda tidak perlu tahu cara membuat kode untuk menggunakan Google Web Designer.

Namun, jika Anda ingin menambahkan kode khusus atau sedang mempelajari cara kerja pengkodean, Anda dapat membuka editor kode untuk melihat kode HTML5, CSS, dan JavaScript yang telah dibuat sebelumnya saat Anda mengedit.

10. Justimind

Justinmind adalah platform pembuatan prototipe aplikasi all-in-one yang dirancang untuk membantu desainer web membuat aplikasi yang mudah digunakan dan intuitif untuk semua perangkat. Ini adalah salah satu alat perangkat lunak desain web prototipe ramah pemula yang tersedia di pasaran saat ini, dan memiliki berbagai sumber belajar untuk membantu Anda memahami desain UX.

Salah satu manfaat utama Justinmind adalah kit UI pra-instal yang membantu Anda membuat prototipe aplikasi untuk iOS dan Android, serta membangun diagram alur dan UI wireframe. Plus, jika Anda ingin membuat prototipe lebih jauh, Anda dapat mengunduh kit UI tambahan yang membantu Anda mendesain untuk perangkat lain, seperti Apple Watch dan Google Glass, atau menyertakan elemen ramah pengembang dari Bootstrap.

11. Studio Invision

Salah satu hal terbaik tentang InVision Studio adalah ia mendukung banyak integrasi berbeda untuk rangkaian desain Anda yang ada, seperti Sketch, Photoshop, dan bahkan alat produktivitas seperti Slack dan Trello.

Alat pembuatan prototipe desain web ini memiliki semua yang biasanya Anda perlukan, baik Anda bekerja sendiri atau berkolaborasi dengan tim. InVision Studio sangat berfokus pada kolaborasi, dengan alat seperti papan untuk mengumpulkan inspirasi, papan tulis digital, dan alat komentar dan pengeditan kolaboratif secara real-time. Ini adalah pilihan yang baik untuk bekerja atau untuk berbagi ide Anda dengan teman-teman.

Begitu banyak pilihan di luar sana untuk mengoptimalkan alur kerja Anda, meningkatkan desain Anda, dan bahkan membantu Anda menguji pengguna gambar rangka dan prototipe Anda. Beberapa perangkat lunak diatas mungkin cocok dengan alur kerja anda .


Read More
By di No comments:
Label: ,

Ask Belajar HTML membuat Form untuk pemula AdityaDees

10:39 0
Formulir HTML merupakan bagian dari dokumen yang berisi sebuah elemen formulir. Elemen formulir ini bisa berdasarkan dari jenis berbagai elemen input, seperti misalnya bidang teks, kotak centang, tombol radio, tombol kirim, label, dan lain sebagainya .

Tag <form> dari HTML yang digunakan untuk mendeklarasikan sebuah form. biasanya Tag ini datang berpasangan dengan elemen khusus yang disebut kontrol, elemen ini ditulis di antara tag pembuka <form> dan tag penutup </form> .

Berikut ini merupakan benerapa elemen pengilut untuk menggunakan tag <form> :
  • <input>
  • <button>
  • <textarea>
  • <form>
  • <option>
  • <select>
  • <label>
  • <fieldset>

Kontrol formulir tinggal di dalam elemen <form> . elemen ini harus selalu melakukan tindakan atribut dan biasanya akan memiliki metode dan atribut id juga. <action> - Setiap elemen <form> membutuhkan atribut tindakan. Nilainya adalah URL untuk halaman di server yang akan menerima informasi dalam bentuk kapan diajukan.

				
<form action="http://www.example.com/subscribe.php"
 metode="get">
 <p>
 	
// Di sinilah kontrol formulir akan muncul.
 	
 	
  </p>
</form>


Hasilnya :

// Di sinilah kontrol formulir akan muncul.



Formulir dapat dikirim menggunakan salah satu dari dua metode: get atau post. Dengan metode get, nilainya dari formulir ditambahkan ke akhir dari URL yang ditentukan dalam atribut tindakan. Metode get ini ideal untuk:
  • Bentuk pendek (seperti pencarian kotak)
  • Ketika Anda baru saja mengambil data dari server web (tidak mengirimkan informasi yang harus ditambahkan atau dihapus dari database)


Dengan metode post, nilai dikirim dalam bentuk yang dikenal sebagai header HTTP. Sebagai aturan praktis Anda harus menggunakan metode post jika formulir Anda :
  • Memungkinkan pengguna untuk mengunggah file
  • Sangat panjang
  • Berisi data sensitif (misalnya kata sandi)
  • Menambahkan informasi ke, atau menghapus informasi dari database
  • Jika atribut metode bukan digunakan, data formulir akan dikirim menggunakan metode get.

Input

Elemen <input> kontrol . Nilai jenisnya atribut menentukan jenis masukan yang akan mereka buat. Ketika atribut type="text" memiliki nilai teks, itu menciptakan satu masukan teks baris.

				
<form action="http://www.example.com/login.php">
<p>Username:
 <input type="text" name="username" size="15" 
 maxlength="30" />
</p>
</form>


Hasil :

Username:



Saat pengguna memasukkan informasi ke dalam formulir, server perlu tahu bentuk mana yang mengontrol masing-masing sepotong data dimasukkan ke dalam. Misalnya, dalam formulir login, tombol server perlu tahu apa yang telah dimasukkan sebagai nama pengguna dan apa yang telah diberikan sebagai kata sandi.

Oleh karena itu, setiap formulir kontrol membutuhkan atribut name. Nilai atribut ini mengidentifikasi kontrol formulir dan dikirim beserta informasinya mereka masuk ke server.

Anda dapat menggunakan maxlength atribut untuk membatasi jumlah karakter yang dapat dimasukkan pengguna ke dalam bidang teks. Nilainya adalah jumlah karakter yang mereka dapat memasuki. Misalnya, jika Anda minta setahun, maxlength atribut bisa memiliki nilai 4.

Password input

Ketika atribut type="text" memiliki nilai kata sandi yang dibuatnya kotak teks yang bertindak seperti input teks satu baris, kecuali karakter diblokir. Mereka disembunyikan dengan cara ini jadi jika seseorang melihat ke atas bahu pengguna, mereka tidak bisa melihat data sensitif seperti kata sandi.

Atribut name menunjukkan nama input kata sandi, yang dikirim ke server dengan kata sandi yang dimasukkan pengguna.size, maxlenght dapat membawa ukuran dan atribut maxlength seperti input teks satu baris.

				
<form action="http://www.example.com/login.php">
<p>Username:
 <input type="text" name="username" size="15" 
 maxlength="30" />
</p>
<p>Password:
 <input type="password" name="password" size="15" 
 maxlength="30" />
</p>
</form>


Hasil :

Username:

Password:



Meskipun kata sandinya disembunyikan di layar, ini tidak berarti data dalam kata sandi kontrol dikirim dengan aman ke server. Anda seharusnya tidak bisa menggunakan cara seperti ini untuk mengirim data sensitif seperti nomor kartu kredit.

Untuk keamanan penuh, server membutuhkan diatur untuk berkomunikasi dengan browser pengguna menggunakan Lapisan Soket Aman (SSL). Topik SSL berada di luar cakupan dari artikel ini, namun ada tautan untuk mempelajari lebih lanjut tentangnya di berbagai situs web yang membahas tentang itu

Textarea

Elemen <textarea> digunakan untuk membuat input teks multiline. Tidak seperti elemen input lainnya, ini bukan elemen kosong. Oleh karena itu, ia harus memiliki tag pembuka dan penutup.

Teks apa pun yang muncul di antara pembuka <textarea> dan tag <textarea> penutup akan muncul di kotak teks halaman. Jika pengguna tidak menghapus apapun teks di antara tag ini, pesan ini akan dikirim ke server bersama dengan apa pun yang telah pengguna ketik. Beberapa situs mengunakan JavaScript untuk menghapus informasi ini ketika pengguna mengklik di bidang teks.

				
<form action="http://www.example.com/comments.php">
<p>Apa pendapat anda tentang belaja HTML?</p>
 <textarea name="comments" cols="20" rows="4">
 Tulis komentar disini..
 
</textarea>
</form>


Hasil :

Apa pendapat anda tentang belaja HTML?



Jika Anda membuat formulir baru, anda harus menggunakan CSS untuk mengontrol lebar dan tinggi tag <textarea>. Namun, jika Anda melihat kode yang lebih lama, Anda mungkin melihat atribut cols dan rows digunakan dengan elemen ini.

Atribut cols menunjukkan seberapa lebar area teks seharusnya diukur dalam jumlah karakter. Atribut baris menunjukkan berapa banyak baris area, teks harus mengambil Tegak lurus.

Contoh form radio button 


				
<form action="http://www.example.com/profile.php">
<p>Pilih genre musik favoritmu:
 <br />
 <input type="radio" name="genre" value="rock" 
 checked="checked" /> Rock
 <input type="radio" name="genre" value="pop" /> 
 Pop
 <input type="radio" name="genre" value="jazz" /> 
 Jazz
</p>
</form>


Hasil:

Pilih genre musik favoritmu:
Rock Pop Jazz



Contoh form checkbox 


				
<form action="http://www.example.com/profile.php">
<p>Silakan pilih layanan musik favorit Anda:
 <br />
 <input type="checkbox" name="service" 
 value="itunes" checked="checked" /> iTunes
 <input type="checkbox" name="service" 
 value="lastfm" /> Last.fm
 <input type="checkbox" name="service" 
 value="spotify" /> Spotify
</p>
</form>


Hasil:

Silakan pilih layanan musik favorit Anda:
iTunes Last.fm Spotify



Contoh Drop Down List Box 


				
				
<form action="http://www.example.com/profile.php">
<p>Di perangkat apa Anda mendengarkan musik?</p>
<select name="devices">
 <option value="ipod">iPod</option>
 <option value="radio">Radio</option>
 <option value="computer">Computer</option>
 </select>
</form>


Hasil:

Di perangkat apa Anda mendengarkan musik?



Contoh Form Multiple Select Box 


				
	<form action="http://www.example.com/profile.php">
<p>Apakah Anda memainkan salah satu alat musik berikut?
(Anda dapat memilih lebih dari satu opsi dengan menahan
kontrol bawah pada PC atau tombol perintah pada Mac
saat memilih opsi yang berbeda.)</p>
<select name="instruments" size="3" 
 multiple="multiple">
 <option value="guitar" selected="selected">
 Guitar</option>
 <option value="drums">Drums</option>
 <option value="keyboard" 
 selected="selected">Keyboard</option>
 <option value="bass">Bass</option>
</select>
</form>


Hasil :

Apakah Anda memainkan salah satu alat musik berikut? (Anda dapat memilih lebih dari satu opsi dengan menahan kontrol bawah pada PC atau tombol perintah pada Mac saat memilih opsi yang berbeda.)



Contoh File input Box 


				
<form action="http://www.example.com/upload.php"
method="post">
<p>Upload your song in MP3 format:</p>
<input type="file" name="user-song" /><br />
<input type="submit" value="Upload" />
</form>


Hasil :

Upload your song in MP3 format:




Contoh submit Button 


				
<form action="http://www.example.com/subscribe.php">
<p>Berlangganan ke daftar email kami:</p>
<input type="text" name="email" />
<input type="submit" name="subscribe" 
 value="Subscribe" />
</form>


Hasil :

Berlangganan ke daftar email kami:



Contoh image Button 


				
<form action="http://www.example.org/subscribe.php">
<p>Berlangganan ke daftar email kami:</p>
 <input type="text" name="email" />
 <input type="image" src="images/subscribe.jpg" 
 width="100" height="20" />
</form>


Hasil :

Berlangganan ke daftar email kami:



Contoh Labelling Form Controls 


				
<label>Age: <input type="text" name="age" /></label>
<br/ >
Gender:
<input id="female" type="radio" name="gender"
value="f">
<label for="female">Female</label>
<input id="male" type="radio" name="gender" 
value="m">
<label for="male">Male</label>


Hasil:

Gender:


Contoh Grouping Form Elements 


				
<fieldset>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email" /></label><br />
<label>Mobile:<br />
<input type="text" name="mobile" /></label><br />
<label>Telephone:<br />
<input type="text" name="telephone" /></label>
</fieldset>


Hasil :
Contact details



Contoh Form Validation 


				
<form action="http://www.example.com/login/"
 method="post"> 
<label for="username">Username:</label>
<input type="text" name="username"
 required="required" /></title><br /> 
<label for="password">Password:</label>
<input type="password" name="password"
 required="required" /> 
<input type="submit" value="Submit" />
</form>


Hasil :



Contoh Form Search Input 


				
<form action="http://www.example.org/search.php">
<p>Search:</p>
<input type="search" name="search" />
<input type="submit" value="Search" />
</form>


Hasil :

Search:



Example Form 


				
<html>
<head>
 <title>Forms</title>
</head>
<body>
 <form action="http://www.example.com/review.php" method="get">
 <fieldset>
 <legend>
 Your Details:
 </legend>
 <label>
 Name:
 <input type="text" name="name" size="30" maxlength="100">
 </label>
 <br />
 <label>
 Email:
 <input type="email" name="email" size="30" maxlength="100">
 </label>
 <br />
 </fieldset>
 <br />
 <fieldset>
 <legend>
 Your Review:
 </legend>
 <p>
 <label for="hear-about">
 How did you hear about us?
 </label>
 <select name="referrer" id="hear-about">
 <option value="google">Google</option>
 <option value="friend">Friend</option>
 <option value="advert">Advert</option>
 <option value="other">Other</option>
 </select>
 </p>
 <p>
 	Would you visit again?
 <br />
 <label>
 <input type="radio" name="rating" value="yes" />
 Yes
 </label>
 <label>
 <input type="radio" name="rating" value="no" />
 No
 </label>
 <label>
 <input type="radio" name="rating" value="maybe" />
 Maybe
 </label>
 </p>
 <p>
 <label for="comments">
 Comments:
 </label>
 <br />
 <textarea rows="4" cols="40" id="comments">
 </textarea>
 </p>
 <label>
 <input type="checkbox" name="subscribe" checked="checked" />
 Sign me up for email updates
 </label>
 <br />
 <input type="submit" value="Submit review" />
 </fieldset>
 </form>
</body>
</html>


Hasil:
Your Details:


Your Review:

Would you visit again?






Selanjutnya
Read More
By di No comments:
Label: ,

31 August 2021

Ask Belajar HTML membuat tabel sederhana untuk pemula AdityaDees

22:13 0
Ada beberapa jenis informasi yang perlu ditampilkan dalam kotak tabel. Misalnya: hasil olahraga, laporan saham, jadwal kereta api dan lain sebagainya. Saat mewakili informasi dalam tabel, Anda perlu berpikir dalam hal kisi yang terdiri dari baris dan kolom (sedikit seperti lembar kerja). Dalam bab ini Anda akan belajar bagaimana:
  • Gunakan empat elemen kunci untuk membuat tabel
  • Mewakili data yang kompleks menggunakan tabel
  • Tambahkan keterangan ke tabel
Sebuah tabel mewakili informasi dalam format grid. Contoh tabel termasuk laporan keuangan, TV jadwal, dan hasil olahraga.Grid memungkinkan kita untuk mengerti data kompleks dengan referensi informasi pada dua sumbu. Setiap blok di grid disebut sebagai sel tabel. Dalam HTML tabel ditulis baris demi baris.

Struktur basic tabel

Elemen <table> digunakan untuk membuat tabel. Isi dari tabel ditulis baris dengan baris. Anda menunjukkan awal dari masing-masing baris dengan menggunakan tag pembuka <tr>.

Ini diikuti oleh satu atau lebih elemen <td> satu untuk setiap sel di baris itu. Di akhir baris Anda menggunakan tag </tr> sebagai penutup. Setiap sel dari sebuah tabel adalah direpresentasikan menggunakan elemen <td> . Di akhir setiap sel Anda menggunakan tag </td< sebagai penutup.

				
<table>
 <tr>
 <td>15</td>
 <td>15</td>
 <td>30</td>
 </tr>
 <tr>
 <td>45</td>
 <td>60</td>
 <td>45</td>
 </tr>
 <tr>
 <td>60</td>
 <td>90</td>
 <td>90</td>
 </tr>
</table>


Hasil :
15 15 30
45 60 45
60 90 90


Table Heading

Elemen <th> digunakan hanya seperti elemen <td> tapi itu tujuannya adalah untuk mewakili menuju kolom atau berturut-turut. Bahkan jika sel tidak memiliki konten, Anda masih harus menggunakan <td> atau <th> elemen untuk mewakili adanya sel kosong.

Menggunakan elemen <th> untuk heading membantu orang yang gunakan pembaca layar, tingkatkan kemampuan mesin pencari untuk mengindeks halaman Anda, dan juga memungkinkan Anda untuk mengontrol tampilan tabel lebih baik ketika Anda mulai menggunakan CSS.

Anda dapat menggunakan atribut lingkup pada elemen <th> untuk menunjukkan apakah itu heading untuk kolom atau baris. Itu bisa mengambil nilai: baris untuk menunjukkan judul untuk baris atau col untuk menunjukkan menuju kolom.

				
<table>
 <tr>
 <th></th>
 <th scope="col">Senin</th>
 <th scope="col">Selasa</th>
 </tr>
 <tr>
 <th scope="row">Tiket terjual:</th>
 <td>120</td>
 <td>135</td>
 </tr>
 <tr>
 <th scope="row">Total penjualan:</th>
 <td>$600</td>
 <td>$675</td>
 </tr>
</table>


Hasil :
Senin Selasa
Tiket terjual: 120 135
Total penjualan: $600 $675


Spanning Columns

Terkadang Anda mungkin membutuhkan entri dalam tabel untuk diregangkan melintasi lebih dari satu kolom. Atribut colspan dapat berupa digunakan pada elemen <th> atau <td> dan menunjukkan berapa banyak kolom sel yang harus dijalankan.


 				
 <table>
  <tr>
  <th></th>
  <th>9am</th>
  <th>10 pagi</th>
  <th>11am</th>
  <th>12am</th>
  </tr>
  <tr>
  <th>Senin</th>
  <td colspan="2">Geografi</td>
  <td>Matematika</td>
  <td>Seni</td>
  </tr>
  <tr>
  <th>Selasa</th>
  <td colspan="3">Gym</td>
  <td>Beranda Ec</td>
  </tr>
 </table>


Hasil :
9am 10 pagi 11am 12am
Senin Geografi Matematika Seni
Selasa Gym Beranda Ec


Pada contoh di atas Anda dapat melihat jadwal dengan lima kolom; kolom pertama berisi judul untuk itu baris (hari), empat sisanya mewakili slot waktu satu jam .

Jika Anda melihat sel tabel itu mengandung kata 'Geografi' Anda akan melihat bahwa nilai atribut colspan adalah 2, yang menunjukkan bahwa sel harus berjalan melintasi dua kolom. Di ketiga baris, 'Gym' berjalan di tiga kolom.

Anda dapat melihat bahwa yang kedua dan baris ketiga memiliki lebih sedikit <td> elemen daripada yang ada kolom. Ini karena, ketika sebuah sel memanjang lebih dari satu kolom, <td> atau <th> sel yang seharusnya ada di tempat sel yang lebih luas tidak termasuk dalam kode.

Spanning Row

Anda mungkin juga memerlukan entri untuk direntangkan lebih dari satu baris. Atribut berupa rowspan dapat digunakan pada elemen <th> atau <td> untuk menunjukkan berapa banyak baris sel harus merentang ke bawah .

				
<table>
  <tr>
  <th></th>
  <th>ABC</th>
  <th>BBC</th>
  <th>CNN</th>
  </tr>
  <tr>
  <th>6pm - 7pm</th>
  <td rowspan="2">Film</td>
  <td>Komedi</td>
  <td>Berita</td>
  </tr>
  <tr>
  <th>7pm - 8pm</th>
  <td>Olahraga</td>
  <td>Urusan Saat Ini</td>
  </tr>
 </table>


Hasil :
ABC BBC CNN
6pm - 7pm Film Komedi Berita
7pm - 8pm Olahraga Urusan Saat Ini


Contoh table 


					
								
<html>
 <head>
  <title>Tabel</title>
 </head>
 <body>
  <table>
  <thead>
  <tr>
  <th></th>
  <th scope="col">Hosting awal rumah</th>
  <th scope="col">Hosting bisnis premium</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <th scope="row">Ruang disk</th>
  <td>250mb</td>
  <td>1gb</td>
  </tr>
  <tr>
  <th scope="row">Bandwidth</th>
  <td>5gb per bulan</td>
  <td>50gb per bulan</td>
  </tr>
  <!-- lebih banyak baris seperti dua di atas di sini -->
  </tbody>
  <kaki>
  <tr>
  <td></td>
  <td colspan="2">Daftar sekarang dan hemat 10%!</td>
  </tr>
  </tfoot>
  </table>
 </tbody>
 </html>
Hosting awal rumah Hosting bisnis premium
Ruang disk 250mb 1gb
Bandwidth 5gb per bulan 50gb per bulan
Daftar sekarang dan hemat 10%!


Contoh tabel

CSS

					
									
.content {
	 border-collapse: collapse;
	 margin: 25px 0; 
	 font-size: 0.9em; 
	 min-width: auto; 
	 border-radius: 5px 5px 0 0;
	 overflow: hidden; 
	 box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	  } 
.content thead tr { 
	 background-color: #1B1464; 
	 color: #ffffff; 
	 text-align: left; 
	 font-weight: bold; 
	 } .content th, .content td {
	  padding: 12px 15px;
	   } 
.content tbody tr { 
	  border-bottom: 1px solid #dddddd;
	   }
.content tbody tr:nth-of-type(even) { background-color: #f3f3f3; 
} 
.content tbody tr:last-of-type { border-bottom: 2px solid #1B1464;
 } 
.content tbody tr.r { 
	   font-weight: bold; color: #1B1464; 
	   }


HTML

					
<table class="content"> 
<thead> 
<tr> 
<th>Reg:No</th> 
<th>Nama</th> 
<th>Poin</th> 
<th>peringkat</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>0011</td> 
<td>Jono</td> 
<td>510</td> 
<td>56</td> 
</tr> 
<tr class="r"> 
<td>1520</td> 
<td>Doris</td> 
<td>720</td> 
<td>45</td> 
</tr> 
<tr> 
<td>1812</td> 
<td>Sara</td> 
<td>250</td> 
<td>225</td> 
</tr> 
</tbody> 
</table>


Hasil :
Reg:No Nama Poin peringkat
0011 Jono 510 56
1520 Doris 720 45
1812 Sara 250 225



Selanjutnya
Read More
By di No comments:
Label: ,

https://payclick.com/

Contact us for advertising.

Author Details

Menyediakan berbagai macam tutorial dan informasi penting dalam berbagai hal