Cara menggunakan makalah html dan css

Selain dengan cara inline , stlyle CSS dapat diberikan secara embed ataupun eksternal CSS. Berikut terdapat tiga gambar yang diberi style dimana ukuran ketiga gambar dibuat sama 200 x 200 dan margin atas gambar adalah 10px sehingga antar gambar terlihat ada jarak

Table of Contents Show

Langkah langkah membuat website dengan HTML dan CSS?
HTML & CSS itu apa?
Langkah langkah pembuatan website menggunakan HTML?
Apakah HTML dan CSS itu sama?

Contoh Script

<! DOCTYPE HTML>

<html>

<head>

<tittle>Contoh CSS</tittle>

<style>

Img { Margin-top: 10px;

Float: left;

Clear: both;

width:200px;

height:200px;}

</style>

</head>

<body>

Contoh CSS pada gambar (img)<br>

</body>

</html>

2. Cascading style sheet Gambar untuk background

Seperti penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan menggunakan dua properti, yaitu background dan background-image. Nilai yang diisikan untuk properti ini ialah url dari gambar, relatif terhadap file CSS, sama seperti pada penambahan font.

div { background: url(“latar.png”); background-image: url(“latar.png”);}

kesalahan tersebut bekerja, simpan dan jalankan kode Namun, penambahan gambar dengan cara di atas akan memberikan masalah ketika ukuran gambar tidak sama dengan ukuran elemen. Gambar akan ditampilkan berulangkali, secara horizontal maupun vertikal, jika ukuran elemen lebih besar dari ukuran gambar. Untuk dapat melihat bagaimana berikut :

<html>

<head>

<title>Background Image Goes Wrong</title>

#utama{backgroundimage:url(kiwi.jpg);height:600px;width:800px;}

</style>

</head>

<body>

</div>

</body>

</html>

Karena ukuran asli gambar adalah 50px X 50px sedangkan ukuran background yang diinginkan adalah 800px X 600px maka gambar akan ditampilkan berulang-ulang sampai terpenuhi ukuran background 800px X 600px

Adakalanya perulangan tampilan gambar otomatis ini tidak diinginkan. Untuk itu dapat menggunakan properti background-repeat untuk mengatur bagaimana perulangan kode ingin dilakukan. Terdapat empat nilai yang dapat diisikan pada properti background-repeat, yaitu repeat, no-repeat, repeat-x, dan repeat-y. Seperti namanya, no-repeat menghilangkan perulangan, repeat-x memberikan perulangan hanya pada sumbu x (horizontal), dan repeat-y memberikan perulangan hanya pada sumbu y (vertikal). Listing Kode CSS di bawah akan menghilangkan perulangan pada sumbu x dan sumbu y, sehingga kiwi,jpg hanya akan ditampilkan satu kali :

#utama {background-image: url(kiwi.jpg);

background-repeat: no-repeat;

height: 600px;width: 800px;}

3. Cascading style sheet untuk menyisipkan gambar

Adakala saat membuat halaman web yang berisi artikel diperlukan gambar yang mendukung artikel tersebut. Agar terlihat rapi dan menarik maka gambar yang disisipka perlu diberi CSS.

<html>

<head>

<title>

CSS image placement

</title>

#headline1 { background-image: url(kiwi.jpg);

background-repeat: no-repeat;

background-position: left top;

padding-top:68px;

margin-bottom:50px; }

#headline2 { background-image: url(kiwi.jpg);

background-repeat: no-repeat;

background-position: left top;

padding-top:68px; }

</style>

</head>

<body>

<div id="headline1">CSS (versi sekarang adalah CSS3)

banyak dilibatkan dalam dokumen Web.

Kegunaannya adalah untuk memformat dokumen.

Sebagai contoh, warna teks atau bahkan warna

latarbelakang bisa diatur melalui CSS.

</div>

<div id="headline2">Namun, tentu saja kegunaan CSS jauh

lebih</div>

</body>

</html>

4. Cascading style sheet pada tampilan video

Untuk penerapan Cascading style shee pada elemen video dapat dituliskan secara inline seperti contih berikut ini :

<html>

<head>

</head>

<body>

<video controls="controls" style="display:block; margin:

0 auto; width:400px ; heigth:400;" >

Your browser does not support the video tag.

</video>

</body>

</html>

5. Cascading style sheet video embed dari youtube

Penyajian video juga bisa memanfaatkan elemen iframe yang dilinkkan ke alamat video tertentu , misalnya www.youtube.com. Berikut adalah penerapan CSS secara embed untuk menampilan video dari youtube.

<html>

<head>

<style>

.videoWrapper { position: relative;

padding-bottom: 56.25%; /* 16:9 */

padding-top: 25px;

height: 0; }

.videoWrapper iframe { position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%; }

</style>

</head>

<body>

src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1"

frameborder="0" allowfullscreen></iframe>

</div>

</body>

</html>

2.5 STYLE PADA TABEL

