Assalamualaikum Wr. Wb.
Hari ini saya belajar HTML dan CSS di W3School agar lebih faham tentang apa itu html dan css dan kegunaanya.
HTML
Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web
Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas
format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata
dan disimpan dalam format ASCII normal sehingga menjadi halaman web
dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang
sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang
disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium
(W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee
Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah
lembaga penelitian fisika energi tinggi di Jenewa).
di kutip : https://id.wikipedia.org/wiki/HTML
CSS
Cascading Style Sheet (CSS) merupakan aturan untuk
mengatur beberapa komponen dalam sebuah web sehingga akan lebih
terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).[1] Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.[1]
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.[1] CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.[2] Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda
di kutip : https://id.wikipedia.org/wiki/Cascading_Style_Sheets
HTML layout :
Scriptnya :
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
text-align:center;
background-color:purple;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
text-align:center;
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1> INI HEADER </h1>
</div>
<div id="nav">
<b> NAV </b>
</div>
<div id="section">
<b>SECTION</b>
</div>
<div id="footer">
<b>Footer</b>
</div>
</body>
</html>
CSS Dropdown :
Bila kursor di lewatkan di atas menu dropdown maka akan keluar opsi pilihan seperti gambar di atas.
Scriptnya :
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Dropdown Menu</h2>
<p></p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Profil</a>
<a href="#">Galery</a>
<a href="#">Artikel</a>
</div>
</div>
<p></p>
</body>
</html>
Sumber : http://www.w3schools.com/
Sekian dari saya jika anda ingin lebih mengerti apa itu html dan css beserta fungsinya silakan klik link ini : http://www.w3schools.com/default.asp.
Wassalamualaikum Wr. Wb.
0 komentar:
Posting Komentar