tài liệu học lập trình web HTML căn bản đại học công nghệ và truyền thông thái nguyên

46 689 0
tài liệu học lập trình web HTML căn bản  đại học công nghệ và truyền thông thái nguyên

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

Trường ĐH Công nghệ thông tin& Truyền thông Thái Nguyên VIETSOURCE.NET & CLB TIN HỌC- ICTU Hướng dẫn: Vũ Công Tịnh Email: VuCongTinh@Gmail.Com Chương trình học  Chuẩn bị học lập trình web?  Tổng quan internet & web Phần I: Lập trình web với HTML, CSS JAVASCRIPT  Chương 1: Lập trình web với HTML  Chương 2: Định dạng website với CSS Phần II: Xây dựng ứng dụng web động với PHP& MySQL  Chương 1: Căn PHP& MySQL  Chương 2: Xây dựng website bán hàng PHẦN I: Lập trình web với HTML, CSS Cần chuẩn bị gì? Web browser( Trình duyệt web): IE( Internet Explorer), Mozzila Firefox, Google Chrome, Safari, Opera,… Text editor( Trình soạn thảo): Notepad, Notepad++, Editplus, E-TextEditor, Macro Dreamviewer, PHP Designer,… Một số add-ons Firefox: Firebug, Colozilla, Measurelt, Web Developer,… Môi trường làm việc cho PHP: Một số gói phần mềm tích hợp Apache, PHP, MySQL, phpMyAdmin,… như: - Appserv( Dành cho WinXP), XAMPP, WAMPServer, Vertigo,… Một số phần mềm Upload file qua FTP: CuteFTP, FlashFXP, Filezilla,… Video tham khảo: - Công cụ: http://bit.ly/vsnet-chuanbi - Hướng dẫn XAMPP: http://bit.ly/vsnet-xampp Tổng quan internet & web • Mạng máy tính? Là hệ thống máy tính kết nối với nhau, chia sẻ liệu cho • WWW= World wide web: Là hệ thống server chứa thông tin( siêu văn bản) mà người dùng sử dụng thơng qua web browser • Client- Server Là mơ hình mạng máy tính, đó: o Server( Máy chủ): Là máy tính sử dụng để máy tính truy cập, máy truy cập vào gọi máy khách( client) Ví dụ: - Khi truy cập vào http://vietsource.net + Server: Là máy chủ chứa liệu http://vietsource.net + Client: Máy tính cá nhân Tổng quan internet & web • TCP/IP: Là giao thức truyền liệu máy tính Mỗi máy tính có địa IP(Internet Protocol) xác định, địa IP cụm gồm số giới hạn từ >255 có dạng: A.B.C.D Ví dụ: 14.0.18.152 • Domain name( Tên miền): Là định danh để xác định vị trí máy tính mạng Internet Domain name có khơng trùng Ví dụ: Chỉ có domain VIETSOURCE.NET • VPS( Máy chủ ảo: Virtual Private Server): Là phương pháp phân vùng vật lý máy chủ thành nhiều máy chủ ảo, có CPU, Ram HDD riêng • Hosting: Là phần không gian lưu trữ máy chủ có cài dịch vụ FTP, WWW,… dùng để lưu trữ nội dung website Tổng quan internet & web Domain name Web Hosting Ví dụ: - Việt Nam máy chủ, Hà Nội, TP HCM,… VPS, khu đất nhà bạn hosting, nhà cơng trình khác website, việc thiết kế website giống xây nhà - IP website tương tự tọa độ nhà( gồm kinh độ vĩ độ), IP khó nhớ nên domain name( tên miền) đời, tên miền địa nhà bạn( Số nhà 123- Z115- TP Thái Nguyên) Tổng quan internet & web • Website tĩnh: - Là website khơng có khả tương tác với người dùng, thường viết ngơn ngữ HTML, DHTML, • Website động: - Là website có tính tương tác cao người dùng quản trị, xây dựng ngôn ngữ ASP, PHP,… với kết hợp sở liệu Website động có phần quản trị web để cập nhật nội dung website Như: website tin tức, bán hàng,… Ví dụ: Phần bình luận cho thành viên diễn đàn VIETSOURCE.NET( Tính tương tác cho người dùng) Website Sau tạo cho website trước bắt đầu học Vào Start -> Notepad Gõ vào nội dung sau Vào File > Save as > File name: Điền helloworld.html Encoding: Chọn UTF- Chọn vị trí cần lưu sau chọn Save Website Mở file vừa lưu trình duyệt xem kết Làm website bạn sẵn sàng cho học Bài HTML cấu trúc I Giới thiệu HTML - HTML( Hypertext Markup Language): Ngôn ngữ đánh dấu siêu văn bản, đưa vào chuẩn web năm 1994 - HTML ngôn ngữ đánh dấu ngơn ngữ lập trình, nhằm tạo trang web tĩnh dựa thẻ đánh dấu( tags), dựa vào thẻ đánh dấu để trình duyệt xác định cách hiển thị II Cấu trúc tài liệu HTML - Một tài liệu HTML file văn chứa thẻ đánh dấu - Một tài liệu HTML phải có đi( phần mở rộng): html htm … Ví dụ: index.html, default.html, vietsource.html,… - Cấu trúc chung tài liệu HTML + : Xác định tài liệu HTML + : Xác định phần đầu Website, chứa thông tin website ( Như tiêu đề, mô tả, tác giả… ) + : Xác định phần thân web Nơi hiển thị toàn nội dung 1website Bài Danh sách ( list) - Có thể thay đổi cách hiển thị sử dụng
    cách sử dụng thuộc tính type + a: Hiển thị theo kiểu ký tự thường a, b, c… + A: Hiển thị theo dạng ký tự hoa A, B, C + i: Hiển thị dạng La Mã thường i, ii, iii, iv, + I: Hiển thị dang La Mã I, II, III, IV, + square: Hình vng + circle: Hình trịn màu rỗng ( màu trắng) + disc: Hình trịn đặc( chấm trịn màu đen) - Để bắt đầu với giá trị khác sử dụng thuộc tính start=“n” với n giá trị bắt đầu danh sách - Ví dụ: http://jsbin.com/abulim/3/edit Bài Danh sách ( list) Danh sách không trật tự
      - Là kiểu danh sách đánh thứ tự list mặc định hình trịn đặc ( chấm trịn đen) - Có thể tùy biến sang kiểu khác: đánh trật tự, vng, hình trịn rỗng, Tương tự
        - Để loại bỏ kiểu đánh thứ tự loại “ol” “ul” sử dụng thuộc tính type với giá trị none Ví dụ: http://jsbin.com/abulim/6/edit -Ngồi sử dụng CSS để tùy biến danh sách HTML ( Sẽ tìm hiểu phần CSS) Bài Danh sách ( list) Danh sách định nghĩa - Khác với “ol” “ul”, cặp thẻ dùng để định nghĩa đối tượng - Bên cặp thẻ “dl” chứa cặp thẻ + “dd” (Definition Description): Thẻ mô tả định nghĩa + “dt” ( Definition term): Thẻ định nghĩa thuật ngữ Ví dụ: Webmaster( chủ website): Là người có quản lý số website Bài Tập: -Thiết kế website như: Hình ( baitap/3-btap1.jpg) - Tạo menu dọc như: File ( baitap/3-btap2.html) Bài Biểu mẫu( form) - Biểu mẫu ( form) thành phần thường gặp quan trọng website, form tạo nên tính tương tác website người dùng qua phần nhập, truy xuất liệu gửi liệu Như: form đăng ký, đăng nhập, tìm kiếm, gửi email liên hệ,… HTML Form - Cú pháp: - Một số thuộc tính + name: Tên form, đặt tùy ý cho dễ nhớ, có mối tương quan với đối tượng form + action: Link xử lý liệu + method: Phương thức truyền liệu, có giá trị GET POST ( Sẽ tìm hiểu phần PHP) Ví dụ: http://jsbin.com/afoqir/1/edit Bài Biểu mẫu( form) Các đối tượng Form 2.1 Thẻ input a) Textbox - Tạo nên đối tượng cho phép nhập liệu văn - Cú pháp: + name: Tên textbox, đặt tùy ý, kết hợp với PHP hay Javascript để tạo tính tương tác website ( Tìm hiểu phần sau) + value: Giá trị ban đầu textbox, hiển thị dịng “Nhập từ khóa” ( Hình vẽ) + size: Độ rộng textbox Nếu thẻ input khơng sử dụng thuộc tính type=“text” trình duyệt tự hiểu dạng Textbox b) Password - Đối với form đăng nhập dùng loại để ẩn đối tượng password - Cú pháp: - Các thuộc tính value, name, size tương tự Textbox http://jsbin.com/ofaboh/1/edit Bài Biểu mẫu( form) c) Checkbox - Cú pháp: + name: Tên checkbox, sử dụng kết hợp PHP hay Javascript( JS) + value: Giá trị checkbox, sử dụng kết hợp PHP hay JS, gửi kết lên server ngược lại + Có thể sử dụng thêm thuộc tính checked để chọn mặc định cho đối tượng Lưu ý: Đối với đối tượng nhóm name phải đặt giống http://jsbin.com/ofaboh/3/edit Bài Biểu mẫu( form) d) Radio - Tạo chức chọn dạng núm Radio - Cú pháp: - Các thuộc tính name, value checked sử dụng tương tự Checkbox e) Upload -Tạo chức duyệt file từ máy tính - Cú pháp: + name: Tên đối tượng file http://jsbin.com/ofaboh/4/edit Bài Biểu mẫu( form) f) Submit - Tạo nút gửi liệu tới file xử lý ( Tới link khai báo thuộc tính Action) - Cú pháp: g) Button - Tương tự Submit nhiên sử dụng Button liệu không gửi tới file xử lý( Khai báo phần action) mà thường kết hợp với JS để tạo tương tác Cú pháp: h) Reset - Trả lại giá trị ban đầu chưa nhập liệu cho tất đối tượng form Cú pháp:

      Ngày đăng: 17/10/2014, 15:52

      Từ khóa liên quan

      Tài liệu cùng người dùng

      • Đang cập nhật ...

      Tài liệu liên quan