STM BALUNG JEMBER

KATAPENGANTAR

Puji syukur penulis panjatkan kehadirat Allah SWT yang telah memberikan rahmat serta karunia-Nya kepada kami sehingga kami berhasil menyelesaikan Makalah ini yang alhamdulillah tepat pada waktunya yang berjudul CSS dan HTML.

Tujuan penulisan makalah ini adalah untuk memenuhi salah satu tugas mata pelajaran kompetensi kejuruan.

Makalah ini berisikan tentang informasi Pengertian CSS dan HTML.Diharapkan Makalah inidapat memberikan informasi kepada kitasemua.
Penulis menyadari bahwa Makalah ini masih jauh dari sempurna, oleh karena itu kritik dan saran dari semua pihak yang bersifat membangun selalu kami harapkan demi kesempurnaan Makalah ini.
Akhir kata, kami sampaikan terima kasih kepada semua pihak yang telah berperan serta dalam penyusunan Makalah ini dari awal sampai akhir. Semoga Allah SWT senantiasa meridhai segala usaha kita. Amiin.

Balung,19 Januari 2012

Penyusun

DAFTAR ISI
KATA PENGANTAR…………………………………………………………………..     1
DAFTAR ISI……………………………………………………………………………… 2
BAB I PENDAHULUAN
            Latar Belakang ……………………………………………………………….          3

Rumusan Masalah…………………………………………………………. 3
Maksud dan Tujuan ………………………………………………………. 3

Metode Pengumpulan Data…………………………………………… 3

            Sistematika Penulisan ……………………………………………………                4
BAB II PEMBAHASAN
            Pengenalan CSS……………………………………………………………..            5
            Syntax…………………………………………………………………………….    6
            Implementasi CSS…………………………………………………………..                        7
            Class dan ID Selector……………………………………………………..               10
            Pengertian HTML……………………………………………………………           12

Versi HTML……………………………………………………………………. 12
Kekurangan dan Kelebihan HTML…………………………………… 13

Struktur Dasar HTML…………………………………………………….. 14

Pengaturan Teks……………………………………………………………. 16

Lists………………………………………………………………………… 19

Images……………………………………………………………………………. 21

Tabel……………………………………………………………………………… 22

Frames…………………………………………………………………………... 24

Kumpulan Tag HTML……………………………………………………… 26

BAB III PENUTUP
Kesimpulan……………………………………………………………………………. 29
Daftar Pustaka…………………………………………………………………………. 30

BAB I

PENDAHULUAN

1.1 Latar Belakang

Perkembangan dunia informatika memang selalu mengalami peningkatan yang sangat pesat.Hal ini terbukti dengan adanya pengguna internet di ber bagai bidang.

Mengingat pentingnya dinia internet,para programmer berusaha membuat dan mendesain program-program dan aplikasiyang dibutuhkan saat melakukan browsing internet.Hal ini yang menjadi penulis menyusun makalah ini.Namun dari sekian pemrograman yang ada,yang akan dibahas adalah mengenai pemrograman tentang “CSS” dan ”HTML”.

1.2 Rumusan masalah

Makalah ini merupakan beberapa permasalahah sebagai berikut:

1. Pengertian CSS dan HTML?

2. Bagaimana struktur dasar CSS dan HTML?

3. Apa saja kode-kode CSS dan HTML?

4. Apa saja elemen dasar CSS dan HTML?

5. Bagaimana langkah pembuat halaman CSS dan HTML?

1.3 Maksud dan Tujuan

Maksud dari penulisan makalah ini adalah untuk memenuhi dan melengkapi salah satu tugas mata pelajaran komoetensi kejuruan di SMK TEKNOLOGI BALUNG.Sedangkan tujuan dari penulisan tugas ini adalah:

1. Mengembangkan kreativitas dan wawasan penulis.

2. Memberikan uraian tentang CSS dan HTML secara lebih terinci.

3. Diharapkan dengan adanya makalah ini ,para pemula yang ingin CSS dan HTML dpt menggunakannya sebagaisumber referensi.

