tuan11nguyen
Thành viên gắn bó 0988485689 
Ghi danh : 10/08/2016
Bài viết : 117
Xu : 29988
Được thích : 9
Ý thức : Tốt
Giới tính : 
Tuổi : 34
Đến từ : Tuoitrevn.NET
Lập trình web là 1 công tác lý thú và hấp dẫn đối mang Cả nhà trẻ. ngoài ra việc học lập trình web không phải đơn thuần. xin trân trọng giới thiệu 10 bài học hữu dụng nhất, thực hiện nhất sở hữu hi vọng là Cả nhà sẽ tậu ra một lối đi đơn thuần nhất để trở nên chuyên gia lập trình web.
Bài 1: những khái niệm và công cụ
mục tiêu của bài học này là giúp Cả nhà tính từ lúc số ko, nhắc cả những bạn chưa biết gì về lập trình web cũng sở hữu thể hiểu được và dần dần trở nên một coder giỏi. thành ra nếu như bạn nào đã học qua lập trình web và biết về những dụng cụ ngoại hình, tăng trưởng web thì sở hữu thể bỏ qua bài viết này. ngoài ra tôi khuyên Cả nhà nên đọc lướt qua để chúng ta sở hữu những đồng nhất về khái niệm, khái niệm cũng như những dụng cụ thực hiện để sau này tiện dụng theo sát những tỉ dụ trong các bài học tiếp sau. Bài học gồm 3 phần, phần 1 là các định nghĩa, phần 2 giới thiệu các công cụ mà bạn cần có trên máy tính của mình để thực hành và phần 3 sẽ chỉ dẫn bạn khiến 1 trang web đầu tiên.
khiến quen có các ngôn ngữ lập trình khác tại đây: https://vietpro.net.vn/hoc-ajax
Các khái niệm
Website hoạt động như thế nào?
Hãy hình dong khi bạn định vào 1 trang web nào chậm tiến độ, bạn cần có 1 máy tính có 1 phần mềm được gọi là browser mà Anh chị hay dùng như firefox, chrome trên hệ điều hành windows hay safari trên nền móng apple. ở mỗi browser này sẽ có 1 cái gọi là URL, bạn gõ tên website vào URL chậm tiến độ rồi enter, thế là trang web hiện ra. Vậy các gì diễn ra sau khi bạn enter ở cuối cái URL? có đa số điều xảy ra đầu tiên là Browser phải thiết lập kết nối đến máy chủ cất trang web chậm tiến độ, sau chậm tiến độ nó cho máy chủ biết tên trang web mà nó cần đọc dựa trên URL mà bạn gõ vào. Máy chủ sẽ gửi đến browser 1 trang web có 2 thành phần 1 là NỘI DUNG và 2 là mã HTLM. Browser căn cứ vào mã HTML để biểu đạt 1 trang web như cái mà bạn nhận ra trên màn hình, trong chậm tiến độ mã HTML quy định chỗ nào thì mầu xanh, chỗ nào thì mầu đỏ, chỗ nào chữ lớn, chỗ nào chữ nhỏ, chỗ nào có ảnh, chỗ nào có video, chỗ nào có link đến 1 trang web khác.... chậm tiến độ chính là đầu đuôi cho tên gọi HTML nghĩa là Hyper Text Marker Language (Ngôn ngữ đánh dấu siêu văn bản).
ngôn ngữ HTML khiến việc như thế nào?
khi chậm tiến độ giả dụ máy chủ web gửi về browser 1 trang web mà có cái như trên thì browser sẽ hiển thị như sau:
cố nhiên browser sẽ chẳng hiển thị thẻ đóng thẻ mở ra khiến gì vì người thăm viếng website đâu cần để ý đến các thẻ, họ chỉ để ý đến nội dung và bí quyết biểu đạt nội dung chậm tiến độ mà thôi. Tóm lại 1 trang web do máy chủ gửi đến máy tính của người đọc sẽ có 2 thành phần, 1 là NỘI DUNG, là cái mà người đọc nhận ra và 2 là MÃ HTML mà browser có thể hiểu để biểu đạt NỘI DUNG cho đúng ý của người lập trình web. đến đây chắc Anh chị đã hiểu là công tác của 1 người lập trình web là gì. công tác chậm tiến độ là tạo ra các trang web có các mã HTML đúng chỗ, đúng khi, còn công tác của 1 người quản trị website là nhập các nội dung cần hiển thị. 2 công tác tách bạch rất rõ. Bạn muốn khiến công tác nào? giả dụ muốn khiến công tác lập trình web, hãy đọc tiếp. Còn giả dụ muốn phát triển thành 1 người quản trị web chuyên nghiệp, hãy dành thời gian đọc seri bài viết khác nhé.
PHP là gì?
ban đầu khi web mới có mặt trên thị trường những chuyên gia lập trình web tiêu dùng một mẫu code thuần là HTML. lúc ngừng thi côngĐây thực ra chưa với khái niệm chuyên viên lập trình web mà thực ra là khái niệm viên chức viết trang web. một chuyên gia web sẽ vừa phải nhập nội dung sau ngừng thi côngĐây gắn những mã thẻ HTML cho đúng ý của chủ trang web. Và lúc ngừng thi côngĐây những trang web trên mạng đều là website tĩnh vì nội dung với code gắn cứng với nhau. Mỗi lần muốn thay đổi lại phải gọi chuyên gia viết web tới chỉnh sửa tuy nhiên lúc website vững mạnh lên, nôi dung web tăng nhanh và thay đổi hàng ngày, và lượng những chuyên gia viết web không phù hợp nổi nhu cầu viết những trang web tĩnh nữa. lúc này người ta mới phát minh ra những tiếng nói trung gian khác với nhiệm vụ là tự sinh ra những đoạn code HTML để sẵn ngừng thi côngĐây, sau rồi mới nhập nội dung vào. từ ngừng thi côngĐây phân công lao động rõ ràng, chuyên gia lập trình thì ngồi viết những chương trình sinh web bằng những tiếng nói khó hơn như PHP, ASP, Java.... đề tạo ra những trang web "trống" sau ngừng thi côngĐây chuyên gia nhập dữ liệu website thì bằng một phương tiện nào ngừng thi côngĐây, đưa những nội dung thô vào những trang web trên, phối hợp lại sẽ với một trang web mà nay thế này, mai thế khác tùy theo người nhập nội dung quyết định. từ ngừng thi côngĐây khái niệm web động xây dựng thương hiệu. Và tới bây giờ 90% những trang web trên mạng là động. ví dụ tiêu biểu nhất là trang tin tức, với trang tin này bạn sẽ thấy nó thay đổi hàng giờ, ngừng thi côngĐây là do nhóm nhập tin bài, còn nhóm viết code cho trang web ngừng thi côngĐây thì ngồi ở hậu trường xử lý những vấn đề kỹ thuật.
tương tự chúng ta trợ thì hiểu PHP là một tiếng nói lập trình tiêu dùng để sinh ra những trang web với code HTML. Vậy PHP nằm ở đâu? và nó làm cho việc như thế nào? Xin thưa, PHP làm cho việc theo cơ chế nhúng. với tức thị với một trang web tĩnh bất kỳ, ví như bạn muốn phần nào là động thì chỉ việc chèn vào ngừng thi côngĐây đoạn code PHP đặt trong hai ký hiệu script như hình vẽ sau:
Lưu ý là PHP ko làm cho việc ở phía browser, mà làm cho việc ở trên máy chủ. Trên mỗi máy chủ tương trợ PHP sẽ với một tiến trình nền miệt mài đọc những trang web do chuyên viên lập trình web để trên ngừng thi côngĐây, ví như nó thấy là một trang web tĩnh, chỉ bao gồm mã HML, nó sẽ thuần tuý là chuyển trang web ngừng thi côngĐây tới browser yêu cầu trang web là xong nhiệm vụ. Nhưng ví như nó bắt gặp một trang web với cả mã nhúng PHP, nó sẽ phải làm cho thêm một thời kỳ là đọc xem đoạn PHP ngừng thi côngĐây nói gì, từ ngừng thi côngĐây sinh ra một đoạn mã HTML theo đúng ý của đoạn mã PHP hay nói đúng hơn là theo ý của người lập trình PHP, và chèn trái lại vào trang web ngừng thi côngĐây trước lúc gửi trang web tới với browser. tất nhiên đã mẫu bỏ hết mã PHP rồi, vì browser ko hiểu được PHP nói gì.
MySQL là gì?
lúc nội dung đã được động hóa qua cơ chế làm cho việc của PHP nêu trên, chúng sẽ ko nằm trong trang web mà nằm ở một chỗ trung gian, được đánh số và quản lý nghiêm nhặt. Chỗ ngừng thi côngĐây gọi là hạ tầng dữ liệu. với số đông hệ quản trị hạ tầng dữ liệu như SQL, MySQL, Oracle... và đều với thể làm cho việc với website, tuy nhiên PHP rất khoái MySQL vì cả hai đều là sản phẩm của mã nguồn mở, rất dễ tiêu dùng và quan yếu nhất là miễn phí.
Hãy tưởng tượng vai trò của của hạ tầng dữ liệu như sau. Trong một lớp với 40 học trò, mỗi học trò được đánh số từ một tới 40 và danh sách này nằm trong cặp của thày giáo, danh sách ngừng thi côngĐây chính là hạ tầng dữ liệu. những học trò là NỘI DUNG, còn thày giáo là PHP. lúc thầy muốn một bạn nào ngừng thi côngĐây lên bảng làm cho bài thày chỉ cần mở danh sách và gọi theo số, bạn ngừng thi côngĐây sẽ xuất hiện trên bục giảng, bục giảng chính là trang web mà máy chủ gửi tới cho browser là chúng ta, những thanh tra của sở giáo dục tới dự giờ.
Khó hiểu ko những bạn? Ok tôi sẽ lấy ví dụ sắp với web hơn, ngừng thi côngĐây là trang tin tức VNexpress. Trang này với một vị trí rất đắc địa là home page và chỉ tiêu dùng để đưa những tin nóng nhất. lúc 9h bạn mở ra thấy với tin về cơn bão Haiyen. tới 10h mở ra, chỗ ngừng thi côngĐây đã bị thay bằng tin về họp quốc hội. Vậy cơn bão Haiyen hay họp quốc hội là những nội dung, dạng text hoặc hình ảnh. Nó sẽ được lưu ở trong hạ tầng dữ liệu còn trang web VNexpress vững chắc sẽ với một đoạn mã nhúng PHP hay ASP gì ngừng thi côngĐây, đoạn mã này với nhiệm vụ lấy những nội dung mà nó cho là nóng nhất trong hạ tầng dữ liệu đưa lên thể hiện ở trang web vnexpress và gửi tới browser ví như với yêu cầu.
Vẫn khó hiểu ư? OK, ví như vậy ko cần hiểu nữa. không cần hiểu kỹ về MySQL bạn vẫn có thể khiến được web. chỉ cần hình dung thế này. MySQL là 1 chỗ nào chậm tiến độ để tống được các nội dung A, B, C vào chậm tiến độ và để PHP thích thì lôi thằng A, hay thằng B, hay thằng C ra đặt vào trang web và gửi về cho các bạn đọc.
Đánh giá về tài liệu học lập trình online
Các công cụ cần thiết
OK now! giả dụ bạn nào đọc xong phần trên mà vẫn còn máu nóng, chúng ta có thể đi tiếp phần sau đây. Còn giả dụ bạn nào thấy choáng quá thì nên đi ngủ, mai sau đọc lại đoạn trên thấy dễ tiêu hơn, ngày kia đọc tiếp cho nó tiêu hẳn rồi hãy đọc tiếp phần này bởi vì. Lý thuyết giúp soi con đường cho thực tại. giả dụ đã thấm nhuần các định nghĩa bên trên thì mới biết mua các công cụ gì để thực hành.
Để hoàn tất 10 bài học này, bạn cần chuẩn bị 1 máy tính cấu hình vừa phải, trên chậm tiến độ cài win7 hoặc windows XP là ổn sau chậm tiến độ bạn download các phần mềm dưới đây và cài lên máy của mình. Mục đích là gì: đầu tiên để biến máy của bạn thành 1 webserver, để bạn vừa đá bóng vừa thổi còi. nghĩa là browser và web server cộng ở 1 chỗ, khi chậm tiến độ sẽ dễ dàng cho bạn viết web tĩnh hay động đều có thể test tại chỗ được.
Mục đích thứ 2 là biến webserver của bạn thành 1 máy chủ web hỗ trợ PHP và có sẵn hệ quản trị cơ sở dữ liệu MySQL để thực hành web động. Mục đích 1 và 2 được giải quyết bằng Wamp server
Mục đích thứ 3 là để có 1 công cụ có thể biên soạn thảo các trang web tĩnh cũng như động 1 bí quyết tha hồ, cộng cụ này có tên là Dreamwaver.
Mục đích thứ 4: là có 1 bàn điểm trang cho các ảnh trước khi đưa lên website. Vấn đề về ảnh tuy đơn giản nhưng giả dụ bạn coi thường nó, bạn sẽ gặp đông đảo rắc rối về sau. 2 nữa là bạn cần tập lề thói chỉn chu, kiên nhẫn khi xử lý ảnh thì mới có thể tạo ra các website vừa mắt được. Để xử lý ảnh giả dụ bạn nào có Win 7 rồi thì có thể dùng Paint sẵn có trong win 7, còn giả dụ bạn nào dùng XP thì nên download thêm 1 bản Pickpick dùng có đông đảo tính năng bổ ích.
Dưới đây là link để down load và chỉ dẫn cài đặt các phần mềm này. Lưu ý là các phần mềm này đều có nhiều bản update liên tiếp ra, bên cạnh đó để demo tôi dùng các phiên bản hơi cũ, vì nó chạy ổn định, ít hoa mắt, phù hợp có Anh chị mới nhập môn. Bạn nào đã từng dùng các công cụ này thành thạo rồi thì cứ tùy ý dùng các phiên bản mới nhất mà mình thấy phù hợp là được.
Đoạn code đầu tiên
Nào, bây giờ sau khi cài đặt xogn các công cụ trên, chúng ta sẽ bắt tay vào viết 1 trang web đầu tiên. Hãy mở Dreamwaver ra, chọn New File (Ctrl-N) rồi chọn kiểu file là HTML, sau chậm tiến độ bấm creat. Bạn sẽ thấy khung biên soạn thảo của Dreamwaver, có 1 số code HTML đặt sẵn, bạn sửa file chậm tiến độ như sau:
Sau chậm tiến độ Anh chị save file đề cập trên có tên gọi my-first-webpage.html và để ngay trên destop cũng được, sau chậm tiến độ đóng dreamwave lại và mua file chậm tiến độ trên desktop, double-click vào nó, bạn sẽ thấy firefox mở file này ra và xuất hiện cái chữ "Xin chào, đây là đoạn code HTML đầu tiên của tôi" giả dụ nó không khiến việc Anh chị có thể download file này về để so sánh và Đánh giá căn do tại sao.
Giải thích:
Trong file trên chúng ta thấy các thẻ mở và đóng html, head, body. Thẻ html cho biết đây là 1 file được đánh dấu bằng các thẻ html. Thẻ head cho biết đây là phần đầu file, các thông báo ở đầu file đa số là không hiển thị trong browser, mà có tác dụng cho việc khai báo các thông báo của trang, các scrip hoặc css. Lưu ý các thông báo ở trong thẻ mở và thẻ đóng head có tác dụng đa số cho việc SEO sau này. bởi thế đừng nên coi thường và bỏ qua nó. thí dụ thông báo giữa 2 thẻ mở và đóng title sẽ hiển thị trong browser cho biết tiêu đề trang web là gì và Google rất coi trọng thông báo này. Còn thẻ body cho browser biết bắt đầu từ đây là nội dung chính của trang web.
bên cạnh đó chúng ta thấy thẻ meta không có thẻ mở và đóng như thông lệ. có đa số thẻ thuộc dạng này được gọi là thẻ tự đóng vì thuộc tính hiển thị của nó.
Trong bài 1, chúng ta đã khiến quen có các định nghĩa của web tĩnh, web động. cùng lúc chúng ta đã khiến quen có các công cụ biên soạn thảo và thể nghiệm trang web. Phần 2 này chúng ta tiếp diễn có việc đào sâu vào ngôn ngữ HTML có chỉ tiêu là có thể viết được 1 trang web tĩnh hoàn chỉnh.
Bài 2: các thẻ html thông dụng
Để nghiên cứu thấu đáo về HTML chúng ta cần đa số thời gian vì HTML có khoảng vài trăm thẻ khác nhau. Và các thẻ được phân cái ra thành các thẻ thuộc đội ngũ biểu đạt, đội ngũ bố cục, đội ngũ form... rất khó nhớ. bởi thế bạn nào muốn Đánh giá kỹ về html thì qua trang . Còn trong bài học này chúng tôi sẽ giới thiệu 1 số thẻ thông dụng nhất.
bên cạnh đó đầu tiên chúng ta cũng cần phải biết bí quyết dùng và 1 số quy ước sau đây:
Dưới đây là hình ảnh minh họa về bí quyết dùng thẻ. Chúng ta không cần đi vào chi tiết, mà chỉ xem qua cấu trúc, còn chi tiết vai trò từng thẻ như thế nào sẽ Đánh giá ở phần bài tập
Dưới đây là danh sách các thẻ thông dụng mà Anh chị cần mua hiểu:
Bố cục trang có thẻ table
1 trang web đẹp hay xấu phụ thuộc đa dạng vào bố cục có cân đối hay không. Đây là 1 bài toán khó đối có ngôn ngữ HTML bởi vì nó được có mặt trên thị trường dựa trên bắt buộc biểu đạt văn bản rất khô khan. ban đầu các chuyên gia viết trang web chỉ dùng thẻ table để bố cục các trang web, có thẻ này chúng ta có thể tạo ra được các trang web có bố cục hàng cột đan xen và có các tỉ lệ khác nhau. Sau này khi CSS lớn mạnh, người ta dùng thẻ div thay thế cho table và cùng lúc còn dùng đa dạng công nghệ khác như flash Jquery, map... để khiến trang web sinh động hơn về mặt bố cục. Trong khuôn khổ bài này chúng ta sẽ dùng table để đáp ứng 1 trang web có bố cục như hình vẽ sau
Để khiến bố cục cho website chúng ta cần 1 cái thước kẻ, hãy đặt cái thước kẻ nằm ngang rồi kéo trong khoảng trên xuống, các chỗ giao nhau của các phần, lấy bút chì kẻ 1 các con phố ngang. tiếp diễn, đặt thước kẻ nằm dọc rồi kéo trong khoảng trái qua phải, các chỗ giao nhau của các phần, kẻ 1 các con phố dọc bạn sẽ thấy trang web trên được chia ra khiến 5 ô: banner, menu, nội dung chính, các kết liên và footer. công tác này được gọi là cut HTML, và nó hoàn toàn được tự động hóa giả dụ bạn dùng photoshop. bên cạnh đó trong bài thực hành này chúng ta sẽ khiến bằng tay để hiểu rõ các bước bề ngoài, bố cục 1 website như thế nào. có các các con phố kẻ như trên chúng ta sẽ hình dong ngay được website này có bố cục là 1 bảng gồm 4 cái và 2 cột, cái banner, cái menu và cái footer chỉ có 1 cột, riêng cái ở giữa có 2 cột, bởi thế phải dùng 1 thuộc tính của thẻ td là colspan (gần giống như merge của excel hay word), Và bề ngoài trang này có dạng như sau:
(bảng)
(dòng 1)
(cột 1 - dùng colspan = 2 ) Banner (kết thúc cột 1)
(kết thúc cái 1)
(dòng 2)
(cột 1 - dùng colspan = 2 ) menu (kết thúc cột 1)
(kết thúc cái 2)
(dòng 3)
(cột 1 ) Nội dung chính (kết thúc cột 1)
(cột 2 ) các kết liên (kết thúc cột2)
(kết thúc cái 3)
(dòng 4)
(cột 1 - dùng colspan = 2 ) Footer (kết thúc cột 1)
(kết thúc cái 4)
(kết thúc bảng)
Ở trên là bí quyết diễn giải nôm na cho dễ hiểu về bí quyết bố trí bảng bằng các thẻ đóng và thẻ mở HTML, khi vào vun đắp trang HTML đích thực chúng ta sẽ thay các chữ trong ngoắc bằng các thẻ HTML đích thực và sẽ thấy hiệu quả. chậm tiến độ chính là nội dung bài tập dưới đây
Bài tập
Bài tập của chúng ta là hãy viết 1 trang web HTML giống hệt như hình vẽ ở phần trên. công cụ và bí quyết khiến như sau:
1- Anh chị vào link này để nhìn kết quả trước:
2- Click vào banner và chọn "save image as..." để lưu ảnh banner về, có thể đặt tên là gì tùy ý vào
3- như vậy click vào ảnh bé gái và save image as về máy của mình.
3- Chạy wamp server (đã chỉ dẫn download và cài đặt ở bài 1). Lưu ý là có web tĩnh chúng ta có thể không cần wamp server vẫn test được kết quả, bên cạnh đó đây là khi chúng ta thử wamp. Sau khi chạy wamp, chúng ta mở fire fox và gõ url sau: giả dụ thấy xuất hiện trang quản trị wamp server là ok, trong trang này có cả các tool phpmyadmin và tool phpinfo mà bạn rất cần sau này.
4- Tạo 1 thư mục trong C:wampwww đây chính là thư mục root của wamp server. khi bạn gõ thì server sẽ đọc các file HTML trong thư mục này để trả về cho fire fox hiển thị.
5- dùng Dreamwave để tạo trang HTML. Lưu ý Anh chị nên Đánh giá việc tạo ra 1 project trong Dreamwave để điều hành các file trong các bài tập trong khoảng nay về sau và trỏ thư mục của project này về thư mục tạo ở bước 4. bí quyết tạo 1 project trong dreamwave như thế nào thì hơi dài dòng, Anh chị search google hoặc giả dụ cần thì contact có để được hỗ trợ.
6. bắt đầu tạo trang HTML. Chúng tôi khuyến khích Anh chị code trong khoảng đầu, dựa trên gợi ý ở mục trên "Bố cục trang web có thẻ table". bên cạnh đó Anh chị cũng có thể chọn bí quyết thứ 2 là copy trang html mà tôi đã khiến về và nghiên cứu chỉnh sửa. bí quyết khiến này không có gì phải e dè, mà nó còn giúp bạn thực hành mau lẹ hơn, dễ hiểu hơn. khiến sao copy được trang html đó? Anh chị mở link ở mục 1, sau chậm tiến độ bấm CTRL+U là sẽ có nguyên đa số code HTML của trang này.
7. Đánh giá các thẻ:
Xem thêm các hoc html khác tại đây
Bài học về php bữa nay chấm dứt tại đây. Chúc Anh chị em học tập rẻ.
Bài 1: những khái niệm và công cụ
mục tiêu của bài học này là giúp Cả nhà tính từ lúc số ko, nhắc cả những bạn chưa biết gì về lập trình web cũng sở hữu thể hiểu được và dần dần trở nên một coder giỏi. thành ra nếu như bạn nào đã học qua lập trình web và biết về những dụng cụ ngoại hình, tăng trưởng web thì sở hữu thể bỏ qua bài viết này. ngoài ra tôi khuyên Cả nhà nên đọc lướt qua để chúng ta sở hữu những đồng nhất về khái niệm, khái niệm cũng như những dụng cụ thực hiện để sau này tiện dụng theo sát những tỉ dụ trong các bài học tiếp sau. Bài học gồm 3 phần, phần 1 là các định nghĩa, phần 2 giới thiệu các công cụ mà bạn cần có trên máy tính của mình để thực hành và phần 3 sẽ chỉ dẫn bạn khiến 1 trang web đầu tiên.
khiến quen có các ngôn ngữ lập trình khác tại đây: https://vietpro.net.vn/hoc-ajax
Các khái niệm
Website hoạt động như thế nào?
Hãy hình dong khi bạn định vào 1 trang web nào chậm tiến độ, bạn cần có 1 máy tính có 1 phần mềm được gọi là browser mà Anh chị hay dùng như firefox, chrome trên hệ điều hành windows hay safari trên nền móng apple. ở mỗi browser này sẽ có 1 cái gọi là URL, bạn gõ tên website vào URL chậm tiến độ rồi enter, thế là trang web hiện ra. Vậy các gì diễn ra sau khi bạn enter ở cuối cái URL? có đa số điều xảy ra đầu tiên là Browser phải thiết lập kết nối đến máy chủ cất trang web chậm tiến độ, sau chậm tiến độ nó cho máy chủ biết tên trang web mà nó cần đọc dựa trên URL mà bạn gõ vào. Máy chủ sẽ gửi đến browser 1 trang web có 2 thành phần 1 là NỘI DUNG và 2 là mã HTLM. Browser căn cứ vào mã HTML để biểu đạt 1 trang web như cái mà bạn nhận ra trên màn hình, trong chậm tiến độ mã HTML quy định chỗ nào thì mầu xanh, chỗ nào thì mầu đỏ, chỗ nào chữ lớn, chỗ nào chữ nhỏ, chỗ nào có ảnh, chỗ nào có video, chỗ nào có link đến 1 trang web khác.... chậm tiến độ chính là đầu đuôi cho tên gọi HTML nghĩa là Hyper Text Marker Language (Ngôn ngữ đánh dấu siêu văn bản).
ngôn ngữ HTML khiến việc như thế nào?
khi chậm tiến độ giả dụ máy chủ web gửi về browser 1 trang web mà có cái như trên thì browser sẽ hiển thị như sau:
cố nhiên browser sẽ chẳng hiển thị thẻ đóng thẻ mở ra khiến gì vì người thăm viếng website đâu cần để ý đến các thẻ, họ chỉ để ý đến nội dung và bí quyết biểu đạt nội dung chậm tiến độ mà thôi. Tóm lại 1 trang web do máy chủ gửi đến máy tính của người đọc sẽ có 2 thành phần, 1 là NỘI DUNG, là cái mà người đọc nhận ra và 2 là MÃ HTML mà browser có thể hiểu để biểu đạt NỘI DUNG cho đúng ý của người lập trình web. đến đây chắc Anh chị đã hiểu là công tác của 1 người lập trình web là gì. công tác chậm tiến độ là tạo ra các trang web có các mã HTML đúng chỗ, đúng khi, còn công tác của 1 người quản trị website là nhập các nội dung cần hiển thị. 2 công tác tách bạch rất rõ. Bạn muốn khiến công tác nào? giả dụ muốn khiến công tác lập trình web, hãy đọc tiếp. Còn giả dụ muốn phát triển thành 1 người quản trị web chuyên nghiệp, hãy dành thời gian đọc seri bài viết khác nhé.
PHP là gì?
ban đầu khi web mới có mặt trên thị trường những chuyên gia lập trình web tiêu dùng một mẫu code thuần là HTML. lúc ngừng thi côngĐây thực ra chưa với khái niệm chuyên viên lập trình web mà thực ra là khái niệm viên chức viết trang web. một chuyên gia web sẽ vừa phải nhập nội dung sau ngừng thi côngĐây gắn những mã thẻ HTML cho đúng ý của chủ trang web. Và lúc ngừng thi côngĐây những trang web trên mạng đều là website tĩnh vì nội dung với code gắn cứng với nhau. Mỗi lần muốn thay đổi lại phải gọi chuyên gia viết web tới chỉnh sửa tuy nhiên lúc website vững mạnh lên, nôi dung web tăng nhanh và thay đổi hàng ngày, và lượng những chuyên gia viết web không phù hợp nổi nhu cầu viết những trang web tĩnh nữa. lúc này người ta mới phát minh ra những tiếng nói trung gian khác với nhiệm vụ là tự sinh ra những đoạn code HTML để sẵn ngừng thi côngĐây, sau rồi mới nhập nội dung vào. từ ngừng thi côngĐây phân công lao động rõ ràng, chuyên gia lập trình thì ngồi viết những chương trình sinh web bằng những tiếng nói khó hơn như PHP, ASP, Java.... đề tạo ra những trang web "trống" sau ngừng thi côngĐây chuyên gia nhập dữ liệu website thì bằng một phương tiện nào ngừng thi côngĐây, đưa những nội dung thô vào những trang web trên, phối hợp lại sẽ với một trang web mà nay thế này, mai thế khác tùy theo người nhập nội dung quyết định. từ ngừng thi côngĐây khái niệm web động xây dựng thương hiệu. Và tới bây giờ 90% những trang web trên mạng là động. ví dụ tiêu biểu nhất là trang tin tức, với trang tin này bạn sẽ thấy nó thay đổi hàng giờ, ngừng thi côngĐây là do nhóm nhập tin bài, còn nhóm viết code cho trang web ngừng thi côngĐây thì ngồi ở hậu trường xử lý những vấn đề kỹ thuật.
tương tự chúng ta trợ thì hiểu PHP là một tiếng nói lập trình tiêu dùng để sinh ra những trang web với code HTML. Vậy PHP nằm ở đâu? và nó làm cho việc như thế nào? Xin thưa, PHP làm cho việc theo cơ chế nhúng. với tức thị với một trang web tĩnh bất kỳ, ví như bạn muốn phần nào là động thì chỉ việc chèn vào ngừng thi côngĐây đoạn code PHP đặt trong hai ký hiệu script như hình vẽ sau:
Lưu ý là PHP ko làm cho việc ở phía browser, mà làm cho việc ở trên máy chủ. Trên mỗi máy chủ tương trợ PHP sẽ với một tiến trình nền miệt mài đọc những trang web do chuyên viên lập trình web để trên ngừng thi côngĐây, ví như nó thấy là một trang web tĩnh, chỉ bao gồm mã HML, nó sẽ thuần tuý là chuyển trang web ngừng thi côngĐây tới browser yêu cầu trang web là xong nhiệm vụ. Nhưng ví như nó bắt gặp một trang web với cả mã nhúng PHP, nó sẽ phải làm cho thêm một thời kỳ là đọc xem đoạn PHP ngừng thi côngĐây nói gì, từ ngừng thi côngĐây sinh ra một đoạn mã HTML theo đúng ý của đoạn mã PHP hay nói đúng hơn là theo ý của người lập trình PHP, và chèn trái lại vào trang web ngừng thi côngĐây trước lúc gửi trang web tới với browser. tất nhiên đã mẫu bỏ hết mã PHP rồi, vì browser ko hiểu được PHP nói gì.
MySQL là gì?
lúc nội dung đã được động hóa qua cơ chế làm cho việc của PHP nêu trên, chúng sẽ ko nằm trong trang web mà nằm ở một chỗ trung gian, được đánh số và quản lý nghiêm nhặt. Chỗ ngừng thi côngĐây gọi là hạ tầng dữ liệu. với số đông hệ quản trị hạ tầng dữ liệu như SQL, MySQL, Oracle... và đều với thể làm cho việc với website, tuy nhiên PHP rất khoái MySQL vì cả hai đều là sản phẩm của mã nguồn mở, rất dễ tiêu dùng và quan yếu nhất là miễn phí.
Hãy tưởng tượng vai trò của của hạ tầng dữ liệu như sau. Trong một lớp với 40 học trò, mỗi học trò được đánh số từ một tới 40 và danh sách này nằm trong cặp của thày giáo, danh sách ngừng thi côngĐây chính là hạ tầng dữ liệu. những học trò là NỘI DUNG, còn thày giáo là PHP. lúc thầy muốn một bạn nào ngừng thi côngĐây lên bảng làm cho bài thày chỉ cần mở danh sách và gọi theo số, bạn ngừng thi côngĐây sẽ xuất hiện trên bục giảng, bục giảng chính là trang web mà máy chủ gửi tới cho browser là chúng ta, những thanh tra của sở giáo dục tới dự giờ.
Khó hiểu ko những bạn? Ok tôi sẽ lấy ví dụ sắp với web hơn, ngừng thi côngĐây là trang tin tức VNexpress. Trang này với một vị trí rất đắc địa là home page và chỉ tiêu dùng để đưa những tin nóng nhất. lúc 9h bạn mở ra thấy với tin về cơn bão Haiyen. tới 10h mở ra, chỗ ngừng thi côngĐây đã bị thay bằng tin về họp quốc hội. Vậy cơn bão Haiyen hay họp quốc hội là những nội dung, dạng text hoặc hình ảnh. Nó sẽ được lưu ở trong hạ tầng dữ liệu còn trang web VNexpress vững chắc sẽ với một đoạn mã nhúng PHP hay ASP gì ngừng thi côngĐây, đoạn mã này với nhiệm vụ lấy những nội dung mà nó cho là nóng nhất trong hạ tầng dữ liệu đưa lên thể hiện ở trang web vnexpress và gửi tới browser ví như với yêu cầu.
Vẫn khó hiểu ư? OK, ví như vậy ko cần hiểu nữa. không cần hiểu kỹ về MySQL bạn vẫn có thể khiến được web. chỉ cần hình dung thế này. MySQL là 1 chỗ nào chậm tiến độ để tống được các nội dung A, B, C vào chậm tiến độ và để PHP thích thì lôi thằng A, hay thằng B, hay thằng C ra đặt vào trang web và gửi về cho các bạn đọc.
Đánh giá về tài liệu học lập trình online
Các công cụ cần thiết
OK now! giả dụ bạn nào đọc xong phần trên mà vẫn còn máu nóng, chúng ta có thể đi tiếp phần sau đây. Còn giả dụ bạn nào thấy choáng quá thì nên đi ngủ, mai sau đọc lại đoạn trên thấy dễ tiêu hơn, ngày kia đọc tiếp cho nó tiêu hẳn rồi hãy đọc tiếp phần này bởi vì. Lý thuyết giúp soi con đường cho thực tại. giả dụ đã thấm nhuần các định nghĩa bên trên thì mới biết mua các công cụ gì để thực hành.
Để hoàn tất 10 bài học này, bạn cần chuẩn bị 1 máy tính cấu hình vừa phải, trên chậm tiến độ cài win7 hoặc windows XP là ổn sau chậm tiến độ bạn download các phần mềm dưới đây và cài lên máy của mình. Mục đích là gì: đầu tiên để biến máy của bạn thành 1 webserver, để bạn vừa đá bóng vừa thổi còi. nghĩa là browser và web server cộng ở 1 chỗ, khi chậm tiến độ sẽ dễ dàng cho bạn viết web tĩnh hay động đều có thể test tại chỗ được.
Mục đích thứ 2 là biến webserver của bạn thành 1 máy chủ web hỗ trợ PHP và có sẵn hệ quản trị cơ sở dữ liệu MySQL để thực hành web động. Mục đích 1 và 2 được giải quyết bằng Wamp server
Mục đích thứ 3 là để có 1 công cụ có thể biên soạn thảo các trang web tĩnh cũng như động 1 bí quyết tha hồ, cộng cụ này có tên là Dreamwaver.
Mục đích thứ 4: là có 1 bàn điểm trang cho các ảnh trước khi đưa lên website. Vấn đề về ảnh tuy đơn giản nhưng giả dụ bạn coi thường nó, bạn sẽ gặp đông đảo rắc rối về sau. 2 nữa là bạn cần tập lề thói chỉn chu, kiên nhẫn khi xử lý ảnh thì mới có thể tạo ra các website vừa mắt được. Để xử lý ảnh giả dụ bạn nào có Win 7 rồi thì có thể dùng Paint sẵn có trong win 7, còn giả dụ bạn nào dùng XP thì nên download thêm 1 bản Pickpick dùng có đông đảo tính năng bổ ích.
Dưới đây là link để down load và chỉ dẫn cài đặt các phần mềm này. Lưu ý là các phần mềm này đều có nhiều bản update liên tiếp ra, bên cạnh đó để demo tôi dùng các phiên bản hơi cũ, vì nó chạy ổn định, ít hoa mắt, phù hợp có Anh chị mới nhập môn. Bạn nào đã từng dùng các công cụ này thành thạo rồi thì cứ tùy ý dùng các phiên bản mới nhất mà mình thấy phù hợp là được.
Đoạn code đầu tiên
Nào, bây giờ sau khi cài đặt xogn các công cụ trên, chúng ta sẽ bắt tay vào viết 1 trang web đầu tiên. Hãy mở Dreamwaver ra, chọn New File (Ctrl-N) rồi chọn kiểu file là HTML, sau chậm tiến độ bấm creat. Bạn sẽ thấy khung biên soạn thảo của Dreamwaver, có 1 số code HTML đặt sẵn, bạn sửa file chậm tiến độ như sau:
Sau chậm tiến độ Anh chị save file đề cập trên có tên gọi my-first-webpage.html và để ngay trên destop cũng được, sau chậm tiến độ đóng dreamwave lại và mua file chậm tiến độ trên desktop, double-click vào nó, bạn sẽ thấy firefox mở file này ra và xuất hiện cái chữ "Xin chào, đây là đoạn code HTML đầu tiên của tôi" giả dụ nó không khiến việc Anh chị có thể download file này về để so sánh và Đánh giá căn do tại sao.
Giải thích:
Trong file trên chúng ta thấy các thẻ mở và đóng html, head, body. Thẻ html cho biết đây là 1 file được đánh dấu bằng các thẻ html. Thẻ head cho biết đây là phần đầu file, các thông báo ở đầu file đa số là không hiển thị trong browser, mà có tác dụng cho việc khai báo các thông báo của trang, các scrip hoặc css. Lưu ý các thông báo ở trong thẻ mở và thẻ đóng head có tác dụng đa số cho việc SEO sau này. bởi thế đừng nên coi thường và bỏ qua nó. thí dụ thông báo giữa 2 thẻ mở và đóng title sẽ hiển thị trong browser cho biết tiêu đề trang web là gì và Google rất coi trọng thông báo này. Còn thẻ body cho browser biết bắt đầu từ đây là nội dung chính của trang web.
bên cạnh đó chúng ta thấy thẻ meta không có thẻ mở và đóng như thông lệ. có đa số thẻ thuộc dạng này được gọi là thẻ tự đóng vì thuộc tính hiển thị của nó.
Trong bài 1, chúng ta đã khiến quen có các định nghĩa của web tĩnh, web động. cùng lúc chúng ta đã khiến quen có các công cụ biên soạn thảo và thể nghiệm trang web. Phần 2 này chúng ta tiếp diễn có việc đào sâu vào ngôn ngữ HTML có chỉ tiêu là có thể viết được 1 trang web tĩnh hoàn chỉnh.
Bài 2: các thẻ html thông dụng
Để nghiên cứu thấu đáo về HTML chúng ta cần đa số thời gian vì HTML có khoảng vài trăm thẻ khác nhau. Và các thẻ được phân cái ra thành các thẻ thuộc đội ngũ biểu đạt, đội ngũ bố cục, đội ngũ form... rất khó nhớ. bởi thế bạn nào muốn Đánh giá kỹ về html thì qua trang . Còn trong bài học này chúng tôi sẽ giới thiệu 1 số thẻ thông dụng nhất.
bên cạnh đó đầu tiên chúng ta cũng cần phải biết bí quyết dùng và 1 số quy ước sau đây:
- Các thẻ điều khiển trong html bắt bắt buộc đặt trong 2 dấu ngoắc nhọn < và="">.
- Trong 1 thẻ bắt bắt buộc có tên thẻ, bên cạnh đó sẽ có thể có thêm 1 số thuộc tính và điều khiển khác để quy định thêm các tham số hiển thị cho nội dung
- Hầu hết các thẻ đều có mở và đóng. Thẻ đóng có tên như thẻ mở, nhưng có gạch xấc xược đằng trước cấu trúc đóng mở thẻ như sau
- Một số thẻ là tự đóng nghĩa là không cần thẻ đóng
- Khi dùng thẻ nên gán cho mỗi thẻ 1 id để cấu trúc code rõ ràng
- Các thẻ có cấu trúc lồng nhau nghĩa là thẻ này có thể nằm trong 1 thẻ khác.
Dưới đây là hình ảnh minh họa về bí quyết dùng thẻ. Chúng ta không cần đi vào chi tiết, mà chỉ xem qua cấu trúc, còn chi tiết vai trò từng thẻ như thế nào sẽ Đánh giá ở phần bài tập
Dưới đây là danh sách các thẻ thông dụng mà Anh chị cần mua hiểu:
- Thẻ html dùng để khai mạc và chấm dứt 1 trang html
- Thẻ head dùng để khai mạc và chấm dứt khai báo các thông báo chung của trang
- Thẻ body đánh dấu khai mạc và chấm dứt của nội dung toàn trang
- Thẻ table dùng để tạo 1 bảng gồm các cột và cái
- Thẻ tr dùng để tạo 1 cái trong 1 bảng bình thường nằm trong thẻ table
- Thẻ td dùng để tạo 1 cột trong 1 cái, thường nằm trong thẻ tr
- Thẻ h1, h2, h3, h4, h5, h6 dùng để định dạng các tiêu đề bài viết (chữ lớn, in đậm...)
- Thẻ img dùng để chèn 1 ảnh vào trang web
- Thẻ a dùng để chèn 1 link vào 1 đoạn text hay 1 ảnh.
- Thẻ br dùng để ngắt cái, xuống cái
- Thẻ p dùng để khai báo 1 đoạn text (paragraph)
- Thẻ ul dùng để đáp ứng 1 danh sách có cấu trúc
- Thẻ li là thẻ con của thẻ ul để chỉ ra các phần tử của 1 danh sách
- Thẻ form để khởi tạo các form. Cấu trúc thẻ này hơi phức tạp và có đa dạng thẻ phụ thuộc khác nên chúng ta sẽ bàn chi tiết ở 1 bài học riêng.
- Các thẻ b, i, u dùng để in đậm, in nghiêng hay gạch chân 1 đoạn text.
- Thẻ center dùng để căn đoạn text ra giữa.
Bố cục trang có thẻ table
1 trang web đẹp hay xấu phụ thuộc đa dạng vào bố cục có cân đối hay không. Đây là 1 bài toán khó đối có ngôn ngữ HTML bởi vì nó được có mặt trên thị trường dựa trên bắt buộc biểu đạt văn bản rất khô khan. ban đầu các chuyên gia viết trang web chỉ dùng thẻ table để bố cục các trang web, có thẻ này chúng ta có thể tạo ra được các trang web có bố cục hàng cột đan xen và có các tỉ lệ khác nhau. Sau này khi CSS lớn mạnh, người ta dùng thẻ div thay thế cho table và cùng lúc còn dùng đa dạng công nghệ khác như flash Jquery, map... để khiến trang web sinh động hơn về mặt bố cục. Trong khuôn khổ bài này chúng ta sẽ dùng table để đáp ứng 1 trang web có bố cục như hình vẽ sau
Để khiến bố cục cho website chúng ta cần 1 cái thước kẻ, hãy đặt cái thước kẻ nằm ngang rồi kéo trong khoảng trên xuống, các chỗ giao nhau của các phần, lấy bút chì kẻ 1 các con phố ngang. tiếp diễn, đặt thước kẻ nằm dọc rồi kéo trong khoảng trái qua phải, các chỗ giao nhau của các phần, kẻ 1 các con phố dọc bạn sẽ thấy trang web trên được chia ra khiến 5 ô: banner, menu, nội dung chính, các kết liên và footer. công tác này được gọi là cut HTML, và nó hoàn toàn được tự động hóa giả dụ bạn dùng photoshop. bên cạnh đó trong bài thực hành này chúng ta sẽ khiến bằng tay để hiểu rõ các bước bề ngoài, bố cục 1 website như thế nào. có các các con phố kẻ như trên chúng ta sẽ hình dong ngay được website này có bố cục là 1 bảng gồm 4 cái và 2 cột, cái banner, cái menu và cái footer chỉ có 1 cột, riêng cái ở giữa có 2 cột, bởi thế phải dùng 1 thuộc tính của thẻ td là colspan (gần giống như merge của excel hay word), Và bề ngoài trang này có dạng như sau:
(bảng)
(dòng 1)
(cột 1 - dùng colspan = 2 ) Banner (kết thúc cột 1)
(kết thúc cái 1)
(dòng 2)
(cột 1 - dùng colspan = 2 ) menu (kết thúc cột 1)
(kết thúc cái 2)
(dòng 3)
(cột 1 ) Nội dung chính (kết thúc cột 1)
(cột 2 ) các kết liên (kết thúc cột2)
(kết thúc cái 3)
(dòng 4)
(cột 1 - dùng colspan = 2 ) Footer (kết thúc cột 1)
(kết thúc cái 4)
(kết thúc bảng)
Ở trên là bí quyết diễn giải nôm na cho dễ hiểu về bí quyết bố trí bảng bằng các thẻ đóng và thẻ mở HTML, khi vào vun đắp trang HTML đích thực chúng ta sẽ thay các chữ trong ngoắc bằng các thẻ HTML đích thực và sẽ thấy hiệu quả. chậm tiến độ chính là nội dung bài tập dưới đây
Bài tập
Bài tập của chúng ta là hãy viết 1 trang web HTML giống hệt như hình vẽ ở phần trên. công cụ và bí quyết khiến như sau:
1- Anh chị vào link này để nhìn kết quả trước:
2- Click vào banner và chọn "save image as..." để lưu ảnh banner về, có thể đặt tên là gì tùy ý vào
3- như vậy click vào ảnh bé gái và save image as về máy của mình.
3- Chạy wamp server (đã chỉ dẫn download và cài đặt ở bài 1). Lưu ý là có web tĩnh chúng ta có thể không cần wamp server vẫn test được kết quả, bên cạnh đó đây là khi chúng ta thử wamp. Sau khi chạy wamp, chúng ta mở fire fox và gõ url sau: giả dụ thấy xuất hiện trang quản trị wamp server là ok, trong trang này có cả các tool phpmyadmin và tool phpinfo mà bạn rất cần sau này.
4- Tạo 1 thư mục trong C:wampwww đây chính là thư mục root của wamp server. khi bạn gõ thì server sẽ đọc các file HTML trong thư mục này để trả về cho fire fox hiển thị.
5- dùng Dreamwave để tạo trang HTML. Lưu ý Anh chị nên Đánh giá việc tạo ra 1 project trong Dreamwave để điều hành các file trong các bài tập trong khoảng nay về sau và trỏ thư mục của project này về thư mục tạo ở bước 4. bí quyết tạo 1 project trong dreamwave như thế nào thì hơi dài dòng, Anh chị search google hoặc giả dụ cần thì contact có để được hỗ trợ.
6. bắt đầu tạo trang HTML. Chúng tôi khuyến khích Anh chị code trong khoảng đầu, dựa trên gợi ý ở mục trên "Bố cục trang web có thẻ table". bên cạnh đó Anh chị cũng có thể chọn bí quyết thứ 2 là copy trang html mà tôi đã khiến về và nghiên cứu chỉnh sửa. bí quyết khiến này không có gì phải e dè, mà nó còn giúp bạn thực hành mau lẹ hơn, dễ hiểu hơn. khiến sao copy được trang html đó? Anh chị mở link ở mục 1, sau chậm tiến độ bấm CTRL+U là sẽ có nguyên đa số code HTML của trang này.
7. Đánh giá các thẻ:
- Đầu tiên chúng ta dùng thẻ body có thuộc tính bgcolor="#006699" để tạo mầu nền xanh cho trang web
- Ngay sau thẻ body, chúng ta dùng thẻ table để bố cục trang gồm 4 cái, cái số 3 có 2 cột còn các cái còn lại có 1 cột và dùng thuộc tính colspan=2 để cân đối có 2 cột ở cái 3. Lưu ý dùng thuộc tính align="center" trong thẻ table để căn đa số thẻ ra giữa
- Trong HTML các thẻ tự động tạo ra kích thước dài rộng tùy thuộc vào đối tượng ở bên trong thẻ. Do ảnh banner có kích thước 940px theo chiều ngang nên table cũng sẽ lấy kích thước 940px, bên cạnh đó chúng tôi khuyến khích dùng các thuộc tính width=940, để định nghĩa chiều rộng của table cho nó tường minh.
- Thẻ a có thuộc tính href="" sẽ link trực tiếp đến trang hiện thời, nếu muốn link này trỏ đến 1 url nào chúng ta đưa url chậm triển khai vào trong ngoắc kép.
- Chúng ta nên tập lề thói sử dụng các thẻ tiêu đề h1, h2, h3... để bộc lộ tiêu đề bài viết, điều này rất mang lợi cho việc SEO website. Việc sử dụng thẻ này khiến cho kích thước font chữ mang thể không như mong muốn, không những thế, sau này khi biết về CSS, chúng ta lại hoàn toàn điều chỉnh được các thẻ này.
- Đối mang các đoạn text, nên sử dụng các thẻ p để định dạng, chậm triển khai cũng là 1 chuẩn về SEO onpage
- Đối mang các menu nên sử dụng thẻ ul và li chả hạn như phần kết liên trong bài tập này. cách viết chậm triển khai sẽ tường minh và mang lợi khi SEO.
- Cuối cộng nhớ là đã mở thẻ nào thì phải đóng thẻ chậm triển khai và nên viết trang web theo cấu trúc, các thẻ con thì viết thụt vào, thẻ mở và thẻ đóng viết cộng 1 cấp.
Xem thêm các hoc html khác tại đây
Bài học về php bữa nay chấm dứt tại đây. Chúc Anh chị em học tập rẻ.
|
|
|
