Pelatihan Website
Content
[email protected]
PENGENALAN WEBSITE HTML CSS
Mengenal CMS ( Content Management System)
[email protected]
PENGENALAN WEBSITE HTML CSS
Mengenal CMS ( Content Management System)
[email protected]
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)
[email protected]
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)
[email protected]
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)
[email protected]
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
PENGENALAN WEBSITE HTML CSS
Mengenal CMS ( Content Management System)
[email protected]
PENGENALAN WEBSITE HTML CSS
Mengenal CMS ( Content Management System)
[email protected]
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)
[email protected]
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)
[email protected]
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)
[email protected]
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
