How do we build a website
Creation method:
HTML+CSS+JS
Compiler:Vscode
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
</body>
</html>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- The declaration defines
that this document is an HTML5 document
<!DOCTYPE html> - The element is the root element of an HTML
page
<html> - The element contains meta information about the
HTML page
<head> - The element specifies a title for the
HTML page (which is shown in the browser's title bar or in the page's tab)
<title> - The element defines the
document's body, and is a container for all the visible contents, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.
<body> - The element defines a large heading
<h1> - The element defines a paragraph
<p>
Framework writing
Arrange the frame of the page in Vscode, divide the area of each element, and fill in the content of the page.
Style
In Vscode, by writing css files, beautify the visual effects of the entire page
Website deployment
Deploy the written website to our course's Github library using git
Code block highlighting
1.Add highlight.js Scripts With HTML
You can easily add the necessary scripts to any HTML page for which you have edit access.Step 1. Open your HTML file in a text editor
Step 2. Add scripts to section using the provided CDN links:head
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
Step 3.Make sure to add the initiation script
<script>hljs.initHighlightingOnLoad();</script>
Step 4.Save your file
2.Use md file conversion plug-in “Markdown PDF” in VS Code
First, write the code to a markdown file
like:
```c
int sensorPin = A0;
```
Then, right-click in the md file and click
"Markdown PDF:Export (html)"
You will then get an HTML file with the highlighted code
Reference：
1. https://www.w3schools.com/html/html_intro.asp
2. https://www.cnblogs.com/suwanbin/p/13387649.html
3. https://www.sojson.com/rehtml
The following is the main code of the page
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Allright Group</title>
<meta name="description" content="A free html template with Sketch design made with Bootstrap">
<meta name="keywords" content="free html template, bootstrap, ui kit, sass" />
<meta name="author" content="Codrops" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="img/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#66e0e5">
<meta name="msapplication-TileImage" content="img/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="img/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/flickity.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
and the body
<body>
<div class="container-fluid">
<div class="row">
<div class="header-nav-wrapper">
<div class="logo">
<a href="index.html"><img src="img/synthetica-logo.png" height=50px alt="Synthetica Freebie"></a>
</div>
<div class="primary-nav-wrapper">
<nav>
<ul class="primary-nav">
<li><a href="#freebies">Home</a></li>
<li><a href="#team">Team Introduction</a></li>
<li><a href="#articles">Course Progress</a></li>
<li><a href="#articles">Final project</a></li>
</ul>
</nav>
</div>
<div class="navicon">
<a class="nav-toggle" href="#"><span></span></a>
</div>
</div>
</div>
</div>
<header class="hero">
<div class="carousel js-flickity">
<div class="carousel-cell" style="background-image: url(img/hero-bg-01.jpg);">
<div class="hero-bg">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1 class="wp1">We'are Allright Group!</h1>
<a href="#intro" class="btn primary wp2">Learn more</a>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2 hero-intro-text wp3">
<p>Six little bees are working hard for the children to have a happy childhood ~ </p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-cell" style="background-image: url(img/hero-bg-02.jpg);">
<div class="hero-bg">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1 class="wp1">Projects 1</h1>
<a href="" class="btn primary wp2">Learn more</a>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2 hero-intro-text wp3">
<p>Project Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-cell" style="background-image: url(img/hero-bg-03.jpg);">
<div class="hero-bg">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1 class="wp1">Projects 2</h1>
<a href="http://sc.chinaz.com/?codrops/?p=26570" class="btn primary wp2">Learn more</a>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2 hero-intro-text wp3">
<p>Project Description</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='mouse-container'>
<a href="#intro">
<div class='mouse'>
<span class='scroll-down'></span>
</div>
</a>
</div>
</header>
<section class="crew has-padding alternate-bg" id="team">
<div class="container">
<div class="row">
<div class="col-md-12">
<h4>Team Introduction</h4>
</div>
</div>
<br class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="crew-member" style="background-image: url(img/tupian.png)">
<figure>
<figcaption class="overlay">
<h2>Ding Shiying</h2>
<p>听松卧雪苦行舟，不染人间桃李花</p>
</figcaption>
</figure>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="crew-member" style="background-image: url(img/tupian2.png)">
<figure>
<figcaption class="overlay">
<h2>Liang Xinmu</h2>
<p>女孩子就没有就应该的样子</p>
</figcaption>
</figure>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="crew-member" style="background-image: url(img/IMG_4500.jpg)">
<figure>
<figcaption class="overlay">
<h2>Wei Haoran</h2>
<p>Stay Hungry! Stay Foolish!</p>
</figcaption>
</figure>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="crew-member" style="background-image: url('img/SHOU.jpg')">
<figure>
<figcaption class="overlay">
<h2>Shou Yuancong</h2>
<p>尽挹西江，细斟北斗，万象为宾客</p>
</figcaption>
</figure>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="crew-member" style="background-image: url('img/WHEN.jpg')">
<figure>
<figcaption class="overlay">
<h2>SHAO WENYI</h2>
<p>我是帅b</p>
</figcaption>
</figure>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="crew-member" style="background-image: url('img/BO.jpg')">
<figure>
<figcaption class="overlay">
<h2>feng boyu</h2>
<p>保持对生活的热爱</p>
</figcaption>
</figure>
</article>
</div>
</div>
</div>
</section>
<section class="latest-articles has-padding alternate-bg" id="articles">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<h4>Gallery</h4>
</div>
</div>
<div class="row">
<div class="col-md-4">
<article class="article-post">
<a href="./project1.html">
<div class="article-image has-overlay" style="background-image: url(img/article-01.jpg)">
<span class="featured-tag">Featured</span>
</div>
<figure>
<figcaption>
<h2>Website Setup</h2>
<p>这个阶段我们按照老师提供的教程以及网络资源对小组的网站进行搭建与调试</p>
</figcaption>
</figure>
</a>
<ul class="article-footer">
<li class="article-category">
<a href="#">Website</a>
</li>
<li class="article-comments">
<span><i class="fa fa-comments"></i> 2022.10.10</span>
</li>
</ul>
</article>
</div>
<div class="col-md-4">
<article class="article-post">
<a href="./concept.html">
<div class="article-image has-overlay" style="background-image: url(img/article-02.jpg)">
</div>
<figure>
<figcaption>
<h2>Product Concept</h2>
<p>基于全息展示技术与硬件交互积木，实现儿童在家中的农业种植知识趣味化学习</p>
</figcaption>
</figure>
</a>
<ul class="article-footer">
<li class="article-category">
<a href="#">Concept</a>
</li>
<li class="article-comments">
<span><i class="fa fa-comments"></i> 2022.10.20</span>
</li>
</ul>
</article>
</div>
<div class="col-md-4">
<article class="article-post">
<a href="./cad.html">
<div class="article-image has-overlay" style="background-image: url(img/article-03.jpg)">
</div>
<figure>
<figcaption>
<h2>CAD</h2>
<p>在Fusion360中对植物生长模型及动画进行尝试，查看初步的效果呈现</p>
</figcaption>
</figure>
</a>
<ul class="article-footer">
<li class="article-category">
<a href="#">CAD</a>
</li>
<li class="article-comments">
<span><i class="fa fa-comments"></i>2022.10.24</span>
</li>
</ul>
</article>
</div>
</div>
<div class="row has-top-margin">
<div class="col-md-4">
<article class="article-post">
<a href="/arduino.html">
<div class="article-image has-overlay" style="background-image: url(img/article-04.jpg)">
</div>
<figure>
<figcaption>
<h2>Arduino</h2>
<p>我们小组进行了一系列点灯实验，电位器实验，超声波测距，LCD1602显示实验，最终又做了进一步的拓展，进行了processing联动的红绿灯实验 </p>
</figcaption>
</figure>
</a>
<ul class="article-footer">
<li class="article-category">
<a href="/arduino.html">Arduino</a>
</li>
<li class="article-comments">
<span><i class="fa fa-comments"></i> 2022.11.24</span>
</li>
</ul>
</article>
</div>
<div class="col-md-4">
<article class="article-post">
<a href="/3dprint.html">
<div class="article-image has-overlay" style="background-image: url(img/article-05.jpg)">
</div>
<figure>
<figcaption>
<h2>3D Print</h2>
<p>3D打印技术是基于“离散/堆积成型”的成型思想，用层层加工的方法将成型材料“堆积”而形成实体零件，我么使用极光尔沃A3S打印机完成打印制作</p>
</figcaption>
</figure>
</a>
<ul class="article-footer">
<li class="article-category">
<a href="/3dprint.html">Print</a>
</li>
<li class="article-comments">
<span><i class="fa fa-comments"></i>2022.12.01</span>
</li>
</ul>
</article>
</div>
<div class="col-md-4">
<article class="article-post">
<a href="#">
<div class="article-image has-overlay" style="background-image: url(img/article-06.jpg)">
</div>
<figure>
<figcaption>
<h2>Progress</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, saepe!</p>
</figcaption>
</figure>
</a>
<ul class="article-footer">
<li class="article-category">
<a href="#">UX Design</a>
</li>
<li class="article-comments">
<span><i class="fa fa-comments"></i>2022.10.24</span>
</li>
</ul>
</article>
</div>
</div>
<div class="row is-centered">
<a href="#intro" class="btn secondary view-more">View more</a>
</div>
</div>
</section>
<footer class="has-padding footer-bg">
<div class="container">
<div class="row">
<div class="col-md-12 footer-nav">
<ul class="footer-primary-nav">
<li><a href="#freebies">Home</a></li>
<li><a href="#team">Team Introduction</a></li>
<li><a href="#articles">Gallery</a></li>
<li><a href="#articles">Course Progress</a></li>
</ul>
<div class="share-dropdown">
<ul>
<li><a href="#" class="share-twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="share-facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="share-linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<ul class="footer-secondary-nav">
<li>
<p>Copyright © 2022.Company name All rights reserved.</p>
</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/video.min.js"></script>
<script></script>
<script src="js/min/bootstrap.min.js"></script>
<script src="js/min/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="js/min/retina.min.js"></script>
<script src="js/min/jquery.waypoints.min.js"></script>
<script src="js/min/flickity.pkgd.min.js"></script>
<script src="js/min/scripts-min.js"></script>
</body>
</html>