Archive

Archive for the ‘Html5 & Css3’ Category

CSS đếm số item theo chỉ mục

Ví dụ: chúng ta có một yêu cầu hiển thị danh sách theo chỉ mục

1. danh mục 1
1.1. danh mục con 1.1
1.1.1. danh mục con 1.1.1
1.2. danh mục con 1.2

2. danh mục 2

……

Không cần phải code, cũng ko cần phải dùng jquery để đọc các node, css hoàn toàn có thể làm được điều này

# Bước 1:
các bạn khai báo file css đặt tên format_list.css


ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

# Bước 2 tạo một file.html
– gọi file format_list.css vào trong phần header của file.html

– Test nội dung file html
css counter list items

// các bạn sẽ thấy output theo thứ tự & sub thứ tự thật tuyệt vời
1. Coffee
1.1. Black tea
1.2. Green tea
2. Milk

Chúc các bạn thành công
nhantam
thiết kế web Panpic

Categories: Html5 & Css3

datepicker not working within bootstrap modals

Vừa rồi nhantam có code một website ứng dụng sản xuất túi xách / vô tình gặp phải lỗi của form trên modals, lỗi như sau

Form modals, mình có trường nhập ngày tháng năm (sử dụng datepicker), nhưng datepicker không thể hiện được dự liệu trên modals, mặc dủ kiểm tra thẻ html qua Element của chrome báo có khung datepicker

Qua tìm kiếm trên internet có một gợi ý chỉnh sửa khá đơn giản

thêm đoạn css vào trang có hiển thị modals

Twitter Bootstrap Datepicker within modal window

<style> .datepicker{z-index:1151 !important;} </style>

 

Thật đơn gian phải không các bạn ?

nhantam
thiet ke web

 

 

 

Một số quy tắc trong html5 p1

Vùng Header

Vùng Header ví dụ chứa tiêu đề và phụ đề trang. Bạn sử dụng thẻ headerđể tạo ra nội dung cho vùng Header của trang. Thẻ header có thể chứa thông tin mở về một section và article ngoài chính trang web đó. Trang web được tạo ra ở đây có một vùng Header cho trang này, được hiển thị trong thiết kế cao cấp, cũng như vùng Header ở bên trong vùng Article và Section. Liệt kê 1 đưa ra một ví dụ đánh dấu thẻ header.

Ví dụ: Thẻ Header


header
    h1 Heading Text /h1
    p Text or images can be included here /p
    p Logos are frequently placed here too /p
/header

Thẻ header cũng có thể chứa một thẻ hgroup, như trong Liệt kê 2. Thẻ hgroup tạo nhóm các tiêu đề với nhau, bằng cách sử dụng các mức tiêu đề h1 đến /h1 h6 được hiển thị ở đây có một tiêu đề chính (Main Heading) và một phụ đề (Sub-heading)./h6

Ví dụ: Thẻ hgroup


header
    hgroup
          h1 Main Heading /h1
          h2 Sub-heading /h2
    /hgroup
    p Text or images can be included here /p
/header

Vùng Navigation Bạn tạo vùng Navigation (Chuyển hướng) của trang bằng cách sử dụng thẻ nav. Phần tử nav định nghĩa một vùng đặc biệt dành cho việc chuyển hướng. Thẻ nav nên được sử dụng để chuyển hướng trang web chính, không dùng để thiết lập các liên kết có chứa trong các vùng khác của trang. Vùng Navigation này có thể chứa mã như được hiển thị trong Liệt kê 3. /nav

Ví dụ: Thẻ nav


nav
     ul
          li>a href="#">Home /a /li
          li>a href="#">About Us /a /li
          li>a href="#">Our Products /a /li
          li>a href="#">Contact Us /a /li
     /ul
/nav

Vùng Article và Section

Trang web mà bạn đang thiết kế có chứa một phần Article, giữ nội dung thực sự của trang. Bạn sử dụng thẻ article để tạo vùng này, và thẻ đó định nghĩa nội dung có thể được sử dụng độc lập với các nội dung khác được tìm thấy trên trang này. Ví dụ, nếu bạn muốn tạo ra một nguồn cấp dữ liệu RSS, bạn có thể sử dụng article để xác định nội dung duy nhất. Thẻ article xác định nội dung có thể được gỡ bỏ và được đặt trong ngữ cảnh khác và có thể hoàn toàn dễ hiểu.

