background img

Bài Viết Mới

Hiển thị các bài đăng có nhãn HTML - CSS - JQUERY. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn HTML - CSS - JQUERY. Hiển thị tất cả bài đăng

Chèn Google Authorship vào website



Vậy Google Authorship là gì?


Authorship là Quyền Tác Giả, vậy Google đưa ra khái niệm này để làm gì?

- Giúp tránh việc copy và paste tràn lan.

- Bảo về lợi ích của người viết ra bài gốc.

Google Authorship Là một tiêu chí mới giúp bảo vệ nội dung tự sáng tạo của người dùng thông qua tài khoản trên Google+.

Nếu bạn dành thời gian để sáng tạo ra nội dung chất lượng, cho dù đó là văn bản, âm nhạc hoặc video bạn cần phải liên kết nội dung gốc với Profile Google+ để xác định rằng bạn thật sự là tác giả và cần xác minh nội dung này.

Những lợi ích gì khi cài đặt Google Authorship


- Sau khi bạn xác minh quyền thì tất cả các nội dung có quyền tác giả và tất cả các bài viết của Website khác chưa nội dung coppy này sẽ được xếp hạng thấp hơn trên xếp hạng tìm kiếm Google. - Tăng độ trust cho bài viết. - Đẩy mạnh thương hiệu cá nhân. - Tăng độ tin cậy cho người dùng. - Seo top Google nhanh. - Có thêm người theo dõi trên Google+. - Giúp người đọc khám phá nội dung khác của bạn trên web.

Vậy cài đặt Google Authorship như thế nào?


- Để cài đặt Google Authorship, việc đầu tiên bạn cần phải có đó là một tài khoản Google+ (Tất nhiên).

Lưu ý: Hình avatar của bạn trên Google+ phải là hình mặt người thì Google mới cho hiện nhé. Nhiều bạn để hình logo công ty, … cứ thắc mắc vì sao nó không hiện mặc dù đã làm đúng.

- Một hình ảnh đẹp trai tí  :give_up:

Các bước như sau:


Bước 1) Đăng nhập vào Google+


Truy cập vào website: https://plus.google.com và đăng nhập tài khoản muốn tạo.

Bước 2) Thiết lập liên kết tại Google+


- Đầu tiên các bạn click vào trang chủ và chọn Tiểu Sử (như hình dưới)

Chèn Google Authorship vào website


- Nếu chưa thay đổi Avatar thì bạn có thể click vào hình Avatar để thay đổi

Chèn Google Authorship vào website


- Sau đó bạn click vào Giới thiệu nằm ở bên trên cùng trang

Chèn Google Authorship vào website


- Kéo xuống gần dưới trang bạn sẽ thấy box Liên kết, bạn click vào chỉnh sửa ở bên dưới (như hình dưới)

Chèn Google Authorship vào website


- Sau đó click vào thêm liên kết tuỳ chỉnh ở mục cộng tác viên cho (như hình dưới)

Chèn Google Authorship vào website



- Sau đó điền tên và địa chỉ website, sau đó nhấn Lưu để lưu thiết lập

Chèn Google Authorship vào website


Bước 3) Chèn Google Authorship vào website (Tự Học IT)


Bạn vào website của bạn hoặc website bạn làm cộng tác viên, tác giả. Tuỳ vào NỀN TẢNG WEBSITE ĐÓ mà có cách thiết lập khác nhau.

Tuy nhiên ở đây mình chèn vào website http://tuhocit.net, vì vậy cách chèn của mình sẽ khác, nếu bạn có thắc mắc về chèn vào website thuộc nền tảng nào (Wordpress, Joomla,...) thì có thể để lại Comment, mình sẽ giúp đỡ :)

- Bạn cần đăng nhập vào tài khoản Tự Học IT http://tuhocit.net - Sau đó click vào Hồ sơ ở mục Bảng thành viên (Như hình dưới)

Chèn Google Authorship vào website



- Trở lại trang Google+ và nhìn vào trên cùng địa chỉ, bạn sẽ thấy địa chỉ Google Profile của bạn, bạn copy địa chỉ đó


Chèn Google Authorship vào website



PS: Nếu bạn là người có thể chỉnh sửa CODE ở website bạn thì bạn có thể chèn vào website với một trong các đoạn code bên dưới: 

<link rel=”author” href=”XXXXXXX” /> – Chèn vào cặp thẻ <head> </head>
 
<a href=””XXXXXXX”” rel=”author”>Tự Học IT</a> – Chèn vào vị trí bất kỳ trong cặp thẻ <body> </body>
 
<a href=””XXXXXXX”?rel=”author”>Tự Học IT</a> – Dành cho HTML5, mà tốt nhất nên dùng luôn cái trên.
 
Với XXXXXXX là địa chỉ Google Profile như hình trên.

- Sau đó trở lại trang Tự Học IT  dán vào ô Google+ và nhấn vào Cập nhật để Lưu

Chèn Google Authorship vào website


Vậy là đã thiết lập xong.

Bao lâu thì hình của tôi cập nhật ở Google?


