01699602XXX
Get in touch - Saturday: 8:30 am - 6:00 pm

Kênh MusicProductionVN
Slider 1 mini Slider 2 mini

Friday, August 12, 2016

Học HTML cơ bản -Bài 15

Tag :

Bài 15: Tổng kết


Chúc mừng, bạn đã hoàn tất 15 bài HTML cơ bản. Những kiến thức vừa học sẽ giúp bạn có những hiểu biết sơ khai về HTML. Nó có thể sẽ giúp bạn tạo ra một website đơn giản. Dĩ nhiên, để trở thành nhà thiết kế web chuyên nghiệp bạn phải cần nhiều hơn thế nữa ở các bài học nâng cao. Còn bây giờ, trước khi kết thúc loạt bài này, chúng ta cùng nhìn xem lại còn điều gì phải lưu ý.

Những điều cần lưu ý

  • Trước hết, để tạo ra một website bạn nên có ý tưởng trước về cấu trúc các trang (được gọi là sitemap), điều này không chỉ giúp bạn quản lý các tập tin dễ dàng hơn mà còn cho bạn một cái nhìn toàn diện nội dung tổng thể của website.
  • Luôn tuân thủ chuẩn HTML theo quy định của W3C, sử dụng DTD, viết code sạch sẽ và kiểm tra các trang HTML bằng phương pháp xác nhận trên website validator.w3c.org.
  • Chú ý phần trình bày nội dung, HTML chỉ là một công cụ giúp bạn trình bày nội dung trên internet. Phải đảm bảo thông tin bạn đưa lên đủ thu hút người xem. Trình bày đẹp sẽ là một lợi thế, nhưng rõ ràng và sạch sẽ cũng quan trọng không kém, vì mọi người lên internet là để tìm đọc thông tin.
  • Tránh sử dụng các hình ảnh có kích thước lớn, thời gian tải các trang quá lâu sẽ làm người xem chán nản. Những trang Web mất trên 20 giây để hoàn tất hiển thị trên trình duyệt sẽ làm mất đến 50% số lượng người xem.
  • Quảng bá website của bạn đến những người quan tâm, đưa website lên các danh mục, diễn đàn, mạng xã hội để thu hút người xem. Bạn có thể sẽ quan tâm đến SEO (Search Engine Optimize – tối ưu hóa cho cổ máy tìm kiếm) sau này để đưa trang Web lên trang đầu tiên với từ khóa tìm kiếm liên quan.
  • Bạn cũng có thể quan tâm đến các phần mềm trợ giúp soạn thảo HTML chuyên nghiệp ở các bài học nâng cao. Tôi khuyến nghị bạn nên dùng Adobe Dreamweaver, một phần mềm dành cho các nhà thiết kế web chuyên nghiệp.
  • ----------------------------------------------------------------------------------------------------------------
  • Bài 1: Nhập môn
    Tìm hiểu những công cụ cần thiết khi làm web.
  • Bài 2: HTML là gì?
    Tìm hiểu về HTML
  • Bài 3: Phần tử và thẻ – Elements and tags?
    Phần tử và thẻ – làm thế nào để sử dụng chúng
  • Bài 4: Tạo trang web
    Bài học cách tạo ra trang HTML đầu tiên – trang mẫu để tạo ra các trang khác sau này
  • Bài 5: Bạn đã được học những gì?
    Ôn tập những gì đã học và xem trước các bài kế tiếp
  • Bài 6: Thêm một vài phần tử
    Làm quen với 6 phần tử HTML thường được sử dụng
  • Bài 7: Thuộc tính
    Học cách thêm những thông tin vào thẻ và x6y dựng câu lệnh chính xác hơn
  • Bài 8: Liên kết
    Khám phá các liên kết các trang web của bạn và các trang ở web khác trên internet.
  • Bài 9: Hình ảnh
    Khám phá việc chèn ảnh vào trang web.
  • Bài 10: Tạo bảng – Tables
    Cấu trúc bảng để dàn trang web.
  • Bài 11: Tìm hiểu thêm về bảng – table
    Học nâng cao cấu trúc bảng – table
  • Bài 12: Dàn trang (CSS)
    Tìm hiểu làm thế nào Cascading Style Sheets (CSS) có thể giúp dàn trang thú vị hơn.
  • Bài 13: Đưa trang web lên internet
    Khám phá làm cách nào để đưa trang web lên internet để ai cũng có thể xem
  • Bài 14: Những tiêu chuẩn cho Web và xác nhận
    Học các tiêu chuẩn HTML thông dụng và cách kiểm tra code có được viêt đúng không
  • Bài 15: Những lời khuyên sau cùng
    Một vài lời khuyên bổ ích cho những dự án về web của bạn

