Hướng dẫn lập trình web cho người mới bắt đầu
Bạn đã bao giờ nghĩ đến việc tạo một trang web chưa? Có thể bạn đã đọc một số hướng dẫn về HTML và CSS, nhưng không biết cách sử dụng các ngôn ngữ này trong các dự án lớn hơn. Bài viết này sẽ hướng dẫn bạn quá trình tạo một trang web hoàn chỉnh từ đầu. Đừng lo lắng, sau đây chúng tôi sẽ Hướng dẫn lập trình web.
Tham khảo: Tủ Điện Trung Thế Là Gì? Tổng Quan Về Tủ Điện Trung Thế
Bạn sẽ tạo trang web này bằng HTML, CSS và JavaScript và jQuery. Các mã này hoạt động tốt trong hầu hết các trình duyệt hiện đại.
Xem thêm: Hướng dẫn lắp ổ cắm Panasonic đơn giản và an toàn
Hướng dẫn lập trình web
Đây là thiết kế của trang web này. Bạn có thể tải toàn bộ dự án tại đây.
Trang web này được thiết kế cho một công ty hư cấu trong Adobe Photoshop CC 2017. Nếu bạn quan tâm, hãy đảm bảo lấy tệp .PSD từ gói tải xuống. Đây là những gì bạn nhận được trong một tệp Photoshop:
Tham khảo: Hướng dẫn lập trình knx Hỗ trợ thông minh
Trong tệp PSD, bạn sẽ tìm thấy tất cả các lớp được nhóm, đặt tên và mã hóa màu.
Bạn sẽ cần cài đặt một số phông chữ. Đầu tiên là Font Awesome cho tất cả các biểu tượng. Hai phông chữ còn lại là PT Serif và Myriad Pro (có trong Photoshop). Nếu bạn không có Photoshop, đừng lo lắng, bạn không cần nó để tạo một trang web.
Tìm hiểu: Cách Thức Hoạt Động Của Đèn Diệt Muỗi-Cấu Tạo Đèn Bắt Muỗi
mã gốc
Bây giờ thiết kế đã rõ ràng, hãy bắt đầu viết mã. Tạo một tệp mới trong trình soạn thảo văn bản yêu thích của bạn. Lưu nó dưới dạng index.html. Bạn có thể đặt tên cho nó bất cứ điều gì bạn muốn, lý do nhiều trang được gọi là chỉ mục là do cách máy chủ hoạt động. Cấu hình mặc định của hầu hết các máy chủ là phục vụ trang index.html nếu không có trang nào được chỉ định.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Noise Media</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* CSS goes here, at the top of the page */
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/* JavaScript goes here, at the bottom of the page */
</script>
</body>
</html>
Đoạn mã trên thực hiện một số điều:
Chỉ định HTML tối thiểu được yêu cầu.
Chỉ định tiêu đề trang Phương tiện tiếng ồn
Tìm hiểu thêm: Nguyên Nhân Nhảy Aptomat Liên Tục Và Cách Khắc Phục Hiệu Quả
Bao gồm jQuery được lưu trữ trên Google CDN.
Bao gồm Font Awesome được lưu trữ trên Google CDN.
Xác định các thẻ kiểu để viết CSS.
Xác định thẻ script để viết JavaScript.
Lưu tệp và mở nó trong trình duyệt web của bạn.
Lưu ý rằng tiêu đề trang là phương tiện nhiễu. Điều này được xác định bởi văn bản bên trong thẻ tiêu đề. Thẻ này nằm bên trong thẻ tiêu đề.
Tiêu đề
Hãy bắt đầu với thanh màu xám nhỏ ở trên cùng. Nó có màu xám nhạt với một chút xám đậm bên dưới.
Thêm HTML này vào bên trong thẻ body ở đầu trang:
<div id="top-bar"></div>
Hãy phân tích đoạn mã trên. Một div giống như một cái hộp chứa những thứ khác. Những "thứ khác" này có thể là nhiều vùng chứa, văn bản, hình ảnh hoặc bất kỳ thứ gì khác. Có một số hạn chế khi thêm một số thẻ nhất định, nhưng div là những thứ khá chung chung. Nó có một id của thanh trên cùng. Điều này sẽ được sử dụng để tạo kiểu CSS và định vị JavaScript nếu cần. Đảm bảo rằng bạn chỉ có một phần tử với một ID cụ thể - chúng phải 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. Đây là CSS bạn cần để trang trí nó (được đặt ở đầu thẻ style):
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 ý việc sử dụng các ký hiệu (#, thẻ bắt đầu bằng #, ký hiệu £) trước tên. Điều này có nghĩa là phần tử là một ID. Nếu bạn đang sử dụng một lớp, bạn sẽ sử dụng dấu chấm (.). các thẻ html và body không có phần đệm và lề. Điều này ngăn chặn mọi vấn đề về khoảng cách không cần thiết.
Đã đến lúc chuyển sang logo và thanh điều hướng. Trước khi bắt đầu, bạn sẽ cần một hộp đựng để đặt những thứ này vào. Hãy tạo một lớp (để bạn có thể sử dụng lại nó sau này) và vì đây không phải là một trang web đáp ứng, hãy đặt nó rộng 900px.
<div class="normal-wrapper">
</div>
Thật khó để biết điều gì đang xảy ra cho đến khi mã hoàn tất, vì vậy sẽ rất hữu ích nếu bạn thêm hình nền có màu (tạm thời) để xem điều gì đang xảy ra:
.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}
Bây giờ bạn có thể tạo một logo. Các biểu tượng yêu cầu Font Awesome. Font Awesome là một tập hợp các biểu tượng được đóng gói dưới dạng phông chữ vectơ. Đoạn mã gốc ở trên đã được thiết lập Font Awesome, vì vậy mọi thứ đã được thiết lập.
Thêm HTML này vào bên trong div trình bao bọc bình thường:
<div id="logo-container">
<i class="fa fa-volume-down logo-icon"></i> <h1>Noise Media</h1>
</div>
CSS:
.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}
Đừng lo lắng về các phông chữ khác không phù hợp cho thiết kế web. Nếu bạn muốn sử dụng một biểu tượng khác, hãy truy cập trang Font Awesome Icons và thay đổi fa-volume-down thành tên của biểu tượng bạn muốn sử dụng.
Di chuyển trên thanh điều hướng và bạn sẽ sử dụng danh sách không có thứ tự (UL) cho mục này. Thêm mã HTML sau vùng chứa biểu trưng (nhưng vẫn ở bên trong trình bao bọc bình thường):
<ul id="navbar">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Reviews</a></li>
<li><a href="" class="last-link" >Contact</a></li>
</ul>
Hrefs được sử dụng để liên kết đến các trang khác. Trang web hướng dẫn này không có bất kỳ trang nào khác, nhưng bạn có thể thêm tên tệp và đường dẫn (nếu cần) tại đây, chẳng hạn như reviews.html. Đảm bảo đặt nó bên trong dấu ngoặc kép.
Đây là CSS:
#navbar {
list-style-type: none; /* remove bullet points */
margin: 29px 0 0 0;
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: 0 16px 0 10px; /* 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 danh sách không có thứ tự. Sau đó, sử dụng list-style-type: none; để xóa các dấu đầu dòng. Các liên kết hơi tách biệt và có màu khi bạn di chuột qua chúng. Đường phân cách nhỏ màu xám là đường viền ở bên phải của mỗi phần tử, sau đó được xóa làm phần tử cuối cùng bằng cách sử dụng lớp liên kết cuối cùng.
Phần còn lại của phần này là đường ngang màu đỏ. Thêm mã HTML này sau trình bao bọc bình thường:
<div id="top-color-splash"></div>
Điều này hoàn thành phần tiêu đề. Nó trông như thế này.
#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}
chân trang
Điều cuối cùng cần làm là footer. Nó thực sự đơn giản vì nó chỉ là một vùng màu xám không có văn bản. Thêm HTML sau trình bao bọc bình thường trong vùng biểu tượng.
#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /*
dark gray "topline" */
height: 150px;
}
Với Hướng dẫn lập trình web của chúng tôi, chúc bạn thành công!
Bạn đang xem bài viết Hướng dẫn lập trình web cho người mới bắt đầu
Mọi thông tin chi tiết liên hệ Max Electric VN
Nhận xét
Đăng nhận xét