Twitter
01:29
Unknown
Tài liệu học thiết kế web dành cho người mới bắt đầu, để bắt đầu học một ngôn ngữ nào chúng ta cần biết những kiến thức lập trình cơ bản nhất, trước hết hãy cùng làm quen với HTML-CSS
 |
| Học thiết kế web cho người mới bắt đầu |
HTML chuyên về code, nội dung còn CSS chuyên về cách trình bày, giao diện.
Cấu trúc nội dung và hình ảnh được thâu tóm toàn bộ trong HTML và định dạng lại cấu trúc sau khi giải quyết vấn đề của CSS.
Cấu trúc cơ bản của HTML:
Việc đầu tiên là tạo 1 trang HTML bao gồm các nội dung dưới đây:
- Hãy soạn nội dung trong notepad: "Việt Tin - Nơi đào tạo lập trình".
Sau đó bạn lưu file với tên tùy thích nhưng bắt buộc phải có đuôi .html hay .htm(ví dụ: vtd.html hay vtd.htm). Tiếp theo bạn mở file bằng trình duyệt Firefox hoặc Internet Explorer, chrome...
Lưu ý:
Trước khi học thiết kế web bạn nên dùng Notepad để viết code trước khi dùng các chương trình soạn thảo thông minh hơn như: Microsoft Frontpage hoặc Macromedia Dreamweaver... Vì nó không có lợi cho bạn về sau, tức là các trình soạn thảo thông minh sẽ tự gợi ý code cho các bạn, điều này dẫn đến các bạn sẽ không nhơ được những đoạn code căn bản nhất của một người lập trình.
1. Tags, Attributes and Elements - Đây là công cụ mở đầu cho HTML.
Tags: cấu trúc cơ bản của HTML là Tags.
xem ví dụ sau:
{codecitation style="brush: xml;"}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
Việt Tin - Nơi đào tạo lập trình
</body>
</html>
{/codecitation}
Lưu ý:
Dòng đầu tiên:
{codecitation style="brush: xml;"} <!DOCTYPE... {/codecitation}
để cho trình duyệt biết những gì bạn đang làm.
Tag mở:
{codecitation style="brush: xml;"}<html><body>{/codecitation}
Tag đóng:
{codecitation style="brush: xml;"}</html></body>{/codecitation}
1 số khác bạn sẽ thấy tag đóng:
{codecitation style="brush: xml;"}<br />{/codecitation}
Nội dung nằm giữa tag body là "Red Idea - Nâng Tầm Thương Hiệu" sẽ xuất hiện trong trình duyệt.
Tất cả bạn cần nhớ các tags định dạng theo công thức: Tag mở -> nội dung -> tag đóng.
Attributes: đề cập sau.
Elements: không đề cập tới nhiều, đơn giản bạn sẽ gọi:
{codecitation style="brush: xml;"}<body></body>{/codecitation} là tag "body element".
2. Page Titles - Tựa đề trang web hiển thị trên đầu trang web.
Để thêm tựa đề vào trang web của bạn, tựa đề được thêm giữa tag đóng và tag mở title.
{codecitation style="brush: xml;"}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Việt Tin - Nơi đào tạo lập trình</title>
</head>
<body>
Việt Tin - Nơi đào tạo lập trình
</body>
</html>
{/codecitation}
3. Paragraphs - hiển thị cấu trúc nội dung và đoạn văn.
Đoạn văn được thêm ở giữa thanh tag mở và tag đóng body.
{codecitation style="brush: xml;"}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Việt Tin - Nơi đào tạo lập trình</title>
</head>
<body>
Việt Tin - Nơi đào tạo lập trình
và còn nhiều dịch vụ khác ở đây
</body>
</html>
{/codecitation}
4. Headings - 6 cấp heading, phân kích cỡ chữ.
Các cỡ chữ h1, h2, h3, h4, h5, h6. h1 chỉ dùng 1 lần duy nhất ở mỗi trang và h2 tới h6 được dùng thường xuyên trong trang.
{codecitation style="brush: xml;"}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Việt Tin - Nơi đào tạo lập trình</title>
</head> <body>
<h1>Việt Tin - Nơi đào tạo lập trình</h1>
<h2>Thiết kế web trọn gói</h2>
<h3>Web kinh doanh, thương mại...</h3>
</body>
</html>
{/codecitation}
Trên đây là các thành phần cơ bản trước khi học lâp thiết kế web html-css. các bạn hãy liên kết nội dung lại và học nhé!
Bài tham khảo tiếp theo: Học Lập Trình Web Từ Những Bước Cơ Bản Nhất
Bài tham khảo tiếp theo: Học Lập Trình Web Từ Những Bước Cơ Bản Nhất
Posted in
0 nhận xét :
Đăng nhận xét