Selasa, 28 Oktober 2014
BOOTSTRAP
Bootstrap
digunakan untuk membuat laman web kita terlihat menarik dan bagus. Ada beberapa yang dapat
digunakan dalam membuat Bootstrap.
1.Untuk membuat bootstrap menggunakan <tag>
<title>Boostrap</title>
<link
rel=”stylesheet”
type=”text/css”
href=”/boostrap/css/bootstrap.mm.css”
/>
script
typ=”text/javascript”
sic=”jquery.2.1.1.min.js”></script>
2. Dalam
menggunakan bootstrap terdapat section yang ada pada bagian body
3.
Untuk membuat class di setiap section :
<section
class=”col-md-4”></section>
4. Untuk bootsrapnya terlihat lebih menarik menggunakan jumbotron. Jumbotron
adalah tulisan agar
pembaca tertarik dengan website kita. Cara penulisaanya
...
<header>
<h1>Bootstrao</h1>
<section
class=”jumbotron”>
<h1>Tissa Pramana Putri</h1>
<p>Selamat datang di website Tissa
Pramana Putri</p>
Maka
hasilnya akan sebagai berikut
5.
Untuk membuat daftar sebagai berikut
<section
class=”cd-md-4”>
<h3>Berita Terbaru</h3>
<ul>
<li>Judul Berita 1</li>
<li>Judul Berita 2</li>
</ul>
6.
Untuk mempercantik tulisan pada list kita dapat menggunakan icon dengan
menggunakan glyphicon di
bagian yang akan kita beri icon. Contohnya
<h3><i
class=”glyphicon glyphicon-globe”></i>Berita Terbaru</h3>
Maka
berikut hasilnya
7. Untuk menambahkan tombol (btn) adalah
sebagai berikut
...
</ul>
<a href=”#” class=”btn
btn-default”>Lihat Berita Lainnya</a>
Maka akan muncul sbgai berikut
8. Membuat
navigasi (menu) di Bootstrap adalah
Arahkan bagian
sebelum <header>, dibawah <body>
<body>
<header>.......
<nav>
<ul
class=”nav navbar-nav”>
<li><a
href=”#”>Homepage</a></li>
<li><a href=”#”>Berita</a></li>
</ul>
</nav>
</header>
9. Agar warna
navigasi berubah dan melihat lebih menarik bisa dengan cara
<body>
<header>.......
<nav
class=”navbar navbar-default”>
<ul
class=”nav navbar-nav”>
Dan hasilnya
adalah sebagai berikut
BY : TISSA PRAMANA PUTRI (1306470861) - B
Menggunakan CSS3 dalam membuat web
CSS atau Cascading Style Sheet) adalah salah satu bahasa desain
web (style sheet languange) yang mengontrol format tampilan sebuah halaman web
yang ditulis dengan menggunakan penanda. Biasanya CSS digunakan untuk mendesain
halaman HTML.CSS diutamakan dengan tampilan dokumen yang meliputi layout, warna
dan font. CSS3 merupakan bentuk generasi
ketiga dari CSS. Pada Prinsipnya menggunakan CSS dalam HTML sama dengan
penjelasan diatas, hanya saja terdapat beberapa kode yang harus ditambah untuk membuat layout,
warna dan font yaitu :
1. Menggunakan tag elemen style pada bagian
head
...
<title>Menggunakan
CSS dalam HTML</title>
<meta
name=”author” content=”Tissa Pramana Putri” />
<meta
name=”keyword” content=”CSS, HTML” />
<style type=”text/css”>
2. Di dalam CSS kita
mengenal istilah blockquote. Blockquote merupakan suatu fasilitas yang
berfungsi
memberikan penekanan pada suatu teks, entah itu script atau teks lain. Blockquote
umumnya berada di body. Contohnya
umumnya berada di body. Contohnya
...
</head>
<body>
<header>
<h1>Menggunakan CSS dalam
HTML</title>
</header>
<article>
<blockquote> Blockquote merupakan suatu fasilitas yang
Berfungsi memberikan penekanan pada suatu
teks, entah itu script atau teks l lain</blockquote>
</article>
</body>
Untuk
membuat blockquote menjadi cetak miring
...
<style
type=”text/css”>
Blockquote {
Font-style : italic ;
}
Jadi setiap
pembuatan kode blockquote menggunakan {}
3. Untuk mengganti font yaitu menambahkan
font-family. Selain itu untuk mengganti ukuran font
menambahkan font-size
Contohnya
...
<style
type=”text/css”>
Blockquote {
font-style : italic ;
}
h1 {
font-family : Arial ;
font-size-adjust : 1 ;
}
4. Untuk mengganti semua font yang ada membuat kode p { font-family
: ....; }
Contohnya
5. Untuk memberi warna pada font menambahkan
color : red ;
Berikut
adalah cara penulisan kodenya
...
h1
{
font-family : Arial ;
color
: red ;
}
6. Untuk
membuat teks berada dibagian tengah menambahkan text-align : center ;
Berikut
adalah cara penulisan kodenya
...
h1
{
font-family : Arial ;
color : red ;
text-align : center ;
}
7. Untuk membuat garis
bawah pada blockquote dengan css yaitu dengan menambahkan border-buttom
Berikut adalah
cara penulisannya
...
<style
type=”text/css”>
Blockquote {
font-style : italic ;
border-buttom : 2px solid ;
}
8. Untuk membuat warna background pada blockquote.
Dalam membuat warna background
Pada
blockquote pertama kita harus menambahkan <blockquote
class=”kuning”> dimana
Bagian
ini berada pada body. Berikut
adalah contoh penulisan kode
Namun apabila kita telah menambahkan seperti
diatas bukan berarti background yang ada
akan
langsung berubah. Tapi kita harus menambahkan pada bagian head seperti berikut
...
<style
type=”text/css”>
h1 {
font-family : Arial ;
color
: red ;
text-align : center ;
}
.kuning {
Background-color : yellow ;
}
Berikut hasil keselurhan dari tahapan di atas
MEMBUAT TABEL DENGAN CSS
Pada dasarnya kolom terdiri atas baris dan
kolom. Di dalam CSS membuat baris diberi kode <th> sedangkan untuk kolom
<td>
Berikut adalah langkah-langkah membuat tabel
menggunakan CSS
1. Membuat tag table pada bagian body.
...
<article>
<table>
<tr>
<th>Judul Kolom Pertama</td>
<th>Judul Kolom Kedua</td>
</tr>
<tr>
<td>Kolom pertama baris pertama</td>
<td>Kolom kedua baris
pertama</td>
</tr>
</table>
</article>
2. Membuat garis pada table dengan menggunakan border yang
ditambhkan pada bagian head
Berikut adalah
contoh penulisannya
...
<style type=”text/css”>
table {
border : 1
px solid black ;
}
table td {
border : 1
px solid black ;
}
table th {
border : 1px
solid black ;
}
3. Membuat background pada kolom judul tabel yaitu
menggunakan background-color pada bagian setelah langkah no 2
...
table th {
border : 1px
solid black ;
background
–color : red ;
}
Berikut adalah hasil dari tabel diatas
BY : TISSA PRAMANA PUTRI (1306470861) - B
Membuat Halaman Web Dengan Menggunakan HTML5
Word
wite web atau yang biasa kenal dengan www atau web adalah keseluruhan
halaman-halaman web yang terdapat dalam sebuah domain yang mengandung informasi
. Domain adalah nama unik yang dimiliki oleh sebuah institusi sehingga bisa di
akses melalui internet.
Internet
adalah sistem global dari seluruh jaringan komputer yang saling terhubung.
Dalam membuat web kita mengenal HTML5.
Apa itu HTML5?
Berikut adalah penggunaan HTML5 dalam membuat web.
1. Dalam menggunakan HTMl5 untuk membuat
web kita dapat menggunakan notepad++
atau notepad. Untuk mendapatkan notepad++ dapat membuka laman berikut ini
http://notepad-plus-plus.org/.
atau notepad. Untuk mendapatkan notepad++ dapat membuka laman berikut ini
http://notepad-plus-plus.org/.
2. Pada tahapan awal menggunakan <!doctype html> dan diiringi
dibawahnya dengan
<html>. Setiap penulisan kode untuk suatu perintah harus ditutup dengan </html>
<html>. Setiap penulisan kode untuk suatu perintah harus ditutup dengan </html>
Contoh :
<!doctype html>
<html>
</html>
3. Selanjutnya html terdiri dari tiga bagian yaitu head, body dan footer secara
berurutan
a. Pada bagian Head terdiri dari title dan meta contonya
<!doctype html>
<html>
<head>
<title>Tugas Ujian
Tengah Semester</title>
<meta name=”author”
content=”Tissa Pramana Putri” />
<meta name=”keyword”
content=”Ujian, semester” />
</head>
</html>
b. Pada bagian body biasanya terdiri dari header dan article. Contohnya
<!doctype html>
<html>
<head>
<title>Tugas Ujian
Tengah Semester</title>
<meta name=”author”
content=”Tissa Pramana Putri” />
<meta name=”keyword”
content=”Ujian, semester” />
</head>
<body>
<header>
<h1>Tugas Ujian Tengah
Semester</h1>
</header>
<article>
<p>Tugas ini merupakan salah satu
syarat UTS Perangkat Lunak Multimedia</p>
</article>
</body>
</html>
MEMBUAT LIST Selain itu pada bagian body juga dapat untuk membuat daftar list maupun unlist .
<!doctype html>
<html>
<head>
<title>Tugas Ujian
Tengah Semester</title>
<meta name=”author”
content=”Tissa Pramana Putri” />
<meta name=”keyword”
content=”Ujian, semester” />
</head>
<body>
<header>
<h1>Tugas Ujian Tengah Semester</h1>
</header>
<article>
<p>Tugas ini merupakan
salah satu syarat UTS Perangkat Lunak Multimedia</P>
<p> Ini adalah elem HTML
untuk membuat daftar</p>
<ol>
<li>Ini adalah list
pertama</li>
<li>Ini adalah list
kedua</li>
</ol>
<ul>
<li>Ini adalah bullet
pertama</li>
<li> Ini adalah bullet
kedua</li>
</ul>
</article>
</body>
</html>
MEMBUAT DEFINISI
Selain itu pada bagian body juga dapat membuat
berupa istilah dan definisinya.
<dt> : Adalah kode
yang digunakan untuk membuat suatu istilah yang akan
Didefinisikan
<dd> : Adalah kode
yang digunakan untuk membuat defisini dari istilah tersebut
 |
c. Pada bagian footer berisi keterangan lanjutan. Contoh penulisannya
...
</body>
<footer>
<p>Copyright-Tissa Pramana
Putri-2014</p>
Berikut hasil keseluruhan dari langkah-langkah yang telah dijelaskan diatas
 |
Langganan:
Komentar (Atom)