Session03 concepts HTML Lập Trình Web Tĩnh

Lập trình web tĩnh Html dành cho người mới bắt đầu học lập trình web Mình khuyên các bạn nên học đầy đủ từ bài số 1 trở điVà kết hợp với video khi sử dụng slide nhưng do video mình chưa có thời gia up lên khi nào có mình sẽ cho link lên mục này

Chương Các thẻ Mục tiêu học : Kết thúc chương này, bạn có thể:  Sử dụng thẻ  Chèn hình ảnh vào tài liệu HTML Giới thiệu Chương thảo luận thẻ HTML thẻ tiêu đề (Header), thẻ đoạn thẻ khối Phần nói danh sách (Lists) làm để sử dụng ảnh tài liệu HTML 3.1 Headings (Tiêu đề) Phần tử sử dụng để cung cấp tiêu đề cho phần nội dung hiển thị trang web Tất phần tử tiêu đề phải có thẻ kết thúc Nó bắt đầu thẻ kết thúc Những phần tiêu đề hiển thị to in đậm để phân biệt chúng với phần lại văn Chúng ta hiển thị phần tiêu đề sáu kích thước từ H1 đến H6 Tất làm định rõ kích thước H1, H2…Trình duyệt trọng đến cách hiển thị Ví dụ 1: Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML { PAGE } Hình 3.1: Kết ví dụ 3.2 Các thẻ mức đoạn Phần ta học ba thẻ mức đoạn văn : , 3.2.1 Thẻ Phần tử dùng để hiển thị thông tin tác giả, địa chỉ, chữ ký tài liệu HTML.Phần tử thường hiển thị cuối trang chứa phần sau:  Liên kết đến trang chủ  Đặc tính chuỗi tìm kiếm  Thông tin quyền Ví dụ 2: Welcome to HTML My first HTML document This is going to be real fun Using another heading Another paragraph element { PAGE } Click page here href=”http://www.aptechto Visit Aptech’s home Hình 3.2: Kết ví dụ 3.2.2 Thẻ Chúng ta định trích dẫn văn bên tài liệu cách sử dụng phần tử BLOCKQUOTE Q BLOCKQUOTE sử dụng cho phần trích dẫn dài hiển thị đoạn văn thụt vào đầu dòng Nếu phần trích dẫn ngắn không cần ngắt đoạn,thì sử dụng phần tử Q tốt Khi sử dụng phần tử Q, bạn phải xác định dấu ngoặc kép Ví dụ 3: Learning HTML The blockquote element is used content in blocks of text Humpty Dumpty sat on a wall Humpty Dumpty had a great fall All the King’s horses to format the { PAGE } And all the King’s men Could not put Humpty Dumpty together again If you notice the content is rendered as a block of text Hình 3.3: Kết ví dụ 3.2.3 Thẻ Nếu muốn văn hiển thị với định dạng xác định trước, sử dụng phần tử PRE Phần tử dùng để xác định định dạng cho văn Khi văn hiển thị trình duyệt, tuân theo tất định dạng xác định trước mã nguồn tài liệu HTML Ví dụ 4: Learning HTML Humpty Dumpty sat on a wall Humpty Dumpty had a great fall All the King’s horses And all the King’s men { PAGE } Could not put Humpty Dumpty together again Hình 3.4: Kết ví dụ 3.3 Thẻ khối , Có trường hợp muốn chia văn trang web thành khối thông tin logic Chúng ta áp dụng thuộc tính thông thường cho toàn khối Phần tử DIV SPAN sử dụng để nhóm nội dung lại với Phần tử DIV dùng để chia tài liệu thành thành phần có liên quan với Phần tử SPAN dùng để khoảng ký tự Phần tử SPAN dùng để định nghĩa nội dung dòng(in-line) phần tử DIV dùng để định nghĩa nội dung mức khối (block-level) Ví dụ 5: Learning HTML Division The DIV element is used to group elements Typically, DIV is used for block level elements Division This is a second division Are you having fun? { PAGE } The second division is right aligned Common formatting is applied to all the elements in the division Chú ý : Phần tử SPAN không hiển thị Netscape Hình 3.5: Kết ví dụ 3.4 Các thẻ định dạng ký tự thường dùng HTML có nhiều thẻ sử dụng để định dạng nội dung tài liệu Các thẻ phân thành nhóm:  Thẻ định dạng mức vật lý Thẻ định dạng mức vật lý thẻ định rõ thay đổi đặc điểm văn mà bạn áp dụng thẻ { PAGE } Thẻ Mô tả In đậm … Cố định độ rộng văn Chỉ số Chỉ số Ví dụ Learning HTML This is good fun Learning HTML This is good fun Mathematical Formula pi*r2 Chemical Formula H2O  Thẻ định dạng mức logic Thẻ định dạng mức logic thẻ mô tả “hiệu ứng cần thiết” văn Sự hiển thị thật trình duyệt điều khiển Những thẻ định dạng mức vật lý trình duyệt hiển thị Những thẻ định dạng mức logic hiển thị tùy theo trình duyệt mà tài liệu HTML hiển thị Thẻ logic Mô tả Ví dụ Nhấn mạnh văn Learning HTML { PAGE } ………… Sử dụng phần trích mã chương trình Sử dụng cho biến chương trình Sử dụng cho trích dẫn tham chiếu 3.5 This is good fun Learning HTML x = X + Y = Y + 1 Learning HTML X Learning HTML It is the mark of an educated mind to be able to entertain a thought without accepting it Aristotle Danh sách Danh sách dùng để nhóm liệu cách logic Chúng ta thêm danh sách vào tài liệu HTML để nhóm thông tin có liên quan lại với Ví dụ, Roses Sunflowers Orchids Apples Oranges Daffodils Mangoes Có thể nhóm thành : Fruits { PAGE } Apples Mangoes Oranges Flowers Daffodils Orchids Roses Sunflowers Các loại danh sách mà bạn chèn vào tài liệu HTML :  Danh sách không xếp  Danh sách xếp  Danh sách định nghĩa 3.5.1 Danh sách không xếp Đây loại danh sách đơn giản mà bạn thêm vào tài liệu HTML Danh sách không xếp “bulleted list” Các mục bắt đầu dấu chấm tròn “bullet” Danh sách không xếp nằm cặp thẻ … Mỗi mục danh sách đánh dấu thẻ LI viết tắt từ List Item Thẻ kết thúc tùy chọn (không bắt buộc) Ví dụ 6: Learning HTML Monday Tuesday Wednesday Thursday Friday { PAGE } Hình 3.6: Kết ví dụ Chúng ta tạo danh sách lồng để mô tả nhóm thông tin Ví dụ 7: Learning HTML Monday Introduction to HTML Creating Lists Tuesday Creating Tables Inserting Images Wednesday Thursday Friday { PAGE } SQUARE> Square bullets Sphere bullets Round bullets Learning HTML Monday Introduction to HTML Creating Lists Tuesday Creating Tables Inserting Images Wednesday Creating Forms Working with Frames Thursday Friday Note: The TYPE attribute is not displayed in Internet Explorer 3.5.2 Danh sách xếp Danh sách xếp nằm cặp thẻ … Danh sách xếp hiển thị mục danh sách Sự khác mục danh sách hiển thị theo thứ tự tạo cách tự động Ví dụ 8: Learning HTML Monday Tuesday Wednesday Thursday Friday { PAGE } Hình 3.8: Kết ví dụ Chúng ta đặt thuộc tính “hệ thống” số theo thứ tự tạo cho mục danh sách Thuộc tính Upper Roman Lower Roman Uppercase Lowercase Bắt đầu với số khác lớn Thẻ Thuộc tính START xác định số khởi tạo ban đầu danh sách Ví dụ 9: Learning HTML Monday Introduction to HTML Creating Lists Tuesday Creating Tables Inserting Images Wednesday { PAGE } Creating Forms Working with Frames Thursday Friday Hình 3.9: Kết ví dụ Chúng ta lồng loại danh sách lại với Có thể lồng danh sách xếp vào danh sách không xếp ngược lại Ví dụ 10: Learning HTML Monday Introduction to HTML Creating Lists { PAGE } Tuesday Creating Tables Inserting Images Wednesday Thursday Friday Hình 3.10: Kết ví dụ 10 3.5.3 Danh sách định nghĩa Danh sách định nghĩa dùng để tạo danh sách định nghĩa điều khoản Danh sách định nghĩa nằm cặp thẻ … Thẻ dùng để điều khoản thẻ dùng để định nghĩa điều khoản Ví dụ 11: Learning HTML Sunday The first day of the week HTML { PAGE } HyperText Markup Language Internet A network of networks TCP/IP Transmission Control Protocol Protocol / Internet Hình 3.11: Kết ví dụ 11 3.6 Thẻ kẻ đường ngang : Thẻ (horizontal rule) dùng để kẻ đường ngang trang.Những thuộc tính sau giúp điều khiển đường nằm ngang Nó có thẻ bắt đầu, thẻ kết thúc nội dung Thuộc tính align width size noshade Ví dụ 12: { PAGE } Mô tả Chỉ định vị trí đường nằm ngang Chúng ta đượ canh lề center(giữa)|right(phải)|left(trái) Ví dụ align=center Chỉ độ dài đường thẳng Nó xác định pixel tính theo phần trăm Mặc định 100%, nghĩa toàn bề ngang tài liệu Chỉ độ dày đường thẳng xác định pixel Chỉ đường hiển thị màu đặc thay có bóng Welcome to HTML My first HTML document This is going to be real fun /BODY> Hình 3.12: Kết ví dụ 12 3.7 Sử dụng font Thẻ dùng để điều khiển cách hiển thị văn trang web Chúng ta định thuộc tính kích thước, màu sắc, kiểu… Chúng ta đặt thuộc tính cho tài liệu cách đặt phần tử vào bên thẻ Ngoài ra, thuộc tính FONT đặt cho từ, phần phần tử trang Thuộc tính COLOR SIZE Mô tả Được dùng để màu font Chúng ta dùng tên màu giá trị thập phân để xác định màu Được dùng để kích thước font Chúng ta xác định kích thước FONT từ Kích thước lớn nhỏ Chúng ta dùng kích thước chuẩn kích thước liên quan đến kích thước chuẩn Ví dụ, kích thước 3, SIZE=+4 tăng lên SIZE=-1 giảm xuống { PAGE } FACE Được dùng để định kiểu font (phông chữ) Các thuộc tính FONT kết hợp thẻ Ví dụ 13 : Welcome to HTML My first HTML document This is going to be real fun Hình 3.13 Kết ví dụ 13 3.8 Sử dụng Chúng ta thêm màu vào trang vào phần tử trang COLOR thuộc tính sử dụng với nhiều phần tử phần tử FONT BODY Ví dụ 14 : Learning HTML Welcome HTML This is good fun { PAGE } to Hình 3.14 : Kết ví dụ 14 Có kiểu màu : đỏ, xanh xanh da trời Mỗi màu xem hai số hệ 16 #RRGGBB Số thập lục phân 00 0% màu số thập lục phân FF 100% màu Giá trị cuối mã sáu chữ số màu Mã thập lục phân #FF0000 #00FF00 #0000FF #000000 #FFFFFF 3.9 Màu Red Green Blue Black White Sử dụng hình ảnh tài liệu HTML “Một ảnh đáng giá ngàn chữ”, tất nhiên điều áp dụng cho trang web Những hình ảnh chèn vào trang web gọi ảnh nội tuyến Ảnh biểu tượng, bullet, ảnh, logo công ty nhiều khác Ngày có nhiều định dạng đồ họa sử dụng Tuy nhiên, Web có khác đôi chút Ba định dạng đồ họa thông thường hiển thị hầu hết trình duyệt :  Ảnh GIF (Graphics Interchange Format) (.GIF) GIF định dạng thông thường dùng tài liệu HTML Những file GIF định dạng không phụ thuộc vào định dạng hỗ trợ 256 màu Ưu điểm file GIF dễ để chuyển tải, kết nối sử dụng MODEM tốc độ chậm Có hai tiêu chuẩn cho file gif -87a 89a (hỗ trợ suốt) { PAGE }  Định dạng GIF xen kẽ(Interlaced GIF format): Một file ảnh thông thường hiển thị ảnh lần dòng Mặc dù ảnh xen kẽ hiển thị lần dòng, thứ tự có thay đổi  Ảnh GIF suốt (Transparent GIF images): Ảnh GIF suốt ảnh ảnh màu với trang web Ví dụ biểu tượng bullet có suốt chúng hợp với màu tài liệu  Ảnh JPEG (Joint Photographic Expert Group) (.JPEG) Cách nén JPEG lược đồ nén thông tin Điều có nghĩa ảnh sau bị nén không giống ảnh gốc Tuy nhiên trình phát lại ảnh tốt gần ảnh gốc Khi bạn lưu file với định dạng JPG, bạn định tỉ lệ nén Tỉ lệ cao ảnh giống ảnh gốc JPEG hỗ trợ 16 triệu màu thường sử dụng cho ảnh có màu thực Cả hai file ảnh dạng JPEG (đuôi mở rộng jpg) dạng GIF nén ảnh để đảm bảo chế độ chuyển tải qua internet nhanh Ảnh JPG nén nhiều chậm trình hiển thị so với ảnh GIF Có lẽ lý ảnh GIF phổ biến tài liệu HTML  PNG (Portable Network Graphics) Định dạng cho file PNG “lossless” (không thông tin) Trong nén “lossless”, liệu ảnh nén mà không bỏ chi tiết Các file PNG hỗ trợ ảnh màu thực dải màu xám Các file PNG nén chuyển qua mạng Khi định định dạng đồ họa, nên nhớ vài yếu tố :  Chất lượng ảnh – Chất lượng ảnh có quan trọng trình hiển thị không?  Độ lớn liệu – Kích cỡ file lớn thời gian truyền cao  Các yêu cầu hiển thị - Ảnh hỗ trợ suốt, hiển thị hay xen kẽ 3.9.1 Chèn ảnh Thẻ IMG dùng để chèn ảnh vào tài liệu HTML Chúng ta đặt thẻ IMG vị trí mà ảnh hiển thị Thẻ IMG nội dung, hiển thị nội dung cách xác định thuộc tính SRC Cú pháp : Trong SRC (source) thuộc tính giá trị URL, vị trí xác file ảnh Sometimes graphics may not say it all We may require giving the user some clue about the purpose of the graphic In this case, the images can be aligned with the text Đôi khi, hình ảnh nói lên tất Chúng ta cần phải cung cấp cho người dùng vài giới thiệu mục đích hình ảnh Bạn canh lề ảnh với văn { PAGE } Thuộc tính ALIGN thẻ IMG sử dụng để chỉnh canh lề ảnh với văn xung quanh Trong đó, vị trí ảnh trên, dưới, giữa, trái phải Ví dụ 15: Inserting an Image Inserting an Image Aligned at the bottom Aligned at the top Aligned in the middle Chú ý : file Flowers.jpg nằm thư mục với file HTML nguồn { PAGE } Hình 3.15: Kết ví dụ 15 Chú ý vài trình duyệt không hiển thị ảnh đồ họa Trong trường hợp này, cần xác định dòng thích thay tài liệu HTML Thông số ALT sử dụng để nội dung ảnh bạn Ví dụ 16: Inserting an Image Inserting an Image { PAGE } Hình 3.16: Kết ví dụ 16 (dòng văn giải thích hiển thị di chuyển chuột vào ảnh) Nền trang quan trọng văn Người ta thường sử dụng màu cho trang web, mục đích làm cho nội dung bật Chúng ta sử dụng ảnh để làm Để làm điều đó, ta cần phải dùng thuộc tính BACKGROUND thẻ BODY (Chỉ URL hoàn chỉnh ảnh) Nếu ảnh nhỏ phạm vi hiển thị tài liệu ảnh xếp kề để lấp đầy toàn vùng hiển thị Ảnh thường cuộn theo văn người dùng kéo cuộn trình duyệt Nếu không muốn thay vào ta muốn tạo hiệu ứng hình mờ, nghĩa văn cuộn ảnh đứng yên, ta thiết lập thuộc tính BGPROPERTIES thẻ BODY có giá trị FI ED Các ảnh chèn vào tài liệu HTML sử dụng siêu liên kết Những ảnh gọi siêu ảnh Khi người dùng kích vào ảnh, hiển thị tài liệu file URL Để làm điều này, ta cần lồng ảnh vào thẻ neo (anchor) { PAGE } Tóm tắt  Phần Header sử dụng để cung cấp phần đầu cho nội dung hiển thị trang Web  Phần tử sử dụng để hiển thị thông tin tác giả, địa chữ ký cho tài liệu HTML  Chúng ta trình bày lời trích dẫn cách sử dụng phần tử BLOCKQUOTE  Nếu bạn muốn đoạn văn với phần định dạng trước bạn sử dụng phần tử PRE  Phần tử SPAN sử dụng để định nghĩa nội dung dòng phần tử DIV dùng để định nghĩa nội dung mức khối (Block-level content)  Danh sách sử dụng để nhóm liệu cách logic Chúng thêm vào tài liệu HTML để nhóm thông tin có liên quan lại với  Thẻ dùng để vẽ đường ngang qua trang  Thẻ dùng để điều khiển việc hiển thị văn trang Web  Chúng ta đặt thuộc tính FONT cho toàn tài liệu cách sử dụng phần tử bên thẻ BODY  Màu thêm vào cho trang cho phần tử trang cách sử dụng thuộc tính COLOR  Màu xác định ba màu chủ đạo: đỏ, xanh lục, xanh dương (Red, Green, Blue) Mỗi màu định nghĩa số kết hợp từ hai số hệ thập lục phân  Những hình ảnh chèn vào trang web gọi hình ảnh dòng (Inline images) Nhũng hình ảnh biểu tượng, dấu gạch đầu dòng, hình ảnh, logo công ty, nhiều thứ khác  Thẻ IMG sử dụng để chèn hình ảnh vào tài liệu HTML  Thuộc tính ALIGN thẻ IMG sử dụng để điều chỉnh việc canh lề cho ảnh mối quan hệ với văn xung quanh  Đối với thuộc tính BACKGROUND thẻ BODY, thường sử dụng ảnh đóng vai trò ảnh  Ảnh chèn vào trang HTML mà phục vụ liên kết Những ảnh gọi siêu ảnh (hyperimage) { PAGE } Kiểm tra kiến thức Điền vào chỗ trống a Màu xác định màu , _ b sử dụng để nhóm liệu trang Web c Ảnh chèn vào trang Web gọi ảnh _ d Hai chuẩn file GIF _ _ e Tên đầy đủ PNG _ f Thẻ _ sử dụng để chèn ảnh vào tài liệu HTML g Tham số _ sử dụng để xác định đoạn thích cho ảnh { PAGE } Tự thực hành Viết đoạn HTML cho trang Web với tiêu đề, “Using headings” Thêm vào tiêu đề mức ba dòng chữ “My First HTML document” Thêm đoạn vào trang theo định dang : Little Miss Muffet Sat on a Tuffet Eating her curds and whey There came a spider and sat down beside her And frightened Miss Muffet away Tạo danh sách định nghĩa : Peacock National bird of India Internet A network of networks HTML HyperText Markup Language Tạo danh sách sau : Introduction to HTML a Introduction to the World Wide Web b Introduction to HTML tags  Formatting text  Enhancing the text Designing a Web Site i Designing the page ii Designing navigation iii Creating Hyperlinks Chèn ba ảnh vào tài liệu Chèn ba đường thẳng cen kẽ ảnh { PAGE } [...]... TYPE Ví dụ Learning HTML Monday Introduction to HTML Creating Lists Tuesday Creating Tables Inserting Images Wednesday Thursday Friday < /HTML> = { PAGE } SQUARE> Square bullets Sphere bullets Round bullets Learning HTML... liệu HTML “Một ảnh đáng giá bằng một ngàn chữ”, tất nhiên điều này có thể áp dụng cho một trang web Những hình ảnh được chèn vào trong trang web được gọi là những ảnh nội tuyến Ảnh có thể là biểu tượng, bullet, ảnh, logo công ty và nhiều cái khác Ngày nay có nhiều định dạng đồ họa đang được sử dụng Tuy nhiên, trên Web có khác đôi chút Ba định dạng đồ họa thông thường được hiển thị trên hầu hết các trình. .. away 3 Tạo một danh sách định nghĩa : Peacock National bird of India Internet A network of networks HTML HyperText Markup Language 4 Tạo một danh sách như sau : 1 Introduction to HTML a Introduction to the World Wide Web b Introduction to HTML tags  Formatting text  Enhancing the text 2 Designing a Web Site i Designing the page ii Designing navigation iii Creating Hyperlinks 5 Chèn ba ảnh vào tài... khoản còn thẻ được dùng để định nghĩa các điều khoản đó Ví dụ 11: Learning HTML Sunday The first day of the week HTML { PAGE } HyperText Markup Language Internet A network of networks TCP/IP Transmission Control Protocol Protocol < /HTML> / Internet Hình 3.11: Kết quả ví dụ 11 3.6 Thẻ kẻ đường ngang : ... bằng màu đặc thay vì có bóng Welcome to HTML My first HTML document This is going to be real fun /BODY> < /HTML> Hình 3.12: Kết quả ví dụ 12 3.7 Sử dụng font Thẻ dùng để điều khiển cách hiển thị văn bản trên trang web Chúng ta cũng có thể chỉ định các thuộc tính... kiểu font (phông chữ) Các thuộc tính của FONT có thể kết hợp trong cùng một thẻ Ví dụ 13 : Welcome to HTML My first HTML document This is going to be real fun < /HTML> Hình 3.13 Kết quả của ví dụ 13 3.8 Sử dụng Chúng ta có thể thêm màu vào trang và vào... trang COLOR là thuộc tính có thể được sử dụng với nhiều phần tử như phần tử FONT và BODY Ví dụ 14 : Learning HTML Welcome HTML This is good fun { PAGE } to < /HTML> Hình 3.14 : Kết quả của ví dụ 14 Có 3 kiểu màu chính : đỏ, xanh và xanh da trời Mỗi màu chính được... của danh sách Ví dụ 9: Learning HTML Monday Introduction to HTML Creating Lists Tuesday Creating Tables Inserting Images Wednesday { PAGE } Creating Forms Working with Frames Thursday Friday < /HTML> Hình 3.9: Kết quả... vài trình duyệt không hiển thị những ảnh đồ họa Trong trường hợp này, chúng ta cần xác định một dòng chú thích thay thế trong tài liệu HTML Thông số ALT được sử dụng để chỉ nội dung ảnh của bạn Ví dụ 16: Inserting an Image Inserting an Image < /HTML> ... _ và _ e Tên đầy đủ của PNG là _ f Thẻ _ được sử dụng để chèn ảnh vào một tài liệu HTML g Tham số _ được sử dụng để xác định đoạn chú thích cho một ảnh { PAGE } Tự thực hành 1 Viết một đoạn HTML cho trang Web với tiêu đề, “Using headings” Thêm vào tiêu đề mức ba dòng chữ “My First HTML document” 2 Thêm một đoạn vào trang theo định dang dưới : Little Miss Muffet Sat on a Tuffet