HTML
Hypertext Markup Language
* HTML diciptakan oleh Tim Berners-Lee, Dia
juga yang menciptakan HTTP,WWW,Web
browser/server/page.
* Dia dikenal juga sebagai presiden W3C (
[Link]). Tujuan W3C adalah untuk
pengembangan protokol dan guideline
perkembangan web untuk waktu yang jangka
panjang.
* Untuk membuat web sederhana atau dasar nya
kita harus mempelajari bahasa HTML,CSS dan
Javasript.
* HTML = membuat struktur dan menyajikan
konten
* CSS = menghias dan mendesain HTML
* Javasript = banyak kegunaan dari
javascript,dalam konteks ini agar web terlihat
interaktif (bisa kita sisipkan animasi,slide show
dll)
*Struktur html
Struktur dan tag HTML sbb:
<!DOCTYPE html> struktur tag =<nama tag atribut=“nilai”>
<html> ex: <body bgcolor=“lightblue”>
<head>(title(judul),style,script,meta(mendeskipsikan web)
<title></title>
</head>
<body>(h1-h6([Link]),p (paragraf),br(baris),hr(garis
horiz),em(emphersis),strong(penekanan kalimat),
img (sisip gambar),
a(hyperlink),
ul(unorder list),ol(order list),li(list item),dl(definition list),dt(..),dd(..)
table(tabel), thead, tbody
form,input,select,button
script=script
object=object
grouping= div, span
komentar=<!--...-->
</body>
</html>
* Atribut Global
* Access key = elemen yang bisa di akses keyboard
* Class = elemen
* Id = elemen
* Dir = arah (direction)
* Lang = language
* Style = mengkondisikan inline CSS
* Title = judul elemen
* Tag yang ada di paragraf
*Paragraf
b = bold
i = italic
u = underline
em = penekanan pada teks
strong = penekanan yang lebih kuat(cetak tebal)
*Heading Untuk menentukan
heading harus
sesuai kepentigan
*List
* ul(unorder list)=list tidak terurut
ol(order list)=list terurut
li(list item)
dl(definition list)
dt(..)
dd(..)
*Hyperlink
* Hyperlink adalah suatu cara menghubungkan suatu bagian
didalam slide, file, program ataupun halaman web dengan
bagian yang lainnya dalam bidang tersebut.
* Tag nya = a (anchor), didalam tag harus ada source nya dengan
memakai <a href=“....”></a>
* Hyperlink ada beberapa jenis :
-External Link = ex : [Link] dengai protokolnya
-Internal Link = halaman lain yang ada di website kita(1 domain)
ex:<a href=“[Link]”>
-relatif URL = halaman lain yang berada di folder lain
ex:”../[Link]”
* Page anchor = pindah ke tujuan tertentu disebuah halaman.
untuk membuka link dengan tab baru harus meggunakan :
<a target=“....”></a>
_self = halaman yg sama
_blank = tab baru
_parent
_top
* Jika klik “disini” maka
*Image
* <img src=“...”>
ada 2 cara
-Internal resource = gambar yang ada di pc kita(1 domain)
jika diluar folder maka berlaku relatif url
-external resource = gambar yang ada diluar PC kita ex:google
tidak disarankan karena memakai sumber web orang lain
* Atribut img
src = sumber
alt = alternative text
title = judul pada gambar
width = lebar(jika angka saja maka otomatis akan px(pixel))
jika pakai % maka akan menyesuaikan halaman
height = tinggi
*Tabel
* Struktur tabel baris
Baris 1, kolom 1 Baris 2 ,kolom 2
Baris 2, kolom 1 Baris 2, kolom 2
kolom Cell/data
tag = <table></table>
atribut
border : garis disekitar cell
cellspacing : spasi antar cell
cellspading : luas cell
colspan
rowspan
*Table Merging * Atribut :
colspan = menggabungkan 2 atau lebih cell
yg horizontal (kolom)
rowspan = menggabungkan 2 atau lebih cell
yg vertikal (baris)
*Form
* Untuk mengelola data input dari user
* Tag nya <form></form>
* Elemen
* <Input> = untuk menginput sesuatu
<text area> = isi catatan/komentar
<selesct> = drop down / combo bar
<button> = tombol
<label> = menandai sebuah elemen input
* Elemen input <input type=“....”>
text,password,radio,checkbox,submit,reset,button
*CSS (cascading style sheet)
* Mekanisme sederhana yang mengatur gaya/style
(warna,ukuran,posisi dll) pada halaman web ([Link])
* Aturan yang menampilkan elemen/tag HTML
* Dibuat terpisah dengan HTML
* Bertujuan untuk memisahkan konten dengan style
* 1 CSS dapat digunakan untuk banyak halaman HTML
* 1 halaman HTML dapat terlihat berbeda jila menggunakan CSS yang
berbeda pula
*Anatomi CSS
Selector { property: value; }
eks: h1 { color: blue; } cara kerjanya =(CSS pilih seluruh elemen h1,
lalu ubah teks didalamnya menjadi berwarna biru)
* Bisa dilihat di [Link]/[Link]
US/docs/Web/CSS/reference
* Eks : h1 {
* font-family: “courier Mew”;
text-align: “center”;
font-size: ”30px”;
color: “blue”;
* }
Selector digunakan untuk memilih dan memanipulasi elemen
spesifik pada html
* Elemen HTML dipilih berdasarkan [Link],class bahkan pola/pattern
* Semakin kompleks struktur HTML,selector juga semakin kompleks
*Menempatkan CSS
* Embed <style></style>, disimpan ada file yang sama
* External, buat file CSS sendiri terpisah dari HTML dengan menaruh
tag di dalam head dibawah title
<link rel=stylesheet”href=[Link]”>
* Inline <p style=“color: blue;”>...</p> disisipkan di file yg
sama
Embed <style></style>, disimpan ada file
yang sama
*Font Styling
* Font (type face) dan text (properti pendukung) kadang property
nya berbeda
* Font-family=mengatur jenis font
* Font-size=ukuran (px,%,em)
* Font-weight=ketebalan(lighter,normal,100-900,bold,bolder)
* Font-variant=mengubah font menjadi small caps(normal,small
caps)
* Font-style=cetak miring(normal,italic,oblique)
* Line-height=spasi antar baris(normal,px,em)
* Urutan jika ingin disingkat
* Style-variant-weight-size-line height-family
*TEXT STYLING
* Bisa menggunakan web [Link]
* Jika ingin menulis komentar di css, menggunakan /*....*/
* Color= memberikan warna
* Text-align= memberi format paragraf
* Text-indent= memberi indentasi pada paragraf
* Text-decoration=mengatur dekorasi teks
* Text-transform=mengatur ukuran huruf(besar,kecil,kapital)
* Letter-spacing=mengatur posisi antar huruf
* Word-spacing=mengatur posisi antar kata
* Color bisa dengan format warna(red,blue etc)
* hexadecimal(#FF0000,#2ob2aa etc)
* rgb (255,0,0) dll
* Align=left,right,center,justify
* Indent=px,%
* Decoration=none,underline,overline,line-through
* Trasform=none,lowercase,uppercase,capitalize
* Letter-spacing=normal,px
* Word-spacing=normal,px
*Background
* Background-color= mengatur warna
* Image=gambar
* Position=mengatur posisi
* Repeat=mengatur jenis pengulangan gambar
* Disingkat background: color url() position repeat:
*Selector
* Digunakan pada CSS untuk mengenali sebuiah elemn HTML yg
akan diberi style
* Selector =elemen HTML,id,class dan complex selector
* ID
* Sebuah elemen HTML yang hanya boleh memilik 1 ID
* Setiap halaman hanya boleh memiliki 1 elemen pada 1 ID
* Dapat digunakan sebagai penanda halaman untuk link
* Digunakan juga untuk javascript
* Sebaiknya tidak digunakan untuk CSS(letter pakai class)
*Pseudo Class
* Kelas semu yang dimiliki oleh sebuah elemen HTML, yang
membuat kita dapat mendefinisikan style pada keadaan tertentu
dari elemen tersebut(aktif pada keadaan tertentu)
* 1. Pseudo Class yang berhubungan dengan link
* :link
style default pada sebuah link( a yg memilik href )
* :hover
style ketika cursor mouse berada diatas sebuah link/elemen
* :active
style ketika sebuah link diklik(keadaan aktif)
* :visited
style ketika sebuah link sudah pernah dikunjungi
sebelumnya(browser yg sama)
* 2. Pseudi Class yg berhubungan dengan posisi elemen(1)
:first-child
memilih elemen pertama dari sebuah parent(elemen
pembungkusnya)
* :last-child
memilih elemen terakhir dari sebuah parent
* nth-child(n)
memilih elemen ke-n dari sebuah parent n bisa berarti urutan(1)
(2). Atau pola (2n)(3n+2)(4n-1) atau ganjil(even) dan genap (odd)
akan aktif jika elemennya merupakan child dari elemen yang lain
* [Link] Class yang berhubungan dengan posisi elemen(2)
* :first-of-type
memilih elemen pertama dari sebuah jenis/tipe tag
* Last-of-type
memilih elemen terakhir dari sebuah jenis/tipe tag
*CSS LAYOUTING
* Adalah teknik css untuk mengatur dan meletakan atau memposisikan
elemen-elemen HTML yang telah dibuat menggunakan syntaks css.
* 1. Display
* Adalah sebuah tag pada html yang digunakan untuk memberikan
maksud pada konten tag <div> dan <span> tidak memiliki arti
apapun. Keduanya digunakan untuk mengelompokan tag-tag HTML
dan memberikan informasi terhadap tag tag tersebut.
KESIMPULANNYA HANYA UNTUK MENGELOMPOKKAN.
* Default <div> - display : block;
<span> - display : inline-block;
* (setiap tag html ada di dalam [Link] display pada css
mengatur perilaku dari kotak tsb.)
(setiap tag html memiliki nilai default untuk properti [Link]
kita juga dapat mengubah perilaku dari tag tsb dengan mengganti
valuenya)
Value Display
1. Inline
-elemen yang secara default tidak menambah baris baru ketika
dibuat
-lebar dan tinggi elemennya sebesar konten yang ada didalamnya
-kita tidak dapat mengatur tinggi dan lebar dari elemen inline
-margin dan padding hanya memengaruhi elemen secara
horizontal,tidak vertikal
elemennya : b, strong, i, em, a, span, sub, sup, button, input,
label, select, textarea.
2. Inline-Block
- tidak ada elemen yg secara default memiliki properti (display:
inline-block)
-kita hanya bisa ubah manual properti tsb
-perilaku dasarnya sama dengan inline(elemen)
* 3. Block
-elemen html yg secara default menamnbahkan baris baru
setelah dibuat
- jika tidak diatur lebarnya, maka lebar default dari elemen
block akan memenuhi lebar dari browser / parentnya
-kita dapat mengatur tinggi dan lebar dari elemen block
elemennya : h1-h6, p, ol, ul, li, form, hr, div
* 4. none
-digunakan untutk menghilangkan sebuah elemen.
*Contoh div span
*Inline block
manual(memenuhi browser)
*Block tidak memenuhi
browser
*Mengubah block ke
inline
[Link] dan overflow
satuan dimensi width dan height
px (absolut)
% (relatif) menyesuaikan browser
in, cm, mm, pt(point), pc(pica)
Overflow (menyesuaikan konten)
value :
visible : default
auto : otomatis menambahkan scroll ketika konten tidak cukup
hidden : kontennya akan di hide
scroll : cukup atau tidak cukup pada konten tetap ada scroll
Contoh dimensi
Contoh pemakaian px dan %
overflow
Box Model Konsep
-setiap elemen dihalaman berada didalam sebuah box
-kita bisa mengatur ukuran dan posisi kotak tsb
-kita bisa memberi warna/gambar sbg backgorund kotak tsb
CSS Box model mendefinisikan kotak yg dihasilkan oleh sebuah
elemen lalu menampilkannya sesuai dengan format visualnya
CSS box terdiri dari 4 komponen
-margin : area transparan disekitar kotak (luar border)
-paddng: area transparan didalam kotak (antara konten dan border)
-content : konten di dalam box bisa berpua teks dan gambar
-border : batas disekeliling konten dan padding
properti dari 4 itu : top,right,bottom,left
MARGIN
-overlapping margin,terjadi ketika kita menggabungkan 2 buah
margin. Khusus vertikal margin tdk akan menambahkan kecuali
horizontal
-negatif margin
-auto khusus margin kiri dan kanan
margin
overlapping
Negatif margin
margin auto
Shorthand
margin : 50px 40px 30px 20 px (searah jarum jam)
Padding
secara keseluruhan sama seperti margin hanya padding tidak bisa
diberi nilai negatif, tidak punya nilai auto,padding menambha ukuran
elemen.
BORDER
(border : 5px solid black;) width , style, color
border : solid
dotted : garis titik titik
dashed : garis patah patah
double : garis nya dobel
BOX SIZING
untuk mengatur ukuran box agar balance
CSS RESET
teknik yg dapat membuat kita mengatur ulang nilai-nilai default dari
elemen pada [Link] margin dan padding
searching [Link] lalu copy
Contoh html dan css membuat web sederhana