By GokiSoft.com|
15:57 20/12/2021|
Học HTML5 - CSS3
[Video] Giới thiệu về web + tạo web cơ bản + git/github - Phát hành dự án - Lập trình HTML/CSS
#readme.txt
Nội dung kiến thức học:
- Giới thiệu qua về web & các môn học liên quan
- hosting/server -> đăng ky thử 1 hosting/server -> 000webhost, heroku, .v.v
- domain/dns -> đăng ký thử 1 tên miền free
- kết nối hosting/server & domain/dns
- Cài đặt môi trường
- Phạm vi học: HTML/CSS/JS -> bien dich voi browser (chrome, cốc cốc, ie, safari, .v.v.)
- Môi trường:
- IDE: Visual Studio, Webstorm, Jetbrain, ..., sublime text 4
- Sublime text: https://www.sublimetext.com/download
- Một số lưu ý khi phát triển website:
- Mỗi 1 project -> tạo 1 folder
- Phân cấp bài học -> thành các folder con (Giống C)
- Nguyên tắc khi làm việc với web
- Tất cả file hình ảnh, source code, .v.v -> để trong folder dự án
- Đặt tên folder + tên file -> tiếng ánh/tiếng việt ko dấu -> ko có khoảng cách -> sử dụng dấu - hoặc _ => tạo folder/file
- Viết chức thường (ko sử dụng chữ hoa trong phát triển web)
- Phát triển dự án web cơ bản
- Tìm hiểu hiểu HTML
- Phương pháp học:
- Ghi nhớ nhiều -> qua thực hành
- Tài liệu học:
- EN: https://www.w3schools.com/html/default.asp
- VN: https://gokisoft.com/hoc-html5-css3.htm
- Slide Aptech -> dùng thi lý thuyết
- Học cách tạo 1 website cơ bản:
- Deploy (phát hành) dự án -> đẩy lên git/github & public website
B1. Tạo tài khoản trên github: https://github.com/
B2. Cài đặt phầm mềm: https://git-scm.com/
B3. Đẩy code từ máy tính lên github
B3.1 -> TH: chưa đẩy code lên lần nào
git init
git add -A
git commit -m 'first commit'
git remote add origin https://github.com/tranvandiep/C2110I.git
git push origin master
B3.2 -> TH: đã từng đẩy code lên github
git add -A
git commit -m 'update source code for lesson01'
git push origin master
B4. Deploy du an/tạo web -> share cho mọi người xem kết quả học
#test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Page</title>
</head>
<body>
<h1>Test</h1>
</body>
</html>
#vidu.html
<!-- Khai báo trang web code bằng html -> thông báo cho browser biết -->
<!-- Tag/Thẻ: html, head, meta, body, h1, .v.v => có 1 chức năng riêng => Biên bởi browser -->
<!-- Tag/Thẻ: Thẻ mở <html> & thẻ đóng </html>, Thẻ tự đóng: <meta> -->
<!DOCTYPE html>
<html>
<head>
<!-- header: khai báo thẻ cấu hình, thuộc tính web, ... -->
<!-- Thẻ này báo browser -> site gõ bằng font utf8 -->
<meta charset="utf-8">
<!-- Cho chức năng responsive: mobile & pc (@meta) -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Tiêu đề website -->
<title>HTML for beginer</title>
</head>
<!-- keyword: color picker -->
<body style="color: white; background-color: #c5fce9; background-image: url(https://haycafe.vn/wp-content/uploads/2021/12/hinh-anh-noel-giang-sinh-dep-nhat.jpg);">
<!-- body: thiết kế giao diện website -->
<!-- Tạo ra text bôi đậm -->
<h1 title="Xin Chao">Welcome to learn HTML/CSS</h1>
<h2>Welcome to learn HTML/CSS</h2>
<h3>Welcome to learn HTML/CSS</h3>
<h4>Welcome to learn HTML/CSS</h4>
<h5>Welcome to learn HTML/CSS</h5>
<h6>Welcome to learn HTML/CSS</h6>
<h7>Welcome to learn HTML/CSS</h7>
<h8>Welcome to learn HTML/CSS</h8>
<br/><br>
<!-- src, alt -> gọi là thuộc tính/properties -->
<!-- https://en.nhandan.vn/cdn/en/media/k2/items/src/996/0a643cbb6c8121a7d309c2e1a984eac8.jpg, GokiSoft - Học Lập Trình Online -> Giá trị/value của thuộc tính -->
<img src="https://en.nhandan.vn/cdn/en/media/k2/items/src/996/0a643cbb6c8121a7d309c2e1a984eac8.jpg" alt="GokiSoft - Học Lập Trình Online" width="600px" height="auto">
<br/>
<a href="https://gokisoft.com">Xem web gokisoft.com</a>
</body>
</html>
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)