Konsep Dasar Template Website

STRUKTUR DASAR DOKUMEN HTML

<html> 
<head> 
<title>>Judul Dokumen HTML</title> 
</head> 
<body> 
Hallo Word! ...
</body> 
</html>

<html> ... </html> : merupakan tag pembuka dan penutup dari dokumen html.
<head> ... </head> : merupakan tag untuk head pada dokumen html
<title> ... </title> : merupakan tag untuk memberikan judul pada dokumen html.
<body> ... </body> : merupakan body dari dokumen html. Segala sesuatu yang ingin
ditampilkan di dokumen html disimpan dalam tag body ini.

MEMBUAT TEKS FORMAT JUDUL

<html> 
<head> 
<title>Title</title> 
</head> 
<body> 
<h1>Heading Level 1</h1> 
<h2>Heading Level 2</h2> 
<h3>Heading Level 3</h3> 
<h4>Heading Level 4</h4> 
<h5>Heading Level 5</h5> 
<h6>Heading Level 6</h6> 
</body> 
</html>

TAG BODY DAN ATRIBUTNYA

BACKGROUND
Atribut ini digunakan untuk mengeset gambar untuk digunakan sebagai latar
belakang pada sebuah halaman. Kita cukup menggunakan atribut berikut untuk
memilih sebuah gambar untuk dijadikan latar belakang. Cara penulisannya
adalah sebagi berikut:
<body background="url gambar/lokasi penyimpanan gambar">

Contoh:

<html>
 <head> <title>Judul Dokumen</title>
 </head>
 <body background="images/bg.jpg">
 Mengganti background dokumen HTML dgn gambar
 </body>
 </html>

BGCOLOR
Bgcolor menentukan warna latar belakang dari halaman web. Misalnya, untuk
mengatur warna latar belakang halaman agar berwarna merah, kita dapat
menggunakan tag berikut :
<body bgcolor="#222222?” >

TEXT
Atribut ini berguna untuk menentukan warna standar dari teks yang ada pada halaman tersebut.

LINK
Atribut ini berguna untuk menentukan warna standar dari tautan (link) yang ada pada halaman tersebut sebelum di-klik.

VLINK
Berguna untuk menentukan warna standar dari tautan (link) yang ada pada halaman tersebut ketika telah di-klik.

ALINK
Berguna untuk menentukan warna standar dari tautan (link) pada halaman tersebut ketika kursor berada diatasnya.

MARGIN
TOPMARGIN dan LEFTMARGIN digunakan untuk menentukan jarak atas dan tepian pada halaman. Tag ini akan terbaca pada browser Internet Explorer, sedangkan untuk browser Netscape tag yang digunakan adalah MARGINHEIGHT dan MARGINWIDTH.

onLoad
Tag onUnLoad digunakan untuk menjalankan suatu perintah ketika suatu halaman html tutup.

Contoh:
<body onUnload="alert('Selamat Tinggal')">

MENGATUR FONT PADA HALAMAN HTML

<html> 
<head> 
<title> Format Font </title> 
</head> 
<body > 
<font size="11pt" face="Arial" color="red"> 
Bentuk Text arial berwarna merah 
</font> 
</body> 
</html>

Konsep dasar bagian template HTML

<div id='outer-wrapper'>
<div id='header-wrapper'>
<h1>HEADER WEBSITE</h1>
</div>
<div id='nav'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Archive</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
<div id='content'>
<div id='main-wrapper'>
ARTIKEL DI SINI...
</div>
<div id='sidebar-wrapper'>
WIDGET DI SINI...
</div>
<div class='clear'></div>
</div> <!-- end content -->
<div id='footer-wrapper'>
Copyright 2014 - Ngabidin
</div>
</div> <!-- end outer-wrapper -->

Contoh dasar kode CSS

h1,h2,h3,h4,h5,h6,ul,ol,li {
margin:0 0 0 0;
padding:0 0 0 0;
border:none;
}

body {
background:#fff;
margin:0;padding:0;
text-align:center;
font:normal normal 70% Arial,Sans-Serif;
}

#outer-wrapper {
width:1030px;
margin:0 auto 0;
text-align:left;
background:#ddd;
}

#header-wrapper {
padding:2%;
margin:0;
display:block;
background:#666;
}

#nav {
background:#999;
font:normal normal 1em Arial,Sans-Serif;
overflow:hidden;
}

#nav ul {
margin:0;
padding:0;
height:auto;
}

#nav ul li {
margin:0;
float:left;
display:inline;
list-style:none;
}

#nav ul li a {
display:block;
padding:5px 10px;
background:#999;
color:#fff;
}

#nav ul li a:hover {
background:#888;
text-decoration:none;
}

#content {
clear:both;
display:block;
}

#main-wrapper {
width:71%;
padding:2%;
word-wrap:break-word;
overflow:hidden;
float:left;
display:inline;
background:#eee;
}

#sidebar-wrapper {
width:21%;
padding:2%;
word-wrap:break-word;
overflow:hidden;
float:right;
display:inline;
background:#ddd;
}

#footer-wrapper {
padding:2%;
clear:both;
display:block;
background:#666;
}
.clear {clear:both}

/* Media Query Untuk Tampilan Responsive
------------------------------------------- */
@media screen and (max-width:1030px) {
#outer-wrapper {
width:100%;
}
}

