Kamis, 12 Januari 2017

Belajar HTML & CSS



Learning HTML and CSS
Pengertian 
Sebelum membahas lebh jauh tentang HTML kita perlu mengetahu dulu apa itu html dan CSS.  
  • HTML itu singkatan dari Hyper Text Markup Language
  • Hyper: adalah kebalikan dari kata linear, linear adalah bahasa pemrograman, linear ''urutan tertentu'' dengan menggunakan Hyper jadi user bisa menghasilkan sebuah website dan user juga bisa mengunjungi sebuah website setiap saat.
  • Text: dalam kata html ini hanya tersedia dalam bahasa Inggris, atau teks html saat ini hanya ada dalam bahasa Inggris.
  • Markup: artinya apa yang dilakukan terhadap teks untuk merubah penampilan. Markup terdiri dari satu set simbul atau bahasa yang digunakan untuk memberi petunjuk dengan menggunakan kode-kode atau bahasa dalam spesifikasi tertentu contohnya: <b> </b> <h1> <p> </p> <ul> </ul> etc. Jadi dengan menggunakan markup maka teks akan bisa diatur dengan menggunakan jenis huruf yang tepat misalnya ukuran tinggi/height,  lebar/weight, atau ukuran/tanda yang lain.
  • Language: bahasa dalam html adalah bahasa yang dibaca oleh komputer untuk memahami sebuah web.
Itulah arti HTML saya sudah tuliskan di atas dan orang yang ingin mengetahui lebih jauh tentang html jadi harus siap-siap punya minat coding. Dan sekarang juga banyak tehnik belajar HTML secara online yang free atau gratis. 

Memang untuk mendirikan sebuah web atau blog tidak ada keharusan untuk memahami HTML tapi untuk orang yang ingin/suka mendirikan/menghasilkan sebuah website apabila tahu dan memahami bagaimana html bekerja pasti itu akan sangat membantu sekali.


Belajar HTML & CSS    
Pertama siapkan text editor seperi Sublime,Jika tidak punya klick disini  jika sudah,Instal aplikasi tersebut seperti biasa.lalu buka aplikasinya 

1.Tag dasar pada html (Structure)

Berikut adalah contoh sederhana HTML


<!Doctype html>
<html>
  <head>
    <title>Belajar HTML dan CSS</title>
  </head> 
    <body>
    <h1>Selamat Pagi Dunia,Hello World</h1>
    <p>Saya akan bersungguh Sungguh dalam belajar web,Pertama yang saya lakukan adalah mempelajari html</p>
    </body>
   </html>
 
  • <!Doctype html> adalah tag untuk menandai bahwa dokumen ini adalah html 5
  • <html> Mendefinisikan root dari suatu dokumen HTML,tag ini harus menggunakan tag penutup </html>
  • <head> Digunakan untuk memberikan informasi tentang dokumen tersebut,dan juga berfungsi untuk menghubungkan dengan dokumen lain,Seperti memanggil CSS,harus menggunakan tag penutup </head>
  • <title> Membuat judul untuk dokumen HTMLBiasanya di tampilkan pada bagian atas,Seperti address bar harus menggunakan tag penutup </title>
  • <body> Mendefinisikan body/isi dokumen HTML, berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan di web browsernya. Isi dokumen tersebut dapat berupa teks, gambar, animas, link dan seterusnya.harus menggunakan tag penutup </body> 
  • <h1>Digunakan untuk menunjukkan awal dari suatu header/judul dari dokumen HTML tersebut..Harus menggunakan tag penutup<h1/>
  • <p> Membuat sebuah paragraf.Harus menggunakan tag penutup </p> 

2.Konten pada html (html kontent)

 Pada Bagian kini akan belajar bagaimana menggunakan beberapa element HTML yang paling umum atau sering digunakan dalam HTML.Pada Pembahasan ini hanya akan mempelajari bagaimana html dapat mengubah teks dengan sebuah code code tertentu.
Berikut Contohnya Codingannya,SAlin codingan tersebut pada Tekeditor kalian,kemudian Simpan dengan format *html,Jika sudah buka web browser kalian,kemudian tulis alamat kalian menyimpan file html tersebut pada address bar.

