Thiết kế web cơ bản ppt

Thiết kế web cơ bản
1. Nguyên tắc thiết kế
Nguyên tắc thiết kế
Nguyên tắc thiết kế: Làm thế nào để tạo ra một trang web thân thiện, dễ sự dụng, trang
web phải có nguyên tắc về màu sắc, cầu trúc, quản trị
11 bí quyết để tạo ra một web thật hấp dẫn!
Một website muốn thu hút được người xem đồng thời giữ được sự quan tâm của những
người này phải hấp dẫn và dễ sử dụng. Điều này nghe có vẻ đơn giản nhưng thực tế,
chúng ta rất hay [ ]
Làm thế nào để có 1 website ?
Để có một website bạn phải tiến hành những bước sau Bước 1: Đăng ký tên miền xay
dung websiteTên miền (Domain name) là một tên dễ nhớ để gán cho một địa chỉ trên
internet, thí dụ: www.business.com Nó thay [ ]
Domain name và web Hosting là gì?
Tên miền (Domain name) là định danh của website trên Internet. Tên miền thường gắn
kèm với tên công ty và thương hiệu của doanh nghiệp. Tên miền là duy nhất và được cấp
phát cho chủ thể nào đăng [ ]
Sự khác biệt web Tĩnh & web Động
Tìm hiểu về web Tĩnh & web Động web tinh & web dong- Website tĩnh là website chỉ
bao gồm các trang web tĩnh và không có cơ sở dữ liệu đi kèm. - Web động là thuật ngữ
được dùng để [ ]
Website là gì
website Hẳn ngôi nhà là thứ rất gần gũi với bạn ! Và để nói về một căn hộ sẽ không có gì
khó khăn cho việc hình dung của bạn. Chúng tôi sẽ minh họa tại sao một website [ ]
Mẹo thiết kế web
Để giúp những các bạn mới bắt đầu học thiết kế web, tôi đã viết ra một danh sách các
điều nên làm trong thiết kế web và hy vọng sẽ giúp bạn tạo ra trang web thật thiết thực
[ ]
Làm thế nào để thiết kế một trang web hấp dẫn, thân
thiện với người dùng
Có vài điều quan trọng hơn trên trang web hơn "tiện ích", bởi vì Internet là một tương tác

không gian và không phải một cách đường phố. Bạn muốn cải thiện kinh nghiệm của
người truy cập, làm cho [ ]
Lý thuyết màu sắc
Lý thuyết màu sắc, cách phối hợp màu trong web, thiết kế web và cách sử dụng màu sắc
phù hợp cho trang web.
Làm thế nào để Tạo một màu sắc phù hợp khi thiết kế
Website?
Thiết kế web, các trang web liên quan đến vô số các môn có tay nghề cao từ các loại hình
để bố trí & màu sắc. Màu sắc nổi bật, đặc biệt là vì nó cung cấp các ấn [ ]
Mẫu website doanh nghiệp
Mẫu website thiết kế cho doanh nghiệp với đầy đủ các tính
năng hội tụ [ ]
2.
Mẫu web tin tức
Web giới thiệu SP
Mẫu website phong cách số
Mẫu website thời trang
Mẫu web điện thoại
Mẫu website salon auto
Hướng dẫn HTML
Hướng dẫn sử dụng HTML từ cơ bản đến phức tạp. Chúc các bạn học tập thật tốt. Các
bạn download tài liệu, mẫu HTML cơ bản
Bảng màu mã HEX và tên màu trong HTML
Color Name Color HEX Color AliceBlue #F0F8FF AntiqueWhite #FAEBD7 Aqua
#00FFFF Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC Bisque #FFE4C4
Black #000000 BlanchedAlmond #FFEBCD Blue #0000FF BlueViolet #8A2BE2 Brown

