By GokiSoft.com| 18:36 15/11/2021|
Học HTML5 - CSS3

[Video] Tìm hiểu kiến thức căn bản html/css - bài học 1 - Học lập trình HTML/CSS

LINK VIDEO BAI GIANG

#readme.txt


Nội dung kiến thức
- Tìm hiểu các kiến căn bản html/css
- deploy dự án bằng gokisoft (mini hosting)
- git/github
- heroku -> deploy dự án lên server

Lưu ý: bài tập -> link heroku (kết quả bài làm của các bạn)

===================================================
github:
	- Ổ cứng: lưu trữ các dự án của các bạn
	- Project:
		Tạo duy nhất 1 project cho cả môn HTML/CSS

git
	- cài đặt phần mềm git (tools): https://git-scm.com/
	- git bash

Dong bo du an vs github

1) Chưa đồng bộ code lần nào (đẩy code từ máy lên github)
-- Khoi tao moi truong lam viec cho git
git init
-- Add tat ca cac file them moi/thay doi -> day len github: dong hang
git add -A
-- Tạo nhãn chứa thông tin địa chỉ gửi hàng.
git commit -m 'add project'
-- Connect dự án trên máy tính vs github project
git remote add origin https://github.com/tranvandiep/c2108l.git
-- Đẩy code từ máy tính lên github project

#vidu.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bài 1: Tìm hiểu về kiến thức căn bản html/css</title>
</head>
<body style="background-color: #94ebc4; background-image: url(https://www.woodtv.com/wp-content/uploads/sites/51/2021/10/Snow-Black-Hills-National-Forest-Patti-Lynch.jpg?w=2560&h=1411&crop=1); background-size: cover; background-repeat: no-repeat;">
	<!-- Phân 1: Tìm hiểu về thẻ Heading (h1 -> h6) -->
	<!-- Key word: color picker -->
	<h1 title="Check H1 Heading" style="color: red;">H1 Heading</h1>
	<h2 style="color: #db9c27">H2 Heading</h2>
	<h3>H3 Heading</h3>
	<h4>H4 Heading</h4>
	<h5>H5 Heading</h5>
	<h6>H6 Heading</h6>

	<!-- Phần 2-->
	<h2 style="background-color: yellow;">Using HTML Formatting Elements</h2>
	<!-- br: xuống dòng -->
	<br>
	<!-- b: in đậm -->
	<b>This text is displayed in bold.</b>
	<br/>
	<!-- strong: in đậm -->
	<strong>This text is displayed in bold.</strong>
	<br>
	<!-- i: in nghiêng -->
	<i>This text is displayed in italic.</i>
	<br>
	<!-- u: gạch chân -->
	<u>This text is underlined.</u>
	<br>
	<!-- small: tạo chữ nhỏ -->
	<small>This text is displayed smaller.</small>

	<!-- Phần 3 -->
	<h3 style="background-color: #5da2c9">Updating, Emphasizing, and Shifting Text</h3>
	This is an example of <del>deleted</del> <ins>inserted </ins> text.<br/>
	The is an example of <strong>Strong</strong> text.<br/> The is an example of <sub>subscript</sub>text.<br/>
	The is an example of <sup>superscript</sup> text.<br/>

	<h3>ax<sup>2</sup> + bx + c = 0</h3>
	<h3>log<sub>3</sub><sup>10</sup></h3>

	<!-- Phần 4 -->
	<center>When one door closes</center>
	<code>When one door closes</code>

	<!-- Phần 5: ol -->
	<!-- style: css -> thiết kế giao diện cho bắt mắt -->
	<ol style="list-style-type: lower-alpha;">
		<li>Sunday</li>
		<li>Monday</li>
		<li>Tuesday</li>
		<li>Wednesday</li>
		<li>Thursday</li>
		<li>Friday</li>
		<li>Saturday</li>
    </ol>

    <!-- Phần 6: ul -->
	<ul style="list-style-type: square;">
		<li>Sunday</li>
		<li>Monday</li>
		<li>Tuesday</li>
		<li>Wednesday</li>
		<li>Thursday</li>
		<li>Friday</li>
		<li>Saturday</li>
    </ul>

    <!-- Phần 7 : nâng cao -->
    <img src="https://i.ytimg.com/vi/dip_8dmrcaU/maxresdefault.jpg" style="max-width: 1000px; width: 640px;" height="1000px">

    <!-- Hyperlink -->
    <br/>
    <a href="https://gokisoft.com/" style="color: red; font-size: 30px;" target="_blank">Xem nội dung học</a>
    <br/>
    <a href="https://gokisoft.com/" style="color: white; font-size: 30px;" target="_self">Xem nội dung học</a>
    <br/>
    <a href="vidu2.html" style="color: white; font-size: 30px;" target="_self">Xem trang 2</a>
    <br/>
    <a href="mailto:gokisoft.com@gmail.com" style="color: white; font-size: 30px;" target="_self">Gửi Mail GokiSoft</a>
    <br/>
    <a href="tel:0967025996" style="color: white; font-size: 30px;" target="_self">Gọi Điện: 0967.025.996</a>