Unknown11:26:00 PM

Học HTML cơ bản -Bài 14

Tag :

Bài 14: Tiêu chuẩn Web và xác nhận


Trong bài học này, bạn sẽ tìm hiểu thêm một số lý thuyết về HTML.

Tôi cần biết thêm gì về HTML?

Ngày trước, HTML có thể được viết theo nhiều cách khác nhau, và các trình duyệt có thể đọc HTML cũng theo nhiều cách như vậy. Nói một cách ví von, ngôn ngữ HTML được nói theo tiếng địa phương. Đó là lý do các trang web hiển thị khác nhau trên các trình duyệt.
Đã có những nổ lực tạo ra các tiêu chuẩn thông dụng cho ngôn ngữ HTML theo quy định của tổ chức World Wide Web Consortium (W3C) được thành lập bởi Tim Berners-Lee (người sáng tạo ra ngôn ngữ HTML). Nhưng con đường để đi đến thống nhất cũng lắm gian nan.
Vào thời gian trước đây, khi các trình duyệt là món hàng còn được bán, Netscape là trình duyệt thống trị. Ngày đó, tiêu chuẩn web được ủng hộ nhiều nhất được gọi là Web 2.0 hay 3.2. Mặc dù vậy, với thị phần chiếm 90% Netscape đã không tuân thủ và cũng chẳng quan tâm đến các tiêu chuẩn thông thường. Ngược lại,Netscape còn tự thêm vào các phần tử lạ mà các trình duyệt khác không hỗ trợ.
Trong những năm xa xưa, Microsoft hầu như chẳng tham gia vào lĩnh vực Internet. Sau này, khi họ nhảy vào và trở thành đối thủ cạnh tranh của Netscape cùng với việc ra mắt một trình duyệt riêng. Phiên bản trình duyệt đầu tiên của Microsoft, Internet Explorer, cũng không khá hơn Netscape về khoản tuân thủ tiêu chuẩn thông thường HTML. Nhưng Microsoft chọn cách tặng miễn phí trình duyệt và nhanh chóng Internet Explorer chiếm lĩnh ngôi đầu, trở thành trình duyệt thông dụng nhất thời bấy giờ.
Bắt đầu ở phiên bản 4 và 5, Microsoft nhắm đến hỗ trợ thêm các tiêu chuẩn HTML W3C. Trong khi đó, Netscapekhông có ý định phát triển thêm phiên bản mới cho trình duyệt của mình mà vẫn tiếp tục phân phối phiên bản lỗi thời 4.0.
Tất cả đã trở thành lịch sử. Tiêu chuẩn HTML được gọi là 4.01 (HTML 4) và XHTML 1.1 được thống nhất vào năm 1997. Các trình duyệt hiện đại với các phiên bản mới nhất ngày nay như Chrome, Internet Explorer, Safari đều hỗ trợ chuẩn cũ HTML 4 và chuẩn mới nhất HTML5 mới được hoàn thành vào tháng 10/2014 sau nhiều lần cập nhật.
Đây cũng là phiên bản được hỗ trợ trên các trình duyệt của các thiết bị di động.
Do vậy, khi bạn viết code HTML theo chuẩn W3C, website của bạn sẽ hiển thị tốt trên mọi trình duyệt ngay thời điểm này và cả trong tương lai. Những gì bạn được học cũng theo chuẩn này, những tiêu chuẩn của XHTML.

