Apa itu meta tag html ?

Mungkin kita sering mendengar kata meta tag ketika membuat halaman website. Namun sebenarnya apa itu meta tag?

Meta tag merupakan informasi yang disertakan dalam bagian <head> halaman (tag ini tidak divisualisasikan di browser, inilah mengapa mereka disebut “meta”) dan mereka mengikuti format <meta />.

They are simply information that is included in the section <head> of the page (remember that this section is not visualized in the browser, this is why they are called “meta”) and they follow the format <meta />

Sebagai contoh meta tag adalah sebagai berikut

<[hapus]meta name=”description” content=”The WordPress login form allows you to access your dashboard. Here you have 3 simple tricks to modify its behaviour easily and quickly.”/>

 

Advertisements

Kode HTML Share Sosmed di Web

Hampir seluruh orang di dunia mengetahui dan menggunakan sosial media atau sosmed saat ini. tidak hanya untuk bersosial, orang dengan orang, fungsi sosmed lainnya adalah untuk menaikan popularitas sebuah web. Pengunjung dapat melihat isi konten web, berawal dari sebuah link di sosmed yang ditautkan.

Lalu bagaimana cara memasangkan sosmed agar ada di konten web, agar bisa di share orang hanya dengan cara tinggal klik? Berikut contoh kode HTML share berita, artikel atau semacamnya di sosmed untuk disimpan di web. Contoh kode klik link berikut :

http://www.4shared.com/office/qPT34uxyce/share-sosmed.html.

Sekian terimakasih, wassalam.

 

 

3 point penting ketika membangun website dalam kacamata client

niche_website

Setelah sekian laman berkecimpung di dunia per-web-an untuk dipublish dan bertemu dengen sejumlah client, dapat saya simpulkan sementara ini mengenai beberapa urutan prioritas yang menjadi sorotan client dalam pembuatan sebuah web, yakni

pertama adalah design yang bagus. kesan pertama harus menggoda selanjutnya terserah anda. kurang lebih seperti itu. bagian pekerjaan yang terkait seperti membuat gambar dengan photosop, css, html dan javascript.

kedua adalah rangking google. hal ini penting untuk klien dalam mendapatkan pasar atau pengunjung untuk meningkatkan usahanya. ini bagiannya pengelolaan html, content isi, dan per-seo-an.

dan ketiga adalah proses pengelolaan dibelakangnya, hal ini menitik beratkan kepadahal programming yang kuat, ada alur proses didalamnya, logika-logika, dan security-nya termasuk.

bedahal nya untuk aplikasi berbasiskan web yang lebih menitik beratkan pada proses algoritma yang benar selanjutnya design tampilan yang user friendly.

Demikan yang saya bisa share, mudah-mudahahan bermanfaat. wassalam.

Membuka pdf online di website kita dengan menggunakan viewerjs

viewerjs

Ada berbagai cara agar file pdf yang ada pada sebuah website bisa di baca secara online tanpa mendownload terlebih dahulu. salah satu caranya adalah dengan menggunakan viewer js. yaitu sebuah plugin atau library javascript yang dibuat khusus untuk melakukan pembacaan file pdf salah satunya.  penggunaan nya cukup mudah. yaitu download telebih dahulu file zipnya di bawah ini.

http://www.4shared.com/zip/wCJOmIGYba/ViewerJS-latest.html

setelah di download, extract file zip. lalu copas ke web yang akan dibangun. kemudian cara penggunaannya adalah dengan memasangkan alamat file pdf di alamat viwerjs. seperti pada contoh ini.

http://website-endang.com/viewerjs/index.html#http://website-endang.com/uploads/file.pdf

cukup mudah, semoga bermanfaat. wassalam.

Apa itu parallax dalam istilah web ?

Parllax adalah sebuah istilah yang penjelasannya kurang lebih seperti ini, ketika kita menscroll halaman sebuah web, dimana ada sebuah bagian web dan dibelakangya terdapat background gambar, apabila kita mencsroll ke bawah atau ke atas gambar di belakang ikut tersecroll namun pergerakannya lebih lambat dari pada bagian depannya. sehingga menimbulkan sebuah perspektif atau kesan pemandangan yang menarik, seperti kita melihat pemandangan objek gunung atau pohon dalam sebuah jendela mobil yang berjalan.

endang-gambaran-cara-kerja-parallax

Adapun kode untuk membuatnya adalah seperti berikut :
Kode HTML

