Pengertian dan Contoh Program Sederhana HTML dengan CSS Internal ~ KuliahOnline

Pengertian dan Contoh Program

Sederhana HTML dengan CSS Internal

Halo teman – teman, salam sejahtera untuk kita semua kali ini penulis akan menjelaskan sedikit tentang Pengertian dan Contoh Sederhana HTML denagn CSS Internal

Di Jaman yang modern ini kebutuhan akan informasi sangatlah tinggi. Ada berbagai macam cara yang dapat kalian lakukan untuk mengakses informasi – informasi luar. Misalnya dengan memanfaatkan teknologi seperti web broser, social media dan sumber- sumber lainnya. Untuk dapat melakukan hal itu kalian tidaklah harus mengetahui terlalu dalam berkaitan dengan teknologi, melaikan yang kalian butuhkan hanya skill dasar dari teknologi tersebut dan connetion internet.

Namun lain halnya, saat kalian memang benar- benar ingin mendalami computer khussunya programming. Kalian diharuskan untuk setidaknya menguasai suatu bahasa program dasar agar kalian dapat membuat suatu karya baik itu application berbasis android maupun suatu webside. Sama halnya seperti kata orang “memulai sesuatu memanglah sangat sulit “begitu pula saat kalian ingin membuat suatu program. kalian akan cara memulainya dan bagaimana contoh awal program tersebut. Untuk mengatasi hal tersebut penulis akan mencoba memcoba membuatkan suatu Contoh Program HTMl Sederhana dengan CSS Internal Beserta Pengertian HTML itu Sendiri.

A. Pengertian HTML.

HTMl adalah suatu bahasa computer yang memiliki kepanjangan ( Hyper Text Markup Language). HTML berasal dari 4 kata yaitu Hyper yang berarti beraturan, Text berarti dokumen, Markup berarti mengedit teks untuk memperbaiki penampilan/grafiknya dan terakhir language berarti bahasa. Jadi dapat disimpilkan bahwa HTMl berarti sebuah teks/dokument khusus yang digunakan oleh web browser untuk memperbaiki/menampilkan gambar dan teks.

Jika dilihat dari kegunaannya, HTMl merupakan suatu bahasa computer yang biasanya khusus digunakan untuk membuat suatu webside.yang diawali oleh tag <html> dan </html> sebagai penutupnya. Untuk isi dari HTML itu sendiri biasanya terdiri atas <head > dan <body>. Di dalam <head > terdapat <title> dan beberapa link rel sebagai penghubung antara HTML dengan cssnya. Sedangkan di dalam <body> terdapat <header>, <menu>, <content>, dan <footer> sebagai penutup.

B. Pengertian CSS

CSS adalah singkatan dari ( Cascanding Style Sheets), yang biasanya digunakan untuk mempercantik element HTML yang akan ditampilkan pada layar atau media lainnya. Jika css dihubungkan dengan HTML bagaikan wanita ( HTML ) dan peralatan cosmetic yang dimiliki wanita tersbut (CSS ).

CSS biasanya digunakan oleh programmer untuk menghemat suatu pekerjaan baik itu mengontrol tata letak maupun mengatur warna dan besar tulisan pada program yang mereka buat.

Ada beberapa cara untuk menambahakan css ke dalam program HTML yaitu :

a. Inline yaitu dengan menggunakan style ccs langsung pada line yang kita ingin buat

b. Internal yaitu dengan menggunakan <style> di dalam bagian <head> bisanya digunakan # untuk menunjukkan baris.

c. Eksternal yaitu menggunakan file css eksternal yang natinya akan dihubungkan dengan menggunakan link rel. biasanya di gunakan {} sebagai penutup dan pembuka pada bagian cssnya.

Namun menurut saya cara yang paling bagus untuk menambahkan css ke HTML adalah dengan memisahakan antara file HTML dan file cssnya lalu dihubungkan dengan link rel. dibilang paling baik karena kita lebih mudah mengerti dan tidak bingung karena filenya terpisah.

Contoh Program Sederhana HTML

<!doctype Html >

<html>

<head>

<title>

Rion Web

</title>

body {

background-color :Cyan;

}

.awal{

width : 500px;

height : 700px;

background-color : Azure ;

margin: auto;

}

.header{

width : 500px;

margin: auto;

background-color : #fff;

height:200px;

}

.header img {

width : 500px;

height:200px;

}

.kiri {

width :250px;

height : 400px;

background-color:Blanchedalmond;

float: left;

margin-top : 4px;

}

.kanan {

width : 250px;

height : 400px;

background-color:Azure;

float : right;

margin-top : 4px;

}

li {

font-size:16px;

}

font-size : 20 px;

margin: auto;

margin-bottom : 20px;

text-decoration: none ;

}

.menu ul li {

display :inline ;

margin-left : 10px;

margin-bottom : 5px ;

border : 4px solid Blanchedalmond ;

padding : 5px ;

}

.kanan img {

width: 250px;

height:400px;

}

</style>

</head>

<body>

</div>

<ul>

<li><a href= "Daftar.html"> Jadwal </a> </li>

<li><a href= "login.html "> Logout </a> </li>

<li><a href= "bantuan.html "> Bantuan </a> </li>

</ul>

</div>

<ul>

<li> Jurusan : D3 Teknik Informatika</li>

<li> Hobby : Catur, Basket</li>

</ul>

<h1> Sosial Media <h1>

<ul>

<li> Facebook : Rion </li>

</ul>

</div>

</div>

<a href="www.Rion.blogspot.com"> www.Rion.blogspot.com</a>

</div>

</body>

</html>

keterangan

1. height : tinggi dari script yang kalian buat misal kanan img height(170px) dapat diartikan tigigi dari gambar tersebut adalah 170px

2.width : adalah lebar dari script

3. color : warna tulisan yang kalian gunakan

4.Background-color : adalah warna dasar dari webside

5. font - size : adalah ukuran dari tulisan yang kita buat

6. margin : adalah jarak yang dibuat antara satu script dengan yang lain

7.float left : membuat teks selalu ke kiri/ rata kiri

8.float right :membuat teks selalu ke kanan/ rata kanan

9. padding : untuk membuat jarak antara satu div dengan yang lain

10. Border : untuk membuat kolom pada bagian menu

11. <style> : merupakan pembukaan untuk css internal

12. <body > merupakan bagian tubuh program

13.<ul> : untuk membuat artikel lebih maju

14. <li> : untuk membuat titik di depan paragraph atau judul suatu deskripsi

15. <href> : untuk menggabungkan 2 program / memberi link suatu program

16<img > : untuk memperlihatkan suatu gambar

17. <html> : sebagai pembuka program

18. < title > :merupakan bagian judul program

Sekian artikel dari saya, mohon maaf jika ada tulisan dan kata yang salah. Sebagai akhir kata, tiada gading yang tak retak. Sama halnya dengan artikel saya ini, tiada hal yang sempurna.