Chú ý; trang này chỉ để chủ xem.: HTML

Cùng nhau học lập trình web - Kinh nghiệm tự học thiết kế web/blog

Mình tham gia Blogspot cũng được khoảng thời gian rồi và nhận thấy Blogger không chỉ đơn thuần chỉ là Blog mà nó có thể tùy biến thành các Website như web nhạc, site phim hoặc trang tải phần mềm mang kiểu cách riêng biệt của bạn...
Và điều hiển nhiên muốn thiết kế blog của bạn thành 1 trong các web đó, bạn cần phải am hiểu về cấu trúc của Blogspot. Blogspot là mã nguồn đóng nhưng nó cũng không khó để tùy biến nếu các bạn hiểu biết rõ về HTML, CSS, Javascript. Hôm nay mình có tìm được bài viết về kinh nghiệm thiết kế web mà theo mình nghĩ rất hay và ý nghĩa với tâm lý của mình cũng như các bạn yêu thích tự học lập trình.
Trong thời gian tới mình sẽ đăng các bài về HTML, CSS, Javascript từ cơ bản đến nâng cao để cùng học lập trình với các bạn. Rất mong được các bạn ủng hộ. Nếu các bạn có bài viết nào cùng ý tưởng với mình thì có thể gửi email về buitruonganh.tk@gmail.com (bài viết hoặc yêu cầu cộng tác cùng viết bài trên trang này)
Rất cảm ơn các bạn !
Đây là nguyên văn của bài viết:
Trong suốt quá trình học để trở thành một lập trình viên (software engineer) hiện nay ở các trường đại học thì có một giai đoạn khá quan trọng là lập trình thiết kế website.

Tuy nhiên cũng có khá nhiều người sau khi tốt nghiệp vẫn hầu như chưa hề biết việc thành lập mộtwebsite như thế nào và cũng có khá nhiều người đã biết về lập trình nhưng chưa hề biết đến việc lập trình một website.

Bạn cũng là một người trong số đó và đang mù mờ về các kiến thức website? Sau đây tôi xin nói qua về quá trình học thiết kế website của tôi chia sẽ cùng các bạn hi vọng sẽ giúp ích được cho nhiều người.
Quá trình tự học thiết kế web

Bài viết này không có gì là cao siêu, tuy nhiên hàng ngày mình tham gia các diễn đàn thảo luận về thiết kế website thì thấy không ít người hỏi về việc họcthiết kế website bắt đầu từ đâu và nên học cái gì? Học như thế nào cho hiệu quả?

Trong suốt quá trình kể từ lúc bắt đầu học lập trình của tôi, ban đầu là lập trình về console viết các chương trình và các bài tập đơn giản bằng ngôn ngữ lập trình C như tính toán cộng trừ nhân chia, xử lý chuỗi, lưu trữ dữ liệu lên vùng nhớ và truy xuất, xử lý chuỗi mô phỏng theo dạng web browser... Lúc đó hầu như tôi cũng chưa hình dung ra được để lập được các chương trình như Corel, Photoshop hay các ứng dụng (application) thông dụng trên windows như thế nào. Bởi vì nếu mà dùng ngôn ngữ C thuần túy lập nên các chương trình này thì quả là khó khăn.

Sau đó tôi có một thời gian bắt đầu tiếp xúc với website, nhưng chỉ ở mặt sử dụng nhưng chưa hề biết đến một website được chạy như thế nào. Tôi cảm thấy thích thú với những gì trên website trình bày và bắt đầu tự tìm tòi nhưng cũng không biết bắt đầu từ đâu như một số bạn bây giờ.

Có một lần đó tôi vô tình tìm được một website cho download mã nguồn diễn đàn (forum) bằng PHPvới MySQL và có hướng dẫn cài đặt, hướng dẫn thay đổi các chức năng... Tôi download về và làm theo hướng dẫn. Chỉ cần để ý, dần dần tôi quen với cấu trúc và cách viết code của người khác và hiểu được một website hoạt động như thế nào.

Tôi không phải là một người có thói quen cầm một cuốn sách dày hay đọc một đống tài liệu học từng bước (step by step). Tôi cũng không phải một người hay thích lên lớp nghe thầy cô giảng nhiều về lý thuyết mà chỉ thích tự tìm hiểu. Đối với PHP tôi chỉ đọc đúng bài hướng dẫn tự học đầu tiên về cách khai báo các biến (variables), khai báo các hàm (functions) và các đặc điểm chính của nó rồi tự đọc mã nguồn có sẵn để biết cách viết.