</body>
</html>


#vidu2.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bài học 1: Trang thứ 2</title>
</head>
<body>
	<h1>Trang web 2</h1>
	<a href="vidu.html" style="font-size: 30px;" target="_self">Xem trang 1</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)

Trần Cao Sơn [community,C2108L]
Trần Cao Sơn

2021-11-11 16:28:28


#b1.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UNESCO</title>
</head>
<body>
<hr>
<h2 title="United Nations Educational, Scientific and Cultural Organization">UNESCO</h2>
<hr>
<p><b>UNESCO <i>(United Nations Educational, Scientific and Cultural Organization)</b></i> is a specialized agency of the United Nations established in 1945. Its purpose is to provide peace and security by promoting international collaboration.</p>
<p>Locations: <small>Headquarter of UNESCO is located in Paris, France.</small></p>

</body>
</html>



Trần Cao Sơn [community,C2108L]
Trần Cao Sơn

2021-11-11 15:45:10


#admission.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vincent State School.</title>


</head>
<body>

<img src="https://thumbs.dreamstime.com/b/education-badge-logo-design-university-high-school-emblem-laurel-wreath-education-badge-logo-design-university-high-school-emblem-181155667.jpg" style="align=left; width:15%" >
<h1 style="font-family:Arial, Helvetica, sans-serif; color:#6297BC">Vincent State School</h1><br>
<h2 style="color: #666666; font-weight:bold; font-family:tahoma; font-size:12px">280 Palmerston Street, Townsville, 4814</h2><br>
<a href="home.html" target="_blank">home</a>
<a href="infomation.html" target="_blank">infomation</a>
<a href="fee.html" target="_blank">fee</a>
<a href="admission.html" target="_blank">admission</a>
<h3>Application forms for admission to LKG for the academic year 2012-13 will be available in the last week of February 2012 on school website www.stvincentspune.com/xaviers. Admission for any other classes please enquire in the first week of May 2012</h3>

</body>
</html>


#fee.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vincent State School.</title>


</head>
<body>

<img src="https://thumbs.dreamstime.com/b/education-badge-logo-design-university-high-school-emblem-laurel-wreath-education-badge-logo-design-university-high-school-emblem-181155667.jpg" style="align=left; width:15%" >
<h1 style="font-family:Arial, Helvetica, sans-serif; color:#6297BC">Vincent State School</h1><br>
<h2 style="color: #666666; font-weight:bold; font-family:tahoma; font-size:12px">280 Palmerston Street, Townsville, 4814</h2><br>
<a href="home.html" target="_blank">home</a>
<a href="infomation.html" target="_blank">infomation</a>
<a href="fee.html" target="_blank">fee</a>
<a href="admission.html" target="_blank">admission</a>
<h2> PRIMARY</h2>
<h3>The Tuition fees for june and the first term fees must be paid before the end of May. This applies even to those who are seeking financial assistance from the school. Those in receipt of Government Concessions are promoted to the next higher class need not pay fees.The Tuition fees for june and the first term fees must be paid before the end of May. This applies even to those who are seeking financial assistance from the school. Those in receipt of Government Concessions are promoted to the next higher class need not pay fees.</h3>
<h3>Fees will be paid thorugh the South Indian Bank. Fee bills will be available online which parents can print form the website and pay to the bank by cash.</h3>
<h3>Where possible, parents are requested to pay fees in advance for six months or a year. If the fees for the month are not paid before 10th of the month, the boy is liable to be sent home. If fees cannot be paid in time the Principal's or Vice Principal's permission must be obtained in writing Please state in your application when you will be able to pay the fees. If the fees, are not paid within 2 months the name will be struck off the rolls.</h3>
</body>
</html>


