Thứ Năm, 29 tháng 9, 2016

|

Html css - Các thuộc tính cơ bản trong css phần-2

Như bài trước đã giới thiệu về các thuộc tính cơ bản và hay dùng của css.Hôm nay chúng ta sẽ đi sâu và ví dụ về các thuộc tinh css của một đoạn văn bản.
 1.ví dụ: có một đoạn văn bản nằm trong thẻ <p></p>
1
<p class="test">đây là nội dung</p>
hiển thị trên trình duyệt 
và bây giờ sẽ sử sụng thuộc tính css đầu tiên là font-size. trong file style.css 
bên ngoài trình duyệt sẽ hiển thị. 
 
các bạn thấy kích thước của chữ đã thay đổi đáng kể phải ko nào .
giờ chúng ta tiếp tục chọn loại font chữ,và kiểu chữ độ đậm nhạt của chữ

bên ngoài trình duyệt sẽ hiển được kiểu font chữ "Arial" kiểu chữ là in đậm và nghiêng. và đây là thành quả.

cuối cùng khám phá nốt 3 thuộc tính còn lại của css của một đoạn văn bản.đó là màu chữ,chữ gạch chân và chữ in hoa.


trình duyệt hiển thị

hì các bạn thấy với các thuộc tính của css thật đơn giản phải không nào .trên đây là một số tính css văn bản thường dùng,ngoài ra các bạn có thể tham khảo thêm một số thuộc tính cần thiết khác.

text-indentGhi rõ thụt đầu dòng của dòng đầu tiên trong một khối văn bản.
text-alignSắp xếp các nội dung theo chiều ngang
vertical-alignSắp xếp các nội dung theo chiều dọc.

ở bài sau chúng ta sẽ tiếp tục tìm hiểu về css các thuộc tính về đối tượng,hẹn gặp lại các bạn ở các bài viết tiếp theo 
Read More
|

Html css - Các thuộc tính cơ bản trong css

Có rất nhiều các thuộc tính hay dùng trong css, để nhớ hết được chúng là điều rất khó mà trong khi đó chúng ta cũng không sử dụng hết các thuộc tính đó. Ở bài này chúng ta sẽ đi qua những thuộc tính hay sử dụng nhất, còn các thuộc tính khác chúng ta sẽ tìm hiểu dần qua quá trình làm bài tập thực tế.
Nếu bạn nào chưa đọc phần css, cách nhúng css vào html thì có thể xem tại đây nhé.

1. Các thuộc tính trong css
a. Các thuộc tính về chữ
Đây là list các thuộc tính cơ bản về font chữ 

Các thuộc tính trong css

b. Các thuộc tính đề đối tượng
Các thuộc tính liên quan đến đối tượng như chiều dài, chiều cao, vị trí ...

Các thuộc tính trong css

c. Các thuộc tính khác
Các thuộc tính khác hay dùng trong css.
Các thuộc tính trong css

Trên đây là các thuộc tính cơ bản hay dùng nhất trong css, ở bài này ta sẽ không đi chi tiết vào từng thuộc tính mà chúng ta chỉ giới thiệu các thuộc tính hay dùng mà thôi. Trong loạt các bài viết sau chúng ta sẽ đi chi tiết vào từng các thuộc tính này
Read More
|

Html css - Css là gì, cách nhúng css vào html

Khi bạn mới học thiết kế website, ngoài khái niệm html thì css là cái thứ hai bạn sẽ gặp phải, vậy thì css là gì và chức năng của nó để làm gì?
Css là viết tắt của cụm từ cascading style sheet, nó là một ngôn ngữ quy định cách trình bày của các thẻ html trên trang web. Là ngôn ngữ đang được sử dụng rất nhiều trong lập trình web
 Nói nôm na thì css được dùng để xây dựng bố cục giao diện của trang web, trình bày cho các thẻ html như tô màu chữ, chữ in đậm in nghiêng, qui định chiều dài chiều rộng cho thẻ html ...

1. Cú pháp của css
Để bắt đầu một tài liệu css, chúng ta sử dụng cặp thẻ <style></style>. 
Ví dụ :
<style type="text/css">
selector{
       - Thuộc tính 1
       - Thuộc tính 2
       - Thuộc tính 3
         .....................
       - Thuộc tính n
}
</style>
Trong đó : 
- Selector là đối tượng lựa chọn, có thể là thẻ html hoặc là các class và id
- Thuộc tính css là các thuộc tính quy định cho thẻ html, ví dụ như width quy định chiều dài, height quy định chiều cao cho thẻ html... chúng ta có rât nhiều các thuộc tính này

