Desember 2016 ~ Dian Putriana

Sabtu, 31 Desember 2016

16.30

By Unknown

Belajar CSS : Pengenalan CSS

Latar belakang
Dunia informatika akan selalu berkembang mengikuti jaman. Hal yang paling nampak adalah perkembangan internet. Saat ini semakin banyak bermunculan website-website di dunia maya. Pada kesempatan ini saya akan membahas tentang Pengenalan CSS yang merupakan aturan untuk mengatur komponen dalam sebuah web.

Maksud dan Tujuan
Untuk mengetahui bagaimana cara menerapkan gaya untuk halaman web , termasuk desain, tata letak dan variasi tampilan untuk perangkat yang berbeda dan ukuran layar pada css dengan baik dan benar.

Pengertian
CSS singkatan dari Cascading Style Sheet merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam akan tetai CSS bukan merupakan bahasa pemograman. CSS banyak dipakai untuk memformat tampilan yang dibuat dengan bahasa HTML dan XHTML.

Versi CSS
Untuk saat ini versi CSS ada 3, antara lain :

CSS 1, merupakan CSS versi pertama yang ditetapkan oleh W3C pada tanggal 17 Agustus 1996 sebagai bahasa pemrograman standard dalam pembuatan web.
CSS 2, CSS versi kedua yang merupakan perkembangan dari versi yang pertama. Dikembangkannya CSS versi 2 untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer.
CSS 3, merupakan versi yang terbaru yang mampu untuk menampilkan berbagai desain web. Juga dapat menampilkan animasi pada tampilan web seperti animasi warna hingga 3D.

Penulisan CSS
Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:

h1 {
    color: #0789de;
   }

Bagian pertama sebelum tanda '{}' dinamakan selector, sedangkan yang diapit oleh '{}' disebut declaration yang terdiri dari dua unsur, yaitu property dan value.Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan #0789de adalah value.

Selain itu ada 2 metode penulisan CSS atribut, yaitu :

Inline Style Sheet, cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut.Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain. Contoh penulisan :

Embedded Style Sheet, didefinisikan dalam tag <style> ... </style> di atas tag <body>.
Contoh penulisan :

Sifat CSS

Sifat CSS ada 2 yaitu internal dan eksternal. Jika internal digunakan secara langsung ke halaman web yang akan didesain. Sedangkan eksternak script CSS dipisah dan diletakkan dalam berkas khusus.

Sekian dan Terimakasih semoga bermanfaat

Referensi :

https://id.wikipedia.org/wiki/Cascading_Style_Sheets

https://id.wikipedia.org/wiki/CSS_1

14.00

By Unknown

No comments

Mari Mengenal HTML : Membuat Form

Hallo semuanya, Nah pada kesempatan kali ini saya akan memposting tentang bagaimana cara membuat form pada HTML. Element form didefinisikan dengan tag <form> digunakan untuk mengumpulakan input para pengguna.

Jenis atribut pada element <input> :

Membuat form Text
<input type ="text">, mendefinisikan sebuat field dalam satu baris untuk menginputkan teks.
Contoh Script :

Hasil dari script diatas :

Membuat form Radio
<input type="radio">, sebuah tombol radio yang digunakan untuk memilih salah satu pilihan dari banyaknya pilihan.
Contoh Script :

Hasil dari script diatas :

Membuat form Submit
<input type="submit", sebuah tombol yang digunakan untuk mengirimkan formulir.
Contoh Script :

Hasil dari script diatas :

Membuat form drop down
Menggunak tag <option>, merupakan sebuah opsi yang digunakan untuk memilih pilihan yang diinginkan.
Contoh script :

Hasil dari script diatas :
Apabila anda meng-klik maka akan muncul pilihan menu makanan

Mengisi ulang data, menggunakan <input type="reset"> untuk mengatur ulang semua nilai ke bentuk nilai standar.

Contoh Script :

Hasil dari script diatas :

Apabila anda meng-klik reset maka data yang telah diisikan akan kosong, tampilannya seperti dibawah ini

