Tutorial HTML / CSS ACS

Selamat datang ke Tutorial HTML / CSS ACS. Di sini kamu bisa mendapatkan informasi mengenai berbagai macam tutorial HTML / CSS yang bisa digunakan dalam fitur Edit CSS dan Edit Deskripsi Pribadi di ACS

Informasi Dasar:

• Apakah HTML itu?
• Tag HTML Dasar
• Apakah CSS itu?
• Kode Warna
• CSS di ACS

Apakah HTML Itu?

• HTML adalah singkatan dari Hyper Text Markup Language
• “Tag - tag  markup“ memberitahu browser bagaimana cara menampilkan sebuah halaman

HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.
HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh, misalnya anda akan membuat hurup tersebut ditampilkan menjadi tebal, maka penulisnnya harus diawali dengan TAMPIL TEBAL.Tanda < B > digunakan untuk mengaktifkan instruksi cetak tebal dan diakhiri teks juga ditulis < / B > gunannya untuk menonaktifkan cetak tebal tersebut.

Yang perlu diperhatikan adalah bahwa HTML dan CSS memisahkan antara isi (HTML) dan tampilan (CSS). HTML tidak lebih dari isi sebuah halaman yang terstruktur  dan format tampilan dari isi tersebut akan diurus oleh CSS.

Web ACS menggunakan berbagai macam TAG HTML. Di halaman profile kamu terdapat tag html: div, h1, a href, ul, li, p, img, table.

Kamu harus bisa belajar untuk memperhatikan dan membedakan antara ID dan CLASS misalnya

Nama yang ada di ID dan CLASS harus kamu ingat karena akan dipakai untuk Edit CSS

Tag HTML Dasar

Ketika ditampilkan di sebuah browser halaman kami kehilangan semua paragraf dan semua garis baru, apa yang kami bisa lakukan? Kami bisa menggunakan

, yang merupakan singkatan dari 'paragraf'. Letakan sebuah
, pada awal paragraf  dan sebuah
, pada akhir dari paragraf.

           

             

Tag menarik lainnya adalah
, yang merupakan  singkatan untuk 'line Break' atau garis baru. Hanya dengan mengetikan itu maka sebuah teks akan mulai pada garis baru. Another interesting tag is the < br /> tag, which stands for 'line BReak'. Just type that and the text will start on a new line.

HTML mendefinisikan banyak sekali elemen untuk menformat  teks, seperti tebal (bold) atau miring (italic) Dibawah ini adalah  contoh yang bisa kamu coba sendiri

 
Setiap tag HTML mempunyai awal dan akhir. Taruh teks anda diantara tag tersebut. Akhir dari tag biasanya mempunyai sebuah “/” (contoh: )

Tutorial di w3schools http://www.w3schools.com/css/

  Apakah CSS Itu?

• CSS merupakan singkatan dari Cascading Style Sheets.
• Style digunakan untuk mendefinisikan bagaimana menampilkan suatu elemen HTML.
• Style – style biasanya disimpan disebuah “style sheets”.
• Kumpulan style yang telah didefinisikan akan dikumpulkan menjadi satu.

Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).

CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi.

CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.

CSS adalah sebuah terobosan baru dalam design web, karena membuat pada developer mengontrol style dan tampilan sejumlah halaman web sekaligus. Seorang developer web bisa mendefinisikan sebuah style untuk tiap elemen HTLP dan memakainya kebeberapa halaman web lainnya. Untuk menganti tampilan keseluruhan, cukup hanya dengan menganti style dan semua elemen web akan terupdate secara otomatis.

