Website, Webmaster, Webdeveloper
Home > LOEKELOE > COMPUTER STUFF > Website, Webmaster, Webdeveloper > Bermain dengan teknologi HTML5: Part 3 (CSS3)
Total Views: 1779 Share : Facebook ShareFacebook Twitter ShareTwitter Google+ ShareGoogle+
Page 3 of 4 |  < 1 2 3 4 > 

gigcarnation - 07/09/2012 07:14 PM
#41

Quote:
Original Posted By xdgemini
gan mo nanya kalo bikin clearfloat pake id atau class ya...soal nya pas ane check di HTML5 kena error...
contoh :
 
ato
 


terserah ente, kan di CSSnya ente nentuin sendiri (pake # atau . D)

Quote:
Original Posted By S4nJi
Pake . di selector css3 bisa?
So something like this would work?
[html]
.pertama.keduax {
background: red; }

^^^
<body>
Ini mah bisa
lah ini?[/html]

Yep, : dan . fails
[code]http://jsfiddle.net/KDFTJ/[/code]

. bisa untuk multiclass, bukan class dengan titik
Mungkin bisa diselect pake javascript tapi css gak bisa untuk :
[html]
#element.class{
background: red; }

^^^
Ini bisa
Ini ga bisa, tapi bisa pake getElementById() seharusnya p
[/html]


kan .pertamax.keduax artinya menyeleksi div berclass pertamax dan keduax
jadi pertamax.keduax gak diberi style D
gest - 07/09/2012 08:34 PM
#42

Quote:
Original Posted By S4nJi
Pake . di selector css3 bisa?
So something like this would work?
[HTML].pertama.keduax {
background: red; }

^^^

Ini mah bisa
lah ini?[/HTML]
Yep, : dan . fails
[CODE]http://jsfiddle.net/KDFTJ/[/CODE]
. bisa untuk multiclass, bukan class dengan titik
Mungkin bisa diselect pake javascript tapi css gak bisa untuk :
[HTML]#element.class{
background: red; }

^^^
Ini bisa
Ini ga bisa, tapi bisa pake getElementById() seharusnya p[/HTML]


Excellent questions! D
Ane lupa jelasin di atas, untuk html attributes id dan class seperti di atas tadi yah. Untuk CSS, however, is a touch different (ini spec css2 loh):
[CODE]http://www.w3.org/TR/CSS21/syndata.html#characters[/CODE]
Jadi untuk character seperti hyphens (-), underscores (_), colons ( : ), dan periods (.) harus di escape. Caranya ada dua, yaitu:

[*]Unicode code point.
Misal untuk periods (.) adalah U+002E (bisa dilihat dari char map untuk windows), kalo pengen dipake buat css selector, harus di-escape jadi \2e (dengan spasi di akhir) atau \00002e (menggunakan enam hexadecimal digits).
[*]Direct Backslash
Ini lebih elegan, caranya adalah dengan langsung menambahkan backslash (\). Jadi untuk periods (.) bisa di escape jadi \.


Jadi untuk pertanyaan di atas, solusinya kurang lebih sbb:
[HTML]
CSS:
.pertama.keduax,
.pertama\.keduax,
.\:withcolon,
.\-hyphen,
.\_underscore
{
background: red;
}

HTML:
Class: pertama keduax
Class: pertama.keduax
Colon (\)
Hyphen (-)
Underscore (_)
[/HTML]
[CODE]http://jsfiddle.net/KDFTJ/2/[/CODE]
Note: Untuk IDs (HTML5 only) juga sama harus di escape.
gigcarnation - 07/09/2012 08:53 PM
#43

Quote:
Original Posted By gest


Excellent questions! D
Ane lupa jelasin di atas, untuk html attributes id dan class seperti di atas tadi yah. Untuk CSS, however, is a touch different (ini spec css2 loh):
[CODE]http://www.w3.org/TR/CSS21/syndata.html#characters[/CODE]
Jadi untuk character seperti hyphens (-), underscores (_), colons ( : ), dan periods (.) harus di escape. Caranya ada dua, yaitu:

