Tutorial HTML / CSS ACS
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Ini halaman pertama saya. <b>Teks ini ditebalkan</b>
</body>
</html>
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 [Link] < B >
digunakan untuk mengaktifkan instruksi cetak tebal dan diakhiri teks juga ditulis < / B >
gunannya untuk menonaktifkan cetak tebal [Link] 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
<div id=”header”>
<div id="top-nav”>
<div id="cari-cepat">
<li class="bts">
Dll
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 <p>, yang merupakan singkatan dari
'paragraf'. Letakan sebuah <p> , pada awal paragraf dan sebuah </p> , pada akhir dari paragraf.
<p>Ini adalah sebuah paragraf</p><p>Ini merupakan paragraf lainnya</p>
Tag menarik lainnya adalah <br /> , 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.
<p>Teks <br /> Ini dipecah<br /> menjadi paragraf
HTML mendefinisikan banyak sekali elemen untuk menformat teks, seperti tebal (bold) atau
miring (italic)
Dibawah ini adalah contoh yang bisa kamu coba sendiri
Tag Deskripsi
<b> Membuat teks menjadi bold / tebal
<big> Menambah besar teks
<em> Membuat teks menjadi miring
<i> Membuat teks menjadi italic / miring
<small> Membuat teks menjadi kecil
<strong> Membuat teks menjadi tebal
<sub> Membuat teks menjadi subscripted
<sup> Membuat teks menjadi superscripted
<u> Membuat teks menjadi digaris bawahi
Setiap tag HTML mempunyai awal dan akhir. Taruh teks anda diantara tag tersebut. Akhir dari
tag biasanya mempunyai sebuah “/” (contoh: </b> )
Tutorial di w3schools [Link]
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:
p { color: black }
div { font-family: "sans serif" }
pre { text-align:center; color:red; }
blockquote {
text-align: center;
color: black;
font-family: arial
}
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
Halaman web CSS di World Wide Web Consortium [Link]
Info CSS lebih lanjut bisa dilihat di [Link]
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
[Link]
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([Link] 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([Link]
}
/*css ini untuk mengganti tampilan menu utama (menu halamanku)*/
body#member #navbar ul li a#lmember,
#navbar ul li a:hover{
background:url([Link]
}
/*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 [Link] 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([Link] 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([Link] 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([Link] 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([Link] !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([Link] !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([Link] 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 [Link] 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 [Link] 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*/
[Link] tr th{
background:transparent;
border-bottom:1px solid #d0b784;
}
/*css ini untuk mengganti warna isi tabel pada daftar sekolah kamu*/
[Link] tr td{
background:transparent;
}
/*css ini untuk mengganti warna head tabel pada daftar tulisan kamu*/
[Link] tr th{
background:transparent;
border-bottom:1px solid #d0b784;
}
/*css ini untuk mengganti warna isi tabel pada daftar tulisan kamu*/
[Link] tr td{
background:transparent;
}
/*css ini untuk mengganti warna background icon dalam tabel pada daftar tulisan kamu*/
[Link] [Link],
[Link] [Link],
[Link] [Link]{
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;
}