Kesalahan yang sering Dilakukan dalam Menulis HTML

Assalamualaikum, Wr. Wb.

Alhamdulillah bisa posting artikel lagi di Webhozz BlogO, iya langsung saja.

Pada artikel ini, kita akan membahas sedikit tentang HTML. Ya, mungkin untuk teman-teman programmer web tidak asing mendengarnya. Karena HTML itu, merupakan suatu bahasa yang paling pertama untuk dipelajari dalam membangun sebuah website. HTML ini juga merupakan kerangka utama dalam membuat sebuah website yang mana HTML bisa diibaratkan saat kita membangun rumah, kita punya pondasi utama seperti tiang, atap, pintu, jendela dan lain-lain. Untuk menghiasi pondasi tersebut dibutuhkanlah CSS untuk mempercantik pondasi tersebut agar terlihat lebih baik.

Continue reading

Mengenal CSS

 

Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai pengenalan CSS, nah biar pada nggak bingung langsung aja yuk kita masuk ke pembahasan bermain dengan controllers codeigniter sobat Webhozz.

CSS (Cascading Style Sheet) berguna untuk menentukan tema tampilan dari sebuah website. CSS merupakan bahasa Continue reading

HTML Layouts

Website sering menampilkan konten dalam beberapa kolom (seperti majalah atau koran).
tata letak html menggunakan elemen.Div elemen sering digunakan sebagai alat tata letak,
karena dengan mudah dapat diposisikan dengan CSS.
Contoh ini menggunakan 4 div elemen untuk membuat tata letak beberapa kolom:

kode html nya seperti berikut:

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Copyright © W3Schools.com
</div>

lalu kode css seperti ini:

 
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style> 

maka hasinya akan sperti ini:
Layout-1

HTML Lists

Unordered lists dan ordered lists yang umum digunakan dalam HTML:

Unordered List
The first item
The second item
The third item
The fourth item

Ordered List
The first item
The second item
The third item
The fourth item

-Unordered HTML Lists

unordered list dimulai dengan tag ul. Setiap daftar item dimulai dengan tag li.

Daftar item akan ditandai dengan lingkaran hitam kecil.
script html nya sebagai berikut:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

maka tamilannya sebagai berikut:

TAG-LIST

-Ordered HTML Lists
Ordered HTML Lists dimulai dengan tag ol. Setiap daftar item dimulai dengan tag li .
penulisan html nya seperti berikut:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Terdapat beberapa jenis Atribut Ordered HTML Lists , di antaranya sebagai berikut:

ketik = “1” Daftar Items akan diberi nomor dengan angka (default)
type = “A” Daftar Items akan diberi nomor dengan huruf besar
type = “a” Daftar Items akan diberi nomor dengan huruf kecil
ketik = “I” Daftar Items akan diberi nomor dengan angka romawi huruf besar
ketik = “i” Daftar Items akan diberi nomor dengan angka romawi huruf kecil

contoh penulisan pada script html,sebagai berikut:

<ol type="1">
    <li>Kopi</li>
    <li>Es Campur</li>
    <li>Teh Manis</li>
</ol>

<ol type="a">
    <li>Kopi</li>
    <li>Es Campur</li>
    <li>Teh Manis</li>
</ol>

<ol type="A">
    <li>Kopi</li>
    <li>Es Campur</li>
    <li>Teh Manis</li>
</ol>

<ol type="i">
    <li>Kopi</li>
    <li>Es Campur</li>
    <li>Teh Manis</li>
</ol>

<ol type="I">
    <li>Kopi</li>
    <li>Es Campur</li>
    <li>Teh Manis</li>
</ol>

maka hasilnya sebagai berikut:

TAG-LIST-3

-HTML Description Lists

HTML juga mendukung daftar deskripsi.
Daftar deskripsi adalah daftar istilah, dengan deskripsi setiap istilah.
tag tag dl mendefinisikan daftar deskripsi, lalu tag dt mendefinisikan istilah (nama), dan tag dd menjelaskan setiap istilah
penulisan pada htmlnya sebagai berikut:

<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

maka hasilnya sebagai berikut :

TAG-LIST-4