Khai báo cho trình duyệt phiên bản chuẩn HTML đang sử dụng

Do có nhiều loại HTML, nên bạn cần khai báo cho trình duyệt bạn đang sử dụng loại HTML nào, trong trường hợp này, bạn đang áp dụng theo tiêu chuẩn XHTML. Do vậy bạn phải sử dụng  Document Type Declaration (DTD – khai báo loại tài liệu), Document Type Declaration phải luôn được viết ở dòng đầu tiên của trang.
Ví dụ 1:
    

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    2. 

  2.  
    3. 

  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
    4. 

  4.  
    5. 

  5. <head> 
    6. 

  6. <title>Title</title> 
    7. 

  7. </head> 
    8. 

  8.  
    9. 

  9. <body> 
    10. 

  10. <p>text text</p> 
    11. 

  11. </body> 
    12. 

  12.  
    13. 

  13. </html>
    14.
Lưu ý: Đối với HTML5 chỉ có 1 loại khai báo là <!DOCTYPE html>, HTML 4.01, XHTML 1.01 có 3 kiểu khai báo: là Strict, Transitional và  Frameset. Bạn nên tìm đọc về các bài về Document Type Declaration để tìm hiểu thêm.
Bên cạnh Document Type Declaration, để khai báo vời trình duyệt cách viết XHTML, bạn cần phải thêm vài thông tin trong thẻ html với 2 thuộc tính  xmlns và lang.
xmlns là chữ viết tắt của “XML-Name-Space” và luôn có giá trị là http://www.w3.org/1999/xhtml. bạn có thể tìm hiểu thêm về namespace ở website W3C nếu cần thiết.
Đối với thuộc tính lang bạn cần phải thêm thông tin ngôn ngữ trên trang bạn đang viết. Mã quốc gia được viết theo theo tiêu chuẩn ISO 639. Thí dụ nếu trang bạn sử dụng tiếng Việt, mã quốc gia sẽ là “vi”
Sử dụng DTD sẽ giúp trình duyệt biết chính xác cách viết HTML và hiển thị chính xác trang Web của bạn. DTD cũng là yếu tố quyết định khi bạn xác nhận với W3C

Xác nhận? Tại sao tôi phải cần nó?

Khi thêm DTD vào các trang bạn có thể luôn kiểm tra các trang HTML của mình có sai chuẩn W3C hay không
Để kiểm tra, bạn chỉ cần tải trang Web lên internet. Sau đó đến tang validator.w3.org và gõ địa chỉ trang web (URL) của mình vào và xác nhận. Nếu trang HTML của bạn đúng chuẩn, bạn sẽ thấy một thông đệp chúc mừng. Ngược lại, bạn sẽ nhận được một bản báo cáo về các lỗi mắc phải.
Dùng phương pháp xác nhận không chỉ giúp bạn biết vị trí lỗi. Một vài trình duyệt sẽ tự động sửa lỗi HTML. Do đó bạn sẽ không nhìn thấy các lỗi xuất hiện trên trình duyệt. Tuy nhiên, không phải lúc nào trình duyệt cũng tự động sửa đúng như ý bạn muốn. Phương pháp xác nhận sẽ giúp bạn tìm thấy những lỗi mà bạn không hề hay biết. Tập thói quen luôn kiểm tra trang HTML của bạn bằng cách này sẽ giúp bạn có những trang Web luôn hiển thị tốt trên mọi trình duyệt.
Bài cuối

Unknown11:20:00 PM

Học HTML cơ bản -Bài 13

Tag :

Bài 13: Tải trang web lên internet


Nếu bạn đã hoàn thành một website nhỏ cho mình qua các bài đã học, đây là lúc bạn nên tải nó lên internet để mọi người cùng xem.