Membuat form dengan checkbox
<input type="checkbox"> sebuah kotak centang yang digunakan untuk memilih dari banyak pilihan tetepi boleh memilih lebih dari satu pilihan.
Contoh script :

Hasil dari script diatas :

Membuat form Button <input type="button">
Contoh script :

Hasil dari script diatas :

Apabila anda meng-klik "Klik" maka akan muncul seperti tampilan dibawah ini

Cukup sampai disini postingan dari saya.

Terimaksih

Selamat Mencoba

Referensi:
http://www.w3schools.com/html/html_form_elements.asp
http://www.w3schools.com/html/html_forms.asp
http://www.w3schools.com/html/html_form_input_types.asp
isanurhaeni03skansa.blogspot.co.id/

Jumat, 30 Desember 2016

00.14

By Unknown

No comments

Mari Mengenal HTML Part 8 : HTML Iframe

Pada kesempatan kali saya akan memposting tentang HTML Iframe dari mengatur tinggi dan lebar serta untuk iframe link.

HTML Iframes
HTML Iframes, didefinisikan dengan tag <iframe>.

Iframe-Mengatur Tinggi dan Lebar
Menggunakan panjang dan lebar untuk mengatur ukuran pada frame.Nilai atribut secara default menggunakn pixel (px) tetapi juga bisa menggunakan persen (%).
Contoh :

Maka hasilnya :

Iframe-Menghapus Perbatasan
Untuk menghapus perbatasan, kita juga dapat menambahkan atribut dari style css.
Contoh script :

Hasilnya :

Anda juga dapat mengubah ukuran, gaya dan warna perbatasan iframe menggunakan CSS.
Contoh script :

Hasilnya :

Iframe-Link, dapat digunakan sebagai target bingkai untuk link. Target atribut link harus mengacu pada nama atribut iframe:
Contoh script :

Hasilnya :

Tampilan sebelum meng-klik linknya

Tampilan sesudah meng-klik link nya

Cukup sampai disini postingan dari saya.

Terimaksih

Selamat Mencoba

Referensi:

http://www.w3schools.com/html/html_iframe.asp

Kamis, 29 Desember 2016

07.39

By Unknown

No comments

Internet

Assalamualaikum wr. wb
Halo semua, pada kesempatan kali saya akan memposting tentang internet dari pengertian, sejarah internet serta bagaimana internet pada saat ini.

http://hubpages.com/technology/History-of-the-Internet-and-specialty-of-the-Internet

Latar Belakang
Teknologi memiliki peranan sangat penting bagi kehidupan masyarakat saat ini, dengan adanya teknologi manusia dapat berkomunikasi dengan saudara-saudara yang jauh sekalipun. Pada jaman sekarang teknologi sudah sangat canggih, diantaranya internet dengan adanya internet kita dapat mendapatkan informasi yang kita butuhkan, selain itu internet dibidang pendidikan sangat membantu untuk menambah ilmu pengetahuan kita.

Maksud dan Tujuan

Mengetahui pengertian internet
Mengetahui sejarah internet
Mengetahui Budaya Internet
Mengetahui layanan-layanan di Internet

Pengertian
Internet merupakan kependekan dari interconnection-networking. Internet adalah seluruh jaringan komputer yang saling terhubung menggunakan standar TCP/IP sebagai protokol pertukaran paket untuk melayani miliaran pengguna di seluruh dunia.

Sejarah Internet
Internet dibentuk pada tahun 1969 oleh Departemen Pertahanan Amerika, melalui proyek ARPA yang disebut ARPANET (Advanced Research Project Agency Network) yaitu mereka mendemostrasikan bagaimana dengan hardware dan software komputer berbasis UNIX, yang dapat dilakukan komunikasi pada jarak jauh tak hingga melalui saluran telepon. Tujuan dibentuknya proyek itu adalah untuk keperluan militer, untuk mengatasi masalah bila terjadi serangan nuklir dan untuk menghindari terjadinya informasi terpusat, yang apabila terjadi perang dapat mudah dihancurkan.

