Sukai Penulis: HTML

HTML

Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Display Dalam CSS

Atribut Display

Dalam CSS, anda dapat pula memanipulaskan elemen-elemen dalam html agar tampilannya menjadi sesuai dengan yang anda inginkan, Saat ini kebanyakan halaman web dapat di buat hanya dengan menggunakan sedikit tag yang di susun rapi ke dalam style css yang akan mengatur tampilan dokumen web hingga sesuai dengan keinginan anda.

Kebanyakan dokumen html yang di tampilkan dalam browser saat ini terdiri dari berbagai style font, margin, padding, dan pada dasarnya adalah tipe display. Adapun penulisan display dalam css dapat di masukan ke dalam sebuah selector seperti contoh script berikut ini:

selector {display : tipe display;}

kebanyakan tipe pokok dari display adalah berupa tipe inline, block-line, dan none yang dapat di manipulasi dengan property display dan nilai inline, block serta none tersebut. Adapun maksud dari tipe display adalah:

Tipe-tipe Display

Inline	:	Seperti artinya di mana elemen-elemen yang di tampilkan secara inline akan mengikuti alur dari sebuah garis/line. Elemen-elemen seperti strong, anchor, dan emphasis adalah elemen yang biasa nya di tampilkan secara inline
Block	:	Akan menempatkan sebuah line break sebelum dan sesudah elemen yang di berikan property ini. Header dan paragraf adalah contoh dari elemen yang biasanya di tampilkan secara blok-line dalam display.
None	:	Maksud dari property ini adalah tidak akan menampilkan elemen yang memiliki property ini, walaupun terlihat tidak berguna, tetapi property ini dapat di gunakan dan akan terlihat bagus jika di gabungkan dengan elemen-elemen accessibility seperti accessbility link, alternate stylesheet, atau efek hover tingkat lanjut.

Berikut sebuah contoh penerapan property display dalam membuat layout sebuah dokumen web:

<html>
<head>
<title>Belajar Display</title>
</style>
#bg{
display: inline;
z-index: 1;
background: #ffccff;
left: 10px;
width : 100%;
border-bottom: #fc9b52 20px solid;
position: absolute;
top: 10px;
height: 150;
}
</style>
</head>
<body>
div id=bg> </div>
</body>
<html>

Pada contoh kode di atas di gunakan sebuah property display yang di terapkan secara inline, kemudian posisi z-index 1, warna background #ffccff warna border bawah dengan nilai 20 piksel, posisi absolute, besar margin atas 10 piksel dan tinggi sebesar 150 piksel. Jika di dalam browser akan terlihat seperti pada gambar di bawah ini :

Tampilan Dalam Tabel

Dalam CSS kita dapat pula menampilkan data dalam bentuk tabel seperti yang di buat dengan html menggunakan property display css, seperti :

selector {display : table;}

Pada nilai inline-table tersebut akan mengatur data dalam sebuah tabel tanpa adanya line break sebelum dan sesudahnya.

Mungkin cara terbaik untuk memahami tabel yang berhubungan dengan nilai dari prperty display ini adalah dengan menggunakannya seperti tabel dalam Html. Tabel dalam CSS adalah display insial dan anda dapat menirukan elemen ter dan td dengan nilai dari baris tabel menggunakan table-roe dan cell table menggunakan table-cell secara terpisah. Penulissannya dalam CSS adalah:

selector {display : nilai table;}

Property display semakin baik dengan menawarkan nilai yang lebih lengkap untuk tabel berupa table-column, table-row-group, table-column-group, dan table-caption guna pengaturan data dalam sebuah tabel menggunakan css, di mana seluruh nilai tersebut cukup deskriptif untuk mewakili tampilan dari tabel dalam css.

Keunggulan dari nilai ini adalah bahwa anda dapat membuat tabel dengan kolom di bandingkan tabel yang di gunakan dalam html yang lebih condong pada metode menggunakan baris.

Catatan : Menggunakan sebuah tabel css dalam dokumen web yang anda buat dapat merusak tampilan dokumen web yang anda buat menggunkan html. Html biasanya di gunakan untuk menyampaikan pesan. Jadi, jika anda memiliki data-data yang tersusun dalam tabel, ada baiknya jika data tersebut di susun dalam tabel html.

Tipe-tipe display lainnya:

1.List-item	:	Untuk tampilan data daftar yang biasanya di gunakan seperti pada tag li dalam elemen html. Agar tipe ini bekerja dengan baik, elemen yang akan menggunakan tipe ini sebaiknya menggunakan elemen ul atau ol sehingga akan menampilkan berupa daftar
2.Run-in	:	Akan membuat sebuah elemen baik berupa in-line maupun block-line tergantung tipe ini adalah tidak dapata bekerja dalam browser Internet Explorer atau Mozilla
3.Compact	:	Sama dengan run-in, yaitu membuat elemen terlihat dalam bentuk inline atau block-line tergantung pada isinya. Namun tipe ini tidak dapat bekerja dengan baik pula dalam kedua browser di atas
4.Marker	:	Di gunakan bersama dengan pseudo element : before dan after untuk menentukan tampilan dari nilai property isi yang telah di tandai dengan tag ini. Jadi tipe ini hanya dapat berjalan dengan baik jika anda mengesampingkan nilai pseudo elemen property display sebelumnya.

Nah itulah pembahasan dari saya mengenai Display Dalam CSS, semoga artikel ini dapat membantu, ok saya pamit dulu sampai bertemu di artikel selanjutnya. Salam Sukai Penulis

Cara mengatur posisi Absolute dan Relative di CSS

CSS HTML JavaScript 0

Dalam membuat layout menggunakan CSS, anda dapat menentukan posisi sebuah elemen dengan menggunakan fungsi dari position. Adapun property position tersebut berupa absolute, relative, dan static atau fixed.

Nilai dari static merupakan nilai default dari seluruh elemen yang terlihat dalam html. Relative hampir seperti nilai static, tetapi elemen-eleemennya dapat di set dari posisi orsinil dengan menggunakan nilai top, right, bottom, dan left.

Property fixed pada absolute, tetapi secara teoeri elemen yang menggunakan property ini akan tetap berada pada posisi tersebut walau halaan tersebut kita scroll ke atas atau ke bawah. Namun property fixed ini walau terlihat bekerja lebih baik dalam browser seperti mozilla dan opera, tetapi tidak bekerja sama sekali pada internet explorer.

Penerapannya di dalam dokumen web anda di hitung dari posisi atau koordinat samping kiri atas (absolute) atau mengakalkulasikan dari posisi atau koordinat di mana elemen tersebut di masukan (relative).

Catatan : Sebelum ke kode script, alangkah baiknya anda tahu pengertiannya

Posisi Absolute

Jika anda menentukan posisi ke dalama posisi absolute maka akan di kalkulasikan dari sebelah ujung kiri atas halaman kecuali layer tersebut di definisikan di dalam layer yang lain, dimana dalam kasus ini akan dikalkulasikan dari sebelah ujung kiri atas dari layer utama.

<div style="position:absolute; top:10; left:60; font-family: verdana; font-size:35pt; color: green">

Posisi Relative

Jika anda menentukan pisisi menjadi rekative maka akan di posisikan relative ke dalam tag yang di usung dalam stylenya. Jika anda menambahkan sebuah layer dengan posisi relative di tengah halaman, posisi akan dikalkulasikan tepat dari tempat yang sama dalam tengah halaman di mana ia di tambahkan.