1.4 Metode Pengumpulan Data

Untuk memperoleh data yang digunakan dalam tugas ini,penulis menggunakan Metode Browsing Internet,yaitu:metode yang digunakan dengan browsing atau membaca referensi-referensi yang berkaitan dengan masalah yang di bahas dalam tugas ini di internet.

1.5 Sistematika Penulisan

Untuk memudahkan pembaca dalam mempelajari dan mengetahui makalah ini,penulis memberikan uraian singkat mengenai gambaran pada ,asing-masing bab melalui sistematika penulisan,yaitu:

BAB I PENDAHULUAN

Dalam bab ini,penulis menguraikan tentang latar belakang penulisan,rumusan masalah,maksud dan tujuan,serta metode-metode yang digunakan dalam pengumpulan data,untuk menyusun tugas ini.Selain itu penulis juga menguraikan mengenai sistematika penulisan.

BAB II PEMBAHASAN

Dalam bab ini,penulis menguraikan tentang materi-materi yang akan di bahas,karena bab ini merupakan bab utama dari makalah ini.Penulis menguraikan tentang CSS dan HTML,meliputi:Pengertian CSS dan HTML,Bagaimana struktur dasar CSS dan HTML,Apa saja komponen dokumen CSS dan HTML,Apa saja elemen dasar CSS dan HTML,Bagaimana langkah pembuat halaman CSS dan HTML.

BAB III PENUTUP

Dalam bab ini penulis menguraikan tentang kesimpulan-kesimpulan dari masalah yang di bahas serta saran-saran yang penulis ajukan.

BAB II

PEMBAHASAN

MATERI CSS

2.1 Pengenalan css

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.

Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.

Keuntungan Penggunaan CSS

Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.

Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.

Jadi, keuntungan menggunakan CSS, lebih praktis!

Kekurangan Penggunaan CSS

Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.

2.2 Syntax

Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value.

Format penulisan kalimat CSS:

selector { property: value }

Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.

Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.

Value adalah nilai dari pengaturannya.

Contoh Syntax:

h1 { color: red }

Contoh di atas menunjukkan

Selector: h1

Property: color

Value: red

Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).

Pengelompokan Selectors

Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:

h1,h2,h3 { color: red }

Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.

Penggunaan Banyak Properties

Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).

Contoh:

h1,h2,h3 {color:red; font-family:arial; font-size:150%;}

Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.

Cara Penulisan Yang Baik

Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent. Ya cuma biar rapih dan lebih mudah di baca aja sih, ga harus kok.

h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}

Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.

CSS Comment

Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat.

Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.

/* Tulis komentar anda di sini */

{

text-align: justify;

/* Tulis komentar anda di sini */

color: blue;

font-family: arial;

}

2.3 Implementasi css

Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:

· Inline CSS

· Embed atau memasang kode css ke dalam bagian <head>

· Nge link ke external CSS

· Import CSS file

Yuk kita bahas satu per satu…

Inline CSS

Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS.

Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.

Contoh:

<P style=”color:blue”>
Isi paragraf.
</p>

Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.

Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.

Embedded CSS

Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>.

Contoh:

<head>

p {color:blue;}

</style>

</head>

Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat menggunakan font berwarna biru.

External CSS

Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css. Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.

Contoh:

1. Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.

2. p {font-family: arial; font-size: small;}

3. h1 {color: red; }

4. Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan </head>

Import CSS

Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.

Contoh:

@import "style.css";

atau

@import url("style.css");

Penggunaan Lebih dari Satu Kode CSS

Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik.

Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sbb:

h1 {

color: red;

text-align: left;

font-size: 8pt

}

Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb:

h1 {

text-align: right;

font-size: 20pt

}

Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left sementara dari internal style sheet, text-align=right.

Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.

Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sbb:

color: red;

text-align: right;

font-size: 20pt

2.4 Class dan Id selector

Class Selector

Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.

Cara penulisan Class Selector:

.nama-class {property:value;}

Untuk menempelkan class ke dalam tag HTML:

taghtml.nama-class {Property:value;}

Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div class=nama-class> dan di akhiri dengan tag </div>.