Vùng Article trong trang web có thể chứa nhiều Section. Bạn tạo ra các vùng này bằng cách sử dụng thẻ section. Một section chứa các vùng thành phần của nội dung trang web có liên quan . Thẻ section— và thẻ article nữa — có thể chứa các header (tiêu đề), các footer (chân trang), hoặc bất kỳ các thành phần nào khác cần thiết để hoàn thành phần này. Thẻ section dùng cho nội dung tạo nhóm. Nội dung cho cả hai thẻ section và thẻ article thường bắt đầu bằng một header và kết thúc bằng một footer, với nội dung cho thẻ này ở giữa.

Thẻ section cũng có thể chứa các thẻ article, cũng giống như thẻ article có thể chứa các thẻ section. Thẻ section nên được dùng để tạo nhóm các thông tin giống nhau, và thẻ article nên được sử dụng cho các thông tin như một bài viết hoặc một blog mà chúng có thể bị gỡ bỏ và được đặt trong một ngữ cảnh mới mà không ảnh hưởng đến ý nghĩa của nội dung. Thẻ article như tên gọi của nó, cung cấp một gói thông tin đầy đủ. Ngược lại, thẻ section chứa thông tin liên quan, trừ thông tin không thể được đặt trong một ngữ cảnh khác với chính nó, do nghĩa của nó sẽ bị mất.

Xem Liệt kê 4 với một ví dụ về cách sử dụng thẻ article và section.

Ví dụ: Thẻ article và thẻ section


 article 
      section 
          Content
      section 
      section 
          Content
      section 
 article 
 section 
      article 
          Content
      article 
      article 
          Content
      article 
 section 

Các phần tử hình ảnh Cả hai thẻ section và thẻ article cũng như thẻ header và thẻ footer có thể chứa thẻ figure. Bạn sử dụng thẻ này để chứa các ảnh, các sơ đồ, và các ảnh chụp. Thẻ figure có thể chứa thẻ figcaption, thẻ này chứa lần lượt các chú thích cho hình minh họa có trong thẻ figure, cho phép bạn nhập một mô tả để có thể gắn hình minh họa chặt chẽ hơn với nội dung. Liệt kê 5 đưa ra một ví dụ về cấu trúc thẻ figure và thẻ figcaption.

Ví dụ: Thẻ figure và thẻ figcaption


 figure 
      img src="/figure.jpg" width="304" height="228" alt="Picture" 
      figcaption Caption for the figure figcaption 
 figure 

Các phần tử đa phương tiện

Các thẻ section và article cũng có thể chứa các phần tử phương tiện khác nhau. HTML5 cung cấp các thẻ để truyền đạt nhanh nội dung của chúng. Các phần tử đa phương tiện, chẳng hạn như âm thanh và video trước đây thường chỉ được nhúng vào, bây giờ có thể được sử dụng chính thống hơn.

Thẻ audio xác định nội dung âm thanh, chẳng hạn như âm nhạc hoặc luồng âm thanh khác bất kỳ. Thẻ audio có các thuộc tính để kiểm soát những gì, khi nào, và làm thế nào để phát âm thanh. Các thuộc tính là src, preload (nạp trước), control (điều khiển), loop (vòng lặp), và autoplay (phát tự động). Trong ví dụ ở Liệt kê 6, âm thanh bắt đầu phát ngay sau khi tải trang này và sẽ phát liên tục, đồng thời hiển thị các nút điều khiển để người dùng có thể dừng lại hoặc phát lại âm thanh.

Ví dụ: thẻ audio


audio src="MyFirstMusic.ogg" autoplay="autoplay" loop="loop" controls="controls"
     Your browser does not support the audio tag.
/audio 

Thẻ video cho phép bạn phát các đoạn video hoặc tạo luồng phương tiện trực quan. Nó có tất cả các thuộc tính của thẻ audio cộng thêm ba thuộc tính nữa là: poster (quảng cáo), width (chiều rộng), và height (chiều cao). Thuộc tính poster cho phép bạn xác định một hình ảnh được sử dụng trong khi video đang tải hoặc trong hoàn cảnh không may khi các video sẽ không tải được chút nào.

Ví dụ: Thẻ video


video src="MyFirstMovie.ogg" controls="controls" width="300" height="150"
     Your browser does not support the video tag
/video 

