Pelatihan Website

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)
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.
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.
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.

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.
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
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
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

Lebih dari sekadar dokumen.

Pelatihan Website

Diunggah oleh

Informasi Dokumen

Deskripsi:

Deskripsi:

Hak Cipta:

Format Tersedia

Pelatihan Website

Diunggah oleh

Deskripsi:

Hak Cipta:

Format Tersedia

Judul terkait

Iankee.mualdo@gmail.

PENGENALAN WEBSITE HTML CSS

Mengenal CMS ( Content Management System)

PENGENALAN WEBSITE HTML CSS

Mengenal CMS ( Content Management System)

APLIKASI PENGOLAH GAMBAR

Web Server (Apache, Mysql/Oracle)

PENGENALAN WEBSITE HTML CSS

Mengenal CMS ( Content Management System)

Bentuk dari Tag HTML :

<ELEMENT ATTRIBUT =VALUE>

Contoh dari Tag HTML :

<BODY BGCOLOR =lavender > </BODY>

Contoh / struktur dasar Dokumen HTML Sederhana

Elemen Paragraf dalam HTML

Elemen Heading dalam HTML

Physical Style dalam HTML

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

Elemen Text/Font Styling dalam HTML

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 dalam HTML

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

Elemen Unordered List dalam HTML

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

disc circle square

Simbol berupa disk Simbol berupa lingkaran Simbol berupa kotak

Menyisipkan gambar dalam HTML

Elemen Penyisipan gambar dalam HTML

Attribut tambahan untuk pemformatan Penyisipan gambar.

src alt align

height width border

Elemen Hyperlink (link) dalam HTML

URL/ Halaman web #namabagian

Membuat Tabel dalam dokumen HTML

Elemen yang digunakan untuk membuat tabel

Atribut yang digunakan oleh tabel

BORDER CELLSPACING CELLPADDING

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

WIDTH ALIGN VALIGN BGCOLOR ROWSPAN

PENGENALAN WEBSITE HTML CSS

Mengenal CMS ( Content Management System)

Tampilan facebook dengan CSS

Tampilan facebook tanpa CSS

Contoh Penerapan CSS

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

Selector pada css

Selector Tag css

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

Selector Class css

Metode penulisan CSS

Metode penulisan Inline CSS

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

Metode penulisan Embedded CSS

Metode penulisan Linked 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