Tôi phải cần chuẩn bị những gì?

Trước hết, bạn cần có một nơi lưu trữ trên internet (hosting) và một chương trình FTP.
Ở  khuôn khổ đang trong quá trình học, bạn có thể đăng ký một số dịch vụ hosting miễn phí, ví dụ như http://www.000webhost.com/, bạn có thể đăng ký  miễn phí. Sau khi đăng ký bạn sẽ nhận email kích hoạt, được thông tin địa chỉ trang Web tương lai của bạn sẽ được tải lên ví dụ như http://baitapwebsite.site90.com và thông tin máy chủ cùng với tên đăng nhập và mật khẩu. Bên dưới là một bảng quản trị hosting (hosting control panel) tại http://www.000webhost.com sau khi bạn kích hoạt đăng ký thành công. Tất cả thông tin cần có cho việc tải web lên máy chủ nằm trong khung màu đỏ.

Bạn còn cần thêm gì nữa?

Để truy cập vào máy chủ và tải trang Web của lên, bạn cần một chương trình FTP. FTP là chữ viết tắt của File Transfer Protocol (Nghi thức chuyển tập tin). Chương trình FTP dùng để kết nối máy tính hai máy tính thông qua mạng Internet và giúp chuyển các tập tin từ máy tính này sang máy tính khác (máy chủ). Có rất nhiều chương trình FTP trả tiền, tuy nhiên có một chương trình FTP miễn phí khá tốt đó là FileZillabạn có thể tải xuống tại địa chỉ filezilla.sourceforge.net.

Tải trang web lên máy chủ như thế nào?

Những mô tả dưới đây sẽ hướng dẫn cho bạn cách tải trang Web lên dịch vụ hosting miễn phí  000webhost.com bằng FileZilla. Dĩ nhiên mỗi máy chủ và chương trình FTP khác sẽ không giống hoàn toàn nhưng về nguyên tắc chung bạn vẫn có thể áp dụng.
Nếu bạn có bất kỳ câu hỏi nào về cách sử dụng chương trình Filezilla xin đặt câu hỏi ở đây
Bạn hãy mở chương trình FTP và điền đầy đủ các phần Host Name (ví dụ address: ftp.baitapwebsite.site90.net), tên đăng nhập – username, mật khẩu – password và nhấp chuột vào “Connect”. Bây giờ bạn đã kết nối vào máy chủ. Trong cửa sổ chương trình bạn sẽ thấy một bên trái sẽ là máy tính của bạn (Local site) và bên phải sẽ là máy chủ (Remote site)
Tìm nơi lưu các tập tin HTML và hình ảnh trên máy tính của bạn (Local site) và chuyển chúng lên máy chủ (Remote site) bằng cách kéo thả qua cửa sổ bên phải hoặc nhấp chuột hai lần (double-click) lên tập tin.
Theo mặc định các tập tin có tên index.htm hoặc (index.html, default.htm) sẽ là trang chủ. Do đó nếu bạn muốn trang Web nào được ấn định làm trang chủ hãy đặt tên cho nó là index.htm. Khi bạn xem địa chỉ trang web, ví dụ như http://baitapwebsite.site90.net có nghĩa là bạn đang xem http://baitapwebsite.site90.net/index.htm
Sau này, khi đã có thể trở thành một nhà thiết kế web chuyên nghiệp, bạn có thể sẽ quan tâm đến các tên miền (domain) riêng cho mình, bạn có thể đặt mua tại các dịch vụ bán tên miền như goddady.com, namecheap.com hay name.com. Kết thúc phần này xem như bạn đã có khái niệm cơ bản về thiết kế web bằng HTML, bạn cần thực hành nhiều hơn nữa để nắm rõ các kỹ thuật cơ bản. Chúng ta sẽ xem tiếp bài kế tiếp về cách xác định tập tin HTML theo chuẩn để website có thể hiển thị tốt nhất trên mọi trình duyệt.