Về sau tôi bắt đầu tự viết được các thay đổi cho mã nguồn forum đó, sau đó nữa tôi có thể viết được hẳn một chức năng lớn cho forum và còn có thể thay đổi hầu hết cấu trúc của nó. Con đường tự học thiết kế web của tôi là vậy.

Ngoài ra, song song với việc tự mày mò những source code có sẵn tôi còn hay tham gia các forum xem người khác thảo luận và cũng thường hay hướng dẫn người khác. Bạn hay tìm tòi để có thêm kiến thức hướng dẫn người khác cũng là một cách rất dễ để tiến bộ. Nhiều khi có những vấn đề người khác hỏi tôi không biết, thế là tôi lại lên mạng tìm hiểu rồi hướng dẫn lại. Hoặc lắm khi trên các diễn đàn thảo luận trực tuyến cũng có nhiều người đưa các vấn đề hóc búa mà mình chưa từng gặp để giải quyết. Cứ như thế dần dần bạn sẽ có nhiều kinh nghiệm cho chính mình.
Các yếu tố cần thiết để tự học thiết kế web

Tóm lại, để tự học thiết kế web thì yếu tố cần là bạn biết được được các thuật toán được dùng trong lập trình, đã có tư duy lập trình và đã biết sử dụng website. Tất nhiên cũng phải biết về cơ sở dữ liệu ít nhất là về mặt cơ bản.

Bạn có thể tìm hiểu về html trước, sau đó là PHP (nếu bạn đã biết về C) hoặc JSP (nếu bạn đã biết về lập trình Java) hay ASP.NET (nếu bạn đã biết về VB.NET hoặc C#). Có thời gian rỗi rãi thì bạn tìm hiểu mày mò thêm về css để có thể làm cho website của bạn thêm bắt mắt và javascript để có các hiệu ứng phụ dễ sử dụng cho người dùng.

Thường thì mình hay đọc các tài liệu nước ngoài bằng tiếng Anh nhiều hơn là tài liệu tiếng Việt. Bởi vì các tài liệu về kỹ thuật viết bằng tiếng Anh sẽ chuẩn hơn viết bằng tiếng Việt hoặc được dịch sang tiếng Việt. Do đó, nếu bạn có vốn tiếng Anh (không cần phải quá giỏi) cũng là một lợi thế cho bạn.
Các mã nguồn có thể sử dụng

Sau đây là các mã nguồn mà bạn có thể tìm hiểu:

1. Về forum thì gồm có: phpBB, IPB (Invision Power Board), vBB (vBulletin Board) và nhiều loại forum khác.

2. Về cms hay framework thì gồm có: Drupal, Joomla, phpNuke, Spring, LifeRay, DotNetNuke, Zend framework và nhiều loại cms/framework khác.
Các công cụ sử dụng:

1. Adobe DreamWeaver: Hỗ trợ nhiều ngôn ngữ. Tuy nhiên tôi thường dùng cho việc soạn thảo html, css và javascript.

2. Notepad++, Edit plus: Trình duyệt soạn thảo hỗ trợ nhiều ngôn ngữ, tôi thường dùng Notepad++ cái này cho việc sử nhanh trực tiếp trên host hay server.

3. Zend Studio hay Zend Eclipse: Hỗ trợ tốt cho việc lập trình PHP.

4. Eclipse: Hỗ trợ tốt cho việc lập trình Java.

5. Visual Studio: Hỗ trợ tốt cho việc lập trình ASP.NET.

6. SQL Server nếu bạn dùng cơ sở dữ liệu là MS SQL.

7. phpMyAdmin dành cho việc quản lý database MySQL bằng giao diện web.

8. SQL Yog: chương trình hỗ trợ cho việc quản lý database MySQL.

Tùy vào mã nguồn hoặc ngôn ngữ lập trình sử dụng mà bạn chọn công cụ phù hợp cho mình.

Nguồn Anh Nguyễn (BabyWolf's blog)

http://www.bta.name.vn/2012/03/tu-hoc-lap-trinh-websiteblog-phan-2-tao.html

Tiếp nối bài viết trước, hôm nay mình xin hướng dẫn các bạn tạo một trang web bằng HTML đơn giản. Bài viết này mình sẽ giới thiệu về cấu trúc của một trang HTML, các thẻ(tag) cần thiết nhất để sau này các bạn có thể áp dụng được vào với Blogger-Blogspot.

Để bắt đầu chúng ta cũng cần "tư liệu sản xuất" ( yêu triết quá :D):
- Trình duyệt web :

là IE( Internet Explorer) - Cái này mặc định Windown XP đã có sẵn

là Google Chrome ( cái này mình ưng phết)

là FireFox (cái này mình cũng hay dùng :D và cũng rất nhiều coder dùng)

Khuyên các bạn nên dùng 2 cái dưới
- Phần mềm soạn thảo văn bản:

Notepad
: là phần mềm đã có sẵn, rất tiện sử dụng

Notepad ++
: Nâng cao hơn Notepad, có phân biệt màu để coder nhìn rõ

OK, như vậy là đủ để đi "cày" HTML :))
Một file HTML có dạng tổng quát như sau:
(Các bạn có thể copy nhưng mình khuyên là nên gõ để nhớ lâu hơn)