Sintaks CSS terdiri dari tiga bagian: pemilih atau selektor (selector), sifat atau properti (property), dan nilai (value). “Selektor” biasanya adalah elemen atau tag HTML yang akan didefinisikan, “properti” adalah atribut yang akan diganti dengan “nilai” tertentu. Properti dan nilai dipisahkan dengan tanda titik dua (:) dan keduanya diapit oleh tanda kurung kurawal ({).

Jika suatu nilai mengandung spasi, nilai tersebut harus diapit dengan tanda petik ("). Untuk memberikan lebih dari satu properti bagi suatu selektor, pisahkan setiap kombinasi “properti:nilai” dengan tanda titik koma (;). Untuk membuat definisi gaya lebih mudah dibaca, definisi tiap properti dapat dilakukan per baris.

Contoh:

Pengaturan jenis huruf serta format tampilan karakter, spasi, kata, dan paragraf merupakan salah satu penggunaan umum lembar gaya dan dapat diatur dengan properti-properti berikut ini:

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font
• text-indent
• text-align
• text-decoration
• text-transform
• letter-spacing dan word-spacing
• line-height dan vertical-align
• white-space

Pengaturan warna dan latar tampilan dilakukan dengan properti-properti berikut:

• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

Format visual elemen dokumen HTML diatur dengan properti-properti:

• width dan height
• top, right, bottom, dan left
• margin, border, dan padding
• float dan clear
• position
• display dan visibility
• z-index
• overflow dan clip

Kode Warna

Warna web adalah warna-warna yang digunakan dalam perancangan halaman-halaman web, dan juga cara mendeskripsikan dan melakukan spesifikasi dari warna-warna tersebut.

Seorang penulis halaman web memiliki banyak kebebasan dalam memilih warna yang akan digunakan bagi elemen-elemen dokumen webnya. Warna-warna yang dimaksud dapat dispesifikasikan menggunakan triplet RGB dalam format heksadesimal (disebut juga sebagai triplet heksadesimal). Cara lain adalah dengan mereferensikan warna-warna tersebut dengan namanya dalam bahasa Inggris, akan tetapi cara ini berlaku terbatas pada hanya warna-warna yang telah dikenal atau dirumuskan. Untuk variasi-variasi warna lain umumnya digunakan piranti lunak grafik atau perkakas warna untuk membuatnya. Di samping adalah contoh sebuah palet warna yang terdiri dari 2048 macam warna.

Bahasa Cascading Style Sheets mendefinisikan jumlah warna yang sama dengan warna-warna dalam spesifikasi HTML 4. Sebagai tambahan CSS 2.1 menambahkan warna 'orange' pada daftar tersebut.

Warna	Heksadesimal	Nama
	#FFA500	orange
	#000000	black
	#000080	navy
	#008000	green
	#008080	teal
	#800000	maroon
	#800080	purple
	#808000	olive
	#C0C0C0	silver
	#808080	gray
	#0000FF	blue
	#00FF00	lime
	#00FFFF	aqua
	#FF0000	red
	#FF00FF	fuchsia
	#FFFF00	yellow
	#FFFFFF	white

Informasi warna lebih lengkap bisa dilihat di http://en.wikipedia.org/wiki/Web_colors

CSS di ACS

Untuk menganti tampilan halaman profil kamu dengan menggunakan CSS :

1. Pada “Halamanku”, klik link “Edit Profilku” dibagian menu kiri.
2. Sekarang kamu berada di halaman edit profilmu, klik “Edit CSS” pada menu tab.
3. Dihalaman edit CSS ini, kamu bisa mengedit CSS untuk tampilanmu, setelah selesai mengedit kamu bisa menyimpan hasil editan CSS kamu dengan mengklik tombol submit dan tombol preview, untuk melihat hasil perubahaan pada halaman profilmu.
   
   
   Berikut adalah beberapa contoh dan penjelasan untuk mengedit CSS di ACS:

/*css ini untuk mengganti warna background dan tulisan secara keseluruhan*/

body{

               background:#222;

               color:#555 !important;

}

/*css ini untuk mengganti background pada bagian header atas page*/

#header{

background:url(http://upload.kapanlagi.com/show.php?photo=fotoupload.jpg) bottom no-repeat;

}

/*css ini untuk mengganti warna tulisan menu diatas bagian pencarian cepat*/

#top-nav a{

               color:#333 !important;

}

/*css ini untuk mengganti warna tulisan dibagian pencarian cepat*/

#cari-cepat label{

               color:#333 !important;

}