Pada awalnya ARPANET hanya menghubungakan 4 situs diantaranya : Stanford Research Institute, University of California, Santa Barbara, University of Utah, dimana mereka membentuk satu jaringan terpadu. Pada bulan Oktober 1972 secara umum diperkenalkan. Tidak membutuhkan waktu yang lama kemudian proyek ini berkembang pesat keseluruh daerah dan universits-universitas yang bergabung, sehingga ARPANET kesulitan untuk mengaturnya. Maka dari itu ARPANET dipecah menjadi dua yaitu MILNET untuk keperluan militer dan ARPANET baru yang lebih kecil untuk keperluan non militer contohnya universitas-universitas. Gabungan dari kedua jaringan itu dikenal denga nama DARPA Internet yang kemudian disederhanakan menjadi internet.

Budaya Internet
Jumlah pengguna internet yang semakin besar, telah mewujudkan budaya internet yang memiliki pengaruh yang besar atas ilmu dan pandangan dunia. Dengan adanya mesin pencarian seperti google seluruh pengguna di seluruh dunia mempunyai akses yang sangat mudah untuk mencari berbagai macam informasi. Perkembangan internet juga berpengaruh pada dunia perekonomian melalui e-commerce selain itu juda di dunia pemerintahan melalui e-government

Layanan-layanan yang ada di Internet

Email atau Elektonic Mail
Usenet adalah sistem diskusi Internet yang terdistribusi secara global. Sistem ini dikembangkan dari arsitektur serbaguna UUCP dari nama yang sama.
WWW atau World Wide Web merupakan kumpulan peladen web dari seluruh dunia yang mempunyai kegunaan untuk menyediakan data dan informasi untuk dapat digunakan bersama-sama.

Referensi:
https://id.wikipedia.org/wiki/Internet

Cukup sampai disini postingan dari saya.

Terimaksih semoga bermanfaat

04.49

By Unknown

No comments

Jaringan, Model Referensi OSI (Open System Interconnection) dan TCP/IP

Pengertian Jaringan
Jaringan adalah jaringan telekomunikasi yang memungkinkan antar komputer untuk saling bertukar data. Tujuan dari jaringan komputer adalah agar dapat mencapai tujuannya, setiap bagian dari jaringan komputer dapat meminta dan memberikan layanan (service). Pihak yang meminta/menerima layanan disebut dengan client dan memberikan atau mengirim layana disebut dengan server. Desain ini disebut dengan sistem client-server dan dapat digunakan hampir seluruh aplikasi jaringan komputer. Dua buah komputer yang masing-masing memiliki sebuah kartu jaringan, kemudian dihubungkan melalui kabel maupun nirkabel sebagai medium transmisi data, dan terdapat perangkat lunak sistem operasi jaringan akan membentuk sebuah jaringan komputer yang sederhana.

Apa itu OSI ?

Model referensi jaringan terbuka OSI atau OSI Reference Model for open networking adalah sebuah model arsitektural jaringan yang dikembangkan oleh badan International Orfanization Of Standardization (ISO) di Eropa pada tahun 1977. OSI sendiri merupakan singkatan dari Open System Interconnection, model ini juga disebut "Model tujuh lapis OSI".

Gambar Struktur Layer OSI

Model Referensi OSI (Open System Interconnection) memiliki 7 layer OSI diantarannya :

Lapisan ke 7

Application Layer, berfungsi sebagai antarmuka dengan fungsionalitas jaringan, mengatur bagaimana aplikasi itu mengakses jaringan dan membuat pesan-pesan kesalahan. Protokol yang berada dalam lapisan ini adalah : HTTP, FTP, SMTP dan NFS.

Lapisan ke 6

Presentation Layer, berfungsi untuk mentranslasikan data yang hendak mentrasmisikan oleh aplikasi kedalam format yang dapat ditransmisikan oleh jaringan. Protokol dalam layer ini adalah director software seperti layanan workstation (windows NT) dan juga network shell (semacam virtual Networking Computing atau Remote Desktop Protocol)

Lapisan ke 5

Session Layer, mendefinisikan bagaimana koneksi dibuat, dipelihara atau dihancurkan.

Lapisan ke 4