<html><!-- Mở đầu 1 tập tin HTML-->
<head>
<title>Trang Web đầu tiên của tôi</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1> Tiêu đề có kích thước lớn nhất</h1>
<h2>Tiêu đề có kích thước heading2</h2>
...
<h6>Tiêu đề có kích thước nhỏ nhất h6</h6>
<p>Đoạn văn bản</p>
</body><!--Kết thúc thẻ body-->
</html><!--Kết thúc thẻ html-->

Lưu tập tin html với mẫu như hình (bấm vào đây để xem ảnh rõ hơn) :

Một cặp thẻ HTML thường có dạng <thẻ>Nội dung</thẻ>
Ở ví dụ trên ta thấy có mấy cặp thẻ sau:

<html></html> : Định nghĩa cho trình duyệt biết đây là tập tin HTML
<head></head>: Đây là cặp thẻ khai báo phần đầu tệp tin HTML
<title></title>: Cặp thẻ hiển thị tiêu đề của trang web trên trình duyệt.
<body></body>: Đây là cặp thẻ khai báo phần thân của tập tin HTML
<h1></h1>...<h6></h6> : Thẻ tiêu đề, h1 là lớn nhất, h6 là nhỏ nhất.
<p></p>: Cặp thẻ này sẽ hiển thị đoạn văn bản.
 : Nội dung nằm trong cặp thẻ  sẽ không hiển thị, chỉ giúp cho người lập trình dễ nắm bắt đc cấu trúc của trang web.

Ok, xem hình sẽ rõ hơn :D :

Ngoài ra các bạn có thể thấy thẻ này:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

thẻ này giúp khai báo cho trình duyệt biết trang HTML ta tạo ra sử dụng kiểu mã hóa UTF-8, phải khai báo như thế thì khi bạn gõ tiếng Việt bằng Vietkey hay Unikey thì văn bản đã được mã hóa theo chuẩn nào đó
nó kết thúc thẻ bằng /> không cần phải </meta>
một số thẻ dạng này:
<hr /> : nằm trong cặp thẻ body, tác dụng : Kẻ 1 đường thẳng
<br /> : nằm trong cặp thẻ body, tác dụng : Xuống 1 dòng.

Một số thẻ thường dùng trong BLOGGER/BLOGSPOT:
- Thẻ dùng để định dạng văn bản;

<b></b>: Chữ tô đậm hay thường gọi là chữ béo ^^! (tiếng anh nó là Bold)
VD: Đây là chữ tô đậm.

<i>Chữ nghiêng phải</i> ==>> Chữ nghiêng phải

<u>Chữ gạch chân</u>==> Chữ gạch chân(Mình đang dùng thẻ b để tô đậm thẻ i, u cho các bạn rõ đây ^^)

<span style="font-family: 'Courier New', Courier, monospace;">Kiểu chữ Courier New</span> ==> Kiểu chữ Courier New
<center></center>: Những phần văn bản, hình ảnh, video... nằm trong cặp thẻ này sẽ được cho vào chính giữa trang web.

- Thẻ tạo danh mục, đánh số:

<ul>
<li>Danh mục dòng 1</li>
<li>Danh mục dòng 2</li>
</ul>

Sẽ thành:

Danh mục dòng 1

Danh mục dòng 2

Đánh số thì sao?

<ol>
<li>Danh mục số 1</li>

<li>Danh mục số 2</li>
</ol>

Sẽ thành:

Danh mục số 1

Danh mục số 2

