Xây dựng website tin tức bằng cách tạo theme dựa trên nền tảng wordpress

Và cho đến thời điểm này là 2015, WordPress đã được xem như là một hệ quản trị nội dung CMS – Content Management System vượt trội để hỗ trợ người dùng tạo ra nhiều thể loại website khác

LỜI CÁM ƠN

Ngành công nghệ thông tin là một ngành khoa học đang trên đà phát triển mạnh và ứng dụng rộng rãi trên nhiều lĩnh vực Cùng với xu hướng phát triển của các phương tiện truyền thông như Báo, Radio… thì việc sử dụng Internet ngày càng phổ biến Truy cập Internet, chúng ta có được một kho thông tin khổng lồ phục vụ mọi nhu cầu, mục đích của chúng ta chỉ bằng một cái nhấp chuột

Nhận thức được nhu cầu tìm hiểu thông tin, giải trí của xã hội, là sự ra đời của hàng loạt website cho các mục đích thương mại, giải trí, tin tức…Để đáp ứng với việc cập nhật thông tin hàng ngày, tình hình xã hội, chính trị, thời sự, và sức khỏe… thì website tin tức ra đời là một nhu cầu tất yếu

Do đó, em đã vận dụng ngôn ngữ HTML, PHP, và phần mềm nguồn mở

WordPress để xây dựng ứng dụng Website Tin tức

Hoàn thành xong đề tài, em vô cùng biết ơn thầy, cô đã nhiệt tình giảng dạy, hướng

dẫn và đặc biệt là thầy giáo Th.S Lê Văn Thành, người trực tiếp hướng dẫn nhiệt

tình cho em trong suốt quá trình học hỏi và thực hiện đề tài này

M C L C

LỜI CÁM ƠN 1

M C L C 2

CHƯƠNG 1 TỔNG QUAN 4

1.1 Giới thiệu đề tài website tin tức 4

1.1.1 Phân tích những tiêu chí hình thành Tin Tức 5

1.1.2 Yêu cầu Website 6

1.2 Giới thiệu tổng quát về CMS WORDPRESS 7

1.2.1 Nền tảng website 7

1.2.2 Những thành tựu của wordpress 8

1.2.3 Những lý do chọn wordpress 8

1.2.4 Những hiểu lầm về wordpress 10

1.2.5 Lời kết 10

1.3 Những kiến thức cần trang bị 11

1.3.1 HTML 11

1.3.3 Javascipt 13

1.3.4 PHP 13

CHƯƠNG 2: PHÂN TÍCH CẤU TRÚC TRANG WEB 14

2.1 Cấu trúc cơ bản của trang web 14

CHƯƠNG 3 C I ĐẶT WORDPRESS 19

3.1 Cài đặt wordpress trên localhost 19

CHƯƠNG 4: XÂY DỰNG WEBSITE TIN TỨC 22

4.1 Quá trình xây dựng giao diện: 22

4.1.1 Code HTML 22

4.1.2 Code CSS 23

4.2 Thực hiện đẩy dữ liệu lên Wordpress 25

4.3 Cài đặt giao diện trên Wordpress 26

4.4 Thực hiện đổ dữ liệu 26

4.5 Giao diện một số trang 35

KẾT LU N 37

1.Kết quả đạt được của đề tài: 37

2 Hướng phát triển 37

T I LI U THAM HẢO 38

CHƯƠNG 1 TỔNG QUAN

1.1 Giới thi u tài website tin tức

“Tin tức tích lũy trong mỗi chúng ta ược gọi là kiến thức, tài sản quý giá nhất của con người ”

Với sự bùng nổ thông tin trên internet, vai trò của các trang thông tin điện tử trực tuyến càng trở nên quan trọng Khác với báo chí truyền thông có giới hạn thời gian cập nhật tin tức, các tờ báo trực tuyến đã cung cấp được sự tiện lợi trong việc cập nhật và phát hành thông tin Về phía người dùng, họ có thể xem thông tin mọi lúc mọi nơi Về phía những người cung cấp thông tin, các nhà báo, họ có thể dễ dàng cập nhật những tin tức mới nhất, thời sự nhất Do đó việc sử dụng các trang thông tin trực tuyến luôn là điều cần thiết hiện nay nhằm đáp ứng nhu cầu cập nhật thông tin của mỗi người