Các thẻ video và audio có thể chứa thẻ Source, để định nghĩa tài nguyên đa phương tiện cho các thẻ video và audio. Với phần tử này, bạn định rõ các tệp video và âm thanh thay thế để từ các tệp này sau đó trình duyệt có thể lựa chọn dựa vào kiểu phương tiện của mình hoặc sự hỗ trợ của codec (bộ mã hóa/giải mã). Trong Liệt kê 8, có hai sự lựa chọn. Nếu không thể phát phiên bản WMA của tệp này trong trình duyệt đang được sử dụng, thì hãy thử MP3. Nếu không, sẽ hiển thị thông báo để người sử dụng biết lý do âm thanh không có sẵn.

Ví dụ: Thẻ source


audio
     source src="/music/good_enough.wma" type="audio/x-ms-wma"
     source src="/music/good_enough.mp3" type="audio/mpeg"


Your browser does not support the HTML 'audio' element.

/audio 

 

Thẻ embed định nghĩa nội dung nhúng có thể được đưa vào một trang — ví dụ, một plug-in cho các tệp SWF của Adobe Flash. Liệt kê 9 có chứa thuộc tính type (kiểu), xác định nguồn nhúng là một tệp Flash.

Ví dụ: Thẻ embed


 embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" width="300" height="150" /embed

Ngoài các thuộc tính src và type, thẻ embed width=”300″ height=”150″ /embed còn có thuộc tính height (chiều cao) và width (chiều rộng).


Vùng Aside
Bạn tạo vùng Aside theo kế hoạch Acme United bằng cách sử dụng thẻ aside. Hãy sử dụng thẻ này khi bạn muốn tạo nội dung bổ sung mà không còn chỗ nào để thêm vào bài viết. Trong các tạp chí, các vùng nhận xét thường được sử dụng để làm nổi bật một điểm nào đó và được thực hiện trong chính bài viết đó. Thẻ aside chứa nội dung có thể được loại bỏ mà không ảnh hưởng đến các thông tin được truyền đạt bởi bài viết, phân đoạn, hoặc trang chứa nó.

Ví dụ: Thẻ aside


 p Panpic Technology. /p 
 aside 
      h4 Thiết kế web /h4 
      p Panpic là công ty thiết kế web hàng đầu ở việt nam. /p 
 /aside 

Vùng Footer

Phần tử footer chứa thông tin về một trang, bài viết, hoặc một phần, chẳng hạn như tác giả hoặc ngày viết bài. Là phần cuối trang, nó có thể chứa bản quyền hoặc các thông tin pháp lý quan trọng khác.

Ví dụ: Thẻ footer


footer
     p Copyright 2013 - 2014 Panpic technology. All rights reserved. /p
/footer

Lưu ý:

– Do không hiển thị được thẻ html5 nên các bạn tự thêm vào các ký tự đóng “</” mở “<“ của các thẻ tag
– Khi dùng thẻ section các bạn buộc phải dùng thẻ h1 – h6 ở bên trong để validate html5 tại  http://validator.w3.org/ , nếu không sử dụng thẻ h bên trong section sẽ báo lỗi.
Ví dụ:  cách sử dụng section đúng cú pháp


body
     section 
	h2 thẻ h phải có trong vùng /h2 
	Nội dung chi tiết ...thiết kế web bán hàng online
   /section 
/body

– Các bạn xem thêm tài liệu tại W3Schoools

 

nhantam
PHP Developer

 

Các quy tắc cơ bản của html 5 (p1)

Các từ viết tắt thông dụng


API: Application programming interface - Giao diện lập trình ứng dụng
CSS3: Cascading style sheet version 3 - Bảng định kiểu xếp chồng phiên bản 3
GUI: Graphical user interface - Giao diện người dùng đồ họa
HTML: Hypertext Markup Language - Ngôn ngữ đánh dấu siêu văn bản
HTML5: HTML phiên bản 5
SQL: Structured Query Language - Ngôn ngữ truy vấn có cấu trúc
UI: User interface - Giao diện người dùng

