Anda di halaman 1dari 88

Iankee.mualdo@gmail.

com

PENGENALAN WEBSITE HTML CSS

Mengenal CMS ( Content Management System)

Iankee.mualdo@gmail.com

PENGENALAN WEBSITE HTML CSS

Mengenal CMS ( Content Management System)

Iankee.mualdo@gmail.com

PENGENALAN WEBSITE

NAMA DOMAIN

WEBSITE HOSTING

DESAIN WEBSITE

WEB PROGRAMMING

APLIKASI PENGOLAH GAMBAR

TEXT EDITOR

Web Server (Apache, Mysql/Oracle)

PENGENALAN WEBSITE HTML CSS

Mengenal CMS ( Content Management System)

Iankee.mualdo@gmail.com

HTML

HTML
HTML merupakan singkatan dari (Hyper Text Markup Language) Merupakan salah satu bahasa untuk membuat website HTML merupakan bahasa markup Didalam dokumen html terdapat tag html, dan teks biasa (plain text) - Penulisan tag html tidak case sensitive (besar kecil huruf tidak berpengaruh) - Ekstensi file dari html adalah *.html

Tag HTML
<BEGIN TAG> </END TAG>

Bentuk dari Tag HTML :

<ELEMENT ATTRIBUT =VALUE>


ELEMENT = NAMA TAG
ATTRIBUT = ATTRIBUT DARI TAG VALUE = VALUE DARI ATTRIBUT

Contoh dari Tag HTML :

<BODY BGCOLOR =lavender > </BODY>

Contoh / struktur dasar Dokumen HTML Sederhana


<html> //tag pembuka suatu dokumen html <head> //tag penanda bagian judul dokumen <tittle>HTML</tittle> //tag pemberian judul dokumen </head> <body> //tag penanda bagian isi dari dokumen Halo Dunia </body> </html>

Elemen Paragraf dalam HTML

<P>.. </P>
Attribut tambahan untuk pemformatan Paragraf
ATRIBUT VALUE Right Center Left Justify KETERANGAN Rata Kanan Rata Tengah Rata Kiri Rata Kiri/Kanan

Align

Elemen Heading dalam HTML

<Hx>.. </Hx>
X Bernilai 1 sampai dengan 6 Attribut tambahan untuk pemformatan Heading
ATRIBUT VALUE Right Center Left KETERANGAN Rata Kanan Rata Tengah Rata Kiri

Align

Physical Style dalam HTML


ELEMEN FUNGSI

<b>.</b> <i>.</i> <u>.</u> <s>.</s> <big>.</big> <small>.</small> <sub>.</sub> <sup>.</sup>

Menebalkan teks Membuat teks miring Menggaris bawahi teks Memberikan coretan pada teks Membesarkan teks Mengecilkan teks Membuat teks subscript Membuat teks superscript

Elemen Text/Font Styling dalam HTML

<font> .. </font>
Attribut tambahan untuk pemformatan Font.
ATRIBUT VALUE KETERANGAN

Size Color Face

1 sampai dengan 7 Nama warna / Kode Hex Warna Jenis Font

Mengatur ukuran font Mengubah warna font Mengubah jenis font

List (Daftar) dalam HTML

Elemen Ordered List/Numberd List (Daftar berurut dengan nomor/abjad) Elemen Unordered List/Bulleted list (Daftar tidak berurut menggunakan symbol)

Elemen Ordered List dalam HTML

<ol> <li>text 1</li> <li>text2</li> </ol>


Attribut tambahan untuk pemformatan Ordered List.
ATRIBUT VALUE KETERANGAN

Type

A a I i 1

Daftar dengan huruf besar(A,B,C) Daftar dengen huruf kecil(a,b,c) Daftar dengan romawi besar(I,II,III) Daftar dengan romawi kecil(i,ii,iii) Daftar dengan nomor berurut(1,2,3)

Elemen Unordered List dalam HTML

<ul> <li>text 1</li> <li>text2</li> </ul>


Attribut tambahan untuk pemformatan Unordered List.
ATRIBUT VALUE KETERANGAN

Type

disc circle square

Simbol berupa disk Simbol berupa lingkaran Simbol berupa kotak

Menyisipkan gambar dalam HTML

Format gambar yang dapat digunakan pada halaman web: o o o o GIF (Graphical Interchange Format) .gif JPEG (Joint Photographic Expert Group) .jpg PNG (Portable Network Graphic) .png BMP (Bitmap) .bmp

Elemen Penyisipan gambar dalam HTML

<img>

Attribut tambahan untuk pemformatan Penyisipan gambar.


ATRIBUT VALUE KETERANGAN

src alt align

height width border

URL gambar teks Center | Justify | Left | Right | Baseline | Top | Bottom | Middle angka angka angka

Alamat penunjuk sumber gambar Tulisan yang akan ditampilkan Top, bottom, middle : menentukan posisi image terhadap teks. Left, Right, Center : untuk menentukan posisi image ukuran tinggi gambar ukuran lebar gambar memberikan bingkai pada gambar

Elemen Hyperlink (link) dalam HTML

<a> .. </a>
Attribut tambahan untuk pemformatan Hyperlink.
ATRIBUT VALUE KETERANGAN

HREF NAME

URL/ Halaman web #namabagian