Transport Layer, untuk memecah data ke dalam paket-paket data serta memberikan nomor urut ke paket-paket tersebut sehingga dapat disusun kembali pada sisi tujuan setelah diterima.

Lapisan ke 3

Network Layer, mendefinisikan alamat ip, membuat header untuk paket-paket, selanjutnya melakukan routing internetworking menggunakan router dan switch layer 3.

Lapisan ke 2

Data-Link Layer, menentukan bit dat ayanga akan dikelompokan menjadi format yang disebut sebagai frame.

Lapisan ke 1

Physical Layer, mendefinisikan media transmisi jaringan, metode pensinyalan, sinkronisasi bit, arsitektur jaringan

TCP/IP
TCP/IP merupakan gabungan dari protokol TCP (Transmission Control Protocol) dan IP (Internet Protocol) sebagai sekelompok protokol yang mengatur komunikasi data dalam proses tukar-menukar data dari satu komputer ke komputer lain di dalam jaringan internet yang akan memastikan pengiriman data sampai ke alamat yang dituju. Protokol ini tidaklah dapat berdiri sendiri, karena memang protokol ini berupa kumpulan protokol (protocol suite). Protokol ini juga merupakan protokol yang paling banyak digunakan saat ini, karena protokol ini mampu bekerja dan diterapkan pada lintas perangkat lunak dalam berbagai sistem operasi Istilah yang diberikan kepada perangkat lunak ini adalah TCP/IP stack.
Protokol utama dalam protokol TCP/IP adalah sebagai berikut:

Protokol lapisan aplikasi.
Protokol lapisan antar host
Protokol lapisan internetwork
Protokol lapisan antar jaringan

IP Address
Alamat IP (Internet Protocol Address atau sering disingkat IP) adalah deretan angka biner antara 32 bit sampai 128 bit yang dipakai sebagai alamat identifikasi untuk tiap komputer host dalam jaringan internet. Panjang dari angka ini adalah 32 bit (untuk IPv4 atau IP versi 4), dan 128 bit (untuk IPv6 atau IP versi 6) yang menunjukkan alamat dari komputer tersebut pada jaringan Internet berbasis TCP/IP.

IPv4
Merupakan sebuah jenis pengalamatan jaringan digunakan di dalam protokol jaringan TCP/IP yang menggunakan protokol ip versi 4. Panjang totalnya berjumlah 32bit dan secara teroritis mengalamati hingga lebih dari 4 milyar host komputer.

IPv6
Merupakan protokol internet generasi terbaru menggantikan ip versi 4 yang sebelumnya. Tujuan diciptakannya adalah karena keterbatasan ruang pada ip versi 4 yang hanya terdiri 32bit. Paket link layer pada IPv6 mendukung ukuran paket 1280 byte dan bisa menyusun kembali paket yang berukuran 1500 byte.

Referensi :https://id.wikipedia.org/wiki/Jaringan_komputer
https://id.wikipedia.org/wiki/Suit_protokol_internet
https://id.wikipedia.org/wiki/Alamat_IP

Cukup sampai disini postingan dari saya.

Terimaksihsemoga bermanfaat

Rabu, 28 Desember 2016

10.00

By Unknown

No comments

Mari Mengenal HTML Part 7 : HTML Block and Inline Element, HTML Classes

Pada kesempatan kali saya akan memposting tentang HTML block and Inline element, HTML Classes. Langsung saja ke materinya

Setiap element HTML memiliki tampilan default tergantung pada jenis elemen. Tampilan nilai default untuk kebanyakan unsur adalah blok atau inline.

HTML Block and Inline
Block Level-Element
Block Level-Element atau elemen blok-tingkat selalu dimulai pada baris baru dan mengambil penuh lebar yang tersedia (membentang dari kiri kekanan sejauh itu bisa).
Contoh element block bertingkat :

<div>
<h1>-<h6>
<p>
<form>

Inline Element
Inline Element, berbeda halnya dengan element blok-bertingkat element inline tidak dimulai pada baris baru hanya membutuhkan berapa banyak lebar yang diperlukan.
Contoh element inline :

<span>
<img>
<a>

