用html做适合新手做的网页(边学边做网页篇------初识HTML)

为什么学习HTML?

理解HTML代码是制作网页的基本技能。在互联网高度发达的今天,网页制作技术开始变的和修图、处理视频一样重要。

第一,学会制作网页就可以把自己想要展示的信息让其他人使用浏览器观看,无论是文字、照片还是视频都可以通过浏览器观看,甚至是分享自己制作的小游戏。

第二,理解网页运行的基本原理后可以更好的浏览他人的网页,寻找有用信息,更合理的使用第三方工具,简单高效的制作自己的网页。

HTML学习难度与重要性

HTML代码本身非常容易理解,使用也非常简单,但是单纯使用HTML代码写出的网页效果和我们平时看到的网页相差甚远。要想做出一个漂亮的页面,我们还需要CSS和JavaScript的帮助。

HTML、CSS、JavaScript这些不同的代码都有什么作用呢?简单来说,HTML代码可以为网页提供基本内容,比如文字、图片、音乐、视频等。CSS代码可以为页面安排布局,比如标题的位置、字体、颜色、大小等,笼统的说就是为HTML代码添加的内容增加样式信息,例如修改位置、尺寸、颜色等属性。JavaScript代码可以为页面提供交互(互动)功能,例如通过按钮控制页面内容的隐藏、出现,或者为多张图片添加轮播功能等。

边学边练------写一个最简单的页面

正所谓万丈高楼平地起,下面我们就动手做我们的第一个网页文件。

工具:电脑,安装一个浏览器(IE 火狐 谷歌浏览器都可以),确定“记事本”工具可用。

有了以上工具我们就可以写了。

Step1 新建一个.txt文件。

操作如下:

(1)选择合适的磁盘,比如D盘或F盘新建一个文件夹,命名为“网页”。点击进入。

(2)在空白处点击鼠标右键新建一个文本文件,命名为“第一个页面”。这时我们就有了一个“第一个页面.txt”文件了。

如果你的电脑不显示“.txt”这样的文件后缀,可以在屏幕左上方寻找“查看”菜单,如图2

用html做适合新手做的网页(边学边做网页篇------初识HTML)(1)

图 2

点击后,出现如下菜单如图3,点击“选项”。

用html做适合新手做的网页(边学边做网页篇------初识HTML)(2)

图 3

点击“查看”,去掉“隐藏已知文件类型的扩展名”选项前的“对号”,如图4所示。这时就能显示或修改文件后缀了。

用html做适合新手做的网页(边学边做网页篇------初识HTML)(3)

图 4

Step2 添加内容

(1)双击打开“第一个页面.txt”文件,把HTML基本结构共七行代码输入进去。

(2)保存,关闭文件,在“第一个页面.txt”文件上点击鼠标右键,选择“重命名”,将“.txt”修改为“.html”。这时,系统会提示,如图1,大胆点“是”。

用html做适合新手做的网页(边学边做网页篇------初识HTML)(4)

图 1

这时我们的文件就变成了html网页文件了。

我们双击这个文件发现浏览器内一片空白,这就好比我们在桌子上摆了个碟子,里面并没有放美食。浏览器中的一片白就是空碟子的颜色,而HTML基本结构就是这个碟子。

下面我们往碟子里加点东西。

Step3 添加内容

(1)在“第一个页面.html”文件上点击鼠标右键,选择“打开方式”,选择“记事本”,如果没有“记事本”选项,请点击“选择其他应用”,点击选择最下面的“更多应用”,选择“记事本”。下一次选择“打开方式”时,“记事本”就会出现了。

(2)在<head></head>标签之间添加“<title>学习写第一个网页</title>”。在<body></body>之间添加“<h1>第一个网页</h1>”;“<p>随着学的内容越来越多,网页就会越来越漂亮了!</p>”完成如图5

用html做适合新手做的网页(边学边做网页篇------初识HTML)(5)

图 5

(3)保存,关闭,双击打开!效果如图6

用html做适合新手做的网页(边学边做网页篇------初识HTML)(6)

图6

今天的边学边做就到这里,下一次会详细解释<head>标签、<body>标签中常出现的子标签以及它们各自的作用。

第二篇《边学边做网页篇——<head>标签里装点啥?》http://mp.toutiao.com/preview_article/?pgc_id=6738988870622249479

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页