#home.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vincent State School.</title>


</head>
<body>

<img src="https://thumbs.dreamstime.com/b/education-badge-logo-design-university-high-school-emblem-laurel-wreath-education-badge-logo-design-university-high-school-emblem-181155667.jpg" style="align=left; width:15%" >
<h1 style="font-family:Arial, Helvetica, sans-serif; color:#6297BC">Vincent State School</h1><br>
<h2 style="color: #666666; font-weight:bold; font-family:tahoma; font-size:12px">280 Palmerston Street, Townsville, 4814</h2><br>
<a href="home.html" target="_blank">home</a>
<a href="infomation.html" target="_blank">infomation</a>
<a href="fee.html" target="_blank">fee</a>
<a href="admission.html" target="_blank">admission</a><br>
<h2><b>Welcome to Vincent Stage School.</b></h2>
<h3><b>Welcome to Vincent Stage School.</b></h3>
<h3>Our purpose in the community is to provide high quality learning opportunities for every student. We aim to promote and maintain a positive, safe and orderly learning environment for all students and staff</h3>
<h3><b>We plan to do this through:</b></h3>
<ul>
    <li>The delivery of high quality curriculum</li>
    <li>Excellence in teaching and learning</li>
    <li>Recognising diversity</li>
    <li>School Home Community Partnerships</li>
    <li>School Home Community Partnerships</li>
</ul>
<h3>This information guide is an introduction to what we hope will be a very happy association for you with Vincent State School</h3>



</body>
</html>


#infomation.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vincent State School.</title>


</head>
<body>

<img src="https://thumbs.dreamstime.com/b/education-badge-logo-design-university-high-school-emblem-laurel-wreath-education-badge-logo-design-university-high-school-emblem-181155667.jpg" style="align=left; width:15%" >
<h1 style="font-family:Arial, Helvetica, sans-serif; color:#6297BC">Vincent State School</h1><br>
<h2 style="color: #666666; font-weight:bold; font-family:tahoma; font-size:12px">280 Palmerston Street, Townsville, 4814</h2><br>
<a href="home.html" target="_blank">home</a>
<a href="infomation.html" target="_blank">infomation</a>
<a href="fee.html" target="_blank">fee</a>
<a href="admission.html" target="_blank">admission</a>
<h3>Our distinctive curriculum offerings at Vincent SS include: Our outcomes based curriculum (5 KLAs of Science SOSE Technology The Arts and HPE) has been organised into the 4 New Basic organisers and staff have developed units and contexts that support the teaching of specific core learning outcomes appropriately across the P-7 year levels. Maths and English are taught as integrated subjects across all key learning areas. Our Literacy and Genre program consists of an oral program for P- 2 classes, a whole school spelling program Letter land for Yr P-3 classes and Spelling-A Comprehensive Program Teaching Children How to Spell for Yr 4-7 classes and an individual spelling program folder for Yr 4-7 classes and a structured and sequential reading skills program LOTE (Languages Other Than English) is Auslan Middle Phase of Learning Includes an elective program where by our Yr 4-7 students participate in extra curricular activities that are of interest and high engagement teaching them social and life skills. The program runs for 6 weeks each term and some activities our students have been involved in so far have been tae kwon do, table tennis mini golf, chess, painting, jewelry making, craft, construction.</h3>

</body>
</html>



Đặng Anh Tuấn [community,C2108L]
Đặng Anh Tuấn

2021-11-10 15:48:01


