创建一个博客
在这个章节中,我们将练习并创建一个博客主页,你需要积累所学到的知识,并将其应用。继续学习,按照“任务”部分的说明进行操作,最终,完成创建自己的博客页面。
下面就是你要完成的博客页面,点击 “尝试一下” 查看代码及其输出。
<html>
<head>
<title>我的博客</title>
</head>
<body>
...
不要害怕页面代码长,当你完成创建博客页面时,一切都将非常有意义!
任务:更改文档标题,将文档标题更改为你自己想要输入的名称。请记住,文档标题位于页面 <head> 中的 <title> 标签内。
“关于我”模块
“关于我” 模块包括一个包含在 <h2> 标签中的标题,以及使用学过的标签格式化文本的两个段落。
我们来看看代码,点击 “尝试一下” 查看运行结果:
<h2><span>关于我</span></h2>
<p>
嘿! 我是<strong>W3Cschool小师妹</strong>。编码改变了我的世界...
</p>
<p class="quote">"I love coding,I love w3cschool!"</p>
你应该会注意到,我们还使用了一些 CSS 给页面添加颜色和样式。当完成 HTML 微课后,我们推荐接着学习 CSS 微课。
任务: 通过更改文本创建你自己的 “关于我” 模块。
“我的技能”模块
让我们创建 “我的技能” 模块,这是一个无序的语言列表。
提醒:创建无序列表,要使用 <ul> 标签,其中每个列表项由 <li> 标签表示。
我们来查看代码,点击 “尝试一下” 查看运行结果:
<h1><span>我的技能</span></h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
任务: 创建你自己的 “我的技能” 模块。
“我的时间表”模块
接下来,使用表格标签将表格添加到你的博客主页中, 代表你的每日学习时间表。
<th> 标签表示表格的表头。
我们来查看代码,点击 “尝试一下” 查看运行结果:
<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>
空的 <td> 标签表示空单元格。它们是必要的,因为它们维持了表格的结构。
任务:自定义表格创建你自己的 “时间表” !
“联系表”模块
再接下来,我们要为博客主页创建一个联系表单。这个联系表单包括名称,电子邮件和消息字段,还有一个提交按钮。
我们来查看代码,点击 “尝试一下” 查看运行结果:
<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>
这只是一个静态HTML页面,所以实际提交表单将不起作用。你需要创建服务器端代码, 以便提交真实的表单并处理数据。当完成 HTML 和 CSS 课程后,你可以学习如何完成 PHP 课程。
任务:自定义表单创建你自己的 “联系表” !
完成博客页面
要完成我们的博客页面,我们还需要使用一个框架来嵌入视频。接着,我们还将创建一个 “关注我” 部分,其中包含页面末尾的链接。
我们来查看最终的代码,点击 “尝试一下” 查看运行结果:
...
<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>
...
任务:完成你的博客页面。
你已经完成了创建博客页面,真棒!你可以与朋友分享你创建的博客页面啦!