giáo trình dạy lập trình wed cơ bản

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ẻ

Trang 1

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>

</HEAD>

<BODY>

</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ẻ />,

<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>

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>

Trang 2

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>

Được sử dụng để định dạng một đoạn văn bản

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

Được sử dụng để định dạng một đoạn văn bản được in đậm

Được sử dụng để định dạng một đoạn văn bản được in nghiêng

Được sử dụng để định dạng một đoạn văn bản được nghạch dưới

<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>

<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>

Webgiare.net

Webgiare.net

Các ưu điểm trong sản phẩm - dịch vụ của Chúng tôi:

<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>

Trang 3

<li>Khuyến mãi 10% đối với Quý Khách hàng đã có website.</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ệ

Web 2.0</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>

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!

</BODY>

</HTML>

Trang 4

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é!

Trang 5

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>

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

Trang 6

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 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ị

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ụ: ,

<body LINK= color> …

Trang 7

Đượ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>

<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>

TÍNH NĂNG CÁC GÓI THIẾT KẾ WEB:

<li>Gói thiết kế web 1: 2.000.000 VNĐ:</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">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>Gói thiết kế web 2: 3.000.000 VNĐ: </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">Bộ thống kê tình hình hoạt động website</li>

<li type="circle">Tặng 1 domain Việt Nam.</li>

Trang 8

<li>Gói thiết kế web 3: 4.000.000 VNĐ:</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ộ thống kê tình hình hoạt động website</li>

<li type="circle">Tặng 1 domain Việt Nam</li>

<li type="circle">Tư vấn quảng bá website miễn phí 1 tháng sau khi web online.</li>

</ul>

<li>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:</li>

</ol>

</BODY>

</HTML>

Và đây là kết quả chúng ta vừa tạo và lưu ở trên nhé!

Trang 10

BÀI 3: TẠO LIÊN KẾT VÀ ĐỊNH DẠNG LIÊN KẾT TRONG THIẾT KẾ WEBSITE BẰNG HTML.

1 Thẻ body

Cú pháp:

<BODY

LINK = color

ALINK = color

VLINK = color

BACKGROUND = url

BGCOLOR = color

TEXT = color

TOPMARGIN = pixels

RIGHTMARGIN = pixels

LEFTMARGIN = pixels

>

và phần nội dung của trang web được đặt ở đây

</BODY>

Các Đinh nghĩa của thẻ:

LINK: Chỉ định màu của liên kết

ALINK: Chỉ định màu của liên kết đăng được chọn

VLINK: Chỉ định màu của liên kết đã từng mở

BACKGROUND: Hình ảnh nền của trang web

BGCOLOR: màu nền của trang web

TEXT: màu của chữ trong trang web

SCROLL(yes/no): xác định có hay không có thanh cuôn

TOPMARGIN: Lề bên trên của trang web

RIGHTMARGIN: Lề phải của trang web

LEFTMARGIN: Lề trái của trang web

BOTTOMMARGIN: Lề dưới của trang web

2 Kiểu chữ cho văn bản:

<FONT

FACE = font-name

COLOR = color

SIZE = n >

FACE = font-name: chọn font chữ cho nội dung text trên trang web ví dụ như arial, verdera, tahoma, times new roman…

COLOR = color: Chọn màu chữ cho nội dung

Trang 11

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 đến trang web khác

Cú pháp:

<A

HREF = url

NAME = name

TABINDEX = n

TITLE = title

TARGET = _blank / _self

>

Tiêu đề liên kết

</A>

HREF: địa chỉ liên kết tới ví dụ như http://webgiare.net/

Name: Tên liên kết

TABLEINDEX: Thứ tự di 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ụ: <a href="http://" title="thiet ke website">Thiết kế Website với Webgiare.net</a> 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 và nhập đoạn html dưới đây

<HTML>

<HEAD>

<TITLE>Bài 3: Tạo liên kết và định dạng liên kết trong thiết kế website bằng HTML - Quảng bá website</TITLE>

</HEAD>

<h1>QUẢNG BÁ WEBSITE</h1>

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:

<ul>

<li type="circle">Quảng bá web - SEO (Search engine optimization – SEO) - Google

Trang 12

Adwords: (Tối ưu hóa website dành cho máy tìm kiếm)</li>

<li type="circle">Liên kết URL thân thiện máy tìm kiếm</li>

<li type="circle">Tối ưu hóa kích thước trang Web(Giới hạn kích thước của trang dưới

100kB)</li>

<li type="circle">Cải thiện tốc độ tải trang (trung bình < 1s)</li>

<li type="circle">Khách hàng của <a href="http://webgiare.net/" title="thiet ke web, thiết kế web" tabindex="1">thiết kế web</a>Công ty<a href="http://webgiare.net/" title="thiet ke web, thiết kế web" tabindex="2">thiết kế website</a>LTC GROUP đã được trang bị đầy đủ quá trình thứ nhất.</li>

</ul>

Quá trình thứ hai:

<ul>

<li type="circle">SEM - Search Engine Marketing: (Quảng bá website rộng rãi tới máy tìm kiếm)</li>

<li type="circle">Tư vấn, chọn lọc những từ khóa hiệu quả nhất liên quan đến lĩnh vực kinh doanh của quý doanh nghiệp.</li>

<li type="circle">Đăng ký website vào các máy tìm kiếm như Google, Yahoo, MSN,

Bing </li>

<li type="circle">Đăng banner quảng cáo trên các website có nhiều người truy cập để thu hút thứ hạn (traffic)</li>

<li type="circle">Luôn luôn cập nhật và thay đổi mới nội dung của Website</li>

<li type="circle">Đăng ký website vào các danh bạ website, trang vàng hiện có.</li>

<li type="circle">Xây dựng liên kết rộng rãi tới website.</li>

<li type="circle">Tư vấn Quý Khách phát triển, đầu tư mạnh mẽ vào nội dung website</li>

</ul>

Chúng tôi phát triển công nghệ <a href="http://webgiare.net/" title="quảng bá website" tabindex="1">Quảng bá website</a> với nhiều 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"

</BODY>

</HTML>

Kết quả của đoạn mã trên nhé!

Định dạng
Số trang	16
Dung lượng	1,02 MB