[*]Unicode code point.
Misal untuk periods (.) adalah U+002E (bisa dilihat dari char map untuk windows), kalo pengen dipake buat css selector, harus di-escape jadi \2e (dengan spasi di akhir) atau \00002e (menggunakan enam hexadecimal digits).
[*]Direct Backslash
Ini lebih elegan, caranya adalah dengan langsung menambahkan backslash (\). Jadi untuk periods (.) bisa di escape jadi \.


Jadi untuk pertanyaan di atas, solusinya kurang lebih sbb:
[HTML]
CSS:
.pertama.keduax,
.pertama\.keduax,
.\:withcolon,
.\-hyphen,
.\_underscore
{
background: red;
}

HTML:
Class: pertama keduax
Class: pertama.keduax
Colon (\)
Hyphen (-)
Underscore (_)
[/HTML]
[CODE]http://jsfiddle.net/KDFTJ/2/[/CODE]
Note: Untuk IDs (HTML5 only) juga sama harus di escape.


the excellent question si answered bya excellent answer D

jujur aja gan, ane baru tau kalo pakenya unicode atau backslash

lagipula ane kalau bikin class atau id cuman pakai huruf atau angka ata kombinasi keduanya lo malu:
jadi kuram paham soal beituan malus
gest - 07/09/2012 10:19 PM
#44

Quote:
Original Posted By gigcarnation
ane juga gitu gan D
kirain unicode gak bisa dipake

btw untuk semantik menurut ane sih kagak, soalnay kagak ada tag penutupnya
soal google menurut ane sih itu kesalahan, soalnya google kan bukan patokan pembuatan website yang smeantik D

CMIIW


Ketentuan tag penutup yang optional itu ada di spec html5:
[CODE]http://www.w3.org/TR/html5/syntax.html#optional-tags[/CODE]
Dan tidak memakai sesuatu yang optional di html5 seperti 404 page google berarti tidak semantic?
Menurut ane, semantik dalam web sederhananya adalah menggunakan tag pada tempatnya dan sesuai dengan fungsinya, untuk menunjukan maksud dari konten dalam sebuah tag html tsb bagi manusia (dan mesin). Jadi mungkin tidak ada hubungannya dengan harus memakai end tags untuk semua tag html, termasuk bila end tag tsb optional..
Misal, bisa dilihat yang mana semantic dan tidak:
[HTML]
HTML #1:
heading
Content Here

HTML #2:
Heading
Content Here
[/HTML]
Atau mungkin bisa share referensi yang menunjukan gak pake tag penutup adalah tidak semantic?
Musicrebirth - 08/09/2012 07:31 PM
#45

maaf suhu-suhu kok bahasannya semantic..? itu apa y..? trus ngaruh ke web apa y..? jadi bingung.. bingung
gigcarnation - 10/09/2012 07:40 PM
#46

Quote:
Original Posted By gest


Ketentuan tag penutup yang optional itu ada di spec html5:
[CODE]http://www.w3.org/TR/html5/syntax.html#optional-tags[/CODE]
Dan tidak memakai sesuatu yang optional di html5 seperti 404 page google berarti tidak semantic?
Menurut ane, semantik dalam web sederhananya adalah menggunakan tag pada tempatnya dan sesuai dengan fungsinya, untuk menunjukan maksud dari konten dalam sebuah tag html tsb bagi manusia (dan mesin). Jadi mungkin tidak ada hubungannya dengan harus memakai end tags untuk semua tag html, termasuk bila end tag tsb optional..
Misal, bisa dilihat yang mana semantic dan tidak:
[HTML]
HTML #1:
heading
Content Here

HTML #2:
Heading
Content Here
[/HTML]
Atau mungkin bisa share referensi yang menunjukan gak pake tag penutup adalah tidak semantic?


ok deh kalau emang ada
soalnay itu kan hanyalah pandapat ane

Quote:
Original Posted By Musicrebirth
maaf suhu-suhu kok bahasannya semantic..? itu apa y..? trus ngaruh ke web apa y..? jadi bingung.. bingung


semantic itu kayak penggunaan tag yang sesuai dengan tujuannya
contoh:
penggunaan tag untuk menampilkan alamat

bisa diliat dipasrt 2 kok D
CR-7 - 11/09/2012 01:02 AM
#47

