Archives for December 28, 2018

CSS BOOTSTRAP

Posted on December 28, 2018 ·

Cascading Style Sheets

-Cascading Style Sheets,fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.
– w3schools

The Advantage
– Save you time
– Page Loads Faster
– Multiple Device Compatibility
– Its a Global Web Standard
– Easy to Maintain
– Superior style over HTML

Implementation
– Inline
– External
– Internal

External Style Sheet

With an external style sheet, you can change the look of an entire website by changing just one file!

Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.

Here is how the “mystyle.css” looks:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>

Inline Styles

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

The example below shows how to change the color and the left margin of a <h1> element:

<h1 style=”color:blue;margin-left:30px;”>This is a heading</h1>

Filed Under: Programming

Berkunjung ke Taman Tema Dinosaur Kingdom di Puteri Harbour, Johor.

Posted on December 28, 2018 ·

Assalamualaikum,

Sempena cuti sekolah yang lalu, saya dan keluarga telah berkunjung ke taman tema Dinosaur Kingdom di Puteri Harbour, JB. Alhamdulillah, cuaca sangat baik ketika saya sampai dan hujan di sebelah petang. Pelbagai aktiviti yang terdapat di taman tema tersebut selain aktiviti bergambar dengan pelbagai jenis dinosaur yang terdapat di situ. Kebanyakan aktiviti adalah memerlukan pengunjung membeli token untuk menyertai aktiviti tersebut.

Harga tiket :

Dewasa – RM30 percuma 2 token

Kanak-Kanak – RM20 percuma 1 token

Mengikut pengalaman saya juga jika mempunyai kad keahlian Watson dan resit pembelian di Watson boleh dapat percuma satu tiket lagi jika membeli satu tiket (BUY 1 FREE 1).

Bergambar dengan pelbagai jenis Dinosaur

Tempat permainan Indoor

Kreatif sungguh!!Tong sampah pon Dinosaur jugak.

Sesuai untuk kunjungan semua peringkat umur.

Itu sahaja yang dapat saya kongsikan serba sedikit.

Sekian, terima kasih =)

Filed Under: Cuti-Cuti

Update Panel Control in ASP.Net

Posted on December 28, 2018 ·

Using UpdatePanel control we can refresh only required part of the page instead of whole page.

UpdatePanel Control

You can refresh the selected part of the web page by using UpdatePanel control, Ajax updatepanel control contains a two child tags that is ContentTemplate and Triggers. In a ContentTemplate tag we used to place the user controls and the Trigger tag allows you to define certain triggers which will make the panel update its content.

Add this code in file .aspx :

<asp:UpdatePanel ID=“updatepnl” runat=“server”>

<ContentTemplate>

</ContentTemplate>

</asp:UpdatePanel>

All the contents that must be updated asynchronously (only contenttemplate parts are updated and rest of the web page part is untouched) are placed here. It allows us to send request Or post data to server without submitting the whole page so that is called asynchronous.

Filed Under: Programming

Bootstrap – Form controls

Posted on December 28, 2018 ·

Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Below is a complete list of the specific form controls supported by Bootstrap and the classes that customize them.

Classes Used for Supported variations
.form-group Any group of form controls Use with any block-level element like <fieldset> or <div>
.form-control Textual inputs text, password, datetime-local, date, month, time, week, number, email, url, search, tel, color
Select menus multiple, size
Textareas N/A
.form-control-file File inputs file
.form-check Checkboxes and radios N/A

 

Coding html

Since Bootstrap utilizes the HTML5 doctype, all inputs must have a type attribute.

<form>
<div class=”form-group”>
<label for=”exampleFormControlInput1″>Email address</label>
<input type=”email” class=”form-control” id=”exampleFormControlInput1″ placeholder=”name@example.com”>
</div>
<div class=”form-group”>
<label for=”exampleFormControlSelect1″>Example select</label>
<select class=”form-control” id=”exampleFormControlSelect1″>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class=”form-group”>
<label for=”exampleFormControlSelect2″>Example multiple select</label>
<select multiple class=”form-control” id=”exampleFormControlSelect2″>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class=”form-group”>
<label for=”exampleFormControlTextarea1″>Example textarea</label>
<textarea class=”form-control” id=”exampleFormControlTextarea1″ rows=”3″></textarea>
</div>
</form>

Filed Under: Programming