Diisi dengan nama halaman web atau nama URL yang akan di-linkkan. Digunakan untuk link dalam satu dokumen web.

Membuat Tabel dalam dokumen HTML

<table></table>

Elemen yang digunakan untuk membuat tabel


ELEMEN KETERANGAN

<TABLE> ... </TABLE> <TR> ..... </TR> <TD> ..... </TD> <TH> ..... </TH> <CAPTION> ...</CAPTION>

Tag utama. Baris dari suatu table kolom dari suatu table. Judul tabel, terletak dibagian atas tabel Judul tabel yang terletak diluar tabel biasanya di bagian atas/bawah tabel.

Atribut yang digunakan oleh tabel


Atribut Value Keterangan

BORDER CELLSPACING CELLPADDING

Angka (px) Angka (px) Angka (px)

WIDTH ALIGN VALIGN BGCOLOR ROWSPAN


COLSPAN

Angka (px) Left, Center, Right Midle, Bottom, Baseline Warna Angka (px)
Angka (px)

Menentukan tebal bingkai tabel. Menentukan jumlah spasi antar sel Menentukan jumlah spasi antar data dalam sel. Mengatur lebar tabel. Perataan tabel secara horizontal. Perataan tabel secara vertikal. Warna latar dari tabel / sel Menggabungkan beberapa baris tabel. Menggabungkan beberapa kolom tabel.

Dw

PENGENALAN WEBSITE HTML CSS

Mengenal CMS ( Content Management System)

Iankee.mualdo@gmail.com

CSS

CSS
- CSS merupakan singkatan dari (Cascading Style Sheet) - CSS memudahkan kita dalam mendesain halaman html - Meminimalkan penggunaan tag html seperti pewarnaan font dll (otomatis ukuran file juga berkurang) - Ekstensi file dari css untuk eksternal css(linked css) *.css

Tampilan facebook dengan CSS

Tampilan facebook tanpa CSS

Penulisan/struktur CSS
selector { property_1: value_1; ... property_n: value_n; }

SELECTOR berfungsi sebagai pemilih tag HTML yang akan dipakaikan CSS, sedangkan PROPERTY adalah atribut dari CSS yang bernilai VALUE.

Contoh Penerapan CSS


<html> <head> <style>

p { color:red; text-align:center; }
</style> </head> <body>

Hasil di browser

<p>Hello World!</p> <p>This paragraph is styled with CSS.</p>


</body> </html>

Selector pada css

Selector Tag css


memilih tag html untuk diberikan efek css

h1 {

property_1: value_1; ... property_n: value_n; }

Selector Class css


Mendefinisikan class pada sebuah tag html, kemudian diberi efek dengan menentukan selector class .namaclass { property_1: value_1; ... property_n: value_n; }

Selector ID css
Mendefinisikan ID pada sebuah tag html, kemudian diberi efek dengan menentukan selector class .namaid { property_1: value_1; ... property_n: value_n; }

Metode penulisan CSS

CSS didefinisikan langsung pada tag HTML yang bersangkutan, dengan menambahkan atribut style dalam tag HTML

Metode penulisan Inline CSS

<p style = color : red; font-size : 12pt;> HALO CSS </p>

Metode penulisan Embedded CSS


CSS didefinisikan terlebih dahulu dalam tag <style> </style> yang diletakan di dalam tag <head>

<html> <head> <title> CSS </title> <style type = "text/css"> h1 {font-size: 20pt; font-style: italic; color: pink;} </style> </head> <body> <h1> CSS</h1> <p> Ayo kita belajar CSS ! </p> </body> </html>

Metode penulisan Linked CSS


CSS didefinisikan pada file yang terpisah dan di link menggunakan tag link, yang diletakan di antara tag <head></head>
<link href = linked.css rel = stylesheet type = text/css>

Beberapa property pada CSS

CSS Background PROPERTIES

CSS Background PROPERTIES

CSS Font PROPERTIES

CSS Font PROPERTIES

CSS Text PROPERTIES

CSS Text PROPERTIES

CSS Margin PROPERTIES

CSS Margin PROPERTIES

CSS Padding PROPERTIES

Dw

PENGENALAN WEBSITE HTML CSS

Mengenal CMS ( Content Management System)

Iankee.mualdo@gmail.com

MENGENAL CMS

CMS (Content Management System)

Penggunaan CMS (Content Management System) juga bermacam-macam, berikut diantaranya : a. Mengelola website pribadi atau lebih dikenal dengan blog b. Mengelola website perusahaan/bisnis. c. Portal atau website komunitas. d. Galeri foto, dan lain sebagainya. e. Forum. f. Aplikasi E-Commerce. g. Dan lain-lain.

CMS Populer

Joomla! V3.0

WordPress V3.xx

Drupal V7.x

http://www.evolutionarydesigns.net http://www.anneahira.com/pengertian-website.htm http://www.slideshare.net/schaapy/web-workflow http://www.oocities.org/dyah_r/PW1-chapter9.pdf http://205.196.122.19/q2lwxf8qw37g/j2j5nn756pwpncg/ModulAplikasiIT1.rar http://www.w3schools.com/html/default.asp http://www.w3schools.com/css/default.asp http://ict.ft-untirta.ac.id/articles/28-web-developing/51-apa-itu-cms-contentmanagement-system.html