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
Bentuk dari Tag HTML :
<ELEMENT ATTRIBUT =“VALUE”> ELEMENT = NAMA TAG ATTRIBUT = ATTRIBUT DARI TAG VALUE
= VALUE DARI ATTRIBUT
Contoh dari Tag HTML :
Contoh / struktur dasar Dokumen HTML Sederhana //tag pembuka suatu dokumen html //tag penanda bagian judul dokumen HTML //tag pemberian judul dokumen //tag penanda bagian isi dari dokumen Halo Dunia
Elemen Paragraf dalam HTML
…..
Attribut tambahan untuk pemformatan Paragraf ATRIBUT
Align
VALUE Right Center Left Justify
KETERANGAN Rata Kanan Rata Tengah Rata Kiri Rata Kiri/Kanan
Elemen Heading dalam HTML
….. X Bernilai 1 sampai dengan 6 Attribut tambahan untuk pemformatan Heading ATRIBUT
Align
VALUE Right Center Left
KETERANGAN Rata Kanan Rata Tengah Rata Kiri
Physical Style dalam HTML ELEMEN
FUNGSI
….….…. <s>…. …. <small>…. <sub>…. <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
….. Attribut tambahan untuk pemformatan Font. ATRIBUT
Size Color Face
VALUE
1 sampai dengan 7 Nama warna / Kode Hex Warna Jenis Font
KETERANGAN
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
text 1
text2
Attribut tambahan untuk pemformatan Ordered List. ATRIBUT
Type
VALUE
A a I i 1
KETERANGAN
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
text 1
text2
Attribut tambahan untuk pemformatan Unordered List. ATRIBUT
Type
VALUE
disc circle square
KETERANGAN
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
Attribut tambahan untuk pemformatan Penyisipan gambar. ATRIBUT
VALUE
KETERANGAN
src alt align
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
height width border
Elemen Hyperlink (link) dalam HTML
….. Attribut tambahan untuk pemformatan Hyperlink. ATRIBUT
VALUE
HREF
URL/ Halaman web
NAME
#namabagian
KETERANGAN
Diisi dengan nama halaman web atau nama URL yang akan di-linkkan. Digunakan untuk link dalam satu dokumen web.
Membuat Tabel dalam dokumen HTML
…
Elemen yang digunakan untuk membuat tabel ELEMEN
KETERANGAN
...
.....
.....
.....
...
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
BORDER CELLSPACING CELLPADDING
Value
Angka (px) Angka (px) Angka (px)
WIDTH ALIGN VALIGN BGCOLOR ROWSPAN
Angka (px) Left, Center, Right Midle, Bottom, Baseline Warna Angka (px)
COLSPAN
Angka (px)
Keterangan
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.
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 <style>
p { color:red; text-align:center; }
Hello World!
This paragraph is styled with CSS.
Hasil di browser
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
Metode penulisan Inline CSS
CSS didefinisikan langsung pada tag HTML yang bersangkutan, dengan menambahkan atribut style dalam tag HTML
HALO CSS
Metode penulisan Embedded CSS CSS didefinisikan terlebih dahulu dalam tag <style> … yang diletakan di dalam tag
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.