Bài viết do mình tự tìm hiểu và học hỏi nên chỉ trình bày cho các bạn những điều cần thiết mà mình biết, nên còn thiếu sót nhiều, rất mong được các bạn góp ý ! Thân.

TruongAnh Blog

Bài đăng trên Blog, Widget quan trọng nhất của Blogspot (tt)

Tiếp theo phần 1 về Bài đăng trên Blog - Widget quan trọng nhất của Blogspot. Hôm nay chúng ta trở lại với code phần 2 và 3. Mặc dù code phần 1 đã xong, có thể một vài bạn vẫn chưa hình thù được cụ thể như thế nào thì hi vọng sau bài này sẽ không còn ai chưa hiểu.

Cuối bài tôi sẽ tổng hợp code của widget lại và thêm mấy thứ râu ria như thẻ body, doctype... để hình thành template cho các bạn Test thử.

B. Code phần 2

Code cho phần này không có gì ghê gớm cả, chỉ là 2 nút Older Posts và Newer Posts. Đúng ra là có thêm nút quay về trang chủ nữa nhưng do nó không có gì quan trọng với làm cũng không khó lắm nên tôi bỏ qua.

Data provided by Pastebin.com - Download Raw - See Original

<b:includable id="nextprev">

<!-- Code nút Newer Posts-->

<a class='new' expr:href='data:newerPageUrl'><data:newerPageTitle/></a>

<!-- Code nút Older Posts -->

<a class='old' expr:href='data:olderPageUrl'><data:olderPageTitle/></a>

</b:includable>

Phần này chỉ chú ý với bạn một điều là: thẻ expr:href='data:newerPageUrl' và expr:href='data:olderPageUrl' sẽ cho ra 2 giá trị khác nhau khi bạn ở Trang chủ và khi bạn xem một bài viết.

Ví dụ với nút Older Posts, nếu ở trang chủ thì khi Click vào liên kết sẽ chuyển đến trang tiếp theo của Blog (Các bài đăng cũ hơn). Nhưng nếu khi bạn xem một bài viết nào đó mà bạn Click vào nút Older Post liên kết sẽ chuyển đến bài đăng cũ hơn liền kề với nó.

Và thẻ <data:olderPageTitle/> ở đây cũng sẽ cho 2 giá trị tương ứng là: "Older Posts" và "Older Post" (Bạn để ý đến số ít và số nhiều của từ Post) với mỗi trang chủ hoặc trang xem bài viết (item).

C. Code phần 3

Trước hết bạn phải hiểu cấu trúc của Widget Blog Posts này bao gồm các thẻ :<includable id='Tên ID' var='biến'>Nội dung</includable> (hay còn gọi là Cặp...),

Trong mỗi Widget thì phải có ít nhất 1 cặp <includable> với ID là main.

Tất cả các thẻ <includable> của widget này sẽ được đưa vào trong thẻ <includable>với ID main kia bằng một phương tiện gọi là <include>, bạn xem hình sau để biết rõ hơn :

Vậy Code của phần 3 này chính là thẻ <includable> với ID là main. Cụ thể thì thẻincludable với ID là "post" và "nextprev" sẽ được đưa vào thẻ includable số 3 này.
Bây giờ tôi sẽ đưa thẻ <includable> ở phần A (bài trước)vào bằng <include> như sau:

Data provided by Pastebin.com - Download Raw - See Original

<b:includable id="main" var="top">

<b:include data='post' name='post'/> //name = id của thẻ includable số 1.

</b:includable>

Nếu chỉ có như trên thì bạn sẽ không lấy được bài viết, chúng ta có nhiều bài viết khác nhau, vì thế ta sẽ cần phải có một vòng lặp loop để có thể lôi lần lượt các bài viết trong cơ sở dữ liệu ra, vòng lặp ta chèn quanh thẻ include

Data provided by Pastebin.com - Download Raw - See Original

<b:includable id="main" var="top">

<b:loop values='data:posts' var='post'>

<b:include data='post' name='post'/> //name = id của thẻ includable số 1.

</b:loop>

<b:include name='nextprev'/> //name = id của thẻ includable số 2.

</b:includable>

Sau khi đã lấy được bài viết ra, chúng ta lại tiếp tục lấy cái nút Older Posts và Newer Post ra cũng bằng include, thường thì 2 nút này nằm dưới cùng của widget, nên ta sẽ phải đặt nó ở dưới thẻ loop

