Html full, Lecture notes of Web Programming and Technologies

Download Html full and more Lecture notes Web Programming and Technologies in PDF only on Docsity!

VIETSOURCE.NET & CLB TIN HỌC- ICTU

Hướng dẫn: Vũ Công Tịnh Email: [email protected]

Trường ĐH Công nghệ thông tin& Truyền thông Thái Nguyên

Chương trình học

 Chuẩn bị gì khi học lập trình web?  Tổng quan về internet & web Phần I: Lập trình web với HTML, CSS và JAVASCRIPT  Chương 1: Lập trình web với HTML cơ bản  Chương 2: Định dạng website với CSS cơ bản Phần II : Xây dựng ứng dụng web động với PHP& MySQL  Chương 1: Căn bản về PHP& MySQL  Chương 2: Xây dựng website bán hàng

Tổng quan internet & web

• Mạng máy tính? Là 1 hệ thống các máy tính được kết nối với nhau, có thể chia sẻ dữ liệu cho nhau
• WWW= World wide web: Là 1 hệ thống server chứa thông tin( siêu văn bản) mà người dùng có thể sử dụng thông qua web browser
• Client- Server Là mô hình mạng máy tính, trong đó: o Server( Máy chủ): Là máy tính sử dụng để các máy tính truy cập, các máy truy cập vào được gọi là máy khách( client). Ví dụ:
• Khi chúng ta truy cập vào http://vietsource.net

• Server: Là máy chủ chứa dữ liệu của http://vietsource.net
• Client: Máy tính cá nhân của chúng ta

Tổng quan internet & web

• TCP/IP:

Là giao thức truyền dữ liệu giữa 2 máy tính. Mỗi máy tính có 1 địa chỉ

IP( Internet Protocol) xác định, địa chỉ IP là cụm gồm 4 số giới hạn từ 0 >255 có

dạng: A.B.C.D Ví dụ: 14.0.18.

• Domain name( Tên miền): Là 1 định danh để xác định vị trí của 1 máy tính trên mạng Internet. Domain name chỉ có duy nhất và không trùng nhau. Ví dụ: Chỉ có 1 domain là 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 và HDD riêng
• Hosting: Là 1 phần không gian lưu trữ trên máy chủ có cài các dịch vụ như FTP, WWW,… dùng để lưu trữ nội dung của website

Tổng quan internet & web

• Website tĩnh:
• Là những website không có khả năng tương tác với người dùng, thường được viết bằng ngôn ngữ HTML, DHTML,..
• Website động:
• Là những website có tính tương tác cao giữa người dùng và quản trị, được xây dựng bằng ngôn ngữ ASP, PHP,… cùng với sự kết hợp của cơ sở dữ 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 trong cho thành viên trong diễn đàn VIETSOURCE.NET( Tính tương tác cho người dùng)

Website đầu tiên

Sau đây chúng ta sẽ tạo cho mình 1 website trước khi bắt đầu bài học đầu tiên

1. Vào Start -> Notepad
2. Gõ vào nội dung như sau
   3. Vào File > Save as.. > File name: Điền helloworld.html Encoding: Chọn UTF- 8 Chọn vị trí cần lưu sau đó chọn Save

Bài 1. HTML và 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 là 1 ngôn ngữ đánh dấu chứ không phải 1 ngôn ngữ lập trình, nhằm tạo ra các trang web tĩnh dựa trên các thẻ đánh dấu( tags), dựa vào các thẻ đánh dấu để trình duyệt xác định cách hiển thị. II. Cấu trúc của 1 tài liệu HTML
• Một tài liệu HTML là 1 file văn bản chứa các thẻ đánh dấu.
• Một tài liệu HTML phải có đuôi( phần mở rộng): .html .htm … Ví dụ: index.html, default.html, vietsource.html,…
• Cấu trúc của chung của 1 tài liệu HTML

• : Xác định 1 tài liệu HTML
• : Xác định phần đầu của Website, chứa các thông tin về website ( Như tiêu đề, mô tả, tác giả… )
• : Xác định phần thân web Nơi hiển thị toàn bộ nội dung của 1website

Bài 1. HTML và cấu trúc

• Elements( Phần tử):
• Là thành phần được xác định nhờ các thẻ (tag)
• Mỗi thẻ có cấu trúc :
• Thẻ gồm thẻ đóng và thẻ mở:

: Thẻ mở

: Thẻ đóng