2. Các cách nhúng css vào html
Có 3 cách nhúng css vào thẻ html như sau : 
a. Chèn vào phần head của website, cụ thể là trong cặp thẻ <head></head>
<head>
<style type="text/css">
selector{
       - Thuộc tính 1
       - Thuộc tính 2
       - Thuộc tính 3
         .....................
       - Thuộc tính n
}
</style>
<head>
b. Nhúng css vào một file css riêng sau đó nhúng vào website
Cú pháp : 
<link href="Đường dẫn đến file css" rel="stylesheet" type="text/css" />
Ví dụ : <link href="styles/style.css" rel="stylesheet" type="text/css" />
c. Chèn trực tiếp vào thẻ html
Ví dụ : <p style="color:red;text-decoration:underline">Đây là thẻ P, có màu chữ đỏ và chữ gạch chân</p>
- Các thuộc tinh cách nhau bằng dấu chấm phảy ( ; ) như cách viết bình thường
d. Chúng ta có thể chèn css vào đâu ?
Chúng ta có thể chèn css vào phần head của website (trong cặp thẻ <head></head>) hoặc trong body của website



3. Class và ID trong cssClass và ID trong css là các selector trong css, khi chúng ta chọn các  thẻ html để quy định các thuộc tính cho nó thì class và ID được dùng để chọn các thẻ html này một cách dễ dàng hơn.

a. Class trong css là gì
Class trong css được ký hiệu bằng dấu chấm ( . ), tiếp theo là tên của class
Vi dụ : 
<style type="text/css">
.tenclass{
        width:400px; // Chiều dài là 400px
        height:60px; // Chiều cao là 60px
        background:#000; // Màu nền là màu đen
        color:#FFF; // Màu chữ trắng
}
</style>
- Sử dụng : <div class="tenclass">Đây là thẻ div có chiều dài x rộng là 400px * 60px, màu nền là màu đen và màu chữ trắng</div>



b. ID trong css là gì
Cũng giống như class, ID trong css được ký hiệu bằng dấu thăng ( # ), tiếp theo là tên của ID. Class khác ID ở chỗ là ID chỉ được sử dụng một lần duy nhất trong một trang web còn class được sử dụng nhiều lần. Và một yếu tô quan trọng hơn là ID sẽ được ưu tiên hiên class
Vi dụ : 
<style type="text/css">
#tenid{
        width:400px; // Chiều dài là 400px
        height:60px; // Chiều cao là 60px
        background:#000; // Màu nền là màu đen
        color:#FFF; // Màu chữ trắng
}
</style>
- Sử dụng : <div id="tenid">Đây là thẻ div có chiều dài x rộng là 400px * 60px, màu nền là màu đen và màu chữ trắng</div>

4. Các thuộc tính hay sử dụng trong css
Có rất nhiều các thuộc tính quy đinh chiều dài, chiều rộng, màu chữ, màu nền cho một đối tượng html. Chúng ta sẽ tìm hiều một số thuộc tính hay dùng trong bài tiếp theo nhé
Read More
|

Html css - tìm hiểu về html form

Thẻ form trong html dùng để tạo form, form có chức năng nhận và gửi thông tin của người dùng lên server sau đó sẽ được lưu vào database. Form đóng vai trò là cầu nối giữa người dùng và website, nếu một website không có form tương tác giữa người dùng vàwebsite thì website đó là một website tĩnh mà thôi.
 Thẻ form trong html có cấu trúc như sau

<form action=" nơi nhận dữ liệu mà người dùng nhập vào " method=" Post hoặc Get ">

<!--  Các thẻ form khác -->

</form>

- Action    :  Thường là nơi nhận dữ liệu mà người dùng nhập vào, khi ấn submit thì dữ liệu sẽ được gửi đi
- Method  :  Dữ liệu sẽ được truyền đến action theo phương thức nào, bao gồm 2 phương thức Post và Get


1. Một số thẻ html thuộc nhóm thẻ Form 
- Thẻ text field  :  <input type="text" name="user_name" size="25" />
   Dùng để nhập dữ liệu, có dạng dòng single text

- Thẻ text field password :  <input type="password"  name="user_pass" size="25" /> 
   Giống như thẻ text field khác, nhưng dữ liệu nhập vào sẽ được ẩn đi bằng các dấu chấm

- Thẻ radio buttons : <input type="radio" name="user_gender" value="male" checked="checked" />
   Nút tùy chọn trong form, chỉ được phép lựa chọn 1 giá trị, ví dụ giới tính chỉ có thể là Nam hoặc Nữ