Contoh:

Penulisan kode CSS:

.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}

Pemakaian kode CSS

<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>

Hasil:

Teks tengah akan berwarna merah.

Tag H1 tengah akan berwarna hitam

Tag H1 kiri akan berwarna biru

ID Selector

ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu / sidebar.

Cara penulisan ID Selector:

#nama-ID {property:value;}

Untuk menempelkan ID selector ke dalam tag HTML:

taghtml#nama-ID {Property:value;}

Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.

MATERI HTML

2.1 PENGERTIAN HTML

Sebelum kita melangkah lebih jauh ada baiknya Anda tahu apa itu HTML. HTML atau Hypertext Markup Language merupakan protokol yang digunakan untuk mentransfer data atau document dari web server ke browser kita (Internet Explorer, Netscape Navigator, NeoPlanet, dll). Nah, HTML inilah yang memungkinkan Anda menjelajah internet dan melihat halaman web yang menarik.

Sekarang ini di pasaran terdapat banyak sekali HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web). Macromedia Dreamweaver, Adobe GoLive, MS FrontPage sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak akan memperoleh hasil yang maksimal. Mengapa ? Karena walaupun software-software tersebut semakin menawarkan kemudahan dalam membuat halaman web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara manual. Terutama untuk halaman web yang sangat komplek.

Dalam tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari desain web. Yang dibutuhkan hanya sebuah word processor. Anda bisa menggunakan Notepad, WordPad, MS Word atau yang lainnya. Tapi yang paling mudah adalah menggunakan Notepad.

2.2 VERSI HTML

HTML sekarang sudah mencapai versi 4.0 (saat artikel ini ditulis). Sebelum digunakan, HTML harus diuji secara ketat oleh suatu badan yang bernama World Wide Web Concortium (W3C). Setiap penambahan/peningkatan versi, terdapat beberapa tambahan-tambahan tag dan fasilitas yang tidak dimiliki oleh versi sebelumnya. Tentunya versi yang telah dikeluarkan ini harus menjadi standar bagi browser. Bilamana browser ini tidak mendukung versi tertentu, maka browser tersebut tidak dapat menampilkan format HTML yang kita buat. Oleh karena itu, untuk melihat halaman web yang diformat dengan HTML versi baru, harus memiliki browser yang sudah mendukung versi HTML tersebut

VERSI - VERSI HTML

HTML 1.0
Ini adalah awal mula dari HTML (pendahulunya). Pada versi ini masih terlihat beberapa kelemahan dan masih sangat sederhana. Kemampuan yang dimiliki oleh versi 1.0 ini hanya terbatas pada heading, paragraf, hypertext, list dan setak tebal atau miring pada teks.
HTML 2.0
Versi ini telah ditambahkan kemampuan menyisipkan form didalamnya, sehingga kita dapat membuat halaman yang interaktif. Pengunjung dapat mengisi nama, alamat, email dan sebagainya.
HTML 3.0
Versi ini tidak bertahan lama karena kemudian disempurnakan oleh versi 3.2
HTML 3.2
Pada versi ini telah diperkenalkan teknik peletakan teks pada sekeliling gambar, latar belakang berupa gambar, cascading style sheet, tabel, frame dan lain sebagainya. Versi ini juga mendukung Javascript, VBScript dan lain sebagainya.

HTML 4.0
Versi terakhir ini yang resmi dirilis ini telah menunjukkan beberapa kelebihan-kelebihan dari versi sebelumnya. Perubahan-perubahan ini hampir mencakup semua tag-tag HTML sebelumnya. Di samping itu pada versi ini ditambahkan tag-tag baru seperti ABBR, ACRONYM, BUTTON, PARAM, BUTTON, TBODY, THEAD dan lain sebagainya.

2.3 KEKURANGAN DAN KELEBIHAN HTML