Thông thường tầm 1 tuần, bạn có thể dùng công cụ Google Structured Data Testing Tool để có thể test xem có ok chưa.
Nguồn: Tự Học IT Online - http://tuhocit.net

Hướng dẫn chèn Google Authorship vào Tự Học IT

Chèn Google Authorship vào website



Vậy Google Authorship là gì?


Authorship là Quyền Tác Giả, vậy Google đưa ra khái niệm này để làm gì?

- Giúp tránh việc copy và paste tràn lan.

- Bảo về lợi ích của người viết ra bài gốc.

Google Authorship Là một tiêu chí mới giúp bảo vệ nội dung tự sáng tạo của người dùng thông qua tài khoản trên Google+.

Nếu bạn dành thời gian để sáng tạo ra nội dung chất lượng, cho dù đó là văn bản, âm nhạc hoặc video bạn cần phải liên kết nội dung gốc với Profile Google+ để xác định rằng bạn thật sự là tác giả và cần xác minh nội dung này.

Những lợi ích gì khi cài đặt Google Authorship


- Sau khi bạn xác minh quyền thì tất cả các nội dung có quyền tác giả và tất cả các bài viết của Website khác chưa nội dung coppy này sẽ được xếp hạng thấp hơn trên xếp hạng tìm kiếm Google. - Tăng độ trust cho bài viết. - Đẩy mạnh thương hiệu cá nhân. - Tăng độ tin cậy cho người dùng. - Seo top Google nhanh. - Có thêm người theo dõi trên Google+. - Giúp người đọc khám phá nội dung khác của bạn trên web.

Vậy cài đặt Google Authorship như thế nào?


- Để cài đặt Google Authorship, việc đầu tiên bạn cần phải có đó là một tài khoản Google+ (Tất nhiên).

Lưu ý: Hình avatar của bạn trên Google+ phải là hình mặt người thì Google mới cho hiện nhé. Nhiều bạn để hình logo công ty, … cứ thắc mắc vì sao nó không hiện mặc dù đã làm đúng.

- Một hình ảnh đẹp trai tí  :give_up:

Các bước như sau:


Bước 1) Đăng nhập vào Google+


Truy cập vào website: https://plus.google.com và đăng nhập tài khoản muốn tạo.

Bước 2) Thiết lập liên kết tại Google+


- Đầu tiên các bạn click vào trang chủ và chọn Tiểu Sử (như hình dưới)

Chèn Google Authorship vào website


- Nếu chưa thay đổi Avatar thì bạn có thể click vào hình Avatar để thay đổi

Chèn Google Authorship vào website


- Sau đó bạn click vào Giới thiệu nằm ở bên trên cùng trang

Chèn Google Authorship vào website


- Kéo xuống gần dưới trang bạn sẽ thấy box Liên kết, bạn click vào chỉnh sửa ở bên dưới (như hình dưới)

Chèn Google Authorship vào website


- Sau đó click vào thêm liên kết tuỳ chỉnh ở mục cộng tác viên cho (như hình dưới)

Chèn Google Authorship vào website



- Sau đó điền tên và địa chỉ website, sau đó nhấn Lưu để lưu thiết lập

Chèn Google Authorship vào website


Bước 3) Chèn Google Authorship vào website (Tự Học IT)


Bạn vào website của bạn hoặc website bạn làm cộng tác viên, tác giả. Tuỳ vào NỀN TẢNG WEBSITE ĐÓ mà có cách thiết lập khác nhau.

Tuy nhiên ở đây mình chèn vào website http://tuhocit.net, vì vậy cách chèn của mình sẽ khác, nếu bạn có thắc mắc về chèn vào website thuộc nền tảng nào (Wordpress, Joomla,...) thì có thể để lại Comment, mình sẽ giúp đỡ :)

- Bạn cần đăng nhập vào tài khoản Tự Học IT http://tuhocit.net - Sau đó click vào Hồ sơ ở mục Bảng thành viên (Như hình dưới)

Chèn Google Authorship vào website



- Trở lại trang Google+ và nhìn vào trên cùng địa chỉ, bạn sẽ thấy địa chỉ Google Profile của bạn, bạn copy địa chỉ đó


Chèn Google Authorship vào website



PS: Nếu bạn là người có thể chỉnh sửa CODE ở website bạn thì bạn có thể chèn vào website với một trong các đoạn code bên dưới: 

<link rel=”author” href=”XXXXXXX” /> – Chèn vào cặp thẻ <head> </head>
 
<a href=””XXXXXXX”” rel=”author”>Tự Học IT</a> – Chèn vào vị trí bất kỳ trong cặp thẻ <body> </body>
 
<a href=””XXXXXXX”?rel=”author”>Tự Học IT</a> – Dành cho HTML5, mà tốt nhất nên dùng luôn cái trên.
 
Với XXXXXXX là địa chỉ Google Profile như hình trên.

- Sau đó trở lại trang Tự Học IT  dán vào ô Google+ và nhấn vào Cập nhật để Lưu

Chèn Google Authorship vào website


