Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)
Chúng ta đã làm được! Chúng ta đã tạo ra trang web đầu tiên của chúng ta từ đầu và chúng ta đã nói về một số phần thiết yếu của thiết kế như khoảng trắng, typography và màu sắc.
Trong bài cuối cùng này chúng ta sẽ nhanh chóng xem xét tất cả mọi thứ chúng ta đã học cho đến nay về xây dựng một trang web và một thiết kế, xem xét cách để có được trang web của chúng ta trên Internet, do đó chúng ta có thể trực tiếp gởi cho bạn bè và gia đình một địa chỉ web của chúng ta, và tiếp xúc với một số tài nguyên hữu ích cho đến các nghiên cứu của chúng ta.
Đừng ngại đặt bất kỳ câu hỏi nào trong phần bình luận ở dưới cùng của trang này!
Tóm tắt lại
Hãy nhìn vào biểu đồ mà chúng ta đã đi được để biết chúng ta đang ở đâu.
Nền tảng & Sự chuẩn bị
Chúng ta đã bắt đầu loạt bài này bằng cách tìm hiểu cách mà trang web làm việc. Để cho hai máy tính khác nhau có thể nói chuyện với nhau chúng phải được kết nối tới Internet thông qua một ISP (Nhà cung cấp dịch vụ).
Để cho phép người khác xem trang web của chúng ta trên Internet thì các tập tin trang web phải được chuyển (di chuyển) đến một máy chủ; một máy tính đặc biệt truy cập trực tiếp vào Internet. Chúng ta sẽ xem xét điều này nhiều hơn nữa trong phần dưới đây.
Vai trò của chúng ta trên Internet là một nhà thiết kế web. Đó là công việc của chúng ta, để đảm bảo rằng một trang web trông thú vị và thật sự dễ dàng cho người dùng của chúng ta để đọc và điều hướng.
Với những mục tiêu đó, chúng ta thiết lập để bắt đầu xây dựng trang web Tuts+ Town của chúng ta với HTML và CSS sau khi vẽ lên một số phác thảo tuyệt vời trên giấy. Để chuẩn bị cho phần này của quá trình chúng ta đã tìm hiểu tất cả về cách đặt tên tập tin và tổ chức chúng.
Bây giờ chúng ta biết tập tin HTML chính luôn được gọi là index.html và cho dù hình ảnh nằm trong thư mục riêng của chúng hay không thì nó không ảnh hưởng đến các thuộc tính src trong HTML của chúng ta.
Cuối cùng, chúng ta đã chọn một trình soạn thảo văn bản và chính thức chuẩn bị để bắt đầu viết một số tập tin HTML và CSS!
Xây dựng một Trang web với HTML & CSS
Để xây dựng trang web Tuts+ Town, chúng ta trước tiên xác lập cấu trúc HTML của chúng ta và sau đó gắn nội dung vào đó.
Cấu trúc này được tạo nên từ nhiều phần tử được lồng bên trong phần tử chính html và có được điều cơ bản này làm cho cho việc thêm nội dung trở nên đơn giản hơn.
Khi nội dung được đặt đúng trị trí chúng ta có thể bắt đầu định hình phong cách cho tất cả mọi thứ với CSS. Trước tiên, chúng ta cần liên kết hai tài liệu với nhau trong phần head của HTML:
1 |
<head>
|
2 |
<link type="text/css" rel="stylesheet" href="tutstown.css" /> |
3 |
</head>
|
Trong tài liệu CSS chúng ta đã có thể định nghĩa màu sắc, kích cỡ, bố cục, và nhiều phần tử khác bên trong tài liệu HTML của chúng ta, cuối cùng dẫn chúng ta tới bản thiết kế trang web hoàn chỉnh.
Hình ảnh
Phần này của loạt bài viết kết thúc với một hướng dẫn, thảo luận về các định dạng hình ảnh khác nhau sẵn có cho chúng ta. Chúng ta đã nói về việc bao gồm chúng trong HTML của chúng ta và một số hiệu ứng chúng ta có thể áp dụng cho các hình ảnh bằng CSS, chẳng hạn như thay đổi độ trong suốt của chúng:
Như đã đề cập, tất cả các hình ảnh được sử dụng trong suốt loạt bài Tuts+ Town là định dạng SVG, có nghĩa là chúng có thể được thay đổi kích cỡ mà không mất chất lượng và được chỉnh sửa một cách dễ dàng.
Thiết kế Cơ bản
Sau khi chúng ta tạo ra trang web, chúng ta xem xét các khái niệm thiết kế cơ bản giúp định hình giao diện, cảm giác và khả năng sử dụng cho các trang web.
Nội dung là phần quan trọng trong nhất trong thiết kế web, do đó, sau khi thiết lập nội dung hữu ích, cần thiết, và tổ chức tốt, chúng ta chuyển đến hình ảnh.
Sựu phân cấp đã được xác lập cho các trang web thông qua việc thay đổi kích thước phông chữ, màu sắc và khoảng trắng, rất giống như quả bóng ở trên được thiết kế để nhấn mạnh đối tượng chính trong hình ảnh.
Typography
Typography ở khắp mọi nơi khi chúng ta thấy các từ được viết và là một trong những phần quan trọng nhất của thiết kế web. Những người dùng của chúng ta cần phải có khả năng đọc nội dung của chúng ta nhưng chúng ta cũng cần đảm bảo phông chữ mà chúng ta chọn đồng nhất về sắc thái và cảm nhận về nội dung và thiết kế trực quan của chúng ta.
Màu sắc
Phần này của loạt bài bao gồm một bài hướng dẫn về lý thuyết màu sắc, ý nghĩa của các màu sắc cụ thể, các hệ thống màu khác nhau cho web, và cách chọn một bảng màu phù hợp.
Tham khảo bánh xe màu sơ cấp và thứ cấp giúp chúng ta hiểu tốt hơn về cách các màu nhất định được tạo ra và tại sao một số màu có thể kết hợp tốt với nhau trong khi một số khác thì không.
Bây giờ, hãy tìm hiểu qua cách mang trang của chúng ta lên web!
Mang các tập tin lên Web
Như chúng ta đã thảo luận ở phần đầu của loạt bài này, trang web này đặt trên máy tính cục bộ của chúng ta mà không phải trên Internet. Tại thời điểm này chúng ta không thể gởi bạn bè và gia đình địa chỉ trên web, do đó họ không thể được xem công việc tuyệt vời của chúng ta.
Như chúng ta đề cập trong phần giới thiệu của bài hướng dẫn, các tập tin cần phải đặt trên một máy chủ để cho người khác có thể xem được chúng trên Internet.
Một lưu ý nhanh trước khi tiếp tục
Quá trình mang một trang web lên internet có thể thường liên quan đến quyết định mua và có một địa chỉ email. Nếu bạn còn quá trẻ để có thể sử những thứ này thì cách tốt nhất là có một người lớn cùng với bạn trong các phần sau.
Máy chủ
Có một số dịch vụ sẽ giúp chứa các tập tin của chúng ta, làm cho chúng có thể truy cập được trên Internet. Đối với loạt bài viết này chúng ta sẽ tập trung vào dịch vụ máy chủ thông qua NeoCities và khái niệm cơ bản của tên miền.
NeoCities
NeoCities là một tuỳ chọn tuyệt vời và miễn phí để đơn giản hoá dịch vụ lưu trữ tập tin trên web; mặc dù vậy chúng ta vẫn cần đăng ký một địa chỉ email!
Hãy xem qua các bước để mang các tập tin của chúng ta được lưu trữ trên Internet ở dưới đây:
- Để đăng ký chúng ta cần chọn một tên người dùng (tên trang web) và nhập một địa chỉ email. Tại thời điểm này, chúng ta sẽ muốn đặt tên trang web là một cái gì đó khác so với những gì đã được tạo ra dưới đây, vì tất cả các địa chỉ trang web phải là duy nhất. Ví dụ, thay vì tutsplustown như là một tên người dùng bạn có thể chọn cái gì đó khác mà sẵn có hoặc thêm tên của bạn, janetutsplustown (một lần nữa, chỉ nếu điều này là sẵn có và đã không được thực hiện bởi thành viên khác của NeoCities). Các trang web sẽ nằm tại (tên người dùng).neocities.org
- Một khi chúng ta đã đăng ký, chúng ta có thể nhấp vào nút lớn màu đỏ "Edit Site" ở góc trên bên phải của màn hình.
- Sau đó chúng ta sẽ được đưa đến một bảng điều khiển tập tin nơi chúng ta có thể thêm các tập tin và thư mục. Chúng tôi sẽ muốn tải lên hai tập tin: tập tin HTML và CSS cho các trang web và sau đó tạo một thư mục: images. Trong thư mục images chúng ta sẽ thêm bốn tập tin hình ảnh.
- Một khi các tập tin được chuyển lên, trang web của chúng ta đã chính thức được lưu trữ tại NeoCities! Sẽ có một liên kết đến địa chỉ trang web ở đầu trang.
Dưới đây là một hình ảnh trang web trên NeoCities: tutsplustown.neocities.org
Một lợi ích khác của dịch vụ này là chúng ta không cần mua tên miền (địa chỉ tuỳ biến cho các trang web) và quá trình thiết lập, tuy vậy chúng ta cũng sẽ tìm hiểu cách làm điều này trong phần tiếp theo.
Quan trọng! Có thể sử dụng một tên miền với NeoCities bằng cách vào phần thiết lập của trang sau khi khởi tạo thiết lập và làm theo các chỉ dẫn ở đó; tuy vậy việc này hiện yêu cầu một tài khoản được nâng cấp với 5 đô la mỗi tháng.
Tên miền
Tên miền là những địa chỉ tùy biến mà chúng ta giới thiệu với mọi người để họ có thể truy cập vào một trang web. Bước này là không cần thiết khi chúng ta lưu trữ các tập tin trang web của chúng ta trên NeoCities bởi vì nó tạo ra một địa chỉ Neocities đặc biệt cho chúng ta. Tuy nhiên, nếu chúng ta đang tìm kiếm một tên miền tuỳ biến thực sự (ví dụ như tutsplustown.com) chúng ta sẽ phải mua các tên miền này.
Cũng như với tên người dùng trên NeoCities, tên miền của chúng ta có được sẽ duy nhất, có thể mất một chút thời gian để tìm ra một tên miền sẵn có.
Dưới đây là một vài dịch vụ cho phép chúng ta mua tên miền một khi chúng ta tạo một tài khoản:
Bước cuối cùng là thiết lập một tên miền riêng có thể được hoàn thành thông qua dịch vụ lưu trữ (như Neocities hoặc BitBalloon như đề cập dưới đây) một khi các tập tin đã được chuyển lên.
Thêm các tuỳ chọn dịch vụ lưu trữ tập tin
Nếu bạn không sử dụng NeoCities thì có một số ít công ty dịch vụ lưu trữ nổi bật khác đặc biệt rẻ và dễ sử dụng, nhưng có lẽ nổi bật nhất trong số này là BitBalloon.
BitBalloon thì thử miễn phí, nhưng yêu cầu thanh toán để thêm một tên miền tuỳ biến, giống như NeoCities. Sự dễ dàng trong đó các tập tin có thể được kéo và thả vào giao diện làm cho điều này trở thành một lựa chọn khá thú vị cho các trang web cơ bản như Tuts+ Town.
Một khi các tập tin được chuyển lên, chúng ta có thể hoàn thành quá trình thiết lập tùy biến tên miền thông qua các công cụ trong bảng điều khiển BitBalloon.
Tên miền Tuts+ Town của chúng ta
Trang web Tuts+ Town của chúng ta có địa chỉ rất riêng của nó và thiết lập tương tự như cách chúng ta vừa tìm hiểu: tutsplustown.com.
Tiếp theo là gì?
Mặc dù loạt bài viết này cung cấp một sự giới thiệu về thiết kế web giúp chúng ta có thể nhanh chóng nâng cao kỹ năng của chúng ta một khi chúng ta thực hành, thực hành và thực hành các chủ đề mà chúng ta đã xem xét ở đây.
Thêm về HTML & CSS
Cuốn sách “Build Your Own Website, A Comic Guide to HTML, CSS, and Wordpress” bởi Nate Cooper cung cấp một nền tảng vững chắc để tạo ra một trang thông qua một cuộc trò chuyện thú vị trong hình thức của một truyện tranh.
Shay Howe đã viết loạt bài hướng dẫn chuyên sâu đối với cả hai trình độ, người mới bắt đầu học và nâng cao HTML và CSS:
Thiết kế web có tính đáp ứng (Responsive)
Thiết kế web có tính đáp ứng chỉ về việc thiết kế các trang web đáp ứng nhiều kích cỡ màn hình khác nhau. Chúng ta dành rất nhiều thời gian trên điện thoại thông minh của chúng ta, ví dụ vậy, và là nhà thiết kế, chúng ta cần phải đảm bảo rằng trang web của chúng ta hoạt động trên các màn hình nhỏ hơn cũng như một màn hình máy tính để bàn kích thước đầy đủ.
Có một hướng dẫn tuyệt vời cho người mới bắt đầu bởi Shay Howe về chủ đề này.
Đơn vị đo lường
Chúng ta đã sử dụng pixels trong suốt loạt bài này như là một đơn vị đo lường trên web. Sử dụng pixels là hoàn toàn ổn khi mới bắt đầu, tuy nhiên, khi bạn có nhiều kinh nghiệm hơn bạn sẽ nhận thấy giới hạn của nó là thế nào. Nó là một đơn vị đo lường thiếu tính linh hoạt, không hoạt động tốt trong thiết kế có tính đáp ứng (responsive design).
Theo quan điểm của thiết kế trên nhiều màn hình có kích thước khác nhau thì có một số lựa chọn khác sẽ linh hoạt hơn là pixels, chẳng hạn như phần trăm và rems.
Bố cục
Khi đề cập ngắn gọn về flexbox trong bài Bố cục CSS có nhiều thứ hơn mà chúng ta có thể thực hiện với các bố cục có sử dụng nó. Có một số nơi tuyệt vời để tìm hiểu thêm, giống như Hướng dẫn hoàn chỉnh về Flexbox và một bảng tra cứu nhanh Flexbox.
Liên quan đến bố cục như là một tổng thể và không chỉ có flexbox, có một trang web nhỏ đơn giản sẽ giúp hướng dẫn cho chúng ta đi qua các khái niệm cơ bản.
Tạm biệt!
Có nhiều thứ hơn nữa mà chúng ta có thể tìm hiểu để củng cố và phát triển các kỹ năng thiết kế web của chúng ta, chúng ta đã thực hiện rất nhiều trong suốt loạt bài này và bây giờ có một sự hiểu biết nhiều hơn về các khái niệm cơ bản cho việc thiết kế và xây dựng một trang web.
Chúng ta đã chính thức đưa một trang web đi vào hoạt động từ các phác thảo trên giấy thành một trang web thực sự với địa chỉ web rất riêng của nó; tất cả trong vai trò của một nhà thiết kế web!
Trang web Tuts+ Town của chúng ta sẽ phục vụ như là một bảng hướng dẫn đẹp và dễ sử dụng cho các du khách đang cân nhắc đến thăm, vì vậy cảm ơn tất cả những công việc khó nhọc của bạn.
