-->

Mengenal HTML, CSS, PHP dan Javascript | Saudaraid



Mengenal HTML dan CSS


htmlcsskoding2

Jika Anda seorang programming atau setidaknya mempunyai blog yang anda ciptakan sendiri tentunya sudah tidak asing lagi dengan
HTML dan CSS. HTML dan CSS adalah alat desain suatu website. HTML dan CSS bahasa markup yang sangat populer dan mungkin paling populer
diantara bahasa markup lainnya. Karenanya HTML dan CSS banyak digunakan oleh pengembang website dalam mendesain website mereka serta
memainkan peran SEO di dalamnya.

HTML dan CSS Mempegaruhi SEO



Jika Anda dapat membuat dan mendesain HTML&CSS sedemikian rupa. Anda juga mungkin telah menyadari dalam mendesain kedua hal tersebut
Anda harus membuat itu ringan dan se-responsive yang bisa dibuat. Agar dapat memberikan pengalaman pengujung yang interaktif. Memberikan
pengguna yang interaktif adalah tujuan Google sebenarnya, inilah yang mempengaruhi SEO. HTML dan CSS akan mempengaruhi SEO dari dalam
tidak secara langsung, karena HTML dan CSS sejatinya keseluruhan sebuah struktur web/blog dan hal lainnya seperti PHP atau Javascript.

Pertama-tama kita kenalan dengan HTML

Apa sih HTML


HTML (Hypertext Markup Language) adalah sebuah bahasa markah yang paling banyak digunakan dalam membuat sebuah halaman web, menampilkan
konten, informasi, dan sekaligus keterangan di dalam sebuah penjelajah web internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas
format ASCII agar dapat menampilkan wujud seutuhnya. Bingung?. Intinya HTML adalah bagian penting dalam membuat sebuah halaman web. Tidak perlu
dipikirkan keras-keras biasanya banyak sekali panduan yang menjelaskan apa itu HTML jika memang masih ingin diperjelas.
Yang terpenting jika Anda seorang programming atau seseorang yang ingin belajar koding dari HTML adalah Element HTML.

Elemen HTML



Elemen HTML biasanya terdiri dari tag awal dan tag akhir, dengan konten disisipkan di antara:
Contoh
<tagname> Konten coretkan di sini ... </ tagname>
Elemen HTML adalah keseluruhan dari tag awal hingga tag akhir:
<p> Paragraf pertamaku. </ p>
Mulai tag Elemen konten tag Akhir
<h1> Judul Pertama Saya </ h1>
<p> Paragraf pertama Saya. </ p>
<br>
Elemen HTML tanpa konten disebut elemen kosong. Elemen kosong tidak memiliki tag akhir, seperti elemen <br> (yang menunjukkan jeda baris).
Elemen HTML Tersarang
Elemen HTML dapat diulang (elemen dapat mengandung elemen).

Semua dokumen HTML terdiri dari elemen HTML yang disarangkan.

Contoh ini berisi empat elemen HTML:

Contoh
<! DOCTYPE html>
<html>
<body>

<h1> Judul Pertama Saya </ h1>
<p> Paragraf pertama saya. </ p>

</ body>
</ html>

Penjelasan
Elemen <html> mendefinisikan seluruh dokumen.

Ini memiliki tag awal <html> dan tag akhir </ html>.

Isi elemen adalah elemen HTML lain (elemen <body>).

<html>
<body>

<h1> Judul Pertama Saya </ h1>
<p> Paragraf pertama Saya. </ p>

</ body>
</ html>

Elemen <body> mendefinisikan badan dokumen.

Memiliki tag awal <body> dan tag akhir </ body>.

Isi dua elemen HTML lainnya (<h1> dan <p>).

<body>

<h1> Judul Pertama Saya </ h1>
<p> Paragraf pertamaku. </ p>

</ body>

Elemen <h1> mendefinisikan sebuah heading.

Ini memiliki tag awal <h1> dan tag akhir </ h1>.

Isi elemennya adalah: My First Heading.

<h1> Judul Pertama Saya </ h1>

Elemen <p> mendefinisikan sebuah paragraf.

Ini memiliki tag awal <p> dan tag akhir </ p>.

Isi elemennya adalah: Paragraf pertamaku.

<p> Paragraf pertamaku. </ p>

Jangan Lupakan Tag Akhir

Beberapa elemen HTML akan ditampilkan dengan benar, meskipun Anda lupa tag akhir. Tetapi akan lebih professional jika anda
tidak melupakan dan melakukannya sendiri, benar?
Contoh
<html>
<body>