/*css ini untuk mengganti warna background luar*/

#container{

               background:#fff;

}

/*css ini untuk mengganti warna background isi profile secara keseluruhan*/

#wrappercontent{

               background:transparent;

}

/*css ini untuk mengganti warna link secara keseluruhan*/

#wrappercontent a{

               color:#575757;

}

/*css ini untuk mengganti tampilan menu utama*/

#navbar{

               background:url(http://upload.kapanlagi.com/show.php?photo=fotoupload.gif);

}

/*css ini untuk mengganti tampilan menu utama (menu halamanku)*/

body#member #navbar ul li a#lmember,

#navbar ul li a:hover{

               background:url(http://upload.kapanlagi.com/show.php?photo=fotoupload.gif);

}

/*css ini untuk mengganti warna background pada bagian biodata kamu */

#bioteman #kanan{

               background:transparent;

}

/*css ini untuk mengganti warna garis pada bagian biodata kamu */

#bioteman #kanan .header{

               border-bottom:1px solid #555;

}

/*css ini untuk mengganti warna tulisan pada bagian lagi ngapain  di bagian biodata kamu */

#bioteman #kanan ul li div.lgng div a{

               color:#000;

}

/*css ini untuk mengganti warna border pada bagian foto utama kamu */

#bioteman #kiri img{

               border:3px solid #c4a668;

}

/*css ini untuk mengganti warna background dan tulisan pada bagian deskripsi foto utama kamu */

#bioteman #kiri #desc{

               background:#c4a668;

               color:#fff;

}

/*css ini untuk mengganti tampilan pada bagian url acs kamu di bagian biodata kamu */

#bioteman .urlacs{

               background:transparent;

               color:#555;

               border:none;

}

/*css ini untuk mengganti tampilan pada bagian menu teman (menu dibawah biodata kamu) */

#menuteman{

               border:none;

background:url(http://upload.kapanlagi.com/show.php?photo=fotoupload.gif) no-repeat;

}

/*css ini untuk mengganti warna tulisan menu pada bagian menu teman (menu dibawah biodata kamu) */

#menuteman a{

               color:#333;

}

/*css ini untuk mengganti tampilan pada hubungan teman */