Tin tức là những việc đã xảy ra dù tốt dù xấu, để giúp con người biết những chuyện xung quanh và trên thế giới Ngày nay nhờ thông tin truyền thông nhanh, cho nên bất cứ chuyện gì vừa xãy ra ở đâu trên thế giới thì ta đều có thể biết ngay, nhờ đó

mà có thể học được nhiều cái hay cũng như tránh được những chuyện xấu xảy ra, như các trận sóng Thần, bão táp, núi lửa sắp đến, các chất độc hại trong thức ăn giúp con người biết trước mà tránh khỏi các nguy hiểm sắp đến

Tin tức vô cùng quan trọng nó cho người ta tri thức và là cơ sở để người ta tiến hành mọi việc lớn nhỏ Khi có Internet, tin tức càng quan trọng vì tốc độ lan truyền nhanh ảnh hưởng ngay tức thì trên diện rộng

1.1.1 Phân tích những tiêu chí hình thành Tin Tức

Tiêu chí dùng để xác định tin tức có thể được tóm gọn lại như sau: Có liên quan, hữu ích, gây được sự quan tâm Những tiêu chí đó được áp dụng rộng rãi nhưng mỗi nhà báo hay mỗi cơ quan báo chí đều sử dụng chúng theo một bối cảnh đặc thù để nhấn mạnh ý nghĩa theo cách riêng Cái bối cảnh ấy do chính công chúng tạo ra

Bạn đang đọc một bài báo đăng trên báo in Trên truyền hình, một bài viết như thế sẽ

có ít chi tiết hơn, nhưng bạn sẽ nhìn thấy đoạn băng quay cảnh những nhân vật chính đang tranh luận Còn ở báo trực tuyến, một bài báo như thế sẽ bao gồm cả chi tiết và đoạn phim – cộng thêm sự kết nối dễ dàng đến những bài báo liên quan và những tư liệu đằng sau vụ việc Cách trình bày sẽ khác nhau ở mỗi loại hình, nhưng những giá trị của tin tức đã làm cho nó trở nên quan trọng và kỹ năng tường thuật sự việc cũng như những yêu cầu kể lại câu chuyện sẽ có sự giống nhau

Sự liên quan, hữu ích và gây được quan tâm là những định hướng khái quát để thẩm định giá trị thông tin của bất kỳ sự kiện, vấn đề hay nhân vật nào Cùng với những tiêu chí rõ ràng đó, những yếu tố đặc trưng hơn tiềm tàng trong mỗi câu

chuyện Quan trọng nhất là những yếu tố sau:

• Tác ộng: Đây là một cách khác để đo mức độ liên quan và hữu ích Có bao

nhiêu người bị ảnh hưởng bởi một sự kiện hay một ý tưởng? Nó ảnh hưởng đến

họ nghiêm trọng như thế nào?

• Xung ột: Đây là một đề tài muôn thuở trong mọi câu chuyện, dù được thuật

lại bởi báo chí, văn chương hay kịch nghệ Những cuộc đấu tranh giữa người với người, giữa các quốc gia hay với sức mạnh thiên nhiên đều lôi cuốn người

ta đọc Xung đột chính là một yếu tố cơ bản của đời sống, các nhà báo phải tỉnh táo trước cám dỗ muốn làm cho câu chuyện tăng thêm kịch tính hoặc đơn giản hóa thái quá

• Mới lạ: Đây là một yếu tố khác phổ biến cả trong báo chí lẫn các loại hình

khác Con người hay sự kiện có thể gây được hấp dẫn và do đó có giá trị thông tin chỉ vì yếu tố đặc biệt hay kỳ quái

• Danh tiếng: Tên tuổi tạo nên tin tức Tên tuổi càng lớn chừng nào thì bài báo

càng quan trọng chừng đó Những người dân thường luôn bị kích thích tò mò bởi việc làm của những người giàu có và nổi tiếng

• Gần gũi: Thông thường, người ta thích thú và quan tâm đến những gì diễn ra

gần nơi họ ở Khi họ đọc hay nghe một tin trong nước hay tin thế giới, họ thường muốn biết nó có liên quan gì đến cộng đồng của chính họ