Element <div>, sering digunakan sebagai wadah element HTML yang lainnya. Ketika digunakan bersamaan dengan CSS dapat dijadikan sebagai style konten.
Contoh:
<div style="background-color:blue;color:white;padding:20px">
<h2>SMK NEGERI 1 BAWANG<h2>
<p>SMK N 1 Bawang atau sering disebut skansa merupakan Sekolah Menengah Kejuruan di Kabupaten Banjareunegara dengan alamat Jl. Raya Pucang no 132 Banjarnegara Jawa Tengah. Yang memiliki 8 jurusan yang diantaranya : jurusan akuntansi, adm.perkantoran, tata niaga, tata busana, mekatronika, rpl, tkj, Budidaya perikanan.<p>
</div>
Hasilnya seperti dibawah ini:

Dari script di atas silahkan anda mencoba.

Element <span>, sering digunakan sebagai wadah beberapa teks. Ketika digunakan bersamaan dengan CSS dapat dijadikan sebagai style pada teks.
Contoh :
<h2>SMKN <span style="color:blue">Bawang</span> Banjarnegara</h2>
Hasilnya seperti dibawah ini:

Dari script di atas silahkan anda mencoba.

HTML Classes
HTML Classes, atribut ini memungkinkan untuk menentukan gaya yang sama untuk dengan nama kelas yang sama.
Contoh penerapan :
<div class="cities">
<h2>INDONSIA</h2>
<p>Republik Indonesia (RI), biasa disebut Indonesia, adalah negara di Asia Tenggara yang dilintasi garis khatulistiwa dan berada di antara benua Asia dan Australia serta antara Samudra Pasifik dan Samudra Hindia. Indonesia adalah negara kepulauan terbesar di dunia yang terdiri dari 13.466 pulau,[6] nama alternatif yang biasa dipakai adalah Nusantara.[7] Dengan populasi lebih dari 258 juta jiwa pada tahun 2016,[8] Indonesia adalah negara berpenduduk terbesar keempat di dunia dan negara yang berpenduduk Muslim terbesar di dunia, dengan lebih dari 207 juta jiwa.[9] Bentuk pemerintahan Indonesia adalah republik, dengan Dewan Perwakilan Rakyat, Dewan Perwakilan Daerah dan Presiden yang dipilih secara langsung</p>
</div>
<div class="cities">
<h2>KOREA SELATAN</h2>
<p>Republik Korea atau biasa dikenal sebagai Korea Selatan atau Korsel adalah sebuah negara di Asia Timur yang meliputi bagian selatan Semenanjung Korea. Di sebelah utara, Republik Korea berbataskan Korea Utara, di mana keduanya bersatu sebagai sebuah negara hingga tahun 1948. Laut Kuning di sebelah barat, Jepang berada di seberang Laut Jepang (disebut "Laut Timur" oleh orang-orang Korea) dan Selat Korea berada di bagian tenggara.</p>
</div>
Hasilnya seperti dibawah ini

Dari script di atas silahkan anda mencoba.

Selain itu atribut class HTML juga dapat digunakan untuk elemen inline
Contoh penerapan :
<style>
span.note {
font-size :120%;
color : blue;
}
</style>
<h2>SMKN 1 <span class="note">Bawang</span> Banjarnegara</h2>
<p>SMK <span class="note"> Negeri 1</span> Bawang</p>
</style>
Hasilnya seperti dibawah ini :

Dari script di atas silahkan anda mencoba.

Cukup sampai disini postingan dari saya.

Terimaksih

Selamat Mencoba

Referensi :

http://www.w3schools.com/html/html_blocks.asp

http://www.w3schools.com/html/html_classes.asp

Selasa, 27 Desember 2016

06.35

By Unknown

No comments

Mari Mengenal HTML Part 6 : HTML CSS

Pada kesempatan kali saya akan memposting tentang Styling HTML CSS, berikut pengertianya

CSS merupakan singkatan dari Cascading Style Sheet, css menjalankan bagaimana elemen HTML yang akan ditampilkan pada layar. Keuntungan dari css tersendiri dapat menghemat banyak pekerjaan dikarenakan dapat mengontrol tata letak halaman web beberapa sekaligus.

