CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1Ngôn ngữ sử dụng trong thiết kế website: Ngôn ngữ HTML : Nếu trang web của bạn muốn hiển thị nội dung cho người truy cập thì sẽ phải cần đến HTML. HTML cho phép trang web của bạn có thể lưu trữ âm thanh, video, văn bản và một số ứng dụng khác. HTML được dùng để tạo nội dung cho trang web Thiết kế giao diện cho trang web HTML5 hiện đang là phiên bản HTML mới nhất với những cải tiến rõ rệt so với các phiên bản trước. Bởi vậy hiện nay, mọi người thường sử dụng HTML5 để thiết kế giao diện website.
Tuy nhiên, bạn chỉ có thể dùng HTML để tạo bộ khung sườn cho trang web mà thôi. Để thiết kế hoàn thiện một trang web, bạn cần sử dụng đến CSS để chỉnh sửa màu sắc, kích thước, vị trí của các biểu tượng và một số vấn đề phức tạp khác. Bên cạnh đó, bạn còn cần phải có kiến thức chuyên môn về lập trình. Lập trình tương tác cho trang web 7 Thông qua HTML, bạn có thể lập trình tương tác giữa người dùng với trang web.
Để làm được điều này, bạn cần dùng code JavaScript. JavaScript sẽ tạo ra những hiệu ứng khi người dùng nhấp và di chuyển chuột trên website. HTML được dùng để lập trình tương tác cho trang web Cấu trúc HTML <html></html>: định nghĩa phạm vi của văn bản html <head></head>: định nghĩa các mô tả về trang html. Thông tin trong thẻ này không được hiển thị trên trang web <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 hiển thị trên trang.
Tag xử lý văn bản Các tag định dạng văn bản Tiêu đề(Heading): <h1>, < h2>, < h3>, < h4>, <h5>, < h6> Đoạn văn bản(Paragraph): <p> 8 + Đường kẻ ngang(Horizontal Rules): <hr/> + Các tag định dạng chuỗi + Định dạng chữ: <em>, <i>, <b>, <font> + Tạo siêu liên kết: <a> thẻ này ta sẽ tìm hiểu ở phần riêng + Xuống dòng: <br/>. Các tag trình diễn văn bản + Định dạng kiểu chữ : <b> : Bold text <strong> :Important text <i> : Italic text <em> : Emplasized text <mark> : Marked text <small> : Smaller text <del> : Deleted text <ins> : Inserted text <sub> : Subscript text <sup> : Superscript text Các tag trình diễn văn bản + Tag<pre>: hiển thị đúng dạng văn bản đã soạn thảo(khoảng trắng, xuống dòng) + Một số tag khác <blockquote>: phát hiện trích dẫn từ 1 nguồn khác <q>: biểu diễn dấu nháy kép <abbr>: thẻ đánh dấu cum từ viết tắt(sẽ hiển thị thông tin đầy đủ cum từ viết tắt khi ta dê truột qua chúng) <address>: biểu diễn thông tin liên hệ của chủ tác giả tài liệu, bài viết. Thường thêm ngắt dòng trước và sau thẻ này và thông tin trong thẻ được viết in nghiêng <bdo> <cite>. 9 HTML style + Trong các HTML Tag ta có thể thêm các thuộc tính cho chúng.
Chẳng hạn như màu sắc, font chữ kích thước… + Cú pháp để thêm các thuộc tính cho các HTML Tag <tag_name style="property:value;"> + Một số thuộc tính của các Tag HTML Màu nền: background-color Màu chữ văn bản: color Font chữ văn bản: font-family Kích cỡ font chữ văn bản: font-size Căn lề cho văn bản: text-align HTML color + Màu tông html được biểu diễn với tên của màu xác định trước, hoặc các giá trị RGB, HEX, HSL, RGBA hoặc HSLA RGB: sử dụng 3 màu chính(Đỏ, Xanh lục, Xanh lam viết tắt là RGB) sử dụng tổ hợp với nhau theo nhiều phương thức để tạo thành các màu khác nhau HEX: là cách thể hiện màu từ nhiều mô hình màu khác nhau thông qua các giá trị thập lục phân. Mỗi giá trị màu HEX tuân theo định dạng #RRGGBB(Đỏ, Xanh lục, Xanh lam). Các số nguyên thập lục phân có thể nằm trong phạm vi 00-FF để chỉ định cường độ màu sắc + Cách lấy giá trị trong thuộc tính mầu của html RGB: style=“background-color: rgb(value1, value2, value3)” HEX: style=“background-color: #ff…” HSL: style=“background-color: hsl(value,%,%)” RGBA:style=“background-color:rgba(value1,value2, value3,value4)” HSLA: style=“background-color:rgb(value1, %,%, value2)” 10 HTML Link + Liên kết được sử dụng hầu hết trong các trang web. Cho phép người dung chuyển từ trang web này sang một trang khác bằng cách nhấp vào link được cung cấp bởi một Tag liên kết trang <a> hay còn gọi là (anchor-mỏ neo).
+ Cú pháp: <a href=“url” target=“…”> Link text</a>. Ta sẽ tìm hiểu các giá trị truyền vào với href và target + Các dạng url: url có dạng được viết như sau + protocol://site address/dierectory/filename. + Các giá trị được truyền vào thuộc tính target: _blank: tải trang web vào cửa sổ mới _parent: tải trang web vào cửa sổ cha của nó _self: tải trang web vào chính cửa sổ hiện hành _top: tải trang web vào cửa sổ cao nhất + Phân loại liên kết trang Liên kết ngoại(external link): khi click vào link sẽ cho phép ta chuyển sang trang mới thông qua “url” của thuộc tính href của tag <a> <a href = “url”>Text đại diện</a> Liên kết bookmark: khi click vào link cho phép ta chuyển đến frame(chỉ mục) nào đó trong cục bộ của trang web đó thông qua thuộc tính id của frame đó Liên kết Email url: có 2 loại địa chỉ Địa chỉ tuyệt đối: là vị trí tuyệt đối so với mạng internet Địa chỉ tương đối: là vị trí tương đối so với trang web hiện hành đang chứa liên kết Một số ký hiệu đường dẫn HTML List: Trong HTML có thể tạo được danh sách Không Theo Thứ Tự (Unordered list), danh sách Theo Thứ Tự (Ordered list) và danh sách Miêu Tả (Description list) 11 HTML Table: dùng để trình bày dữ liệu có cấu trúc theo định dạng: dòng(thẻ lệnh tr), cột(thẻ lệnh td). HTML div Tag <div></div> viết tắt của division nghĩa là phân chia vùng hay khu vực.
Giúp trình duyệt web hiểu rõ các vùng được bố cục trên trang web Tag <div></div> cùng với 1 số tag như <span></span>, <section></section>, … là các phần tử khối(tìm hiểu HTML block và Inline) Chứa được hầu hết các tag trong html Một số tag không được chứa bên trong tag <divv></div>: <html></html>, <meta></meta>, <body></body>, <title></title>, < link ></link> Một số thẻ không nên chứa bên trong tag <div></div>: <style> </style>, <script></script > HTML span Tag <span></span>: thuộc nhóm phần tử Inline(nội dòng) Tag <span></span>: thường được sử dụng để gộp nhóm các phần tử mà không làm ảnh hưởng đến các văn bản chung của một hang Tag <span></span> không có thuộc tính bắt buộc nhưng kiểu lớp và id là phổ biến sử dụng cùng với css để tạo style cho văn bản HTML class Class là một thuộc tính của các phần tử trong HTML dùng để chỉ địn một lớp cho phần tử(tag) HTML Nhiều phần tử HTML có thể cùng chia sẻ một class Sử dụng thuộc tính class: được sử dụng để trỏ đến một tên class. Chúng thường được sử dụng cùng với CSS và javascript để truy cập và thao tác các phần tử với tên lớp cụ thể HTML id Thuộc tính id của phần tử HTML dùng để chỉ định một id duy nhất cho một phần tử HTML 12 Không thể có nhiều phần tử HTML có cùng id Thuộc tính id của các phần tử HTML được dùng với css và javascript để truy cập, thao tác với các phần tử HTML Tag hình ảnh <img>: không có thẻ đóng scr: đường dẫn đến file hình ảnh(forder chứa image hoặc dường link đến một địa chỉ server/website nào đó có các image cần lấy) alt: chú thích cho hình ảnh trong trường hợp không có hình ảnh Ảnh nền cho trang web Sử dụng thuộc tính cho thẻ body đặt ảnh nền cho trang web <body background=“Image Path"> Image Map: Thẻ HTML <map> định nghĩa một bản đồ hình ảnh. Bản đồ hình ảnh là một hình ảnh có các khu vực có thể nhấp truột được. Các khu vực được xác định bằng một hoặc nhiều thẻ <area>.
shape=“rect”, shape=“circle”… : thuộc tính khoanh vùng được chọn, vùng có thể dạng hình chữ nhật hoặc hình tròn coords: phối hợp với thuộc tính shape xác định vị trí vùng trọn Animated Image: chèn các ảnh động Floating Image : Sử dụng thuộc tính Float CSS căn trái, phải cho images Image as a Link: chèn ảnh vào một link Tag video <video> <video [control]> <source src=“path" type=“format"> <source src=" path" type=“format"> </video> [control]: Các tham số điều khiển video controls(có thể pause, play,…) 13 autoplay(tự động chạy) path: Đường dẫn đến file video(có thể là thư mục chứa file video hoặc một link có đường dẫn tuyệt đối đến file video của một trang web nào đó) format: định dạng file video mà các trình duyệt hỗ trợ( tùy từng trình duyệt có thể hỗ trợ các định dạng như: .mp4, avi, ogg…) Tag audio <audio> <video [control]> <source src=“path" type=“format"> <source src=" path" type=“format"> </video> [control]: Các tham số điều khiển video controls(có thể pause, play,…) autoplay(tự động chạy) path: Đường dẫn đến file audio(có thể là thư mục chứa file audio hoặc một link có đường dẫn tuyệt đối đến file audio của một trang web nào đó) format: định dạng file audio như (mp3…) Tag Iframe <iframe> Iframe được sử dụng như một khung để cho phép hiển thị nội dung của một trang web bên trong nó Cú pháp: <iframe src="url" title="description"></iframe> Một số thuộc tính của iframe src: đường dẫn địa chỉ của trang web cần đưa vào khung iframe width, height: độ rộng, chiều cao của iframe border: viền cho iframe. Nếu muốn bỏ viền ta sẽ style giá trị như sau:[style=“border:none;”].