Đang tải... (xem toàn văn)
Nghiên cứu về web tĩnh với các ngôn ngữ lập trình hỗ trợ như HTML, JavaSript và CSS
Lời mở đầu Hiện nay, internet đã qua quen thuộc với chúng ta, và một trong những ứng dụng hàng đầu của internet là web. Web là nơi để chia sẻ thông tin về mọi mặt, có thể nói web là nền tảng để phát triển internet. Ngày càng có nhiều người yêu thích công việc tạo ra các trang web, đây là một công việc đòi hỏi bạn ngoài kiến thức chuyên môn còn phải có sự kiên nhẫn, tính thẩm mỹ. . . Nói chung việc học lập trình web không khó, chỉ đòi hỏi bạn tập trung và có tính sáng tạo. Xét trên phương diện nhập môn có thể nói: “Người lập trình như 1 nhà thám hiểm, và các kiến thức về web như 1 hang động để ta vào thám hiểm”, vì vậy tôi cũng muốn trở thành 1 nhà thám hiểm, để tìm hiểu sự hiền bí của các trang web. Có rất nhiều các ngôn ngữ dùng để lập trinh web, nhưng xét về phương diện nhập môn, ta chỉ nghiên cứu về web tĩnh với các ngôn ngữ lập trình hỗ trợ như HTML, JavaSript, và CSS. Ngoài các ngôn ngữ trên ta cũng cần 1 phần mềm diễn dịch, và theo tôi nên dùng notepad++, tuy không hổ trợ quá nhiều cho việc lập trình web nhưng nó có đủ các yêu cầu cần có. Sau một thời gian nghiên cứu và tìm hiểu, tôi làm bài thu hoạch này để tổng kết những gì mình đã có được. Tôi xin chân thành cảm ơn giảng viên Nguyễn Ngọc Dũng và giảng viên Lê Thanh Hương đã giúp đỡ và hướng dẫn tôi làm bài báo cáo này. Tôi xin chân thành cảm ơn 1 NỘI DUNG PHẦN 1 :HTML 1.Định nghĩa -HTML (Hyper Text Markup Language): ngôn ngữ đánh dấu siêu văn bản -Là một ngôn ngữ để xây dựng một trang web -Một trang web thông thường gồm có 2 thành phần chính: -Dữ liệu của trang web(văn bản, âm thanh, hình ảnh. . . ) -Các thẻ(tag) HTML dùng để định dạng mô tả cách thức các dữ liệu trên hiển thị trên trình duyệt 2.Các tag thông dụng Các tag mở đầu : -<html>. . . </html> : Định nghĩa phạm vi của văn bản -<head>. . . </head> : Định nghĩa các mô tả về trang -<title>. . . </title> : Mô tả tiêu đề trang web -<body>. . . </body>: Xác định vùng thân của trang web,nơi chứa các thông tin Các tag xử lý văn bản : Các thẻ định dạng khối văn bản -Tiêu đề(Heading): <h1>,<h2>,<h3>,<h4>,<h5>,<h6> -Đoạn văn bản(Paragraph): <p> -Danh sách (List Items): <li> -Đường kẻ ngang(Horizontal Rules): <hr> Các thẻ định dạng chuỗi văn bản -Định dang chữ : <em>, <i>, <b> ,<b> ,<font> -Tạo siêu liên kết : <a> -Xuống dòng : <hr> Các thẻ định dạng ký tự -<b>. . . </b>,<strong>. . . </strong> : In chữ đậm -<i>. . . </i> ,<em>. . . </em>,<dfn> : In chữ nghiêng -<u>. . . </u> :In chữ gạch chân 2 -<s>. . . </s>,<strike>. . . </strike> : In chữ bị gạch ngang -<big>. . . </big> : In chữ lớn hơn bình thường -<smail>. . . </smail> : In chữ nhỏ hơn bình thường -<sup>. . . </sup> : Chỉ số trên ( SuperScript ) -<sub>. . . </sup> : Chỉ số dưới(SuperScript) -<basefont> : Định nghĩa kích thước font chữ đượcsử dụng cho đến hết văn bản. Thẻ nàychỉ có tham số size. Thẻ này không có kết thúc -<font>. . . </font> :chọn kiểu chữ hiển thị. Có hai tham số Size và color. Các tag hình ảnh -<img> : tag hinh anh co các thuộc tính -Src : Đường dẫn dến file hình ảnh -Alt : chú thích cho hình ảnh -Position : Top Bottom, Middle -Border : Độ dày nét viền quang ảnh -<body background=’Image Path’ Các tag âm thanh <bgsound> : Không có tag đóng, có các thuộc tính sau : -Src : Đường dẫn đến file âm thanh -Loop : Số lần lặp -Thường đặt trong tag <head> của trang web Các thẻ định dạng danh sách -<ul> : Danh sách không có sắp xếp -<ol> : Danh sách có sắp xếp -<menu> : Danh sách thực đơn -<dir> : Danh sách phân cấp Thẻ tạo liên kết <a Href = url Name=name Tabindex= n Title = title Target =_blank/_self> 3 Siêu văn bản </a> Thẻ tạo kết nối mailto <address> Mọi chi tiêt xin liên hệ với chúng tôi qua <a href=mailto:webmaster@vnuh.edu.vn> WEBMASTER</a></address> Thẻ marquee : dùng để tạo hiệu ứng chữ chạy trên màn hình trình duyệt < marquee Behavior=alternate|scroll|slide Direction=Down|left| Right|up Loop=string Scroollamount=long Scroolldelay=long> dòng chữ cần chạy </marquee> Thẻ tự động refresh/redirect trang web <head> <meta http-equiv=”refresh” Content=”t”; url=”url”> </head> 4 PHẦN 2 JAVASCRIPT 1.Định nghĩa -Script là ngôn ngữ dạng thông dịch -Cho phép Web tương tác với người dùng -Các ngôn ngữ thông dụng -Javascipt -Jscipt -VBScript -PHP,CGI -web động ->Netscape ->Scipt Languae : LiveScipt=>Javascipt -javascipt là ngôn ngữ dự trên đối tượng : math, document,windows,. . . -JavaScipt không phải là ngôn ngữ hướng đối tượng như C++, Java. . . -thiết kế độc lập với hệ điều hành 2.Vị trí của JavaScript trong HTML -Sử dụng các câu lệnh và các hàm trong cặp thẻ : <script>. . . </script> -Đặt giữa tag <head> và </head> : đoạn script sẽ thực thi ngay khi trang web được mở -Đặt giữa tag <body> và </body> : đoạn script trong phần body được thực thi khi trang web đang mở -Số lượng đoạn script không hạn chế. -Xử dụng một file nguồn JavaScipt Cú pháp <SCRIPT SRC="file_name.js"> </SCRIPT> 3.Các lệnh trong JavaScript 3.1.Lệnh điều kiện Câu lệnh điều kiện cho phép Chương trình ra quyết định và thực hiện công việc nào đấy dựa trên kết quả của quyết định. Trong JavaScript, câu lệnh điều kiện là: if . else 5 Câu lệnh này cho phép bạn kiểm tra điều kiện và thực hiện một nhóm lệnh nào đấy dựa trên kết quả của điều kiện vừa kiểm tra. Nhóm lệnh sauelse không bắt buộc phải có, nó cho phép chỉ ra nhóm lệnh phải thực hiện nếu điều kiện là sai. Cú pháp if ( <điều kiện> ) //Các câu lệnh với điều kiện đúng else //Các câu lệnh với điều kiện sai Ví dụ: if (x==10) document.write(“x bằng 10, đặt lại x bằng 0.”); x = 0; else document.write(“x không bằng 10.”); 3.2. Câu lệnh lặp Câu lệnh lặp thể hiện việc lặp đi lặp lại một đoạn mã cho đến khi biểu thức điều kiện được đánh giá là đúng. JavaScipt cung cấp hai kiểu câu lệnh lặp: for loop while loop a.Vòng lặp for Vòng lặp for thiết lập một biểu thức khởi đầu -initExpr, sau đó lặp một đoạn mã cho đến khi biểu thức<điều kiện> được đánh giá là đúng. Sau khi kết thúc mỗi vòng lặp, biểu thức in cr Exp r được đánh giá lại. Cú pháp: For (initExpr; <điều kiện> ; incrExpr) 6 //Các lệnh được thực hiện trong khi lặp Ví dụ: <HTML> <HEAD> <TITLE>For loop Example </TITLE> <SCRIPT LANGUAGE= "JavaScript"> for (x=1; x<=10 ; x++) y=x*25; document.write("x ="+ x +";y= "+ y + "<BR>"); </SCRIPT </HEAD> <BODY></BODY> </HTML> Vòng lặp này sẽ thực hiện khối mã lệnh cho đến khi x>10. b.WHILE Vòng lặp while lặp khối lệnh chừng nào <điều kiện> còn được đánh giá là đúng Cú pháp: while (<điều kiện>) //Các câu lệnh thực hiện trong khi lặp Ví dụ: x=1; while (x<=10) y=x*25; document.write("x="+x +"; y = "+ y + "<BR>"); x++; Kết quả của ví dụ này giống như ví dụ trước. 3.3. Các câu lệnh thao tác trên đối tượng JavaScript là một ngôn ngữ dựa trên đối tượng, do đó nó có một 7 số câu lệnh làm việc với các đối tượng. a.For. . . in Câu lệnh này được sử dụng để lặp tất cả các thuộc tính (prop- erties) của một đối tượng. Tên biến có thể là một giá trị bất kỳ, chỉ cần thiết khi bạn sử dụng các thuộc tính trong vòng lặp. Ví dụ sau sẽ minh hoạ điều nà y Cú pháp for (<variable> in <object>) //Các câu lệnh Ví dụ sau sẽ lấy ra tất cả các thuộc tính của đối tượng Window và in ra tên của mỗi thuộc tính <HTML> <HEAD> <TITLE>For in Example </TITLE> <SCRIPT LANGUAGE= "JavaScript"> document.write("The properties of the Window object are: <BR>"); for (var x in window) document.write(" "+ x + ", "); </SCRIPT> </HEAD> <BODY> </BODY> </HTML> b.New Biến New được thực hiện để tạo ra một thể hiện mới của một đối tượng Cú pháp objectvar = new object t ype(param1[, param2] . . . [, paramN]) 8 Ví dụ sau tạo đối tượng person có các thuộc tính firstname, lastname, age, sex. Chú ý rằng từ khoá this được sử dụng để chỉ đối tượng trong hàm person. Sau đó ba thể hiện của đối tượng person được tạo bằng lệnh New <html> <head> <title>New example</title> <script languge=”javascript” function person(first_name, last_name, age, sex) this.first_name=first n ame; this.last_name = last n ame; this.age = age; this.sex = sex; person1 = newperson(”T huy”, ”DauBich”, ”23”, ”F emale”); person2 = newperson(”Chung”, ”NguyenBao”, ”24”, ”Male”); person3 = newperson(”Binh”, ”NguyenNhat”, ”24”, ”Male”); person4 = newperson(”Hon”, ”ŒV n”, ”24”, ”Male”); document.write(”1.”+person1.last n ame+””+person1.first n ame+ ” < BR > ”); document.write(”2.”+person2.last n ame+””+person2.first n ame+ ” < BR > ”); document.write(”3.”+person3.last n ame+””+person3.first n ame+ ” < BR > ”); document.write(”4.”+person4.last n ame+””+person4.first n ame+ ” < BR > ”); < /script > < /head > < body > < /body > < /html > c.This Từ khoá this được sử dụng để chỉ đối tượng hiện thời. Đối tượng 9 được gọi thờng là đối tượng hiện thời trong Phương thức hoặc trong hàm. Cú pháp This [.property] Có thể xem ví dụ của lệnh new. d.With Lệnh này được sử dụng để thiết lập đối tượng ngầm định cho một nhóm các lệnh, bạn có thể sử dụng các thuộc tính mà không đề cập đến đối tượng. Cú pháp with (object) // statement 4.Các đối tượng trong JavaScript -Đối tượng navigator -Đối tượng window -Đối tượng location -Đối tượng frame -Đối tượng document -Đối tượng anchors -Đối tượng forms -Đối tượng history -Đối tượng links -Đối tượng math -Đối tượng date -Đối tượng string -Các phần tử của đối tượng form -Thuộc tính type -Phần tử button -Phần tử checkbox -Phần tử File Upload -Phần tử hidden -Phần tử Password -Phần tử radio -Phần tử reset 10 [...]... : CSS 1.Giới thiệu CSS 1.1 Mở đầu Trong lĩnh vực xây dựng, chúng ta có trang trí nội thất; trong lĩnh vực thẩm mỹ - làm đẹp, chúng ta có kỹ thuật make-up; còn trong lĩnh vực thiết kế web chúng ta có CSS CSS (Cascading Style Sheets) tạm dịch là tờ mẫu theo Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML, -Dùng để mô tả cách hiển thị các. .. điểm : Không được hỗ trợ rộng rãi, hoặc hỗ trợ không hết 1.3.Quy tắc tạo CSS : Cú pháp : Selector{property: value;} Trong đó Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính 11 trình bày Nó là các tag HTML, class hay id (chúng ta sẽ học về 2 thành phần này ở bài học sau) Ví dụ: body, h2, p, img, title, content, username, property: Chính là các thuộc tính quy định cách trình bày Ví dụ:... Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong thẻ style chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng css) bên ngoài và liên kết nó vào trang web bằng thuộc tính href trong thẻ link Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu Đầu tiên chúng ta sẽ tạo ra một file vidu.html có nội dung như sau:... giá trị cho thuộc tính position Như đơn vị chính xác như centimeters, pixels, inches, hay các đơn vị qui đổi như %, hoặc các vị trí đặt biệt như top, bottom, left, right 3.Font Chữ Chúng ta đã được tìm hiểu về cách định dạng màu chữ bằng CSS. Trong bài này, chúng ta sẽ tiếp tục tìm hiểu thêm về các thuộc tính CSS liên quan tới font chữ của các thành phần trong một trang web 3.1 Thuộc tính font-family:... và thêm vào các kiểu định dạng đặc biệt cho phần nội dung một trang web là một vấn đề quan trọng cho bất cứ nhà thiết kế web nào Như đã nói, ở bài học này chúng ta sẽ được tìm hiểu về các thuộc tính CSS về định dạng văn bản 4.1 Màu chữ (thuộc tính color): Để định màu chữ cho một thành phần nào đó trên trang web chúng ta sử dụng thuộc tính color Giá trị của thuộc tính này là 16 các giá trị màu CSS hỗ. .. áp dụng các đặc tính đặc biệt cho một thành phần web Ở bài kế tiếp chúng ta sẽ được học thêm về hai thẻ và trong HTML và ý nghĩa 2 thẻ này đối với việc viết CSS 7 Span & Div Như đã hứa, ở bài học này chúng ta sẽ cùng tìm hiểu về 2 thẻ và trong HTML và xem chúng có lợi ích gì cho công việc viết CSS của chúng ta 7.1 Nhóm phần tử với thẻ : Thẻ trong HTML thật ra là... như sau: margin: | | | Hoặc: margin:|< value2> – với value 1 là giá trị margin23 top và margin-bottom và value2 là giá trị margin-left và marginright Kết quả của ví dụ trên sẽ được mô hình hóa như sau: Ví dụ kế tiếp sẽ thể hiện rõ hơn về việc dùng margin để canh lề cho các đối tượng trong trang web Các bạn hãy quan sát các đường viền và. .. trong một trang web Nó thường được dùng trong trang trí, đóng khung cho một đối tượng cần nhấn mạnh, phân cách các đối tượng giúp trang web trông dễ nhìn hơn, Trong bài học này, chúng ta sẽ cùng tìm hiểu về cách dùng CSS để định border cho các đối tượng web 10.1 Thuộc tính border-width: Border-width là một thuộc tính CSS quy định độ rộng cho viền của một đối tượng web Thuộc tính này có các giá trị:... văn bản như sau: Ví dụ Welcome To WallPearl’s Blog Cách 2: Bên trong (thẻ style) Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một phương cách thay thế cách thứ nhất bằng cách rút tất cả các thuộc tính CSS vào trong thẻ style Cách 3: Bên ngoài (liên kết với một file CSS bên... thêm thẻ vào đoạn HTML như sau: Không có gì quý hơn độc lập, tự do Và bây giờ chúng ta có thể viết CSS cho yêu cầu trên: nhanmanh { font21 weight:bold } Rất đơn giản phải không nào 7.2 Nhóm khối phần tử với thẻ : Cũng như , cũng là một thẻ trung hòa và được thêm vào tài liệu HTML với mục đính nhóm các phần tử lại