-
7/26/2019 Materi Web HTML
1/18
HTML & CSS
By afkri
[email protected]
www.alienwerks.org
mailto:[email protected]:[email protected]:[email protected]
-
7/26/2019 Materi Web HTML
2/18
Tag ag dasar Srukur dasar dari semua dokumen HTML adala!
seder!ana"
#aling idak diserai ole! elemen elemen aau ags beriku ini$%!ml '
(onainer uama #ada !alaman HTML%!ead ' (onainer unuk !alaman
inormasi bagi !eader%ile ' Menam#ilkan )udul !alaman%body ' Badan
uaman dari !alaman
Seia# ag" !arus diuu# dengan %*Misalnya" %!ml+%*!ml" %ile+%*ile"
ds
-
7/26/2019 Materi Web HTML
3/18
HTML ,ribues
,ribues ini yang digunakan #ada elemen elemen
HTML adala! id
,ribue id digunakan digunakan unuk #engidenifkasian
seia#elemen
#ada !alaman web aau #ada syle s!ee.
,ribue id digunakan unuk meng!ubungkan elemen dengan
syles!ee.
Class
Se#eri #ada aribue id" aribue class-uga digunakan
unuk meng!ubungkan suau elemen dengan syle s!ee Syle
,ribue syle memungkinkan kia unuk mens#esifkasikan auranCSS
dalam suau elemen" se#eri #ada cono! beriku$
-
7/26/2019 Materi Web HTML
4/18
-
7/26/2019 Materi Web HTML
5/18
ormaing
# Elemen Headings - :cono!
Ini adalah heading 1
Ini adalah heading 2 Ini adalah heading 3
Ini adalah heading 4
Ini adalah heading 5
Ini adalah heading 6
-
7/26/2019 Materi Web HTML
6/18
# Elemen
untuk membuatparagraf
Cono!
Ini adalah paragraf pertama.
Ini adalah paragraf kedua.
Ini adalah paragraf terakhir.
(ia da#a menggunakan aribue align unuk membua raa#aragra
misalnya
Ini adalah paragraf pertama dengan ratakiri.
Ini adalah paragraf kedua dengan ratatengah.
Ini adalah paragraf ketigadengan ratajutif!.
Ini adalah paragraf keempat dengan ratakanan.
-
7/26/2019 Materi Web HTML
7/18
#Elemen
ell#
%nda hari ini rela meng#r$ankan &aktu
hari li$ur untuk $elajar '().'hank
#Elemen Horizontal Rules -
Ini adalah paragraf 1
Ini adalah paragraf 2
-
7/26/2019 Materi Web HTML
8/18
# Elemen Bold Tet - :
*aragraf $erikut menggunakan te$al t!peface.
# Elemen itali! Tet - :
*aragraf $erikut menggunakan miring t!peface.
# Elemen "nderlined Tet - :
*aragraf $erikut menggunakan gari $a&ah t!peface.
-
7/26/2019 Materi Web HTML
9/18
# Elemen trike Tet - The :
*aragraf $erikut menggunakan c#ret
t!peface.
# Elemen upers!ript Tet - The :
*aragraf $erikut menggunakan upercript
t!peface.
-
7/26/2019 Materi Web HTML
10/18
# Elemen ubs!ript Tet - :
*aragraf $erikut menggunakan u$
t!peface.
# Elemen $arger Tet - :
*aragraf $erikut menggunakan $ig
t!peface.
-
7/26/2019 Materi Web HTML
11/18
# Elemen maller Tet -
*aragraf $erikut menggunakan mall
t!peface.
-
7/26/2019 Materi Web HTML
12/18
# Elemen %rouping - /lemens %di0 memungkinkan kia
unukmengelom#okkan bebera#a elemen unuk membuabagian1secion2 aau
sub bagian dari suau !alaman
Misalnya" kia membua suau elemen yang akan dileakkan
#ada #aragra kaki" kia akan %di0 id34ooer5. /lemen %di0
digunakan unuk #engelom#okan kedalam
elemen le0el blok
-
7/26/2019 Materi Web HTML
13/18
Lis ormaing
,da bebera#a cara unuk membua lis' Suau lis yang idak mem#unyai
order.
%ul y#e36s7uare6 %ul y#e36disc6 %ul y#e36circle6
-
7/26/2019 Materi Web HTML
14/18
' Suau lis yang mem#unyai order.
%ol y#e3686 ' 9##er'Case :umerals.
%ol y#e36i6 ' Lower'Case :umerals.
%ol y#e36a6 ' Lower'Case Leers.
%ol y#e36,6 ' 9##er'Case Leers.
-
7/26/2019 Materi Web HTML
15/18
Cono!
-
7/26/2019 Materi Web HTML
16/18
CSS fle
-
7/26/2019 Materi Web HTML
17/18
-
7/26/2019 Materi Web HTML
18/18
Lai!an
,nda bebas berkreasi unukmembua suau !alaman web.Buala! suau
!alaman web se#eri
cono! diaas
'inggu depan( kita sambungdengan dasar dasar )