• Cấp thời: Tin đòi hỏi phải mới Nếu tin thích đáng và hữu ích, nó hẳn phải

đúng lúc Ví dụ như khi viết về một vấn đề mà hội đồng thành phố phải đối mặt trước khi nó được quyết định thì sẽ có ích hơn là sau đấy Những bài báo kịp thời cho người ta cơ hội được tham dự vào các vụ việc chung hơn là chỉ làm một khán giả

Lưu ý : những yếu tố trên gợi ra hai điều quan trọng về tin:

• Thứ nhất, không phải mọi tin tức đều nghiêm túc, đều là chuyện sống chết

Nghề báo được miêu tả như “cuộc đối thoại của văn hóa với chính nó” Cuộc đối thoại đó gắn kết thành nền văn hóa từ những chuyện kể về tội ác, chính trị cho tới các sự kiện trên thế giới, tất nhiên rồi; nhưng nó cũng bao gồm những câu chuyện của đời sống hằng ngày Nó bao gồm cả những chuyện khôi hài và chuyện tầm phào Tất cả những điều đó đều có thể là tin tức

• Thứ hai, tin tức không chỉ là việc góp nhặt lại sự kiện Thuật lại một tin thường cũng có nghĩa là kể lại một câu chuyện Tính tường thuật, tính nhân văn, kịch tính của câu chuyện là nghệ thuật của báo chí Để tập hợp những sự kiện trong bài viết của mình, nhà báo sử dụng nhiều kỹ thuật giống như những

kỹ thuật mà nhà xã hội học, nhà khoa học chính trị và nhà sử học sử dụng Để viết bài báo cho ai cũng hiểu được sự kiện trong đó, nhà báo thường sử dụng kỹ thuật của những người cầm bút khác như nhà văn hay nhà biên kịch

1.1.2 Yêu cầu Website

• Yêu cầu bạn đọc:

Giao diện thân thiện

Dễ tìm kiếm thông tin

Tin tức website được cập nhật thường xuyên

• Yêu cầu thành viên:

Cung cấp các chức năng có thể cập nhật tin tức dễ dàng

• Yêu cầu Admin:

Thuận lợi trong việc quản lý thông tin thành viên, tin tức, dữ liệu của website

1.2 Giới thi u t ng quát v CMS WORDPRESS

Kỳ

WordPress là một mã nguồn mở bằng ngôn ngữ PHP để hỗ trợ tạo blog cá nhân,

và nó được rất nhiều người sử dụng ủng hộ về tính dễ sử dụng, nhiều tính năng hữu ích Qua thời gian, số lượng người sử dụng tăng lên, các cộng tác viên là những lập trình viên cũng tham gia đông đảo để phát triển mã nguồn WordPress có thêm những tính năng tuyệt vời Và cho đến thời điểm này là 2015, WordPress đã được xem như là một hệ quản trị nội dung (CMS – Content Management System) vượt trội để hỗ trợ người dùng tạo ra nhiều thể loại website khác nhau như blog, website tin tức/tạp chí, giới thiệu doanh nghiệp, bán hàng – thương mại điện tử, thậm chí với các loại website có độ phức tạp cao như đặt phòng khách sạn, thuê xe, đăng dự án bất động sản,… Hầu như mọi hình thức website với quy mô nhỏ và vừa đều có thể triển khai trên nền tảng WordPress Nhưng như thế không có nghĩa là WordPress chỉ thích hợp với các dự án nhỏ,

mà hiện nay có tới khoảng 25% website trong danh sách 100 website lớn nhất thế giới

sử dụng mã nguồn WordPress Ví dụ như trang tạp chí TechCrunch, Mashable, CNN, BBC America, Variety, Sony Music, MTV News, Bata, Quartz,…rất nhiều không thể

kể hết được

1.2.2 Những thành tựu của wordpress

Khi tìm hiểu về WordPress, bạn sẽ thật tự hào khi biết rằng mã nguồn mà các bạn đang tìm hiểu ngay sau đây có những thành tựu rất vượt bậc và là một mã nguồn CMS mở phổ biến nhất hành tinh Để kiểm chứng điều đó, các bạn cần biết là:

Trên thế giới, có khoảng 25 bài viết được đăng lên các website sử dụng WordPress mỗi giây Số lượng website làm bằng WordPress chiếm 23% tổng số lượng website trên thế giới Trong số 100% các website sử dụng mã nguồn CMS, WordPress chiếm 60%

Phiên bản WordPress 4.0 đạt hơn 16 triệu lượt tải chỉ sau khoảng hai tháng WordPress đã được dịch sang 52 ngôn ngữ khác nhau Tuy nhiên lại chưa có phiên bản tiếng Việt chính thức, nhưng bạn có thể Việt hóa dễ dàng bằng cách tìm bài trên blog với từ khóa “Việt hóa WordPress“ Có hơn 80 chương trình họp mặt về WordPress được tổ chức vào năm 2014 Mã nguồn WordPress hiện đang có khoảng

785 lập trình viên cùng hợp tác phát triển Chỉ tính các giao diện (hay còn gọi là theme) miễn phí trên thư viện WordPress.org thì đã có hơn 2.700 themes khác nhau Bạn thấy

đó, WordPress thật tuyệt vời phải không nào?

1.2.3 Những lý do chọn wordpress

1.2.3.1 Dễ sử dụng

WordPress được phát triển nhằm phục vụ đối tượng người dùng phổ thông, không có nhiều kiến thức về lập trình website nâng cao Các thao tác trong WordPress rất đơn giản, giao diện quản trị trực quan giúp bạn có thể nắm rõ cơ cấu quản lý một website WordPress trong thời gian ngắn Về cách cài đặt lại càng dễ hơn, bạn có thể tự cài đặt một website WordPress trên host (máy chủ) riêng của mình và tự vận hành nó sau vài cú click

1.2.3.2 Cộng đồng hỗ trợ đông đảo

Là một mã nguồn CMS mở phổ biến nhất thế giới, điều này cũng có nghĩa là bạn

sẽ được cộng đồng người sử dụng WordPress hỗ trợ bạn các khó khăn gặp phải trong quá trình sử dụng Nếu bạn có khả năng tiếng Anh tốt, bạn có thể dễ dàng tìm câu trả lời cho vấn đề bạn đang gặp phải trên Google chỉ với vài từ khóa tìm kiếm

Hiện nay có những cộng đồng wordpress nổi tiếng trên Việt Nam và thế giới :

+ https://wordpress.org/support/

+ https://forums.wordpress.com + www.wpbeginner.com

1.2.3.3 Nhiều gói giao diện có sẵn

Trong khi sử dụng WordPress, khái niệm giao diện cho website WordPress thường được gọi là theme Hiện nay WordPress có rất nhiều theme miễn phí khác nhau để bạn có thể dễ dàng thay đổi “da thịt” của website mình chỉ với vài cú click mà không cần bận tâm việc làm sao để thiết kế một theme cho riêng mình Còn nếu bạn muốn website đẹp và chuyên nghiệp hơn, bạn có thể mua các theme trả phí với giá bán dao động từ $30 đến $65

Nhưng nếu bạn là người mới tập làm quen với WordPress, hãy tạm quên việc dùng theme trả phí vì cách cài đặt nó có thể không mấy dễ dàng cho người mới bắt đầu

1.2.3.4 Nhiều plugin hỗ trợ

Plugin nghĩa là một trình cắm thêm vào website để bổ sung các chức năng mà bạn cần Ví dụ mặc định sau khi cài website WordPress, bạn không có chức năng hiển thị các bài viết liên quan ở dưới mỗi bài viết, nhưng với nhiều plugin miễn phí hỗ trợ thì bạn có thể dễ dàng cài thêm một plugin miễn phí để website mình có chức năng đó Tương tự với theme, cũng có rất nhiều plugin trả phí mang những tính năng rất độc đáo và có ích vào website và nó sẽ có giá khoảng từ $10 đến $80 tùy theo độ phức tạp 1.2.3.5 Dễ phát triển cho lập trình viên

Nếu bạn là một người có am hiểu về việc làm website như thành thạo HTML, CSS, PHP thì có thể dễ dàng mở rộng website WordPress của bạn ra với rất nhiều tính năng vô cùng có ích Cách phát triển cũng rất đơn giản vì WordPress là một mã nguồn