<p> Ini adalah paragraf
<p> Ini adalah paragraf

</ body>
</ html>
Contoh di atas berfungsi di semua browser, karena tag penutup dianggap opsional.

Jangan bergantung pada ini. Ini mungkin menghasilkan hasil dan / atau kesalahan yang tidak terduga jika Anda lupa tag akhir.

Elemen HTML Kosong
Elemen HTML tanpa konten disebut elemen kosong.
Elemen <br> adalah elemen kosong tanpa tag penutup (tag <br> menentukan baris baru).
Elemen kosong dapat "ditutup" di tag pembuka seperti ini: <br />.

HTML5 tidak memerlukan elemen kosong untuk ditutup. Tetapi jika Anda ingin validasi yang lebih ketat, atau jika Anda perlu membuat dokumen Anda dapat dibaca oleh parser XML, Anda harus menutup semua elemen HTML dengan benar.

Gunakan huruf kecil untuk Setiap elemen
Tag HTML tidak peka huruf besar kecil: <P> berarti sama dengan <p>.

Standar HTML5 tidak memerlukan tag huruf kecil, tetapi W3C merekomendasikan huruf kecil dalam HTML, dan menuntut huruf kecil untuk jenis dokumen yang lebih ketat seperti XHTML.
Dan umumnya File Html menggunakan ekstensi .html, Misal belajar.html

Masih banyak sekali yang harus dipelajari tentang HMTL tapi tidak usah terburu-buru. Karena dalam pengalaman saya, hanya mengetahui HTML dan CSS akan membuat anda
semakin bisa membuat atau mendesain sebuah web/blog anda sendiri. Oh ya, hampir lupa, dari tadi bahas HTML dan CSS tapi mana CSSnya?. Ok. Ini sebenarnya tidak terlalu mengambil waktu terlalu lama
untuk memperlajari CSS. Karena setiap peyedia Blogging besar biasanya membuat semua pilihan dan tutorial dalam mendesain dan membuat CSS anda sendiri. Tapi kembali lagi, akan lebih professional
jika itu dilakukan anda sendiri. Kenapa harus dilakukan oleh orang lain jika anda bisa melakukannya sendiri bukan? Nah, Sekarang


Apa sih CSS?



Htmlcsssaudaraid


CSS (Cascading Style Sheets) adalaha gaya atau style yang digunakan dalam menampilkan dokumen, informasi atau keterangan yang ada disebuah website. Ohhh, apa tunggu.., ya, Benar!.
Cascading Style Sheets menjelaskan bagaimana elemen HTML ditampilkan di layar, paper, atau di media lain. Ini mengapa saya menggunakan judul HTML dan CSS. CSS menjelaskan bagaimana elemen-elemen
yang kita bahas diatas akan ditampilkan seperti apa, bergaya apa, dan dimedia apa.  CSS menghemat banyak pekerjaan. Ini dapat mengontrol tata letak beberapa halaman web sekaligus. HTML dan CSS adalah
aturan untuk penataan konten dan itu dia. Itu tidak sulit (kecuali anda berencana dan ingin mengembangkan gaya anda sendiri dalam CSS). Mereka sebenarnya sangat keren.

Nah, sekarang bagaimana CSS berkolaborasi dengan HTML

Bagaimana CSS bekerja?



CSS dapat ditambahkan ke elemen HTML dalam 3 cara, yaitu:


  1. Inline - dengan menggunakan atribut style dalam elemen HTML
  2. Internal - dengan menggunakan elemen <style> di bagian <head>
  3. Eksternal - dengan menggunakan file CSS eksternal


Cara paling umum untuk menambahkan CSS, adalah mempertahankan style dalam file CSS yang terpisah.
Namun, di sini kita akan menggunakan gaya inline dan internal, karena ini lebih mudah untuk didemonstrasikan, dan lebih mudah bagi Anda untuk mencobanya sendiri.

Tip: Anda dapat belajar lebih banyak tentang CSS di Tutorial CSS W3Schools

CSS sebaris
CSS sebaris digunakan untuk menerapkan gaya unik ke elemen HTML tunggal.

CSS sebaris menggunakan atribut gaya dari elemen HTML.

Contoh ini menetapkan warna teks dari elemen <h1> menjadi biru:

Contoh
<h1 style = "color: blue;"> Ini adalah Blue Heading (Judul Biru) </ h1>

CSS Internal
CSS internal digunakan untuk menentukan gaya untuk satu halaman HTML.

CSS internal didefinisikan di bagian <head> pada halaman HTML, dalam elemen <style>:

Contoh CSS

<! DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</ style>
</ kepala>
<body>

