Struktur Dasar HTML

Struktur Dasar HTML, pada kesempatan kali ini saya akan mencoba memberikan informasi tentang struktur HTML. Seharusnya informasi ini diberikan saat pertama kali, agar lebih memahami tentang fungsi dari tiap-tiap struktur HTML

Berikut Struktur Dasar HTML:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>


Penjelasan Kode:

<html>
......
</html>


Tag <html> ini digunakan untuk menyatakan bahwa halam website menggunakan bahasa HTML.

<head>
......
</head>


Tag <head> adalah kepala dari halaman website. Pada tag ini anda bisa menambahkan banyak informasi seperti meta, css, javascript, font dan lain lain.

Contoh, memanggil external file css dan javascript dan font dari google webfont.
<head>
<title>
Contoh dari Title
</title>

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" >
<script type="text/javascript" href="script.js"></script>
</head>


<title>
.......
</title>


Tag <title> digunakan untuk menyatakan title website anda. Tag ini disimpan didalam tag <head></head>
Struktur HTML - Title

<body>
.......
</body>


Tag <body> ini digunakan untuk menampilkan isi dari website anda. Semua yang ingin anda tampilkan, dimasukan dalam tag <body> ini, bisa image, teks, video, musik dan lain-lain.

Sekian informasi Struktur Dasar HTML yang bisa saya sampaikan, semoga tutorial HTML ini bermanfaat dan mohon maaf apabila ada kesalahan atau kekurangan :)

Cara Membuat Search Form Responsive

Membuat sebuah Search form adalah hal sederhana yang mungkin orang-orang yang mengenal HTML dan CSS bisa membuatnya. Namun kali ini saya ingin berbagi pengalaman dalam membuat search form yang responsive. Dalam membuat search form ini, kita perlu menggunakan property dari CSS yaitu "position".
Jika masih bingung dalam penggunaan property position, teman-teman bisa melihat referensi langsung nya dari w3schools.

Langsung saja berikut code untuk membuat search form responsive:

Kode HTML:

<form class="searchform">
  <input type="text" name="s">
  <input type="submit" value="Search" title="Search Button">
</form>


Kode CSS:

.searchform{
  position:relative
}
.searchform input[type="text"]{
  background: #EBEBEB;
  height: auto;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  margin-bottom: 0;
  padding: 7px;
  border: none;
  float: left;
  color: #5F5F5F;
  width: 100%;
  height: 34px;
  float: none;
  padding-right: 70px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
input[type="submit"]{
  background: #6B6B6B;
  border: none;
  padding: 7px;
  color: #fff;
  height: 34px;
  position: absolute;
  bottom: 0;
  right: 0;
  margin:0
}


Silahkan anda coba kecilkan layar browser anda atau coba buka website anda dengan smartphone/tablet.
Sekian artikel belajar css tentang membuat search form responsive, silahkan dicoba dan semoga bermanfaat.

Cara mengetahui font yang digunakan website

Pada artikel kali ini saya akan berbagi pengetahuan saya tentang bagaimana mengetahui font yang digunakan pada sebuah website. Terkadang ketika kita menggunakan internet kemudian melihat website/blog orang lain terlihat unik karena font nya bagus, kita pun menjadi penasaran sebenarnya website itu menggunakan font apa?

Sebenarnya untuk mengetahui hal tersebut tidak terlalu sulit. Beberapa browser seperti Google Chrome, Mozilla Firefox dan Internet Explorer sudah menyediakan tools untuk mengetahui font sebuah website.

Berikut Cara mengetahui font yang digunakan website, pada contoh kali ini kita menggunakan contoh website ini sendiri http://ngajarcss.blogspot.com/

Menggunakan Google Chroome:

  1. Buka Google Chrome
  2. Masuk ke alamat http://ngajarcss.blogspot.com/
  3. Klik kanan text yang ingin di ketahui, misalnya title post. Kemudian pilih Inspect Elemen

  4. Inspect Element

  5. Kemudian akan muncul dibawah layar seperti ini

  6. Layar web developer

  7. Kemudian dibagian kanan, pilih computed dan cari font-family

  8. Computed tab

  9. Font family yang digunakan pada text post title adalah "Lato".

Begitulah yang saya ketahui tentang cara mengetahui font yang digunakan sebuah website. Pada dasarnya browser sudah mempunyai tools untuk mengetahui font atau warna dll. Biasanya kita bisa membuka layar web developer dengan menggunakan F12. Jika kurang dimenegrti silahkan tinggalkan comment. Tetap semangat Belajar HTML dan CSS.