Ketika property position mengindikasikan sumber luar dari koordinat sistem, maka property left dan top akan menentukan posisi yang tetap pada layer, yaitu posisi sebelah kiri halaman (left) dan posisi sebelah kanan halaman (right).Anda dapat memasukan baik nilai positif maupun negatif untuk property tersebut.

Dengan demikian, sangat mungkin untuk menempatkan isi atau content menjadi lebih tinggi dan ke lebih ke kiri dalam halaman di bandingkan posisi logical dalam kode atau script yang di buat dengan menggunakan html di mana layer tersebut di definisikan. Jadi di bawah kode html, anda akan dapat memasukkan kode untuk layer yang di posisikan pada atas halaman yang di hasilkan.

Baik property left maupun tip dapat di ubah secara dinamis dengan menggunakan bahasa javascript. Ini artinya bahwa anda akan dapat menggerakan objek pada layer bahkan setelah halaman web tersebut selesai di load.

Kegunaan lain dari layer yang di buat dengan CSS adalah berupa menu yang keluar ketika mouse bergerak melewati sebuah link yang telah di berikan script ini.

Property "z-index", berfungsi untuk meletakkan "stacking order" dari layar-layar yang di letakan antara satu dengan yang lain. Nilai z-index yang tertinggi akan menekan elemen yang terendah dan nilai yang terendah akan secara pasti mengikuti aturan di atasnya.

Sebagai contoh, Sebuah permainan kartu di mana kita sebuah as sekop jika berada pada dasar maka dapat di katakan memiliki z-index:52;. Hebatnya lagi bahwa z-index ini dapat di buat menjadi lebih baik lagi menggunakan javascript, tetapi tentu saja kita juga harus menguasai bahasa ini.

Anda dapat membuat beberapa halaman di atas tiap halaman lainnya seleuruhnya dalam sebuah halaman. Ketika pengguna memilih sebuah link, maka akan secara otomatis memindahkan layer dengan info yang kita inginkan di atasnya dari pada membuka sebuah halaman baru.

Tekhnik membuat efek seperti saat ini banyak mengacau pada DHTML (Dinamic HTML atau gabungan antara javascript dan CSS) yang lebih mengarah pada tujuan tersebut.

Salah satu penggunaan properti "z-index" adalah untuk menciptakan bayangan (drop shadow). Contoh berikut adalah penerapan z-index untuk membuat bayangan :