CSS dapat ditambahakan ke element HTML ada 3 yaitu :

Inline, dengan menggunakan atribut style dalam elemen HTML
Internal, dengan menggunakan <style> elemen dalam <head>
Eksternal, dengan menggunakan file CSS eksternal

Cara yang paling umum untuk menambahkan CSS, adalah untuk menjaga gaya dalam file CSS yang terpisah. Namun, di sini kita akan menggunakan inline dan styling internal, karena ini lebih mudah untuk menunjukkan, dan lebih mudah bagi Anda untuk mencoba sendiri.

Inline, digunakan untuk menerapkan gaya unik untuk elemen HTML.

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a Blue Heading</h1>

</body>
</html>

CSS internal, digunakan untuk menentukan gaya untuk halaman HTML.

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Style sheet eksternal digunakan untuk menentukan gaya untuk banyak halaman HTML.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Dari contoh script yang ada diatas anda dapat mencobanya sendiri.

Style CSS
Font CSS
CSS warna properti mendefinisikan warna teks yang akan digunakan.
CSS font-family properti mendefinisikan font yang akan digunakan.
CSS font-size properti mendefinisikan ukuran teks yang akan digunakan.

<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>

CSS Border
CSS perbatasan properti mendefinisikan perbatasan sekitar elemen HTML:

p {
    border: 1px solid powderblue;
}

CSS Padding
CSS Padding properti mendefinisikan padding (spasi) antara teks dan perbatasan:

p {
    border: 1px solid powderblue;
    padding: 30px;
}

CSS Margin
CSS Margin properti mendefinisikan margin (ruang) di luar perbatasan:
p {
    border: 1px solid powderblue;
    margin: 50px;
}

Dari contoh script yang ada diatas anda dapat mencobanya sendiri.

Sekian dan terimakasih

Semoga Bermanfaat

Referensi:

http://www.w3schools.com/html/html_css.asp

Sabtu, 24 Desember 2016

22.03

By Unknown

No comments

Mari Mengenal HTML Part 5 : List HTML

Pada kesempatan kali saya akan memposting List HTML, dari pengertian, jenis-jenisnya dan contoh scriptnya.

List HTML
List Item merupakan sebuah perintah dalam HTML yang digunakan untuk membuat daftar atau pengelompokan. Ada berbagai macam jenis list item HTML diantaranya :

Unordered ListUnordered list dimulai dengan tag <ul>, pada setiap itemnya dimulai dengan tag <li> yang dapat disimbolkan dengan lingkaran kecil berwarna hitam.
Contoh :

<!DOCTYPE html>
<html>
<head><title>List HTML</title></head>
<body>
<h3>Unordered List</h3>
<ul>
    <li>Kopi</li>
    <li>Tea</li>
    <li>Susu</li>
</ul>
</body>
</html.

Anda dapat mencoba sendiri script yang diatas, maka hasilnya akan muncul seperti di bawah ini :

CSS list-style-type properti digunakan untuk menentukan gaya item daftar
penanda:

disc, bulatan kecil (default)

<h3>Unordered List with Disc Bullets</h3>
<ul style="list-style-type:disc">
    <li>Kopi</li>
    <li>Tea</li>
    <li>Susu</li>
</ul>

circle, lingkaran.

<h3>Unordered List with Circle Bullets</h3>
<ul style="list-style-type:circle">
    <li>Kopi</li>
    <li>Tea</li>
    <li>Susu</li>
</ul>

square, persegi

<h3>Unordered List with Square Bullets</h3>
<ul style="list-style-type:square">
    <li>Kopi</li>
    <li>Tea</li>
    <li>Susu</li>
</ul>

none, kosong atau tidak ada

<h3>Unordered List without Bullets</h3>
<ul style="list-style-type:none">
    <li>Kopi</li>
    <li>Tea</li>
    <li>Susu</li>
</ul>

Dari beerapa contoh script yang diatas, anda dapat mencobanya sendiri. Hasilnya seperti dibawah ini :