@media screen and (max-width:600px) {
#sidebar-wrapper,
#main-wrapper {
float:none;
display:block;
width:auto;
padding:5%;
}
}

/* Untuk membuat gambar menjadi responsif 
------------------------------------------- */
img {
max-width:100%;
height:auto;
width:auto\9; /* IE8 */
}

/* Untuk embed video dan iframe 
--------------------------------------------- */
embed,object,iframe {
width:100%;
height:auto;
min-height:300px;
}

/* Meta Tag Skala pada Perangkat Seluler
perangkat seluler yang canggih akan memperkecil skala halaman website saat dibuka. Dengan menggunakan meta tag ini, perangkat tersebut tidak akan menyesuaikan skala halaman dan akan menerapkan skala seperti apa adanya
--------------------------------------------- */
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

/* Orientasi Viewport
Jika Anda menggunakan tablet atau iPhone maka orientasi dapat berubah secara otomatis dari portrait menjadi landscape atau sebaliknya saat Anda memutarnya.
--------------------------------------------- */
@media screen and (orientation:portrait) {
/* Tampilan Portrait Website Anda */
}

@media screen and (orientation:landscape) {
/* Tampilan Landscape Website Anda */
}

/* Untuk membuat Background Image yang terlalu Besar menjadi responsif, mengubah skala background menjadi 80% dari ukuran sesungguhnya saat lebar viewport berada pada 480 piksel
-------------------------------------------------------- */
@media screen and (max-device-width:480px) {
html,body {
-webkit-background-size:100% auto;
-moz-background-size:100% auto;
-ms-background-size:100% auto;
-o-background-size:100% auto;
background-size:100% auto;
}
}

/* Media Queries pada CSS Eksternal
------------------------------------------------------- */
<link rel='stylesheet' media='screen and (max-width: 600px)' href='600px-viewport.css'></link>

/* Max Width, Min Width, Multiple Media Queries Max Width
Kode untuk mengubah penampilan saat lebar viewport berada pada maksimal 500 piksel dan di bawahnya
------------------------------------------------------- */
@media screen and (max-width:500px) {
...
...
}

/* Kode di bawah akan mulai mengubah penampilan saat lebar viewport berada pada minimal 500 piksel dan di atasnya
------------------------------------------------------- */
@media screen and (min-width:500px) {
...
...
}

/* Kode untuk mengubah penampilan apabila lebar viewport berada di antara 500 piksel dan 900 piksel
------------------------------------------------------- */
@media screen and (min-width:500px) and (max-width: 900px) {
...
...
}

/* Device Width
max-width dihitung berdasarkan resolusi area, sedangkan max-device-width dihitung berdasarkan resolusi device
------------------------------------------------------- */
@media screen and (max-device-width:1024px) {
...
...
}

/* Media Queries untuk Device Standar
------------------------------------------------------- */
/* Smartphone (portrait & landscape) */
@media only screen
and (min-device-width:320px)
and (max-device-width:480px) {
...
...
}

/* Smartphone (landscape) */
@media only screen
and (min-width:321px) {
...
...
}

/* Smartphone (portrait) */
@media only screen
and (max-width:320px) {
...
...
}

/* iPad (portrait & landscape) */
@media only screen
and (min-device-width:768px)
and (max-device-width:1024px) {
...
...
}

/* iPad (landscape) */
@media only screen
and (min-device-width:768px)
and (max-device-width:1024px)
and (orientation:landscape) {
...
...
}

/* iPad (portrait) */
@media only screen
and (min-device-width:768px)
and (max-device-width:1024px)
and (orientation:portrait) {
...
...
}

/* Desktop & laptop */
@media only screen
and (min-width:1224px) {
...
...
}

/* Large Screen */
@media only screen
and (min-width:1824px) {
...
...
}

/* iPhone 4 */
@media
only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-device-pixel-ratio:1.5) {
...
...
}

Referensi:

1 komentar :

Balas

Unknown

1/7/15 22:51

Saya tertarik dengan tulisan anda mengenai Teknologi. Teknologi merupakan suatu ilmu yang sedang berkembang di zaman yang sudah maju sekarang ini. Saya memiliki beberapa tulisan sejenis mengenai Teknologi yang dapat dilihat di www.ejournal.gunadarma.ac.id

MAAF, saat ini kolom komentar sudah tidak bisa berfungsi dengan baik karena adanya perubahan struktur kode pada template blog ini.

==================================
Silahkan berikan komentar Anda di laman ini.
Tautan (live links) spam dalam komentar akan terhapus secara otomatis.
Jika ingin menyisipkan tautan silakan gunakan tag: URL ANDA
Untuk menyisipkan judul, gunakan tag TEKS JUDUL ANDA DI SINI
Untuk menyisipkan gambar, gunakan tag Tulis URL GAMBAR Anda di sini 
Untuk menyisipkan kode, gunakan tag Tulis KODE ANDA di sini
Kode yang panjang bisa menggunakan tag KODE PANJANG di sini
Untuk menciptakan efek tebal gunakan tag TEKS TEBAL ANDA DI SINI
Untuk menciptakan efek tulisan miring gunakan tag TEKS MIRING ANDA DI SINI

Ngabidin Web Id

Monday, 7 July 2014

Konsep Dasar Template Website

1 komentar :