Membuat halaman web dengan CSS

HELLO! 

Di artikel ini, saya akan menjelaskan langkah-langkah membuat halaman web dengan menggunakan CSS. 

Apa itu CSS?

Cascading Style Sheet (CSS) adalah aturan untuk mengendalikan beberapa komponen di  sebuah web sehingga akan lebih terstruktur. CSS itu bukan merupakan bahasa pemograman. CSS memungkinkan untuk mendesain tampilan dokumen Php dan HTML dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS). Di dalam dunia desain web, layout atau mengatur letak web, format huruf, dan lain nya yang ada dalam sebuah web adalah bagian yang sangat penting dan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya.

untuk membuat halaman web dengan CSS, kita akan menggunakan Notepad ++ seperti ini:

Langkah awalnya adalah kamu harus membuat tag-tag dasar yang selalu ada di dalam HTML seperti :

Untuk menggunakan CSS, kamu harus meggunakan tag elemen STYLE pada bagian HEAD :

kemudian, kamu bisa memasukan judul dengan tag <h1>...</h1> dan membuat tag <article>...</article> untuk membuat artikel. selanjutnya, di dalam artikel, kamu bisa membuat paragraf-paragraf dengan tag <p>....</p> seperti ini: 

Untuk membuat background menjadi berwarna, kamu bisa kembali ke atas. Perhatikan dibawah <style type="text/css">, kamu bisa membuat seperti ini :

Di dalam penggunaan CSS, kita mengenal istilah BLOCKQUOTE. Blockquote itu contohnya seperti yang ada pada artikel-artikel blog aku yang kalau cursor mouse mengarah kesitu ada warna pink misalnya, atau bercetak miring, ada didalam kotak,dsb. seperti ini :

Nah, bagaimana agar tampilan dari blockquote lebih menarik?tentu kamu bisa mengubah background dari blockquote agar berbeda dengan yang lainnya. caranya adalah dengan menambah class seperti ini:

"kuning" pada blockquote ini bukan berarti membuat background menjadi kuning. "kuning" hanya sebuah kata sebagai identitas dari blockquote tersebut. kamu bisa merubahnya dengan kata-kata lain yang kamu inginkan.

Selanjutnya, agar blockquote tersebut terlihat lebih menarik, kamu bisa mengubah background,font dan warna tulisannya. maka dari itu, kamu harus kembali ke atas seperti ini :

Kamu juga bisa mengubah font dan warna dari judul dan paragaf seperti ini : 

Maka kamu akan mendapatkan hasil sementara halaman web seperti ini :

Lalu, bagaimana caranya membuat tabel dengan css? untuk membuat tabel, kamu harus menggunakan tag <table>....</table>. Di dalam CSS kamu bisa membuat garis dengan kode <th> dan kolom dengan tag <td> seperti ini : 

Untuk membuat tabel tersebut terlihat lebih menarik, kamu bisa mengubah font dan warna backgroundnya. caranya sama seperti saat kamu mengubah tampilan blockquote,dsb. Nah,sebelumnya kamu harus menambahkan class terlebih dahulu seperti ini :

Untuk mengubah tampilannya agar lebih menarik, kamu harus menambahkan class terlebih dahulu. 

Setelah itu, kamu kembali ke atas di bagian ketika kamu mengubah font dan warna blockquote seperti ini :

Nah, dari yang telah kamu kerjakan diatas, kamu akan mendapatkan hasil seperti ini:

MUDAH KAN? SEMOGA MEMBANTU YA!

SELAMAT MENCOBA DAN GOODLUCK

Referensi :

http://fitrahizulfalaq.blogspot.com/2014/01/membuat-halaman-web-html-sederhana.html

www.vemale.com

www.uniqlo.com

www.wikipedia.com

http://tutorialisme.students.uii.ac.id/belajar-html-dan-css-tingkat-dasar/

http://www.maskolis.com/2011/03/belajar-dan-memahami-dasar-dasar-code.html

NAMA : CLARA PASKALIA

NPM : 1306470911

MID 2013 B

Membuat halaman web dengan HTML5

Membuat halaman web dengan menggunakan HTML5

Apa itu HTML5 dan bagaimana cara menggunakannya?check here!

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. Tujuan utama pengembangan HTML5 untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

Kali ini, saya akan menjelaskan bagaimana cara membuat halaman web dengan html5 menggunakan notepad ++
.

Tampilan Notepad ++

Sebelumnya saya akan menjelaskan tag-tag dasar pada html5:

1. Tag  <html> merupakan awal dari suatu dokumen HTML dan tag " </html>" adalah akhir dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag <html>…</html>.

2. Tag " <head>…</head>" (header) adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll. Selain Title informasi di dalam header ini  tidak akan tampil di web browser kamu.

3. Tag  " <title>…</title>" adalah bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser.

4.  Tag "<body>…</body>" adalah isi dari suatu dokumen HTML yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format file berupa teks, grafik, link, animasi maupun audio-video (multimedia).

  

5. ada banyak kode-kode yang mendukung seperti:

- Tag untuk mengubah atau mengedit text dalam sebuah dokumen HTML 

<b> </b> untuk membuat huruf menjadi tebal atau bold

<i> </i> untuk membuat huruf menjadi miring atau italic

<u> </u> untuk membuat huruf menjadi bergaris bawah atau underline

- Tag  untuk mengatur paragraf:

<p> </p> ini untuk membuat paragraf

<br> untuk membuat baris baru

<center></center> untuk membuat tulisan menjadi ditengah atau cente

- Tag membuat bullets dan numbering

<ul></ul> ini untuk membuat bullets

  <ol></ol>ini  untuk membuat numbering

