Hướng dẫn how do i add an html template to my website? - làm cách nào để thêm mẫu html vào trang web của tôi?
|
Vì vậy, bạn đã mua một mẫu HTML và bây giờ bạn phải tùy chỉnh nó trước khi nó lên mạng. Nhưng bạn không có kinh nghiệm với mã để bạn không chắc chắn làm thế nào để đi về nó. Chà, hãy nghỉ ngơi dễ dàng, bởi vì trong hướng dẫn này, chúng tôi sẽ bước vào cách chỉnh sửa mẫu HTML. Show
Chúng tôi sẽ thực hiện giả định mà bạn chưa từng thấy một dòng HTML trước đây, chứ đừng nói đến việc chỉnh sửa một đường.  Nếu bạn đang tự hỏi nơi tìm mẫu trang web HTML5 chuyên nghiệp, hãy cuộn xuống theo hướng dẫn này. Chúng tôi đã có một lựa chọn các mẫu HTML5 hàng đầu. Đầu tiên, bạn sẽ học cách chỉnh sửa các mẫu ThemeForest và sau đó, bạn sẽ thấy một số mẫu tốt nhất từ thị trường. HTML là gì?Hãy để bắt đầu ngay từ đầu. Về mặt kỹ thuật, câu trả lời cho câu hỏi này là ngôn ngữ đánh dấu văn bản Hyper. Các thẻ được biểu thị bằng các dấu hiệu
Tuy nhiên, đôi khi, & nbsp; cũng có những thẻ độc lập, không có đối tác kết thúc, như thế này: Các thẻ HTML khác nhau làm cho các loại nội dung khác nhau xuất hiện trên một trang web. Ví dụ trên của các thẻ Hầu hết các mẫu HTML sẽ có trong tệp zip - nếu vậy, hãy tiếp tục và trích xuất ngay bây giờ. Sau đó, nhìn xung quanh bên trong các thư mục của mẫu cho đến khi bạn tìm thấy tệp index index.html, hoặc chỉ mục.htm. Trong ví dụ của chúng tôi, mẫu CV, tệp Index Index.html được tìm thấy trong thư mục 01.html-website. Bây giờ, hãy mở tập tin đó trong Chrome. Ngay cả khi Chrome không phải là trình duyệt mặc định hoặc ưa thích của bạn, hãy sử dụng nó bằng mọi cách, bởi vì chúng tôi sẽ làm việc với một số công cụ mà nó đã xây dựng để giúp bạn trong quá trình chỉnh sửa. Nếu đây là lần đầu tiên bạn học để chỉnh sửa các mẫu chủ đề, hãy cố gắng không bị cuốn hút vào ý tưởng điều chỉnh màu sắc và bố cục. Để làm điều đó, bạn phải đào sâu vào CSS, ngôn ngữ chịu trách nhiệm về kiểu dáng trang. Đó là một ý tưởng tốt để tập trung vào một điều tại thời điểm mà bạn mới sử dụng tùy chỉnh mẫu và HTML là nơi tốt nhất để bắt đầu. Để có được quả bóng lăn, hãy xem mẫu của bạn trong Chrome và tìm ra các yếu tố và hình ảnh bằng văn bản nào trên trang bạn cần thay đổi. Nếu bạn thích, bạn có thể chuẩn bị một danh sách để bạn có thể đi qua và kiểm tra từng mục khi bạn thực hiện chỉnh sửa. Trong trường hợp mẫu CV của chúng tôi, chúng tôi muốn thay đổi: Bây giờ chúng tôi có một danh sách các mục để thay đổi, chúng tôi có thể đặt về việc định vị các thẻ HTML tương ứng của chúng trong mã. Hãy bắt đầu với tên. Nhấp chuột phải vào tên, đọc theo cách mặc định của John John Smith và chọn Kiểm tra:Inspect: Một bảng điều khiển như thế này sẽ mở trong trình duyệt của bạn: Bảng điều khiển này cung cấp cho bạn một cách tương tác để xem mã. Di chuột của bạn trên dòng hiển thị Bằng cách di chuột của bạn trên các dòng mã khác nhau và xem các khu vực của trang nào sáng lên, bảng điều khiển này giúp bạn tìm ra mã nào tương ứng với phần tử nào. Bạn chỉ cần tiếp tục lơ lửng trên các dòng mã khác nhau cho đến khi phần mà bạn đang tìm kiếm ánh sáng. Bây giờ mở rộng thẻ Từ ngữ này phù hợp với những gì bạn thấy trên màn hình, vì vậy bạn biết rằng bạn đã tìm thấy phần phù hợp của mã. Chỉnh sửa thẻ trong HTMLBây giờ, thời gian để mở tệp HTML của bạn để chỉnh sửa. Mở tệp index index.html trong văn bản siêu phàm và bạn sẽ thấy một cái gì đó như thế này: Bạn muốn tìm mã ở đây phù hợp với những gì bạn đã thấy trong Thanh tra Chrome. Cuộn qua cho đến khi bạn tìm thấy nó trên các dòng 61 - 64. Bây giờ bạn có thể chỉnh sửa nội dung ở giữa các thẻ để thay đổi tên và nghề nghiệp của riêng bạn. Đầu tiên, chỉnh sửa John John Smith vào tên của riêng bạn: Sau đó, ở giữa các thẻ 2, thay đổi nhà phát triển mặt trước của người dùng thành nghề của riêng bạn. Lưu tệp của bạn sau đó làm mới mẫu trong Chrome. Bạn sẽ thấy những thay đổi của bạn xuất hiện như vậy: Lặp lại để chỉnh sửa nội dung khácBây giờ bạn có quy trình cơ bản xuống:
Hãy để lặp lại quy trình để chỉnh sửa phần còn lại của nội dung chúng tôi muốn tùy chỉnh. Thêm hình ảnh của riêng bạnTiếp theo, chúng tôi sẽ thêm hình ảnh của riêng mình vào bên trái của khu vực tên và nghề nghiệp. Nhấp chuột phải vào hình ảnh và kiểm tra nó, và lưu ý thẻ tương ứng: Bạn có thể thấy trong cửa sổ Thanh tra Dòng này nằm ngay trên các dòng chúng tôi vừa thay đổi: Chuyển đến tệp HTML của bạn và định vị thẻ trên dòng 59: Đối với thẻ này, bạn sẽ cần thay đổi giá trị của thuộc tính 3 mà bạn thấy bên trong thẻ 4. Bạn làm điều này bằng cách chỉnh sửa những gì ở giữa các dấu ngoặc kép của nó. Bạn sẽ thay đổi nó thành tên tệp và vị trí của hình ảnh của riêng bạn. Lấy một hình ảnh của chính bạn rằng kích thước 150px bằng 150px, (bỏ qua rằng tên tệp ở đó nói 140x140.png, kích thước thực sự là 150x150). Thả hình ảnh của bạn vào thư mục con _content _content; Nó trong cùng một thư mục với tệp index index.html của bạn. Bây giờ, trong tệp HTML của bạn, thay đổi giá trị của thuộc tính 3, thay thế cho 140x140.png, bằng tệp bạn vừa thêm vào thư mục con _content. Hãy chắc chắn kiểm tra tiện ích mở rộng tệp bạn gõ giống như cái trên tệp của bạn, ví dụ: PNG PNG, / Lưu tệp của bạn, làm mới Chrome và bạn sẽ thấy hình ảnh mới của bạn hiển thị: Chỉnh sửa các liên kết truyền thông xã hộiBây giờ, hãy để chỉnh sửa các liên kết trên các biểu tượng truyền thông xã hội ở góc trên cùng bên phải của mẫu. Giống như trước đây, nhấp chuột phải vào một trong những biểu tượng và kiểm tra nó. Trong cửa sổ, hãy nhìn vào dòng phía trên cái mà nổi bật và bạn sẽ thấy nó bao gồm văn bản trên Facebook Facebook-Icon. Chúng tôi sẽ sử dụng điều này để tìm mã trong tệp HTML của chúng tôi. Trở lại trong văn bản siêu phàm, nhấn Ctrl + F và chạy tìm cho Facebook Facebook-ICON. Bạn nên tìm thấy nó trên dòng 75.CTRL + F and run a find for “facebook-icon”. You should find it on line 75. Thẻ 6 trên dòng 75 là thứ tạo liên kết trên biểu tượng và thuộc tính 7 mà bạn thấy bên trong nó xác định liên kết đó sẽ đi đâu. Bạn cần phải thay đổi giá trị của thuộc tính 7 đó thành URL Facebook của bạn (ví dụ: & nbsp; https: //www.facebook.com/mylink). Thay thế 9 mà ở đó theo mặc định bằng URL của bạn. Sau đó làm điều tương tự cho Twitter trên dòng 79, Google+ trên dòng 83 và LinkedIn trên dòng 87. Nếu có một biểu tượng mà bạn muốn xóa hoàn toàn, hãy làm nổi bật liên kết của nó bắt đầu từ thẻ mở 0 và hoàn thành thẻ 1 đóng, thì hãy xóa mã đó. Bây giờ hãy lưu và làm mới trang web của bạn, sau đó & nbsp; khi bạn nhấp vào các liên kết, họ sẽ đi đến vị trí chính xác. Chỉnh sửa thông tin liên hệTiếp theo, hãy để thay đổi thông tin liên hệ ngay bên dưới các biểu tượng xã hội. Bắt đầu bằng cách kiểm tra từ trên email email để chúng tôi có thể tìm thấy nơi phần thông tin liên hệ này bắt đầu trong mã. Hãy lưu ý dòng mã mà bạn đã tô sáng và dòng bên dưới để bạn có thể khớp nó trong tệp HTML của mình. Trong văn bản siêu phàm, nhấn lại Ctrl + F và lần này tìm kiếm email. Bạn cần xác định vị trí thể hiện của từ email email là & nbsp; được bao quanh bởi mã khớp với những gì bạn thấy trong cửa sổ Thanh tra.CTRL + F again and this time search for “Email”. You need to locate the instance of the word “Email” which is surrounded by code matching what you saw in the inspector window. Bạn có thể tìm thấy nó trên dòng 94. Đánh dấu địa chỉ email mặc định, trong hai vị trí trên dòng đó: Sau đó thay thế nó bằng địa chỉ email của riêng bạn. Trên dòng tiếp theo, bạn cũng có thể thay thế số điện thoại bằng của riêng mình và trên dòng bên dưới mà bạn có thể thay thế địa chỉ web bằng của riêng mình: Chỉnh sửa các phần CVBây giờ, hãy để Lừa đi trước và bắt đầu chỉnh sửa các phần CV chính của mẫu. Có một vài phần cho các phần này, vì vậy chúng tôi sẽ bắt đầu bằng cách kiểm tra từng phần để bạn sẽ biết những gì cần tìm trong mã của bạn. Đây cũng sẽ là cơ hội để bạn tìm hiểu thêm một chút về việc di chuyển qua cửa sổ Thanh tra để tìm các phần khác nhau của trang web của bạn. Cuộn xuống phần Hồ sơ chuyên nghiệp của người Viking, nhấp chuột phải vào đoạn văn bản và kiểm tra nó. Trong thanh tra, bạn sẽ thấy nó đã làm nổi bật thẻ 2 Thẻ này chịu trách nhiệm tạo các đoạn văn trong văn bản của bạn. Tiếp theo, chúng tôi muốn biết toàn bộ phần văn bản trong phần CV trông như thế nào trong mã, không chỉ các đoạn riêng lẻ. Trong cửa sổ Thanh tra, nhấp vào dòng mã phía trên đoạn bạn vừa kiểm tra và bạn sẽ thấy tất cả các văn bản sáng lên: Điều này cho bạn biết rằng mỗi phần của mã được bọc trong các thẻ 3. Một 4 là viết tắt của một bộ phận và các thẻ này được sử dụng để kiểm soát bố cục và kiểu dáng. Bây giờ hãy kiểm tra tiêu đề của phần CV, hồ sơ chuyên nghiệp của người Hồi giáo: Lúc đầu, tất cả những gì bạn sẽ thấy là một bộ thẻ 4 khác. Điều này là do tiêu đề thực tế được lồng giữa các thẻ này. Nhấn hình tam giác nhỏ đó ở cuối dòng để mở rộng nó và xem nội dung của nó, sau đó làm lại một lần nữa trên dòng tiếp theo cho đến khi bạn thấy văn bản cấu hình chuyên nghiệp của bạn mà bạn đang tìm kiếm. Bạn sẽ thấy nó được bọc trong các thẻ Bây giờ chúng tôi biết mã trông như thế nào đối với mọi phần của phần CV này, chúng tôi có thể quay lại văn bản tuyệt vời và bắt đầu chỉnh sửa nó. Định vị con trỏ của bạn ngay trên đầu tài liệu HTML của bạn để bạn có thể bắt đầu tìm kiếm từ đầu. Nhấn Ctrl + F và tìm kiếm CV CV-item. Tiếp tục tìm kiếm cho đến khi bạn tìm thấy thể hiện của mã 7 mà ngay sau mã 8 mà bạn vừa xác định.CTRL + F and search for “cv-item”. Keep looking until you find the instance of of the code 7 that’s right after the 8 code you just identified. Bây giờ bạn có thể thay thế văn bản cho phần hồ sơ chuyên nghiệp bằng của riêng bạn. Bọc từng đoạn văn bản của bạn bằng thẻ 9. Khi bạn đã hoàn thành, hãy đảm bảo thẻ đoạn mở đầu của đoạn cuối của bạn của phần bao gồm thuộc tính 0 với giá trị 1, như thế này: 2. Điều này áp dụng một lớp tạo kiểu bố trí từ mẫu CSS CSS sẽ đảm bảo rằng khoảng cách trong phần văn bản được xử lý chính xác. Nếu bạn lưu tài liệu HTML của mình và làm mới trang web của bạn, bạn sẽ thấy mọi thứ trong hai phần hàng đầu đã được tùy chỉnh. Bây giờ chúng tôi có thể chuyển sang chỉnh sửa các phần CV còn lại giống như cách chúng tôi làm với hồ sơ chuyên nghiệp của Cameron. Kiểm tra từng phần của từng phần để làm quen với mã mà bạn nên tìm để chỉnh sửa chúng. Kiểm tra một tiêu đề công việc: Kiểm tra thời gian làm việc: Kiểm tra danh sách đạn: Sử dụng cách tiếp cận tương tự như bạn đã làm để chỉnh sửa phần Hồ sơ chuyên nghiệp trên mạng để chỉnh sửa nội dung của các phần CV còn lại. Để chỉnh sửa các tiêu đề công việc, thời gian làm việc hoặc danh sách đạn, tìm mã phù hợp với những gì bạn thấy trong cửa sổ Thanh tra, giống như bạn đã thực hiện với mỗi lần chỉnh sửa cho đến nay. Sử dụng thẻ 2 để tạo các đoạn văn và như với phần "Hồ sơ chuyên nghiệp", nếu bạn kết thúc một phần với một đoạn, hãy đảm bảo thẻ 4 của nó bao gồm 5, tức là 6. Lưu ý: Nếu bạn muốn thêm các phần CV mới hoặc xóa các phần hiện có, bạn sẽ cần sử dụng trình kiểm tra để tìm các thẻ mã bao bọc toàn bộ phần.: if you want to add new CV sections, or remove existing ones, you’ll need to use the inspector to find the code tags that wrap the entire section. Trong ví dụ này, bạn thấy toàn bộ phần được bọc với các thẻ 3. Trong mã của bạn, giờ đây bạn có thể tìm thấy toàn bộ khối mã và sao chép và dán nó để tạo một mục mới hoặc xóa toàn bộ nếu bạn muốn loại bỏ nếu nó. Chỉnh sửa tin nhắn bản quyềnVới các phần CV của bạn được chỉnh sửa, chúng tôi đã xuống mục cuối cùng trong danh sách các thay đổi của chúng tôi; Thông điệp bản quyền trong chân trang. Một lần nữa, chúng tôi sẽ sử dụng cùng một quy trình. Nhấp chuột phải vào tin nhắn bản quyền và kiểm tra nó: Sau đó tìm mã phù hợp trong HTML của bạn và chỉnh sửa nó với năm hiện tại và tên của riêng bạn: Bây giờ bạn đã biết cách chỉnh sửa mẫu HTMLLàm tốt! Bạn biết cách chỉnh sửa HTML và bạn đã hoàn toàn tùy chỉnh mẫu HTML này để hiển thị nội dung của riêng bạn. Tôi hy vọng bạn bây giờ cảm thấy tự tin để đảm nhận nhiều tùy chỉnh mã hơn trong tương lai. Mẫu HTML mà chúng tôi đã làm việc có thể là một mẫu tương đối đơn giản, nhưng hãy nhớ quá trình chỉnh sửa luôn giống nhau, bất kể mẫu có thể phức tạp đến mức nào. Chỉ cần kiểm tra mẫu và xác định mã cho phần bạn muốn thay đổi, sau đó tìm mã đó trong tệp HTML của bạn và chỉnh sửa nó. Khi bạn chỉnh sửa, nếu bạn thấy thẻ HTML mà bạn không hiểu, hãy để điều đó giữ bạn lại. Có vô số thông tin trực tuyến để giúp bạn tìm hiểu những gì mỗi người làm. 5 Mẫu đáp ứng HTML5 hàng đầu từ ThemeforestBạn đã học cách chỉnh sửa mẫu HTML. Bây giờ bạn đã biết thêm về cách sử dụng các mẫu HTML5 và cách chỉnh sửa mẫu chủ đề. Nếu bạn đã sẵn sàng để có các mẫu trang web HTML5 và bạn không biết bắt đầu từ đâu, hãy xem ThemeForest. & NBSP; Đây là thị trường tốt nhất để có được các mẫu HTML nói chung. Các mẫu trang web HTML5 mà bạn sẽ tìm thấy có được thiết kế chuyên nghiệp và cung cấp các bản cập nhật và hỗ trợ trọn đời. Dưới đây là lựa chọn các mẫu đáp ứng HTML5. Tùy chỉnh chúng để phù hợp với tất cả các nhu cầu của bạn và dễ dàng xây dựng dự án HTML của bạn. 1. Canvas - Mẫu HTML5 đa năngCanvas là một trong những mẫu HTML nói chung bán chạy nhất. Với hơn 60.000 doanh số, đây là một yêu thích đám đông nhờ vào khả năng vô tận của nó. Bạn sẽ nhận được hơn 1200 mẫu HTML5. Đúng rồi. Bạn có thể xây dựng bất cứ điều gì bạn muốn với hơn 100 bản demo đa và một trang. Canvas là một mẫu đáp ứng HTML5 hoàn chỉnh và nhanh chóng. Bạn phải xem bản xem trước trực tiếp của nó ở đây.
2. Porto - Mẫu đáp ứng HTML5Porto là một mẫu đáp ứng HTML5 yêu thích khác. Mẫu HTML chung này cung cấp nhiều tùy chọn tùy chỉnh. Cập nhật mới nhất của Porto bao gồm hơn 75 bản demo và hơn 600 tệp HTML. Mẫu cơ bản HTML5 này rất dễ dàng để tùy chỉnh và có hiệu suất tốc độ cao. Tìm hiểu thêm chi tiết thú vị trong bản xem trước trực tiếp.
3. Betheme - Mẫu HTML đa năng đáp ứngNếu bạn có nhiều trang web để xây dựng, hãy xem xét Betheme. Mẫu HTML chung này đi kèm với hơn 600 trang web được xây dựng trước, sẵn sàng sử dụng. Mẫu mã trang web này đi kèm với nhiều lưới bố cục, 20 kiểu tiêu đề có thể tùy chỉnh và nhiều hơn nữa. Ghé thăm bản xem trước trực tiếp của nó để kiểm tra thêm các tính năng thú vị. 4. Polo - Mẫu HTML5 đa năng đáp ứngCó hàng trăm mẫu mã trang web để lựa chọn trên chủ đề. Và Polo là một lựa chọn tuyệt vời. Mẫu cơ bản HTML5 này đi kèm với hơn 220 bản demo bố trí, hơn 700 mẫu, các yếu tố có thể tái sử dụng và nó siêu nhẹ và nhanh. Nếu bạn thích các mẫu trang web HTML5 với hỗ trợ và cập nhật trọn đời, thì đây là dành cho bạn. Tìm hiểu thêm chi tiết ghé thăm bản xem trước trực tiếp. 5. Litva - Mẫu HTML5 đa năngLitva là một trong những mẫu trang web HTML5 mới nhất. Mẫu HTML chung này nổi bật với thiết kế sạch sẽ và hiện đại. Litva là một mẫu phản ứng nhanh Bootstrap 4, nhanh HTML5. Nó đi kèm với hơn 200 yếu tố sẵn sàng và hơn 230 mẫu được chế tạo sẵn. Litva là hoàn hảo cho bất kỳ loại dự án trang web. Chỉ cần ghé thăm bản xem trước trực tiếp và xem cho chính mình. Khám phá thêm các mẫu, hướng dẫn và tài nguyên HTMLTôi hy vọng bạn thích hướng dẫn này về cách chỉnh sửa HTML và lựa chọn các mẫu cơ bản HTML5. Để có thêm một số trợ giúp trên đường đi, hãy kiểm tra các tài nguyên tuyệt vời này. Bạn cũng có thể kiểm tra các khóa học 30 ngày để tìm hiểu HTML & CSS và giới thiệu về HTML. Lưu ý biên tập: Bài đăng này đã được cập nhật với sự đóng góp từ Maria Villanueva. Maria là một nhà văn nhân viên với Envato Tuts+. Bạn có thấy bài đăng này hữu ích? Chào bạn. Tôi là một nhà thiết kế & lập trình viên làm việc trong các lĩnh vực thiết kế / phát triển web, phát triển trò chơi và nghệ thuật kỹ thuật số. Trong không gian web, tôi là một mặt trước, nhưng tôi có một chuyên môn đặc biệt trong việc tạo chủ đề, bất kể nền tảng. Tôi cũng thích tìm kiếm các kỹ thuật thiết kế và nhà phát triển hiệu quả nhất, tập trung vào người dùng trong ngày. Trong phát triển trò chơi, tôi nghiện chơi với mọi động cơ, bộ công cụ và khung khác nhau mà tôi có thể tìm thấy. Trong nghệ thuật kỹ thuật số, tôi yêu tất cả mọi thứ, từ hội họa đến công việc vector đến nghệ thuật pixel đến mô hình 3D. Nói tóm lại, nếu nó sáng tạo và bạn có thể làm cho nó kỹ thuật số, tôi yêu nó. Tôi có thể sử dụng các mẫu HTML miễn phí không?Việc nhận các chủ đề HTML miễn phí là bình thường và sử dụng chúng làm mẫu trang web HTML hoặc trang web được sử dụng làm mẫu trang đích. and use them as an HTML site template or a web page used as a landing page template.
HTML mẫu là gì?Phần tử HTML là một cơ chế để giữ HTML không được hiển thị ngay lập tức khi một trang được tải nhưng có thể được khởi tạo sau đó trong thời gian chạy bằng JavaScript.Hãy nghĩ về một mẫu như một đoạn nội dung đang được lưu trữ để sử dụng tiếp theo trong tài liệu.a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript. Think of a template as a content fragment that is being stored for subsequent use in the document. |