#GalleryOne.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Automobile Gallery - Page 1</title>
</head>
<body>
    <hr>
    <h2 id="Top">Gallery Part I</h2>
    <hr>
    <a href="#Chevrolet">Chevrolet</a><br>
    <a href="#Ferrari">Ferrari</a><br>
    <a href="#Ford">Ford</a>
    <hr>
    <h3 id="Chevrolet">Chevrolet</h3>
    <hr>
    <b>Corvette Coupe</b><br>
    <img src="./Cars/Chevrolet1.jpg" alt="error">
    <br>
    <b>Camaro RS/SS</b><br>
    <img src="./Cars/Chevrolet2.jpg" alt="error"><br>
    <a href="#Top">Top</a>
    <hr>
    <h3 id="Ferrari">Ferrari</h3>
    <hr>
    <b>275 GTB</b><br>
    <img src="./Cars/Ferrari1.jpg" alt="error">
    <br>
    <b>Dino 246 GTS</b><br>
    <img src="./Cars/Ferrari2.jpg" alt="error"><br>
    <a href="#Top">Top</a>
    <hr>
    <h3 id="Ford">Ford</h3>
    <hr>
    <b>Tudor Hot Rod</b><br>
    <img src="./Cars/Ford1.jpg" alt="error">
    <br>
    <b>Mustang Boss 302</b><br>
    <img src="./Cars/Ford2.jpg" alt="error"><br>
    <a href="#Top">Top</a><br>
    <a href="./GalleryTwo.html" target="blank">Next page</a>
</body>
</html>


#GalleryTwo.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Automobile Gallery - Page 2</title>
</head>
<body>
    <hr>
    <h2 id="Top">Gallery Part II</h2>
    <hr>
    <a href="#Jaguar">Jaguar</a><br>
    <a href="#Porsche">Porsche</a><br>
    <a href="#Shelby">Shelby</a>
    <hr>
    <h3 id="Jaguar">Jaguar</h3>
    <hr>
    <b>XK-140 MC Roadster</b><br>
    <img src="./Cars/Jaguar1.jpg" alt="error">
    <br>
    <b>XKE S1 OTS</b><br>
    <img src="./Cars/Jaguar2.jpg" alt="error"><br>
    <a href="#Top">Top</a>
    <hr>
    <h3 id="Porsche">Porsche</h3>
    <hr>
    <b>911 Carrera Coupe</b><br>
    <img src="./Cars/Porsche1.jpg" alt="error">
    <br>
    <b>Boxster S</b><br>
    <img src="./Cars/Porsche2.jpg" alt="error"><br>
    <a href="#Top">Top</a>
    <hr>
    <h3 id="Shelby">Shelby</h3>
    <hr>
    <b>289 Cobra CSX2258</b><br>
    <img src="./Cars/Shelby1.jpg" alt="error">
    <br>
    <b>427 Cobra CSX3305</b><br>
    <img src="./Cars/Shelby2.jpg" alt="error"><br>
    <a href="#Top">Top</a><br>
    <a href="./GalleryOne.html" target="blank">Previous page</a>
</body>
</html>


#unesco.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UNESCO</title>
</head>
<body>
    <hr>
    <h2 title="United Nations Educational, Scientific and Cultural Organization">UNESCO</h2>
    <hr>
    <p><b>UNESCO <i>(United Nations Educational, Scientific and Cultural Organization)</i></b>is a <br>specialized agency of the United Nations established in 1945. Its purpose is to provide peace and <br>security by promoting international collaboration.</p>
    <p><span style="font-size: 20px;">Locations:</span><span style="font-size: 15px;"> Headquarter of UNESCO is located in Paris, France.</span>
    </p>
</body>
</html>



Đặng Anh Tuấn [community]
Đặng Anh Tuấn

2021-11-10 14:46:09


#home.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vincent State School</title>
</head>
<body style="width:900px">
    <img src="./home_1.jpeg" alt="error" float="left" height="145px" width="30%">
    <div style="float: right;width: 65%;">
        <h1 style="font-family:Arial, Helvetica, sans-serif; color:#6297BC;font-size:;">Vincent State School</h1>
        <br>
        <h2 style="color:#666666; font-weight: bold;font-family:Verdana, Geneva, Tahoma, sans-serif;font-size: 12px;">280 Palmerston Street, Townsville, 4814</h2>
    </div>
    <br>
    <p><a href="home.html" target="blank">Home</a> | <a href="information.html" target="blank">Information Course</a> | <a href="fee.html" target="blank">Fee Structure</a> | <a href="admission.html" target="blank">Admission Process</a></p>
    <h2>Welcome to Vincent State School</h3>
    <h3>Welcome to Vincent State School</h4>
    <p>Our purpose in the community is to provide high quality learning opportunities for every student. We aim to promote <br> and maintain a positive, safe and orderly learning environment for all students and staff</p>
    <b>We plan to do this through:</b>
    <ul style="list-style-type: symbols('*');">
        <li>The delivery of high quality curriculum</li>
        <li>Excellence in teaching and learning</li>
        <li>Recognising diversity</li>
        <li>School/Home/Community Partnerships</li>
        <li>Valuing Positive Behaviour</li>
    </ul>
    <p>This information guide is an introduction to what we hope will be a very happy association for you with Vincent State <br> School.</p>