.additionalinfo{

               border:none;

               color:#fff;

background:url(http://upload.kapanlagi.com/show.php?photo=fotoupload.jpg) no-repeat;

}

/*css ini untuk mengganti warna garis pada bagian hubungan teman */

.additionalinfo .header{

               border-bottom:1px solid #fff;

}

/*css ini untuk mengganti warna tulisan link pada bagian hubungan teman */

.additionalinfo a{

               color:#fff !important;

}

/*css ini untuk mengganti warna tulisan pada tombol buat baru pada bagian tulisan saya */

.bgbutton a span{

               color:#000;

}

/*css ini untuk mengganti tampilan tombol buat baru pada bagian tulisan saya */

.bgbutton a{

background:url(http://upload.kapanlagi.com/show.php?photo=fotoupload.jpg) no-repeat top left !important;

}

/*css ini untuk mengganti warna tulisan pada header judul tiap bagian */

.headerprofilmember, .headerprofilmember a, .headerprofilmember h3, .headerprofilmember h3 a{

               background:transparent !important;

               color:#000 !important;

}

/*css ini untuk mengganti tampilan header judul dari bagian album, sekolah, deskripsi pribadi, dan testimonial */

.headersection3{

background:url(http://upload.kapanlagi.com/show.php?photo=fotoupload.gif) !important;

}

/*css ini untuk mengganti tampilan header judul dari bagian tulisan saya, tentang saya, yang ingin ditemui

daftar teman dan daftar grup */

.headersection2{

background:url(http://upload.kapanlagi.com/show.php?photo=fotoupload.gif) !important;

}

/*css ini untuk mengganti warna tulisan link “lihat semua” pada bagian album, testimonial, teman dan grup*/

.infohead a{

.infohead a span{

               color:#000;

}

/*css ini untuk mengganti tampilan tombol link “lihat semua” pada bagian album, testimonial, teman dan grup*/

.infohead a{ background:url(http://upload.kapanlagi.com/show.php?photo=fotoupload.gif) no-repeat top left

 !important;             

}

/*css ini untuk mengganti warna background dan border pada bagian deskripsi pribadi*/

.entrysection6{

               background:transparent;

               border:1px solid #d0b784;

} 

/*css ini untuk mengganti warna background dan border pada bagian album foto dan daftar testimonial*/

.entrysection7{

               background:transparent;

               border:1px solid #d0b784;

} 

/*css ini untuk mengganti warna background dan border pada bagian tulisan saya*/

.entrysection8{

               background:transparent;

               border:1px solid #d0b784;

} 

/*css ini untuk mengganti warna background dan border pada bagian tentang saya, yang ingin 

ditemui, daftar teman dan daftar grup*/

.entrysection9{

               background:transparent;

               border:1px solid #d0b784;

} 

/*css ini untuk mengganti warna pada tab yang belum terpilih di bagian daftar sekolah dan tulisan*/

.tabmenu li a{

               background:#fff6e2 ;

               border:1px solid #d0b784;

}

/*css ini untuk mengganti warna pada tab yang belum terpilih dan dipilih menggunakan mouse di 

bagian daftar sekolah dan tulisan*/

.tabmenu li a:hover{

               background:#ffe3a8;

}

/*css ini untuk mengganti warna pada tab yang sudah terpilih di bagian daftar sekolah dan tulisan*/

.tabmenu li.selected a{ 

               border-bottom-color:transparent;

               background:#ffe3a8;

}

/*css ini untuk mengganti warna pada tab yang sudah terpilih dan dipilih menggunakan mouse 

di bagian daftar sekolah dan tulisan*/

.tabmenu li.selected a:hover{ 

               background:#ffe3a8;

}

/*css ini untuk menganti border foto pada bagian album foto, daftar testimonial, daftar teman

 dan daftar grup*/

.imgfoto{

               border:1px solid #d0b784 !important;

}

/*css ini untuk mengganti warna head tabel pada daftar sekolah kamu*/

table.tbumummed tr th{

               background:transparent;

               border-bottom:1px solid #d0b784;

}

/*css ini untuk mengganti warna isi tabel pada daftar sekolah kamu*/

table.tbumummed tr td{

               background:transparent;

}

/*css ini untuk mengganti warna head tabel pada daftar tulisan kamu*/

table.tbumumsmall tr th{

               background:transparent;

               border-bottom:1px solid #d0b784;

}

/*css ini untuk mengganti warna isi tabel pada daftar tulisan kamu*/

table.tbumumsmall tr td{

               background:transparent;

}

/*css ini untuk mengganti warna background icon dalam tabel pada daftar tulisan kamu*/

table.tbumumsmall td.icondiary, 

table.tbumumsmall td.iconbuletin,

table.tbumumsmall td.iconbuletinsekolah{

               background-color:transparent;

}

/*css ini untuk mengganti warna bagian paling bawah dari profil kamu*/

#footer{

               background-color:transparent;

               border:none;

}

/*css ini untuk mengganti background status lagingapain diprofil datadiri kamu*/

#bioteman #kanan ul li div.emo1,

#bioteman #kanan ul li div.emo2,

#bioteman #kanan ul li div.emo3,

#bioteman #kanan ul li div.emo4,

#bioteman #kanan ul li div.emo5,

#bioteman #kanan ul li div.emo6,

#bioteman #kanan ul li div.emo7,

#bioteman #kanan ul li div.emo8,

#bioteman #kanan ul li div.emo9{

               background:transparent;

}

Share