mở nên bạn có thể dễ dàng hiểu được cách hoạt động của nó và phát triển thêm các tính năng

Với hàng nghìn hàm (function) có sẵn của nó, bạn có thể thoải mái sử dụng, bạn cũng có thể thay đổi cấu trúc của một hàm với filter hook và hầu như quy trình làm việc của một lập trình viên chuyên nghiệp có thể ứng dụng dễ dàng vào WordPress 1.2.3.6 Hỗ trợ nhiều ngôn ngữ

Mã nguồn WordPress hiện tại có rất nhiều gói ngôn ngữ đi kèm, bao gồm tiếng Việt Mặc dù trong mỗi giao diện hay plugin đều có ngôn ngữ riêng nhưng bạn có thể

dễ dàng tự dịch lại nó với các phần mềm hỗ trợ

1.2.3.7 Có thể làm nhiều loại website

Dùng WordPress không có nghĩa là bạn chỉ có thể làm blog cá nhân, mà bạn có thể biến website mình thành một trang bán hàng, một website giới thiệu công ty, một

tờ tạp chí online bằng việc sử dụng kết hợp các theme và plugin với nhau Tuy nhiên

để làm được, bạn nên chắc chắn là đã hiểu được WordPress chứ đừng vội một bước lên mây để nhận các cảm giác thất vọng vì độ phức tạp của nó

1.2.4 Những hiểu lầm về wordpress

1.2.4.1 Wordpress chỉ là một phần mềm

Đúng vậy, WordPress chỉ là một phần mềm nguồn mở được viết bằng PHP & MySQL để giúp bạn tạo được website nhanh hơn Nhưng đó không có nghĩa là nó sẽ giúp bạn tạo được một website bất kỳ chỉ với các thao tác đơn giản

Mặc dù thư viện các giao diện có sẵn (Theme) và Plugin rất nhiều nhưng để tuỳ biến website sử dụng WordPress tốt hơn, bạn cần phải có kiến thức về PHP, HTML, CSS, Javascript,…tất cả các kỹ thuật liên quan tới website

1.2.4.2 Wordpress chỉ dành cho người không biết code

Hoàn toàn sai lầm, nếu bạn đã nghe ai đó nói với bạn rằng WordPress chỉ dành cho những người không chuyên lập trình sử dụng thì điều này hoàn toàn không chính xác.Dĩ nhiên những người không biết lập trình sẽ dùng WordPress bằng cách sử dụng các tính năng có sẵn, thư viện giao diện phong phú và các plugin hỗ trợ cũng đã đủ để làm được website Nhưng nếu bạn biết code thì càng tốt vì WordPress có phần lõi mã nguồn rất mạnh để bạn áp dụng kỹ năng không giới hạn, nếu bạn cho rằng WordPress chỉ dành cho người không biết lập trình thì hãy xem qua WordPress Nâng Cao

1.2.5 Lời kết

Trong thời đại công nghệ ngày này để có được 1 website thương mại điện tử đầy

đủ các chức năng cần thiết nhưng cũng không quá rắc rối , phức tạp khi sử dụng và mở rộng thì Wordpress đã làm tốt vai trò của mình trong lĩnh vực này

1.3 Những kiến thức cần trang b

Những ngôn ngữ lập trình cần biết

1.3.1 HTML

HTML là chữ viết tắt của cụm từ HyperText Markup Language(Xem thêm

tại http://vi.wikipedia.org/wiki/HTML) (dịch là Ngôn ngữ đánh dấu siêu văn bản) được sử dụng để tạo một trang web, trên một website có thể sẽ chứa nhiều trang và

mỗi trang được quy ra là một tài liệu HTML Cha đẻ của HTML là Tim Berners-Lee, cũng là người khai sinh ra World Wide Web và chủ tịch của World Wide Web Consortium (W3C – tổ chức thiết lập ra các chuẩn trên môi trường Internet)

Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML Elements) được quy định bằng các cặp thẻ (tag), các cặp thẻ này được bao bọc bởi một dấu ngoặc ngọn (ví dụ <html>) và thường là sẽ được khai báo thành một cặp, bao gồm thẻ mở