#A52A2A BurlyWood #DEB887 CadetBlue #5F9EA0 Chartreuse #7FFF00 Chocolate
#D2691E Coral #FF7F50 CornflowerBlue #6495ED Cornsilk #FFF8DC [ ]
Kiểu font chữ trong html
Diễn giải Các thẻ kiểu chữ trong ngôn ngữ HTML cho phép bạn điều khiển được vẻ bề
ngoài của bản thân các ký tự - chẳng hạn chúng ta có thể định dạng một từ là đậm hoặc
nghiêng. [ ]
Khối trích dẫn HTML
Diễn giải Khối trích dẫn thường được dùng trong các trường hợp sử dụng các trích dẫn
mở rộng. Toàn khối trích dẫn sẽ được căn lề thụt vào cả ở hai phía và tạo thành một khối
riêng so với [ ]
Ký tự định dạng trước trong HTML
Diễn giải Kiểu ký tự định dạng trước cho phép bạn có thể bảo toàn các dấu cách và dấu
xuống dòng trong trang văn bản HTML y như khi bạn gõ vào trong quá trình soạn thảo.
Điều đó [ ]
Danh sách trong html (list)
Danh sách có trật tự Danh sách có trật tự tự động đánh số từng thành tố của danh sách.
Mã nguồn Kết quả <OL> <LI>Yếu tố 1 <LI>Yếu tố 2 <LI>Yếu tố 3 </OL> 1. Yếu tố 1
2. Yếu [ ]
Đường kẻ ngang HTML
Diễn giải Đường kẻ ngang chủ yếu được dùng để phân định một trang Web thành những
phần có tính logic và dễ nhìn. Có không nhiều khả năng đồ hoạ trong ngôn ngữ HTML,
bởi vậy đường kẻ ngang [ ]
Xuống dòng và chia đoạn trong trang HTML
Khi bạn đánh máy một văn bản trong một chương trình soạn thảo văn bản nào đó, bạn có
thể chỉ cần bấm phím Return để kết thúc một dòng hay một đoạn văn, nhưng bạn sẽ cần
phải làm [ ]
Chèn hình trong HTML
Nếu bạn muốn Web site của mình nổi trội hơn, bạn phải theo xu hướng đồ hoạ với các
hình ảnh được chọn kỹ lưỡng. Làm thế nào để chèn hình vào trong khi các tập tin HTML
chỉ có [ ]

Làm việc với các liên kết siêu văn bản (HTML)
Thẻ HTML dùng để thiết lập các liên kết siêu văn bản là <A> và </A>. Thẻ <A> hơi
khác so với các thẻ khác mà bạn đã gặp vì bạn không thể dùng nó một mình mà phải kèm
[ ]
Bổ sung định dạng và các tiêu đề trong html
HTML bao gồm nhiều thẻ làm đẹp cho văn bản trong trang. Bạn đã thấy ở trên, một từ
hoặc một câu sẽ hiện thành dạng chữ đậm như thế nào khi được đặt vào giữa các thẻ <B>
và [ ]
Văn bản và các đoạn trong HTML
Thẻ HTML dùng để thiết lập các liên kết siêu văn bản là <A> và </A>. Thẻ <A> hơi
khác so với các thẻ khác mà bạn đã gặp vì bạn không thể dùng nó một mình mà phải kèm
[ ]
Cấu trúc cơ sở HTML
Các trang Web khác nhau, tẻ nhạt hay sinh động, vô nghĩa hoặc rất cần thiết, nhưng tất cả
đều có cùng một cấu trúc cơ sở, nên đa số các trình duyệt đang chạy trên hầu hết các kiểu
[ ]
Thuộc tính của HTML
Thuộc tính cung cấp thêm thông tin về các thành phần mã HTML. Thuộc tính HTML *
HTML yếu tố có thể có thuộc tính * Các thuộc tính cung cấp thêm thông tin về các yếu tố
* Các thuộc tính là luôn [ ]
Các yếu tố HTML (HTML Elements)
Dữ liệu HTML được xác định bởi yếu tố HTML. Các yếu tố HTML HTML là một yếu tố
tất cả mọi thứ từ các từ khóa bắt đầu vào cuối từ khóa: Bắt đầu từ khóa * Element Cuối
nội dung từ [ ]
HTML cơ bản với 4 Ví dụ
Đừng lo lắng nếu các ví dụ sử dụng thẻ bạn chưa biết. Bạn sẽ tìm hiểu về chúng trong các
chương kế tiếp. HTML Headings (tiêu đề trong HTML) HTML đề mục được định nghĩa
với <h1> để <h6> thẻ. Ví dụ <h1> Đây [ ]
Bắt đầu với HTML
Bạn cần làm gì với HTML Bạn không cần phải dùng bất kỳ các công cụ để tìm hiểu mã