• Thẻ không phân biệt hoa và thường: giống , tuy nhiên chúng ta nên thống nhất dùng chữ thường
• Cấu trúc 1 phần tử

Nội dung

Ví dụ: Chữ này sẽ có màu đỏ

• Thuộc tính và giá trị có thể có hoặc không: Nội dung
• Một số thẻ không cần thẻ đóng ( Để đúng chuẩn chúng ta thêm dấu gạch chéo

vào phía sau):
, , , …

Video tham khảo:

• http://bit.ly/vsnet-cautruchtml

Bài 2. Một số thẻ cơ bản

+ link: Định dạng màu của liên kết trong website( Mặc định các liên kết là màu

xanh blue)

+ alink: Định dạng màu của liên kết đang hoạt động( khi nhấn giữ chuột vào liên

kết đó)

+ vlink: Định dạng màu liên kết đã ghét thăm( Mặc định liên kết chúng ta đã click

vào thường có màu vàng)

+leftmargin( căn lề trái),topmargin

( căn lề trên) Ví dụ:

3. Thẻ

• Nằm trong cặp thẻ <head>, nhằm tạo tiêu đề cho website. Demo: 1 , 2

4. Các thẻ heading

• Gồm 6 thẻ từ <h1> đến <h6> theo chiều kích thước giảm dần
• Là thẻ xác định tiêu đề( khác với thẻ title) cho các chuyên mục, danh mục, bài viết,…

Bài 2. Một số thẻ cơ bản

• Ví dụ: Thành viên đang kích hoạt của

VietSource.Net sử dụng thẻ

Câu lệnh: Thành viên đang kích hoạt

• Nên sử dụng các thẻ heading cho:

• Danh mục menu

• Tiêu đề bài viết

• Chuyên mục

…

Video tham khảo

http://bit.ly/vsnet-thehtml

Bài 2. Một số thẻ cơ bản

Ví dụ: http://jsbin.com/ejuwet/1/edit

c) Thẻ định dạng font chữ

• Cú pháp: Nội dung cần định dạng
• Thuộc tính:

• Color: Màu chữ. Ví dụ: red, green, #FFFFFF( Hệ hex).
• Size: Kích thước chữ.
• Face: Quy định font chữ. Như: Arial, Tahoma, “Time New Roman” Ví dụ: Ví dụ font chữ

Bài 2. Một số thẻ cơ bản

6. Một số thẻ khác

• Thẻ : Là 1 thẻ quan trọng trong HTML, được sử dụng để phân chia các lớp trong website thay cho việc dùng bảng( table) như trước đây( Sẽ nghiên cứu thêm ở phần CSS).
• Thẻ xuống dòng
  :

Trong HTML để xuống 1 dòng mới ta phải sử dụng thẻ xuống dòng
hoặc

( Theo chuẩn XHTML). Có 1 số thẻ mặc định nội dung bên trong xuống dòng như:

,

, đến ,…

Ví dụ: http://jsbin.com/oruyab/1/edit

• Thẻ kẻ ngang tạo ra 1 đường kẻ ngang trên website của bạn

Bài 3. Hình ảnh& Liên kết

1. Thẻ hình ảnh

• Cú pháp:
• Thuộc tính

• src=“url”: Đường dẫn của ảnh cần hiển thị
• border=“giá_trị”: Đường viền của ảnh. Ví dụ border=“0”
• width=“giá_trị”: Độ rộng của ảnh, đơn vị pixel.
• height=“giá_trị”: Độ cao của ảnh, đơn vị pixel.
• alt=“”: Nội dung hiển thị thay thế khi ảnh không được hiển thị( Do sai đường dẫn, ảnh không được tải về,… ).
• title=“” : Tiêu đề của ảnh( Khi di chuột qua ảnh sẽ hiển thị tiêu đề)
• vspace: Khoảng cách từ ảnh đến thành phần khác bên ngoài( Theo chiều dọc)
• hspace: Khoảng cách từ ảnh đến thành phần khác bên ngoài( Theo chiều ngang)

Chú ý: Khi sử dụng thẻ nên đặt thuộc tínhalt vàtitle trong mọi trường hợp. 2

thuộc tính này có tác dụng SEO cho website, đồng thời chuẩn web mà w3c đưa ra yêu cầu mọi ảnh phải có.

Ví dụ: http://jsbin.com/ofedez/1/edit

Bài 3. Hình ảnh& Liên kết