Một ngày đẹp trời bạn đang dạo internet và vô tình gặp 1 trang web với design khá ấn tượng. Bạn muốn học hỏi những kỹ thuật html,css từ họ hoặc bạn muốn trích xuất 1 phần website của họ để áp dụng cho website của mình nhưng không biết làm sao. Đa số các bạn mới học lập trình web thường sử dụng web developer tool của Google Chrome hoặc FireBug trên FireFox để tìm từng element của 1 trang web. Với bài viết này, bạn sẽ sử dụng 1extension của G.Chrome để lấy html và css từ trang web bất kỳ một cách nhanh và tiện lợi nhất.

Cách làm thủ công

- Cách thủ công là bạn bấm F12 (cả Google Chrome lẫn FireFox), sau đó dùng “Inspect element” và trỏ vào vùng bạn muốn:

Lấy html và css từ trang web bất kỳ

Ghi chú:

(1): Inspect element: Click vào icon này và rê chuột vào vùng xác định trên website.
(2): Vùng được chọn.
(3): Nội dung HTML của vùng được chọn. Khung bên phải là nội dung CSS ứng với các tag HTML bên trái.

- Bạn click tam giác màu xám để mở rộng nội dung HTML:

Lấy html và css từ trang web bất kỳ

- Tiếp theo, bạn click phải và chọn “Copy as HTML” để copy toàn bộ nội dung HTML đã chọn:

Lấy html và css từ trang web bất kỳ

- Cuối cùng là bạn copy CSS ở khung bên phải.

Đây là những bước cơ bản và mình sẽ không đi sâu vào cách làm này. Cách này rất thủ công và rất lâu. Bạn chỉ nên sử dụng cách này trong quá trình phát triển website chính bạn đang làm. Hoặc bạn dùng để xem HTML,CSS của website khác với mục đích không phải clone (sao chép y chang)… .

Sử dụng Google Chrome Extension

Cách này đơn giản và rất nhanh chóng, bạn chỉ việc cài extension của G.Chrome và sử dụng. Nếu bạn xài FireFox thì bạn có thể tự Google để tìm 1 plugin tương tự.

Bước 1: Tải extention SnappySnipet tại đây. Trường hợp, link không tồn tại, bạn có thể google và search từ khóa “SnappySnipet”.
Bước 2:Lấy html và css từ trang web bất kỳ

Bước 3:Lấy html và css từ trang web bất kỳ

Bước 4:Lấy html và css từ trang web bất kỳ

Bước 5:Lấy html và css từ trang web bất kỳ

Bước 4,5 không cần thiết khi lần đầu cài extension này nhưng mình vẫn liệt kê ra. Nếu vì lý do nào đó, extension bị tắt (disabled) thì bạn có thể làm bước 4 và 5 để enable nó lại.

Các bước thực hiện

Các bước như cách làm thủ công. Tuy nhiên, khi bạn dùng “Inspect Element” và đã xác định vùng cần chọn trên web, lúc này bạn bấm sang tab “SnappySnipet” như sau:

Lấy html và css từ trang web bất kỳ

Bạn bấm vào nút “Create a snippet…”, lúc này 2 khung HTML và CSS sẽ lấy được nội dung. Cuối cùng, việc đơn giản là bạn scroll xuống dưới sẽ có 3 sự lựa chọn:
Send to CodePen
Send to jsBin
Send to jsFiddle
Bạn chọn bất kỳ và 1 tab mới sẽ mở ra với đầy đủ HTML,CSS bạn cần:

Lấy html và css từ trang web bất kỳ

Hy vọng bài viết giúp ích cho bạn trong việc thiết kế và lập trình web.

Nguồn: http://vothanhduy.com

Tin tức khác
co nhan tao san vuon