Technology

Latihan Pemrograman Website HTML5 (Bagian 2)

 

   

JagFamily, kali ini kita akan melanjutkan bagian akhir dari praktek pemrograman halaman HOME kita. Jika di praktek pemrograman kemarin kita sudah menyelesaikan section “navigation”, “slides” dan “steps”, maka kali ini kita akan membuat bagian “article”, “footerContent” dan “footer”.

Langkah 13. Hasil akhir dari percobaan kita kemarin bisa dilihat pada Gambar di bawah dimana tanda panah biru menunjuk pada bagian akhir yang akan kita selesaikan hari ini.

Langkah 14. Silakan buka index.html hasil percobaan anda kemarin. Kemudian sisipkan source code berikut ke dalam tags < section id=”steps” > untuk membuat konten pada bagian “article”.

<h2>Article Update</h2>
<section class="article-list">
	<section class="articles">
		<article>
			<section class="date">
				<header>01</header>
				<footer>Nov <small>2012</small></footer>
			</section>
			<figure class="image">
				<imgsrc="images/article.jpg" />
			</figure>
			<section class="content">
				<h3><a href="#">This Is Place For Some Tittle Post</a></h3>
				<p>Loremipsum dolor sit amet, consecteturadipiscingelit. Nullamadipiscingullamcorperrhoncus. Nuncut dui necloremsodalesfaucibus. Loremipsumdolor sit amet, consecteturadipiscingelit. Cras non nibh non feliseleifendmollisplaceratnecodio. Phaselluscongue, est in interdumpellentesque, dolor felisvariussapien, sit ametfacilisisnibhnisl non odio. Fusceauctorlectus et tellustinciduntplacerat ac non magna.</p>
			</section>
		</article>
		<div class="clear"></div>
	</section>
	<nav class="pagination">
		<ul>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
		</ul>
		<a href="#" class="more-articles">See All Article</a>
	</nav>
</section>

Langkah 15. Sekarang kita akan membentuk konten “article” yang sudah kita tambahkan. Silakan tambahkan kode CSS ke dalam file style.css untuk styling bagian “article” agar sesuai dengan desain awal kita. Silakan copy-paste contoh CSS berikut:

/* Articles Area */
#articles{
	text-align:center;
}

#articles h2{
	font:70px 'BebasNeue';
	position:relative;
	display:inline-block;
	margin:80px 0;
	margin-bottom:20px;
}

#articles h2:before{
	width:100px;
	position:absolute;
	left:-110px;
	border:1px solid #ccc;
	top:50%;
	content:'';
}
#articles h2:after{
	width:100px;
	position:absolute;
	right:-110px;
	border:1px solid #ccc;
	top:50%;
	content:'';
}

#articles .article-list article{
}

#articles .article-list article .date{
	float:left;
	width:49px;
	text-align:left;
	line-height:1;
}

#articles .article-list article .date header{
	font:55px Georgia italic;
	line-height:1;
}

#articles .article-list article .date footer{
	font:25px Georgia;
	line-height:1;
}

#articles .article-list article .date footer small{
	font:20px Georgia;
	line-height:1;
}

#articles .article-list article .image{
	float:left;
	margin:0;
	margin-left:20px;
}

#articles .article-list article .content{
	float:left;
	margin-left:10px;
	text-align:left;
	width:482px;
}

#articles .article-list article .content h3{
	margin:0;
}
#articles .article-list article .content h3 a{
	color:#c73047;
	font-weight:bold;
	text-decoration:none;
	font-size:20px;
	text-shadow:0px 1px 0 #fff;
}

#articles .article-list article .content p{
	line-height:1.5;
}

#articles .pagination ul{
	list-style:none;
	margin:10px 0;
	padding:0;
}

#articles .pagination ul li{
	display:inline-block;
}

#articles .pagination ul li a{
	background:#333;
	text-indent:-10000px;
	display:block;
	width:15px;
	height:15px;
	-webkit-border-radius:60px;
	-moz-border-radius:60px;
	-o-border-radius:60px;
	border-radius:60px;
}

#articles .pagination ul li a:hover{
	background:rgba(0,0,0,0.5);
}

#articles .pagination .more-articles{
	display:inline-block;
	background:url(../images/all-article.jpg) repeat-x;
	height:21px;
	font-weight:bold;
	padding:0 20px;
	padding-top:5px;
	border:1px solid #bfbfbf;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
	margin-top:10px;
	text-decoration:none;
	color:#333;
}
/* End Articles Area */

Hasil jadinya bisa dilihat pada Gambar 3.

