Bài 1: CẤU TRÚC CƠ BẢN CỦA MỘT FILE HTML Một tài liệu HTML cơ bản cần có cấu trúc như sau:
Môt cặp thẻ trong file html được nghĩa như sau: Nội dung, ngoài ra cũng có một số thẻ được định nghĩa khác ví dụ như thẻ meta , là dấu hiệu bắt đầu của một thẻ là dấu hiệu kết thúc một thẻ
Bài 1: CẤU TRÚC CƠ BẢN CỦA MỘT FILE HTML Một tài liệu HTML cơ bản cần có cấu trúc như sau: <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <TITLE></TITLE> </HEAD> <BODY> <h1></h1> <p></p> <p></p> </BODY> </HTML> Môt cặp thẻ trong file html được nghĩa như sau: <tên thẻ>Nội dung</tên thẻ>, ngoài ra cũng có một số thẻ được định nghĩa khác ví dụ như thẻ meta <meta nội dung thẻ />, <br /> <tên thẻ> là dấu hiệu bắt đầu của một thẻ </tên thẻ> là dấu hiệu kết thúc một thẻ Trong cấu trúc trên có nhứng cặp thẻ sau: <HTML> Là cặp thẻ được sử dụng để xác nhận đó là một file HTML. </HTML> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Xác định file được định dạng theo chuẩn utf-8 <HEAD> Được dùng để xác định phần mở đầu cho file </HEAD> <TITLE> Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài liệu, nó phải nằm trong thẻ HEAD, thể hiện tiêu đề của trang HTML này khi được chạy trên Internet hoặc Localhost. </TITLE> <BODY> Thẻ này được sử dụng để xác định phần nội dung chính của bài viết thể hiện trên file này </BODY> <h1> Thẻ định dạng đề mục, thường người lập trình sẽ đặt tiêu đề bài viết vào cặp thẻ định dạng này. </h1> <p> Được sử dụng để định dạng một đoạn văn bản. </p> </BR> là thể không có mở đầu và kết thúc thẻ, thẻ này xuất hiện ở đâu thì phần nội dung dưới đó sẻ sang dòng mới. <B> Được sử dụng để định dạng một đoạn văn bản được in đậm. </B> <i> Được sử dụng để định dạng một đoạn văn bản được in nghiêng. </i> <u> Được sử dụng để định dạng một đoạn văn bản được nghạch dưới. </u> <UL> Cặp thể kết hợp dùng để định dạng danh sách thông thường: <li> Mục thứ nhất </li>Cặp thể kết hợp dùng để định dạng danh sách thông thường: <li> Mục thứ hai </li>Cặp thể kết hợp dùng để định dạng danh sách thông thường: </UL>Cặp thể kết hợp dùng để định dạng danh sách thông thường: Trong bài 1 này các bạn chỉ làm quen với các thẻ cơ bản thông dụng như trên, các bài tiếp theo Webgiare.net sẻ giới thiệu nhiều hơn tác tính năng làm đẹp cho website. Bây giờ chúng ta sẻ thử làm một trang HTML đơn giản về cty nhé. <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <TITLE>Thiết kế website | Thiet ke website | Thiết kế web | Thiet ke web - Webgiare.net</TITLE> </HEAD> <BODY> <h1>Giới thiệu về Webgiare.net</h1> <p>Webgiare.net </p> <p>Webgiare.net</p> <b>Các ưu điểm trong sản phẩm - dịch vụ của Chúng tôi:</b> <ul> <li>Thiết kế website</li> <li>Quý khách không hài lòng chúng tôi không thu phí.</li> <li><b><i>Khuyến mãi 10% đối với Quý Khách hàng đã có website.</i></b></li> <li>Tặng 1 tên miền Việt Nam</li> <li>Bảo hành website vô thời hạn.</li> <li>Luôn có các chính sách chăm sóc Khách hàng sau khi website chạy trên Internet.</li> <li>Với trang Admin cập nhật dể dàng và thông dụng, mới nhất hiện nay bằng công nghệ <b>Web 2.0</b></li> <li>Tinh thần phục vụ tối đa, chất lượng luôn đảm bảo hoàn hảo nhất. </li> <br /> <br /> <b><i>Webgiare.net chân Thành cảm ơn Quý Khách Hàng đã quan tâm và ủng hộ Chúng tôi trong thời gian qua!</i></b> </BODY> </HTML> Lưu File HTML sau khi đã nhập code Chọn các chi tiết lưu để file tốt hơn Và đây chúng ta chiêm ngưởng thành quả mà chúng ta vừa tạo và lưu nhé! Bài 2: ĐỊNH DẠNG CHO MỘT TRANG HTML ĐƠN GIẢN. 1. Đinh dạng danh sách: Bài 1 Webgiare.net đã trình bày cách tạo một danh sách thông thường UL, bài này Webgiare.net sẽ trình bày với các bạn danh sách thực đơn(Menu) OL. Với thẻ OL ta có cú pháp sau: <OL TYPE=1/a/A/i/I> <LI type= disc/circle/square>Menu thứ nhất </li> <LI>Menu thứ hai </li> <LI>Menu thứ ba </li> </OL> Trong đó: UL TYPE =1 Các mục được sắp xếp theo thứ tự 1, 2, 3 =a Các mục được sắp xếp theo thứ tự a, b, c =A Các mục được sắp xếp theo thứ tự A, B, C =i Các mục được sắp xếp theo thứ tự i, ii, iii =I Các mục được sắp xếp theo thứ tự I, II, III LI TYPE = disc Chấm tròn đậm LI TYPE = circle Vòng tròn LI TYPE = square Hình vuông 2. Các thẻ định dạng ký tự: Trong bài 1 Webgiare.net đã trình bày với các bạn các thẻ <b>, <i>, <u>. Bài 2 này chúng tôi sẽ trình bày các thẻ định dạng ký tự sau: Strong = b : In đậm EM = I : In nghiêng S = STRIKE: Chữ bị gạch ngang BIG: Chữ lớn hơn bình thường Small: chữ nhỏ hơn bình thường SUP: Đinh nghĩa chỉ số trên SUB: Chỉ số dưới BASEFONT: Định nghĩa kích thước font chữ. FONT: Kiểu chữ hiển thị. <CENTER>Nội dung được canh giữa</CENTER> 3. Sử dụng màu sắc trong thiết kế các trang Web Trong thành phần yếu tố đồ hoạ về màu sắc thì một màu được kết hợp từ ba thành phần màu chính, đó là: Đỏ (Red), Xanh lá cây (Green), Xanh nước biển (Blue). Trong HTML một giá trị màu có định dạng như sau: #RRGGBB viết tắt (RedRedGreenGreenBlueBlue) Bảng màu cơ bản: - Đỏ/RED: #FF0000 - Đỏ sẫm/DARKRED: #8B0000 - Xanh lá cây/GREEN: #00FF00 - Xanh nhạt/LIGHTGREEN: #90EE90 - Xanh nước biển/BLUE: #0000FF - Vàng/YELLOW: #FFFF00 - Vàng nhạt/LIGHTYELLOW: #FFFFE0 - Trắng/WHITE: #FFFFFF - Đen/BLACK: #000000 - Xám/GRAY: #808080 - Nâu/BROWN: #A52A2A - Tím/MAGENTA: #FF00FF - Tím nhạt/VIOLET: #EE82EE - Hồng/PINK: #FFC0CB - Da cam/ORANGE: #FFA500 - Màu hải quân/NAVY: #000080 Trong HTML đinh dạng màu sắc thường đi kèm với một thẻ khác ví dụ: <font color =” color”>, <body LINK= color> … Được rồi bây giờ chúng ta sẽ thực hành: thiết kế trang web báo giá thiết kế web của Webgiare.net sử dụng các thẻ đã trình bày ở trên. Các bạn hãy mở một chương trình thiết kế web như Notepad và nhập nguyên đoạn mã HTML sau vào nhé. <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <TITLE>Bài 2: Định dang cho một trang HTML đơn giản. - Báo giá thiết kế web</TITLE> </HEAD> <BODY> <h1>Báo giá thiết kế web</h1> <strong>TÍNH NĂNG CÁC GÓI THIẾT KẾ WEB:</strong> <ol type="1"> <li><font color="#3366FF">Gói thiết kế web 1: 2.000.000 VNĐ:</font></li> <ul> <li type="circle">Trang Chủ(Hiệu ứng flash nhẹ).</li> <li type="circle">Module Giới thiệu.</li> <li type="circle">Module Sản phẩm đa cấp( Modul tùy biến, không giới hạn phân cấp).</li> <li type="circle">Module Dịch vụ_ khuyến mãi.</li> <li type="circle">Trang liên hệ.</li> <li type="circle">Hỗ trợ trực tuyến</li> <li type="circle">Công cụ tìm kiếm.</li> <li type="circle">Bộ đếm người truy cập.</li> <li type="circle">Tặng 1 domain Việt Nam.</li> <li type="circle">Hướng dẫn và hỗ trợ cập nhật nội dung web miễn phí.</li> <li type="circle">Tư vấn quảng bá website miễn phí 1 tháng sau khi web chạy trên internet.</li> </ul> <li><font color="#3366FF">Gói thiết kế web 2: 3.000.000 VNĐ:</font> </li> <ul> <li type="circle">Trang chủ( Banner flash)</li> <li type="circle">Module Giới thiệu</li> <li type="circle">Module Sản phẩm đa cấp: ( Modul tùy biến, không giới hạn phân cấp).</li> <li type="circle">Module Sản phẩm tiêu biểu, Sản phẩm mới.</li> <li type="circle">Module Giỏ hàng</li> <li type="circle">Module Dịch vụ - khuyến mãi.</li> <li type="circle">Module Tin tức - Sự kiện</li> <li type="circle">Module Banner quảng cáo.</li> <li type="circle">Module Liên kết website.</li> <li type="circle">Trang liên hệ</li> <li type="circle">Hỗ trợ trực tuyến</li> <li type="circle">Công cụ tìm kiếm.</li> <li type="circle">Bộ thống kê tình hình hoạt động website</li> <li type="circle">Bộ đếm người truy cập.</li> <li type="circle">Tặng 1 domain Việt Nam.</li> <li type="circle">Hướng dẫn và hỗ trợ cập nhật nội dung web miễn phí.</li> <li type="circle">Tư vấn quảng bá website miễn phí 1 tháng sau khi web chạy trên internet.</li> </ul> <li><font color="#3366FF">Gói thiết kế web 3: 4.000.000 VNĐ:</font></li> <ul> <li type="circle">Trang chủ( Banner flash hiệu ứng đẹp, mềm mại)</li> <li type="circle">Module Giới thiệu</li> <li type="circle">Module Sản phẩm đa cấp: ( Modul tùy biến, không giới hạn phân cấp).</li> <li type="circle">Module Sản phẩm tiêu biểu, Sản phẩm mới.</li> <li type="circle">Module đếm số lượng sản phẩm.</li> <li type="circle">Module Giỏ hàng.</li> <li type="circle">Module Dịch vụ_ khuyến mãi</li> <li type="circle">Module Tin tức_ Sự kiện</li> <li type="circle">Hệ thống lấy tin tự động.</li> <li type="circle">Modul Banner quảng cáo.</li> <li type="circle">Modul Liên kết website.</li> <li type="circle">Modul tiện ích (Quý Khách có thể lựa chọn 1 trong nhiều tiện ích: Thư viện ảnh, video clip, hệ thống SMS, Newletter)</li> <li type="circle">Trang liên hệ</li> <li type="circle">Bộ bình chọn</li> <li type="circle">Công cụ tìm kiếm.</li> <li type="circle">Bộ thống kê tình hình hoạt động website</li> <li type="circle">Bộ đếm người truy cập.</li> <li type="circle">Tặng 1 domain Việt Nam</li> <li type="circle">Hướng dẫn và hỗ trợ cập nhật nội dung web miễn phí.</li> <li type="circle">Tư vấn quảng bá website miễn phí 1 tháng sau khi web online.</li> <li type="circle">Tư vấn quảng bá website miễn phí 1 tháng sau khi web chạy trên internet.</li> </ul> <li><font color="#3366FF">Ngoài ra Webgiare.net còn nhiều gói và luôn thiết kế web theo mọi yêu cầu của quý khách hàng:</font></li> <li><font color="#3366FF">Liên hệ: (08).2203.2203 - 0938.018.218</font></li> </ol> <br /> <br /> <b><i>Webgiare.net chân Thành cảm ơn Quý Khách Hàng đã quan tâm và ủng hộ Chúng tôi trong thời gian qua!</i></b> </BODY> </HTML> Và đây là kết quả chúng ta vừa tạo và lưu ở trên nhé! [...]... kế và lập trình viên trẻ trung và đầy nhiệt huyết, thông thạo đồ hoạ và lập trình luôn tìm tòi học hỏi nỗ lực không ngừng và sự góp phần của các chuyên gia dày dặn kinh nghiệm trong lĩnh vực CNTT đã phát triển tạo ra một công nghệ CMS NVA hoàn thiện đạt hiệu quả tối đa nhất để đảm bảo độ bảo mật của website đạt tiêu chuẩn Quốc tế, tính bản quyền... kế web" tabindex="1">thiết kế webCông tythiết kế websiteLTC GROUP đã được trang bị đầy đủ quá trình thứ nhất. Quá trình thứ hai: SEM - Search Engine Marketing: (Quảng bá website rộng rãi tới máy tìm kiếm) Tư vấn, chọn lọc những từ khóa hiệu... chuyển khi nhấn phím tab TITLE: Văn bản hiển thị khi rê chuột lên liên kết TARGET: Định nghĩa mở trang hiển thị, _blank = trang mới Vidụ: Thiết kế Website với Webgiare.net hiển thị: Thiết kế Website với Webgiare.net Tốt, bây giờ chúng ta sẽ thực hành thiết kế trang Quảng bá website của Webgiare.net Bạn hay mở một chương trình thiết kế web ví dụ là Notepad...SIZE = n: Là kích thước chữ cho văn bản, n=1,2,3,4,5 hoặc 10px, 12px, 13px, 14px… Ví dụ: Thiết kế Website với Webgiare.net kết qủa thu được là: Thiết kế Website với Webgiare.net 3 Liên kết... phương thức hay và đảm bảo tăng thứ hạng và hiệu quả lên đến hơn 99%. "Thiết kế website đúng chuẩn mực và đạt tiêu chuẩn là đã tạo một phương thức tốt, làm cho phương thức phát triển là cả một quá trình dài" Webgiare.net chân Thành cảm ơn Quý Khách Hàng đã quan tâm và ủng hộ Chúng tôi trong thời gian qua! Kết quả của đoạn mã trên nhé! Bài 4 CHÈN ÂM THANH... TOP/MIDDLE/BOTTOM ALT = text BORDER = n SRC = url WIDTH = width HEIGHT = height HSPACE = vspace VSPACE = hspace TITLE = title > Trong đó: ALIGN = TOP/ MIDDLE/ BOTTOM/ LEFT/ RIGHT: Canh hình ảnh so với nội dung văn bản ALT = text : Chữ sẽ được hiển thị khi hình ảnh không tồn tại hoặc chức năng show hình ảnh bị tắt BORDER = n: Kích thước đường viền bao quanh hình ảnh SRC = url : Địa chỉ hình ảnh được chèn vào tài... text="#FFFFFF"> QUẢNG BÁ WEBSITE Dịch vụ Quảng bá web - SEO (Search engine optimization – SEO) - Google Adwords: Xây dựng thương hiệu công ty của Quý Khách trên mạng toàn cầu Quá trình thứ nhất: Quảng bá web - SEO (Search engine optimization – SEO) - Google Adwords: (Tối ưu hóa website dành cho máy tìm kiếm) Liên kết... title="Thiết kế web" href="/" name="Thiết kế web">CMS NVA hoàn thiện đạt hiệu quả tối đa nhất để đảm bảo độ bảo mật của website đạt tiêu chuẩn Quốc tế, tính bản quyền tuyệt đối, tương thích với mọi trình duyệt, thân thiện với các công cụ tìm kiếm, không hạn chế các tính năng, mở rộng dễ dàng, chiếm dụng ít tài nguyên, tốc độ tải trang rất nhanh…Hội tụ đầy đủ các yếu tố để tạo nên một . Bài 1: CẤU TRÚC CƠ BẢN CỦA MỘT FILE HTML Một tài liệu HTML cơ bản cần có cấu trúc như sau: <HTML> <HEAD> <meta http-equiv="Content-Type". giới.</p> <p>Cùng với một đội ngũ kỹ thuật thiết kế và lập trình viên trẻ trung và đầy nhiệt huyết, thông thạo đồ hoạ và lập trình luôn tìm tòi học hỏi nỗ lực không ngừng và sự góp phần. dạng một đoạn văn bản được in đậm. </B> <i> Được sử dụng để định dạng một đoạn văn bản được in nghiêng. </i> <u> Được sử dụng để định dạng một đoạn văn bản được nghạch dưới. </u> <UL>