Thread menarik nih...
Bahas sedikit tentang CSS3 Media Query. Intinya kita bisa bikin style macam2 sesuai dengan browser resolution. Biar lebih jelas langsung aja ke TKP.

http://jsfiddle.net/IronLady/q4aqZ/2/

Itu saya bikin contoh responsive text dan responsive image.

Hasil akhirnya disini :

http://jsfiddle.net/IronLady/q4aqZ/2/embedded/result/

Coba resize browser biar kelihatan. Yb
gigcarnation - 11/09/2012 05:03 PM
#48

Quote:
Original Posted By CR-7
Thread menarik nih...
Bahas sedikit tentang CSS3 Media Query. Intinya kita bisa bikin style macam2 sesuai dengan browser resolution. Biar lebih jelas langsung aja ke TKP.

http://jsfiddle.net/IronLady/q4aqZ/2/

Itu saya bikin contoh responsive text dan responsive image.

Hasil akhirnya disini :

http://jsfiddle.net/IronLady/q4aqZ/2/embedded/result/

Coba resize browser biar kelihatan. Yb


emang bagus gan D
tapi ada kelemahannya
yaitu kalo webnya ngeload banyak file javascript, css, dll.
maka kalo pake hp aksesnya jadi lelet bahkan bisa hang

contoh: gimana hayo kalo facebook terapkan media queries (tidak pake mobile site) dan diakses lewat hape D

btw untuk demonay ane uda liat gan D
semakin kecil browsernya ntar berubah juga warna teksnya D
gest - 11/09/2012 08:22 PM
#49

Quote:
Original Posted By gigcarnation
ok deh kalau emang ada
soalnay itu kan hanyalah pandapat ane

kita sama-sama belajar, kalo emang ada referensi yg valid bilang gak pake tag penutup adalah tidak semantic, ya berarti pendapat ane yang salah, hehe...
thx untuk open mindednya ts iloveindonesias

Quote:
Original Posted By gigcarnation
emang bagus gan D
tapi ada kelemahannya
yaitu kalo webnya ngeload banyak file javascript, css, dll.
maka kalo pake hp aksesnya jadi lelet bahkan bisa hang

contoh: gimana hayo kalo facebook terapkan media queries (tidak pake mobile site) dan diakses lewat hape D

btw untuk demonay ane uda liat gan D
semakin kecil browsernya ntar berubah juga warna teksnya D


Iya, responsive web design gak selalu bisa jadi solusi. Jadi tergantung case juga mau pake separate mobile website ataukah pake responsive web design.
CR-7 - 11/09/2012 09:58 PM
#50

Quote:
Original Posted By gest
kita sama-sama belajar, kalo emang ada referensi yg valid bilang gak pake tag penutup adalah tidak semantic, ya berarti pendapat ane yang salah, hehe...
thx untuk open mindednya ts iloveindonesias

Baru ikutan nimbrung, mau urun pendapat aja.
Klo menurut ane, gak ada hubungannya closing tag sama semantic.
Intinya semantics itu punya arti. Coba kita bandingkan Markup dan Semantic, selama ini kan kita kenal , , , dll. Itu semua Markup, klo dirender browser hasilnya pas tapi tag2 itu kan gak ada artinya. Nah maksudnya semantic di HTML5 ini kan, ada tag2 baru yang punya "arti", seperti , , dll. Itu kalau menurut ane.

Quote:
Original Posted By gest

Iya, responsive web design gak selalu bisa jadi solusi. Jadi tergantung case juga mau pake separate mobile website ataukah pake responsive web design.

Iya memang gak selalu harus kita implement responsive web design. Tapi gak bisa disangkal lagi klo sekarang lagi trend dan beberapa client maju ke gw, dengan request "Responsive", "Skeleton" atau "Bootstrap" ngakak
S4nJi - 11/09/2012 10:19 PM
#51

HTML5 memang ada protokol untuk ngurus tag yang ga ketutup, jadi tag kebuka dimaklumi html5 D
Tapi lain hal dengan XHTML, semua tag case-sensitive, harus ditutup, dll, lupa D

---
Anyways baru tau di css bisa escaping juga D
Nice information got D

