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
- 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.
- Tag <p> Merupakan tag yang berfungsi untuk membuat paraghraf
pada web.
- <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.
- 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.
- Selanjutnya,ada tag <ol>,Cara penggunanya sama dengan tag
ul<.ul> bedanya dengan tag ul pada tag <ol> .Diurtkan sesuai
urutan nomer
- 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"
- CSS Internal adalah pengguaan css didalam tubuh html dan tidak membuat file dengan format CSS
- 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 ).
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
- Background-color adalah penggunan tag untuk memberikan warna dasar atau bisa diesbut bagian belakang konten
- 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.
