Hoàn thiện trang Blog

Lưu ý: Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả.

Source code HTML

Java


<!DOCTYPE html>
<html>

<head>
    <title>HTML co ban</title>
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="content">
            <h1 class="heading" id="heading1">HOWKTEAM BLOG</h1>
            <div class="date"><h2>Ngày 12, tháng 10, năm 2018</h2></div>
            <h2>HOWKTEAM 1</h2>
            

            <!--heading tieu de cua cac phan trong website-->
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Rem debitis eos dolorem itaque tempore libero ipsa quibusdam fuga, vel,
                molestiae maxime harum consequatur architecto repellat dolores cupiditate iure nisi fugiat?
                Lorem ipsum, dolor sit amet consect <br>etur adipisicing elit. Nulla, culpa.
                Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Rem debitis eos dolorem itaque tempore libero ipsa quibusdam fuga, vel,
                molestiae maxime harum consequatur architecto repellat dolores cupiditate iure nisi fugiat?
                Lorem ipsum, dolor sit amet consect <br>etur adipisicing elit. Nulla, culpa.
                Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Rem debitis eos dolorem itaque tempore libero ipsa quibusdam fuga, vel,
                molestiae maxime harum consequatur architecto repellat dolores cupiditate iure nisi fugiat?
                Lorem ipsum, dolor sit amet consect <br>etur adipisicing elit. Nulla, culpa.
            </p>

            <h2>HOWKTEAM 2</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur,
                adipisicing elit. Voluptatem autem reprehenderit asperiores
                distinctio similique beatae adipisci officiis, rerum vitae quaerat veniam
                porro repellendus odit aspernatur a est magni odio. Non!
                Lorem ipsum dolor sit amet consectetur,
                adipisicing elit. Voluptatem autem reprehenderit asperiores
                distinctio similique beatae adipisci officiis, rerum vitae quaerat veniam
                porro repellendus odit aspernatur a est magni odio. Non!
                Lorem ipsum dolor sit amet consectetur,
                adipisicing elit. Voluptatem autem reprehenderit asperiores
                distinctio similique beatae adipisci officiis, rerum vitae quaerat veniam
                porro repellendus odit aspernatur a est magni odio. Non!
            </p>
            <!-- Noi ban chua van ban-->
            <img style="width: 500px;" src="https://www.howkteam.vn/Content/areacontent/images/HowKteamLogo.png" alt="PHoto">
            <!-- src source alt alternative -->
            <a href="https://www.howkteam.vn/">Link dan den HOWKTEAM</a>

        </div>
        <form>
                <input type="text" placeholder="dien ten cac ban vao day">
                <input type="submit" value="gui tin nhan">
                <textarea cols="100" rows="10" placeholder="hello anh em"></textarea>
            </form>
            <div class="clearfix"></div>
        <div class="avatar">
            <img class="avatar_image" src="http://static.tvtropes.org/pmwiki/pub/images/AverageMan1.jpg" alt="photo avatar">
            <h4>MY NAME IS ABC</h4>
        </div>
        <div class="clearfix"></div>
        <div class="info">
            <div>
                SĐT: 09-999-999-999
            </div>
            <div>
                Địa chỉ: số 1, quận 2
            </div>
            <div>
                Email: blogtest@gmai.com
            </div>
        </div>
    </div>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

Source code CSS


*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html{
    font-family: 'Lato', sans-serif;
}

h1, h2{
    color: purple;
}

h1{
    font-size: 80px;
    margin-bottom: 15px;
}

h2{
    font-size: 40px;
    margin-bottom: 15px;
}

p{
    margin-bottom: 10px;
}

.container{
    width: 1140px;
    margin: 0 auto;
    background-color: lavender;
    padding: 0 20px;
}
.content{
    width: 75%;
    float: left;
}

form{
    width: 25%;
    float: left;
}

input, textarea{
    display: block;
}

input{
    margin: 20px;
    width: 200px;
    padding: 10px 20px;
}

textarea{
    width: 200px;
    margin-left: 20px;
    padding: 20px;
}
.clearfix::after{
    content: "";
    display: table;
    clear: both;
}

.avatar_image{
    border-radius: 50%;
    width: 100px;
    height: 100px;
    float: left;
}

h4{
    float: left;
    margin-top: 40px;
    margin-left: 40px;
}

.info{
    margin-top: 20px;
    padding-bottom: 30px;
}

.date{
    position: relative;
     left: 200px
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

Trang Blog hoàn thiện

Qua phần đầu tiên của khóa học thì chúng ta đã được tìm hiểu về cú pháp HTML và CSS cùng 1 số thuộc tính của CSS và HTML hay gặp, qua đó đã có đủ kiến thức nền tảng đi vào phần sau của khóa học đó chính là tạo web landing page, dự án thực tế đã được giới thiệu ở đầu khóa học

Kết luận

Ở trong bài học này chúng ta đã cùng nhau hoàn thiện xong trang Blog của chúng ta.

Ở bài sau, chúng ta sẽ cùng đi vào những bước chuẩn bị cho việc thực hiện dự án thực tế, và sẽ được giới thiệu về 1 công cụ hỗ trợ đắc lực cho web designer, đó chính là google dev tool. Nhớ theo nội dung tiếp theo WIREFRAME, SET UP FOLDER nhé!

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: “Luyện tập - Thử thách - Không ngại khó”.

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Hoàn thiện trang Blog dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK

Nội dung bài viết

Dẫn nhập
Nội dung
Source code HTML
Source code CSS
Trang Blog hoàn thiện
Kết luận
Tải xuống
- Tài liệu
Thảo luận

Tác giả/Dịch giả

Kteam

Khóa học

Lập trình Front End cơ bản với website Landing Page

Nếu bạn yêu thích lập trình web nhưng còn lơ ngơ không biết bắt đầu từ đâu hay đã biết cơ bản mà chưa làm được một sản phẩm nhất định nào, thì đây chính là khóa học dành cho bạn – LẬP TRÌNH FRONT END CƠ BẢN VỚI WEBSITE LANDING PAGE.

Trong phần này, Kteam sẽ giới thiệu cho các bạn về nội dung chúng ta sẽ được hướng dẫn cho khóa học này, cũng như là project mà chúng ta sẽ cùng nhau thực hiện.

Nào! Bắt đầu thôi!

Đánh giá

Midir reynard đã đánh giá 9 tháng trước

Báo cáo

hoahonggai1199 đã đánh giá 4 năm trước

Báo cáo

Hamoon240198 đã đánh giá 4 năm trước

Báo cáo

Đỗ Quốc Minh đã đánh giá 5 năm trước

Báo cáo

hadang89 đã đánh giá 5 năm trước

Báo cáo

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập

Ckientkan5 đã bình luận 4 năm trước

cai form của mình nó không chjay sang bên nhỉ

Trả lời Báo cáo

là lá là la đã bình luận 5 năm trước

:) Mấy anh cho em hỏi em là giống vd mà, chạy thì background-color trong container không là wed đổi màu, và border-radius: 50%; nó không làm tròn ảnh không biết sai chổ nào mong mọi người giúp đở

Trả lời Báo cáo

Hoàn thiện trang Blog

Lập trình Front End cơ bản với website Landing Page

Danh sách bài học