Fungsi attribut autofocus pada attribut html

Fungsi attribute autofocus pada html yaitu digunakan sebagai default / standar form input yang secara otomatis di select pada sebuah form input dalam html.

Berikut ini sedikit potongan script untuk attribut autofocus pada input form :

<input id="email"type="email" name="email" placeholder="email@gxxxxx" autofocus required />
<input id="username" name="username" required type="text" placeholder="Username"/>
<input id="first_name" name="firstname"required type="text" placeholder="First Name"/>
<input required id="last_name" name="lastname" type="text" placeholder="Last Name"/>
<input required name="birthdate" type="date"/>

Dari sekian banya form input diatas yang diselect sebagai autofocus hanyalah email maka tampilan outputnya seperti berikut :

Oke sudah jelas tentang fungsi autofocus pada html,

Terima kasih atas kunjungannya.

Menampilkan Simbol Akar Kuadrat Pada Web HTML(Blog)

Akar kuadrat juga bisa dilakukan dengan perintah <table> HTML. Berikut ini contohnya :

r = √

x2 + y2

Berikut persamaa jika sel tabel ditampilkan :

r = √

x2 + y2

Berikut Source Code HTML-nya :

<table style="margin-top:0.5em; margin-bottom:0.5em; text-align: center;"
    align="center" cellpadding="0" cellspacing="0" >
    <tr>
        <td nowrap="nowrap" align="right">
            <i>r</i> = <span style="font-size: 150%;">&radic;</span>
        </td><td style="border-top:solid 1px black;" nowrap="nowrap">
            &nbsp;<i>x</i><sup>2</sup> + <i>y</i><sup>2</sup>
        </td>
    </tr>
</table>

 

Hal yang perlu diperhatikan :

• simbol radikal diberikan ukuran font yang lebih besar; 
• garis horizontal dibuat dengan memberikan sel perbatasan atas;
• Saya menggunakan non-breaking space untuk memberikan sedikit lebih banyak ruang sebelah radikal.

Untuk konsistensi dan fleksibilitas Anda mungkin ingin menggunakan gaya CSS kelas bukan direktif gaya dalam perintah <table> (ini ditampilkan dalam fraksi contoh di atas).

Radikal yang lebih besar dapat memiliki dengan meningkatkan ukuran font (meskipun masing-masing browser menafsirkan ini sedikit berbeda), di sini adalah contoh yang dikombinasikan dengan pecahan :  

r = √	x2 + y2
	5

Sebuah pendekatan yang berbeda adalah dengan menggunakan gambar bitmap untuk simbol radikal. Dengan CSS posisi absolut Anda dapat membuat PNG transparan atau GIF bitmap dan posisi itu atas teks. Tapi kelemahan pendekatan ini adalah: jika pengguna memilih ukuran font yang berbeda, maka simbol radikal tidak akan skala dengan benar bersama dengan teks di bawah radikal, dan kualitas cetak tidak sebagus saat pencampuran bitmap dan teks.

Kode HTML untuk Pecahan Matematika

Pecahan dapat dibuat dengan table HTML. Saya menggunakan style border-top CSS untuk membuat garis fraksi berikut contohnya :

x =	x2 + x + 1
	2 cos(x)

Di sini persamaannya jika garis tabel diaktifkan, sehingga Anda dapat melihat di mana sel'nya atau garisnya :

x =	x2 + x + 1
	2 cos(x)

Berikut ini adalah Source Kode HTML dan CSS yang menghasilkan bentuk pecahan.

<style>
    td.upper_line { border-top:solid 1px black; }
    table.fraction { text-align: center; vertical-align: middle;
        margin-top:0.5em; margin-bottom:0.5em; line-height: 2em; }
</style>

<table class="fraction" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="2" nowrap="nowrap">
            <i>x</i> =  
        </td><td nowrap="nowrap">
            <i>x</i><sup>2</sup> + <i>x</i> + 1
        </td>
    </tr><tr>
        <td class="upper_line">
            2 cos(<i>x</i>)
        </td>
    </tr>
</table>
 

Perhatikan bahwa bagian dari persamaan yang tidak dalam pecahan dimasukkan ke dalam sel tabel terpisah yang mencakup baris tabel tersebut. Saya menemukan bahwa indentasi yang tepat membantu untuk membuat HTML lebih mudah dibaca saat authoring. Saya tidak menggunakan macro untuk tabel ini karena macro akan mengaburkan Indentasi pecahan.

Kode HTML - Karakter dan Simbol

Kali saya share tentan Kode HTML - Karakter dan Simbol yang merupakan standar ASCII Latin alphabet No. 1 Browser support: All browsers

Berikut Daftar Listing Codenya :

Standard ASCII set, HTML Entity names, ISO 10646, ISO 8879, ISO 8859-1 Latin alphabet No. 1 Browser support: All browsers

