TRENDING
Hoclamweb.com.vn
  • Trang Chủ
  • Case Study làm web
  • Khóa học làm web
  • Kiến thức kinh doanh
  • Kiến thức SEO web
  • Plugin cho website
  • Trang Chủ
  • Case Study làm web
  • Khóa học làm web
  • Kiến thức kinh doanh
  • Kiến thức SEO web
  • Plugin cho website
Trang chủ Thiết kế trang web

Tổng hợp cách viết một trang web đơn giản mới nhất 2020

Bởi ATPMedia
17/11/2019
Cách Viết Một Trang Web đơn Giản

Cách viết một trang web đơn giản là một trong những từ khóa được gg search nhiều nhất về chủ đề cách viết một trang web đơn giản . Trong bài viết này, hoclamweb.vn sẽ viết bài viết Tổng hợp cách viết một trang web đơn giản.

Cách Viết Một Trang Web đơn Giản

Tổng hợp cách viết một trang web đơn giản mới nhất 2020

thiết kế web

Đây là design cho website này. Bạn đủ sức tải all dự án tại đây.

Trang web được tạo ra

website này được design cho một doanh nghiệp hư cấu trong Adobe Photoshop CC 2017. Nếu bạn để ý, hãy dĩ nhiên rằng bạn quét tập tin .PSD từ gói tải về. Dưới đây là những gì bạn nhận được trong tệp photoshop:

Tệp photoshop

Bên trong file PSD, bạn sẽ tìm thấy all các lớp được group, đặt tên và mã màu.

Các lớp trong photoshop

Bạn sẽ cần cài đặt một vài phông chữ. trước tiên là Font Awesome được sử dụng cho all các icon. Hai phông không giống là PT Serif và Myriad Pro (đi kèm với Photoshop). Đừng sợ nếu bạn không có Photoshop, bạn không cần nó để đủ nội lực tạo một web.

Tham khảo: 7 cách cải thiện tỷ lệ thoát bounce rate cho website của bạn

Code ban đầu

hiện nay thiết kế đã rạch ròi, hãy khởi đầu viết code. Tạo một tập tin mới trong trình soạn thảo văn bản ưa chuộng của bạn. Lưu mục này dưới dạng index.html. Bạn có thể đặt bất cứ tên gì bạn mong muốn, nguyên do nhiều trang được gọi là index là do phương pháp máy chủ sử dụng việc. Cấu hình mặc định cho phần đông các máy chủ là để giúp sức trang index.html nếu không có trang được chỉ định.

Đây là code bạn cần:


charset="UTF-8">

Noise Mediarel="stylesheet"type="text/css"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Code trên thực hiện một số điều sau:

  • dựng lại HTML tối thiểu cần thiết.
  • định hình tittle trang “Noise Media”
  • bao gồm jQuery được host trên Google CDN.
  • bao gồm Font Awesome được hosting trên Google CDN.
  • định hình một thẻ style để viết CSS.
  • định hình một thẻ script để viết JavaScript.

Lưu tệp và mở tệp trong trình duyệt web của bạn.

Chạy tệp trong trình duyệt

quan tâm tiêu đề trang là Noise Media. Điều này được định hình bởi văn bản bên trong thẻ tit. Thẻ này nằm bên trong các thẻ head.

tittle

Hãy tạo tiêu đề. tittle sẽ giống như ảnh bên dưới.

Tiêu đề trang web

Hãy khởi đầu với thanh xám nhỏ ở trên cùng. Đó là màu xám nhạt với một chút màu xám đậm bên dưới.

Thanh màu xám trên cùng trang

Thêm HTML này bên trong thẻ body ở đầu trang:

id="top-bar">

Hãy đánh giá code trên nhé. Div như một cái hộp chứa đựng những thứ khác. “Những thứ khác” này có thể là nhiều container, văn bản, pic, bất cứ thứ gì khác. Có một số hạn chế khi thích hợp các thẻ nhất định, nhưng các div là những thứ khá chung chung. Nó có một id của top-bar. Điều này sẽ được dùng để tạo kiểu với CSS và target mục đích bằng JavaScript nếu cần. Hãy dĩ nhiên rằng bạn chỉ có một phần tử với một id cụ thể – chúng nên là duy nhất. Nếu bạn muốn nhiều phần tử có cùng tên, hãy sử dụng class. Dưới đây là CSS bạn cần để trang trí nó (đặt ở trên đầu bên trong thẻ style):