- Thẻ checkbox : <input type="checkbox" name="user_fav" value="Music" />
  Thẻ tùy chọn trong html form, có thể chọn nhiều tùy chọn, ví dụ sở thích của bạn : Music , Movie, Holiday , Game...

- Thẻ select  : 
                     <select name="user_country">
                               <option value="">Select country</option>
                    </select>
   Thẻ tùy chọn trong form, ví dụ sẽ có một danh sách Country cho bạn lựa chọn

- Thẻ textarea : <textarea cols="25" rows="5" name="user_info"></textarea>

- Thẻ submit form  : <input type="submit" name="submit" valua="Submit" />
   Dùng để submit form, gửi dữ liệu đi

- Thẻ reset form  :  <input type="reset" value="Reset" />
   Dùng để xóa dữ liệu vừa nhập trong form
  


Ví dụ ta có form đăng nhập : 
 

Khi chạy trên trình duyệt sẽ có giao diện như sau



- Khi người dùng nhập Tên đăng nhập và Mật khẩu vào và ấn nút Đăng nhập thì thông tin sẽ được truyền đến action (Ở đây đang là file login.php ). Tùy theo phương thức mà tại trang login.php chúng ta có thể lấy được dữ liệu bằng biến môi trường $_POST hoặc $_GET

- Ở đây dữ liệu đang được truyền đi theo phương thức POST nên tại trang login.php chúng ta sẽ lấy được dữ liệu bằng biến $_POST, tương tự với phương thức GET ta sẽ lấy được dữ liệu bằng biến $_GET
 
File login.php
1
2
3
4
5
6
7
8
9
<?php
   // Đối với phương thức Post
   echo " Username : ".$_POST['user_name']."<br />";               
   echo " Password : ".$_POST['user_pass']
 
   // Đối với phương thức Get
   echo " Username : ".$_GET['user_name']."<br />";              
   echo " Password : ".$_GET['user_pass']
?>
- Lưu ý : Để lấy giá trị của các thẻ form ta dựa vào thuộc tính name của thẻ các bạn nhé, từ đó ta chỉ việc lấy biến môi trường $_POST hoặc $_GET là xong

Read More
|

Html css - tìm hiểu về table trong html

Thẻ table trong html cũng giống như excel trong microsoft office vậy :) nó được dùng để trình bày các bảng biểu, các bài viết, nội  dung... có nhiều dòng và nhiều cột trong một website
- Thẻ table được ký hiệu bằng cặp thẻ <table></table>

Ví dụ table :

SttTên khóa họcGiảng viênNăm học
1Khóa học html csshaanhdon2013
2Khóa học PHP căn bảnhaanhdon2013
3Khóa học PHP nâng caohaanhdon2013
4Khóa học PHP Frameworkhaanhdon2013

- Cấu trúc :

<table width="300" border="1">
    <tr>
           <td>Cột 1</td>
           <td>Cột 2</td>
           <td>Cột 3</td>
           <td>Cột 4</td>
    </tr>
</table>

- Thẻ table bắt đầu bằng cặp thẻ <table></table>
- Width : là động rộng của table
- Border : là độ rộng đường viền của table
- Thẻ <tr></tr> là một dòng của table
- Thẻ <td></td> là một cột của 1 dòng, td nằm trong tr

Ví dụ :

<table width="300" border="1">
    <tr>
           <td>Stt</td>
           <td>Tên khóa học</td>
           <td>Giảng viên</td>
           <td>Năm học</td>
    </tr>
</table>

Ở ví dụ trên ta thấy bảng trên có một dòng và trong dòng có 4 cột


- Để thêm 1 dòng tiếp theo ta chỉ cần thêm 1 cặp thẻ <tr></tr> nữa là xong 

<table width="300" border="1">
    <tr>
           <td>Stt</td>
           <td>Tên khóa học</td>
           <td>Giảng viên</td>
           <td>Năm học</td>
    </tr>
    <tr>
           <td>1</td>
           <td>Khóa học PHP</td>
           <td>haanhdon</td>
           <td>2013</td>
    </tr>
</table>

- Đây là giao diện khi chúng ta thêm 1 cặp thẻ dòng <tr></tr>



* Gộp, hợp 2 cột trong table ta dùng cú pháp colspan="số cột muốn hợp" , ví dụ

    <tr>
           <td>Sttt</td>
           <td>Tên khóa học</td>
           <td colspan="2">Giảng viên - Khóa học</td>
    </tr>

