Nếu bạn là nhà cung cấp nội dung, hãy đọc HTML. Nếu bạn là nhà thiết kế đồ họa, hãy đọc CSS. Nếu bạn là một lập trình viên và muốn thêm các hiệu ứng động vào trang web của mình, hãy đọc JavaScript. Nhưng nếu bạn hoạt động trong OMO [do một người vận hành] và dự kiến sẽ tạo một trang web có giao diện khá đẹp mắt, thì bạn cần hiểu HTML, CSS và JavaScript. Đây là lý do mà tôi kết hợp cả HTML và CSS trong bài viết này vì chúng không thể tách rời
Để tạo một trang web OMO, tôi khuyên bạn nên
- Hiểu rõ về HTML, CSS và JavaScript
- Chọn một công cụ soạn thảo. Sử dụng Dreamweaver nếu bạn có đủ khả năng. Nếu không, hãy tìm một trình chỉnh sửa mã nguồn miễn phí [chẳng hạn như VS Code, Sublime Text, Sublime Text, NotePad++]. Đối với các lập trình viên, Eclipse/NetBeans/VSCode là lựa chọn tốt cho HTML/CSS/JavaScript khi họ thực hiện kiểm tra cú pháp và cung cấp mã tự động hoàn thành
- Thiết kế và tổ chức trang của bạn. Quyết định giao diện trang web của bạn. Có bao nhiêu cột? . g. , tiêu đề, menu điều hướng, nội dung chính, thanh bên, mục lục, chân trang]?
- Xem kỹ các trang web yêu thích của bạn. CSS rất cồng kềnh và phức tạp. Bạn không thể phát minh ra bánh xe này. Sử dụng Trình gỡ lỗi F12 để kiểm tra HTML/CSS của các trang web yêu thích của bạn.
Sử dụng khung CSS, chẳng hạn như BootStrap, để bắt đầu thiết kế của bạn. - Bắt đầu với thiết kế CSS ban đầu. Thiết kế trang web bắt đầu bằng CSS, KHÔNG phải HTML?. Làm việc trên CSS của bạn
- Phân vùng trang web của bạn thành phần hợp lý thông qua
[hoặc HTML5',,
,], chẳng hạn như đầu trang, nội dung, chân trang. Chỉ định một The h1 tags enclose a heading level 1
1 choThe p tags is used to markup a paragraph.
đó là duy nhất [e. g. , "
The h1 tags enclose a heading level 1
2", "______03". Gán tên lớp chung cho các phần [không phải là duy nhất] có cùng kiểu [e. g. , "The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
4", "______05"]. Viết CSS id-selectors và class-selector [e. g. ,The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
6The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
7The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
8] cho các thẻ phổ biến [chẳng hạn nhưThe p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
9,The p tags is used to markup a paragraph.
0,
1,
2,
3,
4,
5,
6], trong mỗi
'S. Về cơ bản, những gì tôi đang nói là tự thiết kế từng phần - một chiến lược "chia để trị"
- Tạo các lớp con cho các kiểu phổ biến, chẳng hạn như bố cục bảng và hình ảnh và các hiệu ứng đặc biệt [e. g. , "
7", "
8", "
9"]. Chúng có thể được sử dụng trong
và
The h1 tags enclose a heading level 1
90The p tags is used to markup a paragraph.
- Có rất nhiều mẫu CSS [hoặc mẫu web] tốt và miễn phí có sẵn trực tuyến [chỉ cần google "Mẫu CSS" hoặc "Mẫu web"]. Chọn một cái đáp ứng sở thích của bạn để làm mẫu sau. Bạn cũng có thể xem CSS của bất kỳ trang web nào mà bạn thấy thú vị. Lưu ý về Quyền sở hữu trí tuệ, không sử dụng bất kỳ hình ảnh hoặc đồ họa nào trừ khi chúng thuộc phạm vi công cộng. Cực kỳ dễ dàng để tự tạo một cái bằng một công cụ hình ảnh, chẳng hạn như PhotoShop, Element, Illustrator hoặc thậm chí là Paint.
Sử dụng khung CSS, chẳng hạn như BootStrap; .
- Phân vùng trang web của bạn thành phần hợp lý thông qua
- Viết các trang HTML của bạn. Bạn có thể cần sửa đổi CSS khi tiếp tục. Thách thức lớn nhất đối với tác giả web OMO là phải quan tâm đến cả nội dung và hình thức cùng một lúc, đôi khi có thể mất tập trung.
- Lặp lại các bước trước đó cho đến khi bạn hài lòng với giao diện, bố cục và quan trọng nhất là nội dung của trang - cố gắng không tạo thêm một trang web không đáng kể nào khác
Tôi đã viết những điều trên từ nhiều năm trước khi tạo các trang web này [Bạn có thể xem CSS của tôi]. Hôm nay, tôi khuyên bạn nên tìm hiểu kiến thức cơ bản về HTML/CSS, nhưng hãy nhanh chóng chuyển sang một khuôn khổ như BootStrap để tạo ra các trang web có giao diện chuyên nghiệp. Bạn không thể viết tốt hơn những người này
Giới thiệu về HTML
HTML [Ngôn ngữ đánh dấu siêu văn bản] là gì?- HTML là ngôn ngữ để xuất bản các trang web trên WWW [World-Wide Web, hay World-Wide Wait?]
- HTML là Ngôn ngữ mô tả tài liệu [còn gọi là Ngôn ngữ đánh dấu tài liệu]. HTML là ngôn ngữ đánh dấu tiêu chuẩn cho các tài liệu được thiết kế để hiển thị trong trình duyệt web. HTML KHÔNG phải là ngôn ngữ lập trình như C/C++/C#/Java, được sử dụng để triển khai thuật toán lập trình
- Tài liệu HTML là tài liệu văn bản và con người có thể đọc được
- Ngày nay, HTML hoạt động cùng với CSS [Cascading Style Sheets] [dành cho bố cục] và JavaScript [dành cho lập trình]
- Dự thảo HTML [tháng 10 năm 1991]. Tim Bernes-Lee [của CERN] đã đề xuất HTML đầu tiên [với 18 thẻ] để chia sẻ tài liệu trong hệ thống siêu văn bản
- HTML2. 0 [24-11-1995]. Xuất bản dưới dạng IETF RFC 1866
- HTML3. 2 [14-01-1997]. Xuất bản dưới dạng W3C HTML 3. 2 khuyến nghị
- HTML4. 0 [tháng 12 năm 1997]. Xuất bản dưới dạng W3C HTML 4. 0 Khuyến nghị, với bộ khung nghiêm ngặt, chuyển tiếp và. Vào ngày 24 tháng 12 năm 1999, HTML 4. 01 đã được W3C xuất bản dưới dạng đặc tả HTML cuối cùng. Tháng 5 năm 2000, HTML 4. 01 Nghiêm ngặt theo tiêu chuẩn quốc tế ISO/IEC 15445. 2000
- XHTML 1. 0 [tháng 1 năm 2000]. W3C được coi là HTML 4. 01 làm HTML cuối cùng và chuyển sang phát triển XHTML 1. 0 với các quy tắc và cú pháp chặt chẽ hơn, tiếp theo là XHTML 2. 0. XHTML 2. 0, mặc dù đẹp về mặt lý thuyết, nhưng không thực tế vì nó không tương thích ngược với HTML4/XHTML1. 0. Một nhóm nổi loạn có tên là WHATWG [Nhóm làm việc về công nghệ ứng dụng siêu văn bản web] tiếp tục làm việc để mở rộng HTML với nhiều tính năng hơn theo cách tương thích ngược. Năm 2004, WHATWG phát hành HTML5. Đến năm 2007, HTML5 đã thu hút được sự chú ý của các nhà phát triển. W3C quyết định từ bỏ XHTML 2. 0 và chấp nhận HTML5
- HTML 5 [28-10-2014]. HTML 5 đã được xuất bản dưới dạng Khuyến nghị của W3C, tiếp theo là HTML 5. 1 vào ngày 1 tháng 11 năm 2016 và HTML 5. 2 vào ngày 14 tháng 12 năm 2017
- Vào ngày 28 tháng 5 năm 2019, W3C đã thông báo rằng WHATWG sẽ là nhà xuất bản duy nhất của các tiêu chuẩn HTML và DOM
Ngày nay, các thông số kỹ thuật phổ biến là HTML5 [@ https. //html. thông số kỹ thuật. cái gì. org/multipage/]. Tuy nhiên, điều thú vị nhất về các tiêu chuẩn là không ai thực sự tuân theo chúng một cách nghiêm ngặt. Mọi trình duyệt [Chrome, Firefox, Opera, Safari và Internet Explorer] đều có các biến thể riêng và hỗ trợ các tiêu chuẩn ở nhiều mức độ khác nhau [để vượt trội so với các trình duyệt khác]
Thẻ đánh dấuHTML sử dụng các thẻ đánh dấu, chẳng hạn như
[đối với Đoạn],
đến [đối với Tiêu đề cấp 1 đến 6],The h1 tags enclose a heading level 191 [đối với Hình ảnh],The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 190 [đối với Anchor hoặc Hyperlink], để đánh dấu một tài liệu. Các thẻ đánh dấu HTML thực hiện các chức năng nàyThe p tags is used to markup a paragraph.
- Bố cục tài liệu, đ. g. ,
[bố cục như một đoạn văn],
to [bố cục như tiêu đề cấp 1 đến 6],The h1 tags enclose a heading level 1
93 [thực hiện ngắt dòng],The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
94 [vẽ thước kẻ ngang],The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
41The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
42The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
43The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 144The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
45
The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 146The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 147The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 148The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 149The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 150The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 151The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 152The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
53
The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 154The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
55The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
56The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
57The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
58The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
59The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
60The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
61
The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 162The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
63The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
64The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
65The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
66The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
67The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
68The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 169The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 170The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 171The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 172The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 173] hoặc cửa sổ trình duyệt [The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 182];The p tags is used to markup a paragraph.
Đối với các phần tử được định vị không phải ______084, vị trí mới được chỉ định thông qua các thuộc tính
The h1 tags enclose a heading level 185,The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1053,The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 187,The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1054,The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1236,The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1237The p tags is used to markup a paragraph.
- hàng đầu. trái. đáy. đúng. N. N%. tự động. Đặt khoảng cách từ cạnh của phần tử này đến cạnh tương ứng của khối chứa
- chiều rộng. Chiều cao. N. N%. tự động. Đặt chiều rộng và chiều cao của phần tử khối này
- chỉ số z. con số. tự động. Khi hai khối chồng lên nhau do định vị lại, khối có số
The h1 tags enclose a heading level 1
91 lớn hơn sẽ ở trên cùng [i. e. , trục z hướng ra ngoài màn hình như trong hệ tọa độ đồ họa 3D tiêu chuẩn]. Số âm được phép.The p tags is used to markup a paragraph.
077 mặc định xếp phần tử ở cùng cấp độ với phần tử gốc của nó. Nếu
The h1 tags enclose a heading level 1
91 của hai phần tử giống nhau hoặc không cóThe p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
91 nào được xác định, phần tử cuối cùng được hiển thị sẽ được đặt lên trên cùng. chỉ mục z với alpha có thể tạo hiệu ứng xem quaThe p tags is used to markup a paragraph.
- tràn ra. tràn-x. tràn-y. tự động. ẩn giấu. cuộn. dễ thấy. thừa kế. Chỉ định cách xử lý nội dung tràn chiều rộng/chiều cao của khối
- tràn tràn. thông thường. ngắt lời. thừa kế. chỉ định xem trình duyệt có thể ngắt dòng với các từ dài hay không nếu chúng làm tràn vùng chứa
The h1 tags enclose a heading level 180 [mặc định]The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 180 mặc định định vị phần tử theo quy trình thông thường của trang, theo thứ tự được trình duyệt đọc. Các thuộc tínhThe p tags is used to markup a paragraph.
The h1 tags enclose a heading level 185,The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1054,The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 187,The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1053 không có hiệu lực đối vớiThe p tags is used to markup a paragraph.
The h1 tags enclose a heading level 184The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 183The p tags is used to markup a paragraph.
Di chuyển phần tử so với vị trí luồng bình thường của nó. Không gian ban đầu chiếm bởi phần tử này được giữ nguyên. Các yếu tố xung quanh không bị ảnh hưởng. Ví dụ,
03
Định vị phần tử so với phần tử tổ tiên không tĩnh đầu tiên; . Phần tử định vị tuyệt đối được lấy ra khỏi luồng bình thường, như thể nó không xuất hiện
Để định vị tuyệt đối một phần tử trong phần tử chứa [không phải ], hãy khai báo phần tử chứa tương đối mà không có bất kỳ chuyển động nào, e. g. ,
04
Định vị tuyệt đối thật thú vị. Bạn có thể tạo hoạt ảnh [chẳng hạn như bóng nảy và tuyết rơi] theo vị trí tuyệt đối [và liên tục định vị lại] hình ảnh trên màn hình của trình duyệt. Xem "Ví dụ JavaScript" của tôi
Ví dụ,
The h1 tags enclose a heading level 182The p tags is used to markup a paragraph.
Phần tử được cố định ở vị trí so với cửa sổ của trình duyệt và nó không cuộn đi. Vị trí được xác định trong các thuộc tính
The h1 tags enclose a heading level 185,The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1053,The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 187,The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1054 [hoặcThe p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1236 vàThe p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1237]. Yếu tố định vị cố định được đưa ra khỏi luồng bình thường, như thể nó không có mặtThe p tags is used to markup a paragraph.
Ví dụ, một cố định
được thêm vào ví dụ trên ở vị trí tuyệt đối. Hãy lưu ý rằng chỉ mục z được sử dụng để đảm bảo rằng giá trị cố định
luôn luôn ở trên đầu trang khác
's, bất kể thứ tự viết
'S
Thuộc tính CSS
12 và
13 - Di chuyển phần tử sang trái hoặc phải
trôi nổi. trái. đúng. không ai
Bạn có thể đẩy một phần tử sang cạnh trái hoặc phải của phần tử chứa thông qua thuộc tính
12. Float thường được sử dụng cho hình ảnh, với các văn bản bao quanh phần tử nổi. Các phần tử trước phần tử nổi không bị ảnh hưởng. Phần tử sau phần tử nổi chảy xung quanh nó
Bạn có thể nổi theo chiều ngang [tôi. e. , trái và phải], không lên và xuống. Khác với hình ảnh, phần tử float sẽ có chiều rộng và chiều cao được chỉ định rõ ràng. Các phần tử float thực sự được đưa ra khỏi luồng bình thường. Phần tử sau hoạt động như thể phần tử nổi không có ở đó, nhưng các văn bản kèm theo sẽ bao quanh phần tử nổi
Nếu nhiều hình ảnh được thả nổi cùng nhau [tức là ở bên trái], hình ảnh thứ hai sẽ được đẩy sang cạnh bên trái của hình ảnh đầu tiên, v.v. nếu có sẵn khoảng trống theo chiều ngang; . Ví dụ chúng ta có thể thả nổi nhiều ảnh thu nhỏ về bên trái như sau
Để tắt phần nổi, hãy sử dụng thuộc tính
13 và chỉ định bên nào [trái, phải hoặc cả hai] không cho phép phần tử nổi
xa lạ. trái. đúng. cả hai. không ai
16 có nghĩa là phía bên trái của phần tử này không thể là phần tử nổi. Nghĩa là, bên trái sẽ bắt đầu bằng lề trái của phần tử chứa.
16 tương tự như
The h1 tags enclose a heading level 193Sử dụngThe p tags is used to markup a paragraph.
12 để tạo cột
Theo mặc định, các phần tử khối bắt đầu ở cạnh trái và chiếm toàn bộ chiều rộng của phần tử chứa. Do đó, nó sẽ không xếp cái này cạnh cái khác ở định dạng cột. Bạn có thể sử dụng thuộc tính
12 để tạo cột hoặc lưới
[TODO] thêm
Ví dụ. Định vị một khung nội tuyến"______921"
The h1 tags enclose a heading level 1018The p tags is used to markup a paragraph.
"______922"
The h1 tags enclose a heading level 1019The p tags is used to markup a paragraph.
Thuộc tính CSS
23 [cũng áp dụng cho
The h1 tags enclose a heading level 191] làm nổi khung nội tuyến sang lề trái hoặc phải của cửa sổ trình duyệtThe p tags is used to markup a paragraph.
Bạn cũng có thể sử dụng thuộc tính CSS
25 để định vị iframe [và các phần tử HTML khác], "
26" định vị phần tử so với phần tử tổ tiên được định vị đầu tiên của nó;
The h1 tags enclose a heading level 10The p tags is used to markup a paragraph.
Thuộc tính CSS
30 và
31
trưng bày. chặn. nội tuyến. chặn Nội tuyến. không ai. mục danh sách. cái bàn. hàng trong bảng. ô bảng. lưới. lưới nội tuyến
- khối và nội tuyến. Thuộc tính
30 kiểm soát bố cục và luồng của phần tử HTML. Hầu hết các phần tử có giá trị
30 mặc định là
34 [
,
] hoặc
35 [
The h1 tags enclose a heading level 1
90,The p tags is used to markup a paragraph.
The h1 tags enclose a heading level 1
90].The p tags is used to markup a paragraph.
Có thể sử dụng
38 để hiển thị phần tử nội tuyến dưới dạng khối. Ví dụ: Mặt khác,
39 có thể được sử dụng để hiển thị nội tuyến phần tử khối. Ví dụ:
- chặn Nội tuyến. pha trộn phần tử với luồng văn bản, đồng thời cho phép chúng tôi sử dụng phần đệm, lề, chiều cao và các thuộc tính tương tự không có hiệu ứng hiển thị trên các phần tử nội tuyến
- không ai. sẽ KHÔNG được hiển thị và không chiếm dung lượng [so với.
40 sẽ không hiển thị phần tử nhưng phần tử vẫn chiếm dung lượng]
- mục danh sách. hiển thị phần tử như thể nó là một
- .
- bảng, hàng của bảng, ô của bảng. để hiển thị phần tử [
] như
hiển thị. ẩn giấu. dễ thấy. được sử dụng để ẩn hoặc hiển thị phần tử mà không xóa phần tử khỏi quy trình bình thường của trang. Đó là, không gian bị chiếm bởi phần tử được bảo toàn