và thẻ đóng (ví dụ<strong> </strong> ) Các văn bản muốn được đánh dấu bằng HTML sẽ được khai báo bên trong cặp thẻ (ví dụ <strong>Đây là chữ in đậm</strong>) Nhưng một số thẻ đặc biệt lại không có thẻ đóng và dữ liệu được khai báo sẽ nằm trong các thuộc tính (ví dụ như thẻ <img>)

Một tập tin HTML sẽ bao gồm các phần tử HTML và được lưu lại dưới đuôi

mở rộng là html hoặc htm

1.3.2 CSS

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng

để tìm và nh dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ như

HTML) Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm một chút “phong cách” vào các phần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc,…rất nhiều

Hình 1: website sau khi CSS CSS có vai trò trang trí thêm cho văn bản được viết bằng HTML

Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể

là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó

Cấu trúc một đoạn CSS

Hình 2: Cấu trúc CSS

1.3.3 Javascipt

Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa ra, javascript được sử dụng rộng rãi trong các ứng dụng Website Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome, thậm chí các trình duyệt trên thiết bị di động cũng có hỗ trợ

Nếu bạn đã biết qua về HTML5 thì bạn thấy có các khái niệm như sessionStore hay localStore, đây là hai đối tượng được tạo nên từ Javascript nên rõ ràng trong HTML5 cũng có sử dụng nó Với những ứng dụng đó thì bạn thấy javascript không thể chết trong các ứng dụng website được

Hay thậm chí có những ứng dụng Webgame người ta sử dụng javascript để xử

lý các thao tác trên Client, nếu không có nó thì thông thường chọn Flash để xây dựng nhưng lại gặp vấn đề load chậm nên có một số người chọn Javascript để làm

1.3.4 PHP

PHP là viết tắt của chữ "Hypertext Preprocessor", đây là một ngôn ngữ lập

trình được sử dụng để viết ở phía máy chủ (lập trình web) Hiện nay có rất nhiều ngôn ngữ có thể viết ở máy chủ như C#, Java, Python và PHP chính là một trong những ngôn ngữ của nhóm này

PHP có cú pháp đơn giản, tốc độ nhanh và nhỏ gọn, dễ học và thời gian để tiếp cập PHP ngắn hơn so với các ngôn ngữ lập trình khác nên hiện nay PHP đang chiếm

số lương lập trình viên tương đối lớn, có thể gọi là lớn nhất Hiện PHP có rất nhiều các CMS mã nguồn mở như WordPress, OpenCart, NukeViet nên nó rất đa dạng và đáp ứng hầu hết các website thông thường từ blog cá nhân cho đến website giới thiệu công

CHƯƠNG 2: PHÂN TÍCH CẤU TRÚC TRANG WEB 2.1 Cấu trúc cơ bản của trang web

Hình 4: Cấu trúc website

Phần header:- Dùng để định nghĩa khu vực phần đầu của trang

- Thường được dùng cho phần giới thiệu hay chứa các thành phần chuyển hướng (navigation)

Phần body: - Dùng để định nghĩa khu vực nội dung của trang

- Phần chưa nội dung của trang

Phần footer: - Dùng để định nghĩa khu vực phần cuối của trang

-Thường chứa các thông tin liên lạc của tác giả, nguồn gốc của bài viết Với những phân tích trên, ta thấy những phần như: header, global navigation, body, content, sidebar(right content), footer đều là những phần nội dung lớn, do đó ta sẽ sử dụng thẻ <div></div> cho những thành phần này:

Bao gồm logo và phần tên trang web:

Ta đặt <div></div> bao ngoài cho logo và sử dụng thẻ <img /> vì logo là image

Ta đặt <div></div> bao ngoài cho Text logo và sử dụng thẻ <h1></h1> cho Tên web

 Phần bên phải :

Ta đặt <div></div> bao ngoài cho image header và sử dụng thẻ <img /> vì

image header là image

<header id="header" class="site-header">

<a href="#"><img src="images/assets/anh44.png" alt="anh3" /></a>

<a class="header-top-image" href="#"><img src="images/assets/anh44.png" alt="anh2" /></a>

Sau khi CSS ta được phần header thể hiện lên giao diện web như sau:

Hình 6: header sau khi hoàn thiện CSS