(website development providence ri)How do we develop it every day?？In this chapter，Let's learn together to develop a website.。
Static website and dynamic website
We open the webpage，It can be divided into two categories。One type is similar to corporate information display、Personal blog and other information，This type of website is only information display，Not too much interaction function。This type of website is a static website。
There is also a kind of Taobao、Microblogging、QQSpace This information changes daily，Website with more features，This type of website is a dynamic website。Dynamic website，Generally there will be a server to receive requests、Data processing、Return the result。
(website development providence ri)
(website development providence ri)Today, let's first focus on studying the construction of static websites.。A beautiful web creation is like covering the house.，Have a complete process。Before learning the specific web development，Let's take a look at how to cover the house.。(website development providence ri)
Design drawings：We will first draw the look of the house we want to cover on the drawings.，Several highlights、How to open the window、How to design the door, etc.。
House skeleton：After the design manuscript is completed，We can set up a house skeleton.。Foundation、Load-bearing wall、Ceiling, etc.。
Pink brush decoration：After the house skeleton is built，We need a unified brush decoration to the house。Let the house becomes a beautiful architecture from the naked skeleton。
Hydropower：finally，We also need to give the house to hydropower，Let the house really live。
under，Let's learn how to make a web page according to this process.。
design draft
Before developing a web page，We need to plan the layout of this page。title、picture、What is the design, etc.。This work，We can do your own drawings or professional software。The web design software of the current comparative process has：photoshop、sketchWait，Interested, you can learn in detail.。
(website development providence ri)
HTML
After the design manuscript is completed，We can enter the web skeleton.，This is usedHTML。htmlHypertext markup language（Hypertext Markup Language）abbreviation of，Hypertext is the meaning of more things that can express more than ordinary words.。Think about our usual writing composition，In addition to the title，Below is a color、size、Font the same text content。HTMLThat is to mark these text into a different look.，for example：Headline、subtitle、picture、Link、List、Form, etc.。Is it to use us usuallyWordVery similar。existWordWe can also complete this work.，but，wordThe generated file can only be usedofficeOpen。we useHTMLThe design of the webpage is very convenient to identify and read。
HTMLUnlike us to learnpython，It is not a programming language，HTMLAn expression、Organize information。
htmlA marker language is called a separate tag because its core is a separate mark.。The following figure is a typicalHTMLLabel。
Core label has4Partly：
Start tag: The part of the beginning with a sharp bracket is starting tag，Every tag has its own name，for example：<p> <a> <strong> <span> <table> <li>etc。
End tag: Ending the label is also packet with a spare bracket，Especially important，The left side angle will follow one/Indicates label closed。for example：</p> </a> </span> </table> </li>。
Tag content: The content that is started and ending the label in the middle is the label content.。This part of the information will be displayed directly in the browser.。
element: Depend on1、2、3The overall combination is a label element.。
(website development providence ri)under，Let's take a look at which tags will have a typical web page.：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
<!DOCTYPE html> Name this is onehtmlDocumentation
- (website development providence ri)
html Logged the start and end of the page head Head of the page，This part mainly declares some source information from this page
title Web title
body Web content
Let's learn some commonly usedHTMLLabel。
img Picture label,Used to display a picture。
- (website development providence ri)
h1~h6 Title level1To the title level6，Size decrease p paragraph，A whole
- (website development providence ri)
ul li List，List information display a Link，Hyperlink
Other commonly used but not very obvious
div A separate information block
span A small piece of information，Often writepLabel
form A form，Submit information
input Input box
button Button
checkbox Check box
littledemo
Learn so many labels，Let's write an example.。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>about</title>
</head>
<body>
<h1>about me</h1>
<img/>
<p>I'm<span>Ada teacher</span>，Focus on children's programming。Committed to cultivating the little pole。Not lack of genius，It is lacking to cultivate genius environment。</p>
<div>
<a href="
https://weibo.com/adalaoshi">my Weibo</a>
<a href="http://adacode.net/">My forum</a>
</div>
</body>
</html>
How to become beautiful
not bad，We can useHTMLWrite a self-introduction。But，怎么看这个页面都觉得丑丑的。How to see this page is ugly，我们来一起学习一下怎么把这个页面变漂亮。
Next class-孩子身边的编程专家
(website development providence ri)
Let's learn together how to make this page beautiful，主页里有完整的课程目录和观看地址