Seperti yang kita tahu bahwa, setiap bahasa dan program mempunyai kelebihan dan Kekurangan. Ada baiknya kita mengetahui kelebihan dan kekurangan dari HTML sehingga kita bisa memaksimalkan pengetahuan dan wawasan kita dalam mengeksplorasi dunia browser.

Kelebihan-kelebihan HTML antara lain:

· Merupakan bahasa penkodean yang lintas platform (cross platform), maksudnya HTML dapat digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam sistem operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup dengan menggunakan editor karakter ASCII.

· Dapat disisipi gambar baik gambar statis atau dinamis (animasi) termasuk menggunakan gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk merujuk pada suatu halaman web, dimana setiap titik-titik yang sudah didefinisikan berupa rectangular (kotak), poligon (kurva tak beraturan) atau lingkaran digunakan untuk 'jump' ke halaman lain, atau link ke halaman di luar web yang bersangkutan.

· Dapat disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia Flash atau Macromedia Shockwave (untuk keperluan ini, browser harus memiliki plug-in khusus untuk menjalankan file-file animasi ini).

· Dapat disisipi bahasa pemrograman untuk mempercantik halaman web seperti Javascript, VBScript, Active Server Pages, Perl, Tcl, PHP dan sebagainya.

· Bukan merupakan bahasa pemrograman jadi tidak memerlukan kompiler. Cara menjalanakannya cukup dengan menggunakan browser.

Adapun kekurangan dari HTML ini adalah:

· Menghasilkan halaman yang statis, untuk memperoleh halaman yang dinamis harus menggunakan bahasa pemrograman tertentu seperti Javascript atau VBScript dan animasi seperti Flash atau Shockwave.

· Memiliki tag-tag yang begitu banyak sehingga susah dipelajari untuk yang masih awam.

· Tidak dapat menghasilkan halaman yang interaktif. Interaktif di sini maksudnya client dapat berinteraksi dengan server. Untuk keperluan itu, HTML harus disisipi bahasa pemrograman yang dapat menangani hal tersebut, contohnya Perl atau Tcl.

2.4 STRUKTUR DASAR HTML

HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/").

Sebuah halaman web minimal mempunyai empat buat tag, yaitu :

<HTML> Sebagai tanda awal dokumen HTML.

<HEAD> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.

<TITLE> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).

Contoh :

<TITLE>Tips HTML -- www.klik-kanan.com</TITLE>

<BODY> Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.

Atribut :

BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.

Contoh :

Sebuah contoh sederhana dokumen HTML :

<HTML>
<HEAD>
<TITLE>Halaman pembuka
</TITLE>
</HEAD>

Letakkan text, images, dan link Anda di sini
</BODY>
</HTML>

2.5 PENGATURAN TEKS

Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini yang biasa digunakan dalam pengaturan teks :

Headers: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil.

Contoh :

<H2>Tutorial Html</H2>

Hasilnya akan terlihat seperti :

Add caption

Paragraph Baru: <P> Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi.

Line Break: <BR> Digunakan untuk pindah ke baris baru.

No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.

Font <FONT> Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR.

SIZE: Ukuran font yang digunakan, berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.

FACE: Jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah ( _ ). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic.

COLOR: Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).

Contoh :

<FONT SIZE=4 FACE="Verdana, Arial, Helvetica" COLOR="#FF0000">Contoh teks yang berwarna merah</FONT>

Hasilnya akan terlihat seperti :

Contoh lainnya :

Base Font: <BASEFONT> Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.

Contoh :

Selain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :

Perhatian : Semua tag di bawah ini membutuhkan tap penutup.

<B> Bold text
<I> Italic text
<U> Underscore
<TT> Typewriter
<S> Strikeout - draws a line through the text
<PRE> Preformatted Text <DFN> Definition
<BLINK> Text berkedip (lebih baik jangan digunakan)
<STRONG> Strong
<ADDRESS>

<CITE> Digunakan untuk quoting text
<CODE> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<SAMP> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<KBD> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<BIG> Ukuran teks akan lebih besar satu ukuran
<SMALL> Ukuran teks akan lebih kecil satu ukuran
<SUP> Membuat tekssuperscript
<SUB> membuat tekssub script
<ABBREV> Abbreviations
<ACRONYM> Untuk akronim
<PERSON> Digunakan untuk indexing
<Q> Membuat short inline quotation
<VAR> Membuat variable name, selalu dalam italics.