Vậy là đã thiết lập xong.

Bao lâu thì hình của tôi cập nhật ở Google?


Thông thường tầm 1 tuần, bạn có thể dùng công cụ Google Structured Data Testing Tool để có thể test xem có ok chưa.
Nguồn: Tự Học IT Online - http://tuhocit.net

[HTML] THIẾT KẾ WEB VỚI HTML (BÀI 1)


Xin chào các bạn!


Mình là Tùng (Nht2007), hôm nay mình sẽ hướng dẫn các bạn thiết kế web bằng HTML. Trong Series này mình sẽ hướng dẫn các bạn tìm hiểu cấu trúc của HTML, cách tạo và sử dụng các thẻ HTML.


Mời các bạn xem các nội dung bên dưới và theo dõi, mình sẽ cập nhật khi có bài mới:




Nguồn: Tự Học IT Online - http://tuhocit.net

Thiết kế web với HTML

[HTML] THIẾT KẾ WEB VỚI HTML (BÀI 1)


Xin chào các bạn!


Mình là Tùng (Nht2007), hôm nay mình sẽ hướng dẫn các bạn thiết kế web bằng HTML. Trong Series này mình sẽ hướng dẫn các bạn tìm hiểu cấu trúc của HTML, cách tạo và sử dụng các thẻ HTML.


Mời các bạn xem các nội dung bên dưới và theo dõi, mình sẽ cập nhật khi có bài mới:




Nguồn: Tự Học IT Online - http://tuhocit.net

Khi nói tới Reset CSS thì mọi người sẽ để ý tới CSS Reset hoặc Normalize.css. Vậy đây là gì, hôm nay chúng ta sẽ tìm hiểu về chúng.

Trong quá trình tìm hiểu mình đã thấy từ YinYang's Blog đã có bài viết rất hay về bài này nên mình đã xin phép tác giả trích lại bài viết để các bạn hiểu rõ hơn.

Sự không đồng nhất trong việc hiển thị HTML của các trình duyệt thường được giải quyết bằng cách sử dụng CSS Reset hay Normalize.css. Nếu chưa quen thuộc với các khái niệm này, bài viết sau sẽ cho bạn một cái nhìn tổng quan cũng như áp dụng chúng.

Giới thiệu CSS Reset


Bản chất của CSS Reset là ghi đè lên các thiết lập hiển thị các thẻ HTML mặc định của trình duyệt. CSS Reset sẽ đưa các thiết lập hiển thị về ‘zero’ của các thẻ HTML. Điều này giúp tạo một điểm khởi đầu giống nhau cho việc hiển thị giao diện trang web trên các trình duyệt. Tất nhiên, điều này cũng đòi hỏi bạn phải dành thời gian xây dựng lại giao diện cho các thẻ HTML nếu bạn muốn người dùng xem được trang web một cách dễ dàng.

Một trong những phiên bản reset CSS cơ bản nhất là sử dụng selector ‘*’ (universal selector) để áp dụng style cho tất cả thẻ HTML. Phiên bản này chỉ bao gồm một dòng css đơn giản có chức năng xóa margin và padding của tất cả các thẻ HTML:
* { margin: 0; padding: 0; }

Tuy nhiên phương pháp này không có hiệu suất tốt và không đáp ứng đầy đủ các trường hợp. Vì vậy, một số phiên bản CSS Reset được nghiên cứu và sử dụng khá phổ biến hiện nay như YUI Reset, Eric Meyer’s Reset, HTML5 Doctor CSS Reset.
Bạn có thể xem thống kê về phiên bản CSS Reset được sử dụng tại http://www.cssreset.com/.

Tìm Hiểu CSS Reset và Normalize



Tạo CSS Reset


Bạn có thể tự tạo cho mình một CSS Reset riêng dựa trên kinh nghiệm hoặc tham khảo các phiên bản đang phổ biến. Bởi vì CSS Reset hoạt động ở tầng thấp, nên việc đảm bảo chất lượng và hiệu quả cần được chú ý.
- Chỉ reset các style cần thiết, vì vậy không nên dùng selector ‘*’ mặc dù nó có thể giúp css trở nên ngắn gọn hơn nhiều.
- Giữ cho code ngắn gọn, rõ ràng, tránh dư thừa các kí tự, khoảng trắng hay các định nghĩa class không cần thiết.
- CSS Reset phải được nạp trước các tập tin css khác.

Các thuộc tính thường được reset về ‘zero’ như sau:
margin: 0;
padding: 0;
border: 0
font-style: normal;
font-weight: normal;
font-size: 100%;
text-align: left;
color: #000;
text-decoration: none;
line-height: 1.4em;

Các phiên bản CSS Reset phổ biến


Phiên bản đầu tiên của CSS Reset được Yahoo đưa ra năm 2006 với tên gọi: YUI Reset. YUI Reset sẽ chọn lọc và reset những thuộc tính cần thiết một cách hợp lý cho từng thẻ.
YUI Reset được chia thành hai phiên bản Global (thông thường) và Contextual.
- Global: áp dụng reset cho cả trang.
- Contextual: chỉ reset các thẻ con của thẻ chứa class “yui3-cssreset”.
Hiện tại, bạn có thể phiên bản css code mới nhất YUI 3 Reset tại:

http://yui.yahooapis.com/3.11.0/build/cssreset/cssreset.css.

Và trang hướng dẫn:

http://yuilibrary.com/yui/docs/cssreset/

- Eric Meyer’s Reset: một phiên bản được cải tiến từ YUI 2 Reset bởi Eric Meyer:http://meyerweb.com/eric/tools/css/reset/.
- HTML5 Doctor CSS Reset: dựa trên Eric Meyer’s Reset, phiên bản này hỗ trợ thêm các thẻ mới có trong HTML5: http://html5doctor.com/html-5-reset-stylesheet/

Giới Thiệu Normalize.css


Normalize.css có thể được liệt kê vào danh sách các CSS Reset do cách áp dụng của chúng giống nhau. Nhưng thay vì ‘xóa hoàn toàn’ định dạng của các thẻ HTML, Normalize.css chỉ xóa bỏ sự khác biệt về style giữa các trình duyệt. Như vậy, các style mặc định của mỗi thẻ HTML sẽ được giữ lại và bạn không phải định nghĩa lại hết các thuộc tính cho chúng.
So với CSS Reset, Normalize.css có các ưu điểm:
- Giữ lại các style mặc định có ích.
- Sửa các lỗi chung của các trình duyệt.
- Không làm rối mắt khi bạn dùng công cụ debug.
- Có tính module.
- Tài liệu hướng dẫn đầy đủ.

Bạn có thể xem giới thiệu chi tiết tại: http://nicolasgallagher.com/about-normalize-css/.

Chọn lựa phiên bản CSS Reset


Việc chọn lựa bản CSS Reset (bao gồm cả Normalize.css) thường dựa theo từng loại dự án mà bạn làm. Nhiều người chọn việc tạo một CSS Reset riêng dựa trên các bản có sẵn. Một số lại thấy thoải mái với việc không sử dụng CSS Reset và chấp nhận sự khác biệt không đáng kể giữa các trình duyệt.
Đây là vài hướng dẫn lựa chọn CSS Reset mà bạn có thể xem đầy đủ tại: Which CSS Reset Should I Use?
- Nếu bạn làm việc với HTML5, dùng HTML5 Doctor Reset CSS.
- Nếu bạn làm một trang cơ bản và test, hoặc một trang không dùng HTML5 thì dùng Eric Meyer’s Reset CSS.
- Nếu bạn cần một CSS Reset hoạt động như một framework, có các style được tạo sẵn sau khi reset thì dùng Tripoli CSS Reset hay Vanilla CSS Un-Reset.
- Nếu bạn cần một CSS Framework đầy đủ chức năng, hãy tìm hiểu và sử dụng YUI 3 CSS Libary.
- Nói chung là bạn không nên dùng Universal Selector ‘*’ CSS Reset.

Nguồn: YinYang’s Blog
Nguồn: Tự Học IT Online - http://tuhocit.net

Tìm hiểu CSS Reset và Normalize.css

Khi nói tới Reset CSS thì mọi người sẽ để ý tới CSS Reset hoặc Normalize.css. Vậy đây là gì, hôm nay chúng ta sẽ tìm hiểu về chúng.

Trong quá trình tìm hiểu mình đã thấy từ YinYang's Blog đã có bài viết rất hay về bài này nên mình đã xin phép tác giả trích lại bài viết để các bạn hiểu rõ hơn.

Sự không đồng nhất trong việc hiển thị HTML của các trình duyệt thường được giải quyết bằng cách sử dụng CSS Reset hay Normalize.css. Nếu chưa quen thuộc với các khái niệm này, bài viết sau sẽ cho bạn một cái nhìn tổng quan cũng như áp dụng chúng.

Giới thiệu CSS Reset


Bản chất của CSS Reset là ghi đè lên các thiết lập hiển thị các thẻ HTML mặc định của trình duyệt. CSS Reset sẽ đưa các thiết lập hiển thị về ‘zero’ của các thẻ HTML. Điều này giúp tạo một điểm khởi đầu giống nhau cho việc hiển thị giao diện trang web trên các trình duyệt. Tất nhiên, điều này cũng đòi hỏi bạn phải dành thời gian xây dựng lại giao diện cho các thẻ HTML nếu bạn muốn người dùng xem được trang web một cách dễ dàng.

Một trong những phiên bản reset CSS cơ bản nhất là sử dụng selector ‘*’ (universal selector) để áp dụng style cho tất cả thẻ HTML. Phiên bản này chỉ bao gồm một dòng css đơn giản có chức năng xóa margin và padding của tất cả các thẻ HTML:
* { margin: 0; padding: 0; }