Ý kiến của bạn

Unknown11:17:00 PM

Học HTML cơ bản-Bài 12

Tag :

Bài 12: Dàn trang – Layout (CSS)

Chắc chắn khi nói đến thiết kế website, là phải nói đến công đoạn dàn trang (layout), dàn trang là cách bạn sắp xếp, bố trí các phần tử của web như hình ảnh, chữ, tiêu đề … theo ý tưởng của mình.

Tôi phải thực hiện như thế nào?

Để thực hiện công việc web layout bạn có thể sử dụng Cascading Style Sheets (CSS). Trong bài học này, bạn sẽ được giới thiệu khái quát về CSS. Tuy nhiên bạn có thể học CSS từ cơ bản ở một phần hướng dẫn khác cũng tại website của chúng tôi. Vì vậy hãy xem đây là một lời giới thiệu ngắn gọn để bạn làm quen với CSS.
CSS là một người bạn song hành cùng với HTML. Trong việc viết code bạn có thể xem như: HTML chịu trách nhiệm phần xây dựng cơ bản (cấu trúc khung sườn), trong khi đó CSS sẽ phụ trách phần trang trí (layout).
Như bạn đã được hướng dẫn trong bài số 7, CSS có thể được thêm các thuộc tính. Ví dụ: bạn có thể xác định kích cỡ chữ và loại font
Ví dụ 1:
    

  1. <p style="font-size:20px;">This is typed in size 20px</p> 
    2. 

  2.  
    3. 

  3. <p style="font-family:courier;">This is typed in Courier</p> 
    4. 

  4.  
    5. 

  5. <p style="font-size:20px; font-family:courier;">This is typed in Courier size 20px</p>
    6.
Thực tế trên trình duyệt như sau:
This is typed in size 20px
This is typed in Courier
This is typed in Courier size 20px
Trong ví dụ trên, chúng tôi sử dụng thuộc tính  style để xác định loại font chữ được sử dụng ( font-family) và kích cỡ font chữ  (font-size). Chú ý, ở đoạn văn thứ 3, chúng tôi sử dụng dấu ; để phân biệt 2 thuộc tính : loại font chữ ( font-family) và kích cỡ font chữ (font-size).

Vậy phải mất rất nhiều thời gian?

Một trong những chức năng thông minh của CSS là quản lý layout của bạn từ theo phương pháp trung tâm. Thay vì sử dụng thuộc tính style ở mỗi thẻ, bạn có thể khai báo layout cả trang Web cho trình duyệt:
Ví dụ 2:
    

  1. <html> 
    2. 

  2.  
    3. 

  3. <head> 
    4. 

  4.  
    5. 

  5. <title>My first CSS page</title> 
    6. 

  6.  
    7. 

  7. <style type="text/css"> 
    8. 

  8. h1 {font-size: 30px; font-family: arial;} 
    9. 

  9. h2 {font-size: 15px; font-family: courier;} 
    10. 

  10. p {font-size: 8px; font-family: "times new roman";} 
    11. 

  11. </style> 
    12. 

  12. </head> 
    13. 

  13.  
    14. 

  14. <body> 
    15. 

  15.  
    16. 

  16. <h1>My first CSS page</h1> 
    17. 

  17. <h2>Welcome to my first CSS page</h2> 
    18. 

  18. <p>Here you can see how CSS works </p> 
    19. 

  19.  
    20. 

  20. </body> 
    21. 

  21.  
    22. 

  22. </html>
    23.