ASCII HTML HTML Dec Hex Symbol Number Name Description 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 20 21 22 23 24 25 26 27 28 29 2A 2B 2C 2D 2E 2F ! " # $ % & ' ( ) * + , - . /   ! " # $ % & ' ( ) * + , - . / " & space exclamation point double quotes number sign dollar sign percent sign ampersand single quote opening parenthesis closing parenthesis asterisk plus sign comma minus sign - hyphen period slash

ASCII HTML HTML Dec Hex Symbol Number Name Description 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 30 31 32 33 34 35 36 37 38 39 3A 3B 3C 3D 3E 3F 0 1 2 3 4 5 6 7 8 9 : ; < = > ? &#48; &#49; &#50; &#51; &#52; &#53; &#54; &#55; &#56; &#57; &#58; &#59; &#60; &#61; &#62; &#63; &lt; &gt; zero one two three four five six seven eight nine colon semicolon less than sign equal sign greater than sign question mark

ASCII HTML HTML Dec Hex Symbol Number Name Description 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 40 41 42 43 44 45 46 47 48 49 4A 4B 4C 4D 4E 4F @ A B C D E F G H I J K L M N O &#64; &#65; &#66; &#67; &#68; &#69; &#70; &#71; &#72; &#73; &#74; &#75; &#76; &#77; &#78; &#79; at symbol

ASCII HTML HTML Dec Hex Symbol Number Name Description 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 50 51 52 53 54 55 56 57 58 59 5A 5B 5C 5D 5E 5F P Q R S T U V W X Y Z [ \ ] ^ _ &#80; &#81; &#82; &#83; &#84; &#85; &#86; &#87; &#88; &#89; &#90; &#91; &#92; &#93; &#94; &#95; opening bracket backslash closing bracket caret - circumflex underscore