Tuy nhiên phương pháp này không có hiệu suất tốt và không đáp ứng đầy đủ các trường hợp. Vì vậy, một số phiên bản CSS Reset được nghiên cứu và sử dụng khá phổ biến hiện nay như YUI Reset, Eric Meyer’s Reset, HTML5 Doctor CSS Reset.
Bạn có thể xem thống kê về phiên bản CSS Reset được sử dụng tại http://www.cssreset.com/.

Tìm Hiểu CSS Reset và Normalize



Tạo CSS Reset


Bạn có thể tự tạo cho mình một CSS Reset riêng dựa trên kinh nghiệm hoặc tham khảo các phiên bản đang phổ biến. Bởi vì CSS Reset hoạt động ở tầng thấp, nên việc đảm bảo chất lượng và hiệu quả cần được chú ý.
- Chỉ reset các style cần thiết, vì vậy không nên dùng selector ‘*’ mặc dù nó có thể giúp css trở nên ngắn gọn hơn nhiều.
- Giữ cho code ngắn gọn, rõ ràng, tránh dư thừa các kí tự, khoảng trắng hay các định nghĩa class không cần thiết.
- CSS Reset phải được nạp trước các tập tin css khác.

Các thuộc tính thường được reset về ‘zero’ như sau:
margin: 0;
padding: 0;
border: 0
font-style: normal;
font-weight: normal;
font-size: 100%;
text-align: left;
color: #000;
text-decoration: none;
line-height: 1.4em;

Các phiên bản CSS Reset phổ biến


Phiên bản đầu tiên của CSS Reset được Yahoo đưa ra năm 2006 với tên gọi: YUI Reset. YUI Reset sẽ chọn lọc và reset những thuộc tính cần thiết một cách hợp lý cho từng thẻ.
YUI Reset được chia thành hai phiên bản Global (thông thường) và Contextual.
- Global: áp dụng reset cho cả trang.
- Contextual: chỉ reset các thẻ con của thẻ chứa class “yui3-cssreset”.
Hiện tại, bạn có thể phiên bản css code mới nhất YUI 3 Reset tại:

http://yui.yahooapis.com/3.11.0/build/cssreset/cssreset.css.

Và trang hướng dẫn:

http://yuilibrary.com/yui/docs/cssreset/

- Eric Meyer’s Reset: một phiên bản được cải tiến từ YUI 2 Reset bởi Eric Meyer:http://meyerweb.com/eric/tools/css/reset/.
- HTML5 Doctor CSS Reset: dựa trên Eric Meyer’s Reset, phiên bản này hỗ trợ thêm các thẻ mới có trong HTML5: http://html5doctor.com/html-5-reset-stylesheet/

Giới Thiệu Normalize.css


Normalize.css có thể được liệt kê vào danh sách các CSS Reset do cách áp dụng của chúng giống nhau. Nhưng thay vì ‘xóa hoàn toàn’ định dạng của các thẻ HTML, Normalize.css chỉ xóa bỏ sự khác biệt về style giữa các trình duyệt. Như vậy, các style mặc định của mỗi thẻ HTML sẽ được giữ lại và bạn không phải định nghĩa lại hết các thuộc tính cho chúng.
So với CSS Reset, Normalize.css có các ưu điểm:
- Giữ lại các style mặc định có ích.
- Sửa các lỗi chung của các trình duyệt.
- Không làm rối mắt khi bạn dùng công cụ debug.
- Có tính module.
- Tài liệu hướng dẫn đầy đủ.

Bạn có thể xem giới thiệu chi tiết tại: http://nicolasgallagher.com/about-normalize-css/.

Chọn lựa phiên bản CSS Reset


Việc chọn lựa bản CSS Reset (bao gồm cả Normalize.css) thường dựa theo từng loại dự án mà bạn làm. Nhiều người chọn việc tạo một CSS Reset riêng dựa trên các bản có sẵn. Một số lại thấy thoải mái với việc không sử dụng CSS Reset và chấp nhận sự khác biệt không đáng kể giữa các trình duyệt.
Đây là vài hướng dẫn lựa chọn CSS Reset mà bạn có thể xem đầy đủ tại: Which CSS Reset Should I Use?
- Nếu bạn làm việc với HTML5, dùng HTML5 Doctor Reset CSS.
- Nếu bạn làm một trang cơ bản và test, hoặc một trang không dùng HTML5 thì dùng Eric Meyer’s Reset CSS.
- Nếu bạn cần một CSS Reset hoạt động như một framework, có các style được tạo sẵn sau khi reset thì dùng Tripoli CSS Reset hay Vanilla CSS Un-Reset.
- Nếu bạn cần một CSS Framework đầy đủ chức năng, hãy tìm hiểu và sử dụng YUI 3 CSS Libary.
- Nói chung là bạn không nên dùng Universal Selector ‘*’ CSS Reset.

Nguồn: YinYang’s Blog
Nguồn: Tự Học IT Online - http://tuhocit.net

Thiết Kế Web với HTML

Xin chào các bạn!

Hôm nay mình xin tiếp tục với bài 4, hôm nay mình sẽ giới thiệu các bạn cách sử dụng một số thẻ về văn bản trong html.

Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML

 