< div class="header">
Header text, logo, dll
</div>

Kode CSS

.header {                
        background:url("images/bg.png") no-repeat center center fixed;
        background-size: cover;
        background-repeat: no-repeat   
    }    

Kode JQuery

    // Y axis scroll speed
        var velocity = 0.5;

        function update(){ 
            var pos = $(window).scrollTop(); 
            $('.header').each(function() { 
                var $element = $(this);
                // subtract some from the height b/c of the padding
                var height = $element.height()-18;
                $(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px'); 
            }); 
        };

        $(window).bind('scroll', update);        
    

Kode untuk membuat posisi box pencarian agar tetap di atas

fixed-search-menu

 

Betikut cara untuk membuat kode pencarian berada diatas tidak ikut scroll dan tetap berada diatas.

 

Kode HTML

< div class="wrap" id="wrap"> 
  
  < header class="top-header"> 
    < span class="menu-icon"> ☰< /span> 
  < /header> 
  
  < div class="search"> 
    < input type="search" placeholder="Search or type URL" /> 
  < /div> 
  
  < div class="top"> 
    < div class="hero"> < /div> 
  < /div> 
  
  < main> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
  < /main> 
  
< /div> 

Kode CSS

* {
box-sizing: border-box;
}
body {
margin: 0;
}

.wrap {
width: 320px;
border: 1px solid #ccc;
height: 480px;
overflow: auto;
position: relative;
}
.top-header {
position: fixed;
top: 0;
left: 0;
width: 320px;
height: 60px;
.menu-icon {
position: absolute;
top: 0;
right: 0;
padding: 18px 20px;
}
.fix-search & {
background: #eee;
}
}

.search {
position: absolute;
top: 155px;
left: 20px;
right: 20px;
input {
width: 265px;
border: 1px solid #ccc;
padding: 8px;
font-size: 15px;
transition: width 0.2s;
-webkit-appearance: none;
}
.fix-search & {
position: fixed;
top: 10px;
input {
width: 250px;
}
}
}

.top {
height: 250px;
padding-top: 40px;
}
.hero {
width: 200px;
height: 100px;
background: #ccc;
margin: 0 auto;
}

main {
padding: 0 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
div {
width: 125px;
height: 80px;
background: #ccc;
margin: 0 0 20px 0;
}
}

Kode JS/ Jquery

var wrap = $("#wrap");

wrap.on("scroll", function(e) {

if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}

});

Mendeteksi lokasi dan menampilkan di peta google map dengan geolocation api dan HTML5

geolocation-browser-endang

Geolocation adalah proses mencari lokasi pengguna browser yang terkoneksi internet dengan menggunakan HTML 5 dan Google Maps api kemudian menampilkan lokasi keberadaannya di dalam peta di web.

Agar dapat berjalan, pengguna harus mengaktifkan pelacakan berfungsi dibrowser. adapun browser yang mendukung untuk fungsi ini diantaranya adalah

Chrome: > 5.0
Internet Explorer: > 9.0
Firefox: > 3.5
Safari: > 5.0
Opera: > 16.0

Selain itu, agar dapat menggunakan script api dari google map, anda harus membuat keys di google api untuk dapat menggunakan script tersebut.

Berikut contoh sederhana untuk penggunaan geolocation.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”>
<meta charset=”utf-8″>
<title>Geolocation</title>
<style>
#map {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<!– placeholder map –>

<!– javascript –>
http://maps.google.com/maps/api/js?key=AIzaSyCDOCykF1KHEVDf-oN0BPS40JxVlOk71O4

// set geolocation
var x = navigator.geolocation;
x.getCurrentPosition(success, failure);