---
Anyways again, berarti ini ada trick css baru: selector css fails, javascript getElementById works D
Check it out D
[code]http://jsfiddle.net/s4nji/H8xXa/[/code]

Note that dua duanya pake "#c1.c1" D

--edit2--
Ooomph! pake selector ini bisa jadinya matabelo:
"#c1\.c1" di escape genit:
gest - 11/09/2012 11:50 PM
#52

Quote:
Original Posted By S4nJi
HTML5 memang ada protokol untuk ngurus tag yang ga ketutup, jadi tag kebuka dimaklumi html5 D
Tapi lain hal dengan XHTML, semua tag case-sensitive, harus ditutup, dll, lupa D

---
Anyways baru tau di css bisa escaping juga D
Nice information got D

---
Anyways again, berarti ini ada trick css baru: selector css fails, javascript getElementById works D
Check it out D
[CODE]http://jsfiddle.net/s4nji/H8xXa/[/CODE]
Note that dua duanya pake "#c1.c1" D

--edit2--
Ooomph! pake selector ini bisa jadinya matabelo:
"#c1\.c1" di escape genit:


xhtml lebih strict dan tidak sama aturannya dengan html. kalo xhtml beda lagi pembahasannya ntar. hehe..

---

glad to share it with you cendols

---

[HTML]





#c1\.c1 {
background: hotpink;
}




// javascript
document.getElementById('c1.c1');

// jquery
$('#c1\\.c1');

[/HTML]

Check again:
[CODE]http://jsfiddle.net/H8xXa/1/[/CODE]

---

yep, dan catatan: untuk javascript library yang pake selectors API / syntax selector yang sama, misal jquery.. harus diambil yang udah di-escape dan di-escape lagi:
[CODE]$('#c1\\.c1');[/CODE]
gest - 12/09/2012 12:18 AM
#53

Quote:
Original Posted By CR-7
Baru ikutan nimbrung, mau urun pendapat aja.
Klo menurut ane, gak ada hubungannya closing tag sama semantic.
Intinya semantics itu punya arti. Coba kita bandingkan Markup dan Semantic, selama ini kan kita kenal , , , dll. Itu semua Markup, klo dirender browser hasilnya pas tapi tag2 itu kan gak ada artinya. Nah maksudnya semantic di HTML5 ini kan, ada tag2 baru yang punya "arti", seperti , , dll. Itu kalau menurut ane.


Iya memang gak selalu harus kita implement responsive web design. Tapi gak bisa disangkal lagi klo sekarang lagi trend dan beberapa client maju ke gw, dengan request "Responsive", "Skeleton" atau "Bootstrap" ngakak


, , , dll "ada artinya" gan... , , dll itu tag semantic lain yang baru, dan diperkenalkan di html5:
Quote:
While the true semantic web may depend on complex RDF ontologies and metadata, every HTML document makes its contribution to the meaningfulness of the Web by the correct use of headings, lists, titles and other semantic markup wherever possible. The correct use of Web 2.0 'tagging' creates folksonomies that may be equally or even more meaningful to many. HTML 5 will introduce several new semantic tags that will become commonplace in web documents of the future, such as section, article, footer, progress, nav etc.


Dari wikipedia:
[CODE]http://en.wikipedia.org/wiki/Semantic_HTML[/CODE]
gigcarnation - 12/09/2012 08:46 PM
#54

Quote:
Original Posted By gest

kita sama-sama belajar, kalo emang ada referensi yg valid bilang gak pake tag penutup adalah tidak semantic, ya berarti pendapat ane yang salah, hehe...
thx untuk open mindednya ts iloveindonesias



Iya, responsive web design gak selalu bisa jadi solusi. Jadi tergantung case juga mau pake separate mobile website ataukah pake responsive web design.


ok deh D

emang gan, setiap teknik pasti ada kelebihan dan kekurangannya masing-masing D

Quote:
Original Posted By CR-7

Baru ikutan nimbrung, mau urun pendapat aja.
Klo menurut ane, gak ada hubungannya closing tag sama semantic.
Intinya semantics itu punya arti. Coba kita bandingkan Markup dan Semantic, selama ini kan kita kenal , , , dll. Itu semua Markup, klo dirender browser hasilnya pas tapi tag2 itu kan gak ada artinya. Nah maksudnya semantic di HTML5 ini kan, ada tag2 baru yang punya "arti", seperti <header> , , dll. Itu kalau menurut ane.