Mình xin kết thúc: [HTML] Thiết kế web với HTML (Bài 4) tại đây.

Nếu có thắc mắc vui lòng để lại comment bên dưới nhé :)
Nguồn: Tự Học IT Online - http://tuhocit.net

[HTML] Thiết kế web với HTML (Bài 4)

Thiết Kế Web với HTML

Xin chào các bạn!

Hôm nay mình xin tiếp tục với bài 4, hôm nay mình sẽ giới thiệu các bạn cách sử dụng một số thẻ về văn bản trong html.

Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML

 

Mình xin kết thúc: [HTML] Thiết kế web với HTML (Bài 4) tại đây.

Nếu có thắc mắc vui lòng để lại comment bên dưới nhé :)
Nguồn: Tự Học IT Online - http://tuhocit.net

Thiết Kế Web với HTML


Xin chào các bạn!

Hôm nay mình xin tiếp tục với bài 3, hôm nay mình sẽ giới thiệu cấu trúc cơ bản của các thẻ, thuộc tính.

Từ bài này cho đến các bài sau mình sẽ sử dụng hình ảnh để giới thiệu, minh họa cho các bạn, hy vọng nó sẽ dễ hiểu, giúp bạn bỏ bớt bài viết toàn chữ là chữ.

Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML

 

Mình đã xong bài 3, bài sau mình sẽ giới thiệu các bạn sử dụng các thẻ Tags.

Nếu các bạn có thắc mắc gì cũng như góp ý vui lòng để lại bình luận bên dưới.
Nguồn: Tự Học IT Online - http://tuhocit.net

[HTML] Thiết kế web với HTML (Bài 3)

Thiết Kế Web với HTML


Xin chào các bạn!

Hôm nay mình xin tiếp tục với bài 3, hôm nay mình sẽ giới thiệu cấu trúc cơ bản của các thẻ, thuộc tính.

Từ bài này cho đến các bài sau mình sẽ sử dụng hình ảnh để giới thiệu, minh họa cho các bạn, hy vọng nó sẽ dễ hiểu, giúp bạn bỏ bớt bài viết toàn chữ là chữ.

Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML Thiết kế web với HTML

 

Mình đã xong bài 3, bài sau mình sẽ giới thiệu các bạn sử dụng các thẻ Tags.

Nếu các bạn có thắc mắc gì cũng như góp ý vui lòng để lại bình luận bên dưới.
Nguồn: Tự Học IT Online - http://tuhocit.net

Xin chào các bạn!
Hôm nay mình xin tiếp tục với bài 2, như trong bài 1 mình đã giới thiệu các bạn về HTML và các công cụ cần dùng.


Bài hôm nay mình sẽ hướng dẫn các bạn tạo một trang web đầu tiên.

Chuẩn bị


- Bạn nên tạo một thư mục ở ổ đĩa, vd: HTML Basic. Lưu ý là không nên đặt tiếng việt có dấu nhé :)

Cấu trúc cơ bản của HTML


<!DOCTYPE html>
<html>
<head>
<!-- Nội dung Head -->
</head>
<body>
<!-- Nội dung Body -->
</body>
</html>

Ta có: <!DOCTYPE html>

Đây là phần khai báo chuẩn của HTML, và html là chuẩn HTML5.

Và website của bạn sẽ nằm trong tab mỡ đầu <html> và hết thúc bằng </html>, bạn sẽ viết code trong thẻ này nhé.

Tiếp theo ta có thẻ <head> và kết thúc bằng </head>, trong thẻ này bạn sẽ thường khai báo tiêu đề website bằng thẻ <title>Tiêu đều </title>, khai báo thẻ meta, css, javascript,.... Lưu ý là phần này nó sẽ không hiển thị ra trang nhé. Nó chỉ khai báo và xử lý thôi, còn khi bạn thấy ngoài trang thì nó sẽ hiễn thị trong thẻ <body> và kết thúc bằng </body>. Phần body là nơi bạn trình bày nội dung, hình ảnh,...để thể hiện ra trang web và mọi người có thể thấy.

Mình sẽ đi vào thực hành và ví dụ để các bạn dễ hiểu, cứ học lý thuyết dễ bùn ngủ + chán lắm :D

TẠO TRANG HTML ĐẦU TIÊN


Đầu tiên các bạn mở Sublime Text lên, nhấn Ctrl + N (Command + N trên Mac) để tạo trang mới và nhấn Ctrl + S (Command + S trên Mac) để lưu vào thư mục với tên là 1_First.html

Sau đó bạn gõ những dòng lệnh bên dưới, Lưu lại (Ctrl + S).
<!DOCTYPE html>
<html>
<head>
<title>Bài HTML Đầu Tiên</title>
</head>
<body>
<h1>Đây là bài đầu tiên</h1>
</body>
</html>

Sau đó click phải chọn Open in Browse và xem kế quả là gì?

 Thiết kế web với HTML


Bạn sẽ thấy lỗi không đọc được chữ, tuy nhiên bạn gõ thêm dòng này vào bên dưới thẻ head (Sau <head>) rồi bạn sẽ thấy không lỗi nữa:



