Bài soạn Hướng dẫn thiết kế Website với HTML

THI T K WEB Ế Ế THI T K WEB Ế Ế V I HTML Ớ V I HTML Ớ 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 [...]... 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 18 Chương 2 Điều chỉnh 1 tài liệu HTML. .. "-//W3C//DTD HTML 4.0 Transitional//EN"> 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 Chúc mừng bạn đã tạo được trang web đầu tiên! Thiết kế. .. đề 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. .. 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 trong tài liệu web – Thường đây là dòng đầu tiên trong file HTML – Ví dụ: 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 Tag Tag Tag Tag Chữ... 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: Tiêu đề... đề • 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... 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... 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 . I HTML Ớ V I HTML Ớ 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 . kế web với HTML 18 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 19 Ch ng 2ươ Đi u ch nh 1 tài li u HTML