Iya memang gak selalu harus kita implement responsive web design. Tapi gak bisa disangkal lagi klo sekarang lagi trend dan beberapa client maju ke gw, dengan request "Responsive", "Skeleton" atau "Bootstrap" ngakak


setuju gan D

Quote:
Original Posted By S4nJi
HTML5 memang ada protokol untuk ngurus tag yang ga ketutup, jadi tag kebuka dimaklumi html5 D
Tapi lain hal dengan XHTML, semua tag case-sensitive, harus ditutup, dll, lupa D

---
Anyways baru tau di css bisa escaping juga D
Nice information got D

---
Anyways again, berarti ini ada trick css baru: selector css fails, javascript getElementById works D
Check it out D
[code]http://jsfiddle.net/s4nji/H8xXa/[/code]

Note that dua duanya pake "#c1.c1" D

--edit2--
Ooomph! pake selector ini bisa jadinya matabelo:
"#c1\.c1" di escape genit:


ane jgua abru tau gan kalo CSS bisa diescape
lagipula gak kepikiran buat class pake tanda titik

Quote:
Original Posted By gest


xhtml lebih strict dan tidak sama aturannya dengan html. kalo xhtml beda lagi pembahasannya ntar. hehe..

---

glad to share it with you cendols

---

[HTML]
<!-- HTML -->


<!-- CSS -->
<style>
#c1\.c1 {
background: hotpink;
}
</style>

<!-- JavaScript -->
[removed]
// javascript
document.getElementById('c1.c1');

// jquery
$('#c1\\.c1');
[removed]
[/HTML]

Check again:
[CODE]http://jsfiddle.net/H8xXa/1/[/CODE]

---

yep, dan catatan: untuk javascript library yang pake selectors API / syntax selector yang sama, misal jquery.. harus diambil yang udah di-escape dan di-escape lagi:
[CODE]$('#c1\\.c1');[/CODE]


yup, xhtml itu kan gabungan HTML dan XML
dan XML itu aturannay strict D

wah, baru tahu nih kalo ada yang harusa double escape genit:

Quote:
Original Posted By gest


, , , dll "ada artinya" gan... <header> , , dll itu tag semantic lain yang baru, dan diperkenalkan di html5:


Dari wikipedia:
[CODE]http://en.wikipedia.org/wiki/Semantic_HTML[/CODE]


D
fachrils - 12/09/2012 10:40 PM
#55
Biohazard
suhu newbie ijin share lg ngakaks
iseng iseng nyoba border , dan border radius make % an dapet inspirasi

[CODE]
#bunderan {
width: 0; height: 0;
border: 60px solid;
border-radius: 50%;
border-top-color: yellow;
border-bottom-color: yellow;
border-left-color: black;
border-right-color: black;
}[/CODE]

hasil nya kek gini
Spoiler for ss
Bermain dengan teknologi HTML5: Part 3 (CSS3)
zona848 - 13/09/2012 12:18 PM
#56

wah ilmu baru ni gan , #placeholder

kalo buat template sih udh paham ane,

yg kesulitan bisa PM ane \)
jelek92 - 02/10/2012 02:58 PM
#57

ijin menimba ilmu di sini yah

mohon bimbingannya para mastah
adgoez - 02/10/2012 05:42 PM
#58

ijin ninggalin jejak...
jevrie10 - 02/10/2012 11:09 PM
#59

permisi gan newbie numpang tanya. ane pgn belajar web design. mw tanya editor yg paling enak di pke buat nge design web pke apa ya? trs klo design web itu ada framework ny gak sih? klo buat bkin back end web kan biasa ny pke CI or Cake thu. klo di front end kyk ngedesign web ada g?

terima kasih gan sebelumnya D
Zeng61 - 14/10/2012 08:42 AM
#60

lanjut Gan, bermanfaat sangat nih Thread
Page 3 of 4 |  < 1 2 3 4 > 
Home > LOEKELOE > COMPUTER STUFF > Website, Webmaster, Webdeveloper > Bermain dengan teknologi HTML5: Part 3 (CSS3)