IMG-LOGO
×

Tài Liệu Môn Học

Khoá học lập trình HTML/CSS

Nhập Môn HTML

[Video] Giới thiệu về lập trình web - HTML/CSS [Video] Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS [Video] Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS

Tìm Hiểu Thẻ HTML5

[Video] Formatting Text using Tags - html tags [Video] Creating Hyperlinks and Anchors (phần 1) - html tags [Video] Creating Hyperlinks and Anchors (phần 2) - html tags [Video] Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS [Video] Tìm hiểu về đường dẫn file (path file) trong HTML/CSS

CSS

[Video] Tìm hiểu thuộc tính trong thẻ html [Video] Giới thiệu CSS & Sử dụng các thuộc tính cơ bản [Video] Hướng dẫn tách biệt CSS và HTML [Video] Xử lý Event trong CSS (:hover, :active, :link, ...) - Lập trinh HTML/CSS

Table & CSS

[Video] Tìm hiểu table trong HTML/CSS - HTML/CSS

Form & CSS

[Video] Thiết kế form trong HTML/CSS/JS [Video] Tìm hiểu tag videos, audio trong HTML/CSS/JS [Video] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

Thiết Kế Layout

[Video] Tìm hiểu Frame qua ví dụ quản lý khách sạn HTML/CSS [Video] Hướng dẫn tạo layout bằng thẻ Div căn bản [Video] Hướng dẫn thiết kế layout bằng thẻ div nâng cao (Thiết kế giao diện web gokisoft)




Trang Chủ Học HTML5 - CSS3 [Share Code] Tìm hiểu khái niệm domain (dns) + hosting/server + thẻ căn bản html + css - Lession 1

[Share Code] Tìm hiểu khái niệm domain (dns) + hosting/server + thẻ căn bản html + css - Lession 1

by GokiSoft.com - 21:39 03/06/2020 2,316 Lượt Xem

#guide.txt


- Test nhanh HTML5/CSS : 20 phút
- Khai niệm về web
	- Hiểu bản chất của môn này là gì
	- Flow hệ thống web.
- a, Form, table, image, ul, li, ... : Phần căn bản của html
- Tạo CSS => Căn bản

facebook/google/...

- Domain (DNS) : 
	=> Tim hieu về nó
	=> Đắng 1 domain
	=> Free/Fee: .com, .net, .vn => FEE, .tk => FREE (ten.tk)

- Hosting/Server :
	=> Tìm hiểu kỹ về nó

- IP: là gì??? 192.168.1.35 => thaydiep.com, gokisoft.com, facebook.com,...

- Website
	Frontend:
		Hiển thị phía người dùng
		Ngôn ngữ:
			- HTML5
			- CSS
			- JS
			- JQuery
			- Bootstrap
			- AngularJS...
		=> Browser (Chrome, IE, Coccoc, Firefox, ...) => Biên dịch code frontend

	Backend:
		PHP/Laravel, NodeJS, Java Web, JSP, Ruby on Rail, ...
		=> dich ở phía server
		=> SQL/Php => code backend


=> Chịu khó gõ nhiều + làm thật nhiêu BT + tự viết 1 website


#style.css


body {
	background-color: grey;
	background: url('https://diy-magazine.s3.amazonaws.com/d/diy/Artists/G/Girl-In-red/Girl-in-Red_-by-Chris-Almeida-1.png');
	background-repeat: no-repeat;
	background-size: cover;
	color: white
}

img {
	width: 300px;
	height: auto;
	border-left: dotted 3px white;
	border-right: solid 3px red;
}

img.img_1 {
	border-top: solid 3px green;
	border-bottom: solid 3px blue;
}

img.img_2 {
	border-right: solid 3px white;
	border-bottom: solid 3px yellow;
}

h5.img_2 {
	border-right: solid 3px black;
	border-bottom: solid 3px blue;
}

h6,h5 {
	color: #fcba03;
	background-color: #a89c79;
	margin-left: 100px;
	margin-right: 200px;
	margin-top: 10px;
	margin-bottom: 60px;
	padding: 20px;
}

#p_1 {
	font-size: 25px;
	color: red;
	background-color: yellow;
	border: solid 3px red;
}

a {
	color: white;
}


#Test.html


<!DOCTYPE html>
<html>
<head>
	<title>Test HTML</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
	<ul class="pagination">
	  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
	  <li class="page-item"><a class="page-link" href="#">1</a></li>
	  <li class="page-item"><a class="page-link" href="#">2</a></li>
	  <li class="page-item"><a class="page-link" href="#">3</a></li>
	  <li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</body>
</html>


#vidu1.html


<!DOCTYPE html>
<html>
<head>
	<title>Vidu1 - HTML/CSS/JS</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1 style="color: red">H1 Tutorial</h1>
	<h2 style="color: #2a7dc9">H2 Tutorial</h2>
	<h3 style="background-color: #5d92c2">H3 Tutorial</h3>
	<h4 style="color: red">H4 Tutorial</h4>
	<h5 style="color: red" class="img_2">H5 Tutorial</h5>
	<h6>H6 Tutorial</h6>
	<h5 id="h5_1">H7 Tutorial</h5>
	<h5 id="h5_2">H8 Tutorial</h5>
	<p id="p_1">
		Show Picture
	</p>
	<p>
		<img class="img_1" src="photos/girlinred_2_mar19.jpg">
	</p>
	<p>
		<img class="img_2" src="photos/Girl-in-Red-2019-cr-Julie-Pike-billboard-1548-1024x677.jpg">
	</p>
	<a href="vidu2.html">Next Page</a>
</body>
</html>


#vidu2.html


<!DOCTYPE html>
<html>
<head>
	<title>Vidu2 - HTML tutorial</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<a href="vidu1.html" target="_blank">Page 1</a>
</body>
</html>


#girlinred_2_mar19.jpg


https://res.cloudinary.com/wegoup/image/upload/v1591195155/umpamvcuqgls0vpwgwud.jpg


#Girl-in-Red-2019-cr-Julie-Pike-billboard-1548-1024x677.jpg


https://res.cloudinary.com/wegoup/image/upload/v1591195156/sldqftnfpcynik0aeeev.jpg


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!