2.6 LISTS

Terdapat tiga tipe list yang dapat digunakan, yaitu :

Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <LI>.

Contoh :
<UL>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</UL>

Hasil dari kode di atas adalah:

Dengan atribut TYPE Anda dapat mendefinisikan bentuk disc, circle atau square bullet point.

Contoh :
<UL COMPACT TYPE=square> …

Ordered Lists: <OL> Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag.

Contoh :
<OL TYPE=I>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</OL>

Hasil dari kode di atas adalah :

Untuk TYPE Anda dapat juga menggunakan :

1- Default numbers, 1, 2, 3, etc.
A- Huruf besar. A, B, C, etc.
a- Huruf kecil. a, b, c, etc.
I- Romawi huruf besar. I, II, III, etc.
i- Romawi huruf kecil , i, ii, iii, etc.

Definition Lists: <DL>

Contoh :
<DL>
<DT> Item pertama.
<DD> Penjelasan tentang item pertama.
<DT> Item kedua.
<DD> Penjelasan tentang item kedua
</DL>

Hasil dari kode di atas adalah :

2.7 IMAGES

Images :

Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda.

Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height

Contoh : <IMG SRC="logo.gif" alt="Ini adalah logo halaman pembuka" width=200 height=100>

<IMG SRC="logo.gif" hspace=10 vspace=5 align=right border=2>

Links :
Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah.

Contoh :
<A HREF="halaman2.html">Klik di sini</A> Untuk membuat link ke halaman lain.
<A HREF="mailto:webmaster@klik-kanan.com">Klik di sini</A> Untuk membuat link pada alamat e-mail.
<A HREF="#aplikasi">Klik di sini</A> Untuk membuat link ke bagian lain pada halaman yang sama.
<A HREF="halamanlain.html#aplikasi">Klik di sini</A> Untuk membuat link kebagian lain pada halaman yang berbeda.
<A HREF="halaman2.html"><IMG SRC="gambar.gif"></A> Untuk membuat link dengan menggunakan gambar.

2.8 TABEL

Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web "terbagi" pada beberapa kolom atau baris. Contohnya seperti pada halaman web yang sedang Anda baca ini.

Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE>

<TABLE>
Terdiri dari atribut :

align - perataan : rata kiri (left), tengah (center) atau kanan (right).
bgcolor - warna latar belakang (background) dari tabel.
border - ukuran lebar border tabel (dalam pixel).
cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).
cellspacing - jarak antar cell (dalam pixel).
width - ukuran tabel dalam pixel atau percent.

Contoh :
<TABLE align="center" bgcolor="#0000FF" border="2" cellpadding="5" cellspacing="2" width="90%">

<TR>
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:

align - perataan : rata kiri (left), tengah (center) atau kanan (right).
bgcolor - warna latar belakang dari baris.
valign - perataan vertikal : top, middle atau bottom.

Contoh :
<TR align="right" bgcolor="#0000FF" valign=top>

<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel.

align - perataan
background - image yang digunakan sebagai latar belakang dari kolom.
bgcolor - warna latar belakang
colspan - lihat gambar contoh
height - ukuran tinggi cell dalam pixels.
nowrap - membuat supaya isi dari kolom tetap berada pada satu baris.
rowspan - lihat gambar contoh
valign - perataan vertikal :top, middle atau bottom.
width - ukuran kolom dalam pixel atau percen.

Contoh :
<TD align="right" background="back.gif" bgcolor="#0000FF" colspan="3" height="200" nowrap rowspan="2" valign="bottom" width="300">

2.9 FRAMES

1
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>

2
<FRAMESET cols="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>

3
<FRAMESET rows="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>

4
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>

5
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
</FRAMESET></FRAMESET>

6
<FRAMESET cols="*,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET rows="15%,15%,70%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET></FRAMESET>

