pelatihan website#1
DESCRIPTION
pelatihan website #1 (unsoed teknik elektro)TRANSCRIPT
Chapter #1PENGENALAN WEBSITE
website?
http://unsoed.ac.id
http://www.kaskus.co.id
Website Statis Vs
Website Dinamis
Unsur website
NAMA DOMAIN
WEBSITE HOSTING
DESAIN WEBSITE
WEB PROGRAMMING
Konten website
TEXT
IMAGE
VIDEO
FLASH
Web Designer Vs
Web Developer
Bagaimana cara website
bekerja?
Software pendukung pembuatan
website
APLIKASI
PENGOLAH
GAMBAR
TEXT EDITOR
Web Server (Apache,
Mysql/Oracle)
Proses pembuatan
website
Konsep
Desain & Coding
Testing & Debuging
Chapter #2HTML
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
<BEGIN TAG> </END TAG>
Tag HTML
<BODY BGCOLOR =“lavender”> </BODY>
ELEMENT = NAMA TAG
ATTRIBUT = ATTRIBUT DARI TAG
VALUE = VALUE DARI ATTRIBUT
<ELEMENT ATTRIBUT =“VALUE”>
Bentuk dari Tag HTML :
Contoh dari Tag HTML :
<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>
Contoh / struktur dasar Dokumen HTML Sederhana
Attribut tambahan untuk pemformatan Paragraf
ATRIBUT VALUE KETERANGAN
AlignRightCenterLeftJustify
Rata KananRata TengahRata KiriRata Kiri/Kanan
<P>….. </P>
Elemen Paragraf dalam HTML
X Bernilai 1 sampai dengan 6
ATRIBUT VALUE KETERANGAN
AlignRightCenterLeft
Rata KananRata TengahRata Kiri
<Hx>….. </Hx>
Elemen Heading dalam HTML
Attribut tambahan untuk pemformatan Heading
ELEMEN FUNGSI
<b>….</b><i>….</i>
<u>….</u><s>….</s>
<big>….</big><small>….</small>
<sub>….</sub><sup>….</sup>
Menebalkan teksMembuat teks miringMenggaris bawahi teksMemberikan coretan pada teksMembesarkan teksMengecilkan teksMembuat teks subscriptMembuat teks superscript
Physical Style dalam HTML
Attribut tambahan untuk pemformatan Font.ATRIBUT VALUE KETERANGAN
SizeColorFace
1 sampai dengan 7Nama warna / Kode Hex WarnaJenis Font
Mengatur ukuran fontMengubah warna fontMengubah jenis font
<font> ….. </font>
Elemen Text/Font Styling dalam HTML
List (Daftar) dalam HTML
Elemen Ordered List/Numberd List (Daftar berurut dengan nomor/abjad)
Elemen Unordered List/Bulleted list (Daftar tidak berurut menggunakan symbol)
Attribut tambahan untuk pemformatan Ordered List.ATRIBUT VALUE KETERANGAN
Type AaIi1
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)
<ol> <li>text 1</li><li>text2</li>
</ol>
Elemen Ordered List dalam HTML
Attribut tambahan untuk pemformatan Unordered List.
ATRIBUT VALUE KETERANGAN
Type disccirclesquare
Simbol berupa diskSimbol berupa lingkaranSimbol berupa kotak
<ul> <li>text 1</li><li>text2</li>
</ul>
Elemen Unordered List dalam HTML
Menyisipkan gambar dalam HTML
Format gambar yang dapat digunakan pada halaman web:
o GIF (Graphical Interchange Format) .gif o JPEG (Joint Photographic Expert Group) .jpg o PNG (Portable Network Graphic) .png o BMP (Bitmap) .bmp
<img>
Elemen Penyisipan gambar dalam HTML
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
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-link-kan. Digunakan untuk link dalam satu dokumen web.
<a> ….. </a>
Elemen Hyperlink (link) dalam HTML
<table>…</table>
Membuat Tabel dalam dokumen HTML
Elemen yang digunakan untuk membuat tabel
ELEMEN KETERANGAN
<TABLE> ... </TABLE> <TR> ..... </TR> <TD> ..... </TD> <TH> ..... </TH>
<CAPTION> ...</CAPTION>
Tag utama. Baris dari suatu tablekolom dari suatu table. Judul tabel, terletak dibagian atas tabelJudul tabel yang terletak diluar tabel biasanya di bagian atas/bawah tabel.
Atribut yang digunakan oleh tabel
Atribut Value Keterangan
BORDER CELLSPACING CELLPADDING
WIDTH ALIGN
VALIGN BGCOLOR ROWSPAN
COLSPAN
Angka (px)Angka (px)Angka (px)
Angka (px)Left, Center, Right Midle, Bottom, Baseline Warna Angka (px)
Angka (px)
Menentukan tebal bingkai tabel. Menentukan jumlah spasi antar selMenentukan 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
Chapter #3CSS
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
selector { property_1: value_1; ... property_n: value_n; }
Penulisan/struktur CSS
SELECTOR berfungsi sebagai pemilih tag HTML yang akan dipakaikan CSS, sedangkan PROPERTY adalah atribut dari CSS yang bernilai VALUE.
<html><head>
<style>
p{color:red;text-align:center;}
</style></head>
<body><p>Hello World!</p><p>This paragraph is styled with CSS.</p>
</body></html>
Contoh Penerapan CSS Hasil di browser
Selector pada css
Selector Tag css
h1 { property_1: value_1; ... property_n: value_n; }
memilih tag html untuk diberikan efek css
Selector Class css
.namaclass { property_1: value_1; ... property_n: value_n; }
Mendefinisikan class pada sebuah tag html, kemudian diberi efek dengan menentukan selector class
Selector ID css
#namaid { property_1: value_1; ... property_n: value_n; }
Mendefinisikan ID pada sebuah tag html, kemudian diberi efek dengan menentukan selector class
Metode penulisan CSS
Metode penulisan Inline CSS
CSS didefinisikan langsung pada tag HTML yang bersangkutan, dengan menambahkan atribut style dalam tag HTML
<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 CMSChapter #5
CMS (Content Management System)
Penggunaan CMS (Content Management System) juga bermacam-macam, berikut diantaranya :a. Mengelola website pribadi atau lebih dikenal dengan blogb. 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
Faq (Frequently Ask & Question)
Sumber Refrensi
http://www.evolutionarydesigns.nethttp://www.anneahira.com/pengertian-website.htmhttp://www.slideshare.net/schaapy/web-workflowhttp://www.oocities.org/dyah_r/PW1-chapter9.pdfhttp://205.196.122.19/q2lwxf8qw37g/j2j5nn756pwpncg/Modul-AplikasiIT1.rarhttp://www.w3schools.com/html/default.asphttp://www.w3schools.com/css/default.asphttp://ict.ft-untirta.ac.id/articles/28-web-developing/51-apa-itu-cms-content-management-system.htmlhttp://www.pixaal.com