Trang 1 / 17 12346 ... LastLast
Hiển thị kết quả từ 1 đến 10 / 170
  1. #1
    Tham gia
    23-01-2005
    Location
    http://hoctudau.com
    Bài viết
    2,957
    Like
    105
    Thanked 365 Times in 209 Posts

    [TUTOR] Học thiết kế web sử dụng CSS theo đúng tiêu chuẩn Web Standard

    Về lợi ích của Web Standard các bạn có thể đọc tại đây (tiếng Việt):
    http://hoctudau.com/?p=106

    Về cách viết lập trình web dùng HTML, CSS sao cho tốt, cũng như việc học thiết kế web , việc viết code sao cho đúng chuẩn, các bạn có thể xem slide và clip rất chi tiết sau, slide (Tiếng Anh) và clip minh họa cho slide (Tiếng Việt): http://hoctudau.com/slides/html-css-best-practices/ (lưu ý là nội dung slide dành cho các bạn đã làm việc với CSS, đã biết CSS rồi), còn mới học hoặc chưa biết gì về HTML, CSS có thể xem các link và đọc các bài ở dưới

    Còn tại sao phải sử dụng Web Standard và CSS, bạn có thể đọc tại đây (tiếng Anh)
    http://www.maxdesign.com.au/presentation/benefits/
    http://developer.mozilla.org/en/docs..._Web_Standards


    Link trực tiếp đến các Clip:

    - Căn bản HTML, CSS, Javascript, PHP & MySQL (dành cho người mới học):


    - Các nguyên tắc viết mã HTML, CSS dành cho người đã đi làm về HTML, CSS:


    - jQuery cũng rất cần thiết cho người làm HTML, CSS:



    Đây là một xu hương đang được các nhà thiết kế web chuyên nghiệp cổ vũ, nếu các bạn mới học có quan tâm thì mình sẽ tiếp tục bài viết.

    ======================================
    Cập nhật lại 1 số link đến blog cũ của mình đề cập trong topic này

    http://my.opera.com/cssquestions/blo...y-xay-dung-web
    http://my.opera.com/cssquestions/blo...-lap-trinh-web
    http://my.opera.com/cssquestions/blo...-toi-thich-css
    http://my.opera.com/cssquestions/blog/css-la-gi
    http://my.opera.com/cssquestions/blo...-ve-html-xhtml
    http://my.opera.com/cssquestions/blo...27/ac-mong-css
    http://my.opera.com/cssquestions/blo...b-website-site
    http://my.opera.com/cssquestions/blo...nghich-voi-css
    http://my.opera.com/cssquestions/blo...iet-cho-ban-tr

    http://my.opera.com/cssquestions/blo...css-tieng-viet
    http://my.opera.com/cssquestions/blo...g-viet-ve-html

    http://my.opera.com/cssquestions/blo...-xhtml-english
    http://my.opera.com/cssquestions/blo...moi-hoc-ve-css
    http://my.opera.com/cssquestions/blo...-html-loi-thoi
    http://my.opera.com/cssquestions/blo...-nguoi-hoc-css
    http://my.opera.com/cssquestions/blo...t-web-bang-css
    http://my.opera.com/cssquestions/blo...ng-toc-website
    http://my.opera.com/cssquestions/blo...u-thuat-ve-css


    Thân chào các bạn. Chúc các bạn thành công
    Được sửa bởi zmt264 lúc 20:34 ngày 24-04-2013
    Thông tin + clip: http://youtube.com/hoctudau
    Quote Quote


  2. #2
    Tham gia
    23-01-2005
    Location
    http://hoctudau.com
    Bài viết
    2,957
    Like
    105
    Thanked 365 Times in 209 Posts
    Trước tiên để hiểu rõ trình độ của bạn trước khi "học" bạn vui lòng vào 3 link sau để trắc nghiệm kiến thức (mỗi trắc nghiệm là 20 câu):
    1) về HTML
    http://www.w3schools.com/html/html_quiz.asp
    2) về xHTML
    http://www.w3schools.com/xhtml/xhtml_quiz.asp
    3) về CSS
    http://www.w3schools.com/css/css_quiz.asp

    Vui lòng sau khi trắc nghiệm sau bạn ghi lại quá trình làm bài của mình, đã làm những câu nào như thế nào, và được bao nhiêu điểm.

    Mình xin trả lời tận tình và ... miễn phí các bạn có thực tâm học (thể hiện qua việc thực hiện yêu cầu trên của mình), còn với những bạn không trắc nghiệm thì vẫn hoan nghênh các bạn đọc topic này, nhưng mình sẽ không trả lời bạn nếu bạn hỏi mình trong topic này đâu nha :P .

    Trình độ của mình cũng không phải là cao, nhưng hi vọng có thể giúp các bạn ít nhiều vì 1 cộng đồng web standard đang nhen nhóm ở VN :P .

    Bạn nào muốn được thông báo khi có bài viết mới trên blog (tiếng Anh) hoặc là bài viết mới trong topic này, có thể add nick Yahoo của mình là zmt264 (hiện giờ tổng số friends trong nick của mình đã trên 300 nên có thể trục trặc, mình đang xóa dần 1 số nick hầu như ko liên lạc đi sau).
    Được sửa bởi zmt264 lúc 19:57 ngày 30-04-2007
    Thông tin + clip: http://youtube.com/hoctudau

  3. 5 thành viên Like bài viết này:


  4. #3
    Tham gia
    23-01-2005
    Location
    http://hoctudau.com
    Bài viết
    2,957
    Like
    105
    Thanked 365 Times in 209 Posts
    Tạm thời mình dịch 1 trong 3 trắc nghiệm trên (về kiến thức HTML) ra tiếng Việt, nếu các bạn thấy việc dịch sang tiếng Việt là cần thiết thì mình sẽ tiếp tục dịch 2 trắc nghiệm còn lại, mong các bạn hưởng ứng trả lời đầy đủ:

    1. Từ HTML là từ viết tắt của từ nào?

    Hyperlinks and Text Markup Language
    Home Tool Markup Language
    Hyper Text Markup Language

    2. Ai (tổ chức nào) tạo ra Web standards?

    The World Wide Web Consortium
    Microsoft
    Netscape

    3. Đâu là tag tạo ra tiêu đề web kích cỡ lớn nhất.

    <heading>
    <h1>
    <h6>
    <head>

    4. Đâu là tag để xuống dòng trong web?

    <lb>
    <br>
    <break>


    5. Đâu là tag tạo ra mầu nền của web?

    <body color="yellow">
    <body bgcolor="yellow">
    <background>yellow</background>

    6. Đâu là tag tạo ra chữ in đậm

    <b>
    <bold>
    <bld>
    <bb>

    7. Đâu là tag tạo ra chữ in nghiêng

    <ii>
    <italics>
    <i>

    8. Đâu là tag tạo ra liên kết (links) trong web

    <a url="http://www.w3schools.com">W3Schools.com</a>
    <a>http://www.w3schools.com</a>
    <a href="http://www.w3schools.com">W3Schools</a>
    <a name="http://www.w3schools.com">W3Schools.com</a>

    9. Đâu là tag tạo ra liên kết đến email?

    <a href="***@yyy">
    <a href="mailto:***@yyy">
    <mail>***@yyy</mail>
    <mail href="***@yyy">

    10. Làm sao để khi click chuột vào link thì tạo ra cửa sổ mới?

    <a href="url" new>
    <a href="url" target="new">
    <a href="url" target="_blank">

    11. Đâu là những tag dành cho việc tạo bảng?

    <table><tr><td>
    <thead><body><tr>
    <table><head><tfoot>
    <table><tr><tt>

    12. Đâu là tag căn lề trái cho nội dung 1 ô trong bảng

    <tdleft>
    <td valign="left">
    <td align="left">
    <td leftalign>

    13. Đâu là tag tạo ra 1 danh sách đứng đầu bằng số

    <ul>
    <list>
    <ol>
    <dl>

    14. Đâu là tag tạo ra 1 danh sách đứng đầu bởi dấu chấm?

    <list>
    <ul>
    <ol>
    <dl>

    15. Tag nào tạo ra 1 checkbox?

    <check>
    <input type="check">
    <checkbox>
    <input type="checkbox">

    16. Tag nào tạo ra 1 text input field?

    <textfield>
    <textinput type="text">
    <input type="text">
    <input type="textfield">

    17. Tag nào tạo ra 1 drop-down list?

    <select>
    <list>
    <input type="dropdown">
    <input type="list">

    18. Tag nào tạo ra 1 text area?

    <input type="textbox">
    <textarea>
    <input type="textarea">

    19. Tag nào dùng để chèn 1 hình vào web?

    <image src="image.gif">
    <img>image.gif</img>
    <img src="image.gif">
    <img href="image.gif>

    20. Tag nào dùng để tạo hình nền cho web?

    <body background="background.gif">
    <background img="background.gif">
    <img src="background.gif" background>
    Thông tin + clip: http://youtube.com/hoctudau

  5. 6 thành viên Like bài viết này:


  6. #4
    Tham gia
    23-01-2005
    Location
    http://hoctudau.com
    Bài viết
    2,957
    Like
    105
    Thanked 365 Times in 209 Posts
    Tôi dự định chia Tutor này được chia làm 4 phần, mỗi phần gồm nhiều bài học được dẫn dắt theo những câu hỏi để các bạn có thể hứng thú hơn. Trong phần đầu đầu tiên, chúng ta sẽ học cách tạo ra 1 website đơn giản có sử dụng CSS để định dạng (format) cũng như tạo dáng (layout) cho web.

    Bài Tutor đầu tiên này coi như 1 bản dịch từ:
    http://www.w3.org/Style/Examples/011/firstcss
    có thể nói đây là 1 ví dụ "nhỏ như con thỏ" đối với dân Pro, nhưng nếu bạn mới biết CSS thì cũng ko phải nhìn vào là làm ngay được. Tuy ví dụ nhỏ nhưng nó sẽ giúp ta có những khái niệm căn bản về CSS

    Web cuối cùng của phần 1 sẽ có dạng như hình sau: hình đính kèm
    Attached Images
    Được sửa bởi zmt264 lúc 02:59 ngày 15-11-2011
    Thông tin + clip: http://youtube.com/hoctudau

  7. 4 thành viên Like bài viết này:


  8. #5
    Tham gia
    18-03-2007
    Bài viết
    19
    Like
    0
    Thanked 0 Times in 0 Posts
    chờ bạn viết thêm đó nha

  9. #6
    Tham gia
    23-01-2005
    Location
    http://hoctudau.com
    Bài viết
    2,957
    Like
    105
    Thanked 365 Times in 209 Posts
    Quote Được gửi bởi vter123 View Post
    chờ bạn viết thêm đó nha
    Bạn đã trả lời trắc nghiệm chưa , được mấy điểm

    P/S: lưu ý, topic này dành cho những bạn biết 1 chút về HTML rồi nha, những bạn chưa biết chút nào hoặc là quá giỏi rồi thì ko phải "đối tượng phục vụ" vào đọc cho vui thôi :P
    Thông tin + clip: http://youtube.com/hoctudau

  10. 2 thành viên Like bài viết này:


  11. #7
    Tham gia
    23-01-2005
    Location
    http://hoctudau.com
    Bài viết
    2,957
    Like
    105
    Thanked 365 Times in 209 Posts
    1 bài của solid bên tinhoc.vn (1 cái clone của ddth.com chẳng hiểu để làm gì?) , copy về đây cho bà con đọc:

    Đáp ứng yêu cầu của bạn, Solid đã viết ngay một bài hướng dẫn ngắn về thiết kế web, tạm thời được trong topic này. Để có một bài hướng dẫn phù hợp với các bạn mới bắt đầu học thiết kế web, tôi không đòi hỏi ở các bạn nhiều đâu, chỉ cần khi đọc trong bài hướng dẫn, chỗ nào không hiểu thì hỏi lại. Từ đó, tôi sẽ update cách truyền đạt cũng như nội dung. Có như thế thì chúng ta mới có một bài hướng dẫn luôn "hot" (phù hợp với những ai đang cần nó)

    Hướng dẫn thiết kế một website

    1. Để thiết kế một website, bạn cần phải chuẩn bị những gì?

    - Một yêu cầu cụ thể
    - Hiểu biết về Web Standard và một số khái niệm liên quan
    - Hiểu biết về các ngôn ngữ: HTML (hoặc XHTML), CSS, Javascript, PHP (hoặc ASP hoặc JSP)

    Bây giờ, tôi sẽ cố gắng cụ thể hóa những gì vừa trình bày ở trên.

    Câu hỏi đầu tiên: "Tại sao lại cần phải có một yêu cầu cụ thể?". Ví dụ nhé, nếu sáng sớm thức dậy, bạn đánh răng. Tôi hỏi "Đánh răng để làm gì vậy?". Nếu bạn trả lời tôi là "À, thói quen thôi" thì tôi đoan chắc 99,99%: bạn là robot. Nhưng may quá, bạn là một con người nên bạn sẽ trả lời tôi: "Bạn không biết à, đánh răng để giữ cho răng khỏe, thơm miệng, không bị sâu, không bị các bệnh về răng". Đấy, thấy chưa, đến một việc "nhỏ xíu" như đánh răng thì bạn cũng phải có mục đích mới thực hiện được. Còn nếu đánh răng chẳng đem lại ích lợi gì thì đời nào bạn làm. Chuyện thiết kế một website cũng vậy, cũng phải có mục đích. Mục đích có thể là bạn muốn trở nên nổi tiếng, bạn muốn chia sẻ những gì mình có và nhận lại những gì mình đáng được nhận từ thế giới ảo,... Do đó, khi bắt tay vào làm một website, câu đầu tiên bạn nên hỏi là "Thông qua website, tôi có thể chia sẻ cái gì cho những người khác?".

    Câu hỏi tiếp theo: "Cần quái gì phải biết Web Standards?". Như tôi đã nói ở phần trên, bất kì làm việc gì cũng phải có ích lợi của nó. Cho nên, tôi xin giới thiệu với các bạn loạt bài của anh Sonny về Web Standards để hiểu thêm ích lợi của Web Standards.

    http://sonnymotives.com/archives/web...ioi-web-phan-1

    Câu hỏi tiếp theo: "Cần quái chi biết mấy ngôn ngữ tàm xàm ba láp đó?". Cần chứ. Ví dụ nhá, khi bạn muốn xây một căn nhà, bạn phải lập bản vẽ. Sau khi lập bản vẽ, bạn đã có cái nhà mình mơ ước chưa? Chắc chắn là chưa vì còn phải qua giai đoạn xây tô nữa. Và giai đoạn xây tô cần có gì nhỉ? Ai cũng biết: gỗ, sắt, gạch, xi măng... Và các ngôn ngữ tôi đã đề cập đối với việc xây dựng một website cũng giống như gạch, xi măng đối với việc xây dựng một căn nhà vậy.

    Phần sau, tôi sẽ đề cập đến làm thế nào để có được những cái mình phải chuẩn bị trước?

    Tạm thời tới đây thôi! Mai mốt việc tiếp!
    Mong nhận được góp ý của bè bạn!
    - bài viết từ 9 tháng 1 năm 2007 tiếc là solid ko viết tiếp nên coi như loạt bài viết này là 1 sự tiếp tục ---
    Thông tin + clip: http://youtube.com/hoctudau

  12. 2 thành viên Like bài viết này:


  13. #8
    Tham gia
    23-01-2005
    Location
    http://hoctudau.com
    Bài viết
    2,957
    Like
    105
    Thanked 365 Times in 209 Posts
    Thế nào là CSS ?
    Mình xin trích bài từ 1 diễn đàn khác để các bạn đọc:
    http://www2.uni-leipzig.de/~vietnam/...viewtopic&t=10
    CSS là gì? Một câu hỏi đơn giản thôi mà khá khó để trả lời. Bạn có thể vào google.com và gõ cụm từ define: CSS sẽ cho ra vô vàn kết quả.

    Khi thế giới web mới ra đời người ta thường dùng các thẻ HTML để dàn trang. Việc dàn trang đó bao gồm chia trang web thành các bảng, ô, để add text, add ảnh, kiểu chữ, màu sắc... Khi mà công nghệ web ngày càng phát triển người ta nhận thấy việc dàn trang bằng các bảng ngày càng trở nên bất tiện. Khối lượng mã HTML lớn cùng việc khó khăn trong kiểm soát các vùng nội dung trên trang web (theo tôi biết) là những lý do khiến HTML ngày càng thất thế. Nếu bạn vào các website chuyên nghiệp của nước ngoài bạn sẽ việc dàn trang của họ hoàn toàn bằng các thẻ DIV của CSS mà không dùng các thẻ HTML, nếu có thì cũng rất ít.

    Công nghệ CSS được đề cập đầu tiên bởi W3C vào năm 1996. Theo định nghĩa của W3C (Wide Web Consortium) CSS (từ viết tắt của Cascading Style Sheet tạm dịch là bảng kiểu xếp chồng) là một ngôn ngữ giúp người thiết kế web có thể add kiểu vào tài liệu web (như kiểu font chữ, màu sắc, khoảng cách vv..). Bạn có thể tạo ra kiểu một lần nhưng có thể dùng lại nhiều lần trong các tài liệu web tiếp theo. Ví dụ như nếu bạn muốn hiển thị một bức ảnh trong web với màu khung màu xanh, đường viền bức ảnh là đường kẻ liền thì bạn có thể định nghĩa khung đó thành một kiểu, giả dụ đặt tên là "frame" đi. Và sau đó khi bạn muốn các khung ảnh khác cũng có kiểu dáng như vậy thì bạn chỉ việc gọi kiểu mà bạn đã định nghĩa để sử dụng lại lần nữa. Cụ thể ở đây là gọi kiểu "frame".

    Việc dàn trang bằng các thẻ DIV trên web là việc bạn phân vùng các khu vực trên trang web và gọi các kiểu xác định mà bạn đã định nghĩa trước. Thay vì việc dùng các bảng HTML bạn có thể dùng các thẻ DIV linh hoạt để phân hoạch các vùng khác nhau trên trang. Một thẻ
    cũng giống như một phần của miếng ghép để tạo nên trang web hoàn thiện. Ưu điểm của các thẻ DIV là rất linh hoạt, các lớp có thể chồng lên nhau một phần hoặt nhiều phần. Đây là một điểm thú vị mà việc dàn trang bằng HTML không có được. Nhưng nhược điểm của CSS là việc kiểm soát chúng trên các trình duyệt web khác nhau khá khó khăn vì chính tính linh hoạt trên. Các trình duyệt hỗ trợ CSS đôi khi là khác nhau vì vậy nếu dàn trang không tốt thì việc hiển thị cực tệ. Nhưng bạn đừng lo, có khó khăn thì sẽ có người giải quyết khó khăn. Hiện nay tôi biết có một thứ gọi là hack CSS tức là giúp viết CSS hiển thị tốt trên các trình duyệt khác nhau. CSS không phải là một ngôn ngữ lập trình tới thời điểm này (theo tôi được biết).

    Về tài liệu CSS thì khá nhiều trên mạng nhưng chủ yếu là bằng tiếng anh. Tôi còn nhớ khi tôi view source một trang web của nước ngoài mà không hề thấy một thẻ HTML tôi đã rú lên sao họ tài thế . Tôi đã lượn vòng khắp các diễn đàn của Việt Nam mong kiếm được quyển sách CSS nào bằng tiếng Việt nhưng mà vô vọng. Ở VN hiện nay tôi gần như là chưa thấy việc dàn trang hoàn toàn bằng CSS trên web mà vẫn sử dụng HTML kết hợp với CSS là chủ yếu. Để học CSS bây giờ chắc bạn phải biết tiếng anh rồi. Và thêm một điều nữa, hay down các trang web đã được dàn trang bằng CSS và các file .css về nghiên cứu, mày mò, trình độ của bạn sẽ tiến triển nhiều đấy. Tiếng anh của tôi rất kém và cũng không đủ thời gian để dịch sách cho các bạn. Google là một thế giới rộng lớn, hãy gõ từ learn CSS để tìm sách học. Tôi có một vài trang web khuyến cáo các bạn nên vào và đọc
    Thông tin + clip: http://youtube.com/hoctudau

  14. 4 thành viên Like bài viết này:


  15. #9
    Tham gia
    23-01-2005
    Location
    http://hoctudau.com
    Bài viết
    2,957
    Like
    105
    Thanked 365 Times in 209 Posts
    1 bài khác từ :
    http://mauthietke.com/subject.asp?P_ID=183&PT_ID=100
    10 lý do để dùng CSS:
    1. Xây dựng một nền tảng để thay thế các phương thức cổ điển của Web. Tổ chức World Wide Web Consortium (W3C) tạo ra CSS để thay thế các bảng (table), các thẻ font, frame và các dạng "hack" thẻ HTML để tạo hiệu quả cho website

    Với tôi, CSS mang lại hiệu quả công việc cao hơn. Nhìn cái tag font rối rắm là tôi thấy nản. Coder muốn sửa chữa gì cũng mệt vì sự rối rắm của nó. Trong trường hợp muốn thay đổi về thiết kế của code, bạn lại đụng tới khá nhiều mảng của coder. Còn nếu sử dụng css, việc chỉnh sửa rất đơn giản, không phụ thuộc vào coder.


    2. Tăng tốc độ website.
    Thời gian load một website sẽ nhanh hơn. Dung lượng của một trang web sẽ nhẹ hơn 50% so với cách làm cổ điển.


    3.Thời gian phát triển website nhanh hơn
    Thông qua một thao tác về thiết kế: thay đổi CSS, thì hàng ngàn trang web sẽ được thay đổi theo.


    4. Typography thể hiện ngầu hơn
    CSS có khả năng kiểm soát mạnh mẽ hơn tag FONT rất nhiều. Chúng ta có thể kiểm soát chiều cao giữa các dòng, thay màu font, các font theo họ - tức là không có font này, sẽ tự chọn font tiếp theo trong danh sách, và nhiều nhiều hơn thế.


    5. Dễ viết
    Bạn có thể tạo và thay đổi CSS dễ dàng như khả năng làm code HTML thủ công.


    6.Khả năng phát triển.
    Sử dụng CSS hiệu quả sẽ tương tự như sử dụng cấu trúc nội dung với HTML. Với cấu trúc HTML, chúng ta chỉ giữ lại các tag cho đoạn văn, các tag tiêu đề (H1 -> H6), bảng dành cho một số ít bảng biểu đặc biệt, bạn sẽ tăng khả năng đáp ứng lượng khách viếng thăm mà không cần xây dựng một phiên bản độc lập để giảm tải.


    7. Thiết kế dành cho in ấn cũng đẹp như dành cho web.


    CSS hỗ trợ tốt cho một khi bạn cần in ra, chẳng hạn in ấn, hay PowerPoint


    8. Dễ kiểm soát thông qua vị trí các thành phần trên web. Việc đánh ID trên từng thẻ DIV, sẽ dễ dàng hơn cho bạn khi cần kiểm soát và hỗ trợ tốt cho Ajax.


    9. Các trang web tách biệt phần thiết kế và nội dung. Giữ lại thiết kế trong một file liên kết, bạn có thể tiết kiệm nhiều thời gian khi cần thêm bớt các thành phần của một trang web.


    10. Cải thiện vị trí trong các website tìm kiếm.


    Với cách sử dụng HTML cho phần nội dung mà thôi, bạn đã loại bỏ các tag định dạng phức tạp cho thiết kế. Điều này là cho các website tìm kiếm index (tạo chỉ mục) website của bạn tốt hơn, và sẽ là tăng thứ hạng của website.
    Nguồn http://www.sessions.edu/faculty/inte...ReasonsCSS.asp
    Được sửa bởi zmt264 lúc 16:19 ngày 04-05-2007
    Thông tin + clip: http://youtube.com/hoctudau

  16. 4 thành viên Like bài viết này:


  17. #10
    Tham gia
    23-01-2005
    Location
    http://hoctudau.com
    Bài viết
    2,957
    Like
    105
    Thanked 365 Times in 209 Posts
    CSS ế ẩm quá nhỉ? chắc qua buôn hàng Flash, Video ... thôi, hic. Thảo nào dân mình Hạnh Phúc nhất thế giới. Toàn mải hưởng thụ hạnh thúc chẳng ai vào topic của mình
    Thông tin + clip: http://youtube.com/hoctudau

  18. 3 thành viên Like bài viết này:


Trang 1 / 17 12346 ... LastLast

Bookmarks

Quy định

  • Bạn không thể tạo chủ đề mới
  • Bạn không thể trả lời bài viết
  • Bạn không thể gửi file đính kèm
  • Bạn không thể sửa bài viết của mình
  •