<!DOCTYPE html>
<html>
                <head>
                <title>Animals Around the World</title>
                </head>
                <body>
  <h1>The Brown bear</h1>
  <p>The brown bear (Ursus arctos) is native to parts of northern Eurasia and North America. Its conservation status is currently "Least Concern." There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
  <a href='https://en.wikipedia.org/wiki/Brown_bear' target='_blank'>Learn More</a>
    <p>The following are subspecies of bears:</p>
  <ul>
    <li>Arctos</li>
    <li>Collarus</li>
    <li>Horribilis</li>
    <li>Nelsoni (extinct)</li>
  </ul>
<p>The following countries have the largest populations<br /> of brown bears:</p>
                <ol>
                <li>Russia</li>
                <li>United States</li>
                <li>Canada</li>
                </ol>
  <a href='https://en.wikipedia.org/wiki/Brown_bear' target='_blank'><img src='https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg' alt='Brown Bear'></a>
                </body>
</html>
 Hasilnya akan seperti gambar disamping..Jika berhasil,kalian pasti merasakan senang yang tiada tara.Saya akan jelaskan satu persatu element yang ada pada html yang telah kalian buat

 
  1. Tag <h1> adalah tag yang fungsinya yaitu membuat teks heading.Selain h1 ada juga teks heading lainya seperti <h2>,<h3>,<h4>,<h5> hingga <h6> .H1 merupakan teks heading dengan ukuran terbesesar sedangkan h6 adalah teks heading yang berukuran paling kecil.Contohnya seperti pada gambar disamping.                   
  2. Tag <p> Merupakan tag yang berfungsi untuk membuat paraghraf pada web.
  3.  <a> adalah tag untuk menambahkan gambar.Cara penggunannya yaitu dengan menuliskan tempat tujuan link tersebut ditunjukan.Contoh seperti ini <a href="www.facebook.com"> fb</a>Secara ajaib jika kalian mengklik link itu kalian akan menuju alamat facebook,yang telah di beri alamat tadi.
  4. Tag ul atau undored list adalah tag untuk mengurutkan list atau daftar secara acak,Tag ul harus menggunakan tag<li> didalamnya.Untuk mendaftar daftanya.Contoh penggunaanya adalah sebagai berikut:: Contoh codingnya adalah seperti ini silahkan kalian praktekan sendiri coding diatas,Dan lihat hasilnya.
  5.  Selanjutnya,ada tag <ol>,Cara penggunanya sama dengan tag ul<.ul> bedanya dengan tag ul pada tag <ol> .Diurtkan sesuai urutan nomer
  6.  Tag <img>,Merupakan tag untuk memasukan gambar.Contoh pengguaanya adalah seperti ini.<img src="assets/image.saya.png">,Src merupakan sumber atau alamat gambar itu disimpan.

3.CSS Fundamentals

Selelah kalian paham HTML saya akan membahas lagi materi mengeai CSS,Sebelumnya pasti bertanya-tanya apa itu CSS .Saya jelaskan apa itu CSS
Apa itu CSS/Cascading Style Sheets:
  • CSS singkatan dari Cascading Style Sheets yang sebenarnya pada awal aku menuliskan tutorial juga sudah sedikit menjelaskan tentang arti CSS.
  • CSS kalau dihubungkan dengan HTML adalah struktur yang menentukan penampilan konten sebuah website.
  • Kebaikan utama dari CSS adalah lebih markup dari segi HTML, CSS bisa mengontrol bagaimana sebuah blog/website ditampilkan misalnya gambar, ukuran/size, dll.
  • Menghapus semua presentasional markup dari halaman web akan bisa mendukung penggunaan CSS, juga bisa mengurangi ukuran dan penggunaan bandwidth lebih dari 50% dalam banyak kasus yang terdokumentasi. 
  • Dengan melalui bandwidth yang lebih rendah ini adalah keuntungan dari pemilik situs yang berpengaruh terhadap biaya penyimpanan, pengunjung situs, halaman web dengan loading/muatan menjadi lebih cepat.
  • Penghematan keseluruhan bandwidth bisa terukur karena style sheet adalah cache bisa kita tentukan sendiri  dan dapat digunakan kembali untuk setiap halaman di situs, tidak harus didownload dengan setiap halaman web.
  • Kita tidak perlu lagi membuat versi khusus dari setiap halaman untuk menampilkan website kita, tapi hanya perlu membuat style sheet tunggal untuk mengontrol bagaimana setiap halaman di situs tersebut akan dibentuk, dihias, di design.