// function get current position success
function success(position){
var myLat = position.coords.latitude;
var myLong = position.coords.longitude;

// set latitude and longitude
var coords = new google.maps.LatLng(myLat, myLong);

// set map option
var mapOptions = {
zoom: 16,
center: coords,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

// generate map google
var map = new google.maps.Map(document.getElementById(“map”), mapOptions);

// marker position
var marker = new google.maps.Marker({map: map, position: coords});
}

// function get current position fail
function failure(){
alert(‘geolocation failure!’);
}

</body>
</html>

Hasil tampilan gambarnya seperti dibawah ini.

geolocation-endang

untuk referensi silahkan kunjungi :

https://developers.google.com/maps/documentation/javascript/tutorial

sekian, mudah-mudahan informasi ini bermanfaat, terimakasih.

Kode Decimal dan Hex desimal simbol-simbol dalam HTML

Kumpulan symbol dengan kode desimal dan hexadesimalnya yang sering di pergunakan dalam kode html.

Char Dec Hex Name
9985 2701 UPPER BLADE SCISSORS
9986 2702 BLACK SCISSORS
9987 2703 LOWER BLADE SCISSORS
9988 2704 WHITE SCISSORS
9989 2705 WHITE HEAVY CHECK MARK
9990 2706 TELEPHONE LOCATION SIGN
9991 2707 TAPE DRIVE
9992 2708 AIRPLANE
9993 2709 ENVELOPE
9994 270A RAISED FIST
9995 270B RAISED HAND
9996 270C VICTORY HAND
9997 270D WRITING HAND
9998 270E LOWER RIGHT PENCIL
9999 270F PENCIL
10000 2710 UPPER RIGHT PENCIL
10001 2711 WHITE NIB
10002 2712 BLACK NIB
10003 2713 CHECK MARK
10004 2714 HEAVY CHECK MARK
10005 2715 MULTIPLICATION X
10006 2716 HEAVY MULTIPLICATION X
10007 2717 BALLOT X
10008 2718 HEAVY BALLOT X
10009 2719 OUTLINED GREEK CROSS
10010 271A HEAVY GREEK CROSS
10011 271B OPEN CENTRE CROSS
10012 271C HEAVY OPEN CENTRE CROSS
10013 271D LATIN CROSS
10014 271E SHADOWED WHITE LATIN CROSS
10015 271F OUTLINED LATIN CROSS
10016 2720 MALTESE CROSS
10017 2721 STAR OF DAVID
10018 2722 FOUR TEARDROP-SPOKED ASTERISK
10019 2723 FOUR BALLOON-SPOKED ASTERISK
10020 2724 HEAVY FOUR BALLOON-SPOKED ASTERISK
10021 2725 FOUR CLUB-SPOKED ASTERISK
10022 2726 BLACK FOUR POINTED STAR
10023 2727 WHITE FOUR POINTED STAR
10024 2728 SPARKLES
10025 2729 STRESS OUTLINED WHITE STAR
10026 272A CIRCLED WHITE STAR
10027 272B OPEN CENTRE BLACK STAR
10028 272C BLACK CENTRE WHITE STAR
10029 272D OUTLINED BLACK STAR
10030 272E HEAVY OUTLINED BLACK STAR
10031 272F PINWHEEL STAR
10032 2730 SHADOWED WHITE STAR
10033 2731 HEAVY ASTERISK
10034 2732 OPEN CENTRE ASTERISK
10035 2733 EIGHT SPOKED ASTERISK
10036 2734 EIGHT POINTED BLACK STAR
10037 2735 EIGHT POINTED PINWHEEL STAR
10038 2736 SIX POINTED BLACK STAR
10039 2737 EIGHT POINTED RECTILINEAR BLACK STAR
10040 2738 HEAVY EIGHT POINTED RECTILINEAR BLACK STAR
10041 2739 TWELVE POINTED BLACK STAR
10042 273A SIXTEEN POINTED ASTERISK
10043 273B TEARDROP-SPOKED ASTERISK
10044 273C OPEN CENTRE TEARDROP-SPOKED ASTERISK
10045 273D HEAVY TEARDROP-SPOKED ASTERISK
10046 273E SIX PETALLED BLACK AND WHITE FLORETTE
10047 273F BLACK FLORETTE
10048 2740 WHITE FLORETTE
10049 2741 EIGHT PETALLED OUTLINED BLACK FLORETTE
10050 2742 CIRCLED OPEN CENTRE EIGHT POINTED STAR
10051 2743 HEAVY TEARDROP-SPOKED PINWHEEL ASTERISK
10052 2744 SNOWFLAKE
10053 2745 TIGHT TRIFOLIATE SNOWFLAKE
10054 2746 HEAVY CHEVRON SNOWFLAKE
10055 2747 SPARKLE
10056 2748 HEAVY SPARKLE
10057 2749 BALLOON-SPOKED ASTERISK
10058 274A EIGHT TEARDROP-SPOKED PROPELLER ASTERISK
10059 274B HEAVY EIGHT TEARDROP-SPOKED PROPELLER ASTERISK
10060 274C CROSS MARK
10061 274D SHADOWED WHITE CIRCLE
10062 274E NEGATIVE SQUARED CROSS MARK
10063 274F LOWER RIGHT DROP-SHADOWED WHITE SQUARE
10064 2750 UPPER RIGHT DROP-SHADOWED WHITE SQUARE
10065 2751 LOWER RIGHT SHADOWED WHITE SQUARE
10066 2752 UPPER RIGHT SHADOWED WHITE SQUARE
10067 2753 BLACK QUESTION MARK ORNAMENT
10068 2754 WHITE QUESTION MARK ORNAMENT
10069 2755 WHITE EXCLAMATION MARK ORNAMENT
10070 2756 BLACK DIAMOND MINUS WHITE X
10071 2757 HEAVY EXCLAMATION MARK SYMBOL
10072 2758 LIGHT VERTICAL BAR
10073 2759 MEDIUM VERTICAL BAR
10074 275A HEAVY VERTICAL BAR
10075 275B HEAVY SINGLE TURNED COMMA QUOTATION MARK ORNAMENT
10076 275C HEAVY SINGLE COMMA QUOTATION MARK ORNAMENT
10077 275D HEAVY DOUBLE TURNED COMMA QUOTATION MARK ORNAMENT
10078 275E HEAVY DOUBLE COMMA QUOTATION MARK ORNAMENT
10079 275F HEAVY LOW SINGLE COMMA QUOTATION MARK ORNAMENT
10080 2760 HEAVY LOW DOUBLE COMMA QUOTATION MARK ORNAMENT
10081 2761 CURVED STEM PARAGRAPH SIGN ORNAMENT
10082 2762 HEAVY EXCLAMATION MARK ORNAMENT
10083 2763 HEAVY HEART EXCLAMATION MARK ORNAMENT
10084 2764 HEAVY BLACK HEART
10085 2765 ROTATED HEAVY BLACK HEART BULLET
10086 2766 FLORAL HEART
10087 2767 ROTATED FLORAL HEART BULLET
10088 2768 MEDIUM LEFT PARENTHESIS ORNAMENT
10089 2769 MEDIUM RIGHT PARENTHESIS ORNAMENT
10090 276A MEDIUM FLATTENED LEFT PARENTHESIS ORNAMENT
10091 276B MEDIUM FLATTENED RIGHT PARENTHESIS ORNAMENT
10092 276C MEDIUM LEFT-POINTING ANGLE BRACKET ORNAMENT
10093 276D MEDIUM RIGHT-POINTING ANGLE BRACKET ORNAMENT
10094 276E HEAVY LEFT-POINTING ANGLE QUOTATION MARK ORNAMENT
10095 276F HEAVY RIGHT-POINTING ANGLE QUOTATION MARK ORNAMENT
10096 2770 HEAVY LEFT-POINTING ANGLE BRACKET ORNAMENT
10097 2771 HEAVY RIGHT-POINTING ANGLE BRACKET ORNAMENT
10098 2772 LIGHT LEFT TORTOISE SHELL BRACKET ORNAMENT
10099 2773 LIGHT RIGHT TORTOISE SHELL BRACKET ORNAMENT
10100 2774 MEDIUM LEFT CURLY BRACKET ORNAMENT
10101 2775 MEDIUM RIGHT CURLY BRACKET ORNAMENT
10102 2776 DINGBAT NEGATIVE CIRCLED DIGIT ONE
10103 2777 DINGBAT NEGATIVE CIRCLED DIGIT TWO
10104 2778 DINGBAT NEGATIVE CIRCLED DIGIT THREE
10105 2779 DINGBAT NEGATIVE CIRCLED DIGIT FOUR
10106 277A DINGBAT NEGATIVE CIRCLED DIGIT FIVE
10107 277B DINGBAT NEGATIVE CIRCLED DIGIT SIX
10108 277C DINGBAT NEGATIVE CIRCLED DIGIT SEVEN
10109 277D DINGBAT NEGATIVE CIRCLED DIGIT EIGHT
10110 277E DINGBAT NEGATIVE CIRCLED DIGIT NINE
10111 277F DINGBAT NEGATIVE CIRCLED NUMBER TEN
10112 2780 DINGBAT CIRCLED SANS-SERIF DIGIT ONE
10113 2781 DINGBAT CIRCLED SANS-SERIF DIGIT TWO
10114 2782 DINGBAT CIRCLED SANS-SERIF DIGIT THREE
10115 2783 DINGBAT CIRCLED SANS-SERIF DIGIT FOUR
10116 2784 DINGBAT CIRCLED SANS-SERIF DIGIT FIVE
10117 2785 DINGBAT CIRCLED SANS-SERIF DIGIT SIX
10118 2786 DINGBAT CIRCLED SANS-SERIF DIGIT SEVEN
10119 2787 DINGBAT CIRCLED SANS-SERIF DIGIT EIGHT
10120 2788 DINGBAT CIRCLED SANS-SERIF DIGIT NINE
10121 2789 DINGBAT CIRCLED SANS-SERIF NUMBER TEN
10122 278A DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT ONE
10123 278B DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT TWO
10124 278C DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT THREE
10125 278D DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT FOUR
10126 278E DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT FIVE
10127 278F DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT SIX
10128 2790 DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT SEVEN
10129 2791 DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT EIGHT
10130 2792 DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT NINE
10131 2793 DINGBAT NEGATIVE CIRCLED SANS-SERIF NUMBER TEN
10132 2794 HEAVY WIDE-HEADED RIGHTWARDS ARROW
10133 2795 HEAVY PLUS SIGN
10134 2796 HEAVY MINUS SIGN
10135 2797 HEAVY DIVISION SIGN
10136 2798 HEAVY SOUTH EAST ARROW
10137 2799 HEAVY RIGHTWARDS ARROW
10138 279A HEAVY NORTH EAST ARROW
10139 279B DRAFTING POINT RIGHTWARDS ARROW
10140 279C HEAVY ROUND-TIPPED RIGHTWARDS ARROW
10141 279D TRIANGLE-HEADED RIGHTWARDS ARROW
10142 279E HEAVY TRIANGLE-HEADED RIGHTWARDS ARROW
10143 279F DASHED TRIANGLE-HEADED RIGHTWARDS ARROW
10144 27A0 HEAVY DASHED TRIANGLE-HEADED RIGHTWARDS ARROW
10145 27A1 BLACK RIGHTWARDS ARROW
10146 27A2 THREE-D TOP-LIGHTED RIGHTWARDS ARROWHEAD
10147 27A3 THREE-D BOTTOM-LIGHTED RIGHTWARDS ARROWHEAD
10148 27A4 BLACK RIGHTWARDS ARROWHEAD
10149 27A5 HEAVY BLACK CURVED DOWNWARDS AND RIGHTWARDS ARROW
10150 27A6 HEAVY BLACK CURVED UPWARDS AND RIGHTWARDS ARROW
10151 27A7 SQUAT BLACK RIGHTWARDS ARROW
10152 27A8 HEAVY CONCAVE-POINTED BLACK RIGHTWARDS ARROW
10153 27A9 RIGHT-SHADED WHITE RIGHTWARDS ARROW
10154 27AA LEFT-SHADED WHITE RIGHTWARDS ARROW
10155 27AB BACK-TILTED SHADOWED WHITE RIGHTWARDS ARROW
10156 27AC FRONT-TILTED SHADOWED WHITE RIGHTWARDS ARROW
10157 27AD HEAVY LOWER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
10158 27AE HEAVY UPPER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
10159 27AF NOTCHED LOWER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
10160 27B0 CURLY LOOP
10161 27B1 NOTCHED UPPER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
10162 27B2 CIRCLED HEAVY WHITE RIGHTWARDS ARROW
10163 27B3 WHITE-FEATHERED RIGHTWARDS ARROW
10164 27B4 BLACK-FEATHERED SOUTH EAST ARROW
10165 27B5 BLACK-FEATHERED RIGHTWARDS ARROW
10166 27B6 BLACK-FEATHERED NORTH EAST ARROW
10167 27B7 HEAVY BLACK-FEATHERED SOUTH EAST ARROW
10168 27B8 HEAVY BLACK-FEATHERED RIGHTWARDS ARROW
10169 27B9 HEAVY BLACK-FEATHERED NORTH EAST ARROW
10170 27BA TEARDROP-BARBED RIGHTWARDS ARROW
10171 27BB HEAVY TEARDROP-SHANKED RIGHTWARDS ARROW
10172 27BC WEDGE-TAILED RIGHTWARDS ARROW
10173 27BD HEAVY WEDGE-TAILED RIGHTWARDS ARROW
10174 27BE OPEN-OUTLINED RIGHTWARDS ARROW
10175 27BF DOUBLE CURLY LOOP