HTML. * Bạn không cần bất kỳ HTML nào biên tập * Bạn không cần phải có máy chủ
trang web * Bạn không [ ]
Giới thiệu HTML
Ví dụ <html> <body> <h1> Tựa đề đầu tiên của tôi </ h1> <p> đoạn đầu tiên của tôi. </
p> </ body> </ html> HTML là gì? HTML là một ngôn ngữ để mô tả các trang web. *
HTML tắt của Hyper Text Markup Language * HTML không [ ]
Bản đồ hình ảnh trong HTML
Một bản đồ hình ảnh chỉ là một loại hình ảnh nhấp, mà bạn có thể thực hiện các lĩnh vực
khác nhau để có liên kết đến các URL khác nhau. (Ví dụ là dưới đây.) Để thực hiện [ ]
Hướng dẫn CSS
Hướng dẫn viết code CSS, kết hợp CSS vào trang web để tạo cho trang web mêm mại với
các vidu HTML & CSS
Cách đặt các lớp trong Css: Layers
CSS hoạt động trên cả 3 chiều: cao, rộng, sâu. Hai chiều đầu tiên, chúng ta đã được nhìn
thấy trong các bài học trước. Trong bài học này, chúng ta sẽ được học về cách đặt các
thành phần [ ]
Position :Relative position (Định vị tương đối)
Sự định vị tương đối cho một thành phần là sự định vị được tính từ vị trí gốc trong tài
liệu. Các thành phần đã được định vị tương đối sẽ để lại khoảng không trong tài liệu. Các
[ ]
Position: Absolute position (Định vị tuyệt đối)
Định vị tuyệt đối là sự định vị mà trong đó các thành phần được định vị không để lại bất
cứ một khoảng trống nào trong tài liệu. Một thành phần được định vị tuyệt đối sẽ nhận
giá [ ]
Position: nguyên lý hoạt động của position
Kết hợp với thuộc tính float đã học, thuộc tính position mang lại nhiều khả năng để tạo
một cách trình bày tiên tiến và chính xác cho trang web. Nguyên lý hoạt động của
position: Hãy tưởng tượng cửa sổ [ ]
Thuộc tính clear
Đi cùng với thuộc tính float, trong CSS còn có một thuộc tính là clear. Thuộc tính clear là

