Scribd
Unggah
44 tayangan54 halaman

HTML

HTML digunakan untuk membuat struktur dan menyajikan konten pada web. Terdiri dari tag-tag seperti paragraf, judul, tabel, dan lainnya. CSS digunakan untuk mendesain tampilan dengan mengatur warna, ukuran, posisi dan lainnya. Javascript digunakan untuk membuat interaksi seperti animasi dan slideshow.

Diunggah oleh

RammaTrilendaII
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
44 tayangan54 halaman

HTML

HTML digunakan untuk membuat struktur dan menyajikan konten pada web. Terdiri dari tag-tag seperti paragraf, judul, tabel, dan lainnya. CSS digunakan untuk mendesain tampilan dengan mengatur warna, ukuran, posisi dan lainnya. Javascript digunakan untuk membuat interaksi seperti animasi dan slideshow.

Diunggah oleh

RammaTrilendaII
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 54

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 (
www.w3.org). 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(uk.judul),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 : http://www.google.com dengai protokolnya
-Internal Link = halaman lain yang ada di website kita(1 domain)
ex:<a href=“hyperlink.html”>
-relatif URL = halaman lain yang berada di folder lain
ex:”../hyperlink.html”
* 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 (www.w3.org)
* 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 css-trics.com/https://developer.mozilla.org/en-
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 tag.id,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=style.css”>
* 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 codepen.io
* 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
* 3.Pseudo 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 kotak.properti display pada css
mengatur perilaku dari kotak tsb.)
(setiap tag html memiliki nilai default untuk properti display.tetapi
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
2.Dimensi 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 html.khususnya margin dan padding
searching meyerweb.com lalu copy
Contoh html dan css membuat web sederhana

Anda mungkin juga menyukai