By GokiSoft.com|
21:39 03/06/2020|
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
#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.jpgTags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
