Membuat blog sederhana dengan html ~ Belajar Coding

Assalamualaikum warahmatullahi wabarakatuh...
hello gaes berbeda dengan postingan sebelum sebelumnya saya akan meposting tugas dari pak fiftin yang menugasi kelas saya untuk membuat blog sederhana menggunakan codingan html. yang pertama di buat adalah sketsa dan ini sketsa saya :
di bagian home/ beranda dan bagian artikel :

Dan yang kita lakukan selanjutnya membuat codingan html bisa di buat di notpade, notepad++ ataupun sublime text.

saya menggungunakan sublime text untuk membuat tugas ini dan ini codingan saya :

di bagian home/ beranda

<!DOCTYPE html>

<html>

<head>

<title>BELAJAR WEB</title>

</head>

<style>

body{

background:url('abu.png');

font-family:"open sans";

font-size:18pt;

}

#kiri {

text-align:center;

position:fixed;

top:40px;

left:40px;

width:240px;

border-right:2px solid #aaa;

}

#kanan {

margin: 0 150px 40px 280px;

}

#menu {

list-style-type:none;

margin:0;

padding:0;

}

#menu li {

padding-button:10px;

border-bottom:10px solid #ffffff;

}

#kiri p {

font-size:14pt;

}

h1{

font-family:verdana;

color:#000000;

font-size:24pt;

}

#header{

text-align:center;

}

#header img{

width:70%;

height:20%;

}

#footer{

border-top:2px solid #000000;

padding-top:5px;

margin-top:5px;

text-align:center;

}

</style>

<body>

<id="menu"><br><br>

</div>

<div id="header"><h1><p align="center">PEMEROGRAMAN WEB</p></h1>

<hr><h1>Tehnik Informatika UAD</h1><hr>

</font>| BERANDA| </a>

<target="_blank"></font>Facebook </a>

<target="_blank"></font> |ARTICLE |</a> </p>

<target="_blank"></font> |UAD|</a> </p>

</div>

<p>

</p>

</div>

</body>

</html>

di bagian article :

<!DOCTYPE html>

<html>

<head>

<title>BELAJAR WEB</title>

</head>

<style>

body{

background:url('abu.png');

font-family:"open sans";

font-size:18pt;

}

#kiri {

text-align:center;

position:fixed;

top:40px;

left:40px;

width:240px;

border-right:2px solid #aaa;

}

#kanan {

margin: 0 150px 40px 280px;

}

#menu {

list-style-type:none;

margin:0;

padding:0;

}

#menu li {

padding-button:10px;

border-bottom:10px solid #ffffff;

}

#kiri p {

font-size:14pt;

}

h1{

font-family:verdana;

color:#000000;

font-size:24pt;

}

#header{

text-align:center;

}

#header img{

width:70%;

height:20%;

}

#footer{

border-top:2px solid #000000;

padding-top:5px;

margin-top:5px;

text-align:center;

}

</style>

<body>

<id="menu"><br><br>

</div>

<div id="kanan"><h1><p align="center">PEMEROGRAMAN WEB</p></h1>

<hr><h1>ARTICLE</h1><hr>

<p align="left"><b>Assalamu'allaikum.w.w.

<br>Perkenalkan gaes namaku Dimas Panji Setiwan

<br>Biasa di panggil dimas saya sekarang sedang belajar di teknik informatika

<br> Universitas Adhad Dahlan

<br>Saya berasal dari Kebumen, Jawa tengah.

<br>Saya membuat tugas ini di karnakan tugas matakuliah pemrograman web yang di ampuh Bapak Fiftin

<br>Saya belum pandai membuat program program macam ini jadi saya belajar dengan teman saya yang sudah paham membuat program macam ini

<br>MAka saya harus terus belajar membuat program program seperti ini dan yang lainya supaya saya tidak minta di belajarin teman namun kalo bisa saya yang membelajari teman saya

<br>sekian yang dari saya gaes

<br>wassalamuaalaikum.w.w.</b></p>

</div>

<p>

</font>| BERANDA| </a>

<target="_blank"></font>Facebook </a>

<target="_blank"></font> |ARTICLE |</a></p>

<target="_blank"></font> |UAD|</a> </p>

</p>

</div>

</body>

</html>

dan tampilannya akan seperti ini :

di bagian home/beranda

dan tampilan di bagian article:

Jadi kita harus membuat codingan untuk setiap tampilannya. Saya membuat 2 tampilan saja jadi saya hanya membuat 2 bagian codingan,.

sekian codingan yang bisa saya bagi maaf jika ada yang salah dari yang saya bagi.

wassalamualaikum warahmatullahi wabarakatuh

Belajar Coding

Tidak ada niat untuk mengajari hanya ingin berbagi

26 Mar 2016

Membuat blog sederhana dengan html

0 komentar:

Posting Komentar