7
<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="homepage2.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame3">
<FRAME SRC="menu2.htm" NAME="Frame4">
</FRAMESET></FRAMESET>

8
<FRAMESET rows="15%,70%,15%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="15%,70%,15%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET>
<FRAME SRC="homepage.htm" NAME="BIG">
</FRAMESET></FRAMESET>

2.10 Kumpulan Tag HTML

<!-- -->	Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser
<a href>	Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut
<a name>	Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
<applet>	Sebagai awal dari Java applets
<area>	Mendefinisikan daerah yang dapat diklik (link) pada image map
<b>	Membuat teks tebal
<basefont>	Membuat atribut teks default seperti jenis, ukuran dan warna font
<bgsound>	Memberi (suara latar) background sound pada halaman web
<big>	Memperbesar ukuran teks sebesar satu point dari defaultnya
<blink>	Membuat teks berkedip
<body>	Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
<br>	Pindah baris
<caption>	Membuat caption pada tabel
<center>	Untuk perataan tengah terhadap teks atau gambar
<comment>	Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
<dd>	Indents teks
<div>	Represents different sections of text.
<embed>	Menambahkan sound or file avi ke halaman web
<fn>	Seperti tag <a name>
<font>	Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
<form>	Mendefinisikan input form
<frame>	Mendefinisikan frame
<frameset>	Mendefinisikan attribut halaman yang akan menggunakan frame
<h1> ... <h6>	Ukuran font
<head>	Mendefinisikan head document.
<hr>	Membuat garis horizontal
<html>	Bararti dokumen html
<i>	Membuat teks miring
<img>	Image, imagemap atau an animation
<input>	Mendefinisikan input field pada form
<li>	Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> and <ul> )
<map>	Mendefinisikan client-side map
<marquee>	Membuat scrolling teks (teks berjalan) - hanya pada MS IE
<nobr>	Mencegah ganti baris pada teks atau images
<noframes>	Jika browser user tidak mendukung frame
<ol>	Mendefinisikan awal dan akhir list
<p>	Ganti paragraf
<pre>	Membuat teks dengan ukuran huruf yg sama
<script>	Mendefinisikan awal script
<table>	Membuat tabel
<td>	Kolom pada tabel
<title>	Mendefinisikan title
<tr>	Baris pada tabel
<u>	Membuat teks bergaris bawah

BAB III

KESIMPULAN DAN SARAN

Perkembangan dunia informatika yang semakin canggih pada saat ini menawarkan kemudahan bagi setiap orang dalam membantu menyelesaikan segala kebutuhan dan pekerjaannya.Internet sebagai salah satu bukti nyata dengan adanya perkembangan ini .Maka dari itu,para programmer berusaha untuk merancang beberapa pemrograman di internet .CSS dan HTML adalah salah satu unsur penting dalam pemrograman di internet.

Untuk itu para perogrammer,khususnya pemula yang ingin membuat CSS dan HTML yang baik,sebaiknya sebelum membuat CSS dan HTML harus mengetahui tentang pengertian CSS dan HTML,struktur dasar CSS dan HTML,kode-kode CSS dan HTML,elemen dasar CSS dan HTML,langkah pembuat halaman CSS dan HTML.

Dan seperti yang telah disampaikan sebelumnya,selain itu ia juga harus menguasai langkah-langkah atau cara-cara membuat dan mendesain CSS dan HTML sehingga tampilannya bagus dan menarik yang akan diberikan kepada pengguna nantinya.

Semoga makalah yang telah disusun inidapat menjadi pedoman bagi pemula sebelum membuat CSS dan HTML.

DAFTAR PUSTAKA

cari buku di internet,perpustakaan

selebihnya disini brow

bagi anda yg mau mendownload koleksi Game Balap Mobil untuk HP disini aja!!!!!

Recent Posts

makalah tentang css dan html

Class Selector

Tag H1 tengah akan berwarna hitam

Tag H1 kiri akan berwarna biru

ID Selector

13 comments: