Create a blog
In this chapter, we will practice and create a blog homepage. You need to accumulate the knowledge you have learned and apply it. Continue to learn, follow the instructions in the "Task" section, and finally, finish creating your own blog page.
Below is the blog page you want to complete. Click "Try it" to view the code and its output.
<html>
<head>
<title>我的博客</title>
</head>
<body>
...
Don't be afraid of the long page code, when you finish creating the blog page, everything will be very meaningful!
Task: Change the document title, change the document title to the name you want to enter. Remember that the title of the document is located inside the <title> tag in the <head> of the page.
"About Me" Module
The "About Me" module includes a heading contained in the <h2> tag, and two paragraphs using the learned tags to format text.
Let's take a look at the code and click "Try it" to see the results:
<h2><span>关于我</span></h2>
<p>
嘿! 我是<strong>W3Cschool小师妹</strong>。编码改变了我的世界...
</p>
<p class="quote">"I love coding,I love w3cschool!"</p>You should notice that we also used some CSS to add color and style to the page. After finishing the HTML micro-class, we recommend to study the CSS micro-class .
Task: Create your own "About Me" module by changing the text.
"My Skills" Module
Let's create the "My Skills" module, which is an unordered list of languages.
Reminder : To create an unordered list, use the <ul> tag, where each list item is represented by the <li> tag.
Let's check the code and click "Try it" to see the results:
<h1><span>我的技能</span></h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Task : Create your own "My Skills" module.
"My Timetable" Module
Next, use the table tag to add the table to your blog homepage, representing your daily learning schedule.
The <th> tag represents the header of the table.
Let's check the code and click "Try it" to see the results:
<h1><span>我的时间表</span></h1>
<table>
<tr>
<th>Day</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
</tr>
<tr>
<td>8:00-8:30</td>
<td class="selected">Learn</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9:00-10:00</td>
<td></td>
<td class="selected">Practice</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>13:00-13:30</td>
<td></td>
<td></td>
<td class="selected">Play</td>
<td></td>
<td></td>
</tr>
<tr>
<td>15:45-17:00</td>
<td></td>
<td></td>
<td></td>
<td class="selected">Code</td>
<td></td>
</tr>
<tr>
<td>18:00-18:15</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="selected">Discuss</td>
</tr>
</table>
An empty <td> tag indicates an empty cell. They are necessary because they maintain the structure of the table.
Task : Create your own "timetable" with custom tables!
"Contact Form" Module
Next, we want to create a contact form for the blog homepage. The contact form includes name, email and message fields, and a submit button.
Let's check the code and click "Try it" to see the results:
<h1><span>联系我</span></h1>
<form>
<input name="name" type="text" /><br/>
<input name="email" type="text" /><br/>
<textarea name="message"></textarea>
<input type="submit" value="发送" class="submit" />
</form>
This is just a static HTML page, so actually submitting the form will not work. You need to create server-side code to submit the real form and process the data. After completing the HTML and CSS course, you can learn how to complete the PHP course.
Task : Customize the form to create your own "contact form"!
Complete the blog page
To complete our blog page, we also need to use a frame to embed the video. Next, we will also create a "follow me" section with a link at the end of the page.
Let's check the final code, click "Try it" to see the results:
...
<div class="section">
<h1><span>我的媒体</span></h1>
<iframe height="150" width="300" src="https://www.w3cschool.cn/statics/demosource/movie.mp4" allowfullscreen frameborder="0"></iframe>
</div>
...
Task : Complete your blog page.
You have finished creating a blog page, awesome! You can share the blog page you created with your friends!