HTML5 là một ngôn ngữ được thiết kế để thiết lập nội dung web. Nó nhằm làm cho việc thiết kế web và phát triển web dễ dàng hơn bằng cách tạo một giao diện ngôn ngữ đánh dấu chuẩn hóa và trực quan. HTML5 cung cấp các phương tiện phân tích và phân định các trang của bạn, và nó cho phép bạn tạo các thành phần rời rạc không chỉ được thiết kế để cấu tạo trang web một cách hợp lý mà còn được tạo ra để cung cấp cho trang web các khả năng thông tin. HTML5 có thể được gọi là “cách tiếp cận thông tin thông qua thiết kế” do nó kết hợp yếu tố cơ bản về lập bản đồ thông tin, phân chia và ghi nhãn thông tin giúp dễ dàng sử dụng và hiểu thông tin. Đây là nền tảng của tiện ích ngữ nghĩa và thẩm mỹ gây ấn tượng sâu sắc của HTML5. HTML5 cung cấp khả năng xuất bản tất cả mọi thứ trên thế giới từ nội dung văn bản đơn giản đến đa phương tiện phong phú, tương tác cho các nhà thiết kế và các nhà phát triển ở mọi trình độ.

HTML5 cung cấp các công cụ quản lý dữ liệu, đồ họa, video, và âm thanh có hiệu quả. Nó tạo điều kiện cho sự phát triển của các ứng dụng giữa các trình duyệt với nhau cho trang web cũng như cho các thiết bị di động. HTML5 là một trong những công nghệ thúc đẩy những cải tiến trong các dịch vụ điện toán đám mây di động, vì nó tính đến tính linh hoạt rộng hơn, cho phép phát triển các trang web thú vị và có khả năng tương tác. Nó cũng đưa vào thẻ và các cải tiến mới, bao gồm cấu trúc thu nhỏ, các nút điều khiển của biểu mẫu, các API, đa phương tiện, hỗ trợ cơ sở dữ liệu, và tốc độ xử lý nhanh hơn đáng kể.
Các thẻ mới trong HTML5 có tính hấp dẫn cao, bao gồm cả vai trò và cách sử dụng của chúng. Các phiên bản trước của HTML thường dùng các thẻ không có gì nổi bật cả. Tuy nhiên, HTML5 có các nhãn trực quan, có khả năng mô tả cao. Nó cung cấp các nhãn nội dung phong phú ngay lập tức xác định nội dung. Ví dụ, thẻ div đã được bổ sung bằng các thẻ section và article. Ngoài ra các thẻ video, audio, canvas, và figure cũng đưa ra sự mô tả chính xác hơn về các kiểu nội dung cụ thể.

