mở đầu và thẻ thứ hai là thẻ kết thúc. Ví dụ: <b > nội dung</b> - Dòng chữ ở giữa hai thẻ bắt đầu và kết thúc là nội dung. - Những thẻ HTML không phân biệt viết hoa và viết thường, ví dụ dạng <b> và <B> đều như nhau. Cấu trúc một trang web viết bằng html: <html> <head> <title>Tên tiêu đề trang web</title> </head> <body> 7 Giáo trình môn: Thiết kế & quản trị Website Trường Cao đẳng nghề Yên Bái </body> </html> Trong đó: • <html>: Báo cho Browser(trình duyệt web) biết nội dung bên trong thẻ là tài liệu html.
• Tag <head> khai báo thông tin cho trang HTML, những thông tin đó bao gồm: <title/>, <meta />, <link />,và <script> - Tag <title> : Giữa <title> và </title> là tiêu đề của trang web được browser trình bày phía trên cùng của menubar. - Tag <meta /> cung cấp thông tin dữ liệu về văn bản HTML, thông tin dữ liệu sẽ không được hiển thị trên trình duyệt. Tag <meta /> thường được sử dụng để xác định mô tả trang (description), từ khóa (keywords). - Tag <link /> xác định mối quan hệ giữa một tài liệu HTML và các tài nguyên bên ngoài.
Tag <link /> được dùng phổ biến nhất là liên kết tới tài liệu css. - Tag <script> dùng để xác định một kịch bản (script) phía máy khách (client), chẳng hạn như javascript. • <Body>: Trình bày nội dung trang web trong thẻ <body>. Thẻ <body> có một số thuộc tính sau: - Background :Quy định hình nền trang cho trang web - Bgcolor: Xác định màu nền cho trang web - Màu sắc của các siêu liên kết trong trang web với link ( liên kết bình thường ), vlink (visited link - Liên kết đã được ghé thăm), alink (activated link - Liên kết đang được kích hoạt ).
- Text: Màu văn bản trong trang web - Căn lề nội dung của trang web với topmargin(Khoảng cách từ dòng đầu tiên đến lề trên của trang web), leftmargin(Khoảng cách từ nội dung đến lề bên trái của trang web), rightmargin(Khoảng cách từ nội dung đến lề bên phải của trang web). Chú thích trong html Chú thích trong HTML dùng để diễn giải hoặc chú thích cho một thẻ HTML hoặc một đoạn mã HTML nào đó. Khi trình duyệt đọc đến dòng chú thích nó sẽ bỏ qua và không hiển thị lên trên trình duyệt. Đoạn chú thích được viết với cấu trúc nhau sau: <!-- Nội dung chú thích --> 8 Giáo trình môn: Thiết kế & quản trị Website Trường Cao đẳng nghề Yên Bái 5.
Môi trường soạn thảo - Có thể tạo trang HTML bằng bất cứ trình soạn thảo “văn bản thuần” nào như: NotePad, WordPad … - Các trình soạn thảo có hỗ trợ thiết kế như: MSFrontPage, DreamWeaver,… II.TẠO VÀ THỰC THI TRANG WEB HTML - Tạo trang html: Tạo một file mới và đặt tên cho file đó với phần mở rộng là: htm hoặc html.html - Thực thi trang web html: Để thực thi trang web html lấy một trình duyệt web bất kì rồi mở file web vừa tạo. CÁC THẺ ĐỊNH DẠNG KHỐI 1. Thẻ P - Thẻ <P> được sử dụng để định dạng một đoạn văn bản. - Cú pháp: <P>Nội dung đoạn văn bản</P> 2.
Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6 - HTML hỗ trợ 6 mức đề mục. Đề mục cấp 1 là cao nhất và giảm dần đến 6. Thông thường đề mục cấp 5 và 6 có kích thước nhỏ hơn văn bản thông thường. - Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục - <H1>.
</H1> Định dạng đề mục cấp 1 <H2>. </H2> Định dạng đề mục cấp 2 <H3>. </H3> Định dạng đề mục cấp 3 <H4>. </H4> Định dạng đề mục cấp 4 <H5>.
</H5> Định dạng đề mục cấp 5 <H6>. </H6> Định dạng đề mục cấp 6 3. Thẻ xuống dòng BR Thẻ này không có thẻ kết thúc tương ứng (<Br/>). Nó có tác dụng chuyển sang dòng mới.
Lưu ý, nội dung văn bản trong html sẽ được trình duyệt hiển thị liên tục, các khoảng trắng liền nhau, các kí tự tab, xuống dòng đều được coi như một khoảng trắng. Để xuống dòng trong tài liệu html bạn phải sử dụng thẻ <BR/> 9 Giáo trình môn: Thiết kế & quản trị Website Trường Cao đẳng nghề Yên Bái 4. Thẻ HR Thẻ <hr /> sẽ tạo một đường kẻ ngang trong trang HTML. <hr /> là thẻ đơn không có thẻ đóng 5.
Thẻ PRE Để giới hạn đoạn văn bản đã được định dạng sẵn bạn có thể sử dụng thẻ <PRE>. Văn bản ở giữa hai thẻ này sẽ được thể hiện giống hệt như khi chúng được đánh vào, ví dụ dấuxuống dòng trong đoạn văn bản giới hạn bởi thẻ <PRE>sẽ có ý nghĩa chuyển sang dòng mới (trình duyệt sẽ không coi chúng như dấu cách). Cú pháp: <PRE>Văn bản đã được định dạng</PRE> 6. Thẻ Span và Div - Thẻ <span> trong HTML thật ra là một thẻ trung hòa, nó không thêm hay bớt bất cứ một thứ gì vào một tài liệu HTML cả.
Nhưng chính nhờ tính chất trung hòa này mà nó lại là một công cụ đánh dấu tuyệt vời để qua đó chúng ta có thể viết CSS định dạng cho các phần tử mong muốn. - Cũng như <span>, <div> 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 cho mục đích định dạng bằng CSS. Tuy nhiên, điểm khác biệt là <span> dùng để nhóm một khối phần tử trong khi đó <div> có thể nhóm một hoặc nhiều khối phần tử. CÁC THẺ ĐỊNH DẠNG DANH SÁCH 1.
Danh sách không theo thứ tự Danh sách không theo thứ tự là một danh sách các mục. Danh sách của các mục sẽ được đánh dấu bởi những bullet (dạng như gạch đầu dòng nhưng là một vòng tròn màu đen). Danh sách không theo thứ tự bắt đầu với thẻ <ul>. Mỗi một mục được bắt đầu với một thẻ <li>.
Cú pháp: <ul> <li>Mục thứ nhất</li> <li>Mục thứ hai</li> … </ul> Ví dụ: <ul type="A"> Kết quả: <li>Apples</li> <li>Bananas</li> • Apples <li>Lemons</li> 10 Giáo trình môn: Thiết kế & quản trị Website Trường Cao đẳng nghề Yên Bái <li>Oranges</li> • Bananas </ul> • Lemons • Oranges Chú ý: Ở giữa những mục trên bạn có thể chèn thêm chữ vào như là xuống hàng, hình ảnh, đường liên kết thậm chí là một danh sách khác. Danh sách theo thứ tự Danh sách theo thứ tự cũng là một dạng danh sách của các mục. Nhưng những mục trong đó được đánh dấu bởi số. Một danh sách theo thứ tự bắt đầu với thẻ <ol>.
Mỗi mục được bắt đầu với thẻ <li>. Cú pháp: <ol TYPE= “1/a/A/i/I”> <li>Mục thứ nhất</li> <li>Mục thứ hai </li> <li>Mục thứ ba </li> … </ol> Trong đó : TYPE =1 Các mục đượcsắp xếp theo thứ tự 1, 2, 3. =a Các mục đượcsắp xếp theo thứ tự a, b, c. =A Các mục đượcsắp xếp theo thứ tự A, B, C.
=i Các mục đượcsắp xếp theo thứ tự i, ii, iii. =I Các mục đượcsắp xếp theo thứ tự I, II, III. Ngoài ra còn thuộc tính START xác định giá trị khởi đầu cho danh sách. Ví dụ: <ol type="A"> Kết quả: <li>Apples</li> A.
Apples <li>Bananas</li> B. Bananas <li>Lemons</li> C. Lemons <li>Oranges</li> D. Oranges </ol> 11 Giáo trình môn: Thiết kế & quản trị Website Trường Cao đẳng nghề Yên Bái V.
CÁC THẺ ĐỊNH DẠNG KÝ TỰ 1 Các thẻ định dạng in kí tự Sau đây là các thẻ được sử dụng để quy định các thuộc tính như in nghiêng, in đậm, gạch chân… Cho các ký tự, văn bản khi được thể hiện trên trình duyệt. Tag Mô Tả <b>…</b> Định dạng chữ đậm <strong>.</ strong> <i>… </i> Chữ in nghiêng <em>…</em> <small>…</small> Chữ nhỏ hơn bình thường bằng cách giảm kích thước font hiện thời đi một <sub>… </sub> Định dạng subscripted (chỉ số dưới) <sup>… </sup> Đinh dạng superscripted (chỉ số trên) <del> … </del> Dạng chữ bị xóa <u> … </u> In chữ gạch chân Ấn định kích thước, màu sắc và font chữ trên trang web bằng cách thêm một số thuộc tính vào trong thẻ: <font>…</font> - color: mầu sắc - size: từ 1 -> 7 - face: tên font chữ muốn hiển thị 2. Căn lề văn bản Trong trình bày trang Web của mình các bạn luôn phải chú ý đến việc căn lề các văn bảnđể trang Web có được một bố cục đẹp. Một số các thẻ định dạng như: P, DIV,IMG.
đều có tham số ALIGN cho phép bạn căn lề các văn bản nằm trong phạm vi giới hạn bởi của các thẻ đó. Các giá trị cho tham số ALIGN: - LEFT Căn lề trái - CENTER Căn giữa trang - RIGHT Căn lề phải 12 Giáo trình môn: Thiết kế & quản trị Website Trường Cao đẳng nghề Yên Bái Ngoài ra chúng ta có thể sử dụng thẻ Center để căn giữa một khối văn bản. Cú pháp: <center> đoạn văn bản được căn giữa </center> 3. Các kí tự đặc biệt thường trong HTML Một ký tự đặc biệt có 3 phần: Ký hiệu (&), tên của ký tự hoặc một dấu # và một dãy số và cuối cùng là dấu chấm phẩy” ;” Các ký tự đặc biệt thường sử dụng khi thiết kế web Ký tự Diễn tả Tên code Mã kí tự Khoảng trắng   < Nhỏ hơn < < > Lớn hơn > > & Dấu và & & ¢ Cent ¢ ¢ £ Pound £ £ ¥ Yen ¥ ¥ € Euro € € § Section § § © Copyright © © ® Registered ® ® « angle quotation mark (left) « « » angle quotation mark (right) » » × Multiplication × × ÷ Division ÷ ÷ ± plus-or-minus ± ± VI.
Liên kết tới một tài liệu web trong website Sử dụng tag<a> để tạo các liên kết tag<a>có thuộc tính là href dùng để cho trình duyệt biết đích đến của liên kết. Cú pháp: <a href="url"target =””> Text </a> 13 Giáo trình môn: Thiết kế & quản trị Website Trường Cao đẳng nghề Yên Bái Trong đó: - url: Địa chỉ một trang web khác, một website trên mạng hoặc địa chỉ một bức ảnh, file ca nhạc …. - Text : Là một đoạn văn bản muốn hiện - Target: Thuộc tính target sẽ cho biết tài liệu website được liên kết sẽ mở như thế nào. _blank: Mở tài liệu đích trong một cửa sổ mới không định tên.
_parent: Mở tài liệu đích trong cửa sổ cha của cửa sổ hiện hành Ví dụ: <a href="http://Caodangngheyenbai.vn" target ="_blank;"> Cao đẳng nghề Yên Bái </a> <a href="baitap1.html" >Bài tập số 1</a> 2. Liên kết tới cùng một trang - Bước 1: Đặt tên cho nơi đến(tạo Bookmark) Cú pháp: <a name=”Tên nới đến”>đoạn văn bản</a> Ví dụ : <a name=”baitap1”>Bài tập số 1</a> - Bước 2: Tạo liên kết tới Bookmark Cú pháp: <a href=”#Tên nơi đến”>đoạn văn bản </a> Ví dụ: <a href=”baitap1”> Bài tập số 1</a> 3. Liên kết tới một vị trí ở trang khác - Bước 1: Đặt tên cho nơi đến(tạo Bookmark) Cú pháp: <a name=”Tên nới đến”> đoạn văn bản </a> Ví dụ : <!--tại trang baitap.