• Trang chủ
  • Khoá học
    • Lập trình trẻ em (từ 8 – 15 tuổi)
      • Lập trình Scratch Cơ bản
      • Lập trình Scratch Nâng cao
      • Robotics Cơ bản
      • Robotics Nâng cao
      • Lập trình Python Cơ bản
    • Lập trình viên chuyên nghiệp (từ 12 tuổi trở lên)
      • Lập trình viên Java Developer (Học 6 tháng – 1 năm – Đi làm ngay) – SOGO xSchool
      • Lập trình viên ứng dụng Ô tô (Học 6 tháng đến 1 năm – Đi làm ngay)
      • Lập trình viên Blockchain (Blockchain Developer) – SOGO xSchool
    • Đại học trực tuyến FUNiX (FPT)
      • Kỹ sư phần mềm (Cử nhân) – Học trực tuyến (Online)
  • Sự kiện
  • BLOG
  • Hoạt động
  • Liên hệ
Hotline
0355 00 77 38
quangphuong@sogo.edu.vn
SOGOSOGO
  • Trang chủ
  • Khoá học
    • Lập trình trẻ em (từ 8 – 15 tuổi)
      • Lập trình Scratch Cơ bản
      • Lập trình Scratch Nâng cao
      • Robotics Cơ bản
      • Robotics Nâng cao
      • Lập trình Python Cơ bản
    • Lập trình viên chuyên nghiệp (từ 12 tuổi trở lên)
      • Lập trình viên Java Developer (Học 6 tháng – 1 năm – Đi làm ngay) – SOGO xSchool
      • Lập trình viên ứng dụng Ô tô (Học 6 tháng đến 1 năm – Đi làm ngay)
      • Lập trình viên Blockchain (Blockchain Developer) – SOGO xSchool
    • Đại học trực tuyến FUNiX (FPT)
      • Kỹ sư phần mềm (Cử nhân) – Học trực tuyến (Online)
  • Sự kiện
  • BLOG
  • Hoạt động
  • Liên hệ

    Lập trình Web

    • Trang chủ
    • Blog
    • Lập trình Web
    • Bài 1 | Xây dựng website đơn giản với HTML – SOGO xSchool

    Bài 1 | Xây dựng website đơn giản với HTML – SOGO xSchool

    • Mục Lập trình Web
    • Date 29/06/2019
    • Ý kiến Chưa có ý kiến nào
    website-don-gian

    Một website đơn giản có thể được viết bằng ngôn ngữ HTML. Bài viết sau đây sẽ hướng dẫn bạn cách xây dựng một website đơn giản sử dụng ngôn ngữ HTML.

    I. Tạo Website đơn giản bằng HTML

    1. Các bước tạo một file .html

    Để có thể bắt đầu viết HTML, bạn có thể sử dụng phần mềm soạn thảo văn bản cơ bản (plain text editor) như: Notepad, Notepad++, Sublime Text…để tạo một file đuôi .html (thay vì .txt).

    1. Bước 1: Mở Notepad hoặc Sublime Text, vào File -> New File để tạo File mới.
    2. Bước 2: Chép dòng lệnh code sau đây vào Notepadhtml notepad
    3. Bước 3: Chọn File -> Save as…Sau đó lưu file đuôi .html hoặc .htm. Thí dụ ta đặt: “index.html”. Như vậy ta đã hoàn tất tạo một file .html.save file html notepad
    4. Bước 4: Có thể sử dụng các trình duyệt hoặc double click vào file index.html này để mở file.view web html notepad

    2. Cấu trúc file HTML (HTML Document Structure)

    Tất cả các file HTML đều có cấu trúc bao gồm các thành phần tới thiểu như sau: <!DOCTYPE html>, <html>, <head>, và <body>… được gọi là các thẻ (tag).

    a. Thẻ <!DOCTYPE html>

    Thẻ <!DOCTYPE html> được dùng để khai báo version của ngôn ngữ HTML đang được sử dụng. Trong trường hợp này là version 5 mới nhất Thẻ này luôn được đặt ở dòng đầu tiên của file HTML.

    b. Thẻ <html>

    Tiếp theo đó là thẻ <html> dùng để báo hiệu bắt đầu file HTML.

    c. Thẻ <head>

    Bên trong thẻ <html>, thẻ <head> dùng cho phần đầu của trang, bao gồm các dữ liệu metadata (thông tin của trang web). Nội dung bên trong của thẻ <head> không được thể hiện trong trang web. Ngoại trừ tên (title) của trang sẽ được hiện lên phần trên cùng của tab trình duyệt.

    d. Thẻ <body>

    Tất cả những nội dung được thể hiện trên trang web nằm trong thẻ <body> .

    e. Thí dụ cấu trúc của 1 website đơn giản

    Thí dụ cấu trúc các dòng lệnh của một trang website đơn giản như sau:

     

    See the Pen HTML Document Structure Demo by QUANG (@QUANGPHUONG) on CodePen.

    Như thấy ở trên, dòng lệnh đầu tiên là thẻ <!DOCTYPE html>, sau đó là thẻ <html> với ngôn ngữ sử dụng là tiếng Anh (bằng dòng lệnhlang="en").

    Bên trong thẻ <html> là thẻ <head> và <body>. Thẻ <head> bao gồm mã code ký tự bằng thẻ  <meta charset="utf-8"> và tựa đề của trang web bằng thẻ <title>. Thẻ <body> bao gồm một tiêu đề bằng thẻ <h1> và một đoạn văn bằng thẻ <p>. Bởi vì cả tiêu đề và đoạn văn đều nằm trong thẻ <body> , chúng đều được thể hiện trên trang web.

    Khi một thành phần (thẻ) được đặt trong một thành phần (thẻ) khác, chúng được gọi là nested. Thành phần con sẽ được đặt lùi (indent) để giúp cho các trúc file html gọn ghẽ hơn. Thí dụ trên cả hai thẻ <head> and <body> đều nằm trong thẻ  <html>  do là thẻ con của thẻ  <html> .

    II. Các thành phần cơ bản trong file HTML

    1. Thành phần (Elements)

    Thành phần (elements) cấu thành nên cấu trúc của trang web. Tên của thành phần được đặt trong dấu nhỏ hơn và lớn hơn < > . Thí dụ như đoạn văn (paragraph) <p>, thuộc tính (attribute) <a>, tiêu đề (heading) <h1>,<h2>,<h3>,<h4>.

    2. Thẻ (Tags)

    Thẻ (tag) được tạo bởi dấu nhỏ hơn và lớn hơn, bên trong là tên của thành phần. Thẻ tag thường đi thành cặp. Bao gồm thẻ bắt đầu (opening tag) và thẻ kết thúc (closing tags).

    Opening tag đánh dấu bắt đầu của một element. Thí dụ: <p>. <p> là thẻ báo hiệu bắt đầu một đoạn văn (paragraph).

    Closing tag đánh dấu kết thúc của một element. Thí dụ: </p>.</p> là thẻ báo hiệu kết thúc một đoạn văn (paragraph).

    Nội dung bên trong opening và closing tags là nội dung của một element. Thí dụ của một element paragraph hoàn chỉnh như sau: <p>Hello world</p>.

    3. Thuộc tính (Attributes)

    Attributes được sử dụng để cung cấp thông tin thêm của một element.

    Một số thuộc tính thông dụng như:

    1. id attribute: dùng để đặt tên một element

    2. class attribute: dùng để phân cấp (class) một element

    3. src attribute:  dùng để chèn nguồn cho nội dung nhúng (embedded content) trong trang web

    4. href attribute: dùng để chèn đường dẫn (link) đến một trang web khác.

    Attribute bắt đầu bằng một thẻ mở, sau đó là tên của element. Theo sau là dấu bằng và giá trị của attribute được đặt trong ngoặc kép.

    Thí dụ một element <a> và href attribute như sau:

    <a href="https://www.w3schools.com/">W3School</a>

    See the Pen Attribute by QUANG (@QUANGPHUONG) on CodePen.

    Đoạn lệnh nói trên sẽ thể hiện dòng chữ “W3School” trên trang web. Khi người dùng click vào dòng chữ “W3School” thì trình duyệt sẽ tự động chuyển đến trang web https://www.w3schools.com/.

    4. Self-Closing Elements

    Hầu hết các elements đều có opening và closing tags. Tuy nhiên cũng có 1 số element chỉ có opening tag mà không có closing tag. Các element này được gọi là “self closing elements”:

    • <br>
    • <embed>
    • <hr>
    • <img>
    • <input>
    • <link>
    • <meta>
    • <param>
    • <source>
    • <wbr>

    Nguồn tham khảo:

    *************

    Xem thêm:

    1. Lập trình web là gì?
    2. HTML là gì?
    3. Học lập trình web bắt đầu như thế nào?

    —————————————————————————————

    SOGO – xSchool

    Đối tác của trường Đại học trực tuyến FUNiX (thuộc khối giáo dục FPT Education).

    SOGO hợp tác cùng FUNiX triển khai chương trình đào tạo Lập trình viên chuyên nghiệp – Java Developer dựa trên cơ sở hoàn thành 03 chứng chỉ đầu tiên của chương trình Cử nhân Đại học trực tuyến FUNiX (tổng cộng 8 Chứng chỉ để lấy bằng Đại học FPT).

    Mục tiêu của chương trình này là giúp sinh viên có thể hoàn thành 3 chứng chỉ đầu trong thời gian từ 10 – 12 tháng và có thể đi làm ngay tại FPT Software với chức danh Java Developer Fresher.

    Sau khi đi làm, sinh viên vẫn có thể tiếp tục học để hoàn thành 5 chứng chỉ còn lại của FUNiX và lấy bằng Đại học FPT (được Bộ giáo dục và đào tạo công nhận).

    Chi tiết chương trình trở thành Java Developer chỉ trong 10 tháng.

    Liên hệ ngay để biết thêm chi tiết đây:

    Hotline: 0355 00 77 38

    Facebook (SOGO xSchool): sogoxschool

    Tag:attribute, cau truc html, element, file html, href, html, html document structure, html tag, hyperlink, lap trinh html, lap trinh vien website, lap trinh web, notepad, self closing elements, src, sublime text, thanh phan, thẻ html, thiet ke website, thuoc tinh, website, website don gian

    • Chia sẻ:
    admin

    Bài trước

    5 Dấu hiệu cho thấy bạn không hợp với nghề Lập trình (Coder) - SOGO
    29/06/2019

    Bài sau

    Bài 2 | HTML element - Các thành phần cơ bản của HTML - SOGO xSchool
    03/07/2019

    Bạn cũng có thể thích

    json-la-gi
    Bài 34 | JSON là gì? – Javascript cơ bản (Phần 10) – SOGO
    23 Tháng Mười Một, 2019
    javascript-dom-la-gi
    Bài 33 | Javascript DOM là gì? – Javascript cơ bản (Phần 9) – SOGO
    23 Tháng Mười Một, 2019
    javascript-if-else
    Bài 32 | Javascript if else Conditions– Javascript cơ bản (Phần 8) – SOGO
    9 Tháng Mười Một, 2019

    Ý kiến Hủy

    Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

    Tìm kiếm

    Chuyên mục

    • Học tiếng Anh (1)
    • Lập trình Android (1)
    • Lập trình Java (2)
    • Lập trình trẻ em (13)
    • Lập trình viên chuyên nghiệp (18)
    • Lập trình Web (37)
    • Tin tức (15)
    • Uncategorized (2)

    CÁC KHÓA HỌC

    Lập trình Python Cơ bản

    Lập trình Python Cơ bản

    2.800.000₫ 2.600.000₫
    Lập trình viên Blockchain (Blockchain Developer) – SOGO xSchool

    Lập trình viên Blockchain (Blockchain Developer) – SOGO xSchool

    Free
    Robotics Nâng cao

    Robotics Nâng cao

    2.800.000₫ 2.600.000₫
    Lập trình viên ứng dụng Ô tô (Học 6 tháng đến 1 năm – Đi làm ngay)

    Lập trình viên ứng dụng Ô tô (Học 6 tháng đến 1 năm – Đi làm ngay)

    Free
    Kỹ sư phần mềm (Cử nhân) – Học trực tuyến (Online)

    Kỹ sư phần mềm (Cử nhân) – Học trực tuyến (Online)

    Free
    Lập trình viên Java Developer (Học 6 tháng – 1 năm – Đi làm ngay) – SOGO xSchool

    Lập trình viên Java Developer (Học 6 tháng – 1 năm – Đi làm ngay) – SOGO xSchool

    Free
    Robotics Cơ bản

    Robotics Cơ bản

    2.800.000₫ 2.600.000₫
    Lập trình Scratch Nâng cao

    Lập trình Scratch Nâng cao

    2.800.000₫ 2.600.000₫
    Lập trình Scratch Cơ bản

    Lập trình Scratch Cơ bản

    2.800.000₫ 2.600.000₫

    BÀI VIẾT MỚI NHẤT

    Bài 34 | JSON là gì? – Javascript cơ bản (Phần 10) – SOGO
    23Th112019
    Bài 33 | Javascript DOM là gì? – Javascript cơ bản (Phần 9) – SOGO
    23Th112019
    Bài 32 | Javascript if else Conditions– Javascript cơ bản (Phần 8) – SOGO
    09Th112019
    Bài 31 | Javascript Object – Javascript cơ bản (Phần 7) – SOGO
    09Th112019
    Bài 30 | Javascript Array – Javascript cơ bản (Phần 6) – SOGO
    05Th102019
    logo-sogo

    0937117714 (Ms. Hương)

    0935710181 (Mr. Quang)

    info@sogo.edu.vn

    SoGo

    • Về chúng tôi
    • Bài viết
    • Liên hệ
    • Tuyển dụng

    Links

    • Khoá học
    • Sự kiện
    • Hoạt động
    • FAQs

    Education Website by QuangPhuong. Powered by SOGO.