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

Trang web được tạo ra

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.

Các lớp trong photoshop

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.

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

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 đề

Tiêu đề trang web

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.

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

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

Bài đăng phổ biến từ blog này

Rơ Le Trung Gian Là Gì? Ký Hiệu Rơle Trung Gian? Cấu Tạo Và Nguyên Lý Làm Việc

Hình ảnh
Rơle trung gian có ứng dụng rất lớn trong thực tế cuộc sống. Chúng được tích hợp trong các bảng mạch điều khiển điện tử dân dụng và công nghiệp, có ưu điểm là cấu trúc nhỏ gọn, lắp đặt và thay thế thuận tiện, v.v. Hãy cùng tìm hiểu ký hiệu rơle trung gian và cấu tạo, nguyên lý của nó dưới đây nhé. Xem thêm: Tủ Điện Trung Thế Là Gì? Tổng Quan Về Tủ Điện Trung Thế   Rơle trung gian có ứng dụng rất lớn trong thực tế cuộc sống. Chúng được tích hợp trong các bảng mạch điều khiển điện tử dân dụng và công nghiệp, có ưu điểm là cấu trúc nhỏ gọn, lắp đặt và thay thế thuận tiện, v.v. Đối với các ứng dụng truyền tín hiệu hoặc dòng điện vài ampe, chúng ta có thể sử dụng rơ le trung gian. Đối với các ứng dụng yêu cầu dòng điện lớn hơn hàng chục ampe trở lên với máng hồ quang tích hợp, chúng ta phải sử dụng công tắc tơ. Xem thêm:  Rơ Le Trung Gian Là Gì? Ký Hiệu Rơle Trung Gian? Cách Kết Nối Rơle Trung Gian Tiêu Chuẩn Role trung gian là gì? Rơ le trung gian là thiết bị chuyển tín hiệu điều...
Đọc thêm

Cách Thức Hoạt Động Của Đèn Diệt Muỗi-Cấu Tạo Đèn Bắt Muỗi

Hình ảnh
Sản phẩm chống muỗi được các chuyên gia đánh giá cao về hiệu quả và độ an toàn khi cho trẻ sử dụng. Tuy nhiên, bạn có bao giờ thắc mắc đèn diệt muỗi hoạt động như thế nào không? Chúng được cấu tạo đèn bắt muỗi  như thế nào và làm thế nào để chúng có thể được lưu và sử dụng một cách hiệu quả? Cleanipedia sẽ giải đáp những thắc mắc này qua các bài viết sau: Xem thêm:  Cáp Là Gì, Cấu Tạo Dây Cáp Điện Gồm Mấy Phần Và Mục Đích Của Nó? Đèn diệt muỗi là thiết bị phát ra ánh sáng màu tím hoặc đỏ cam tùy thuộc vào từng loại đèn. Đèn có khả năng thu hút và diệt muỗi hiệu quả. Đặc biệt không giống như các loại nước hoa đuổi muỗi truyền thống, đèn diệt muỗi hoàn toàn không thải ra chất hóa học nên hoàn toàn có thể bảo vệ sức khỏe cho người sử dụng. Tham khảo: Dây Nguồn Là Gì?Cấu Tạo Dây Dẫn Điện Của Dây Dẫn Điện Cấu tạo đèn bắt muỗi Đèn diệt muỗi có 2 bộ phận chính, một là lồng đèn thu hút muỗi, hai là đèn diệt muỗi. Thiết bị kiểm soát muỗi có thể là quạt hút hoặc lưới điện. Đèn diệt muỗi...
Đọc thêm

Ý Nghĩa Các Ký Hiệu Máy Phát Điện

Hình ảnh
Một số nguy cơ có thể xảy ra nếu người dùng không thực hiện đúng hướng dẫn cảnh báo của nhà sản xuất. Dưới đây, chúng tôi cung cấp cho bạn một số hình ảnh minh họa về các cảnh báo chung về máy phát điện Honda để bạn tham khảo khi sử dụng máy như về ý nghĩa và ký hiệu máy phát điện . Tìm hiểu: Tủ Điện Công Nghiệp Là Gì? Tìm Hiểu Chi Tiết Về Tủ Điện Công Nghiệp   Các ký hiệu máy phát điện Honda trên máy Ký hiệu máy phát điện - Để đảm bảo hệ số an toàn khi sử dụng máy phát điện, hầu hết các sản phẩm máy phát điện đều có các ký hiệu cảnh báo về điện trên thân sản phẩm máy phát điện. Khi sử dụng máy phát, người dùng cần tuân thủ nghiêm ngặt hướng dẫn của nhà sản xuất, điều này không chỉ đảm bảo an toàn cho người sử dụng mà còn đảm bảo chất lượng và độ bền của máy. Xem thêm:  Ký Hiệu Màu Dây Điện Là Gì? Các Tiêu Chuẩn Quy Ước Màu Là Gì? Dấu hiệu cảnh báo nguy hiểm đối với khí thải của máy phát điện Honda Tham khảo:  Cấu Tạo, Nguyên Lý Làm Việc Và Ký Hiệu Máy Biến Áp Khí thải từ...
Đọc thêm