From the production of web pages, as the pillar of the flower nation of a good young motherland in the 21st century, there is no such thing as martial arts!
Let Xiaobian take everyone to start with a simple page today!
The finished product is here:
Does it look very high-end?
Talk Is Cheap
zhun bei gong zuo
Preparing to make web pages is actually very simple. All you need is actually a computer with a "notepad"
Make your body write a web page like DIY doll, you have to give it a general body shape, and then put it on various clothes
Structure like body, style like clothes.
The body determines "what"
Step 1: Create a new notepad for the basic structure of the webpage, enter
This is the web page. . .
Don't worry, let's save the notepad first, then change the extension to ".html"
Is notepad turned into a web page ~
Now we can open it directly in the browser
. . .
Why is there nothing?
I said that it was just a "webpage" structure, we have to add our own content to the webpage.
PS: "<xxx>" is called "tag" and is the basic element of the html file (most "tags" have corresponding "end tags" </ xxx> have you noticed?)
Step 2: Add content
1. What is the page name?
---- "Rhythm Zhongnan" OK Add "Rhythm Zhongnan" to the <title> tag
Open your browser and see what's changed ~
. . .
TMD has not changed! !!
The information in the "<head>" tag is not directly displayed in the web page content. For example, "Rhythm Zhongnan" just added to "<title>" appears as the name of the website.
2. What's on the page?
--- Add a title and try adding a new line to the <body> tag:
"<H1> School Profile </ h1>"
See the effect ~
"<H1>" (heading) stands for "first-level heading", and all text in it exists semantically as heading. Of course, not only "<h1>", but also "<h2>, <h3>, <h4> and other titles exist"
You can also add "paragraph" content with the "<p>" (paragraph) paragraph tag!
--- Another picture ~
To insert a picture, you need to use the "<img />" tag, where "src" indicates the picture path, so you don't need to explain the height and width ~
See the effect:
Is it a lot taller?
Finally let's finish writing:
For details, please visit the official website of Baidu School
Do you feel any disadvantages?
The text picture is not aligned, the content is not centered, the text is ugly, the text is too crowded ...
---- >>> Not so nice
It ’s not good-looking, of course, it ’s not “dressed” yet. Do you think someone bought Luoti ’s Barbie? Let ’s “dress” it!
Dress writing style
The "style" tag for the web page is the <style> tag, in which you can write the "style" of the web page-font size, border spacing, content typesetting, etc. I will not introduce it because of time. Post it ~
Open it with a browser ~
You're done! !! !!