web1012 - slide 1
Post on 23-Oct-2015
4 Views
Preview:
TRANSCRIPT
BÀI 1CƠ BẢN VỀ HTML
MỤC TIÊU BÀI HỌC
Những khái niệm về website:Thành phần của trang webTên miền, địa chỉ IPClient – server
Công việc thiết kế websiteNhững kiến thức cơ bản về HTML
Những khái niệm về website:Thành phần của trang webTên miền, địa chỉ IPClient – server
Công việc thiết kế websiteNhững kiến thức cơ bản về HTML
Slide 1 - Cơ bản về HTML 2
KHÁI NIỆM VỀ WEBSITE
KHÁI NIỆM VỀ WEBSITE
Tập hợp các trang web (webpages)
Chứa văn bản, đối tượng đồ họa(âm thanh, hình ảnh, …)
Được lưu trữ trên máy chủ web(web server)
Truy cập thông qua Internet và trìnhduyệt web (phần mềm ở client)
Website
Slide 1 - Cơ bản về HTML 4
Truy cập thông qua Internet và trìnhduyệt web (phần mềm ở client)
Cách thức hiển thị trang web: Web Client(trìnhduyệt)
Web Client(trìnhduyệt)
Web serverWeb serverHTML
URL
Máy chủ chứa web
TÊN MIỀN, ĐỊA CHỈ IP
Mỗi một máy tính tham gia vào mạng máy tính đềuđược gán một địa chỉ IP. Các máy tính khác nhau sẽcó địa chỉ IP khác nhauCó 2 phiên bản địa chỉ IP: 32 bit và 64 bitTên miền là tên tương ứng với địa chỉ IPMáy chủ DNS là nơi thực hiện nhiệm vụ ánh xạ giữatên miền và địa chỉ IP
Mỗi một máy tính tham gia vào mạng máy tính đềuđược gán một địa chỉ IP. Các máy tính khác nhau sẽcó địa chỉ IP khác nhauCó 2 phiên bản địa chỉ IP: 32 bit và 64 bitTên miền là tên tương ứng với địa chỉ IPMáy chủ DNS là nơi thực hiện nhiệm vụ ánh xạ giữatên miền và địa chỉ IP
Slide 1 - Cơ bản về HTML 5
64.233.181.9964.233.181.99 www.google.comwww.google.comDNSDNS
Địa chỉ IP Tên miền
CLIENT – SERVER – WEB HOST
Client – Server là loại kiếntrúc thông dụng cho nhiềuloại ứng dụng mạng, trongđó:
Server – máy chủ: Là máytính chuyên cung cấp tài nguyên,dịch vụ cho máy tính khác.Một máy chủ có thể được dùngcho một hoặc nhiều mục đíchkhác nhau. Phải được duytrì kết nối internet 24h/ ngày
Client – máy trạm: Là máy tính khai thác các dịch vụ được cung cấp bởimáy chủ. Việc khai thác này thường được thực hiện thông qua các phầnmềm
Client – Server là loại kiếntrúc thông dụng cho nhiềuloại ứng dụng mạng, trongđó:
Server – máy chủ: Là máytính chuyên cung cấp tài nguyên,dịch vụ cho máy tính khác.Một máy chủ có thể được dùngcho một hoặc nhiều mục đíchkhác nhau. Phải được duytrì kết nối internet 24h/ ngày
Client – máy trạm: Là máy tính khai thác các dịch vụ được cung cấp bởimáy chủ. Việc khai thác này thường được thực hiện thông qua các phầnmềm
Slide 1 - Cơ bản về HTML 6
THIẾT KẾ WEBSITE
THIẾT KẾ WEBSITEXác định yêucầu & phân
tích
Tổ chức vàphác thảo
websiteBảo trì
Thiết kếGraphic
Thiết kếHTML/ CSS/ Js
Viết mã lậptrình
Kiểm thử
Triển khai
Slide 1 - Cơ bản về HTML 8
Thiết kế website
THIẾT KẾ WEBSITE
Xác định yêu cầu và phân tích:Là quá trình thu thập và phân tích chi tiết tất cả cácyêu cầu liên quan đến website cần xây dựngMục tiêu là trả lời cho các câu hỏi sau:
• Mục đích của website là gì ?• Đối tượng sử dụng website ?• Website bao gồm các nội dung gì, liên kết giữa các nội
dung ra sao ?• Yêu cầu về hình thức cho website là gì ?• …
Đưa ra sitemap (cấu trúc website) cho toàn bộwebsite
Slide 1 - Cơ bản về HTML 9
Xác định yêu cầu và phân tích:Là quá trình thu thập và phân tích chi tiết tất cả cácyêu cầu liên quan đến website cần xây dựngMục tiêu là trả lời cho các câu hỏi sau:
• Mục đích của website là gì ?• Đối tượng sử dụng website ?• Website bao gồm các nội dung gì, liên kết giữa các nội
dung ra sao ?• Yêu cầu về hình thức cho website là gì ?• …
Đưa ra sitemap (cấu trúc website) cho toàn bộwebsite
THIẾT KẾ WEBSITE
Thiết kế Graphic:Thiết kế là quá trình xác định rõ về mặt nội dung vàhình thức cho websiteSản phẩm của quá trình thiết kế Graphic:
• Thiết kế dạng prototype (phác thảo) giao diện cho từngtrang web (mock-up)
• Thiết kế mịn giao diện từng trang web (photoshop,flash, firework, …)
Slide 1 - Cơ bản về HTML 10
Thiết kế Graphic:Thiết kế là quá trình xác định rõ về mặt nội dung vàhình thức cho websiteSản phẩm của quá trình thiết kế Graphic:
• Thiết kế dạng prototype (phác thảo) giao diện cho từngtrang web (mock-up)
• Thiết kế mịn giao diện từng trang web (photoshop,flash, firework, …)
THIẾT KẾ WEBSITE
Thiết kế HTML/ CSS/ Js:Đây là giai đoạn kết nối giữa giai đoạn thiết kế và giaiđoạn viết mã cho trang webSử dụng mã HTML/ CSS/ Js … để chuyển giao diệngraphic của web sang dạng chuẩn HTMLThực hiện đúng chuẩn trong bản thiết kế: kích thướcweb, khoảng cách các thành phần trên trang web,hình ảnh, …Chạy trên trình duyệt: không xảy ra
hiện tượng xô lệch web
Slide 1 - Cơ bản về HTML 11
Thiết kế HTML/ CSS/ Js:Đây là giai đoạn kết nối giữa giai đoạn thiết kế và giaiđoạn viết mã cho trang webSử dụng mã HTML/ CSS/ Js … để chuyển giao diệngraphic của web sang dạng chuẩn HTMLThực hiện đúng chuẩn trong bản thiết kế: kích thướcweb, khoảng cách các thành phần trên trang web,hình ảnh, …Chạy trên trình duyệt: không xảy ra
hiện tượng xô lệch web
THIẾT KẾ WEBSITE
Viết mã lập trình:Sử dụng các công cụ hỗ trợ và ngôn ngữ lập trình đểtạo ra website theo như thiết kế
Slide 1 - Cơ bản về HTML 12
THIẾT KẾ WEBSITE
Kiểm thử:Là quá trình kiểm tra tính năng, nội dung và giao diệncủa các trang Web dựa trên các yêu cầu đã được phântích ở bước đầu tiênViệc kiểm thử cần được thực hiện trên nhiều trìnhduyệt web khác nhau, nhiều loại mạng khác nhau
Triển khai và bảo trì:Triển khai là quá trình đưa website lên một Webserver cụ thể nào đó trên mạngBảo trì là công việc duy trì cập nhật nội dung/hìnhthức của trang web
Slide 1 - Cơ bản về HTML 13
Kiểm thử:Là quá trình kiểm tra tính năng, nội dung và giao diệncủa các trang Web dựa trên các yêu cầu đã được phântích ở bước đầu tiênViệc kiểm thử cần được thực hiện trên nhiều trìnhduyệt web khác nhau, nhiều loại mạng khác nhau
Triển khai và bảo trì:Triển khai là quá trình đưa website lên một Webserver cụ thể nào đó trên mạngBảo trì là công việc duy trì cập nhật nội dung/hìnhthức của trang web
THIẾT KẾ WEBSITE
Công cụ thiết kế website:Là các phần mềm hỗ trợ việc thiết kế website (giaodiện hình ảnh, mã)Bao gồm các tính năng sau:
• Soạn thảo HTML• Tạo giao diện trang Web theo kiểu WYSIWYG• Chạy Website trên máy cục bộ
Các công cụ thông dụng:• Adobe Dreamweaver• PHPEditor• Microsoft FrontPage
Slide 1 - Cơ bản về HTML 14
Công cụ thiết kế website:Là các phần mềm hỗ trợ việc thiết kế website (giaodiện hình ảnh, mã)Bao gồm các tính năng sau:
• Soạn thảo HTML• Tạo giao diện trang Web theo kiểu WYSIWYG• Chạy Website trên máy cục bộ
Các công cụ thông dụng:• Adobe Dreamweaver• PHPEditor• Microsoft FrontPage
CƠ BẢN VỀ HTML
CƠ BẢN VỀ HTML
Là ngôn ngữ đánh dấu siêu văn bản (HyperText MarkupLanguage)Là cơ sở hoạt động của webTrình duyệt đọc và xử lý mã HTML để bố cục và định dạng chocác thành phần (văn bản, hình ảnh, video, …) trên trang webXây dựng trên các thẻ dạng <>…</>:
Thẻ đóng và thẻ mởVí dụ: <html>…</html>
Tạo và chỉnh sửa HTML bằng các công cụ soạn thảo văn bản:NotepadTextEdit
Là ngôn ngữ đánh dấu siêu văn bản (HyperText MarkupLanguage)Là cơ sở hoạt động của webTrình duyệt đọc và xử lý mã HTML để bố cục và định dạng chocác thành phần (văn bản, hình ảnh, video, …) trên trang webXây dựng trên các thẻ dạng <>…</>:
Thẻ đóng và thẻ mởVí dụ: <html>…</html>
Tạo và chỉnh sửa HTML bằng các công cụ soạn thảo văn bản:NotepadTextEdit
Slide 1 - Cơ bản về HTML 16
CƠ BẢN VỀ HTML
Cấu trúc thẻ & thuộc tínhHTML sử dụng thẻ hoặc từ khóa (đặt trong dấu < và >)Thẻ mở kèm theo thẻ đóng: <body>…</body>Thẻ đóng: <br />
Mã HTML
Slide 1 - Cơ bản về HTML 17
File BasicHTML.html trongthư mục dw01lessons
Kết quả hiển thị
CƠ BẢN VỀ HTML
Cấu trúc trang HTML:
<!DOCTYPE html>: định nghĩa kiểu tài liệu, giúp trình duyệt hiển thị webchính xác<html>…</html>: nội dung mô tả trang web<body>…</body>: hiển thị nội dung trang web<h1>…</h1>: thẻ HTML, hiển thị nội dung như một nhóm<p>…</p>: thẻ HTML, hiển thị nội dung như một đoạn văn bản
Phần mô tả
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head>
<title>tiêu đề website</title></head><body>
<h1>My First Heading</h1><p>My first paragraph.</p>
</body></html>
Phần nội dung
Cấu trúc trang HTML:
<!DOCTYPE html>: định nghĩa kiểu tài liệu, giúp trình duyệt hiển thị webchính xác<html>…</html>: nội dung mô tả trang web<body>…</body>: hiển thị nội dung trang web<h1>…</h1>: thẻ HTML, hiển thị nội dung như một nhóm<p>…</p>: thẻ HTML, hiển thị nội dung như một đoạn văn bản
Slide 1 - Cơ bản về HTML 18
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head>
<title>tiêu đề website</title></head><body>
<h1>My First Heading</h1><p>My first paragraph.</p>
</body></html>
Phần nội dung
CƠ BẢN VỀ HTMLViết mã HTML trên trình soạn
thảo NotepadViết mã HTML trên trình soạn
thảo Notepad
Slide 1 - Cơ bản về HTML 19
Trang web hiển thị trên trìnhduyệt firefox
Trang web hiển thị trên trìnhduyệt firefox
CƠ BẢN VỀ HTML
Phân cấp thẻ trong HTML:Thẻ HTML tuân theo thứ tự phân cấp thẻ<html>các thẻ khác nằm dưới</html>
Slide 1 - Cơ bản về HTML 20
NHỮNG THÀNH PHẦN CỦA HTML
NHỮNG THÀNH PHẦN CỦA HTML
Nguyên tắc chung khi làm việc với thành phầnHTML:
Sử dụng nguyên tắc thẻ mở, thẻ đóngNội dung hiển thị nằm giữa 2 thẻMột số thành phần không có nội dung hiển thịMột số thành phần HTML bắt buộc phải có thuộc tính
Ví dụ:
Nguyên tắc chung khi làm việc với thành phầnHTML:
Sử dụng nguyên tắc thẻ mở, thẻ đóngNội dung hiển thị nằm giữa 2 thẻMột số thành phần không có nội dung hiển thịMột số thành phần HTML bắt buộc phải có thuộc tính
Ví dụ:
Slide 1 - Cơ bản về HTML 22
Thẻmở Nội dung hiển thị Thẻ đóng<p> Đoạn văn bản hiển thị trên web </p>
<a href="default.htm"> Nhấn để tới trang chủ </a>
<br>
NHỮNG THÀNH PHẦN CỦA HTML
Thuộc tính của thành phần HTML:Thuộc tính cung cấp thêm thông tin về một yếu tốThuộc tính luôn luôn quy định trong thẻ bắt đầuThuộc tính đến trong tên / cặp giá trị như: name="value”
Một số thuộc tính thường gặp của thành phần HTML:
<a href="http://www.w3schools.com">This is a link</a>
Thuộc tính của thành phần HTML:Thuộc tính cung cấp thêm thông tin về một yếu tốThuộc tính luôn luôn quy định trong thẻ bắt đầuThuộc tính đến trong tên / cặp giá trị như: name="value”
Một số thuộc tính thường gặp của thành phần HTML:
Slide 1 - Cơ bản về HTML 23
Thuộc tính Định nghĩaclass Quy định một hay nhiều lớp thuộc tính cho thành phần (liên
quan tới CSS)
id Chỉ định duy nhất một thuộc tính id cho thành phần (liên quantới CSS)
Style Xác định các thuộc tính dạng CSS Inline cho thành phần
title Quy định cụ thể thông tin thêm cho thành phần (dạng tooltips)
THÀNH PHẦN LÀM VIỆC VỚI VĂN BẢN
Một số thành phần HTML làm việc với văn bản:HTML HeadingsHTML ParagraphsHTML Text FormattingHTML Links
Một số thành phần HTML làm việc với văn bản:HTML HeadingsHTML ParagraphsHTML Text FormattingHTML Links
Slide 1 - Cơ bản về HTML 24
THÀNH PHẦN LÀM VIỆC VỚI VĂN BẢN
HTML Headings:Được sử dụng để định nghĩa thành phần tiêu đềĐược định nghĩa từ thẻ <h1> đến <h6>
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>
HTML Headings:Được sử dụng để định nghĩa thành phần tiêu đềĐược định nghĩa từ thẻ <h1> đến <h6>
Slide 1 - Cơ bản về HTML 25
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>
THÀNH PHẦN LÀM VIỆC VỚI VĂN BẢN
HTML Paragraphs:Tài liệu HTML được chia thành nhiều đoạnĐoạn được định nghĩa bởi cặp thẻ <p></p>
<p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p>
HTML Paragraphs:Tài liệu HTML được chia thành nhiều đoạnĐoạn được định nghĩa bởi cặp thẻ <p></p>
Slide 1 - Cơ bản về HTML 26
<p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p>
THÀNH PHẦN LÀM VIỆC VỚI VĂN BẢN
HTML Text Formatting:Sử dụng <b> and <i> cho định dạng đầu ra, nhưdạng bold, italic
<p><b>This text is bold</b></p><p><strong>This text isstrong</strong></p><p><i>This text is italic</i></p><p><em>This text is emphasized</em></p><p><code>This is computeroutput</code></p><p>This is<sub> subscript</sub> and<sup>superscript</sup></p>
Slide 1 - Cơ bản về HTML 27
<p><b>This text is bold</b></p><p><strong>This text isstrong</strong></p><p><i>This text is italic</i></p><p><em>This text is emphasized</em></p><p><code>This is computeroutput</code></p><p>This is<sub> subscript</sub> and<sup>superscript</sup></p>
THÀNH PHẦN LÀM VIỆC VỚI VĂN BẢN
HTML Links:Sử dụng <a> để định nghĩa dạng siêu liên kết (link)Liên kết có thể sử dụng thông qua một từ, cụm từ, hình ảnh, khi xảyra sự kiện click sẽ chuyển tới tài liệu khácTheo mặc định, các liên kết sẽ xuất hiện như sau trong tất cả cáctrình duyệt:
• Một liên kết unvisited được gạch dưới và màu xanh• Một liên kết đã xem được gạch dưới và màu tím• Một hoạt động liên kết được gạch dưới và màu đỏ
HTML Links:Sử dụng <a> để định nghĩa dạng siêu liên kết (link)Liên kết có thể sử dụng thông qua một từ, cụm từ, hình ảnh, khi xảyra sự kiện click sẽ chuyển tới tài liệu khácTheo mặc định, các liên kết sẽ xuất hiện như sau trong tất cả cáctrình duyệt:
• Một liên kết unvisited được gạch dưới và màu xanh• Một liên kết đã xem được gạch dưới và màu tím• Một hoạt động liên kết được gạch dưới và màu đỏ
Slide 1 - Cơ bản về HTML 28
<a href="http://www.w3schools.com"target="_blank">VisitW3Schools.com!</a>
TỔNG KẾT
Trang web là một trang nội dung, có thể chứa: ký tự,hình ảnh, âm thanh, flash và các đối tượng đồ họakhác. Hầu hết các trang web được trình bày dựa trênchuẩn HTMLHTML là ngôn ngữ đánh dấu siêu văn bản (HyperTextMarkup Language), là cơ sở của trang webKhi sử dụng HTML cần tuân thủ theo luật phân cấpthẻKhi thiết kế website, nên bắt đầu bằng việc tạo mộtsite tương ứng với nó trước
Trang web là một trang nội dung, có thể chứa: ký tự,hình ảnh, âm thanh, flash và các đối tượng đồ họakhác. Hầu hết các trang web được trình bày dựa trênchuẩn HTMLHTML là ngôn ngữ đánh dấu siêu văn bản (HyperTextMarkup Language), là cơ sở của trang webKhi sử dụng HTML cần tuân thủ theo luật phân cấpthẻKhi thiết kế website, nên bắt đầu bằng việc tạo mộtsite tương ứng với nó trước
Slide 1 - Cơ bản về HTML 29
top related