<h1> Ini adalah heading </ h1>
<p> Ini adalah paragraf. </ p>

</ body>
</ html>
CSS eksternal
Lembar gaya eksternal digunakan untuk menentukan gaya untuk banyak halaman HTML. Ini adalah yang paling banyak digunakan bagi mereka
yang baru belajar tentang programming. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web, dengan mengubah satu file!
Umumnya CSS eksternal ini diletakan kedalam bagian <head> atau sebelum </head>. CSS eksternal lebih ringan dan responsive, mungkin juga yang
membuat CSS eksternal lebih banyak digunakan. Karena CSS berlebihan di dalam satu halaman HTML dapat mempengerahui laju laman. Yang berakibat
lambatnya proses pengiriman data. Ini merugikan pengguna Anda dan ujungnya mereka akan mencari alternatif lain
Untuk menggunakan lembar gaya eksternal, tambahkan tautan ke dalam bagian <head> dari halaman HTML:

Contoh
<! DOCTYPE html>
<html>
<head>
  <tautan rel = "stylesheet" href = "styles.css">
</ kepala>
<body>

<h1> Ini adalah heading </ h1>
<p> Ini adalah paragraf. </ p>

</ body>
</ html>
Lembar gaya eksternal dapat ditulis di editor teks apa pun. File tidak boleh berisi kode HTML apa pun, dan harus disimpan dengan ekstensi .css.

Berikut adalah bagaimana tampilan "styles.css":

body {
  warna latar: powderblue;
}
h1 {
  warna biru;
}
p {
  warna merah;
}

Font CSS




  • Properti warna CSS mendefinisikan warna teks yang akan digunakan.
  • Properti font-family CSS mendefinisikan font yang akan digunakan.
  • Properti font font CSS mendefinisikan ukuran teks yang akan digunakan.


Contoh
<! DOCTYPE html>
<html>
<head>
<style>
h1 {
  warna biru;
  font-family: verdana;
  ukuran font: 300%;
}
p {
  warna merah;
  font-family: kurir;
  ukuran font: 160%;
}
</ style>
</ kepala>
<body>

<h1> Ini adalah heading </ h1>
<p> Ini adalah paragraf. </ p>

</ body>
</ html>
Perbatasan CSS
Properti perbatasan CSS mendefinisikan perbatasan di sekitar elemen HTML:

Contoh
p {
  border: 1px powderblue solid;
}
CSS Padding
Properti CSS padding mendefinisikan padding (spasi) antara teks dan perbatasan:

Contoh
p {
  border: 1px powderblue solid;
  padding: 30px;
}
Margin CSS
Properti margin CSS mendefinisikan margin (spasi) di luar perbatasan:

Contoh
p {
  border: 1px powderblue solid;
  margin: 50px;
}
Atribut id
Untuk menentukan gaya khusus untuk satu elemen khusus, tambahkan atribut id ke elemen:

<p id = "p01"> Saya berbeda </ p>
kemudian tentukan gaya untuk elemen dengan ID spesifik:

Contoh
# p01 {
  warna biru;
}
Catatan: ID elemen harus unik dalam satu halaman, jadi pemilih id digunakan untuk memilih satu elemen unik!

Atribut kelas
Untuk menentukan gaya untuk jenis elemen khusus, tambahkan atribut kelas ke elemen:

<p class = "error"> Saya berbeda </ p>
kemudian tentukan gaya untuk elemen-elemen dengan kelas spesifik:

Contoh
p.error {
  warna merah;
}

Referensi Eksternal
Lembar gaya eksternal dapat direferensikan dengan URL lengkap atau dengan jalur relatif ke halaman web saat ini.

Contoh ini menggunakan URL lengkap untuk ditautkan ke lembar gaya:

Contoh

<tautan rel = "stylesheet" href = "https://www.alamaturlanda.com/html/styles.css">

Contoh ini menautkan ke lembar gaya yang terletak di folder html di situs web saat ini:

Contoh
<tautan rel = "stylesheet" href = "/ html / styles.css">

Contoh ini menautkan ke lembar gaya yang terletak di folder yang sama dengan halaman saat ini:

Contoh
<tautan rel = "stylesheet" href ="styles.css">

Jika Anda sebelumnya belum mengenal HMTL dan CSS, saya harap artikel ini memberikan apa yang Anda cari. Dan kalau diantara kalian sudah
mengenal apa itu HTML&CSS dan mungkin sudah bisa mengembangkannya tetap terus gunakan keahlian Anda dengan bangga!.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

loading

Processing...
If the data does not come, click reload.