Ordered List
Ordered List, dimulai dengan tag <ol>, setiap item dimulai dengan tag <li> secara default ditandai dengan nomor.
Contoh:
<h3>Ordered List</h3>
<ol>
    <li>Kopi</li>
    <li>Teh</li>
    <li>Susu</li>
</ol>

Anda dapat mencoba sendiri script yang diatas, maka hasilnya akan muncul seperti di bawah ini :

Jenis-jenis atribut <ol>, antara lain :

Type="1", daftar item dengan nomor (default).

<h3>Ordered list with numbers</h3>
<ol type="1">
    <li>Kopi</li>
    <li>Teh</li>
    <li>Susu</li>
</ol>

Type="A", daftar item nomor diberi tanda huruf besar

<h3>Ordered list with letters</h3>
<ol type="A">
    <li>Kopi</li>
    <li>Teh</li>
    <li>Susu</li>
</ol>

Type="a", daftar diberi nomor tanda huruf kecil

<h3>Ordered list with lowercase letters</h3>
<ol type="a">
    <li>Kopi</li>
    <li>Teh</li>
    <li>Susu</li>
</ol>

Type="I", daftar diberi nomor dengan angka romawi huruf besar

<h3>Ordered list with Roman Numbers</h3>
<ol type="I">
    <li>Kopi</li>
    <li>Teh</li>
    <li>Susu</li>
</ol>

Type="i", daftar diberi nomor dengan angka romawi huruf kecil

<h3>Ordered list with Lowercase Roman Numbers</h3>
<ol type="i">
   <li>Kopi</li>
   <li>Teh</li>
   <li>Susu</li>
</ol>
Dari beerapa contoh script yang diatas, anda dapat mencobanya sendiri. Hasilnya seperti dibawah ini :

Deskripsi List, deskripsi list didefinisikan dengan tag <dl>, kalau tag <dt> untuk mendefinisikan istilah sedangkan tag <dd> menjelaskan setiap istilah.
Contoh :
<h3>Description List</h3>
<dl>
<dt>Kopi</dt>
<dd>-Kopi Susu</dd>
<dt>Susu</dt>
<dd>Susu Coklat</dd>
</dl>
Hasil :

List Bersarang bisa disebut juga dengan daftar dalam daftar
Contoh :
<h3>List Bersarang</h3>
<ul>
<li>Teh</li>
<li>Kopi</li>
    <ul>
    <li>Kopi Susu<li>
    <li>Kopi Luwak<li>
    </ul>
</li>
<li>Susu</li>
<ul>
Hasil :

Sekian dan terimakasih

Semoga Bermanfaat

Referensi :

http://www.w3schools.com/html/html_lists.asp

Jumat, 23 Desember 2016

20.44

By Unknown

No comments

Mari Mengenal HTML Part 4 : Link, Gambar, Tabel dalam HTML

Pada kesempatan kali saya akan memposting tentang Cara membuat Link, menampilkan gambar dan membuat tabel dalam HTML.

Link HTML
Link HTML atau hyperlink digunakan untuk mempermudah pengguna untuk mengeklik jalan mereka dari halaman satu kehalaman yang lain. Link bukan hanya berupa teks tetapi juga bisa berupa gambar atau yang lainnya. Dalam HTML link di definisikan dengan tag <a>.
Contoh :

Keterangan :

href : atribut yang menentukan alamat yang akan dikunjungi.
link teks merupakan bagian yang terlihat dan apabila anda mengeklik link teks maka akan mengirimkan ke alamat yang ditentukan.

Hasilnya akan muncul seperti dibawah ini, apabila anda mengeklik link tersebut maka akan menuju kehalaman blog saya.

Menyisipkan Gambar

Dalam HTML gambar didefinisikan dengan tag <img>.

Keterangan :

src : menentukan alamat web dari gambar
width : untuk menentukan lebar pada gambar
height : untuk menentukan tinggi pada gambar
px : ukuran pada gambar

Hasilnya akan muncul seperti dibawah ini

Tabel
Dalam HTML tabel didefinisikan dengan tag <table>. Untuk header bisa menggunakan tag <th>, untuk baris tabel menggunakan tag <tr> sedangkan sel tabel dengan tag <td>.