HTML5 cung cấp:
Các thẻ mô tả chính xác những gì chúng được thiết kế để chứa đựng.
Tăng cường khả năng truyền thông trên mạng.
Cải thiện khả năng lưu trữ chung.
Các trình làm việc trên nền Web (Web Workers) để chạy các quá trình nền.
Giao diện WebSocket để thiết lập kết nối liên tục giữa các ứng dụng cư trú và máy chủ.
Truy vấn dữ liệu đã được lưu trữ tốt hơn.
Cải thiện tốc độ nạp và lưu trang.
Hỗ trợ cho CSS3 để quản lý giao diện người dùng đồ họa (GUI), có nghĩa là HTML5 có thể được định hướng nội dung.
Cải thiện xử lý biểu mẫu trình duyệt.
Một API cơ sở dữ liệu dựa trên-SQL cho phép lưu trữ cục bộ, phía máy khách..
Canvas và video, để thêm đồ họa và video mà không cần cài đặt các plug-in của bên thứ ba.
Đặc tả Geolocation API (API định vị toàn cầu), sử dụng khả năng định vị của máy điện thoại thông minh để kết hợp các dịch vụ và các ứng dụng đám mây di động.
Các biểu mẫu cải tiến làm giảm nhu cầu phải tải về mã JavaScript, cho phép truyền thông hiệu quả hơn giữa các thiết bị di động và các máy chủ điện toán đám mây.
HTML5 tạo ra sự trải nghiệm người dùng hấp dẫn hơn: Các trang được thiết kế bằng HTML5 có thể cung cấp một trải nghiệm giống như với các ứng dụng của máy tính để bàn. HTML5 cũng cung cấp phát triển nhiều nền tảng nâng cao bằng cách kết hợp khả năng của các API với sự có mặt ở khắp mọi nơi của trình duyệt. Khi sử dụng HTML5, các nhà phát triển có thể cung cấp một trải nghiệm ứng dụng hiện đại, trôi chảy qua các nền tảng.
Khi bạn nói HTML5, bạn đang sử dụng phép tốc ký cho sự đổi mới liên tục. Các thẻ mới, các phương thức mới, và một framework phát triển chung dựa trên sự tác động lẫn nhau của HTML5 và hai đối tác của nó, CSS3 và JavaScript. Đây là cốt lõi của hiện tượng xử lý ứng dụng lấy máy khách làm trung tâm. Ngoài các việc triển khai các kỹ thuật và các phương thức của công nghệ HTML5 cho máy tính để bàn, có thể triển khai thực hiện HTML5 trong nhiều trình duyệt điện thoại di động web có tính năng phong phú — một thị trường đang phát triển, khi đã chứng kiến sự phổ biến của các hệ điều hành web Apple iPhone, Google Android, và các điện thoại chạy Palm.
Một khía cạnh quan trọng về sức mạnh của HTML5 là lập bản đồ thông tin — hoặc chặn nội dung, nếu bạn thích — tạo ra một quá trình dễ hiểu hơn nhiều. Bạn có thể thấy công cụ này thích hợp cho việc thiết kế và phát triển hiệu quả như thế nào nhờ ưu thế ngày càng tăng của nó trong thế giới xử lý web.
HTML5 báo hiệu sự ra đời của một quá trình ngữ nghĩa có hiệu quả hơn ở mức văn bản và kiểm soát tốt hơn qua việc xây dựng và sử dụng các biểu mẫu. Tất cả những đặc điểm này và nhiều điểm tốt đẹp khác nữa trong sự đổi mới HTML5 là cơ sở cho sự thống trị ngày càng tăng của mô hình này. Nhiều thực thể cơ quan, thương mại và các tổ chức khác nữa — thậm chí nhiều tổ chức trong số đó hầu như liên quan rất ít đến việc xử lý thông tin và truyền thông như là hoạt động cơ quan chính của họ — theo mức độ này hay mức khác bị tràn ngập bởi sự phát triển của hiện tượng đang phát triển này.
HTML5 không phải là cây đèn thần, và cũng không có gì là thần thánh cả. Tuy nhiên, các tài sản kỹ thuật và phương pháp luận của nó đã biến nó trở thành một thứ tuyệt vời khi bạn muốn tiếp cận.

Tạo bố cục trang web
Bạn sẽ tạo một trang web đơn giản. Trong quá trình này, tôi thảo luận một số thẻ mới đã được đưa vào trong HTML5. Để có hiệu quả cao, bạn phải lập kế hoạch để xem xét tất cả các thành phần bạn muốn chế tạo.
Trang web mà bạn tạo ra sẽ có thiết kế cao cấp được hiển thị trong Hình 1. Thiết kế trang có một vùng Header (Tiêu đề), một vùng Navigation (Chuyển hướng), một vùng Article (Bài viết) có chứa ba Section (phần), một Aside (Nhận xét), và cuối cùng, là vùng Footer (Chân trang). Trang này được thiết kế để làm việc trong trình duyệt Google Chrome, trừ một số thứ lộn xộn thấy được, có thể xảy ra cùng với khả năng tương thích giữa các trình duyệt, bắt nguồn từ việc hiệu chỉnh cũng như cản trở hiểu biết về cấu trúc cơ bản. Mục đích là để tạo ra một trang mô tả rõ ràng việc sử dụng các thẻ HTML5 mới, cho thấy bạn có thể sử dụng chúng như thế nào để tạo ra mã đúng định dạng và thiết kế trang ngắn gọn.
Hình ảnh Bố cục trang html5 cơ bản
bố cục trang html 5

Hộp có các hộp nhỏ hơn bên trong nó hiển thị các thành phần khác nhau của trang.
Trong quá trình tạo trang này, tôi đụng phải CSS3, cần thiết để biểu thị đúng các trang HTML5. CSS3 là cần thiết cho định kiểu, chuyển hướng, và cảm nhận chung về trang HTML5. Các nhóm đặc tính của nó, mà bạn có thể tìm thấy tại trang web tham khảo CSS3 W3Schools (link html5), bao gồm một số phần tử có ích như nền, phông chữ, phông màn, và hình ảnh động.
Tuy nhiên, trước khi bạn bắt đầu xây dựng trang web này, bạn cần phải tìm hiểu về một số thẻ mới của HTML5.

 

nhantam
PHP Developer