Apa Itu HTML Dan CSS Beserta Penggunaanya ~ KuliahOnline

A. Pengertian HTML

Html merupakan singkatan dari “Hyper Text Markup language” biasanya tersusun atas tag tag, attribute dan element yang berfungsi mempermudah pekerjaan. HTML sendiri di awali dengan beberapa tag diantaranya <Html></Html> (sebagai tag pembuka dan pembuka html ) , <Head></Head> (sebagai tag pembuka dan penutup bagian head pada html), <Body></Body> (sebagai tag pembuka dan penutup dari html khususnya pada bagian body ) , <Footer></Footer> (sebagai tag pembuka dan penutup dari bagian penutup html ).

B. Tag , elment dan attribute

Selanjutnya akan di jelaskan sedikit berkaitan apa itu tag dan jenisnya lalu apa itu

Element dan jenisnya dan apa itu attribute dan jenisnnya.

a. Tag

Merupakan suatu script yang digunakan untuk memberi identitas atau fungsi bagian isi HTML contohnya <Html></Html>, <P></P>

· B. Tag Tag HTML dan fungsinya

<Html></Html> à berfungsi membuka html dan penutupnya

<Head></Head> à membuka dan menutup bagian head pada halaman html

<Body></Body> à membuka dan menutup bagian body pada halaman html

<Footer></Footer> à membuka dan menutup pada bagian penutup html

<H1></H1> à untuk membuat text heading pada html

<P></P> à tag yang berfungsi untk menampung paragraph

<Strong></Strong> à memperbesar dan mempertebal tulisan

<i></i> à membuat tulisan miring pada halaman html

<b></b> à membuat tulisan tebal pada content html

<u></u> à membuat underline untuk content pada html

<li></li> à membuat list pada halaman html

<ul></ul> à membuat awal dari suatu list

<Small></Small> à mengatur suatu tulisan agar kecil

<ol></ol> à membuat awal list angka

<br></br> à membuat baris baru pada halaman html

<form></form> à membuat form sebagai media inputan

<button></button> à membuat sebuah button untuk proses submit dan login

<section></section> à membuka halaman bagian section

<option></option> à membuat inputan berupa list

<article></article> à membuka bagian article pada halaman html

<title></title> à memberi judul pada halaman html

<div></div> à berfungsi untuk menampung lebih dari satu element

b. Element

Element pada dasarnya sama dengan tag bedanya element merupakan isi dari suatu tag. Jika <p></p> merupakan suatu tag dan element dari <p></p> adalah p

c. Attribut

Merupakan suatu script yang biasanya terdapat dalam tag html contohnya <div class=””></div> merupakan tag html class merupakan attribute dari html

· Attribute attribute dalam html

Class à digunakan untuk membuat suatu class baru yang mempermudah mengatur css

Id à membuat id baru untuk mengatur css dan javascript

Href à untuk sebagai media dalam membuat link ke halaman baru

Rel à memberi type halaman yang akan kita panggil

Type à memberi type saat membuat inputan

Value à memberi nnilai pada suatu tag

Placeholder à memberi nilai bayangan pada inputan

Style à mengatur style inline pada suatu tag di halaman html

Name à mengatur name untuk mendefinisikan data pada suatu inputan saat menggunakan php

C. CSS

Css merupakan singkatan dari “Cascanding Style Sheet” berfungsi untuk mengatur tampilan dari tag html. Seperti warna, font, ukuran, tulisan, background, lebar, panjang dan lainnya. Css sendiri dibagi menjadi tiga bagina yaitu css internal, css Inline , css external

D. Apa itu Css internal, Css inline, dan Css external

· Css internal merupakan css yang di tulis langsung di halaman html tanpa harus membuat halaman baru. Bisanya diletakkan pada bagian head yang ditandai dengan <style></style> sebagai tag pembuka dan tag penutup

Contoh

<style>

Font-size:20px;

}

</style>

· Css inline merupakan css yang di tulis langsung pada tag html yang ingin di atur cssnya ditandai dengan dengan attribute berupa style=””

Contoh

<p style=”font-size:20px”><p>

· Css external merupakan css yang dibuat terpisah dengan halaman html. Pada bagian head nama dari css akan dipanggil ditandai dengan tag <link rel=”” href=””. Css external digunakan untuk mempermudah dalam mengatur css dan mengirangi kebingungan

Contoh

<head>

<link rel=”stylesheet” href=””>

</head>

E E. Membuat Paragraf dan heading dalam html

<p></p> merupakan pembuka dan penutup pada paragraph

Contoh

<p style=”font-size:20px”><p>

F. Membuat Tag Heading

Terdapat beberapa heading lainnya yang berpengaruh terhadap ukuran text seperti <h1></h1> , <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>

Contohnya

<h1 style=”font-size:20px”></h1>

F. Cara membuat garis bawah, tulisan miring, dan tullisan tebal

· <u></u> merupakan tag yang digunakan untuk membaut garis bawah

Contoh

<p>membuat<u>underline</u></p>

· <i></i> merupakan tag yang digunakan untuk membuat tulisan miring

Contoh

<p>membuat<i>miring</i></p>

· <b></b> merupakan tag yang digunakan untuk membuat tulisan tebal

Contoh

<p>membuat<b>tebal</b></p>

H.Tata cara membuat list

Membuat list memerlukan beberapa langkah yaitu yang pertama tuuliskan <ul></ul> yang berfungsi menampung dari list. Selanjutnya gunakan tag <li></li> dan <ol></ol> untuk membuat list

Contoh

<ul>

<a href=”” ><li></li></a>

</ul>

<ol>

<a href=””><li></li></a>

</ol>