Làm cách nào để tạo trang html đa ngôn ngữ?
|
Cách tạo trang web đa ngôn ngữ trong HTML. Trong đoạn này, chúng tôi thảo luận về cách tạo trang web đa ngôn ngữ hoặc đa ngôn ngữ bằng html hoặc ngôn ngữ khác. Đầu tiên chúng ta thảo luận về trang web đa ngôn ngữ là gì và làm thế nào chúng ta có thể sử dụng js và css đơn giản cho nó. Cách Tạo Trang Web Đa Ngôn Ngữ Bằng HTML, Cách Xây Dựng Trang Web Đa Ngôn Ngữ, Tạo Trang Web Đa Ngôn Ngữ Bằng HTML, Thiết Kế Trang Web Đa Ngôn Ngữ Sử Dụng html, CSS Và JS, Cách Tạo Google Dịch Thiết Kế Trang Web Show
Website đa ngôn ngữ là gìTrang web đa ngôn ngữ là bất kỳ trang web nào cung cấp nội dung bằng một vài ngôn ngữ. Chẳng hạn, một doanh nghiệp Canada có các biến thể tiếng Anh và tiếng Pháp trên trang web của mình. Trang web đa khu vực là trang web nhắm mục tiêu rõ ràng đến khách hàng ở nhiều địa điểm quốc tế. Cách tạo trang web đa ngôn ngữ trong HTML Nói một cách đơn giản, một trang web đa ngôn ngữ là một trang web có nội dung nhiều hơn một ngôn ngữ Công dụng của Website đa ngôn ngữ là gì
Cách tạo trang web đa ngôn ngữ trong HTMLThực hiện theo các bước một cách cẩn thận
 Xây dựng trang web đa ngôn ngữ bằng HTML – Làm cách nào tôi có thể làm cho trang web của mình đa ngôn ngữThực hiện theo các bước đó để Tạo trang web đa ngôn ngữ trong HTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 <. LOẠI TÀI LIỆU html> <html lang="vi"> <đầu> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content= initial-scale=1"> <liên kết rel="stylesheet" href="https. //maxcdn. bootstrapcdn. com/bootstrap/3. 4. 1/css/khởi động. tối thiểu. css"> src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> ` <. -- Gắn cờ CSS --> <liên kết href="https. //cdnjs. đám mây. com/ajax/libs/flag-icon-css/3. 5. 0/css/flag-icon. tối thiểu. css" rel="stylesheet" type="text/css" />
