Contoh list web minimal
Kita semua pasti sudah tahu bagaimana tampilan sebuah
halaman web jika dilihat melalui web browser, tapi apakah sebenarnya yang ada
di balik halaman web tersebut?
Halaman web dihasilkan oleh teks dokumen sederhana yang disebut dengan “source document”. Perhatikan pada file index.html kode sumber untuk SMK Kosgoro 2 Payakumbuh, file tersebut berisi teks yang disertai tanda (tag) khusus (dikenali dengan > dan <) yang mendeskripsikan masing-masing elemen pada halaman.
Menambahkan tag deskriptif pada sebuah dokumen teks dikenal dengan istilah “marking up”. Halaman web menggunakan bahasa markup yang disebut Hypertext Markup Language (HTML). HTML menggambarkan berbagai macam elemen dokumen seperti paragraf, format huruf, dan link.
Halaman web dihasilkan oleh teks dokumen sederhana yang disebut dengan “source document”. Perhatikan pada file index.html kode sumber untuk SMK Kosgoro 2 Payakumbuh, file tersebut berisi teks yang disertai tanda (tag) khusus (dikenali dengan > dan <) yang mendeskripsikan masing-masing elemen pada halaman.
Menambahkan tag deskriptif pada sebuah dokumen teks dikenal dengan istilah “marking up”. Halaman web menggunakan bahasa markup yang disebut Hypertext Markup Language (HTML). HTML menggambarkan berbagai macam elemen dokumen seperti paragraf, format huruf, dan link.
Contoh
Halaman Web Sederhana
Halaman web
di atas terdiri dari tiga file terpisah: file HTML, stylesheet dan sebuah
gambar. Tag pada dokumen HTML memberikan browser perintah bagaimana teks dan
gambar ditampilkan.
Berikut ini
adalah kode sumber untuk halaman di atas
file:
index.html:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<head>
<title>SMK n 2 karanganayr</title>
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
<h1><img src="logo.gif" alt="logo
kosgoro" width="100px">
SMK Kosgoro 2 Payakumbuh</h1>
<p>SMK Kosgoro 2 Payakumbuh,
<strong>bermakna, berkualitas, dan bermartabat</strong>, adalah
sekolah menengah kejuruan yang melaksanakan pendidikan tiga tahun
di bidang Bisnis Manajemen, Teknologi dan Kesehatan
<em>Selamat Datang di Kampus Mahoni!</em></p>
<hr>
<p><small>Copyright 2014 Kampus
Mahoni</small></p>
</body>
</html>
|
file
style.css:
|
1
2
3
4
5
|
body { font: normal 1em Verdana;
margin: 1em 10%;}
h1 { font: italic 3em Georgia;
color: rgb(23, 109, 109); margin: 1em 0 1em;}
img { margin: 0 20px 0 0; }
h1 img { margin-bottom: -20px; }
small { color: #666666; }
|
file gambar:
logo kosgoro
logo kosgoro
Ketiga file
tersebut disimpan dalam sebuah direktori (folder) baik itu pada webserver lokal
maupun publik.
Cara membuat List Minimal dan List kombinasi Menggunakan Kode
HTML
Baiklah kali ini saya akan share tentang Cara membuat List Minimal
dan List kombinasi Menggunakan Kode HTML. Cara membuat List atau Daftar
dengan kode HTML cukup mudah kok, kalian harus mengetahui dulu kode dasar
html klik Pengertian
HTML dan Kode Dasar HTML Bagi kalian yang belum mengerti.
|
Cara
membuat List Minimal dan List kombinasi Menggunakan Kode HTML
|
Oke kita lanjutkan, list dalam kode html menggunakan tag :
1. <ol> </ol> = Ordered List (Membuat list dengan urutan contoh 1,2,3,.., a,b,c,... dll)
Attribut tag ol : type
Value tag ol : 1, i, I, a, dan A
Contoh : <ol type='i'><li> Ade Putra Blo</li><ol>
Value tag ol : 1, i, I, a, dan A
Contoh : <ol type='i'><li> Ade Putra Blo</li><ol>
2. <ul> </ul> = Unordered
list (membuat list tanpa orutan lihat screenshot pada gambar.
Attribut tag ul : type
Value tag ul : disc, circle, dan square
contoh : <ul type='square'><li> Ade Putra Blo</li><ul>
Value tag ul : disc, circle, dan square
contoh : <ul type='square'><li> Ade Putra Blo</li><ul>
3. <li></li> = Tag li berfungsi untuk menampilkan kalimat yang ingin kita buat.Tag li disisipkan diantara tag ol ataupun tag ul
contoh :
<ol>
<li>teks </li>
li>teks 2 </li>
li>teks dsb. </li>
</ol>
<li>teks </li>
li>teks 2 </li>
li>teks dsb. </li>
</ol>
Cara Membuat List Minimal
<html>
<head>
<title>Membuat list minimal</title>
</head>
<body>
<ol>
<li>teks </li>
<li>teks 2 </li>
<li>teks dsb. </li>
</ol>
</body>
</html>
<head>
<title>Membuat list minimal</title>
</head>
<body>
<ol>
<li>teks </li>
<li>teks 2 </li>
<li>teks dsb. </li>
</ol>
</body>
</html>
Copy ke notepad dan buka lewat browser kalian,
maka tampilannya akan seperti gambar dibawah ini.
|
Cara
membuat List Minimal dan List kombinasi Menggunakan Kode HTML
|
Kalian bisa mengganti tag ol dengan ul dan
juga menambahkan attribut sesuai dengan kreasi kalian masing-masing.
Cara Membuat List Kombinasi.
Membuat list kombinasi saya rasa tidak cukup sulit, hanya saja kita harus meletakkan kodenya dengan teliti agar list yang kita buat tidak kacau. Kita akan membuat list kombinasi sesuai seperti gambar dibawah.
Cara Membuat List Kombinasi.
Membuat list kombinasi saya rasa tidak cukup sulit, hanya saja kita harus meletakkan kodenya dengan teliti agar list yang kita buat tidak kacau. Kita akan membuat list kombinasi sesuai seperti gambar dibawah.
|
Cara
membuat List Minimal dan List kombinasi Menggunakan Kode HTML
|
Pertama, tulis atau copy kode dibawah dengan notepad kalian.
<html>
<head>
<title>Membuat list Kombinasi</title>
</head>
<body>
Daftar Makanan
<ol>
<li>Ayam </li>
<li>Soto </li>
</ol>
</body>
</html>
<head>
<title>Membuat list Kombinasi</title>
</head>
<body>
Daftar Makanan
<ol>
<li>Ayam </li>
<li>Soto </li>
</ol>
</body>
</html>
Simpan dan tampilkan di browser maka tampilannya akan seperti gambar dibawah.
|
Cara
membuat List Minimal dan List kombinasi Menggunakan Kode HTML
|
Yang kedua adalah cara membuat submenu pada ayam dan soto. caranya yaitu dengan menyisipkan tag ol atau ul di dalam tag li pada ayam dan soto. Caranya seperti kode dibawah.
<html>
<head>
<title>Membuat list Kombinasi</title>
</head>
<body>
Daftar Makanan
<ol>
<li>Ayam
<ul>
<li type='circle'>Daging</li>
<li type='disc'>Bakar</li>
<li type='square'>Kecap</li>
</ul>
</li>
<li>Soto
<ol type='a'>
<li>Daging</li>
<li>Bakar</li>
</ol>
</li>
</ol>
</body>
</html>
<head>
<title>Membuat list Kombinasi</title>
</head>
<body>
Daftar Makanan
<ol>
<li>Ayam
<ul>
<li type='circle'>Daging</li>
<li type='disc'>Bakar</li>
<li type='square'>Kecap</li>
</ul>
</li>
<li>Soto
<ol type='a'>
<li>Daging</li>
<li>Bakar</li>
</ol>
</li>
</ol>
</body>
</html>
Bagaimana ? Mudah bukan ? Jika kalian mengetahui dasar kode html, pasti membuat list minimal juga akan terasa lebih mudah. Intinya, kalian harus benar menempatkan kodenya sehingga browser bisa menampilkan hasil coding yang kalian buat.
Jika kalian masih kesulitan, Silakan contact saya atau tinggalkan komentar..
0 komentar:
Posting Komentar