Tham khảo: Gợi ý những chiến lược quảng cáo kỹ thuật số hiệu quả nhất năm 2019

html, body  margin:0; padding:0; font-family:'Helvetica','Arial';/* initial fonts */#top-bar   width:100%; background:#F1F1F1; /* light gray */  border-bottom:1px solid #D4D4D4; /* dark gray "underline" */  height:25px;

lưu ý mẹo dùng các dấu (#, thẻ hashtag, ký hiệu £) trước tên. Điều này có nghĩa rằng phần tử là một ID. Nếu đang sử dụng một lớp, bạn sẽ dùng một dấu chấm (.). Các html và các thẻ body có padding và margin bằng không. Điều này ngăn ngừa bất kỳ chủ đề khoảng cách k mong muốn nào.

đang đến lúc chuyển sang logo và thanh điều hướng. Trước khi khởi đầu, bạn cần có một container để mang nội dung này. Hãy tạo một lớp (như vậy bạn có thể sử dụng lại nó sau này), và vì đây không hề là một web có độ phản hồi cao (responsive website), hãy để chiều rộng của nó là 900 pixels.

HTML:

class="normal-wrapper">

CSS:

.normal-wrapper  width:900px; margin:0auto; padding:15px40px; background: red; overflow:tự động;

Khó có thể nói những gì đang diễn ra cho đến khi bạn hoàn thiện code, vì vậy sẽ rất hữu ích nếu thêm một ảnh nền màu (tạm thời) để xem điều gì đang xảy ra:

background: red;

bây giờ, bạn có thể tạo logo. Font Awesome là cần thiết cho icon. Font Awesome là một bộ các icon được đóng gói như một phông chữ vector. Code ban đầu ở trên vừa mới được thiết lập Font Awesome, do đó toàn bộ vừa mới sẵn sàng.

Thêm HTML này bên trong normal-wrapper div:

id="logo-container">class="fa fa-volume-down logo-icon">

Noise Media

CSS:

.logo-icon  color:#000000;  font-size:60pt;float: left;h1 float: left; margin:21px0025px;

Đừng sợ về các phông chữ khác k thêm vào với design web. Nếu bạn mong muốn dùng các icon không giống nhau, hãy vào trang Font Awesome Icons, sau đó thay đổi fa-volume-down thành tên icon bạn mong muốn dùng.

Di chuyển trên thanh điều hướng, bạn sẽ sử dụng một danh sách không có thứ tự (UL) cho mục này. Thêm mã HTML sau logo-container (nhưng luôn luôn nằm trong normal-wrapper):

id="navbar">
  • href=””>Home
  • href=””>About
  • href=””>Reviews
  • href=””class=”last-link”>Contact

Href được sử dụng để liên kết đến các trang không giống. web tut này k có bất kỳ trang nào khác, nhưng bạn đủ nội lực thêm tên và đường dẫn tệp (nếu cần) ở đây, ví dụ: reviews.html. Hãy chắc chắn rằng bạn đặt nó bên trong hai dấu ngoặc kép.

Đây là CSS:

#navbar   list-style-type: none;/* remove bullet points */ margin:29px000; padding:0;float: right; font-size:16pt;#navbar li   display:inline;/* make items horizontal */#navbar li a:link, #navbar li a:visited, #navbar li a:active   text-decoration: none;/* remove underline */ color:#000000;  padding:016px010px;/* space links apart */ margin:0; border-right:2px solid #B4B4B4; /* divider */#navbar li a:link.last-link  /* remove divider */ border-right:0px;#navbar li a:hover  /* change color on hover (mouseover) */ color:#EB6361;

CSS này bắt đầu với một unordered list. Sau đó, loại bỏ các chấm đầu định dạng bằng phương pháp dùng list-style-type: none;. Các liên kết được phân hướng dẫn nhau một chút và hiện màu khi bạn di chuột qua chúng. Dải phân hướng dẫn màu xám nhỏ là đường viền bên phải mỗi phần tử, sau đó sẽ được loại bỏ so với phần tử cuối cùng bằng hướng dẫn dùng lớp last-link.

Nhấp chuột qua tiêu đề hiển thị màu

toàn bộ những gì còn lại của phần này là đường màu đỏ nằm ngang. Thêm code HTML này sau normal-wrapper:

id="top-color-splash">

CSS:

#top-color-splash   width:100%; height:4px; background:#EB6361;

Vậy là phần đầu bài vừa mới xong. Nó sẽ trông như thế này.

Tiêu đề trang web hoàn chỉnh

IFrame

Khu vực content chính

đã đến lúc chuyển sang phần nội dung chính. Nó sẽ như thế này:

Khu vực nội dung chính

Đây là một phần khá không khó khăn, phần chữ bên trái với một pic bên phải. Phần này sẽ được chia thành 3 phần, gần bằng phần trăm vàng.

Tham khảo: Thiết kế website bán hàng hiệu quả

Thêm HTML sau phần tử top-color-splash:

class="normal-wrapper">class="one-third">class="no-margin-top">Welcome!

Noise Media is a technology company specialising in tech reviews.

We’re very good at what we do, but unfortunately, we are not a real company.

Make sure you visit makeuseof.com for the full tutorial on how to build this web.

Alternatively, test out our review of the Panasonic G80 shown on the right!

class="two-third">class="featured-image"src="Image_1.jpg"/>

quan tâm hướng dẫn phần tử normal-wrapper trở lại (đó là niềm vui khi dùng các lớp). Bạn đủ sức tự hỏi vì sao thẻ pic (img) không đóng. Đây là một thẻ tự đóng. Dấu gạch chéo lên (/>) giải thích điều này vì nó chẳng phải lúc nào cũng có ý nghĩa là đóng một thẻ.

CSS:

.one-third  width:40%;float: left; box-sizing: border-box;/* ensure padding and borders do not increase the size */ margin-top:20px;.two-third  width:60%;float: left; box-sizing: border-box;/* ensure padding and borders do not increase the size */ padding-left:40px; text-align: right; margin-top:20px;.featured-image  max-width:500px;/* reduce hình ảnh size while maintaining aspect ratio */.no-margin-top  margin-top:0;/* remove margin on things like headers */

Các tính chất cần thiết nhất ở đây là box-sizing: border-box;. Điều này đảm bảo các phần tử luôn luôn có chiều rộng 40% hoặc 60%. Mặc định (không có tính chất này) là chiều rộng do bạn chỉ định cộng với bất kỳ padding, lề và đường viền nào. Lớp hình ảnh (featured-image) có chiều rộng tối đa (max-width) là 500px. Nếu bạn chỉ định một chiều (chiều rộng hoặc chiều cao) và để trống một chiều, css sẽ thay đổi click thước pic trong khi vẫn duy trì tỷ lệ khung hình.

Khu vực trích kéo

Hãy xây dựng khu vực trích dẫn. Nó sẽ trông giống như thế này:

Khu vực trích dẫn

Đây là một phần đơn giản. Nó chứa một nền màu xám đậm, với chữ màu trắng ở trung tâm.

Thêm HTML này sau normal-wrapper:

id="quote-area">class="normal-wrapper">

“makeuseof is the best website ever”

Joe Coburn

CSS:

#quote-area   background:#363636;  color:#FFFFFF;  text-align: center; padding:15px0;h3  font-weight: normal; font-size:20pt; margin-top:0px;h4  font-weight: normal; font-size:16pt; margin-bottom:0;

Bạn cần điều chỉnh kích thước phông chữ, khoảng hướng dẫn, v.v… pic bên dưới trông gần giống với một web.

Phần nội dung chính và trích dẫn

Phần icon

Đây là khu vực tiếp theo cần tạo:

Khu vực icon

Phần này sẽ sử dụng một số lớp. Ba icon hầu như giống nhau, ngoại trừ nội dung, cho nên nên sử dụng các lớp thay vì id. Thêm HTML này sau quote-area:

class="normal-wrapper">class="icon-outer">class="icon-circle">class="fa fa-youtube logo-icon">
YouTube

Checkout our YouTube channel for more tech reviews, tutorials and giveaways!

class="icon-outer">class="icon-circle">class="fa fa-camera-retro logo-icon">
Reviews

If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.

class="icon-outer">class="icon-circle">class="fa fa-dollar logo-icon">
Buying Guides

At Buying Guides we strive lớn provide readers with the tools to quét the best stuff for the lowest amount of money.

Ba icon này cũng là Font-Awesome. HTML lại một lần nữa dùng lớp normal-wrapper.

Đây là CSS:

.icon-outer  box-sizing: border-box;/* ensure padding and borders do not increase the size */float: left; width:33.33%; padding:25px; margin:0; text-align: center;.icon-circle  background:#EEEEEE;  color:#B4B4B4;  width:200px; height:200px; border-radius:200px;/* make rounded corners */ margin:0tự động; border:2px solid #D6D6D6;  box-sizing: border-box;/* ensure padding and borders do not increase the size */ font-size:75pt; padding:30px000; cursor: pointer;.icon-circle:hover /* change color on hover (mouseover) */ color:#FFFFFF;  background:#EB6361;h5  margin:15px010px0; font-size:20pt;

Có một vài điều mới trong CSS. Các hình trong icon được thiết lập bởi border-radius: 200px;. Đặt giá trị giống nhau cho chiều rộng để có được các ảnh tròn bằng nhau. Bạn đủ sức sử dụng giảm kích thước nếu muốn tạo phần ảnh vuông chứa hình tròn rộng hơn. lưu ý mẹo di chuyển chuột được áp dụng cho các div – nó không chỉ giới hạn trong các liên kết.

Tạo liên kết icon

Chân trang

Điều cuối cùng cần sử dụng là chân trang. Điều này thực sự rất không khó khăn, vì nó chỉ là một vùng màu xám không có văn bản. Thêm HTML sau normal-wrapper của khuc vực icon.

id="footer">

CSS:

#footer   width:100%; background:#F1F1F1; /* light gray */  border-top:1px solid #D4D4D4; /*  dark gray "topline"*/ height:150px;

Thêm một số điều khiến cho web của bạn cuốn hút hơn

Vậy là phần viết code vừa mới xong. Bạn hoàn toàn đủ sức để website như vậy, đó là một trang web hoàn chỉnh. bên cạnh đó, bạn có thể đã nhận thấy rằng nó không giống như design. nguyên do chính là phông chữ được sử dụng.

Phông chữ được sử dụng cho hầu hết các tittle là Myriad Pro. Nó đi kèm với Adobe Create Cloud, nhưng nó k có sẵn giống như là một webfont. Phông chữ hiện được sử dụng trên website là Helvetica. Điều này có vẻ ổn, do đó bạn có thể để nó giống như hiện giờ là được, không những thế bạn có thể sử dụng PT Sans vì nó là một webfont. Phông chữ được dùng cho toàn bộ các văn bản là PT Serif, cũng là một webfont.

Cũng như đăng một phông chữ mới vào máy tính của bạn, các trang web đủ sức tải các phông chữ theo yêu cầu. Một trong những cách tốt nhất để thực hiện việc này là thông qua phông chữ của Google.

Thêm CSS này để chuyển sang các phông chữ tốt hơn:

@import url('https://fonts.googleapis.com/css?family=PT+Sans');@import url('https://fonts.googleapis.com/css?family=PT+Serif');h1, h2, h4, h5, h6  font-family:'PT Sans','Helvetica','Arial';

hiện nay sửa đổi các phần tử html và body để dùng phông chữ mới:

font-family:'PT Serif','Helvetica','Arial';

note rằng phần tử h3 k nằm trong danh mục, điều này sẽ mặc định là PT-Serif thay vì PT-Sans.

không những thế, bạn đủ nội lực sử dụng một số JavaScript để cuộn qua ba hình ảnh khác nhau. Bạn sẽ cần Image_2 và Image_3 cho phần này và một lần nữa, đây là phần tùy lựa chọn. website đã đầy đủ tính năng tại thời điểm này mà k cần tính năng này. Nó sẽ như thế:

Thay đổi nhiều hình ảnh

Sửa đổi HTML của bạn để bao gồm ba pic không giống nhau. quan tâm hai trong số ba pic này có lớp CSS ẩn. Mỗi hình ảnh vừa mới được phân phối một ID do vậy JavaScript đủ sức định hình từng ảnh trong số chúng một phương pháp độc lập.

class="two-third">id="f-image-1"class="featured-image"src="Image_1.jpg"/>id="f-image-2"class="featured-image hidden"src="Image_2.jpg"/>id="f-image-3"class="featured-image hidden"src="Image_3.jpg"/>

Đây là CSS cần để ẩn hình ảnh:

.hidden  display: none;

Giờ đây, HTML và CSS đang xong, chúng ta hãy chuyển qua JavaScript. Bạn nên có một chút hiểu biết về hiểu mô hình thị trường tài liệu (Document Object Model, DOM) cho phần này, tuy nhiên nó chẳng hề là yêu cầu.

Tìm khu vực script ở cuối trang:

Thêm JavaScript sau vào bên trong thẻ script:

/* JavaScript goes here, at the bottom of the page */$(document).ready(function()// run once the page is ready var time =2500;// lấy the image containers  $im1 = $('#f-image-1'); $im2 = $('#f-image-2'); $im3 = $('#f-image-3'); setInterval(function()// call function every x milliseconds (defined in time variable above)  changeImage();, time);var currentImage =1;function changeImage()switch(currentImage)case1:// show image 2  $im1.hide(); $im2.show(); $im3.hide(); currentImage =2;break;case2:// show hình ảnh 3  $im1.hide(); $im2.hide(); $im3.show(); currentImage =3;break;default:// show image 1  $im1.show(); $im2.hide(); $im3.hide(); currentImage =1;);

Code được chứa bên trong $(document).ready(). Điều này có nghĩa là nó sẽ chạy một khi trình duyệt của bạn đã hoàn thiện hiển thị trang. Hàm setInterval() được sử dụng để gọi hàm changeImage() với một khoảng thời gian định trước bằng mili giây (1000 mili giây = 1 giây). Điều này được lưu trữ trong biến time. Bạn có thể tăng trưởng hoặc giảm để tăng tốc hoặc làm chậm quá trình cuộn. Cuối cùng, một câu lệnh dễ dàng được dùng để hiển thị các pic khác nhau và theo dõi hình ảnh đang hiển thị.

Vậy là bạn vừa mới biết phương pháp xây dựng một web dễ dàng. Hy vọng rằng bạn vừa mới học được rất nhiều trong quá trình này. Nếu bạn thích thử thách và muốn mang những skill mới vào trải nghiệm, tại sao không thử thực hiện những sửa đổi này:

  • Thêm chân trang: Thêm một số văn bản vào chân trang (gợi ý: bạn đủ sức sử dụng lại lớp normal-wrapper và one-third/two-third).
  • refresh việc di chuyển pic: Chỉnh sửa mã JavaScript để click hoạt các thay đổi pic (gợi ý: xem fadein và animate của jQuery)
  • Thực hiện nhiều trích dẫn: Sửa đổi các trích kéo để refresh các trích kéo khác nhau (gợi ý: nhìn thấy code cuộn hình ảnh).
  • xây dựng một máy chủ: xây dựng một máy chủ và send dữ liệu giữa website và máy chủ (tìm hiểu về JSON và Python).

Chúc các bạn thực hiện thành công!

Nguồn: https://quantrimang.com/

Liên QuanBài Viết

Thiết kế website nội thất: Những tính năng quan trọng bắt buộc phải có?
Kiến thức Website

Thiết kế website nội thất: Những tính năng quan trọng bắt buộc phải có?

26/12/2022
Thiết kế website chuyên nghiệp cao cấp chuẩn UX/UI tại Miko Tech
Thiết kế trang web

Thiết kế website chuyên nghiệp cao cấp chuẩn UX/UI tại Miko Tech

22/02/2022
Đơn vị thiết kế website bán hàng chuyên nghiệp, chuẩn SEO
Thiết kế trang web

Đơn vị thiết kế website bán hàng chuyên nghiệp, chuẩn SEO

03/08/2021
Tu Thiet Ke Website C27f9d7ba4744637aeaa95764247ce9c
Thiết kế trang web

Cách tạo web cá nhân trên Google miễn phí và chuyên nghiệp

11/03/2021
Thiet Ke Web Theo Yeu Cau Gia Re 2 (1)
Thiết kế trang web

Thiết kế web theo yêu cầu giá rẻ tại Bizfly Smart Web có gì tốt?

11/03/2021
Bai Web1
Kĩ năng nghề nghiệp

Hướng dẫn tích hợp Chat Facebook vào Landing Page

24/09/2020
Bài Viết Tiếp Theo
Cách Vào Wordpress Khi Bị Chặn

Hướng dẫn cách vào wordpress khi bị chặn mới nhất 2020

Bài Viết Mới

Máy tính – máy in Hoàng Hà – nơi cung cấp dịch vụ đổ mực máy in giá rẻ, chất lượng 

Máy tính – máy in Hoàng Hà – nơi cung cấp dịch vụ đổ mực máy in giá rẻ, chất lượng 

09/01/2023
Thiết kế website nội thất: Những tính năng quan trọng bắt buộc phải có?

Thiết kế website nội thất: Những tính năng quan trọng bắt buộc phải có?

26/12/2022
Cần thuê nhà trọ TP.HCM tìm ở đâu? Top nhà trọ uy tín giá từ 1 – 3tr

Cần thuê nhà trọ TP.HCM tìm ở đâu? Top nhà trọ uy tín giá từ 1 – 3tr

25/11/2022
Giao diện website là gì? Để một giao diện đẹp ấn tượng cần những yếu tố nào 

Giao diện website là gì? Để một giao diện đẹp ấn tượng cần những yếu tố nào 

25/11/2022
Lối đi nào cho Marketing Dược phẩm phát triển trong tình hình hiện nay?

Lối đi nào cho Marketing Dược phẩm phát triển trong tình hình hiện nay?

25/11/2022
Cách để bảo vệ doanh nghiệp từ DDos và hậu quả của việc tấn công DDoS

Cách để bảo vệ doanh nghiệp từ DDos và hậu quả của việc tấn công DDoS

23/11/2022

Bài viết mới

  • Máy tính – máy in Hoàng Hà – nơi cung cấp dịch vụ đổ mực máy in giá rẻ, chất lượng 
  • Thiết kế website nội thất: Những tính năng quan trọng bắt buộc phải có?
  • Cần thuê nhà trọ TP.HCM tìm ở đâu? Top nhà trọ uy tín giá từ 1 – 3tr
  • Giao diện website là gì? Để một giao diện đẹp ấn tượng cần những yếu tố nào 
  • Lối đi nào cho Marketing Dược phẩm phát triển trong tình hình hiện nay?

HỌC LÀM WEB

Hoclamweb.com.vn là một website tổng hợp kiến thức làm web cho người mới bắt đầu, chia sẻ về kiến thức làm web, plugin hỗ trợ thiết kế web, kiến thức SEO cho website đầy đủ nhất.

Chuyên mục

  • Case Study
  • Tài Liệu PDF
  • Kiến Thức SEO
  • Plugin Cho Website
  • Khóa Học Làm Web
  • Kiến Thức Kinh Doanh

Phần mềm - Công cụ

  • Brands
  • Alosoft
  • Seeding
  • Top Việc
  • Tổng Hợp
  • Quản Trị Nhân Sự

Liên kết

  • Xe Mô Tô
  • Quản Lý Kho
  • Blog Việc Làm
  • Giải Pháp Việc Làm
  • Phần Mềm Miễn Phí
  • Cách khai báo sitemap

© 2019 | Thiết Kế bởi ATP MEDIA

  • Trang Chủ
  • Case Study làm web
  • Khóa học làm web
  • Kiến thức kinh doanh
  • Kiến thức SEO web
  • Plugin cho website

Hoclamweb.com.vn là một website tổng hợp kiến thức làm web cho người mới bắt đầu, cổng thông tin về kiến thức làm web, plugin hỗ trợ thiết kế web, kiến thức SEO cho website đầy đủ nhất.