Thiết kế web với HTLM

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 [...]... 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. .. tiêu đề 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... mở lúc đầ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 đề ở... 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ụ: 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 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ị Thiết kế web với HTML 12 1.4 Tag chú thích • Thẻ ... dụ Thiết kế web với HTML 30 2.4.2 Định dạng thuộc tính cho đường kẻ Thuộc tính Mô tả Size Thiết lập độ dày của đường kẻ ngang Width Tạo độ rộng(pixel) hay tỷ lệ phần trăm của đường thẳng so với độ rộng của cửa sổ Browser Align Căn lề cho đường thẳng (Left, right, center) Noshade Thay đổi thể hiện của đường kẻ ngang không có bóng Thêm thuộc tính vào đường thẳng Thiết kế web với. .. là center hoặc right • Ví dụ: Chữ ở 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... phải: 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... Chúc các bạn thành cơng!!! Thiết kế web với 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... 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 đã mở lúc đầu . c.ậ ượ Thiết kế web với HTML 17 Thiết 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. Thiết kế web với HTML 11 * Web browser – Là trình duy t Web, ví d : Microsoft ệ ụ Internet Explorer, FireFox, Opera, Netscape . Thiết kế web với HTML