<meta charset="utf-8" />

Dòng này xác định file html mình được định dạng theo chuẩn utf-8.

Hì, hôm nay mình xin tạm ngừng ở đây vì bài sau sẽ hơi dài nên mình sẽ giới thiệu kỹ hơn, những bài đầu chỉ giúp bạn nhìn tổng quan, hơi dài dòng, phần sau các bạn sẽ làm việc với các thẻ từ meta, các thẻ tag,...

 

Nếu các bạn có thắc mắc gì vui lòng để lại comment bên dưới nhé.

 

 
Nguồn: Tự Học IT Online - http://tuhocit.net

[HTML] Thiết kế web với HTML (Bài 2)

Xin chào các bạn!
Hôm nay mình xin tiếp tục với bài 2, như trong bài 1 mình đã giới thiệu các bạn về HTML và các công cụ cần dùng.


Bài hôm nay mình sẽ hướng dẫn các bạn tạo một trang web đầu tiên.

Chuẩn bị


- Bạn nên tạo một thư mục ở ổ đĩa, vd: HTML Basic. Lưu ý là không nên đặt tiếng việt có dấu nhé :)

Cấu trúc cơ bản của HTML


<!DOCTYPE html>
<html>
<head>
<!-- Nội dung Head -->
</head>
<body>
<!-- Nội dung Body -->
</body>
</html>

Ta có: <!DOCTYPE html>

Đây là phần khai báo chuẩn của HTML, và html là chuẩn HTML5.

Và website của bạn sẽ nằm trong tab mỡ đầu <html> và hết thúc bằng </html>, bạn sẽ viết code trong thẻ này nhé.

Tiếp theo ta có thẻ <head> và kết thúc bằng </head>, trong thẻ này bạn sẽ thường khai báo tiêu đề website bằng thẻ <title>Tiêu đều </title>, khai báo thẻ meta, css, javascript,.... Lưu ý là phần này nó sẽ không hiển thị ra trang nhé. Nó chỉ khai báo và xử lý thôi, còn khi bạn thấy ngoài trang thì nó sẽ hiễn thị trong thẻ <body> và kết thúc bằng </body>. Phần body là nơi bạn trình bày nội dung, hình ảnh,...để thể hiện ra trang web và mọi người có thể thấy.

Mình sẽ đi vào thực hành và ví dụ để các bạn dễ hiểu, cứ học lý thuyết dễ bùn ngủ + chán lắm :D

TẠO TRANG HTML ĐẦU TIÊN


Đầu tiên các bạn mở Sublime Text lên, nhấn Ctrl + N (Command + N trên Mac) để tạo trang mới và nhấn Ctrl + S (Command + S trên Mac) để lưu vào thư mục với tên là 1_First.html

Sau đó bạn gõ những dòng lệnh bên dưới, Lưu lại (Ctrl + S).
<!DOCTYPE html>
<html>
<head>
<title>Bài HTML Đầu Tiên</title>
</head>
<body>
<h1>Đây là bài đầu tiên</h1>
</body>
</html>

Sau đó click phải chọn Open in Browse và xem kế quả là gì?

 Thiết kế web với HTML


Bạn sẽ thấy lỗi không đọc được chữ, tuy nhiên bạn gõ thêm dòng này vào bên dưới thẻ head (Sau <head>) rồi bạn sẽ thấy không lỗi nữa:



<meta charset="utf-8" />

Dòng này xác định file html mình được định dạng theo chuẩn utf-8.

Hì, hôm nay mình xin tạm ngừng ở đây vì bài sau sẽ hơi dài nên mình sẽ giới thiệu kỹ hơn, những bài đầu chỉ giúp bạn nhìn tổng quan, hơi dài dòng, phần sau các bạn sẽ làm việc với các thẻ từ meta, các thẻ tag,...

 

Nếu các bạn có thắc mắc gì vui lòng để lại comment bên dưới nhé.

 

 
Nguồn: Tự Học IT Online - http://tuhocit.net

Sublime Text v2.0.1
Sublime text 2 là một editor khá mới, và nó vẫn còn trong giai đoạn thử nghiệm. Tuy nhiên, nó đã cung cấp một hiệu suất làm việc với các tính năng rất tuyệt vời, làm mình phải chuyển từ Dreamweaver sang dùng nó.

Sublime text 2 bản thân nó đã hổ trợ rất nhiều thứ cho các nhà phát triển web, và ngoài ra nó còn có một hệ thống thư viện Plugins rất phong phú và đa dạng. Trong bài hôm này, mình sẽ giới thiệu với các bạn về cách sử dụng cơ bản và chuyên sâu về sublime text 2.

 httpvh://www.youtube.com/watch?v=fcwfd15wW74



Plugin cần thiết


