Thiet ke web voi HTML

THI T K WEB Ế Ế THI T K WEB Ế Ế V I HTML Ớ V I HTML Ớ Lê Anh Nh tậ Đt: 0912.844.866 Email: leanhnhat@tuyenquang.edu.vn Thiết kế web với HTML 2 Tài li u tham kh oệ ả 1. T h c HTML và XHTML trong 24 gi .ự ọ ờ Lê Minh Ph ngươ 2. Nh ng bài th c hành HTMLữ ự inh Xuân LâmĐ 3. Thi t k qu ng cáo và ti p th trên web HTML.ế ế ả ế ị Ng c Anh Th Pressọ ư 4. Thi t k và xu t b n trang Web v i HTML.ế ế ấ ả ớ NXB Th ng Kêố Thiết kế web với HTML 3 Bài M Đ uở ầ 1. HTML là gì? HyperText Markup Language (HTML) – Ngôn ng đánh ữ d u siêu văn b n. Bao g m các đo n mã chu n v i các ấ ả ồ ạ ẩ ớ quy c đ c thi t k đ t o các trang Web và đ c ướ ượ ế ế ể ạ ượ hi n th b i các trình duy t Web.ể ị ở ệ Thiết kế web với HTML 4 Web Page (Trang Web): Là tài li u ệ HTML. Web site: Là m t s các trang Web liên ộ ố k t v i nhau.ế ớ World Wide Web (www): Là d ch v toàn ị ụ c u c a Internet mà HTML là n n t ng.ầ ủ ề ả Thiết kế web với HTML 5 2. Nh ng ng d ng c a HTMLữ ứ ụ ủ – HTML là n n t ng c a World Wide Web, m t d ch ề ả ủ ộ ị v toàn c u c a Internet.ụ ầ ủ – HTML đ thi t k Web trên m ng Internet, t o tài ể ế ế ạ ạ li u, g i cáo th cho các công ty, cá nhân.ệ ử ị Thiết kế web với HTML 6 3. Trình so n th o trong quá trình h cạ ả ọ – S d ng trình so n th o NotePad có s n trong ử ụ ạ ả ẵ Windows. Start\Programs\Accessories\NotePad – Ho c m t trình so n th o b t kỳ trong windows.ặ ộ ạ ả ấ – FrontPage, DreamWare, Visual Studio Thiết kế web với HTML 7 4. Nh ng v n đ c n quan tâm khi thi t k Webữ ấ ề ầ ế ế – T ch c tài li u: t a đ , tiêu đ , đo n văn, đ ng ổ ứ ệ ự ề ề ạ ườ k ngang, danh sách, b ng.ẻ ả – Thu ng n văn b n.ắ ả – B trí hình nh nh g n, h p lý.ố ả ỏ ọ ợ Thiết kế web với HTML 8 Bài 1 T o ch ng trình đ u ạ ươ ầ tiên 1.1 T o m t trang Web m i.ạ ộ ớ - M môi tr ng mà b n mu n so n th o tài li u ở ườ ạ ố ạ ả ệ HTML - S d ng ch ng trình so n th o NotePad: Start -> ử ụ ươ ạ ả Program -> Accessories -> NotePad. • Chú ý: + Khi ghi tài li u HTML vào đĩa nh ghi đ y đ ph n ệ ổ ớ ầ ủ ầ m r ngở ộ + N u s d ng môi tr ng so n th o là NotePad trên ế ử ụ ườ ạ ả Windows thì ghi ghi tài li u HTML vào đĩa f i ch n ệ ổ ả ọ Encoding là UTF-8 đ hi n th ti ng vi t. ể ể ị ế ệ Thiết kế web với HTML 9 1.2. Tag (th ) HTML là gì?ẻ Khi một Web browser hiển thò một trang Wed, Web Browser sẽ đọc từ một file văn bản đơn giản và tìm kiếm những đoạn mã đặc biệt hay những Tag được đánh dấu bởi ký hiệu < và >. * Tag mang thông tin <tag_name> String of text </tag_name> Trong đó: <tag_name>: tag b t đ u.ắ ầ </tag_name>: tag k t thúc.ế * Tag rỗng: <tag_name> Thiết kế web với HTML 10 • Ví d :ụ <h2>Chúc m ng b n đ n v i HTMLừ ạ ế ớ </h2> <p> Chúc b n h c t t!ạ ọ ố Tag Tag Tag k t ế thúc [...]... trang web đầu tiên! Thiết kế web với HTML 15 • Lưu lại với tên “MoDau .html (vào trong thư mục của mình), với phần Encoding là UTF-8 • Lưu ý: phần mở rộng có thể là html hoặc htm đều được • Vào thư mục của mình chạy tệp HTML mà ta vừa tạo, xem kết quả nhận được Thiết kế web với HTML 16 Thiết kế web với HTML 17 6 Thực hành Thiết kế một trang HTML giới thiệu về bản thân Thiết kế web với HTML. .. liệu web – Thường đây là dòng đầu tiên trong file HTML – Ví dụ: Thiết kế web với HTML 13 1.5 Hiển thị tài liệu trong Web Browser 1.6 Tạo trang Web đầu tiên – Mở chương trình soạn thảo NotePad – Sử dụng phơng đánh tiếng việt: Unicode – Soạn thảo đoạn mã sau: Thiết kế web với HTML 14 Học tập HTML...* Web browser – Là trình duyệt Web, ví dụ: Microsoft Internet Explorer, FireFox, Opera, Netscape Thiết kế web với HTML 11 1.3 Cấu trúc cơ bản của một trang HTML tiêu đề trang Văn bản hiển thị < /html> Thiết kế web với HTML 12 1.4 Tag chú thích • Thẻ – Thẻ này dùng để ghi thơng tin về version HTML áp dụng... đầu về sự thay đổi Thiết kế web với HTML 20 2.1.3 Thực hành Đều chỉnh lại tài liệu HTML của mình, tạo một một trang HTML giới thiệu về một vài thành viên của lớp Thiết kế web với HTML 21 2.2 6 mức tiêu đề 2.2.1 Những tiêu đề của HTML Tag tiêu đề: Nội dung hiển thị N là số ngun từ 1 đến 6 Ví dụ: Tiêu đề thứ 3 Tiêu đề nhỏ nhất Thiết kế web với HTML 22 • Để tiêu đề ở giữa:... Thiết kế web với HTML 25 2.2.3 Thực hành Tạo một trang tài liệu html giới thiệu về bản thân, trong đó có dùng các tiêu đề để nhấn mạnh từng phần tài liệu Thiết kế web với HTML 26 2.3.Chia văn bản ra thành nhiều đoạn 2.3.1 Chia đoạn trong HTML – Tag chia đoạn: – Khi gặp Web browser sẽ chèn một dòng trống và bắt đầu một đoạn mới – Tag khơng cần tag kết thúc () Thiết kế web với HTML 27... liệu HTML 2.1 Nạp tài liệu trong Web browse 2.1.1.Tạo sự thay đổi trong tài liệu HTML Vào thư mục làm việc, mở tệp html của mình Mở trình soạn thảo NotePad Từ thực đơn File, dùng Open để mở tệp mình đã làm Từ đó thêm, bớt, sửa đổi văn bản trong đó Lưu trở lại Thiết kế web với HTML 19 2.1.2.Nạp lại tài liệu trong Web browser – Trở lại thư mục làm việc, mở lại tệp đã sửa, quan sát, so sánh với trang Web. .. giữa Chữ bên phải Thiết kế web với HTML 28 2.3.2 Chèn các dấu chia đoạn – Sử dụng tag để tạo một trang HTML, trong đó có các đoạn văn bản riêng biệt – Dùng Web browser để kiểm tra cơng việc của mình – Ví dụ Thiết kế web với HTML 29 2.4 Đường kẻ ngang 2.4.1 Tạo đường kẻ ngang – Tag hard rule : chèn một đường thẳng trong trang html – Tag : đẩy văn bản xuống dòng, nhưng... bạn thành cơng!!! Thiết kế web với HTML < /html> 32 2.4.3.Thực hành Tạo một trang tài liệu html giới thiệu về mình, các bạn trong lớp Trong đó có dùng tiêu đề, các tag vừa học để phân mảng từng phần • Dùng “<” để viết ra ký tự “” Thiết kế web với HTML 33 2.5.Làm việc với các kiểu mẫu 2.5.1 Các Tag style của HTML – Tag Chữ đậm – Tag Chữ nghiêng... Chữ đánh máy Ví dụ Thiết kế web với HTML 34 Sử dụng style Chia đoạn trong HTML Vì một thế giới ngày mai Vì tương lai của mỗi chúng ta Hãy cố gắng học bạn ơi Hà Nội, ngày 14/3/2007 Chúc các bạn thành cơng!!! < /html> Thiết kế web với HTML 35 2.5.2.Tag định dạng logic... đề • Ví dụ Thiết kế web với HTML 23 2.2.2 Đặt những tiêu đề vào tài liệu html – Ví dụ đoạn mã sau vào trong phần thân Tiêu đề lớn nhất Tiêu đề lớn thứ hai Tiêu đề thứ 3 Tiêu đề thứ 4 Tiêu đề thứ 5 Tiêu đề nhỏ nhất Thiết kế web với HTML 24 • Lưu tài liệu lại với phần mở rộng là htm • Mở thư mục làm việc để mở trang html của mình mới . b i các trình duy t Web. ể ị ở ệ Thiết kế web với HTML 4 Web Page (Trang Web) : Là tài li u ệ HTML. Web site: Là m t s các trang Web liên ộ ố k t v i nhau.ế ớ World Wide Web (www): Là d ch v. THI T K WEB Ế Ế THI T K WEB Ế Ế V I HTML Ớ V I HTML Ớ Lê Anh Nh tậ Đt: 0912.844.866 Email: leanhnhat@tuyenquang.edu.vn Thiết kế web với HTML 2 Tài li u tham kh oệ ả 1. T h c HTML và XHTML trong. mà HTML là n n t ng.ầ ủ ề ả Thiết kế web với HTML 5 2. Nh ng ng d ng c a HTML ứ ụ ủ – HTML là n n t ng c a World Wide Web, m t d ch ề ả ủ ộ ị v toàn c u c a Internet.ụ ầ ủ – HTML đ thi t k Web