Ví dụ đơn giản CSS, Java script, HTML tạo một trang đơn giản

Ví dụ đơn giản CSS, Java script, HTML tạo một trang đơn giản
1. Trang đơn gian chưa có css




[sourcecode language="html" wraplines="false"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>First test</title>
</head>
[/sourcecode]
[sourcecode language="javascript" wraplines="false"]
<script type="text/javascript">
function getBrowser()
{
document.getElementById('caption').innerHTML = navigator.appName;
}

function pressKey(datename)
{
if(!(event.keyCode >=47 && event.keyCode <= 57))
{
event.returnValue = false;
document.getElementById('msgBirthDate').innerHTML = 'Number only';
}
else
{
event.returnValue = true;
document.getElementById('msgBirthDate').innerHTML = '';
}
}

function nameChange()
{
if(frm.txtFullName.value == '')
{
document.getElementById('msgName').innerHTML = 'Name not null';
}
else
{
document.getElementById('msgName').innerHTML = '';
}
}

function addressChange()
{
if(frm.txtAddress.value == '')
{
document.getElementById('msgAddress').innerHTML = 'Address not null';
}
else
document.getElementById('msgAddress').innerHTML = '';
}

function educationChange()
{
if(frm.education.value == 0)
{
document.getElementById('msgEducation').innerHTML = 'Select education';
}
else
document.getElementById('msgEducation').innerHTML = '';
}

function dateChange()
{
if(frm.txtDay.value == '' || frm.txtMonth.value == '' || frm.txtYear.value == '')
{
document.getElementById('msgBirthDate').innerHTML = 'BirthDate not valid';
}
else
document.getElementById('msgBirthDate').innerHTML = '';
}

function apply()
{
if(frm.txtFullName.value == '')
document.getElementById('msgName').innerHTML = 'Name not null';
if(frm.txtAddress.value == '')
document.getElementById('msgAddress').innerHTML = 'Address not null';
if(frm.education.value == 0)
document.getElementById('msgEducation').innerHTML = 'Select education';
if(frm.txtDay.value == '' || frm.txtMonth.value == '' || frm.txtYear.value == '')
document.getElementById('msgBirthDate').innerHTML = 'BirthDate not valid';

if(frm.txtFullName.value != '' && frm.txtAddress.value != '' && frm.education.value != 0 && frm.txtDay.value != '' && frm.txtMonth.value != '' && frm.txtYear.value != '')
{
document.getElementById('results').innerHTML = 'FullName: '+ frm.txtFullName.value + ' <br/>' + 'Address: ' + frm.txtAddress.value + ' <br/>' + 'Education: ' + frm.education.value+ ' <br/>';

getBrowser();
}
}
</script>
[/sourcecode]
[sourcecode language="html" wraplines="false"]
<body>
<form name="frm" action="">
<table width="500" id='tbl'>
<caption id='caption' align="bottom">
Figure 01
</caption>
<tr>
<th colspan="2" scope="col">APPLICATION FORM </th>
</tr>
<tr>
<td class="captionText">Full name: </td>
<td >
<input name="txtFullName" type="text" class="txt" size="30" onkeyup="nameChange();"/>
<label id="msgName" class="msg"></label></td>
</tr>
<tr>
<td class="captionText">Address: </td>
<td ><input name="txtAddress" type="text" class="txt" id="txtAddress" size="30" onkeyup="addressChange();"/>
<label id="msgAddress" class="msg"></label></td>
</tr>
<tr>
<td class="captionText">BirthDate: </td>
<td ><input name="txtDay" type="text" class="txt" onkeypress="pressKey();" size="4" onkeyup="dateChange();"/>
-
<input name="txtMonth" type="text" class="txt" size="4" onkeypress="pressKey();" onkeyup="dateChange();"/>
-
<input name="txtYear" type="text" class="txt" size="10" onkeypress="pressKey();" onkeyup="dateChange();"/>
<label id="msgBirthDate" class="msg"></label></td>
</tr>
<tr>
<td class="captionText">Gender: </td>
<td><input name="gender" type="radio" class="txt" value="m" checked="checked" />
Male
<input name="gender" type="radio" class="txt" value="f" />
Female <label class="msg" id="msgGender"></label></td>
</tr>
<tr>
<td class="captionText">Education: </td>
<td >
<select class="txt" id="education" onchange="educationChange();">
<option value="0">----- Select one ------</option>
<option value="1">HighSchool</option>
<option value="2">University</option>
</select> <label id="msgEducation" class="msg"></label></td>
</tr>
<tr>
<td colspan="2" align="center">
<input name="btnApp" type="button" class="btnApply" onclick="apply();" /> </td>
</tr>
<tr>
<td >&nbsp;</td>
<td align="left" class="result" id="results" >&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>
[/sourcecode]

2. Bổ sung thêm css như sau



[sourcecode language="css" wraplines="false"]
/* CSS Document */
body
{
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
color:black;
}
table
{
border: #E7E7E7 solid 1px;
margin-left:auto;
margin-right:auto;
vertical-align:middle;
}

table th
{
background-color:#FFFFCC;
color:#FF9F00;
font-size:large;
padding: 10px 10px 10px 10px;
}

table td
{
padding: 3px 3px 3px 3px;
}

table caption
{
color:#2A3F00;
font-size:12px;
font-style:italic;
}

.captionText
{
text-align:right;
width:40%;
}

.btnApply
{
background:url(../themes/images/btnApp.jpg);
background-repeat:no-repeat;
background-position:center;
height: 25px;
width: 70px;
border:none;
}

.result
{
background-color:#336600;
color:#FFFFFF;
font-style:italic;
}

.msg
{
color:#FF0000;
font-size:10px;
}

.txt
{
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
color:black;
padding: 3px 3px 3px 3px;
}
[/sourcecode]

Hình nút nhấn


Chúc vui vẻ

Mẹ vẫn quanh đây

Phần 1
[youtube="http://youtu.be/DwV2VtvdYhQ"]

Phần 2
[youtube="http://youtu.be/DqEo1mrwz8s"]

Phần 3
[youtube="http://youtu.be/0zicUtUzs_o"]

Simple JSP - Tao trang sp đơn giản

1.Using include
- Create page
[sourcecode language="html" wraplines="false"]
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>JSP Page</h1>
<%@ include file="Input.jsp"%>
</body>
</html>
[/sourcecode]
With Input .jsp will create in next exercise.
2. Using resource in jsp page
- Create Input.jsp
[sourcecode language="html" wraplines="false"]
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<%
String fNumber = request.getParameter("fNumber");
String sNumber = request.getParameter("sNumber");
String oper = request.getParameter("oper");
String result="";
if(oper!=null) {
if(oper.equalsIgnoreCase("+"))
result=(Integer.parseInt(fNumber) + Integer.parseInt(sNumber))+"";
else if(oper.equalsIgnoreCase("-"))
result=(Integer.parseInt(fNumber) - Integer.parseInt(sNumber))+"";
else if(oper.equalsIgnoreCase("*"))
result=(Integer.parseInt(fNumber) * Integer.parseInt(sNumber))+"";
else if(oper.equalsIgnoreCase("/"))
result=(Integer.parseInt(fNumber) / Integer.parseInt(sNumber))+"";
else
result="NaN";
}
%>
<h1>This is demo simple JSP</h1>
<form action="Input.jsp" method="post">
<br>
<table width="400px" border="1px" cellpadding="0">
<tr>
<td>
First number:
</td>
<td>
<input type="text" name="fNumber" value="<%=fNumber%>"/>
</td>
</tr>
<tr>
<td>
Second number:
</td>
<td>
<input type="text" name="sNumber" value="<%=sNumber%>"/><br>
</td>
</tr>
<tr>
<td>
Operator:
</td>
<td>
<input type="text" name="oper" value="<%=oper%>"/><br>
</td>
</tr>
<tr>
<td>
Result
</td>
<td>
<input type="text" name="Result" value="<%=result%>">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="Submit" value=Submit>
</td>
</tr>
</table>
</form>
</body>
</html>
[/sourcecode]

Posting Source Code - Đăng tải mã nguồn lên wordpress

Chào các bạn, trong quá trình sử dụng wordprees từ ban đâu tôi gặp khó khăn trong việc đư mã nguồn lên giao diện của wordpress vì wordpress sẽ hiểu các ký tự gõ vào là thẻ của ngôn ngữ HTML. và sau khi tìm hiểu tôi tìm được thông tin từ wordpress cho phép đưa mã nguồn lên như bên dưới.
[sourcecode language="css"]
#button {
font-weight: bold;
border: 2px solid #fff;}
[/sourcecode]
Vậy làm sao để thực hiện được ?
Chỉ đơn giản đặt mã nguồn vào giữa thẻ sourcecode và chỉ định language="ngô ngữ sử dụng". Ví dụ với đoạn mã nguồn trên khi đăng thông tin ta viết như sau:


Với thể SOURCECODE hỗ trợ các ngô ngữ sau:
•actionscript3,bash,clojure,coldfusion,cpp,csharp,css,delphi,erlang,fsharp,diff,groovy,html,javascript,java,javafx,matlab (keywords only),objc,perl,php,text,powershell,python,r,ruby,scala,sql,vb,xml

Ngoài ra chúng ta còn có thể cấu hình ở các thuộc tính của thẻ sourcecode để thực hiện một số công việc hữu ích.
Ví dụ: autolinks (true/false) — Cho phép tự kiểm tra và chuyển đổi địa chỉ liên kết.
Bạn tham khảo thêm tại
[sourcecode language="html" autolinks="true"]
http://en.support.wordpress.com/code/posting-source-code/
[/sourcecode]

Ví dụ code html và highlight dòng 12

[sourcecode language="html" autolinks="true" highlight="12"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WordPress.com Code Example</title>
</head>
<body>
<h1>WordPress.com Code Example</h1>

<p><?php echo 'Hello World!'; ?></p>

<p>This line is highlighted.</p>

<p>This line is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long.</p>

<div class="foobar">
This is an
example of smart
tabs.
</div>

<p><a href="http://wordpress.com/">WordPress.com</a></p>
</body>
</html>
[/sourcecode]

Mang 25 GB miễn phí vào máy tính của bạn (Skydrive to Window explorer)

- Với dung lượng lên đến 25 Gb miễn phí dịch vụ skydrive của microsoft là một nơi lưu trữ trực tuyến rất đáng quan tâm. Trong bài này Dân chia sẽ với các bạn cách thức chúng ta đồng bộ skydrive trực tiếp thông qua window explorer.
1. Đăng ký tài khoản trên hệ thống live.com
2. Click chuột phải lên My Computer vào chọn


3. Đăng nhập vào skydrive và copy id của bạn


4. Dán vào giao diện kết nối như sao \\docs.live.net@SSL\phần id tô bên trên


5. Nhấn Connect và điền thông tin chứng thực


Tới đây chúng ta có thể sử dụng Skydrive như một ổ đĩa cục bộ rồi.

Hiện tại thì SkyDrive đã cung cấp một phần mềm nhỏ để cấu hình tự động và đồng bộ với máy tính mạnh hơn và nhanh hơn

Chúc các bạn thành công.

CSS button

This is very simple CSS for nice button



CSS code:
[sourcecode language="css"]
.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;

font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:12px;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}

/* STANDARD */

button:hover, .buttons a:hover{
background-color:#dff4ff;
border:1px solid #c2e1ef;
color:#336699;
}
.buttons a:active{
background-color:#6299c5;
border:1px solid #6299c5;
color:#fff;
}

/* POSITIVE */

button.positive, .buttons a.positive{
color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
background-color:#E6EFC2;
border:1px solid #C6D880;
color:#529214;
}
.buttons a.positive:active{
background-color:#529214;
border:1px solid #529214;
color:#fff;
}

/* NEGATIVE */

.buttons a.negative, button.negative{
color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
background:#fbe3e4;
border:1px solid #fbc2c4;
color:#d12f19;
}
.buttons a.negative:active{
background-color:#d12f19;
border:1px solid #d12f19;
color:#fff;
}

/* REGULAR */

button.regular, .buttons a.regular{
color:#336699;
}
.buttons a.regular:hover, button.regular:hover{
background-color:#dff4ff;
border:1px solid #c2e1ef;
color:#336699;
}
.buttons a.regular:active{
background-color:#6299c5;
border:1px solid #6299c5;
color:#fff;
}
[/sourcecode]

Kế hoạch học tập toàn khóa Cao đẳng K37 KTPM

Chào các bạn đây là file mềm KH học tập toàn khóa của lớp Cao đẳng KTPM

Huong dan dang ky khht toan khoa

Hiện hệ thống của trường đang mở lại cho các bạn đăng ký KH học tập nên tôi gởi các bạn tham khảo.

Thân.