Ở ví dụ trên, CSS được chèn vào phần head và áp dụng cho toàn trang Web. Để thực hiện điều đó bạn chỉ cần sử dụng thẻ <style type="text/css"> để khai báo với trình duyệt bạn đang viết code CSS.
Ở ví dụ trên, các tiêu đề của trang sẽ dử dụng đồng nhất font chữ Arial với kích cỡ 30px, còn phụ đề sẽ áp dụng  font chữ Courier, kích cỡ 15px và toàn bộ các đoạn chữ sẽ sử dụng loại font Times New Roman, kích cỡ 8px.
Một lựa chọn khác để sử dụng CSS với HTML là sử dụng tập tin rời bên ngoài. Với cách sử dụng tập tin rời, bạn có thể kiểm soát layout của hàng loạt trang Web cùng một lúc. Đây là một lựa chọn thông minh nếu bạn muốn thay đổi font chữ hoặc kích thước của một website lớn có hàng ngàn trang. Chúng ta sẽ học điều đó ở các bàihọc cơ bản CSS.

CSS còn có những chức năng gì?

CSS còn có có nhiều chức năng ngoài việc định dạng loại font và kích cỡ chữ. Ví dụ bạn có thể thêm màu sắc và nền. Đây là một vài ví dụ khác:
    

  1. <body style="background-image: url('http://thietke.website/tkws_logo.png');"> 
    2. 

  2.  
    3. 

  3. <h1 style="background-color: blue;">Heading on blue background</h1> 
    4. 

  4.  
    5. 

  5. <p style="color:green;">Green text</p> 
    6. 

  6. </body>
    7.
Hãy thực hành những gì bạn vừa học bằng cách thêm CSS vào thẻ HTML hoặc tạo CSS trong phần head của HTML.

Ngoài font chữ, kích cỡ chữ, màu sắc và nền, CSS còn có những gì?

Ngoài những gì bạn đã biết ở trên, CSS còn có thể được sử dụng để kiểm soát, thiết lập và trình bày trang HTML (như lề – margins, phần tử trôi nổi – float, so hàng – alignment, chiều rộng – width, chiều cao – height ).
Xác định các phần tử khác nhau bằng CSS bạn có thể bố trí các trang Web của bạn một cách trang nhã và chính xác.
Ví dụ 3:
    

  1. <p style="padding:25px;border:1px solid red;">I love CSS</p>
    2.
Bạn sẽ nhìn thấy như bên dưới nếu xem ở trình duyệt:
I love CSS
Với thuộc tính float có thể trôi nổi dạt qua trái hoặc phải. Ví dụ sau sẽ cho bạn hình dung như thế nào:
Ví dụ 4:
    

  1. <img style="float: left;" src="http://thietke.website/tkws_logo.png" alt="TKWS logo" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...
    2.
Xem trên trình duyệt:
TKWS logoLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat…
Ở ví dụ trên bạn nhận thấy đoạn chữ đã chừa ra một khoảng trống bên trái để cho vị trí của hình ảnh.
Với thuộc tính position, bạn có thể đặt một phần tử ở bất cứ nơi nào mình muốn trên trang một cách chính xác:
Ví dụ 6:
    

  1. <img src="http://thietke.website/tkws_logo.png" alt="TKWS logo" style="position:absolute;bottom:50px;right:10px;" />
    2.
Ví dụ trên, hình ảnh được đặt ở ví trí cách đáy màn hình 50 pixels, và cách lề phải 10 pixels, dĩ nhiên bạn có thể đặt ở bất cứ vị trí nào mình muốn.

Thật tuyệt, nhưng thực hiện có dễ dàng không?

Bạn không thể học CSS trong 10 phút. Và như chúng tôi đã nói ở trên, đây chỉ là bài giới thiệu khái quát, nếu bạn muốn học CSS, bạn có thể xem bài hướng dẫn học CSS cơ bản sau này.
Còn bây giờ, bạn hãy tập trung vào học code HTML và tiếp tục xem tiếp các bài mới trong trang kế tiếp để học cách làm thế nào để tải website đầu tiên của bạn lên internet.
------------------------------------------------------------------------------------------------------------

Unknown11:15:00 PM

Subscribe to: Posts (Atom)

 

Tôi Là BMT

Tôi rất thích học lập trình và mong muốn trở thành lập trình viên chuyên nghiệp .