Hai, sobat bloger!!!
Kita tahu bahwa blog merupakan salah satu situs yang kini diakui menjadi sosial media terbaik untuk membagikan informasi secara meluas. Untuk memperlihatkan informasi tersebut, kita perlu menciptakan artikel yang berkualitas. Selain artikel yang berkualitas, kita perlu memasang template yang baik pada blog kita.
Pada artikel kali ini, saya akan membahas perihal “Pemahaman gampang dan terbaik untuk mengerti bahasa coding template”. Sebelum masuk ke pembahasan, saya ingin berkata bahwa artikel ini merupakan ajakan dari teman-teman bloger saya nih sob. Teman-teman saya ingin berguru coding template yang gampang dimengerti oleh orang banyak.
Sebenarnya gampang sekali untuk berguru coding ini sob. Yang terpenting ialah kita mengetahui bahasa-bahasa inggris dasar saja dan itu sudah cukup. Maka dari itu, biasanya yang suka bermain coding mahir berbahasa inggris dan mahir memprogram dengan matematis suatu program.
Jadi, bagaimanakah cara kita semoga gampang paham bahasa coding apabila kita tidak mengerti bahasa inggris? Bagaimana bila kita tidak mengerti matematika? Bagaimana jikalau kita pusing setiap kali membaca coding? Berikut ini ialah penjelasannya.
Belajar bahasa inggris
Ada trik semoga kita lancar berbahasa inggris, sobat. Tidak perlu mengeluarkan biaya lebih untuk berguru bahasa inggris. Cara semoga kita cepat mengerti bahasa inggris ialah dengan mengetahui tenses terlebih dahulu. Silakan buka di kamus anda dan lihat halaman di belahan tengah kamus dan lihat setiap pola kalimatnya. Buatlah kalimat mengikuti pola pada setiap yang tertera. Ikuti step by step, buatlah 10 kalimat pada setiap tenses. Ulang hingga anda lancar. Karena anda akan kesulitan mengikuti langkah selanjutnya apabila belum lancar. Ingat juga untuk menggunakan kata-kata yang anda tahu terlebih dahulu, semoga sanggup mempermudah anda. Lalu ubah dari bentuk present tense ke bentuk tenses yang lainnya.
Selanjutnya apabila anda sudah lancar, silakan buka blog atau situs isu berbahasa inggris. Jangan membacanya begitu saja ya sob, itu akan menciptakan anda malas. Artikan setiap kata dengan baik dengan mengikuti tenses, sekalipun tidak berurutan. Setiap kata gres silakan cari di kamus. Apabila anda menemukan ketaknormalan penggunaan kata atau arti, maka buka google translate sobat. Sebab biasanya biasanya itu ialah frasa bukan kata. Dan frasa tidak tercantum di kamus bahasa inggris.
Semakin banyak anda menerjemahkan, semakin banyak perbendaharaan kata yang anda sanggup sobat. Jadi, berusahalah sekeras mungkin, tanpa berpikir negatif. Karena usaha anda tidak akan sia-sia.
Belajar matematika
Sebenarnya, saya tidak mengenal matematika pada coding template blog. Mengapa? Karena sekalipun ada, itu hanyalah matematika yang dipelajari anak TK, sob. Contohnya angka 1,2,3, ..., 100,dst. Tanpa komplemen lambang tertentu. Kaprikornus tidak perlu anggap keras mengenai hal ini, bro. Berpikirlah saja dengan logis apabila ada matematika pada coding.
Mengenal HTML
Dalam coding blog, kita akan menemui isyarat HTML.HTML akan dirumuskan dengan lambang pembuka “<” dan lambang epilog “>”. Apabila isyarat tersebut dibelah, maka akan isyarat epilog “</>”. Dengan fungsi untuk memperlihatkan struktur terlihat pada blog kita.
Jadi, anda sanggup mengenal bahwa setiap isyarat html akan ada isyarat “<” dan “>”. Praktis sekali bukan?
Mengenal CSS
CSS adalah isyarat yang akan memperlihatkan style dengan lambang pembuka [nama]{[code]}. Contohnya #body{background:#fff}. Kode tersebut bila dibaca berarti ID(#) body akan berlatar belakang yang warnanya putih(#fff).
Mungkin sedikit memusingkan, sehingga kita perlu mengetahui lebih lanjut lebih dahulu hal ini. Lebih lagi, isyarat ini sering dicantumkan dalam isyarat HTML.
Mengenal javascript
Sama menyerupai halnya CSS, javascript juga sering dicantumkan dalam isyarat HTML. Jujur saja, isyarat ini tidak mengecewakan memusingkan berdasarkan saya, tapi akan gampang jikalau mengerti. Tapi sebaiknya anda tidak perlu mengetahui lebih lanjut sebelum tahu betul HTML dan CSS.
Mendalami penggunaan HTML
Kode HTML
Secara kompleks, HTML akan lebih gampang terlihat apabila diberi CSS atau text tertentu. Tapi saya tidak akan membahas itu, saya akan membahas mengenai isyarat HTML beserta fungsinya dan hal-hal terkait.
Kode HTML Paling awal pada template ialah <HTML>. Kode ini merupakan isyarat pembuka. Kode penutupnya </HTML>. Hanya berbeda sedikit bukan? Lalu, selanjutnya ada isyarat <head></head> dan <body></body>.
Fungsi isyarat <HTML></HTML> ialah memberitahukan pada perangkat bahwa isyarat berbentuk HTML. Lalu isyarat <head/> artinya isyarat yang tidak akan ditunjukan secara signifikan pada blog. Karena akan lebih tertuju pada browser. Contohnya isyarat <title/> untuk menampilkan judul halaman yang tertera di belahan atas browser. Kode <body/> pula, berfungsi untuk menampilkan belahan paling signifikan pada blog anda. Mulai dari kepala hingga kaki.
Perlu diingat, bahwa ketiga isyarat ini dilarang ada yang kurang sedikit pun. Boleh diubah kecil, asal sudah mahir dan sudah tahu risikonya.
Struktur isyarat HTML dasar
Struktur isyarat HTML dasar sangat gampang dihafal sobat. Kode tersebut ialah sebagai berikut.
<HTML> <head> </head> <body> </body> </HTML> Itu merupakan isyarat dengan deret yang gampang sekali untuk dihafalkan. Struktur isyarat HTML dasar harus sistematis, artinya dilarang diubah urutannya sedikitpun. Mengapa? Karena sedikit saja salah kata atau salah posisi, maka akan mengacaukan isyarat HTML.
Struktur isyarat HTML tingkat dua
Struktur ini akan ada sangkut pautnya dengan kode-kode komplemen yang bersatu sob. Disinilah tantangan pertama dimulai. Berikut ini ialah isyarat tersebut.
<html lang=’ID’> <head> <title></title> <meta></meta> <style></style> <script></script> // Jangan diperdalam dahulu, alasannya ialah javascript <body> <header></header> <asside id=’post-body’></asside> <asside id=’sidebar-right’></asside> <footer></footer> </body> </html> Jangan mengalah sobat. Mungkin memusingkan sekali sobat, tapi kalau anda sudah mahir berbahasa inggris, anda akan mengerti dengan gampang mengenai fungsi-fungsi dari kode-kode tersebut.
- Kode komplemen dalam pembuka menyerupai id dan lang, merupakan isyarat yang perlu diketahui sobat. Kode id berfungsi untuk memperlihatkan nama identitas, sedangkan lang untuk memberitahukan bahasa resmi apa yang akan digunakan pada artikel blog anda.
- Kode komplemen lain menyerupai <title> berfungsi untuk memperlihatkan judul halaman yang akan tampil di browser anda. Kode ini boleh tidak sesuai dengan judul artikel atau laman anda.
- Kode <meta></meta> merupakan isyarat yang tidak perlu dipelajari mendalam sebagai dasar. Sehingga kita sanggup melewatinya.
- Kode <style> merupakan isyarat untuk menaruh isyarat CSS.
- Kode <script> untuk ditaruh isyarat javascript.
- Kode <header> untuk menampilkan belahan kepala atau belahan atas blog anda. Wajib ada.
- Kode <asside> untuk menciptakan sisi-sisi yang tergantung apa yang dipilih dan wajib ada.
- Kode <footer> untuk menampilkan kaki atau belahan paling bawah blog anda dan tidak wajib banyak bagian.
Nah, berdasarkan kode-kode tersebut, adakah yang anda tidak mengerti? Silakan tanyakan ya sob. Karena berdasarkan saya itu sudah jelas.
Mendalami penggunaan CSS
Dasar
Dasar dari CSS gampang sekali sob. Ada beberapa awalan yang perlu anda ketahui, yaitu:
- . : isyarat untuk memperlihatkan style pada class
- # : isyarat untuk memperlihatkan style pada id
- (tidak ada apapun) : isyarat untuk memperlihatkan style pada isyarat awalan menyerupai <body>
Selanjutnya, anda perlu menyesuaikan isyarat tersebut dengan isyarat HTML. Contoh ada isyarat <div class=’contoh’>Contoh</div>, maka untuk memperlihatkan style kita perlu memasang isyarat CSS dengan script .contoh{}.
Lalu, kita perlu mengetahui isyarat “{“ dan “}”. Kita memasang isyarat tersebut untuk membuka isyarat isi css. Setelah itu, kita harus tahu isyarat perintahnya. Misalnya dukungan warna teks dengan isyarat “color” dan latar belakang “background”. Taruh isyarat tersebut ditengah “{“ dan “}”. Ketahui juga isyarat selanjutnya, yaitu isyarat pemenggal dengan lambang “;”. Berfungsi untuk memisahkan isyarat perintah satu dengan yang lain.
Maka, pola yang kita peroleh ialah .contoh{color:#fff;background:#000}. Paham?
Tingkat dua
Untuk memperdalam lagi, maka kita perlu mengetahui isyarat perintah-perintah yang ada pada CSS. Contohnya kita ingin memasang garis pinggir. Garis pinggir dalam bahasa inggris ialah border. Maka cantumkan isyarat perintah border pada CSS.
Selanjutnya ada isyarat perintah lanjutan, yaitu apa yang akan tampil. Misalnya isyarat #fff merupakan isyarat /hex/ yang memperlihatkan warna putih. Sedangkan #000 merupakan isyarat yang memperlihatkan warna hitam.
Nanti akan ada isyarat dengan satuan px, misalnya 15px. Itu artinya memperlihatkan perintah untuk menciptakan ukuran normal ialah 15px atau 15 pixel. Itulah dasar tingkat kedua.
Kode-kode perintah yang akan sering kita temui lainnya ialah background, color, border, font, font-weight, widht, height, margin, padding, text-align, float, dan display.
Sedangkan isyarat perintah lanjutan yang akan sering kita temui ialah #fff atau #ffffff, #000 atau #000000, [angka]px atau [angka]em, Arial(font), Times New Roman(font), solid(border), dan masih banyak lagi.
Sejauh ini paham dasarnya, bukan? Apabila anda penasaran, silakan komentar saja sob. Malu bertanya sesat di jalan.
Mengabungkan HTML dan CSS secara sistematis
Jika sudah berkata sistematis, maka kita akan membahas struktur. Menurut apa yang kita ketahui, maka anda sanggup mempelajari kode-kode berikut ini.
<html id=’lang’> <head> <title>Tekno Franklin | Artikel</artikel> <style> body{background:#fff;width:900px} #kepala{border:1px solid;width:100%;height:30px;font:3px arial} #post-body{background:#000;color:#fff;float:left:width:70%;margin:1px;padding:5px;text-align:justify} #sidebar{background:#fff;border:1px;float:right;width:30%;margin:1px} #kaki{margin:1px;text-align:center} </style> </head> <body> <header id=’kepala’>Tekno Franklin</header> <asside id=’post-body’>Mau buka apa ayo? Wkwkwk....</asside> <asside id=’sidebar’>Jangan lihat kalau tidak suka!!! Wkwkwk....</asside> <footer id=’kaki’>Hak Cipta Tekno Franklin</footer> </body> </html> Panjang ya sob? Tenang... Jangan anggap pusing.... Anggap saja lagi nonton TV yang isinya text viewer dari medsos. Jadi, anda tidak akan menganggap itu pusing.
Itulah kode-kode pondasi paling dasar yang wajib dipahami oleh bloger yang ingin berguru coding.
Mendalami kode-kode bertingkat
Kita tahu bahwa isyarat header tadi menggunakan id kepala. Kalau kita perdalam, ternyata kita tidak perlu memasang isyarat id. Sehingga isyarat CSS berubah dari #kepala menjadi header.
Kode tersebut mempermudah kita untuk melancarkan pemahaman dalam isyarat bertingkat ini.
HTML
Apabila anda membaca coding HTML, akan ada isyarat menyerupai div, h1, h2, h3, h4, h5, h6, img, table, p, dan masih banyak lagi. Kode ini merupakan singkatan-singkatan sob. Anda sanggup mengetahuinya dengan gampang dengan kamus atau tebak menebak. Contohnya img tidak ada di kamus, yang ada image. Artinya isyarat ini memunculkan gambar. Kode h1, h2, dst berfungsi untuk isyarat heading. Kode p untuk paragraf, table untuk tabel. Banyak lagi, kode-kode lainnya yang perlu kita ketahui. Tapi hanya itu isyarat paling dasar, berdasarkan saya.
Contoh penggunaan pada header di body ialah sebagai berikut:
<header> <h1>Tekno Franklin</h1> <p>Tempat bermain belum dewasa IT pemula, amatir, hingga profesional</p> </header>CSS
Mengikuti kode-kode tadi, maka kita akan mendapat kode-kode lain yang menarik. Mau tahu kodenya menyerupai apa? Berikut ini ialah kodenya.
header{background:#fff; border-radius:8px;width:50px} header h1, header p{color:#000} header h1{font:30px} header p{font:12px} Lebih absurd sekali ya sob? Arti dari isyarat tersebut itu gampang sebetulnya sobat. Penggunaan tanda koma ialah menciptakan perintah CSS untuk kode-kode tercantum. Kode “header h1” artinya memberi perintah pada isyarat h1 yang terdapat pada header. Apabila anda ingin menciptakan semua h1 sama, maka tidak perlu menggunakan isyarat header. Begitu pun dengan “header p”.
Kode perintah border-radius, berfungsi untuk memberi border unik dengan lengkung di sudut-sudut.
Punya pertanyaan? Silakan tanyakan di kolom komentar ya, sobat.
Nah, sejauh ini saya tahu bahwa kesulitan terbesar ialah pada html dan isyarat perintah serta perintah lanjutan CSS. Maka silakan simak hal berikut ini.
Memahami kependekan pada HTML
Saya tidak tahu apakah singkatan-singkatan pada HTML itu baku dalam penggunaan berbahasa inggris atau tidak. Yang pasti, isyarat tersebut sanggup digunakan dalam pergaulan sehari-hari sebenarnya. Tapi hanya sebagian, pada isyarat yang terang menyerupai img.
Untuk gampang memahami kode-kode selain yang saya jelaskan tadi, maka anda sanggup memahami dengan banyak metode sobat. Misalkan kita ingin memasang gambar, maka isyarat yang kita sanggup <img src=’https://contoh.com/contoh.jpg/’/>. Maka kita sanggup analisis bahwa img ialah kependekan dari image yang artinya gambar dan src kependekan dari source yang artinya sumber.
Bagaimana sobat? Praktis bukan? Sebenarnya saya sendiri sulit sekali untuk menjelaskan mengenai bahan blog yang satu ini. Mengapa? Karena saya berguru blog secara autodidak. Belajar template hanya sekedar dengan menganalisis dan bermain inspect element. Sedangkan menciptakan artikel hanya dengan membaca sedikit mengenai artikel-artikel bermanfaat untuk saya.
Walaupun begitu, ada beberapa orang yang beropini bahwa dengan berguru secara autodidak akan lebih gampang mengerti ketimbang les atau berguru secara formal. Kerugiannya, kita akan kesulitan untuk memperdalam ilmu tersebut saja.
Tapi, sob, jangan berkecil hati dahulu. Ayo kita pelajar dengan seksama saja, sob. Jangan ragu untuk bertanya, sob. Tunggu apa lagi? Selagi ini tutorial ini disebarkan gratis!!!