Ta đang gộp 2 cột "giảng viên" và "khóa học" thành 1 cột



Tương tự có gộp dòng là rowspan = "số dòng" nhé các bạn
Read More
|

Html css - các thẻ html cơ bản

Ở bài trước chúng ta đã tìm hiểu về cấu trúc cơ bản của một website, ở bài này chúng ta sẽ tìm hiểu thêm nhiều thẻ html nữa nhé
 Trong html có rất nhiều cặp thẻ html, chúng ta sẽ đi tìm hiểu các cặp thẻ chính thường hay được xử dụng trong lập trình web nhất nhé các bạn. Nếu bạn chưa xem phần Các thẻ cấu trúc html cơ bản của website thì có thể xem lại tại đây nhé

Những thẻ html cơ bản

1. Thẻ đoạn văn P - paragraphs

Thẻ p được dùng để trình bày một đoạn văn

Ví dụ : 
<p>Thẻ p dùng để trình bày một đoạn văn, text</p>
<p>Đây là một đoạn văn ngắn</p>

2. Thẻ headings h1, h2... h6

Thẻ headings bao gồm 6 thẻ, từ h1 đến h6, sắp xếp theo thứ tự giảm dần cỡ chứ, thẻ h1 có cỡ chữ lớn nhất sau đó là h2 ... và nhỏ nhất là h6. Thẻ headings thường được dùng để trình bày tiêu đề các chuyên mục, bài viết...

Ví dụ :
<h1>Thẻ h1 to nhất</h1>
<h2>Thẻ h2 to nhì (^^)</h2>
<h3>Thẻ h3 nhỏ hơn h1 và h2</h3>
<h6>Thẻ h6 nhỏ nhất</h6>

3. Thẻ hình ảnh img
Thẻ img được dùng để chèn hình ảnh vào website của bạn

Cú pháp :
<img src=''đường dẫn đến file ảnh" width="độ rộng" height="chiều cao" alt="tiêu đề ảnh" />

Ví dụ : 
<img src="images/hoc-php.jpg" width="300" height="250" alt="Học thiết kế web, lập trình web" />

4. Thẻ embed - chèn nhạc, video vào website

Thẻ embed dùng để chèn nhạc, video và website

Cú pháp : 
<embed src="link file nhạc" width="độ rộng" height="độ cao" autostart='true hoặc false" loop="1"></embed>

Ví dụ :
<embed src="music/neu-la-anh.mp3" width="200" height="100" autostart="true" loop="1"></embed>

+ Autostart = true : Tự động play khi duyệt web
+ Loop = 1 : Lặp lại khi chơi hết bài

5. Thẻ định dạng list, ul và ol

Thẻ ul và ol được dùng để trình bày văn bản theo dạng list, danh sách có thứ tự

Ví dụ thẻ ul : Có nhiều định dạng cho thẻ ul như theo dạng circle, disc ...



Khi hiển thị  :
  • Html css
  • PHP căn bản
  • PHP nâng cao
  • PHP Framework

Về thẻ ol : Trình bày văn bản theo thứ tự số tăng dần 1,2, 3... hoặc theo thứ tự a - z ...



Khi hiển thị :
  1. Html css
  2. PHP căn bản
  3. PHP nâng cao
  4. PHP Framework

6. Thẻ liên kết (html links)  <a>

Thẻ liên kết trong html là thẻ <a>, được dùng để liên kết các web page lại với nhau

Cú pháp :
<a href="đường dẫn đến trang web" target="thuộc tính">Tiêu đề</a>

Ví dụ : 
<a href="htpps://google.com" target="_blank">Tìm kiếm</a>

+ href : đường dẫn đến webpage
+ target : thuộc tính này sẽ quy định liên kết sẽ được mở ra ở đâu: _self (trang hiện tại), _blank (cửa sổ mới) ....


7. Các thẻ html khác

- Thẻ xuống dòng <br />  : Thẻ <br /> được dùng để xuống dòng trong một đoạn văn

Ví dụ : Học thiết kế website tại <br /> PHPANDMYSQL.NET

- Thẻ in đậm <b> : Thẻ <b> dùng để in đậm một đoạn văn bản

Ví dụ : <b>Học lập trình PHP ở đâu tốt?</b>

- Thẻ in nghiêng <i> : Dùng để đánh dấu in nghiêng một đoạn văn

Ví dụ : <i>Có nên học lập trình không?</i>
nguồn http://phpandmysql.net/
Read More
Đăng ký: Bài đăng (Atom)