Bài viết được sự cho phép của tác giả Trần Anh Tuấn Xin chào các bạn. Lâu ngày ẩn danh tu luyện nay mềnh đã trở lại. Và để bắt đầu sự trở lại này thì mình quyết định ra series chia sẻ kỹ năng và kinh nghiệm cắt PSD sang HTML toàn tập từ A-Z cho các bạn. Phần này rất là dài nên mình sẽ chia ra nhiều phần(modules) để cho các bạn không bị rối loạn khi làm và học. Mình đã lên danh sách các check-list nên làm khi cắt PSD của mình bao gồm: # Phân tích design Khi các bạn nhận được design do ai yêu cầu hoặc các bạn làm bài test thực tập hoặc tập cắt PSD tải từ trên mạng về. Thì việc đầu tiên các bạn cần làm đó là phân tích nó. Vậy các bạn nên phân tích những gì? Sau đây là check-list (việc cần làm) của mình khi phân [...]

Bài viết được sự cho phép của BQT Kinh nghiệm lập trình HTML là ngôn ngữ đánh dấu được sử dụng để tạo cấu trúc và định dạng cho các trang web. Đối với cả những lập trình viên mới học lẫn những người chuyên nghiệp, việc hiểu rõ và sử dụng thành thạo các thẻ HTML cơ bản không chỉ giúp xây dựng trang web một cách hiệu quả mà còn hỗ trợ đắc lực trong việc tối ưu hóa công cụ tìm kiếm (SEO). Dưới đây là tổng hợp các thẻ HTML quan trọng và thông dụng, cùng ví dụ minh họa chi tiết. Xem thêm các việc làm HTML lương cao trên TopDev Khái quát lại về HTML HTML là gì? HTML làm từ viết tắt của cụm tiếng Anh HyperText Markup Language, có nghĩa là “ngôn ngữ đánh dấu siêu văn bản”. Đây là một dạng ngôn ngữ đặc biệt, khác với các ngôn ngữ ký tự hay ngô [...]