ASCII HTML HTML Dec Hex Symbol Number Name Description 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 60 61 62 63 64 65 66 67 68 69 6A 6B 6C 6D 6E 6F ` a b c d e f g h i j k l m n o &#96; &#97; &#98; &#99; &#100; &#101; &#102; &#103; &#104; &#105; &#106; &#107; &#108; &#109; &#110; &#111; grave accent

ASCII HTML HTML Dec Hex Symbol Number Name Description 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 70 71 72 73 74 75 76 77 78 79 7A 7B 7C 7D 7E 7F p q r s t u v w x y z { | } ~ &#112; &#113; &#114; &#115; &#116; &#117; &#118; &#119; &#120; &#121; &#122; &#123; &#124; &#125; &#126; opening brace vertical bar closing brace equivalency sign - tilde (not defined in HTML 4 standard)

ASCII HTML HTML Dec Hex Symbol Number Name Description 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 80 81 82 83 84 85 86 87 88 89 8A 8B 8C 8D 8E 8F (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard)

ASCII HTML HTML Dec Hex Symbol Number Name Description 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 90 91 92 93 94 95 96 97 98 99 9A 9B 9C 9D 9E 9F (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard) (not defined in HTML 4 standard)

ASCII HTML HTML Dec Hex Symbol Number Name Description 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 A0 A1 A2 A3 A4 A5 A6 A7 A8 A9 AA AB AC AD AE AF ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­ ® ¯ &#160; &#161; &#162; &#163; &#164; &#165; &#166; &#167; &#168; &#169; &#170; &#171; &#172; &#173; &#174; &#175; &nbsp; &iexcl; &cent; &pound; &curren; &yen; &brvbar; &sect; &uml; &copy; &ordf; &laquo; &not; &shy; &reg; &macr; non-breaking space inverted exclamation mark cent sign pound sign currency sign yen sign broken vertical bar section sign spacing diaeresis - umlaut copyright sign feminine ordinal indicator left double angle quotes not sign soft hyphen registered trade mark sign spacing macron - overline

ASCII HTML HTML Dec Hex Symbol Number Name Description 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 B0 B1 B2 B3 B4 B5 B6 B7 B8 B9 BA BB BC BD BE BF ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ &#176; &#177; &#178; &#179; &#180; &#181; &#182; &#183; &#184; &#185; &#186; &#187; &#188; &#189; &#190; &#191; &deg; &plusmn; &sup2; &sup3; &acute; &micro; &para; &middot; &cedil; &sup1; &ordm; &raquo; &frac14; &frac12; &frac34; &iquest; degree sign plus-or-minus sign superscript two - squared superscript three - cubed acute accent - spacing acute micro sign pilcrow sign - paragraph sign middle dot - Georgian comma spacing cedilla superscript one masculine ordinal indicator right double angle quotes fraction one quarter fraction one half fraction three quarters inverted question mark

ASCII HTML HTML Dec Hex Symbol Number Name Description 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 C0 C1 C2 C3 C4 C5 C6 C7 C8 C9 CA CB CC CD CE CF À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï &#192; &#193; &#194; &#195; &#196; &#197; &#198; &#199; &#200; &#201; &#202; &#203; &#204; &#205; &#206; &#207; &Agrave; &Aacute; &Acirc; &Atilde; &Auml; &Aring; &AElig; &Ccedil; &Egrave; &Eacute; &Ecirc; &Euml; &Igrave; &Iacute; &Icirc; &Iuml; latin capital letter A with grave latin capital letter A with acute latin capital letter A with circumflex latin capital letter A with tilde latin capital letter A with diaeresis latin capital letter A with ring above latin capital letter AE latin capital letter C with cedilla latin capital letter E with grave latin capital letter E with acute latin capital letter E with circumflex latin capital letter E with diaeresis latin capital letter I with grave latin capital letter I with acute latin capital letter I with circumflex latin capital letter I with diaeresis

ASCII HTML HTML Dec Hex Symbol Number Name Description 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 D0 D1 D2 D3 D4 D5 D6 D7 D8 D9 DA DB DC DD DE DF Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß &#208; &#209; &#210; &#211; &#212; &#213; &#214; &#215; &#216; &#217; &#218; &#219; &#220; &#221; &#222; &#223; &ETH; &Ntilde; &Ograve; &Oacute; &Ocirc; &Otilde; &Ouml; &times; &Oslash; &Ugrave; &Uacute; &Ucirc; &Uuml; &Yacute; &THORN; &szlig; latin capital letter ETH latin capital letter N with tilde latin capital letter O with grave latin capital letter O with acute latin capital letter O with circumflex latin capital letter O with tilde latin capital letter O with diaeresis multiplication sign latin capital letter O with slash latin capital letter U with grave latin capital letter U with acute latin capital letter U with circumflex latin capital letter U with diaeresis latin capital letter Y with acute latin capital letter THORN latin small letter sharp s - ess-zed

ASCII HTML HTML Dec Hex Symbol Number Name Description 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 E0 E1 E2 E3 E4 E5 E6 E7 E8 E9 EA EB EC ED EE EF à á â ã ä å æ ç è é ê ë ì í î ï &#224; &#225; &#226; &#227; &#228; &#229; &#230; &#231; &#232; &#233; &#234; &#235; &#236; &#237; &#238; &#239; &agrave; &aacute; &acirc; &atilde; &auml; &aring; &aelig; &ccedil; &egrave; &eacute; &ecirc; &euml; &igrave; &iacute; &icirc; &iuml; latin small letter a with grave latin small letter a with acute latin small letter a with circumflex latin small letter a with tilde latin small letter a with diaeresis latin small letter a with ring above latin small letter ae latin small letter c with cedilla latin small letter e with grave latin small letter e with acute latin small letter e with circumflex latin small letter e with diaeresis latin small letter i with grave latin small letter i with acute latin small letter i with circumflex latin small letter i with diaeresis

ASCII HTML HTML Dec Hex Symbol Number Name Description 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 F0 F1 F2 F3 F4 F5 F6 F7 F8 F9 FA FB FC FD FE FF ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ &#240; &#241; &#242; &#243; &#244; &#245; &#246; &#247; &#248; &#249; &#250; &#251; &#252; &#253; &#254; &#255; &eth; &ntilde; &ograve; &oacute; &ocirc; &otilde; &ouml; &divide; &oslash; &ugrave; &uacute; &ucirc; &uuml; &yacute; &thorn; &yuml; latin small letter eth latin small letter n with tilde latin small letter o with grave latin small letter o with acute latin small letter o with circumflex latin small letter o with tilde latin small letter o with diaeresis division sign latin small letter o with slash latin small letter u with grave latin small letter u with acute latin small letter u with circumflex latin small letter u with diaeresis latin small letter y with acute latin small letter thorn latin small letter y with diaeresis

HTML 4.01, ISO 10646, ISO 8879, Latin extended A and B, Browser support: Internet Explorer > 4, Netscape > 4

HTML HTML Dec Hex Symbol Number Name Description 338 339 352 353 376 402 152 153 160 161 178 192 Œ œ Š š Ÿ ƒ Œ œ Š š Ÿ ƒ latin capital letter OE latin small letter oe latin capital letter S with caron latin small letter s with caron latin capital letter Y with diaeresis latin small f with hook - function

HTML HTML Dec Hex Symbol Number Name Description 8211 8212 8216 8217 8218 8220 8221 8222 8224 8225 8226 8230 8240 8364 8482 2013 2014 2018 2019 201A 201C 201D 201E 2020 2021 2022 2026 2030 20AC 2122 – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ € ™ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ € ™ € en dash em dash left single quotation mark right single quotation mark single low-9 quotation mark left double quotation mark right double quotation mark double low-9 quotation mark dagger double dagger bullet horizontal ellipsis per thousand sign euro sign trade mark sign

Demikian listing code'nya mudah-mudahan bermanfaat

Mengganti Dan Menambah Style Font Blog

Mengganti Dan Menambah Style Font Blog -- Banyak blogger yang tidak merasa nyaman dengan font yang formal dan ingin menggantinya dengan font yang lebih menarik. Sebenarnya ini sangat mudah jika template blog anda dilengkapi fungsi variabel untuk mengganti font. Lalu bagaimana jika template blog anda tidak dilengkapi dengan variabel itu?

Kebanyakan template hasil download tidak bisa diedit di perancang template. Jadi untuk mengganti fontnya, anda perlu melakukan hal-hal sederhana berikut:

MEMILIH JENIS FONT

• Buka halaman http://www.google.com/webfonts/#
• Sebaiknya anda set dulu ukuran fontnya untuk melihat tampilan font tersebut dalam ukuran yang anda inginkan. Pilih ukuran huruf dalam drop down size.

• Jika jumlah font terlalu banyak, anda bisa memperkecil opsi dengan melakukan filter pada jenis font. Lihat pada sidebar kiri ada serangkaian alat filter. Pilih type font, ketebalan, kemiringan, dan lebar huruf.
• Jika anda sudah menemukan huruf-huruf yang anda sukai tinggal klik ADD TO COLLECTION pada bagian kanan bawah sampel huruf. Silahkan pilih lebih dari satu huruf jika diperlukan

• Jika anda sudah selesai memilih huruf silahkan klik USE

• Anda akan dialihkan ke halaman baru. Pada halaman baru ada 3 hal yang harus anda lakukan

• Pertama, pilih jenis ketebalan huruf yang diinginkan. Semakin banyak variasinya, maka akan semakin berat loading halaman anda nantinya....

• Kedua, pilih language style yang diinginkan. Saran saya tidak usah mengubah bagian yang ini

• Ketiga, copy kode yang diberikan untuk dipasang di blog

 

MENAMBAHKAN FONT PADA BLOG

• Jika sudah menyelesaikan tahapan di atas sekarang masuk ke akun blogger anda.
• Pilih menu TEMPLATE lalu EDIT HTML
• Cari kode  <![CDATA[/* dan paste kode yang tadi anda copy
• Jangan lupa untuk menambahkan kode / sebelum penutup > pada kode tersebut. Hasilnya akan terlihat seperti contoh di bawah

<link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative:400,700,900|Julius+Sans+One|Cherry+Swash:400,700' rel='stylesheet' type='text/css' />

• Simpan Perubahan

MENGGUNAKAN FONT
Setelah melakukan langkah di atas anda sudah menambahkan jenis font pada blog anda. Ada dua cara untuk mengganti font pada blog anda.
1. Mengganti Semua Font
Misalnya, anda ingin mengganti semua font Arial dengan font baru bernama BenchNine

• Masuk ke menu TEMPLATE >> EDIT HTML
• Centang Expand Template Widget
• Copy semua kode yang muncul
• Buka notepad dan paste kode yang dicopy tadi
• Tekan Ctrl+H untuk membuka Tool Replace
• Isi kolom Find What dengan Arial
• Isi kolom Replace With dengan BenchNine
• Klik tombol REPLACE ALL
• Copy kode yang sudah berubah tadi.
• Hapus semua kode pada blogger Edit HTML tadi dan gantikan dengan kode dari notepad
• Simpan Perubahan

2. Mengganti Font Elemen Tertentu Saja
Di sini anda bisa menggunakan Edit HTML, atau Fitur ADD CSS pada Perancang Template
Kali ini saya akan menggunakan Add CSS saja. Jadi silahkan ikuti contoh berikut:

• Setelah jendela Add CSS terbuka, silahkan pilih element yang ingin anda ganti.
• Kali ini saya akan mengganti element h2 normal, h2 link, dan h2 link:hover pada postingan blog saya. Jadi inilah kode yang akan saya ketikkan pada kolom Add CSS...

.post h2 {

font-family: BenchNine;

}

.post h2 a, .post h2 a:visited, .post h2 strong {

font-family: BenchNine;

}

.post h2 strong, .post h2 a:hover {

font-family: BenchNine;

}

• Simpan Template 

font-family: NamaFont; adalah kode yang perlu anda tambahkan pada elemen style apa saja yang ingin anda ganti font-nya. Bagian terpentingnya adalah mengetahui nama elemen yang ingin anda ganti. Kalau anda sama sekali belum tahu nama elementnya, maka anda harus masuk ke Edit HTML untuk menemukan nama elemen style yang mengendalikan suatu komponen pada template anda.

Sumber : http://trikmudahseo.blogspot.com/2012/10/mengganti-dan-menambah-style-font-blog.html