Langkah 16. Berikutnya, kita akan membuat isian untuk bagian ”footerContent”, di mana pada rancangan Gambar 1 akan diisi dengan “kalender sederhana”, “kontak”, “Google Maps”, dan “ikon sosial media”. Anda bisa copy-paste source code berikut:

<h2>Event &Kontak</h2>
<div class="clear"></div>
<section class="event-list">
	<article>
		<section class="date">
			03
			<small>Nov</small>
		</section>
		<section class="content">
			<header>
				<a href="#">Nama Event</a>
			</header>
			<p>
				Jl. JemurTiga Raya, Surabaya
			</p>
		</section>
		<div class="clear"></div>
	</article>
	<article>
		<section class="date">
			10
			<small>Nov</small>
		</section>
		<section class="content">
			<header>
				<a href="#">Nama Event</a>
			</header>
			<p>
				Jl. JemurAndayani, Surabaya
			</p>
		</section>
		<div class="clear"></div>
	</article>
	<article>
		<section class="date">
			13
			<small>Nov</small>
		</section>
		<section class="content">
			<header>
				<a href="#">Nama Event</a>
			</header>
			<p>
				Jl. Duren Tiga Raya, Surabaya
			</p>
		</section>
		<div class="clear"></div>
	</article>
	<a href="#" class="more-event">See All Events</a>
</section>
<section class="address">
	<section class="one-half">
		<section class="office">
			<h3>Head Office</h3>
			<p>Jl. JemurAndayani Surabaya</p>
		</section>
		<section class="phone">
			<h3>Contact Info</h3>
			<p>
				Tel: 031 841 9700<br/>
				Fax: 031 841 9400
			</p>
		</section>
		<div class="clear"></div>
	</section>
	<section class="one-half">
		<section class="office">
			<iframe width="190" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msid=203114880327281170049.00047d34b7d5bdf6d06f7&msa=0&ll=-7.32738,112.740909&spn=0.00614,0.010568&output=embed"></iframe><br /><small>View <a href="https://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=203114880327281170049.00047d34b7d5bdf6d06f7&ll=-7.327374,112.742686&spn=0.00316,0.010986&t=v&iwloc=00047d34bf08a90aeb348&source=embed" style="color:#0000FF;text-align:left">Jagoan Hosting Surabaya Office</a> in a larger map</small>
		</section>
		<section class="phone">
			<h3>Email</h3>
			<p>
				<a href="mailto:pantisosial@gmail.com">pantisosial@gmail.com</a>
			</p>
		</section>
		<div class="clear"></div>
	</section>
</section>
<section class="social-network">
	<a href="#"><imgsrc="images/fb.png"></a>
	<a href="#"><imgsrc="images/twitter.png"></a>
	<a href="#"><imgsrc="images/youtube.png"></a>
	<a href="#"><imgsrc="images/skype.png"></a>
	<a href="#"><imgsrc="images/gplus.png"></a>
	<a href="#"><imgsrc="images/rss.png"></a>
</section>
<div class="clear"></div>

Sisipkan ke dalam tags < section id=”footerContent” > yang terdapat di file index.html kita. Bila anda langsung akses tanpa styling dulu, maka tampilannya akan keluar seperti Gambar 4.

Langkah 17. Jadi, sekarang kita styling dulu bagian “footerContent”. Silakan buka file style.css anda, kemudian copy-paste contoh CSS berikut:

/* FooterContent Area */

#footerContent{
	text-align:center;
}
#footerContent h2{
	position:relative;
	font:70px 'BebasNeue';
	text-align:center;
	display:inline-block;
	margin:30px 0;
}

#footerContent h2:before{
	width:100px;
	position:absolute;
	left:-110px;
	border:1px solid #ccc;
	top:50%;
	content:'';
}
#footerContent h2:after{
	width:100px;
	position:absolute;
	right:-110px;
	border:1px solid #ccc;
	top:50%;
	content:'';
}

#footerContent> section{
	float:left;
}

#footerContent .event-list{
	width:300px;
}
#footerContent .event-list article{
	margin-bottom:10px;
}
#footerContent .event-list article .date{
	float:left;
	width:40px;
	height:40px;
	padding:5px;
	background:#c73047;
	-webkit-border-radius:60px;
	-moz-border-radius:60px;
	-o-border-radius:60px;
	border-radius:60px;
	color:#fff;
	font:30px 'BebasNeue';
}
#footerContent .event-list article .date small{
	display:block;
	font:10px Arial;
	margin-top:-10px;
}
#footerContent .event-list article .content{
	padding-top:10px;
	width:240px;
	float:left;
	margin-left:10px;
	text-align:left;
}
#footerContent .event-list article .content p,#footerContent .event-list article .content header{
	line-height:1;
	margin:0;
	padding:0;
}
#footerContent .event-list article .content header{
	margin-bottom:5px;
}