Bài viết được sự cho phép của tác giả Lê Chí Dũng Trước khi giới thiệu về Lit-HTML (Lit) mình tìm hiểu xíu về Web components cái đã. Từ khi khái niệm Web components được giới thiệu bởi Alex Russel vào năm 2011 trong một hội thảo về front-end. Google đã tích cực phát triển công nghệ này với dự án mã nguồn mở Polymer (https://lit-html.polymer-project.org), và Lit-html (Lit.dev) đã mang lại một đột phá trong việc phát triển Web đặt biệt là về Front-end. [irp posts="23631" name="Cách để tạo một Switch trên iPhone bằng HTML và CSS"] [irp posts="40063" name="Cấu trúc trang HTML cơ bản"] Web components là gì? Web components là một tập các quy chuẩn công nghệ dùng cho việc xây dựng các thành phần web được đóng gói (tách biệt với phần code còn lại của ứng dụng như View / Back For Front của server side reder) và có thể tái sử dụng cho client side (nôm na là nén thành cục javaScript for browser và tự render linh hoạt) [...]

Bài viết được sự cho phép của tác giả Trần Anh Tuấn Ở phần trước mình đã hướng dẫn cho các bạn các kiến thức về các thẻ trong Form một cách khá chi tiết kèm các hình ảnh minh hoạ cũng như các lưu ý khi làm việc với Form. Tiếp tục ở phần 3 này mình sẽ nói về các thẻ thường được dùng trong cặp thẻ head nhé. [irp posts="23631" name="Cách để tạo một Switch trên iPhone bằng HTML và CSS"] [irp posts="40063" name="Cấu trúc trang HTML cơ bản"] ## Thẻ title Đây là thẻ định nghĩa tiêu đề của trang web, nó sẽ hiển thị trên tab của trình duyệt ví dụ các bạn đang đọc bài này của mình thì trong HTML của nó sẽ là như đoạn code này, các bạn có thể rê chuột vào tab để Chrome hiển thị tooltip lên là thấy nha. <title>HTML cơ bản toàn tập cho người mới phần 3 - Evondev Blog</title> ## Thẻ Meta <meta name="viewport" content="width=device-width, [...]

Bài viết được sự cho phép của tác giả Kien Dang Chung Quá trình học lập trình thường khá dài và hầu hết mọi người đều muốn nhanh chóng bước vào các bài lý thuyết lập trình và thực hành các ví dụ thực tế. Những bài viết đầu tiên một khóa học lập trình web chủ yếu giới thiệu các thông tin xoay quanh ngôn ngữ, các thuật ngữ liên quan tuy nhiên cũng rất quan trọng bởi khi bạn đã nắm được HTML5 là gì? thì việc học các cấu trúc, các thẻ html chỉ là công cụ để xây dựng website mà thôi. Có rất nhiều bạn đã vào nghề lập trình web rất lâu nhưng không hiểu rõ bản chất HTML là gì hay còn mơ hồ về siêu văn bản, tại sao lại phải sử dụng HTML?... mà chỉ nhăm nhăm muốn code ngay. Những kiến thức cơ bản là nền tảng để phát triể [...]

Bài viết được sự cho phép của tác giả Kien Dang Chung Nội dung là phần quan trọng nhất của trang HTML, đây chính là phần người dùng có thể đọc được khi xem các trang web trên trình duyệt. Trong nội dung trang HTML có thể có rất nhiều các thành phần như  các tiêu đề, các đoạn nội dung, hình ảnh, liên kết, các bảng thông tin... Trước khi bắt đầu tìm hiểu kiến thức các thành phần của nội dung trang HTML bạn cần nắm được cấu trúc chung của một trang HTML, vì trong bài viết này chúng ta sẽ xoay quanh nội dung nằm trong thẻ . Các thẻ HTML được giới thiệu trong bài viết này phần lớn đã có từ các phiên bản trước HTML5, chúng thường xuyên được sử dụng vì vậy bạn cần ghi nhớ chúng. [irp posts="29694" name="Dùng Emmet để Code HTML/CSS nhanh hơn"] [irp posts="32594" name="HTML cơ bản toàn tập cho người mới phầ [...]

Bài viết được sự cho phép của tác giả Trần Thị Thu Hà Hôm nay là ngày thứ 7, cuối tuần, tôi mới có thời gian thoải mái đắm chìm trong một vài bài nhạc Trịnh du dương,ngọt ngào  cùng nhấm nháp thứ chất lỏng đen sì , chát đắng  sặc mùi hóa chất mà người ta vẫn hay kháo nhau bằng cái tên rất mĩ miều “cafe” .Chết lảm nhảm rồi!!! [irp posts="30906" name="5 bước tìm hiểu sơ lược thành phần một web HTML động"] [irp posts="23631" name="Cách để tạo một Switch trên iPhone bằng HTML và CSS"] Đây là một bài chia sẻ. Chuẩn đấy! Mặc dù nó được tôi viết (chính xác là đánh máy), nhưng nó chỉ là một bài chia sẻ . Chắc chắn không phải là một giáo án hay đại loại thế, đừng nhầm! Giáo án thuộc một phạm trù gì đó dành cho nhà giáo đáng kính , hay các expert cao quý .Còn tôi, đơn thuần [...]

Bài viết được sự cho phép của vntesters.com Trước khi qua bước kiểm tra HTML5 message hãy điểm lại 1 số thông tin: [irp posts="30906" name="5 bước tìm hiểu sơ lược thành phần một web HTML động"] [irp posts="23631" name="Cách để tạo một Switch trên iPhone bằng HTML và CSS"] HTML5 Form: Một phần của trang web bạn đang test, cho phép người dùng tương tác với hệ thống, thu thập thông tin: form đăng nhập/ đăng kí/ mua hàng/ bình luận/.. Cách thức hoạt động: User mở form nhập liệu Điền thông tin vào form sau đó submit dữ liệu lên máy chủ – trong step này dữ liệu được nhập vào có thể được kiểm tra tại browser của người dùng thông qua các đoạn mã Javascript Server sau khi nhận được thông tin sẽ xử lý thông qua các ngôn ngữ kịch bản máy chủ và thực hiện kiểm tra dữ liệu trong form, logic, ghi dữ liệu vào DB Sau khi xử lý xong thông tin sẽ gửi lạ [...]

HTML hay HyperText Markup Language, là thành phần quan trọng nhất và là khung sườn của World Wide Web. Tuy nhiên, nếu chỉ riêng HTML thôi thì khá đơn điệu bởi vì nó chỉ có thể cung cấp các trang web tĩnh; nhằm đáp ứng nhu cầu ngày càng tăng về các tính năng ấn tượng hơn, HTML đã được kết hợp với các thành phần khác như CSS, Javascript... Tuy nhiên website ngày càng khá cồng kềnh và các trình duyệt khác nhau thực hiện những tính năng theo cách riêng của chúng. HTML5 sinh ra để giải quyết những vấn đề lớn của HTML, giúp cho trang web trở nên hiệu quả và đẹp đẽ hơn. HTML5 là gì? HTML5 là một ngôn ngữ cấu trúc và trình bày nội dung cho World Wide Web. Đây là phiên bản thứ 5 của ngôn ngữ HTML, được giới thiệu bởi World Wide Web Consortium (W3C). HTML5 vẫn sẽ giữ lại những đặc điểm cơ bản của HTML4 và bổ sung thêm cá [...]

HTML là gì? HTML là viết tắt của cụm từ Hypertext Markup Language (tạm dịch là Ngôn ngữ đánh dấu siêu văn bản). HTML được sử dụng để tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, titles, blockquotes... và HTML không phải là ngôn ngữ lập trình. 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 và attributes). 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ụ, chúng ta có thể tạo một đoạn văn bằng cách đặt văn bản vào trong cặp tag mở và đóng văn bản <p> và </p> : <p>Đây là cách bạn thêm đoạn văn trong HTML.</p> Nhưng một số thẻ đặc biệt lại không có thẻ đóng [...]

Bài viết được sự cho phép của tác giả Trần Anh Tuấn Ở phần trước mình đã hướng dẫn cho các bạn các kiến thức về các thẻ hay dùng trong HTML nhất, tuy nhiên trong HTML thì còn rất nhiều thẻ khác và đi kèm với chúng là những thuộc tính nữa. Trong bài ngày hôm nay chúng ta sẽ cùng nhau khám phá và tìm hiểu thêm các thẻ trong form và table nhé. Bắt đầu thôi nào. # Các thẻ về form ## Thẻ form Là thẻ block, thẻ này thường được dùng khi các bạn muốn gửi dữ liệu tới server như đăng nhập, đăng ký, cập nhật thông tin thông qua việc submit form. Trong thẻ form này có nhiều thuộc tính mà các bạn cần nắm rõ như sau. [irp posts="30906" name="5 bước tìm hiểu sơ lược thành phần một web HTML động"] [irp posts="23631" name="Cách để tạo một Switch trên iPhone bằng HTML và CSS"] Thuộc tính action truyền vào đường dẫ [...]

Bài viết được sự cho phép của tác giả Trần Anh Tuấn Xin chào các bạn đặc biệt là các bạn mới học ngành web này. Đây là một series về kiến thức HTML cơ bản toàn tập dành cho người mới mà mình quyết định viết và chia sẻ cách học, cách sử dụng áp dụng chúng vào thực tế như thế nào, cấu trúc ra sao… thông qua những năm kinh nghiệm mình đi làm và trau dồi. Hi vọng những kiến thức về HTML cơ bản toàn tập mà mình chia sẻ sẽ giúp các bạn hiểu hơn về HTML cơ bản cũng như sử dụng chúng một cách tốt nhất. Mình thấy nhiều bạn mới học ở nhiều nguồn như w3schools hay MDN là những nguồn học nước ngoài tốt, tuy nhiên đôi khi các bạn đọc tiếng Anh không hiểu cũng như học xong không biết các thẻ trong HTML có nhữ [...]

Tác giả: Jesse Hall Emmet là một trong những tính năng built-in ưa thích của mình với text editor VS Code, và nó cũng là extension có sẵn trên các nền tảng code editor khác. Với Emmet, bạn có thể đẩy nhanh tốc độ làm việc HTML & CSS, thậm chí còn được xem là cheat-code. [irp posts="17990" name="Bỏ túi Cheatsheet React cho năm 2020 (kèm ví dụ thực tế)"] [irp posts="9780" name="Tất tần tật các Frontend cheatsheets tốt nhất"] Dùng Emmet trong HTML Với Emmet thì việc tạo một HTML boilerplate diễn ra trong nháy mắt. Với HTML file, chỉ cần type ! bạn sẽ thấy Emmet hiển thị các gợi ý, sau đó chỉ việc Enter là đã có sẵn trang HTML blank cơ bản. Đây mình mới chỉ đang demo vài khả năng của VS Code và Emmet nên nếu chưa hiểu thì không sao, cứ đọc tiếp nhé. Xem thêm Tạo React Boilerplate – Từ a tới z Các tag cơ bản Để tạo các thẻ - tag HTML thì chỉ cần gõ tên thẻ và Enter. Emmet sẽ đặt con [...]

Bài viết được sự cho phép của tác giả Lưu Bình An Vì form quá phức tạp, chúng ta cần thêm một bài viết nữa về validation với html. Với HTML5 chúng ta có một số kiểu input để validate những giá trị mà user đưa vào, ko cần tự viết javascript để check, chỉ đơn giản là khai báo mấy cái attribute, trường hợp phức tạp hơn, chúng ta có thể can thiệp trong cái Validation API để có kết quả mong muốn Luôn nhớ validate ở phía client không có nghĩa là ko cần đến validate ở server. [irp posts="20498" name="Tìm hiểu validate form với HTML5"] [irp posts="28440" name="Định dạng chuẩn và quy ước viết code trong HTML5"] Một vài ràng buộc phổ biến Dùng kiểu input <input type=”email” />: bắt buộc là giá trị email <input type="url" />: bắt buộc là giá trị url Dùng attribute khác Attribute Kiểu input hỗ trợ Giải thích pattern text, search, url, tel, email, password phải khớp với giá trị regular expression min range, number, date, month, week, datetime, datetime-local, time [...]

1. Những thành phần trong Switch được tạo bằng HTML và CSS: Ngoài 3 thành phần đã  được chỉ ra trong ảnh thì còn một thành phần cực kỳ quan trọng nữa đó là một checkbox (đã được ẩn đi), checkbox có tác dụng xác định trạng thái của cái Switch kia. Các thẻ trong HTML mà chúng ta cần: label : Thẻ lable sẽ tương ứng với thành phần container như trên hình, được sử dụng để: Tạo một cái khung để bao bọc các thẻ thẻ còn lại, giúp cho các thẻ xác định vị trí cũng như kích thước và cuối cùng là tạo truy cập tới checkbox. input: Thẻ input có kiểu là checkbox sử dụng để xác định trạng thái của switch. span: Thẻ span sẽ dùng để tạo background và mask như trong hình. 2. Tiến hành code: - Cấu trúc HTML: <html> <label class="container"> <input type="checkbox"> <span class="background"></span> <span class="mask"></span> </label> </html> - Code CSS cho thành phần "Container": .container { display: block; /* Xác đị [...]