</body>
</html>



Ngô Quang Huy [community,C2108L]
Ngô Quang Huy

2021-11-10 12:58:38


#web.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bài 1: Tìm hiểu về kiến thức căn bản html/css</title>
</head>
<body style="background-color: #94ebc4; background-image: url(https://www.woodtv.com/wp-content/uploads/sites/51/2021/10/Snow-Black-Hills-National-Forest-Patti-Lynch.jpg?w=2560&h=1411&crop=1); background-size: cover; background-repeat: no-repeat;">
	<!-- Phân 1: Tìm hiểu về thẻ Heading (h1 -> h6) -->
	<!-- Key word: color picker -->
	<h1 title="Check H1 Heading" style="color: red;">H1 Heading</h1>
	<h2 style="color: #db9c27">H2 Heading</h2>
	<h3>H3 Heading</h3>
	<h4>H4 Heading</h4>
	<h5>H5 Heading</h5>
	<h6>H6 Heading</h6>

	<!-- Phần 2-->
	<h2 style="background-color: yellow;">Using HTML Formatting Elements</h2>
	<!-- br: xuống dòng -->
	<br>
	<!-- b: in đậm -->
	<b>This text is displayed in bold.</b>
	<br/>
	<!-- strong: in đậm -->
	<strong>This text is displayed in bold.</strong>
	<br>
	<!-- i: in nghiêng -->
	<i>This text is displayed in italic.</i>
	<br>
	<!-- u: gạch chân -->
	<u>This text is underlined.</u>
	<br>
	<!-- small: tạo chữ nhỏ -->
	<small>This text is displayed smaller.</small>

	<!-- Phần 3 -->
	<h3 style="background-color: #5da2c9">Updating, Emphasizing, and Shifting Text</h3>
	This is an example of <del>deleted</del> <ins>inserted </ins> text.<br/>
	The is an example of <strong>Strong</strong> text.<br/> The is an example of <sub>subscript</sub>text.<br/>
	The is an example of <sup>superscript</sup> text.<br/>

	<h3>ax<sup>2</sup> + bx + c = 0</h3>
	<h3>log<sub>3</sub><sup>10</sup></h3>

	<!-- Phần 4 -->
	<center>When one door closes</center>
	<code>When one door closes</code>

	<!-- Phần 5: ol -->
	<!-- style: css -> thiết kế giao diện cho bắt mắt -->
	<ol style="list-style-type: lower-alpha;">
		<li>Sunday</li>
		<li>Monday</li>
		<li>Tuesday</li>
		<li>Wednesday</li>
		<li>Thursday</li>
		<li>Friday</li>
		<li>Saturday</li>
    </ol>

    <!-- Phần 6: ul -->
	<ul style="list-style-type: square;">
		<li>Sunday</li>
		<li>Monday</li>
		<li>Tuesday</li>
		<li>Wednesday</li>
		<li>Thursday</li>
		<li>Friday</li>
		<li>Saturday</li>
    </ul>

    <!-- Phần 7 : nâng cao -->
    <img src="https://i.ytimg.com/vi/dip_8dmrcaU/maxresdefault.jpg" style="max-width: 1000px; width: 640px;" height="1000px">

    <!-- Hyperlink -->
    <br/>
    <a href="https://gokisoft.com/" style="color: red; font-size: 30px;" target="_blank">Xem nội dung học</a>
    <br/>
    <a href="https://gokisoft.com/" style="color: white; font-size: 30px;" target="_self">Xem nội dung học</a>
    <br/>
    <a href="vidu2.html" style="color: white; font-size: 30px;" target="_self">Xem trang 2</a>
    <br/>
    <a href="mailto:gokisoft.com@gmail.com" style="color: white; font-size: 30px;" target="_self">Gửi Mail GokiSoft</a>
    <br/>
    <a href="tel:0967025996" style="color: white; font-size: 30px;" target="_self">Gọi Điện: 0967.025.996</a>
</body>
</html>