Session1 lab vi

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang	10
Dung lượng	666,97 KB

Nội dung

Giáo trình của FPT-aptech đây. Mọi người cùng tham khảo nhé

Building Dynamic Website Bài 1 Giới thiệu về HTML Làm việc với các phần tử HTML Mục tiêu: Kết thúc bài học này bạn có thể:  Viết được các tài liệu HTML đơn giản  Sử dụng được các Siêu liên kết (Hyperlink)  Hiểu và sử dụng được thẻ <meta>  Thể hiện được các ký tự đặc biệt trong HTML  Sử dụng các thẻ căn bản  Chèn được ảnh vào tài liệu HTML Các bước được mô tả chi tiết dưới đây sẽ giúp bạn nắm được và đạt được các mục tiêu nêu trên. Đề nghị bạn thực hiện đầy đủ và cẩn thận theo các bước này. Trước hết bạn cần thực hiện các yêu cầu sau: 1. Tạo thư mục BDWS là thư mục con của thư mục sau C:\Temp, tạo tiếp thư mục Session1 trong thư mục BDWS và lưu các tài liệu HTML của bạn vào đây. 2. Mở chương trình Textpad++ hoặc Textpad đã được cài đặt sẵn trong máy tính của bạn. 3. Sử dụng Textpad++ để soạn thảo các tài liệu HTML. 4. Sử dụng trình duyệt (IE, Firefox hoặc Chrome) để chạy các tài liệu HTML này. Phần I: Giáo viên hướng dẫn sinh viên thực hiện từng bước để tạo ra một tài liệu HTML đơn giản với đầy đủ các thành phần cơ bản: • HTML • HEAD • TITLE • BODY Phần II: Ví dụ 1: Tài liệu HTML chứa siêu liên kết <html> <head> <title>Tài liệu chứa siêu liên kết</title> </head> <body> <h1>Để mở tài liệu khác mời bạn:</h1> <h3><a href="Test.html">Bấm vào đây</a></h3> </body> </html> 1 Building Dynamic Website Lưu ý: Trước khi chạy tài liệu trên bạn cần tạo sẵn tài liệu Test.html trong cùng thư mục chứa tài liệu này, mã của tài liệu Test.html như sau: <html> <head> <title>Tài liệu mẫu</title> </head> <body> <h1>FPT-Aptech</h1> <p>Website: http://aptech.ac.vn</p> </body> </html> Cú pháp để tạo siêu liên kết: <a href="Test.html">Bấm vào đây</a> Khi bạn chạy tài liệu trên và bấm vào liên kết “Bấm vào đây” trình duyệt sẽ mở tài liệu Test.html. Hình 1.1 a: Kết quả của Ví dụ 1 (trước khi bấm vào liên kết) 2 Building Dynamic Website Hình 1.1 b: Kết quả của Ví dụ 1 (sau khi bấm vào liên kết) Ví dụ 2: Tài liệu với các liên kết tới các nội dung bên trong VD dưới đây sẽ tạo một tài liệu HTML với 4 neo sau: • Overview • Benefits • Features • Technical Specifications <html> <head> <title>Linking in the Same Document</title> </head> <body> <h1 align="center">HUBS DETAILS</h1> <a href="#Overview">Overview</a><br> <a href="#Benefits">Benefits</a><br> <a href="#Features">Features</a><br> <a href="#Technical Specifications">Technical Specifications</a><br> <h2><a name="Overview">Overview</h2><br> <p>BayStack SNMP, Advanced, and SA 10Base-T Stackable Hubs from Bay Networks offer simple, scable solutions for supporting small and growing Ethernet networks </p> <h2><a name="Benefits">Benefits</a></h2><br> <p>Scalable from 12 to 260 Nodes Baystack 10BASE-T Hubs deliver a simple and cost-effective method for starting and growing Ethernet networks </p> <h2><a name="Features">Features</a></h2><br> <p>The BayStack 10BASE-T Hubs deliver simple, scalable, plug-and play solutions for small and growing Ethernet net-work environments . </p> 3 Building Dynamic Website <h2><a name="Technical Specifications">Technical Specifications</a></h2><br> <p>Technical Specifications for the BayStack 10BASE-T Hubs are shown in Table 1 . </p> </body> </html> Khi bấm vào các liên kết trình duyệt sẽ đưa bạn đến các vùng nội dung tương ứng trong tài liệu này. Hình 1.2: Kết quả của VD 2 Ví dụ 3: Thể hiện các ký tự đặc biệt trong tài liệu HTML <html> <head> <title>Learning HTML</title> </head> <body> <p><code>If A > B Then <BR> A = A - 1</code></p> <p><code>If A < B Then <BR> A = A + 1</code></p> </body> </html> 4 Building Dynamic Website Hình 1.3: Kết quả của VD 3 Ví dụ 4: Sử dụng thẻ <META> <html> <head> <meta name="description" content="Your description" /> <meta name="keywords" content="Your keywords" /> <meta http-equiv="Refresh" content="2"/> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>Sử dụng thẻ Meta</title> </head> <body> <p>Trang HTML sẽ tự refresh sau 2 giây</p> <p>Trang HTML này hỗ trợ Unicode</p> </body> </html> VD trên thể hiện một tài liệu HTML sử dụng thẻ meta cho nhiều mục đích khác nhau: • Mô tả tài liệu • Cung cấp từ khóa (keyword) cho các công cụ tìm kiếm • Tự động tải lại trang (refresh) sau 02 giây • Yêu cầu trình duyệt hiển thị tài liệu với mã định dạng là Unicode 5 Building Dynamic Website Hình 1.4: Kết quả của VD 4 Ví dụ 5: Tài liệu HTML với các thẻ Font, Br, P và các thuộc tính của nó <html> <head> <title>Tài liệu HTML với các thẻ khác</title> </head> <body> <p> <font face="Times New Roman" size="5" color="darkblue"> <b><i>Để thể hiện một đoạn văn bản trong tài liệu HTML, chúng ta sử dụng cặp thẻ <P>, </P>.</i></b> </font> </p> <p> <center><font face="Arial" size="4" color="red"> <b><i>Đoạn văn bản tách biệt với các nội dung khác bởi một dòng phân <BR> ở phía trên và phía dưới của đoạn.</i></b> </font></center> </p> </body> </html> 6 Building Dynamic Website Hình 1.5: Kết quả của VD 5 Ví dụ 6: Tài liệu HTML sử dụng thẻ DIV để căn phải khối văn bản <html> <head> <title>Using DIV Tag</title> </head> <body> <div id="content" align="right"> <h1>Aligning a Block of Content to the Right</h1> <p> You can use a DIV tag to align a block of content to the right. </p> <p> The content can include anything you like, including tables, images, lists, and so on. Note, however, that right-aligned lists often do not look very neat. </p> </div> </body> </html> 7 Building Dynamic Website Hình 1.6: Kết quả của VD 6 Ví dụ 7: Tài liệu HTML với các thẻ định dạng văn bản <html> <head> <title>Using Text Formatting</title> </head> <body> <p>This Is My 7 <sup>th</sup> Program Using HTML</p> <p>H<sub>2</sub>O Is The Chemical Name For Water</p> <pre> * ********* ********* * * * * * * * ********* ********* * * * * * * * ********* ********* </pre> <s>This Text Will Appear With Strike Effect</s> </body> </html> 8 Building Dynamic Website Hình 1.7: Kết quả của VD 7 Ví dụ 8: Chèn hình ảnh vào tài liệu HTML Chuẩn bị 3 bức ảnh trong thư mục chứa tài liệu HTML này: • background.jpg • fpt-aptech.jpg • click.gif <html> <head> <title>Inserting Images</title> </head>  <body background="background.gif"> <h1>Inserting Images</h1> <hr> <img src="fpt-aptech.jpg" border="1" alt="FPT Aptech" width="438" height="88"> <h2>Create a link of an image</h2> <a href="#"><img src="click.gif" alt="Click here"></a> </body> </html> Hình 1.8: Kết quả của VD 8 9 Building Dynamic Website Phần III: Bài tập tự làm 1. Viết một tài liệu HTML giới thiệu về gia đình bạn và các vật nuôi trong nhà. Bấm vào liên kết “Giới thiệu gia đình” nhảy tới vùng giới thiệu chi tiết. Bấm liên kết “Giới thiệu về vật nuôi” để nhảy tới vùng chi tiết giới thiệu về các con vật nuôi trong gia đình bạn. Gợi ý: Sử dụng neo và các thẻ phân đoạn văn bản. 2. Viết một tài liệu HTML giới thiệu về bản thân bạn và có một liên kết tới email như sau: Để có thêm các thông tin mới bạn gửi email cho tôi theo địa chỉ sau: abc@google.com Gợi ý: Để tạo được liên kết email bạn viết thêm đoạn code sau: <a href="mailto:abc@google.com">abc@google.com</a> 3. Viết tài liệu HTML trình bày nội dung sau: The Value of 2 to the power of 3 is: 2 3 = 8 4. Viết tài liệu HTML trình bày nội dung sau: The Value of Log to the base 10 is: Log 10 = 1 5. Viết một tài liệu HTML chèn thêm các bức ảnh và có thêm thông tin mô tả cho mỗi bức ảnh đó. 10 . Dynamic Website Bài 1 Giới thiệu về HTML Làm vi c với các phần tử HTML Mục tiêu: Kết thúc bài học này bạn có thể:  Vi t được các tài liệu HTML đơn giản  Sử. Firefox hoặc Chrome) để chạy các tài liệu HTML này. Phần I: Giáo vi n hướng dẫn sinh vi n thực hiện từng bước để tạo ra một tài liệu HTML đơn giản với

Ngày đăng: 08/12/2013, 22:38

Xem thêm

Session1 lab vi