Đây là danh sách các plug-in cần phải có khi sử dụng Sublime text 2, nó sẽ giúp cho các bạn đỡ tốn 1 khối thời gian đấy. Cách sử dụng thì mình đã hướng dẫn trong video phía trên. Ngoài ra thì còn rất nhiều phugin khác, các bạn có thể xem thêm tại đây: http://wbond.net/sublime_packages/community

  • Sublime Prefixr (Ctrl+Alt+X)

  • Sublime Alignment (Ctrl+Alt+A)

  • Jquery

  • Jquery snippets

  • Nettuts Fetch

  • Sublime CodeIntel

  • Tag

  • Prefixr

  • Google search

  • WordPress

  • HTML5

  • Indent Guides


Lưu ý: Các plugin không nên dùng: Color HighlighterLive CSS. Hai plug-in này gây ra lỗi cho bản sublime text 2 trên nền windows, khi cái đặt các bạn nên lưu ý.
Ngoài ra, khi cài các plugin các bạn nên xem nó hổ trợ phiên bản dành cho hệ điều hành nào nhé.

Nguồn (izwebz).
Nguồn: Tự Học IT Online - http://tuhocit.net

Video Hướng dẫn sử dụng Sublime Text 2

Sublime Text v2.0.1
Sublime text 2 là một editor khá mới, và nó vẫn còn trong giai đoạn thử nghiệm. Tuy nhiên, nó đã cung cấp một hiệu suất làm việc với các tính năng rất tuyệt vời, làm mình phải chuyển từ Dreamweaver sang dùng nó.

Sublime text 2 bản thân nó đã hổ trợ rất nhiều thứ cho các nhà phát triển web, và ngoài ra nó còn có một hệ thống thư viện Plugins rất phong phú và đa dạng. Trong bài hôm này, mình sẽ giới thiệu với các bạn về cách sử dụng cơ bản và chuyên sâu về sublime text 2.

 httpvh://www.youtube.com/watch?v=fcwfd15wW74



Plugin cần thiết


Đây là danh sách các plug-in cần phải có khi sử dụng Sublime text 2, nó sẽ giúp cho các bạn đỡ tốn 1 khối thời gian đấy. Cách sử dụng thì mình đã hướng dẫn trong video phía trên. Ngoài ra thì còn rất nhiều phugin khác, các bạn có thể xem thêm tại đây: http://wbond.net/sublime_packages/community

  • Sublime Prefixr (Ctrl+Alt+X)

  • Sublime Alignment (Ctrl+Alt+A)

  • Jquery

  • Jquery snippets

  • Nettuts Fetch

  • Sublime CodeIntel

  • Tag

  • Prefixr

  • Google search

  • WordPress

  • HTML5

  • Indent Guides


Lưu ý: Các plugin không nên dùng: Color HighlighterLive CSS. Hai plug-in này gây ra lỗi cho bản sublime text 2 trên nền windows, khi cái đặt các bạn nên lưu ý.
Ngoài ra, khi cài các plugin các bạn nên xem nó hổ trợ phiên bản dành cho hệ điều hành nào nhé.

Nguồn (izwebz).
Nguồn: Tự Học IT Online - http://tuhocit.net

[HTML] THIẾT KẾ WEB VỚI HTML (BÀI 1)

Xin chào các ban!
Mình là Tùng, hôm này mình xin giới thiệu các bạn một Series Hướng dẫn của mình về HTML(5) -> CSS(3) -> PHP -> MySQL về thiết kế web. Hy vọng trong series này sẽ giúp các bạn học từng bước từ Cơ bản nhất đến nâng cao trong thiết kế web.

Mình viết một Series thế này để các bạn theo dõi. Trong phần HTML này mình sẽ hướng dẫn các bạn sử dụng HTML để thiết kế web, sau đó mình sẽ hướng dẫn các bạn sử dụng CSS để trang trí website và cuối cùng là sử dụng PHP kết hợp MySQL để có thể tạo ra website tương tác với người dùng :)

Bài hôm nay mình sẽ chia làm 2 phần. Phần 1 thì mình giới thiệu HTML là gì? và phần 2 thì mình sẽ hướng dẫn các bạn cần những công cụ nào để thiết kế web.

[HTML] Thiết kế web với HTML (Bài 1)

[HTML] THIẾT KẾ WEB VỚI HTML (BÀI 1)

Xin chào các ban!
Mình là Tùng, hôm này mình xin giới thiệu các bạn một Series Hướng dẫn của mình về HTML(5) -> CSS(3) -> PHP -> MySQL về thiết kế web. Hy vọng trong series này sẽ giúp các bạn học từng bước từ Cơ bản nhất đến nâng cao trong thiết kế web.

Mình viết một Series thế này để các bạn theo dõi. Trong phần HTML này mình sẽ hướng dẫn các bạn sử dụng HTML để thiết kế web, sau đó mình sẽ hướng dẫn các bạn sử dụng CSS để trang trí website và cuối cùng là sử dụng PHP kết hợp MySQL để có thể tạo ra website tương tác với người dùng :)

Bài hôm nay mình sẽ chia làm 2 phần. Phần 1 thì mình giới thiệu HTML là gì? và phần 2 thì mình sẽ hướng dẫn các bạn cần những công cụ nào để thiết kế web.

Xem Nhiều