<li></li> ini bagian dari tag ul

Disini saya akan memberikan kamu sebuah contoh halaman web dengan HTML5 sederhana dan saya akan menjelaskan langkah-langkahnya.

ini adalah contoh hasil dari halaman webnya :

Langkah-langkahnya adalah:

1. Kamu harus membuka aplikasi Notepad++ dan mengetikkan tag-tag dasar yang sudah saya jelaskan diatas. awalnya, kamu harus membuat judul/title seperti ini :

Lalu, berikutnya kamu harus membuat header. Kamu harus menggunakan tag <h1>...</h1>. Untuk membuat tulisan menjadi tebal, Kamu menggunakan tag <b>..</b> dan membuat posisinya berada ditengah, kamu menggunakan tag <center>...</center> seperti ini:

Selanjutnya, untuk membuat tulisan "langkah-langkahnya" kamu menggunakan tag <article>....</article> dibawah tag </header>.<article> merupakan tag untuk sebuah artikel. setelah itu kamu menggunakan tag <p>....</p> untuk membuat tulisan dalam bentuk paragraf seperti ini :

Untuk membuat tulisan "bahan" dan bahan-bahannya, kamu dapat membuatnya seperti ini :

Untuk memberi simbol kotak di depan tulisan "bahan", kamu harus menambahkan tag type="square" seperti dibawah ini:

Selanjutnya, untuk menambahkan gambar diatas bahan-bahan, kamu dapat melihat kembali ke atas, di bawah <li type="square"><u>Bahan</u></li> dengan menggunakan tag seperti ini :

tag <ul> adalah tag untuk membuat simbol bulat kosong

selanjutnya, untuk membuat "cara membuat", kamu bisa menggunakan tag yang sama seperti diatas. seperti ini:

Tag <ol> adalah tag untuk membuat simbol angka

selanjutnya kamu membuat paragraf baru setelah tag </ol> dengan tag <p>....</p> untuk membuat kalimat di paragraf baru dan mencantumkan sebuah foto seperti ini:

Dan....Selesai.....Begitulah cara untuk menggunakan HTML 5 dalam membuat halaman web. Ini adalah cara untuk membuat halaman web sederhana. 

Selamat mencoba dan Good luck !

Referensi :

http://blog.um.ac.id/

http://mkr-site.blogspot.com/2012/07/apa-itu-html5-dan-kelebihannya.html

http://zhahab.blogspot.com/2013/12/cara-membuat-kerajinan-tangan-dari-kain.html

Nama : Clara Paskalia Tambun

npm : 1306470911

MID 2013 B

Membuat halaman web dengan Bootstrap

 BOOTSTRAP

Bagaimana caranya untuk membuat halaman web menggunakan BOOTSTRAP? 

Pada artikel ini, saya akan menjelaskan bagaimana cara membuat halaman web Bootstrap. Tentunya kita sudah tahu apa itu Bootstrap. lalu, bagaimana cara membuat web menggunakan bootstrap? Check here!

Ini adalah hasil halaman web yang akan dibuat:

Untuk membuat web, kita akan menggunakan aplikasi bernama Notepad++

Tampilan Notepad++

Setelah membuka aplikasi Notepad++, Kamu dapat langsung mengisi dengan tag-tag utama terlebih dahulu,seperti berikut ini:

Untuk membuat web dengan html5, css dan bootstrap, kamu harus menggunakan tag yang telah ditentukan. Kamu bisa menambahkan tag di dalam tag <head> dan </head> seperti ini :

untuk membuat header, kamu bisa menggunakan tag <header> dan </header> setelah tag </head>

Lalu untuk membuat kolom-kolom, kamu bisa menggunakan tag <section> dan </section> setelah tag </header> seperti ini :

Untuk membuat tulisan Love quote, birthday quote dan happy quote, kamu bisa membuatnya di dalam tag <section> namun sebelumnya, kamu harus membuat "class" pada setiap section seperti ini:

setelah itu, kamu dapat mengisi setiap section dengan menu yang kamu inginkan, seperti ini:

Maka hasil sementara halaman web kamu seperti ini :

Untuk memperindah dan mempercantik tulisan "Love quote,Birthday quote dan Motivation quote", kamu bisa menambahkan sebuah gambar icon disebelah tulisan tersebut. caranya adalah dengan kamu bisa melihat di bagian bawah <section class="col-md-4", terdapat <h3>Love quote</h3>. kamu bisa menambahkan di bagian tersebut seperti ini:

Setelah itu, jika ingin membuat sebuah menu dimana kamu ingin melihat quote lainnya, kamu bisa menambah tombol (BTN) setelah tag </ul> di masing-masing kolom, seperti ini:

lakukan pada kedua section lainnya dengan tag yang sama

Agar Bootstrapnya nyambung/kelihatan, kamu bisa kembali ke atas dan membuat tag dibawah <header>. Agar Pembaca tertarik dengan tulisan kamu, kamu dapat menggunakan JUMBOTRON. Langkahnya seperti ini:

Maka hasil sementara dari halaman web kamu seperti ini :

Untuk membuat Navigasi(Menu) di Bootstrap, arahkan bagian sebelum <header>, dibawah <body> seperti ini:

Agar warna navigasi(menu) tersebut berubah/berbeda, maka kamu dapat mengubah "navbar-default" menjadi "navbar-inverse" seperti ini:

Setelah mengikuti langkah diatas, kamu bisa menyimpan ke folder dimana terdapat semua file-file mengenai bootstrap, agar tampilan dapat terlihat ketika di reload.

Maka, Selesai sudah. Selamat mencoba dan semoga berhasil! 

Nama : Clara Paskalia Tambun

NPM : 1306470911

MID 2013 B