<html>
<head>
<title> Membuat Bayangan<title>
<style>
.posisi1 {position:relative; top:15; left:25; z-index:10; color:#00000; font-family: arial; font-size:25pt;}
.posisi2 {position:relative; top:-22; left:28; z-index:6; color:#00ccff; font-family: arial; font-size:25pt;}
.posisi3 {position:relative; top:-59; left:29; z-index:6; color:#ff00ff; font-family: arial; font-size:25pt;}
</syle>
</head>
<body>
<div class="posisi1">Bayangan dengan Layer </div>
<div class="posisi2">Bayangan dengan Layer </div>
<div class="posisi3">Bayangan dengan Layer </div>
</body>
</html>

Dalam browser akan terlihat seperti gambar di bawah ini:

Property terkahir adalah visibility property yang memungkinkan anda membuat layer yang tidak terlihat untuk menambahkan berbagai bentuk pop up menu dan berbagai efek lain dalam halaman anda. Nilai dari peroperty ini adalah "visible" untuk memperlihatkan layer dan "hidden" untuk menyembunyikan layer.

Dengan dynamic html akan memudahkan anda mengbah penampakan dari layer menurut masing-masing event. Kegunaan yang paling umum adalah dalam membuat menu yang dapat keluar (pop up), seperti menu statt dalam windwos di mana sub-menu-sub-menu yang akan keluar (pop up) tersebut harus di buat sebagai layer yang tidak terlihat (invisble layer).

Kemudian, sebuah mouse melintas di atas sebuah link maka layer yang kita tentukan akan terlihat. Namun browser netscape agaknya kurang mendukung teknologi css ini. Berikut adalah contoh pembuatan dokumen dengan properti "visibility", yang menerima nilai "visible" dan "hidden".

<html>
<head>
<title>Property visibility</title>
</head>
<div style="position: absoulte; top:10; left:50; font-family:verdana; font-size:30pt; color:green; font-variant:small-caps;">
Contoh Properti Visibility :</div>
<div style="position: absolute; top:180; left:50; letter-spacing:5px; font-family:verdana; font-size:20pt; color:red; visibility:hidden;">
1. Teks ini tidak terlihat karena visibility : hidden
</div>
<div style="position: absolute; top:180; left:50; letter-spacing:5px; font-family:verdana; font-size:20pt; color:red; visibility:visible;">
2. Teks ini telihat karena visibility : visible
</div>
</body>
</html>

Dalam browser akan terlihat seperti gambar di bawah ini:

Selain properti di atas, ada lagui yang namanya float. seperti artinya yaitu mengapung, maka elemen yang akan di buat ke kanan atau ke kiri dari sebuah garis dengan isi yang melingkupnya. Floating di gunakan untuk memosisikan elemen yang lebih keci dalam sebuah halaman, contoh script di bawah:

#navigasi {float: left; width:10px;}

#navigasi {float: right; width:10px;}

#isi {margin:0 10px;}

Jika anda tidak menginginkan elemen berikutnya elemen berikutnya mengelilingi objek yang di floating. Anda dapat menerapkan propery clear.

Clear: left (akan menghilangkan elemen float kiri)
Clear: Right (akan menghilangkan elemen float kanan)
Clear: Both (akan menghilangkan elemen float kiri dan kanan).

Sebagai contoh, jika anda membuat sebuah footer dalam halaman, anda dapat menambahkan sebuah id footer dan membahkan :

#footer {clear: both;)

contoh:

<html>
<head>
<title>Belajar float</title>
<style>
#navigasi {float: left; width:10px;}
#navigasi2 {float: right; width:50px;}
#footer {clear:both;}
</style>
</head>
<body>
<div id=navigasi> float kiri</div>
<div id=navigasi2> float kanan</div>
<div id=footer> clear float</div>
</body>
</html>

Jika di lihat di dalam browser akan terlihat seperti gambar di bawah ini:

Cukup sekian pembahasan kali ini, terimakasih sudah mau membaca artikel ini, sampai jumpa dan salam Sukai Penulis

Apa itu layout di CSS?

CSS HTML Pemula 0

Pada kesempatan kali ini saya akan menjelaskan apa itu layout, bagaimana cara mengatur margin yang kita inginkan, border dan padding. Baiklah tanpa basa-basi yang panjang mari kita simak di bawah ini :

Baca juga : Apa itu Shorthand dalam CSS ?

Layout Dalam CSS

Layout dalam CSS itu adalah tata letak untuk mengatur tampilan seperti inginkan, contoh tata letak seperti halaman-halaman web, dan sebagainya. Dalam CSS, kita harus mengenal adanya properti-properti yang di gunakan mengeset layout dokumen web dengan menggunakan CSS.

Salah satunya adalah yang di kenal dengan properti yang saya sebutkan yaitu margin dan padding. Margin dan paddding dalam web yang di buat menggunakan tekhnologi CSS biasanya di gunakan untuk memformat tampilan layout situs.

Model format dengan style CSS dapat di artikan bahwa tiap-tiap elemen akan di kelilingi oleh tiga area yang berbeda. Area itu yang sering disebut adalah padding, borde, dan margin. Masing-masing entitas tersebut dapat di atur melalui property CSS yang menginjinkan para developer untuk secara singkat mengatur tampilan dan posisi dari setiap elemen HTML yang di buatnya.

Margin Dalam CSS

Margin adalah pemberian jarak atau batas pada suatu objek dengan objek yang berbeda di luar. Adapun nilai margin (garis tepi atau daerah pinggir) halaman web dapat kita atur besar dan letaknya melalui properti dari margin seperti "margin-top", "margin-bottom", "margin-right", dan "margin-left". Contoh penggunaan margin dalam mengeset dokumen web adalah sebagai berikut:

<html>
<head>
<title>Mengatur margin</title>
<style type="text/css">
body {margin-top:30; margin-bottom:30; margin-right:40; margin-left:40;}
</style>
</head>
<body>Bagaimana mengatur margin? <br>
Dengan menggunakan property margin
</body>
</html>

Anda dapat merubah niali sesuka hati anda yang berwarna hijau untuk mengatur tata letaknya. Jika di lihat atau di eksekusi di dalam browser maka akan terlihat seperti pada contoh gambar di bawah ini :

Dalam contoh di atas dapat di ketahui bahwa dokumen tersebut akan memiliki lebar margin atau garis tepi atas sepanjang 30 piksel, lebar garis tepi bawah sepanjang 39 piksel, garis tepi kanan 40 piksel, dan garis tepi kiri sepanjang 40 piksel.

Anda juga dapat memanfaatkan seluruh properti dengan menggunakan shorthand property, yaitu cara penulisan dengan menulis hanya velue-nya saja seperti di bawah ini :

<style="text/css">

body {margin: 30px 30px 40px 40px}

</style>

Border dalam CSS

Dalam CSS, anda dapat menyesuaikan lebar border dengan menggunakan property "border-top-width","border-left-width", "border-right-width" dan "border-bottom-width, anda dapat menentukan nilainya dengan menata suatu border dengan shortcut property "border-width". Contoh seperti di bawah ini:

<html>
<head>
<title> Mengatur Border </title>
<style type="text/css">
body {border-top-width: 30px; border-right-width: 30px; border-bottom-width: 40px; border-left-width: 40px;}
</style>
</head>
<body>
Bagaimana mengatur border?<br>
Dengan menggunakan property border
<body>
</html>

Dalam contoh script di atas, halaman web yang di buat akan menggunakan lebar border atas sebesar 30 pixel, lebar border kanan sebesar 30piksel, lebar border bawah sebesar 40 piksel, dan lebar border kiri sebesar 40 piksel. Anda dapat pula menentukan lebar keseluruhan border menggunakan script seperti :

body {border-width: 30px;}

anda dapat pula menentukan lebar border dengan kata bantu "thick","medium","thin", dan "none" seperti di bawah ini :

body {border-top-width: thick; border-right-width: medium; border-bottom-width: thin; border-left-width: none;}

atau, tentukan lebar keseluruhan border dengan menggunakan salah satu kata bantu yang ada, seperti contoh di bawah ini:

body {border-width: thick;}

Dalam CSS kita juga dapat mengatur warna border halaman web yang di buat dengan menggunakan property "border-color". Seperti terlihat dalam contoh berikut:

<html>
<head>
<title> Warna Border </title>
<style type="text/css">
body {border-color: green; border-width: 50px; background: lime;}
</style>
</head>
<body>
Bagaimana mengatur warna border?<br>
Dengan menggunakan Property border-color
</body>
</html>

Dalam contoh di atas, warna border akaan menjadi kuning dengan ketebalan border keseluruhan sebesar 10 piksel dan warna background lime. Sayangnya, property ini tidak di dukung dalam browser netscape, Namun jika anda menggunakan borwser internet explorer, akan terlihat berbeda cobalah lihat sendiri untuk hasilnya.

Padding Dalam CSS

Padding adalah pemberian jarak atau batas antara suatu objek dengan objek-objek yang berada di dalam objek tersebut. Padding dalam CSS dapat di atur menggunakan property pengaturan padding seperti padding-top padding-bottom padding-right, dan padding left perhatikan contoh script di bawah ini :

<html>
<head>
<title> Mengatur Padding </title>
<style type="text/css">
body {border-color: green; border-width: 50px; background: lime; padding-bottom: 30px; padding-top: 30px; padding-right: 40px; padding-left: 40px;}
</style>
</head>
<body>
Bagaimana mengatur padding? <br>
Dengan menggunakan property padding
</body>
</html>

Catatan: Untuk mengeksekusi di sarankan mengguakan browser firefox dan lihatlah hasilnya sendiri

Ok sampai di sini dulu untuk penjelasan mengenai layout, mudah-mudahan artikel ini dapat membantu anda semua. Salam Sukai Penulis

Apa itu Shorthand dalam CSS ?

CSS HTML 0

Saya yakin shorthand sudah tidak asing lagi bagi para programer, tapi yang sudah tahu biarkan saya menjelaskan apa yang di maksud dengan shorthand dan bagaimana penjelasannya. Baiklah saya tidak akan basa basi lagi silahkan simak di bawah ini.

Apa itu Shorthand ?

Sfesifikasi dalam CSS, di mana kita harus mengetikkan aturan-aturan css ke dalam style kadang membuat kita merasa jemu jika harus menuliskan seluruh aturan-aturan yang panjang tersebut untuk menyetting hanya sebuah area kecil saja dalam dokumen web yang di buat.

Namun jika anda menggunakan tekhnik shorthand css, akan memungkinkan anda untuk membuat berbagai style menggunakan sintaks yang lebih singkat yang di kenal dengan shorthand CSS atau shorthand Notation.

Shorthand CSS memungkinkan anda untuk menentukan nilai beberapa property sekaligus dengan menggunakan sebuah property tag, misalnya pada penggunaan property font yang memungkinkan anda untuk menentukan property font-style, font-variant, font weight, font-size, line-height, dan font-family dalam sebuah baris sintaks. Contoh:

<html>
<title>Menggunakan shorthand CSS</title>
<head>
<style>
H1 {
font-weight :bold;
font-size:16pt;
line-height:18pt;
font-family: Arial;
font-variant: normal;
font-stretch: normal;
font-size-adjust: none; }
</style>
</head>
<body>
<h1> Huruf ini akan tebal dengan jenis huruf arial sebesar 16 point </h1>
</body>
</html>

Jika di tulis dalam shorthand CSS, tag di atas akan terlihat seperti :

h1 {font:bold 16pt/18pt arial}

Sebagai perbandingan, tag H1 di bawah ini menggunakan sintaks longhand CSS.

Catatan: property font-variant, font-stretch, font-size-adjust, dam font-style telah di buat ke dalam nilai default

Tampilan script di atas jika di eksekusi maka tampilannya akan seperti di bawah ini.

Menggunakan Shorthand CSS memungkinkan anda untuk menempatkan hanya beberapa nilai saja dari property yang anda inginkan dalam sebuah style. Penempatan property dalam dokumen web di wakili oleh niali yang di pisahkan dengan spasi.

Sebagai contoh, dalam menyingkat penulisan pembuatan layout seperti margin, padding, dan border-width dengan shorthand css, anda dapat menjadikannya ke dalam margin-top-width, margin-right-width, margin-buttom-width, dan lain sebagainya dalam susunan property seperti top, right, bottom, dan left. Perhatikan contoh di bawah ini:

p {border-top-width: 1px; border-right-widht: 5px; border-bottom-width: 10px; border-left-width: 20px;}

Penulisan dapat di buat menjadi lebih singkat dengan menggunakan shorthand notation sehingga akan menjadi seperti di bawah ini:

p {border:1px red solid;}

Cara ini dapat juga di aplikasikan untuk border-top, border-right, dan sebagainya dengan hanya menetapkan dua nilai (seperti margin: 1em 10em;), di mana nilai pertama akan menjadi nilai untuk posisi atas dan posisi bawah, kemudian nilai kedua akan menjadi nilai dari posisi kiri dan kanan.

Property yang berhubungan dengan font juga dapat di jadikan satu dengan menggunakan property font seperti dalam contoh berikut, di mana nilai '/15' mengacu pada nilai untuk line height:

p {font: italic bold 1em/1.5 courier;)

Jika di terapkan dalam dokumen html maka akan menjadi seperti di contoh di bawah ini:

<html>
<title> Menggunakan shorthand CSS</title>
<head>
<style>
body {border: 1px, red, solid;}
p {font: italic bold 1em /1.5 courier;}
H1 {font: bold 16pt /18pt Arial;}
</style>
</head>
<body>
<p> Huruf ini akan tebal dan miring dengan line height 1,5 </p>
<h1> Huruf ini akan tebal dan jenis huruf arial sebsar 16 point </h1>
</body>
</html>

Ketika di tulis menggunakan shorthand notation, nilai lain akan di abaikan secara otomatis dan menetapkan nilai default untuk nilai yang di abaikan tersebut. Jika anda memiliki style yang di tentukan lebih dari satu lokasi, sebaiknya berhati-hati jika anda mengabaikan property tersebut karena jika terdapat aturan CSS yang berlawanan maka akan dapat mengakibatkan adanya property yang bertumbuk sehingga akan merusak tampilan yang di buat.

Sebagi contoh adalah style CSS yang akan di ikutkan dalam halaman HTML dan style yang di impor dari external style sheet menggunakan sintaks CSS shorthand dan longhand.

Jika anda menggunakan program HTML editor yang bersifat visual seperti Macromedia Dreamweaver maka style CSS yang di buat akan menggunakan longhand CSS, Longhan CSS yaitu menuliskan secara penuh atribut dan property CSS secara lengkap tanpa penyingkatan seperti pada shorthand css.

Jadi ada baiknya jika anda saat ini membuat style CSS menggunakan notepad dan nantinya akan di olah lebih lanjut menggunakan program Micromedia Dreamweaver tersebut agar membuat style CSS menggunakan longhand CSS, yaitu menuliskan aturan-aturan yang di buat dalam CSS tanpa penyingkatan.

Tampilan script di atas akan seperti ini bila di eksekusi di internet exproler, mozila fire fox maupun di browser lainnya.

Nah itulah pembahasan kali ini mengenai Shorthand dalam CSS, semoga adanya artikel ini bisa bermanfaat untuk kita semua. Salam Sukai Penulis

Pengelompokan Dan Nesting Dalam CSS Dalam HTML

CSS HTML PHP 0

Pembahasan kali ini adalah pengelompokan dan nesting dalam CSS, berikut penjelasannya dan pembahasannya, semoga anda dapat memahami apa yang kami sampaikan di bawah ini, baiklah simak penjelasannya.

Pengelompokan Dan Nesting dalam CSS

Dalam dookumen web yang di buat menggunakan syle kita dapat memformat berbagai aturan yang di buatnya menjadi makin ramping sesuai dengan keinginan kita. Adapun format untuk style CSS tersebut berupa :

1. Pengelompokan atau Grouping

Dalam Css kita mengenal adanya pengelompokan atau grouping, pengelompokan di sini berfungsi untuk mengelompokan berbagai selector ID atau Class yang memiliki nilai property yang sama. Anda dapat memberikan propety yang sama tersebut ke dalam sejumlah selector tanpa harus mengulang penulisannya dengan membagi selector-selector tersebut dengan koma (,).

Pengelompokan dalam CSS berfungsi untuk menyingkat berbagai penulisan dari aturan-aturan yang menyingkat berbagai penulisan dari aturan-aturan yang banyak hingga membentuk aturan baru yang jauh lebih singkat. Berikut ini adalah contoh mengelompokan tag yang memiliki nilai yang sama :

<style type="text/css">
p {background-color:yelow;}
b {background-color:yelow;}
i {background-color:yelow;}
</style>

Dengan demikian, dalam pengelompokan menggunakan CSS penulisannya dapat di ringkas menjadi :

<html>
<head>
<title>Pengelompokan tag</title>
<style type="text/css">
p, b, i {background-color: yelow;}
</style>
</head>
<body>
<p> pengelompokan dengan tag p</p>
<b> pengelompokan dengan tag b</b>
<i> pengelompokan dengan tag i</i>
</body></html>

Maksud aturan di atas adalah CSS akan memberikan nilai p yang di dalam dokumen HTML seharusnya adalah format untuk membuat paragraf, namun juga memiliki nilai warna background-biru yang sama dengan tag b (bold atau tebal) dan i (italic atau miring) seperti terlihat browser Netscape berikut :

Bila kita menerapkan pengelompokan tersebut dalam selector class, ID dan tag scriptnya akan seperti berikut ini :

<style type="text/css">
p {font-family: Arial, Verdana;}
.teks1 {font-family: Arial, Verdana;}
#teks2 {font-family: Arial, Verdana;}
</style>

Dengan demikian, dalam pengelompokan dengan CSS, penulisannya akan menjadi seperti script di bawah ini :

<html>
<head>
<title>pengelompokan tag </title>
<style>
.teks, .title, #teks2 {font-family:verdana; background-color:yellow;}
</style>
</head>
<body>
<span class="teks">pengelompokan dengan tag p </span><br>
<span class="title">pengelompokan dengan class teks1</span><hr>
<div id="teks2">pengelompokan dengan class teks2</div>
</body>
</html>

Penampakannya akan terlihat seperti di bawah ini :

2. Nesting

CSS memiliki struktur bahasa yang baik sehingga dapat di manfaatkan untuk menyingkat style CSS agar lebih efisien dalam dokumen web yang di buat menggunakan CSS. Anda tidak membutuhkan class atau ID selector yang terlalu banyak untuk membuat sebuah dokumen web dengan bantuan CSS karena anda dapat menentukan property dari selector untuk di tempatkan dalam selector lain.

Contoh :
#atas {background-color: #ccc; padding: 2em}
#atas h1 {color: #ff0;}
#atas p {color: red; font-weight: bold;}

Dengan menghilangkan kebutuhan akan class atau ID yang cukup banyak tersebut, anda dapat menyingkatnya dengan menggunakan cara nesting sehingga dalam penulisaanya akan menjadi lebih singkat seperti berikut :

<div id="atas">
<h1> menyingkat CSS dengan nestingM</h1>
<p> penyingkatan ini menggunakan cara nesting </p>
<p> mudah sekali ya .. </p>
</div>

Dengan cara ini, memisahkan selector dengan spasi dapat berarti bahwa h1 berada dalam ID atas, yang memiliki nilai warna latar #ccc dan warna isi #ff0 dalam h1, serta penambahan tag p dalam ID atas yang berarti merah dan tebal.

Cara ini dapat di terapkan lebih dari dua tingkatan seperti di dalam dan di dalamnya ID atau class tertentu yang anda inginkan hingga di akhiri dengan penutup </div> seperti contoh di atas.Adapun script keseluruhan jika anda menggunakan nesting dalam HTML bisa anda lihat di bawah ini :

<html>
<title>Nesting</title>
<head>
<style>
#atas {background-color: #ccc; padding:2em}
#atas h1 {color: #ff0;}
#atas p {color: red: font-weight: bold;}
</style>
</head>
<body>
<div id="atas">
<h1> menyingkat CSS dengan nesting </h1>
<p> penyingkatan ini menggunakan cara nesting</p>
<p> mudah sekali ya..</p>
<div>
</body?
</html>

Contoh Script yang di atas bila di eksekusi akan seperti di bawah ini :

Nah itu lah pembahasan mengenai pengelopokan dan nesting dalam css, semoga artikel ini dapat membantu anda dan bermafaat khusunya bagi yang membaca dan juga untuk penulis, sampai di sini pembahasannya, Salam Sukai Penuli

Inheritance, Pseudo Classes, Pseudo Element dan Selektor Kontekstual

CSS HTML PHP 0

Jika di artikel sebelumnya membahas Selector. Class Selector, dan ID selector, nah kali ini saya akan memenuhi janji yang membahas tentang Inheritance, Pseudo Classes, Pseudo Element, dan Selektor Kontekstual, Untuk penjelasan yang lebih lengkap anda bisa membaca artikel ini sampai akhir.

Pewarisan atau Inheratance

Yang di maksud dengan pewaris atau inheratance di sini adalah satu kondisidi mana bagian-baian HTML dalam dokumen kita yang kekurangan dalam spesifikasi aturan CSS dapat mengikuti atau di buat menurut aturan CSS yang menutupinya.

Setiap aturan yang tidak ada dalam format yang di buat dengan HTML atau ingin menggantikannya dengan aturan CSS, tetap akan memengaruhi huruf yang ada di dalam kurungan CSS. Di bawah ini adalah contoh kode script inheritance:

<html>
<head>
<title> Inheritance </title>
<style type="text/css">
B {background-color : green; color : white;}
</style>
</head>
<body>
<B>
Belajar membuat web dengan<font size="1"><em>CSS</em></font> Sangatlah mudah.
<br>
Hanya dengan program notepad pun jadi
</B>
</body>
</html>

Jika di lihat dari contoh di atas dapat di lihat bahwa tag <B> dalam aturan CSS akan mendefinisikan warna font dan warna latar dari font sedangkan tag <B> dalam HTML bisa di artikan sebagai bold atau format untuk menebalkan huruf.

Sementara tag <font> yang berada dalam lingkup CSS dapat menerapkan aturan HTML dasar akan tetapi teteap terpengaruh dengan kondisi warna dan tebalnya huruf dari aturan CSS yang melingkupinya. Cara ini dapat anda gunakan untuk di kombinasikan lebih lanjut dengan tag-tag lain agar sesuai dengan keperluan dokumen anda.

Berikut adalah penampakan dari kode script di atas :

Pseudo Classes

Pseudo Classes dalam CSS di buta tebal dalam selector-selector untuk menentukan sebuah statemen atau relasi selector penulisannya pun hanya di pisahkan dengan sebuah tanda titik dua, yaitu di antara selector dan pseudo dan class.

Adapun contoh format penulisaanya adan bisa lihat di bawah ini

selector:pseudo class {property :value; }

Banyak format css yang tidak di dukung oleh kebanyakan browser, tetapi terdapat 4 (empat) pseudo classes yang dapat di gunakan secara aman ketika di aplikasikan ke dalam hyperlink atau link, inilah di antaranya ke 4 (empat) pseudo classes itu :

Link	:	Untuk tampilan sebuah link yang belum di kunjungi
Visited	:	Untuk tampilan sebuah link ke halaman yang telah di kunjungi
Acrive	:	Untuk tampilan sebuah link yang sedang aktif (ketika di klik)
hover	:	Untuk tampilan sebuah link yang hover (ketika cursor melintas di atasnya

Contoh penggunaan :

a.snowman:link {color:blue;}
a.budi.visited {color:puple;}
a.budi.active {color:puple;}
a.budi.hover {text-decoration:none; color : blue; background-color:yellow;}

Anda dapat menggunakan hover pseudo class dengan elemen-elemen lain selain link. Sayangnya, Internet Explorer masih tidak mendukung metode ini karena banyak tampilan yang dapat anda buat dan terlihat bagus dalam browser lain, tetapi tidak terlihat dengan menggunakan browser ini.

Pseudo Element

Pseudo Element dalam CSS di tempatkan dalam sebuah selector sama seperti pada pseudo classes. Penulisannya akan seperti contoh berikut di bawah ini :

selector:pseudoelement {property:nilai;}

Contoh seting huruf dan baris pertama:

Pseudo element pada huruf pertama di aplikasikan elemen dari huruf pertama dan baris pertama pada atas baris sebuah elemen. Anda dapata membuat huruf besar dan huruf tebal baris pertama pada paragraf dengan menggunakan perintah berikut di bawah ini :

p:first-letter {font-size:5px; float:left;}

p:first-line {font-weight:bold;}

Before And After dalam Pseudo Element

Pseudo Element before dan after di gunakan dengan property content untuk menempatkan isi dari sebuah elemen tanpa menyentuh kode HTML. Nilai dari property content ini dapat berupa open-quote, close-quote, no-open-quote, no-close-quote, berbagai string yang di sertakan dalam tanda kutip, atau berbagai image gambar menggunakan url (Nama Image) seperti contoh di bawah ini :

blockquote:before {content: open-quote;}

blockquote:after {content: close-quote;}

li:before {content: "POW: "}

p:before {content: url(images/jam.jpg)}

Selecktor Kontekstual (Contextual Selector)

Selektor kontekstual dalam CSS hampir sama dengan pernyataan-pernyataan kondisional di mana deklarasi dalam style-sheet CSS yang ada akan berpengaruh jika menemui kondisi atau keadaan tertntu. Contoh dari slector kontekstual adalah sebagai berikut :

<html>
<head>
<title> Selecktor Kontekstual </title>
<style type="text/css">
b em {font-family: verdana; background: blue; color : white;}
</style>
</head>
<body>
<b>
Belajar membuat web dengan <em>CSS</em> Sangatlah mudah.
<br></b>
<em>Hanya dengan program notepad pun jadi
</em>
</body>
</html>

Dalam contoh di atas dapat di lihat bahwa dokumen web tersebut akan menerapkan style CSS tersebut pada dokumen yang berada dalam tag <em> (font verdana, warna lata biru dan font berwarna putih) di mana tag <em> tersebut berada di dalam tag <b> dan </b> (bold atau tebal).

Sementara tag <em> yang berada di style tersebut atau hanya memiliki nilai <em> biasa atau huruf miring. Jika di lihat dalam browser maka penampakannya adalah seperti gambar di bawah ini berikut:

Nah itu lah penjelasan mengenai Inheritance, kemudian Pseudo Classes, kemudian Pseudo elent, dan terakhir adalah Selektpr Kontekstual, semoga penjelasan di atas bisa mudah di pahami, okeh sampai di sini dulu perjumpaan kita. Sampai jumpa salam Sukai Penulis

Jenis-jenis badan Html serta atribut lainnya (Lengkap) Bagian ke 2 (dua)

HTML Pemula 0

Di artikel sebelumnya saya sudah membahas tentang Jenis-jenis badan html serta atribut lainnya namun itu hanya separuhnya, di artikel yang ini adalah sambungan atau kelanjutan di artikel sebelumnya.

Mengapa di artikel sebelumnya tidak lengkap? Karena saya kemarin malam itu telah kehabisan bensin, maksudnya ngantuk maka sekarang adalah mengganti artikel sebelumnya. Baiklah mari simak pembahasan kali ini dengan kelanjutan bagian ke 2.

Baca Juga : Jenis-jenis Badan Html serta atribut lainnya (Lengkap) Bagin ke1 (satu)

Di artikel kali ini yang akan di bahas mengenai Jenis-jenis html serta atribut lainnya adalah berikut point-pintnya :

Hyperlink

Link ke halaman lain
Link ke service Internet lain

Warna

Nilai warna Common Name
Nilai Warna Hexadecimal
Nilai Warna RGB

Tabel dan Form

Apa itu Hyperlink?

Hyperlink adalah menghubungkan halaman satu ke halaman lain dan bisa saling berhungan atau bisa membuat link yang satu ini berpindah ke halaman lain, hyperlink ini sering di gunakan untuk orang pemula maupun orang profesional, lihatlah di google contoh kecil : http://sukaipeulis.blogspot.com

Hyperlink atau link dalam html berfungsi menghubungkan ke halaman web atau dokumen satu dengan laiinya agar saling terhubung. Sintaks dasar penulisannya adalah:

Link dalam html di bagi menjadi dua, yaitu :

1. Link Ke Halaman Lain

Sintaks:

<a href="alamat_file"/nama.ekstensi"> Hyperlink ke halaman </a>

Contoh :

<a htef="c:/web/profil.html">Profil Perusahaan </a>

2. Link Ke Service Internet Lain

Http:

<a href="http://alamathttp/nama.ekstensi"> Hyperlink Ke Http </a>

Ftp:

<a href="ftp://alamatftp/nama.ekstensi"> Hyperlink Ke Http </a>

Mail:

<a href="mailto:alamat_email/nama.ekstensi"> Hyperlink Ke Http </a>

Warna

Warna dalam html dapat di tentukan dengan tiga cara, yaitu dengan memasukan nilai warna dalam nama (common name), hexadecimal, dan nilai RGB.

Nilai Warna Common Name

color: blue bgcolor:lime

Nilai Warna Hexadecimal

color:#00ffff bgcolor:#00cff

Nilai Warna RGB

color:rgb(255,255,204)

Tabel

Tabel menggunakan elemen yang terdiri dari sel dan tersusun atau baris dan kolom, tabel di gunakan untuk membuat bentuk tabel yang berisi kolom dan baris.

Sintaksnya adalah :

<table>atribut table</table>

Atribut tabel adalah:

<tr>...</tr> : Membentuk baris tabel
<td>...</td> : Membentuk kolom tabel

Tabel juga memiliki atribut untuk pengaturannya, yaitu :

width : Lebar tabel
height : Tinggi tabel
border : Tebal garis tabel
cellspacing : Spasi antar sel
cellpaddig : Spasi dalam sel
align : Perataan teks dalam sel
bgcolor : Warna background tabel

Di antara tag tersebut di masukan perintah pembuatan baris dan kolom. Pembuatan baris selalu mendahului pembuatan kolom, sperti terlihat dalam contoh berikut :

<html>
<head>
<title> Membuat Tabel </title>
</head>
<table width="300" border="1" bgcolor="grey">
<tr>
<td width=100>Kolom1 baris 1</td>
<td>Kolom2 baris1</td>
</tr>
<tr height=80>
<td>Kolom1 baris 2</td>
<td>Kolom2 baris 2</td>
</tr>
</table>
</body>
</html>

Penampakannya akan seperti gambar di bawah ini:

Form

Form dalam Html dapat di gunakan untuk mengirim data melewati web dan kadang di gunakan sebagai contact form untuk konversi informasi yang di inputkan oleh pengguna ke dalam e-mail.

Dalam penggunaan pada dokumen web, form harus di kaitkan dengan script progam yang akan memproses data yang di inputkan oleh pengguna ke dalam form tersebut.

Tag-tag yang di gunakan untuk membuat form dengan html berupa :

form, input, textarea, select, dan option.

Dalam Html, penulisan form dengan html membutuhkan antibut action yang akan menentukan kemana isi dari form yang akan di kirim nantinya. Atribut method akan menentukan bagaimana data dalam form yang memiliki nilai get (nilai default) atau post tersebut di kirim, di mana nilai-nilai tersebut adalah nilai yang paling banyak di pakai.

Dengan demikian, sebuah elemen form terlihat seperti contoh di bawah ini :

Tag input adalah inti dari sebuh form, di mana tag input dapat memiliki sepuluh form dan harus di tutup dengan tanda miring "/" perhatikan contoh di bawah ini :

<input type="text" />, adalah textbox standar. Tag ini dapat memiliki sebuah atribut value, yang mengatur teks dalam textbox.
<input type="password" />, sama dengan textbox, tetapi menampilkan tanda bintang yang menggantikan karakter yang di ketikan.
<input type="checkbox" /> adalah bentuk checkbox, yang dapat di tampilkan dan tidak oleh pengguna. Tag ini memiliki sebuah atribut checked, yang di gunakan dalam format <input type="checkbox" checked="checked" />.
<input type="radio" />, hampir sama dengan checkbok, tapi pengguna hanya dapat memilih sebuah radio button dalam kelompok tersebut. Tag ini juga memiliki atribut checked, yang di gunakan sama dengan checkbox.
<input type="file" /> adalah suatu daerah yang menampilkan file-file dalam komputer seperti ketika anda membuka atau menyimpan dokumen dalam program.
<input type="submit" /> biasanya berada pada sebuah tombol di mana ketika di pilih, akan mengirim (submit) form tersebut. anda dapat mengontrol penampakan text dalam tombol submit (sama seperti dalam tipe button dan reset) dengan atribut value. Perhatikan contoh berikut : <input type="submit" value="ini adalah nilai tombol"/>.
<input type="button" /> adalah sebuah tombol (butto) yang tidak akan melakukan apapun tanpa penambahan kode ekstra lagi.
<input type="reset" /> adalah sebuah tombol di mana ketika di pilih akan mengulang kembali (reset) field dalam form.
<input type="hidden" /> adalah sebuah field yang tidak akan terlihat dan di gunakan untuk melewatkan informasi seperti nama alamat e-mail pada form yang akan di kirimkan.

Sebuah textarea biasanya berupa textbox yang luas yang membutuhkan atribut baris (rows) dan kolom (cols), seperti pada contoh di bawah ini :

tag select bekerja dengan tag option dalam pembuatan sebuah drop-down select boxes, seperti pada contoh di bawah ini :

<select>
<option value="opsi pertama">Option 1 </option>
<option value="opsi kedua">Option 2 </option>
<option value="opsi ketiga">Option 3 </option>
</select>

Ketika form di kirimkan, nilai dari opsi yang terpilih juga akan di kirimkan. Hampir sama dengan atribut checked dari checkbox dan radio button, sebuah tag option dapat pula memiliki atribut selected yang akan di gunakan dalam format :

<option value="hewan" selected="selected">kucing</option>

Keseluruhan tag yang di sebutkan di atas akan terlihat bagus dalam halaman web. Namun jika anda mengaitkan form anda dalam sebuah program form maka perintah yang ada di dalamnya akan di abaikan.

Hal ini di sebabkankarena filed form tersebut memerlukan sebuah nama (name). Jadi atribut name harus di tambahkan dalam field, seperti contoh di bawah ini :

Dalam contoh berikut, form akan bekerja jika terdapat file "koneksi.php" yang di tetapkan dalam atribut action dalam tag form untuk menangani file dalam form yang di kirimkan.

<html>
<head>
<title>Belajar form</title >
</head>
<body>
<form action="koneksi.php" method="post">
<p>Nama : </p>
<p><input type="text" name="nama" value="nama anda" /> </p>
<p>Komentar : </p>
<p><input type="textarea" name="komentar" rows="5" cols="20"> Komentar Anda </textarea> </p>
<p>data : </p>
<p><input type="radio" name="data" value="Laki-laki" /> Laki-laki </p>
<p><input type="radio" name="data" value="Perempuan" /> Perempuan </p>
<p><input type="submit" value="kirim" /></p>
<p><input type="reset" value="ulangi" /></p>
</form>
</body>
</html>

Tampilan dalam browser jika anda mengeksekusi kode di atas maka penampakanya akan seperti :

Catatan : Simpan kode tersebut dengan format (.Html)

Nah itulah Jenis-jenis badan html serta atribut lainnya bagian ke 2 (dua), untuk bagian kedua nanti saya up to date, semoga artikel ini bisa membantu dan juga bermanfaat. Salam Sukai Penulis

Jenis-jenis badan Html serta atribut lainya (Lengkap)

HTML Pemula 0

Assalamua'laikum semoga malam, siang, pagi, selalu di berikan perlindungan untuk kita semua oleh tuhan kita menurut kepercayaan masing-masing, saya memang tidak punya potensi untuk menulis artikel seperti para penulis master bloger, tetapi apa salahnya saya hanya berbagi info serta pengalaman saya di artikel ini.

Percaya tidak, saya di sini sebagai admin di blog ini, semoga dengan datangnya artikel ini dan apa yang anda cari bisa ada di sini, baiklah teman-teman saya akan jelaskan dan apa saja jenis-jenis badan html serta artibut yang ada di badan html ini.

Baca juga : Apa itu html dan penjelasannya

Jenis-jenis badan html itu ada beberapa macam yaitu :

Documen Head :

Judul
Url
Link
Meta
Index
Style

Atribut Body:

Warna latar
Warna Text
Warna Link

Format Teks:

Font
Paragraf
Perataan
Preformatted Text
Line Break
Komentar
Format Heading

Daftar :

Membuat daftar berurutan
Membuat daftar tidak berurutan

Gambar

Nah itulah jenis-jenis yang ada di badan html, penjelasannya saya akan jelaskan di bawah ini dengan satu syarat anda perlu membacanya dan jangan sampai bosan dan merasa jenuh membacanya, berikut penjelasannya :

Catatan : Bacalah dengan teliti

Dokumen Head

Dalam head ini dapat di letakan beberapa tag di antara <head> dan </head>, berikut adalah yang ada di dalam dokumen head :

1. Judul

Merupakan tag yang mendeklarasikan judul dari suatu dokumen Html. Struktur tag untuk judul ini adalah :

<title> Judul </title>

2. URL

Merupakan tag yang menyatakan URL asal suatu dokumen html. struktur tag untuk url asal adalah :

3. Link

Merupakan tag untuk menghubungkan antara suatu dokumen dengan dokumen lainnya dalam website yang di buat. Struktur tag untuk menghubungkan dokumen adalah :

4. Meta

Merupakan tag yang menyatakan suatu meta informasi dalam suatu dokumen html. Struktur tag untuk meta informasi adalah :

5. Index

Merupakan tag menyatakan bahwa dokumen tersebut di perkenankan di indeks oleh server web. Struktur tag untuk isi index adalah :

6. Style

Merupakan tag yang mendefinisikan style dari dokumen html. Struktur tag untuk mendefinisikan style adalah :

Contoh penggunaan dalam html:

<html>
<head>
<title>Belajar Html </title>
<link href="global.css" rel="stylesheet" type="text/css">
</head>
<body>
Isi Dokumen HTML
</body>
</html>

Atribut Body

Bagian body dalam html adalah bagian di mana dokumen web akan terlihat dalam browser. Bagian ini dapat berisi atribut-atribut, aturan, dan isi dari dokumen web yang akan di tampilkan.

Penulisan atribut body ini biasanya di tuliskan sesudah tag "<body" dan sebelum ">" ataupun sesudah tag <body> dan sebelum tag <body>.

Dalam bagian body tersebut terdapat beberapa atribut yang bisa di gunakan, diantaranya:

1. Latar Belakang

Atribut tag di gunakan untuk mendefinisikan warna latar untuk isi di dalam dokumen web dengan menuliskan "bgcolor=nilai warna".

Contoh : <body bgcolor="line">

2. Warna Teks

Atribut tag di gunakan untuk mendefinisikan warna teks untuk isi di dalam dokumen web dengan menuliskan "teks=nilai warna".

Sebagai Contoh : <body text="green">

3. Warna Link

Jika anda memiliki sebuah tombol untuk menghubungkan (link/hyperlink) dalam dokumen web yang anda buat dengan dokumen web lainnya, Anda dapat mendefinisikan warna dari tombol link tersebut ketika anda klik menggunakan tag:

Sebagai contoh : <body link ="green" alink="gray">

Catatan : Jika di eksekusi gagal, cobala ganti tulisan "alink" dengan "link"

Contoh penerapan dalam dokumen html:

<html>
<head>
<title>Dokumen Body</title>
</head>
<body bgcolor="lime" text="green" link="white" alink="grey">
teks berwarna lime<br>
<a href=#> tombol1<a/>
<a href=#> tombol2<a/>
</body>
</html>

Dalam browser script di atas akan terlihat dua tombol, yaitu tombol1 dan tombol2. Ketika tombol tersebut anda klik maka akan berubah menjadi hijau seperti terlihat pada gambar berikut:

Format Teks

Dalam dokumen html, teks mempunyai bentuk dalam pemformatan dalam dokumen tersebut. Berikut adalah beberapa tag beserta fungsinya untuk melakukan pengaturan dan format tampilan teks dalam dokumen Html.

1. Font

Dalam setting format teks, tag font di sini memiliki beberapa macam nilai, di antaranya :

Face atau jenis font
size atau ukuran font
color atau warna font
style atau syle font

Contoh penulisan sintaksnya adalah :

<font face="verdana" size="4 px" color="green" style="background color :"#0066cc"> teks dokumen </font>

2. Paragraf

Paragraf di gunakan untuk membuat teks dokumen yang berbentuk paragraf. Sintaknya adalah :

<p> teks dalam paragraf </p>

3. Perataan

Tag ini digunakan untuk mengatur perataan teks dalam sebuah paragraf dalam dokumen web yang di buat. Adapun sintaksnya adalah :

<align=...>teks

Nilai dari perataan adalah :

Rata kanan = "right"
Rata kiri = "left"
Rata tengah = "center"
Rata kanan-kiri = "justify"

4. Preformatted Text

Digunakan untuk mengembalikan format teks ke posisi awal atau posisi default pertama kali sebelum di format. Sintaks penulisan preformatted teks adalah :

5. Line Break

Line break adalah pemenggalan atau pemutusan kalimat dengan menggunakan garis dengan perintah <hr>. Adapun property <hr> adalah "align" untuk perataan garis "size" untuk ukuran dari garis, dan "color" untuk warna garis seperti pada contoh berikut :

Dalam pemenggalan kalimat dalam dokumen web selain menggunakan garis horizontal, anda dapat menggunakan tag <br> untuk pemenggalan baris dalam sebuah kalimat.

<p> Kalimat satu<br> kalimat dua <br></p>

Catatan : Biasanya tag ini di gunakan pada kalimat dalam paragraf

6. Komentar

Anda dapat memberikan komentar dalam dokumen web yang tidak akan di tampilkan dalam browser menggunakan perintah berikut:

<!-- Komentar --!>

7. Format Heading

Heading dalam html sama seperti dalam Microsoft Word, yaitu format ukuran huruf dalam dokumen html. Sintak penulisannya adalah:

<H1> Teks Heading </H1>

Teks yang di hasilkan ketika menggunakan script ini adalah ukuran teks menurut level heading, yaitu dari level heading 1 <H1> sampai dengan level heading 6 atau <h6>

Contoh penerapan dalam Html :

<html>
<head>
<title> Sukai penulis web blog system </title>
</head>
<H1> Format Teks </H1>
<font face="verdana" size="4 px" color="green" style="background-color:"#0066cc"> Format teks
</font>
<p align="right">Format teks</p>
<hr align="center" size="2" color="red">
<p align="left"> Format Teks1 <br> Format Teks2<br></p>
<!-- Format Teks --!>
</body>
</html>

Tampilan dalam browser akan terlihat seperti gambar di bawah ini :

Daftar

Penggunaan daftar dalam Html biasanya di gunakan untuk menampilkan informasi-informasi dalam bentuk opsi.

1. Membuat daftar tak berurut

Sintaks:

<UL>...</UL> : Untuk membuat daftar tak berurutan

<Li>... </Li> : Isi daftar pilihan

2. Membuat daftar tak berurut

Sintaks:

<OL>...</OL> : Untuk membuat daftar tak berurutan

<Li>... </Li> : Isi daftar pilihan

Anda dapat pula mengubah type daftar menggunakan <ol type ="awalan"> seperti contoh berikut :

<html>
<head>
<title> Penggunaan Daftar </title>
<body>
Daftar Belanjaan :
<ul>
<li>Bawang Putih</li>
<li>Bawang Putih</li>
<li>Cabe</li>
</ul>
Yang Tidak Di Beli :
<ol type=a>
<li>Kecambah</li>
<li>Daging Kuda</li>
<li>Daging Semut</li>
</ol>
</body>
</html>

Gambar

Gambar atau image dalam halaman web memegang fungsi yang sangat penting. Selain untuk informasi gambar, image berfungsi menambahkan unsur artistik yang akan sisi tampilan web yang di buat akan lebih menarik. Sintaks penulisannya adalah sebagai berikut :

Adapun atribut untuk gambar tersebut berupa :

Src : Letak atau alamat gambar
Alt : Alternatif atau alternate gambar
Width : Lebar gambar
Height : Tinggi gambar

Contoh :

Nah itulah Jenis-jenis badan html serta atribut lainnya bagian pertama, untuk bagian kedua nanti saya up to date, semoga artikel ini bisa membantu dan juga bermanfaat. Salam Sukai Penulis

Apa itu HTML? (Lengkap) Untuk pemula

HTML Pemula PHP 0

Halo kembali lagi dengan web Sukai Penulis, admin mengatakan selamat menjalankan aktivitas seperti biasanya, para pengusaha, para blogger, para pencari kerja, para pencari ilmu dan lainnya.

Di sini saya ingin berbagi ilmu mengenai tentang apa itu HTML? Para IT tentunya sudah tahu apa yang di maksud dengan HTML, tetapi apa salahnya saya berbagi dengan pengalaman saya mengenai HTML tersebut, yah baiklah karena waktu itu terbatas jadi saya akan menjelaskan sebisa mungkin untuk para bos (pencari ilmu), simak penjelasan sebagai berikut di bawah ini.

Catatan : Untuk para pembuka halaman ini telitilah saat membacanya

Apa itu HTML ?

HTML (Hypertext Markup Languange) adalah sebuah protokol yang di gunakan untuk membuat format suatu dokumen web yang mampu di baca dalam browser dari berbagai platform komputer.

Sifat bahas HTML ini adalah client script, di mana dokumen tersebut dapat di buka dalam komputer stand alone yang tidak membutuhkan server untuk dapat menampilkannya di dalam browser.

Dokumen HTML merupakan file yang pada umumnya beresktensi (.htm atau .html), di mana bahasa html tersebut tersusun atas tag yang berformat <isi tag>. Aturan penulisan HTML adalah sebagai berikut :

Dalam penulisannya, tag HTML diapit dengan dua karakter kurung siku "< dan >".
Tag HTML secara normal selalu berpasangan.sebagai contoh : <div> dan </div>
Tag HTML pertama dalam suatu pasangan adalah tag awal dan tag kedua merupakan tag akhir. Sebagai contoh : <index> akan di akhiri dengan </index>.
Tag HTML tidak case sensitive, di mana tag dengan huruf kecil sama dengan tag dengan huruf besar. Sebagai contoh : <b> sama dengan <B>.
Jiika dalam suatu tag terdapat tag lagi maka penulisan tag akhir boleh bersilang dan harus berurutan. Sebagai contoh : <b><i> huruf tebal dan miring </i></b>.
Penulisan script HTML selalu di awali dengan <html> dan di akhir dengan </html>.

Secara teknis, web browser akan melakukan penerjemahan dokumen untuk di tampilkan dalam bentuk HTML jika dokumen tersebut terdapat di antara tag <html> dan </html>. Ada baiknya dalam penulisan HTML menggunakan huruf kecil untuk menghadapi HTML generasi berikutnya (di rekomendasi dari w3c untuk HTML 4.0 dan XHTML).

Dalam HTMl, struktur di bagi menjadi dua bagian, di antara HTML ini anda harus tahu, lihat di bawah ini:

Bagian (head) : Bagian ini memuat informasi mengenai kepala dokumen.
Bagian Badan (body) : Bagian ini memuat informasi mengenai badan dokumen.

Contoh struktur utama penulisan dalam HTML adalah sebagai beriku :

<html>
<head>
<title>Belajar html </title>
</head>
<body>
belajar html
</body>
</html>

Pembuatan dokumen web menggunakan HTML sangat mudah anda dapat membuatnya menggunakan program editor standar windows, yaitu Notepad dengan menuliskan bahasa dan aturan HTML-nya.

Kemudian simpan dalam ekstensi ( .htm atau .html) melalui menu Start - Program Files - Accessories - Notepad kemudian setelah terbuka halaman notepad anda ketikan kode html ke dalam halaman tersebut seperti contoh di atas.

Kemudian simpan dengan memilih menu file - Save As nanti akan muncul form untuk mengganti nama file yang anda tulis di notepad setelah sudah mengganti nama pilih tombol save di sebelah kanan.

Catatan : Nama filenya harus format ( .htm atau .html).

Setelah proses dokumen html dari script yang telah di buat tersebut dan penyimpanan sudah selesai, maka selanjutnya anda lihat menggunakan web browser seperti internet Explorer, Netscape, Navigator, Mozilla Firefox, opera, google chorme, dan sejenisnya.

Halaman yang anda buat seperti script di atas hasilnya akan seperti di bawah ini:

belajar html

Script tadi adalah script yang sangat sederhana dan simple karena script tersebut menunjukan bahwa akan menampilkan tulisan dan title yang berbeda.

Nah itulah penjelasan mengenai apa itu HTML semoga dengan adanya artikel ini bisa menjadi bermanfaat, ilmu itu tidak harus sekaligus banyak nanti ilmunya minggat dari otak, lebih baik sedikit demi sedikit menjadi bukit dari pada banyak lalu tinggal secuil. hehe maaf becanda okeh saya pamit sampai jumpa salam Sukai Penulis.