Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

[Part 1] Học Html và Css , PHP cho những người muốn tìm hiểu về ngôn ngữ lập trình này

Chủ đề thuộc danh mục 'Hỏi đáp - Thảo luận về web' được đăng bởi KeyRoyal007, 24/4/13.

Lượt xem: 7,648

  1. KeyRoyal007 Thành viên cấp 2

    Bài này mình sẽ giới thiệu về Html đơn giản và cách tạo , hiển thị 1 File html cho những bạn mới bắt đầu tìm hiểu về html :

    1. Giới thiệu về Html cơ bản

    • HTML là ngôn ngữ dùng để mô tả một trang web.
    • HTML viết tắt của từ Hyper Text Markup Language.
    • HTML không phải là ngôn ngữ lập trình, html là ngôn ngữ đánh dấu (markup language), ngôn ngữ đánh dấu là một nhóm các thẻ đánh dấu (các tag), HTML sử dụng các thẻ này để mô tả trang web.
    Sự sắp xếp chiều dọc của thẻ block trong HTML

    Khi sử dụng các thẻ block, trình duyệt sẽ sắp xếp các thẻ theo chiều dọc, mỗi thẻ sẽ chiếm vùng không gian nằm ngang từ trên xuống theo thứ tự sắp xếp trong trang HTML/XHTML, thẻ nào code trước sẽ nằm trên, các thẻ code sau sẽ nằm bên dưới.
    Xem ví dụ sau đây để thấy được trình duyệt sắp xếp các thẻ theo chiều ngang như thế nào:
    HTML viết

    PHP:
    <h1>Tiêu đề 01</h1>
    <
    ul>
       <
    li><a href="#">Link 01</a></li>
       <
    li><a href="#">Link 02</a></li>
       <
    li><a href="#">Link 03</a></li>
       <
    li><a href="#">Link 04</a></li>
       <
    li><a href="#">Link 05</a></li>
    </
    ul>
    <
    div>Nội dung chính</div>
    <
    div>Nội dung phụ</div>
    <
    div>
       <
    p>Tên công ty</p>
       <
    p>Địa chỉ</p>
    </
    div>
    Hiển thị trình duyệt:

    [​IMG]

    Phân tích vị trí của các thẻ:

    [​IMG]

    Ta thấy các thẻ block đều chiếm vùng không gian nằm ngang, chúng ta có thể sắp xếp lại vị trí của các thẻ block bằng cách sử dụng các thuộc tính css.

    Sự sắp xếp chiều ngang của thẻ inline trong HTML

    Khi sử dụng các thẻ inline, trình duyệt sẽ sắp xếp các thẻ liền kề nhau theo chiều ngang, thẻ nào code trước xuất hiện trước, thẻ nào code sau xuất hiện sau.
    Xem ví dụ sau đây để thấy được trình duyệt sắp xếp các thẻ inline như thế nào:
    HTML viết

    <a href="#">Thẻ a</a>[/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/FONT][/SIZE][/COLOR][/COLOR][/FONT][/SIZE][/FONT][/SIZE][/COLOR][/COLOR][/FONT][/SIZE][/FONT][/SIZE][/COLOR][/COLOR][/FONT][/SIZE][/FONT][/SIZE][/COLOR][/COLOR][/FONT][/SIZE][/FONT][/SIZE][/COLOR]
    [COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][SIZE=14px][FONT=Arial][COLOR=#333333]<span>thẻ span</span>[/COLOR][/FONT][/SIZE][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR]
    [COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][SIZE=14px][FONT=Arial][COLOR=#333333]<em>thẻ em</em>[/COLOR][/FONT][/SIZE][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR]
    [COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][SIZE=14px][FONT=Arial][COLOR=#333333]<strong>thẻ strong</strong>


    Hiển thị trình duyệt:


    [​IMG]
    Tới đây chắc các bạn đã hiểu nhiệm vụ của HTML/XHTML dùng để làm gì, đối với các thẻ block trình duyệt sẽ sắp xếp nó theo chiều dọc, đối với các thẻ inline trình duyệt sẽ sắp xếp theo chiều ngang, nếu muốn hiểu rõ hơn các bạn có thể tham khảo thêm các vùng không gian HTML
    Nhiệm vụ của trình duyệt (Firefox, Internet Explorer, Safari, Opera, Chrome,...) là đọc văn bản HTML và hiển thị chúng như chúng ta thấy, tuy nhiên các trình duyệt không hiển thị các thẻ HTML (các tag), nhưng lại sử dụng các thẻ để giải thích nội dung cho trang web.

    2. Cách tạo và hiển thị 1 File Html
    (Mình khuyên các bạn nên dùng Notepad có sẵn trong window hoặc Notepad++ , Vì mới bắt đầu học như thế sẽ nhớ Code để hiểu bản chất của các thẻ các lệnh .Khi quen rồi chúng ta sẽ sử dụng 1 số phần mềm phục vụ code )

    Trước tiên ta tạo một file index.txt đơn giản bằng notepad trong Window với nội dung sau:

    <p>Hello</p>


    Sau đó "Save As" lại file với định dạng mới là . html

    [​IMG]
    Cách hiển thị file HTML

    Với cách trên ta đã tạo xong file index. html với nội dung đơn giản, để xem nội dung file này ta có thể double click vào là có thể xem được, nội dung khi chạy trình duyệt sẽ được hiển thị như sau:

    Hello


    p/s : Part 2 : Giới thiệu về cấu trúc cơ bản của html....

    ...
    Jacky09, Gooner Designer, TíPro11 người khác thích bài viết này.
  2. Hoa Anh Túc

    Hoa Anh Túc Thành viên cấp 4

    hay quá ạ :D
  3. KeyRoyal007

    KeyRoyal007 Thành viên cấp 2

    Cảm ơn bạn :D Tại mình học lập trình nên viết bài coi như rèn khả năng nhớ 1 lần
  4. Hoa Anh Túc

    Hoa Anh Túc Thành viên cấp 4

    bác học lâp trình wed ah` khi nào cần em tìm bác thiết kế cho em cái wed đơn giản !
  5. KeyRoyal007

    KeyRoyal007 Thành viên cấp 2

    Okie bạn , có gì cần cứ nói
    Jacky09 thích bài viết này
  6. banbaonylong

    banbaonylong Ko phải assmin

    đã chỉ lại, remove BBcode

    chủ thớt nên đem hết sample code vào trong Notepad++ rồi điều chỉnh format cho chuẩn rồi hãy xài thẻ BBcode PHP để hiển thị cho chính xác nhé!
  7. Quyet_Dep_Zai

    Quyet_Dep_Zai Thành viên cấp 2

    Theo mình bạn nên hướng dẫn những cái cơ bản trước, vd cấu trúc cơ bản của html gồm các thẻ html- head... như thế nào. Sau đó trong body ta có các thẻ và các thuộc tính ra sao, chức năng của chúng.. Như vậy hiểu dễ hơn.
    Chứ bạn cư quăng đoạn code vào thế kia thì chả ai hiểu gì @@!
    Tít is me thích bài viết này
  8. Tít is me

    Tít is me Thành viên cấp 2

    đúng r đấy :|
  9. ayuhiru

    ayuhiru Thành viên cấp 2

    mình cũng mới bập bẽ về 3 ngôn ngữ cơ bản này muốn học lên Java ko tập trung đc
  10. b0yHN_96

    b0yHN_96 Thành viên cấp 4

    cái nàu đau đầu lắm :v ko chơi
  11. KeyRoyal007

    KeyRoyal007 Thành viên cấp 2

    Quyet_Dep_Zai
    Tít is me

    OKie , đây chỉ là giới thiệu qua . bài sau mình sẽ viết về các thẻ cơ bản . Cảm ơn mọi người :D
    Jacky09, Tít is meQuyet_Dep_Zai thích bài viết này.
  12. Đoilơ ViệtDesigner

    Đoilơ ViệtDesigner Thành viên cấp 5

    Hay quá, update thường xuyên cho em vô học với, cái này cũng đang ngu gần chết.
    KeyRoyal007 thích bài viết này
  13. KeyRoyal007

    KeyRoyal007 Thành viên cấp 2

    Đoilơ ViệtDesigner ; Okay , sẽ nhanh chóng hoàn thiện :D tại cũng bận nhiều ,. Nhưng nếu Có gì khó thì em mở Teamview ra thì mình sửa cho .
    Đoilơ ViệtDesigner thích bài viết này
  14. Đoilơ ViệtDesigner

    Đoilơ ViệtDesigner Thành viên cấp 5

  15. KeyRoyal007

    KeyRoyal007 Thành viên cấp 2

    Đoilơ ViệtDesigner : =)) , nếu có dịp gặp hay nói chuyện sẽ biết mình là ai nhé :P . Cám ơn . hihi
    Jacky09 thích bài viết này
  16. Quyet_Dep_Zai

    Quyet_Dep_Zai Thành viên cấp 2

    bây giờ em mới biết chèn bảng, ảnh , input
    mong bác update thường xuyên để em thiết kế được cái web ngon.
  17. KeyRoyal007

    KeyRoyal007 Thành viên cấp 2

    Okie á :D
    Jacky09 thích bài viết này
  18. Đặng Sơn Tùng

    Đặng Sơn Tùng Thành viên cấp 2

    anh ơi a làm video dạy cắt css đi a :( e đang muốn học cắt css quá :(
  19. kEm

    kEm Thành viên cấp 2

    Mìnhn ghĩ như mọi giáo trình khác bạn nên hướng dẫn về cấu trúc 1 tag trước và các thành phần của tag
  20. Nguyễn Tất Thắng

    Nguyễn Tất Thắng Rất là bình thường

    Lưu ý là muốn viết tiếng việt trong web thì phần Encoding để UTF-8 chứ đừng để ANSI nhé!
    Gooner Designer thích bài viết này

Ủng hộ diễn đàn