Seperti inilah tampilan web yang udah diperindah dengan menggunakan CSS,Menjadi lebih menarik bukan? 

 Terdapat dua cara menggunakan CSS" 
  1. CSS Internal adalah pengguaan css didalam tubuh html dan tidak membuat file dengan format CSS
  2. CSS External merupakan pengguaan CSS di luat halalam html.Artinya CSS penggunaan External CSS mengharuskan membuat file CSS.Dan juga perlu di hubungkan antara HTML dan CSS.Dimulai dengan membuat CSS nya dulu,buat file dengan format *css di sublime Jika sudah buka html yang telah kalian buat,Disini kita akan menghubungkan html dengan css.Setelah itu masukan code ini <link rel="stylesheet" type="text/css" href="asset/style/style.css"> .
    Perlu diingat bahwa href adalah tempat memasukan alamat file yang disimpan.Jadi jika anda kebinghungan kenapa css nya tak terhubung mungkin karena alamatnya yang salah,atau mungkin juga karena anda lupa tidak menggunakan eksistensi file nya *css.
    Sekarang kita akan belajar syntax atau aturan penulisan CSS.Di bawah ini adalah contoh css:
CSS memiliki dua bagian utama: pemilih ( Selector ) , dan satu atau lebih deklarasi ( Declaration ).
Description: q
Selector adalah HTML element yang ingin dibuat style nya .
Terdapat dua selector pada css yaitu id dan class
  • Selector id adalah selector yang hanya dimiliki oleh satu elemen pada sebuah halaman website 
  •  Selector class merupakan selector merupakan selector yang biasa digunakan untuk elemen atau penamaan yang bisa digunakan oleh beberapa elemen

Declaration  merupakan isi dari property dan nilai dari CSS.

Berikut contoh penggunaan atau coding css: pada web
Begitu mengasyikan bukan css kalian bisa menghias halaman web seindah mungkin,sekehendak kalian.

4.Memperindah dengan CSS (Styling with CSS)

COLOR
terdapat dua macam pewarnaan dalam CSS yaitu
  1. Background-color adalah penggunan tag untuk memberikan warna dasar atau bisa diesbut bagian belakang konten
  2. Color merupakan pewarnaan pada yang umumnya digunkan untuk teks.Bisa juga disebut front-ground. 
Sebagai nilai untuk property color, bisa berupa keyword warna (seperti: red, blue, yellow, dll), bisa juga berupa notasi angka hexadesimal RGB (seperti: #112233, #ABCDEF) atau dalam bentuk desimal (seperti: rgb(0, 160, 255) atau rgb(0%, 63%, 100%))..

  • Pewarnaan menggunakan langsung menyebutkan nama warnanya contoh:

  • Menggunakan Hexadesimal pilihan wnanya bisa lebih banyak serta lebiht mendetail

  • RGB,kenapa disebut RGB karena pada dasarnya pewarnaan ini hanya memiliki 3 warna dasar yaitu Red,Green,Blue.RGB juga sering di gunakan pada warna di televisi.Masing masing dari warna tersebut memiliki nilai 0 hingga 255



Bagaimana jika ingin mentrparant kan warna?Itu sebenarnya mudah saja kalian cukup menambahkan , dan tulis seberapa banyak kalian ingin men transparankan warna nya contoh seperti ini:
1pada bagian belakang nilai merupakan jumlah transparecy yang 


FONT
Font atau jika di bahasa indonesiakan adalah huruf merupakan hal yang sering kita lihat dalam kehidupan sehari-hari.Disini kita akan bahas mengenai font dalam css.
CSS properti font menentukan keluarga font, ukuran, dan gaya text 
  • Font-family merupakan properti untuk mengatur keluarga tulsan atau jenis huruf.Seperti jika anda ingin menggunakan huruf Agency FB .Maka tulisa saja Agency FB seperti ini font-family:Agency FB.Secara otomatis jenis huruf akan berubah,Akiba di terjamahkan oleh browser.
  • Font-size digunakan untuk mengatur ukuran huruf.
  •  Font-style adalah properti yang di gunakan intuk mengatur gaya huruf seperti italic,bold,underline.


Silahkan kalian coba sendiri contoh codingnya sebagai:

Contoh diatas merupakan pengguaan CSS internal

.

5.



 
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)