#footerContent .event-list article .content{
	border-bottom:1px solid #666666;
	padding-bottom:5px;
}
#footerContent .event-list article .content header a{
	color:#333;
	font-weight:bold;
	text-decoration:none;
}
#footerContent  .event-list .more-event{
	float:left;
	display:block;
	text-align:left;
	background:url(../images/all-article.jpg) repeat-x;
	height:21px;
	font-weight:bold;
	padding:0 20px;
	padding-top:5px;
	border:1px solid #bfbfbf;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
	margin-top:5px;
	margin-left:60px;
	text-decoration:none;
	color:#333;
}

#footerContent  .address{
	width:400px;
	margin-left:20px;
	margin-right:20px;
	text-align:left;
}
#footerContent  .address .one-half{
	margin-bottom:20px;
}
#footerContent  .address .one-half section{
	width:190px;
	float:left;
}
#footerContent  .address .one-half section h3{
	color:#c73047;
	text-transform:uppercase;
	font-size:14px;
	margin:0;
	margin-bottom:5px;
}
#footerContent  .address .one-half section p{
	margin:0;
}
#footerContent  .address .one-half section:nth-of-type(1){
	margin-right:20px;
}
#footerContent  .address a{
	color:#333;
	text-decoration:none;
}
#footerContent  .social-network{
	width:200px;
}
#footerContent .social-network a{
	display:block;
	float:left;
	width:35px;
	height:35px;
	padding:10px;
	background:#c6c6c6;
	margin:5px;
	-webkit-border-radius:60px;
	text-align:center;
}
#footerContent .social-network a:nth-of-type(3n+1){
	margin-left:0;
}
#footerContent .social-network a:hover{
	background:#c73047;
}
/* End Footer Content Area */

Hasil jadinya sekarang bisa dilihat pada Gambar 5.

Langkah 18. Terakhir adalah bagian ”footer”. Silakan sisipkan kode HTML berikut ke dalam tags <footer id=”footer”> di index.html anda.

<nav class="footer-nav">
	<ul>
		<li><a href="#">About</a></li>
		<li><a href="#">Events</a></li>
		<li><a href="#">Media</a></li>
		<li><a href="#">Archive</a></li>
		<li><a href="#">Contact Us</a></li>
		<li><a href="#">News</a></li>
	</ul>
</nav>
<section class="copyright">
	(C) PantiSosial 2012. All Rights Reserved
</section>
<div class="clear"></div>

Langkah 19. Kemudian styling “footer” pada style.css anda. Silakan copy paste file CSS berikut:

/* Footer Area */
#footer{
	background:#2d2d2d;
	padding:20px 0;
}
#footer .footer-nav{
	float:left;
}
#footer .footer-navul{
	margin:0;
	list-style:none;
}
#footer .footer-navul li{
	float:left;
}
#footer .footer-navul li a{
	color:#e6e6e6;
	display:block;
	text-decoration:none;
	margin:0 10px;
	font-weight:bold;
}
#footer .footer-navul li a:hover{
	color:#fff;
}
#footer .copyright{
	float:right;
	color:#e6e6e6;
	font:12px 'Georgia';
	font-style:italic;
}
/* End Footer Area */

Hasil jadi yang diharapkan nantinya seperti pada Gambar 6.

Langkah 30. Selesai! Hasil akhir percobaan kita hingga kali ini bisa dilihat pada URL berikut http://www.jagoanhosting.com/html5/2. Anda tinggal membenahi beberapa bagian yang dirasa perlu.

Nah. Sampai percobaan ini, kami harap semoga anda paling tidak sudah punya kemampuan untuk membaca source code sebuah website. Sehingga kelak anda bisa melanjutkan dengan mempelajari bagaimana cara membuat website sendiri. Semoga berhasil ;-)


Artikel Terkait

3 komentar

  • 12 December 2012 - pukul 20:59

    Perlu dicoba tapi kayanya agak susah juga kalau tidak terbiasa, http://nembelas.com.

  • 25 December 2012 - pukul 0:09

    Wah bagus banget nih tutorialnya. Memang HTML5 dan juga CSS3 harus mulai dibiasakan, soalnya sekarang lagi jamannya perangkat mobile. Jangan sampe website yang kita punya ketinggalan jaman.

Berikan Komentar

Your email address will not be published. Required fields are marked *