<. -- Kiểu dáng Chọn Hộp--> người chọn { đường viền. không; màu. #000; nền. không; } quyền mua { màu nền. #fff . quan trọng; } btn-mặc định. tích cực. tiêu điểm,. btn-mặc định. tích cực. tiêu điểm,. btn-mặc định. tích cực. bay lượn,. btn-mặc định. tích cực. tiêu điểm,. btn-mặc định. tích cực. tiêu điểm,. btn-mặc định. tích cực. bay lượn,. mở>. thả xuống-chuyển đổi. btn-mặc định. tiêu điểm,. mở>. thả xuống-chuyển đổi. btn-mặc định. tiêu điểm,. mở>. thả xuống-chuyển đổi. btn-mặc định. bay lượn { màu. trong suốt; màu nền. trong suốt; màu đường viền. trong suốt; } bootstrap-chọn. nhóm btn. không phải(. đầu vào-nhóm-btn),. bootstrap-chọn. btn-group[class*=span],. bootstrap-chọn. btn-group[class*=col-] { lề dưới. 3px; } . goog-te-banner-frame. bỏ qua dịch,. bỏ qua bản dịch { hiển thị. không có . quan trọng; } bộ chọn,. bootstrap-chọn { phần đệm. 1px; } bootstrap-chọn>. btn { chiều rộng. 100%; padding-right. 0; nền. trong suốt; đường viền. không; }
bootstrap-chọn>. btn. bay lượn { nền. trong suốt; đường viền. không; } bootstrap-chọn. nhóm btn. trình đơn thả xuống { đường viền. không; bóng hộp. không; } mở>. trình đơn thả xuống { hiển thị. chặn. quan trọng; tràn. hiển thị. quan trọng; chiều cao tối thiểu. 7px. quan trọng; } . google-logo-liên kết,. biểu tượng { hiển thị. không có . quan trọng; }
btn-mặc định. tích cực,. btn-mặc định. tích cực,. mở>. thả xuống-chuyển đổi. btn-mặc định { màu nền. trong suốt; màu đường viền. trong suốt; bóng hộp. không; } trình đơn thả xuống { cỡ chữ. 20px; màu nền. trong suốt; đường viền. không có. quan trọng; } menu thả xuống>li>a { phần đệm. 2px; đường viền. không có. quan trọng; } menu thả xuống>li>a. bay lượn,. đã chọn { màu nền. trong suốt. quan trọng; đường viền. không có. quan trọng; } mặt cắt ngang. btn { đường viền. không; } nhóm btn. mở. thả xuống-chuyển đổi { bóng hộp. không; } biểu tượng cờ { chiều cao dòng. 24px; chiều rộng. 24px; kích thước nền. che; }
<. -- Kết thúc Kiểu Chọn Hộp--> </đầu> <cơ thể>
<. -- Html Thẻ --> <div class="trans-section" style="float. phải;"> <div id="google_translate_element" style=""></div> <select class="selectpicker" data-width="fit" onchange="translateLanguage(this.value);"> <tùy chọn nội dung dữ liệu='' value="English">EN</option> <tùy chọn nội dung dữ liệu='' value="Arabic">AR</option> <tùy chọn nội dung dữ liệu='' value="Chinese">CN</option> <tùy chọn nội dung dữ liệu='' value="French">FR</option> <tùy chọn nội dung dữ liệu='' value="Portuguese (Portugal, Brazil)">PT</option> <tùy chọn nội dung dữ liệu='' value="Russian">RU</option> <tùy chọn nội dung dữ liệu='' value="Spanish">ES</option> </chọn> </div> <. -- Kết thúc Html Thẻ --> <. -- Trang web Chính Nội dung --> <div class="jumbotron text-center"> <h1>Tôi Đầu tiên Bootstrap Page</h1> <p>Thay đổi kích thước này responsive page to see the effect!</p> </div>
<div class="container"> <div class="row"> <div class="col-sm-4"> <h3>Cột 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.. . </p> <p>U enim ad minim veniam, quis nostrud exercitation ullamco laboris.. . </p> </div> <div class="col-sm-4"> <h3>Cột 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.. . </p> <p>U enim ad minim veniam, quis nostrud exercitation ullamco laboris.. . </p> </div> <div class="col-sm-4"> <h3>Cột 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.. . </p> <p>U enim ad minim veniam, quis nostrud exercitation ullamco laboris.. . </p> </div> </div>
</div> <. -- Kết thúc Trang web Nội dung --> src="https://code.jquery.com/jquery-1.11.3.min.js"> <. -- Dịch JS -->
<. -- Chọn Hộp JS -->
<. -- Tập lệnh chính cho TranslateElement -->
</body> </html>
Ghi chú. Nếu bạn muốn thay đổi phong cách theo trang web của mình, hãy thay đổi phong cách trong phần đầu. Ngoài ra, hãy chắc chắn rằng thiết kế của bạn không bị xáo trộn Cách tạo trang web đa ngôn ngữ bằng HTML CSS hoặc JS chính1 2 <. -- Gắn cờ CSS --> <liên kết href="https. //cdnjs. đám mây. com/ajax/libs/flag-icon-css/3. 5. 0/css/flag-icon. tối thiểu. css" rel="biểu định kiểu" loại="text/css" />
1 2 3 4 5 6 7 8 9 10 11 12 13 <. -- Html Thẻ cho Translation --> <div class="trans-section" . phải;" style="float:right;"> <div id="google_translate_element" style=""></div> <select class="selectpicker" data-width="fit" onchange="translateLanguage(this.value);"> <tùy chọn dữ liệu-nội dung='' value="English">EN</option> <tùy chọn dữ liệu-nội dung='' value="Arabic">AR</option> <tùy chọn dữ liệu-nội dung='' value="Chinese">CN</option> <tùy chọn dữ liệu-nội dung='' value="French">FR</option> <tùy chọn dữ liệu-nội dung='' value="Portuguese (Portugal, Brazil)">PT</option> <tùy chọn dữ liệu-nội dung='' value="Russian">RU</option> <tùy chọn dữ liệu-nội dung='' value="Spanish">ES</option> </chọn> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 src="https://code.jquery.com/jquery-1.11.3.min.js"> <. -- Dịch JS -->
<. -- Chọn Hộp JS -->
<. -- Tập lệnh chính cho TranslateElement -->
Bất kỳ nghi ngờ về chủ đề này? Làm cách nào tôi có thể đặt nhiều ngôn ngữ trong HTML?Để thay đổi ngôn ngữ, chỉ cần đặt thuộc tính lang . Chúng ta có thể định nghĩa nó ở bất kỳ đâu trong tài liệu, chẳng hạn như trong nội dung, trong đoạn văn, trong tiêu đề hoặc trong thẻ span. Nhưng cách tốt nhất là đặt lang trong thẻ span. ví dụ 1. Giống như ở đây, chúng tôi đã thay đổi ngôn ngữ sang tiếng Pháp trong thẻ span.
HTML có thể tích hợp với các ngôn ngữ khác không?HTML có thể tích hợp dễ dàng với các ngôn ngữ khác
. Ví dụ: trong Javascript, Php, nút. js, CSS và nhiều ngôn ngữ khác, chúng tôi viết mã của các ngôn ngữ này giữa HTML và mã này trộn với chúng rất dễ dàng. |