Untuk menentukan style border pada table dalam CSS kita bisa menggunakan property border, width, font dan lainnya. properti berikut ini beberapa contoh poperti yang bisa kita gunakan untuk table, tr, th, maupun td

table.ex1 {

border-collapse:collapse;

width:100%;

}

table,th,td{

border: 1px solid black;

}

th,td{

height:50px;

vertical-align:bottom;

padding:5px;

}

2.6 STYLE PADA FORMULIR

Agar form terlihat lebih indah menarik serta mudah dalam pengontrolan desain salah satunya memberikan style CSS. Dibawah ini adalah style yang bisa diberikan pada elemen form diantaranya pengaturan besar dan jenis border, warna border, lebar form, batas form dari sisi layout, dan warna background \ dari form. Sebenarnya masih banyak style lain yang bisa diberikan ke form

Form

{ border:1px solid #666666;

width : 480; /*lebar form*/

margin-left:0; /*jarak dari batas kiri layout*/

background-color:#ffff66;}

Bila style form diatas di embedkan ke dalam file html akan listing kodenya

seperti berikut ini :

<HTML>

<HEAD>

<TITLE>Pengaturan Pada Form Text Area</TITLE>

form{ border:1px solid #666666;

width : 70%;

margin-left:0; /*jarak fieldset dari batas kiri

layout*/

background-color:#ffff66;}

</STYLE>

</HEAD>

<BODY>

<table>

<TR>

<textarea name="textarea"

cols=50></textarea></TD>

</TR>

<TR>

<TD width="50" >Pesan </TD>

</textarea></TD>

</TR>

</table>

</form>

</BODY>

</HTML>

BAB III

PENUTUP

3.1 SIMPULAN

Perkembangan dunia informatika yang semakin canggih pada saat ini menawarkan kemudahan bagi setiap orang dalam membantu menyelesaikan segala kebutuhan dan pekerjaannya.Internet sebagai salah satu bukti nyata dengan adanya perkembangan ini .Maka dari itu,para programmer berusaha untuk merancang beberapa pemrograman di internet .CSS dan HTML adalah salah satu unsur penting dalam pemrograman di internet.

Untuk itu para perogrammer,khususnya pemula yang ingin membuat CSS dan HTML yang baik,sebaiknya sebelum membuat CSS dan HTML harus mengetahui tentang pengertian CSS dan HTML,struktur dasar CSS dan HTML,kode-kode CSS dan HTML,elemen dasar CSS dan HTML,langkah pembuat halaman CSS dan HTML.

Dan seperti yang telah disampaikan sebelumnya,selain itu ia juga harus menguasai langkah-langkah atau cara-cara membuat dan mendesain CSS dan HTML sehingga tampilannya bagus dan menarik yang akan diberikan kepada pengguna nantinya.

Semoga makalah yang telah disusun inidapat menjadi pedoman bagi pemula sebelum membuat CSS dan HTML.

3.2 SARAN

Demikian yang dapat saya paparkan mengenai materi yang menjadi pokok bahasan dalam makalh kali ini, tentunya masih banyak kekurang dan kelemahannya tentang makalah ya saya buat ini, mungkin karena terbatasnya pengetahuan saya dan juga kuranganya rujukan atau referensi yang ada hubungannya dengan judul makalah ini.

Penulis banyak berharap para pembaca yang budiman bisa memberikan saran maupun kritik yang membangun kepada penulis demi sempurnanya makalah ini, semoga makalah ini dapat berguna bagi penulis pada khususnya, dan juga berguna bagi para pembaca yang budiman pada umumnya.

Langkah langkah membuat website dengan HTML dan CSS?

Membuat Website Menggunakan HTML dan CSS.

Membuat wireframe / kerangka website. Langkah yang pertama ini adalah membuat wireframe. ... .

Menginstal text editor. Langkah kedua inilah yang paling penting. ... .

Membuat folder baru. ... .

Membuat file index. ... .

Membuat file style. ... .

6. Hubungkan file css dengan file html..

HTML & CSS itu apa?

HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan.

Langkah langkah pembuatan website menggunakan HTML?

Cara Membuat Halaman Web Sederhana dengan HTML.

Buka editor teks. ... .

Atur jenis dokumen untuk HTML. ... .

Tambahkan tab judul untuk halaman web kamu. ... .

Ketik di bawah tag "Head" yang tertutup. ... .

Selanjutnya membuat judul halaman. ... .

Tambahkan judul tambahan jika kamu mau. ... .

Membuat paragraf. ... .

Mengubah warna teks..

Apakah HTML dan CSS itu sama?

HTML dan CSS merupakan bahasa script situs inti dan pemakaian utamanya adalah untuk membuat halaman aplikasi web atau situs. Perbedaan mendasar diantara keduanya yaitu HTML dipakai untuk pembuatan halaman website dan CSS dipakai untuk mengendalikan tata letak dan gaya sebuah halaman website.