một thuộc tính thường được gán vào các phần tử liên quan tới phần tử đã được float để
quyết định [ ]
Thuộc tính float
Float (theo như nghĩa tiếng Việt là thả trôi) là một thuộc tính CSS dùng để cố định một
thành phần web về bên trái hay bên phải không gian bao quanh nó. Đây là một thuộc tính
rất cần [ ]
Height và những thuộc tính của nó
Trong bài học này, chúng ta sẽ tìm hiểu thêm về cách dùng thuộc tính height để định kích
cỡ cho một thành phần web. Thuộc tính height: Height là một thuộc tính CSS dùng để
quy định chiều cao cho [ ]
Width và những thuộc tính của nó
Trong bài học này, chúng ta sẽ tìm hiểu thêm về cách dùng thuộc tính width để định kích
cỡ cho một thành phần web. Thuộc tính width: Width là một thuộc tính CSS dùng để quy
định chiều rộng cho một [ ]
Nhóm các phần tử với class
Ví dụ chúng ta có một đoạn mã HTML sau đây : <p>Danh Sách Các Tỉnh, Thành Phố
Của Việt Nam</p> <ul> <li>Hà Nội</li> <li>TP. Hồ Chí Minh</li> <li>Đà Nẵng</li>
<li>Thừa Thiên Huế</li> <li>Khánh Hòa</li> <li>Quảng Ninh</li> <li>Tiền Giang</li>
</ul> Yêu cầu đặt ra là làm thế nào để tên [ ]
Hướng dẫn CSS
Hướng dẫn viết code CSS, kết hợp CSS vào trang web để tạo cho trang web mêm mại với
các vidu HTML & CSS
Dùng Css để định border cho các đối tượng web
Border là một thành phần quan trọng trong một trang web. Nó thường được dùng trong
trang trí, đóng khung cho một đối tượng cần nhấn mạnh, phân cách các đối tượng giúp
trang web trông dễ nhìn hơn,… Trong [ ]
Thuôc tính padding
Padding có thể hiểu như là một thuộc tính đệm. Padding không ảnh hưởng tới khoảng các
giữa các các đối tượng như margin mà nó chỉ quy định khoảng cách giữa phần nội dung
và viền của một đối [ ]

Thuộc tính Margin
Như tất cả những ai đã học qua MS Word đều biết là trong phần thiết lập Page Setup của
Word cũng có một thiết lập margin để định lề cho trang in. Tương tự, thuộc tính margin
trong CSS [ ]
Pseudo-classes For Links
Một thành phần rất quan trọng trong mọi website chính là liên kết.Cũng như một đối
tượng văn bản thông thường, chúng ta hoàn toàn có thể áp dụng các thuộc tính định dạng
đã học ở 2 bài trước [ ]
Box Model
Trong CSS, box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao
quanh một thành phần. Nó bao gồm padding (vùng đệm), border (viền) và margin (canh
lề) và các tùy chọn. Hình bên [ ]
Thuộc tính text-align
Thuộc tính text-align giúp bạn thêm các canh chỉnh văn bản cho các thành phần trong
trang web. Cũng tương tự như các lựa chọn canh chỉnh văn bản trong các trình soạn thảo
văn bản thông dụngnhư MS Word, thuộc [ ]
Thuộc tính text-transform
Text-transform là thuộc tính qui định chế độ in hoa hay in thường của văn bản mà không
phụ thuộc vào văn bản gốc trên HTML. Thuộc tính này có tất cả 4 giá trị: uppercase (in
hoa), lowercase (in thường), [ ]
Nhóm khối phần tử với thẻ (div)
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 [ ]
Thuộc tính text-decoration
Thuộc tính text-decoration giúp bạn thêm các hiệu ứng gạch chân (underline), gạch xiên
(line-through), gạch đầu (overline), và một hiệu ứng đặc biệt là văn bản nhấp nháy
(blink). Ví dụ sau chúng ta sẽ định dạng gạch chân cho [ ]
Màu chữ (thuộc tính color)
Để định màu chữ cho một thành phần nào đó trên trang web chúng ta sử dụng thuộc tính

color. Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ. Ví dụ sau chúng ta sẽ viết
[ ]
Nhóm phần tử với thẻ (span)
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 [ ]
Thuộc tính text-indent
Thuộc tính text-indent cung cấp khả năng tạo ra khoảng thụt đầu dòng cho dòng đầu tiên
trong đoạn văn bản. Giá trị thuộc tính này là các đơn vị đo cơ bản dùng trong CSS. Trong
ví dụ sau chúng [ ]
Thuộc tính letter-spacing
Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong một đoạn
văn bản. Muốn định khoảng cách giữa các ký tự trong thành phần h1, h2 là 7px và thành
phần <p> là 5px chúng ta [ ]
Nhận dạng phần tử với id