Vậy là đã xong, Widget quan trọng nhất của Template Blogspot hiện giờ chỉ có như thế thế thôi, rất ngắn phải không?

D. Bonus - Dành cho những bạn quan tâm đến thiết kế template

Đây là code tổng hợp toàn bộ code của cả 3 phần. Về cơ bản thì Widget quan trọng nhất của Blogger - Widget Blog Post có các thành phần cơ bản dưới đây. Đây chính là phần xây thô, nếu muốn tùy chỉnh sắp xếp các thành phần cơ bản hoặc thêm thắt các hiệu ứng bạn cần phải dùng các thủ thuật CSS

Data provided by Pastebin.com - Download Raw - See Original

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

<b:includable id="post" var="post">

        <div class="post-item">

                <h1><aexpr:href='data:post.url'><data:post.title/></a></h1>

                <img expr:src='data:post.thumbnailUrl' />

                <data:post.snippet>

                <a expr:href='data:post.url'><data:post.jumpText/></a>

        </div>

</b:includable>

<b:includable id="nextprev">

        <a class='new'expr:href='data:newerPageUrl'><data:newerPageTitle/></a>

        <a class='old'expr:href='data:olderPageUrl'><data:olderPageTitle/></a>

</b:includable>

<b:includable id="main" var="top">

        <b:loop values='data:posts' var='post'>

                <b:include data='post' name='post'/>

        </b:loop>

        <b:include name='nextprev'/>

</b:includable>

</b:widget>

Giờ tôi sẽ thêm 1 <doctype>, thẻ <head>, thẻ <body> <section> vào để chạy thử Template cho các bạn xem:

<section> là một cặp thẻ bao ngay bên ngoài của Widget, bên trong Section có thể có nhiều widget, có thể hiểu widget là con của section, còn includable lại là con của widget... Một template blogspot bắt buộc phải có ít nhất 1 cặp thẻ section., 1 section thì có thể có nhiều widget, 1 widget có thể có nhiều includable...

Đây là Code Template của chúng ta:

Data provided by Pastebin.com - Download Raw - See Original

<?xml version="1.0" encoding="UTF-8" ?>

<!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'xmlns:b='http://www.google.com/2005/gml/b'xmlns:data='http://www.google.com/2005/gml/data'xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>

<b:include data='blog' name='all-head-content'/>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*

/*CSS Chưa có nên tạm thời để trống --- Hieu bo blah blah blah ---*/

]]></b:skin>

</head>

<body>

<b:section id='add-widget' showaddelement='yes'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

<b:includable id="post" var="post">

        <div class="post-item">

                <h1><aexpr:href='data:post.url'><data:post.title/></a></h1>

                <img expr:src='data:post.thumbnailUrl' />

                <data:post.snippet />

                <a expr:href='data:post.url'><data:post.jumpText/></a>

        </div>

</b:includable>

<b:includable id="nextprev">

        <a class='new'expr:href='data:newerPageUrl'><data:newerPageTitle/></a>

        <a class='old'expr:href='data:olderPageUrl'><data:olderPageTitle/></a>

</b:includable>

<b:includable id="main" var="top">

        <b:loop values='data:posts' var='post'>

                <b:include data='post' name='post'/>

        </b:loop>

        <b:include name='nextprev'/>

</b:includable>

</b:widget>

</b:section>

</body>

</html>

Bạn có thể Copy và test thử, bạn sẽ thấy tiêu đề, thumbnail, trích dẫn...v.v... được lôi ra rồi đúng không, nút older posts, newer posts cũng đã hoạt động.

Bây giờ chắc bạn đã hiểu nôm na Widget Blog Posts hoạt động như thế nào?

Đầu tiên tôi định sẽ viết bài về widget một cách chi tiết (có cả lệnh điều kiện, rồi các kiểu trang)... nhưng sợ bài viết sẽ trở lên rối, vì thế nên bài này chỉ mang tính cơ bản và giới thiệu.

Các bài sau tôi sẽ viết cách để dựng lên một Template, từ PSD, HTML, CSS... Lúc đó đi đến đâu tôi sẽ nói cụ thể đến đó ~~!

http://blog.nguoiaolam.net/2012/06/code-phan-a-xong-co-mot-vai-ban-van_08.html#.UJIAf2_MgZQ

Wednesday, 31 October 2012

Related Posts

Related Posts

B. Code phần 2

C. Code phần 3

D. Bonus - Dành cho những bạn quan tâm đến thiết kế template

Related Posts