HTML , CSS - Kiến thức cần có cho 1 webmaster nghiệp dư! | Diễn đàn công nghệ - Tin học Việt
  1. Thông Báo: Quý công ty, doanh nghiệp, cá nhân nào có nhu cầu đặt banner, textlink trên diễn đàn xin vui lòng liên hệ trực tiếp qua email: lephuochuusvc@gmail.com giúp mình. Hoặc xem báo giá tại đây.
    Những thành viên nào spam, đưa những thông tin sai trái, cố gắng đưa liên kết bẩn vào bài viết các kiểu sẽ bị bắn nick cho vào spam vĩnh viễn

HTML , CSS - Kiến thức cần có cho 1 webmaster nghiệp dư!

Thảo luận trong 'Kinh Nghiệm Cho Webmaster' bắt đầu bởi huule1989, Thg 10 18, 2014.

Lượt xem: 19,715

  1. huule1989 ----Founder----

    Hiện nay tình hình phát triển website đang ngày càng phát triển mạnh mẽ và cũng là đam mê của các bạn trẻ. Song với thực trạng đam mê cần có 01 website riêng của chính bản thân thì hiện tại mã nguồn Xenforo đã là phương án tạo 1 source website căn bản cho các bạn, tuy nhiên các bạn đa phần đều không có hoặc rất ít kiến thức về html, css, nên việc tùy chỉnh 1 giao diện website ưng ý theo nhu cầu của bản thân là gần như không thể!


    Ở đây tôi xin không nhắc lại định nghĩa html, css là gì nữa nhé, cái này search google ra hàng trăm bài rồi! Và vì chúng ta là "dân tay ngang" nên cũng không thiết học theo nguyên tắc hay gì đó, đơn giản chỉ yêu cầu hiểu là được.

    Ở đây chúng ta có thể thấy bất cứ 1 website nào đều được xây dựng và biểu diễn bằng các thẻ html. Nguyên tắc của 1 thẻ html hoàn chỉnh là phải có thẻ bắt đầu và kết thúc.

    Ví dụ:
    1 thẻ được viết bắt đầu từ <div> thì sẽ có kết thúc là </div>;
    1 thẻ bắt đầu từ <a> thì sẽ có kết thúc là </a>

    >>>> Nguyên tắc quan trọng của ví dụ này là phải có bắt đầu thì tất yếu phải đóng lại. Nếu không đóng thì sao? Nó sẽ dẫn tới tình trạng vỡ khung các phần tử của website.

    Tức nhiên trong 1 website có rất nhiều thẻ html và trong nó còn có thể có rất nhiều phần tử html con ở trong nữa! Vì vậy, các bạn nên tập thói quen khi code 1 thẻ nào đó thì nên nhớ cho thẻ mở và đóng phải thẳng hàng, sau khi khi tìm chúng ta sẽ không bỏ sót bất cứ điều gì!

    + Bố cục cơ bản của trang html

    Một trang html có bố cục cơ bản như sau:

    - Được bao hàm trong cặp tag <html></html>

    - Gồm 2 phần cơ bản là: <head></head> và <body></body> như sau:

    <html>

    <head>

    </head>

    <body>

    </body>

    </html>

    + Cặp tags <head></head> - phần đầu của trang web:

    - Nó là nơi người lập trình đưa ra những thông tin ban đầu về trang web, nó có thể là tiêu đề trang web,mô tả về trang web, về tác giả trang web, về thời gian refresh trang, về bộ gõ tiếng việt của trang...ở phần sau ta sẽ đi sâu về vấn đề này.

    - Những nội dung trên sẽ không được hiển thị trên tình duyệt ( ngoài phần tiêu đề - sẽ được hiển thị phía trên của thanh địa chỉ trang web ).

    + Cặp tags <body></body> - phần thân của trang web:

    - Đây là phần chứa nội dung của trang web, những gì hiển thị trên trình duyệt đề nằm trong phần thân của trang ( nói như vậy có thể không thật sự đúng, nhưng các bạn cứ hiểu nôm na vậy cho dễ hình dung trước đã )

    - Phần thân của trang web có thể được bố cục thành 3 phần cơ bản đó là:

    • Header: Là phần đầu của nội dung trang web ( cái này khác với phần đầu của trang web trong thẻ <head> nhé ), nó thường được dùng để đặt logo web, tên web site...
    • Body_main: Là phần thân nội dung trang web,nó là phần đặt Menu chính,menu phụ của trang web, các bài viết của trang web, các liên kết khác...
    • Footer : Là phần chân của nội dung trang web, thường nó được dùng để ghi bản quyền trang web, tác giả trang web, thông tin liên hệ...
    Nhưng ở đây ta chưa đi sâu vào vấn đề này, ta sẽ đề cập lại nó trong phần kết hợp giữa html và css.

    3, Cơ bản về các thẻ phần <head></head>

    Như mình đã nói ở phần trước, bây giờ mình sẽ đưa ra một số thẻ cơ bản được dùng trong phần đầu của trang web:

    - Đặt tiêu đề cho trang web: Tiêu đTypeề là dòng chữ hiển thị ở thanh bên trên thanh địa chỉ cua trang web ( VD: khi bạn vào blog này, bạn sẽ thấy tiêu đề của nó là "Tự học lập trình web cơ bản" )

    Để đặt tiêu đề cho trang web, chúng ta sử dụng cặp thẻ:

    <title>Tiêu đề trang web</title>.

    - Thẻ <meta>

    Thẻ <meta> là một thẻ rất quan trọng trong phần này,nội dung của nó sẽ không được hiển thị ra trình duyệt, mình sẽ giới thiệu một số thẻ <meta> cơ bản sau đây:

    • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> : Thẻ này quy định bộ gõ tiếng việt được dùng trong trang web (Ở đây ta dung bộ gõ UTF-8 ).
    • <meta name="keywords" content="Từ khóa để các công cụ tìm kiếm nhận ra website của bạn" /> : Thẻ này sẽ chứa những từ khóa dùng để các công cụ tìm kiếm tìm đến website của bạn nếu nó được yêu cầu tìm các từ khóa đó, các từ khóa được viết ngắn gọn, ngăn cách nhau bởi dấu phẩy
    VD: Từ khóa cho Blog này là: <meta name="keywords" content="blog của lntc500, học html cơ bản, học css cơ bản..."/>

    • <meta name="description" content="Nhưng mô tả ngắn gọn về trang web của bạn"/> : Thẻ này chúa những mô tả cơ bản về trang web của bạn, giống như thẻ trên, các mô tả trong phần content bạn cũng nên viết một cách ngắn gọn, và ngăn cách chúng bằng các dấu phẩy.
    • <meta http-equiv="Refresh" content="<Thời gian Refresh>; url=<Địa chỉ trang web của bạn>"/> : Thẻ này quy định thời gian trình duyệt sẽ Refresh lại trang web của bạn ( tính bằng giây ).
    Đây là một số thẻ <meta> cơ bản nhất, và tốt nhất bạn nên nắm bắt và tập thói quen viết chúng.

    *Chú thích trong html

    - Chú thích là những dòng giải thích được người viết thêm vào trong một đoạn mã html nhằm giải thích, làm cho đoạn mã đó rõ ràng, dể hiểu hơn. Khi viết những đoạn mã html dài, phức tạp, các bạn nên tập thói quen viết chú thích cho từng đoạn html.

    - Các đoạn chú thích trong html sẽ được trình duyệt bỏ qua,chúng sẽ khong được biên dịch hay hiển thị trên trình duyệt

    - Cách viết chú thích:

    • Chú thích trong html được viết bên trong cặp thẻ sau: <! <Nội dung chú thích > !>
    • VD: <! Đây là một đoạn chú thích trong html !> - Dòng này sẽ không được trình duyệt biên dịch hay hiển thị
    - Trong văn bản html thẻ <a> đánh dấu một liên kết đến một tài liệu nào đó, thẻ <p> đánh dấu một đoạn văn, thẻ <h1> đánh dấu một dạng đề mục...

    Bên cạnh đó, các bạn cần tìm hiểu về css, việc này sẽ giúp cho các bạn dễ dàng tùy chỉnh màu sắc, căn, khoảng cách, font chữ, background, ... cho các phần tử trong các thẻ html.

    Ví dụ một số css căn bản thường hay dùng như:
    - margin;
    - padding;
    - background;
    - height;
    - width;
    - color;
    - ...
    Còn rất nhiều các bạn nhé!

    Tìm hiểu về class và id trong html:

    Cho đến bây giờ bạn đã thấy được CSS có thể thay đổi các đối tượng html như thế nào. Ví dụ khi bạn viết code CSS cho thẻ h1 hoặc p, thì bạn sẽ thấy nó được áp dụng cho tất cả các thẻ trong html. Nhưng không phải lúc nào bạn cũng muốn tất cả các thẻ p trong phần code của bạn đều bị ảnh hưởng. Có thể bạn muốn đoạn này chữ màu xanh, đoạn kia chữ màu đỏ và đậm. Chính vì thế Class và ID được thêm vào thẻ html để bạn có thể hướng tới một đối tượng cụ thể hơn trong code HTML của bạn. Do đó cho bạn thêm một lựa chọn nữa để thiết kế trang web.

    Cách sử dụng Class
    Dưới đây là đoạn code chỉ cho bạn thấy cách sử dụng class




    <h1 class="classtext">Đoạn văn này có cùng class với đoạn văn thứ 3</h1>
    <p>Đoạn văn bản này xuất hiện bình thường</p><p class="classtext"> Khi chúng ta gắn class cho thẻ html chúng ta có thể hướng tới đối tượng dễ dàng hơn cho dù nó có ở cấp bậc nào đi chăng nữa</p>

    Ở đoạn code trên bạn thấy sự xuất hiện của class=”classtext”, đây chính là class mà tôi thêm vào cho thẻ h1 và thẻ p. Bây giờ chúng ta sẽ tô đậm nó



    p {font-family: helvetica; sans-serif;}
    .classtext {font-weight: bold;}

    Lưu ý: đoạn code trên bạn phải chèn vào phần head của tài liệu vì ở đây chúng ta sử dụng phương pháp nhúng CSS vào trong phần đầu của tài liệu HTML.

    Kết quả là 2 đoạn văn bản có thẻ p sẽ được hiển thị với font Helvetica (hoặc nếu máy của bạn không có font này, nó sẽ cho hiển thị dòng font San Serif) nhưng đoạn văn có class=”classtext”sẽ được hiển thị vừa font Helvetica và in đậm. Đoạn văn bản nằm trong thẻ h1 thì có font là font mặc định của trình duyệt, nhưng nó cũng được in đậm bởi vì nó bị gắn với class=”classtext”. Thẻspan là cặp thẻ trắng sẽ không gây tác động gì cho đối tượng nằm trong nó vì chúng ta chưa định dạng gì cho nó hết.

    Contextual Class Selector
    Nếu bây giờ bạn chỉ muốn đoạn văn bản cuối cùng có màu đỏ thì phải làm sao? bởi vì nếu bạn thêm


    .classtext {font-weight:bold; color:red'}

    thì đoạn văn bản nằm trong thẻ h1 cũng sẽ có màu đỏ và như thế không phải điều bạn muốn. Do vậy bạn có thể kết hợp thẻ đối tượng và tên class vào để tạo thành Selector.

    p {font-family: helvetica; sans-serif;}
    .classtext {font-weight: bold;}
    p.classtext {color:red;}
    như thế thì chỉ có đoạn văn bản thứ 3 là sẽ có màu đỏ

    hoặc bạn có thể làm cho 4 chữ chúng ta có thể được in nghiêng bằng cách sử dụng kết hợp
    p.classtext span {font-style:italic;}
    nếu bạn muốn bạn cũng có thể làm cho chữ cùng class nằm trong thẻ h1 in nghiêng bằng cách viết


    .classtext span {font-style:italic;}

    Tránh lạm dung Class
    Một trong những lỗi phổ biến nhất của những người mới bắt tay vào CSS là sử dụng quá nhiều class. Họ dùng class cho hầu hết các thẻ HTML và khai báo CSS cho từng class một. Làm như vậy thì cũng chẳng khác gì sử dụng thẻ HTML cả, vì nó cũng khó quản lý và thay đổi cũng rất khó khăn.

    Cách sử dụng Class đúng cách là cho thẻ div bao quanh toàn bộ phần code mà bạn muốn hướng tới. Nếu bạn muốn hướng tới đối tượng nào nằm trong class đó, bạn luôn có thể kết hợp với phương pháp Contextual Class Selector để hướng tới nó.

    Cách sử dụng IDs
    ID được viết giống y như khi bạn viết code cho Class, chỉ có khác một điểm là bạn dùng ký hiệu dấu thăng (#) để thay cho dấu chấm . Nếu một đoạn văn bản được viết như sau

    Đây là đoạn văn bản bất kỳ

    thì trong phần CSS code của nó sẽ như sau


    p#classtext {color:red;}

    Còn lại ID được sử dụng y như Class, những gì bạn biết về Class ở trên bạn đều có thể áp dụng được với ID. Vậy chúng khác nhau ở điểm gì?

    Sự khác biệt giữa Class và ID
    Nói ngắn gọn thì ID là duy nhất và Class được sử dụng nhiều lần. Ví dụ trên trang web các thành phần duy nhất như là Logo, Menu, Footer … những cái này nó chỉ xuất hiện một lần duy nhất trên trang chứ nó không lặp đi lặp lại trên cùng một trang. Còn khi sử dụng Class thì áp dụng cho những thành phần xuất hiện nhiều lần trên cùng một trang.

    Ví dụ bạn thấy ở trên izwebz thì mỗi một bài post đều được định dạng giống hệt nhau và nó xuất hiện 10 lần trên một trang vì có 10 bài post trên một trang. Nếu bạn đặt ID cho từng post một thì bạn phải định dạng từng post một trong CSS. Còn nếu bạn đặt cho chúng có cùng class thì bạn chỉ việc định dạng một lần cho tất cả.

    Một điểm khác biệt thứ 2 nữa đó là Class không phân biệt IN HOA hay in thường nhưng ID lại phân biệt IN HOA và in thường. Ví dụ id=”containerWraper” khác với id=”containerwraper”

    Cuối cùng bạn có thể sử dụng nhiều class cho cùng một thành phần nhưng chỉ có duy nhất một ID. Ví dụ bạn có thể đặt class như dưới đây và các class này hoàn toàn độc lập với nhau.


    <div class="class1 class2 class3 classn">

    Các bạn có thể tham khảo thêm các định dạng css trên các website chuyên hướng dẫn nhé!

    Chúc các bạn thành công!​
     
    :
    Phuhungnp thích bài này.
  2. shipcaptainno1

    shipcaptainno1 New Member
      1/28

    Bài viết:
    5
    Đã được thích:
    0
    làm mấy cái code này khó thật
     
  3. anhlamgame

    anhlamgame Active Member
      16/28

    Bài viết:
    356
    Đã được thích:
    0
    đâu mà khó
     
  • Chia sẻ trang này