WEB高手培训班之HTML篇

GGB0080_2015

GGB0080_2015

2016-02-19 21:41

下面图老师小编跟大家分享一个简单易学的WEB高手培训班之HTML篇教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

  记得在本人刚开始学习编写网页时曾向一位WEB高手请教过如何用FRONTPAGE 98来制作一张绚丽多姿的个人网页。他告诉我,他制作网页时不用任何网页制作软件,而是靠手写的。当时我一下子愣住了,“WHAT?手写网页!OH,MY GAD!这人简直是高手中的高手呀!”从此他在我心目中地位犹如伟人般的高大……然而时过半年到了今天,他已经不再是我的偶像。因为我也能手写网页了,而且编写出的WEB还要胜他一筹(自我感觉)。看到此处你一定会问我,到底我取了什么“真经”能“逍遥仙境”呢?其实很简单,那就是HTML语言。

  HTML是由WEB的发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立的一种标记式语言。它是标准通用化标记语言SGML的应用。用它的语法规则建立的文档可以运行在不同操作系统的平台上。因此,HTML文档属于纯文本文件(它能用任意的文本编写器书写)。现在有很多网迷称HTML为程序语言,把写HTML文档理解为编程,这显然是走进了一个误区。

  在了解了HTML的定义后,接下来我们便来学习此语言。由于篇幅有限,本文不可能把HTML语言的属性一一讲解。笔者只是选了一些比较重要而又广泛使用的元素进行分析。

  在进入正题前,我们先来看看下面这张网页源代码。(这是笔者个人主页的源代码,本文将围绕着此代码进行详解。)

html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title意境/title
/head
body
table border="0" width="100%" cellpadding="0"
tr
td width="100%"p align="center"font face="隶书" size="6" color="#FF00FF"strong欢迎进入华人网站/strong/font/td
/tr
/table
table border="0" width="100%" cellspacing="0" cellpadding="0"
tr
td width="100%"table border="0" width="100%" cellspacing="0" cellpadding="0"
tr
td width="10%" valign="top" align="center"/td
td width="80%" valign="top"table border="0" width="100%" cellspacing="0" cellpadding="0"
tr
td width="17%"/td
td width="17%"
a href="http://202.103.176.80/g/speaker/cool.htm"
img src="http://202.103.176.80/g/speaker/huaren/mypic1.gif" alt="共享程序网站进入口" border="0" width="180" height="90"/a/td
td width="17%"/td
/tr
tr
td width="17%"/td
td width="17%"/td
td width="17%"/td
/tr
tr
td width="17%"
img src="http://202.103.176.80/g/speaker/huaren/mypic2.gif"
alt="个人作品网站进入口" width="180" height="90"/td
td width="17%"/td
td width="17%"a href="http://202.103.176.80/g/speaker/dault.htm"
img src="http://202.103.176.80/g/speaker/huaren/mypic4.gif" alt="华人主页进入口" border="0"/a/td
/tr
tr
td width="17%"/td
td width="17%" p /td
td width="17%"/td
/tr
tr
td width="17%"/td
td width="17%"
img src="http://202.103.176.80/g/speaker/huaren/mypic3.gif" alt="名家推荐网站进入口"/td
td width="17%"/td
/tr
/table
/td
td width="10%" valign="top" align="center"/td
/tr
tr
td width="10%"/td
td width="80%"/td
td width="10%"/td
/tr
/table
/td
/tr
/table
p /p

table border="0" width="100%" cellpadding="0"
tr
td width="100%"table border="0" width="100%" cellpadding="0"
tr
td width="100%"p align="center"strongfont face="隶书" color="#A6A6FF"二OOO年三月三十日制作完成/font/strong/td
/tr
tr
td width="100%"p align="center"font face="隶书" color="#A6A6FF"strong谢谢您的光临/strong/font/td
/tr
tr
td width="100%"p align="center"strongfont face="隶书" color="#A6A6FF"华人网站站长:张鸣/font/strong/td
/tr
tr

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

td width="100%"strongfont face="隶书" color="#A6A6FF"
marquee border="0" align="middle" scrolldelay="120"
若您需要帮助,请及时找我,联系E-MAIL:dibazh@online.sh.cn/marquee/font/strong/td
/tr
/table
/td
/tr
/table
/body
/html

  看了这段代码后,您是否感到有些头晕呀?(这么多英文,好复杂呦!)其实这一点都不复杂,请听我慢慢道来。

  一.HTML/HTML元素。它表示了这个文档为HTML文档,即:我们所说的网页。

  二.HEAD/HEAD元素。它是用来标明当前文档的若干信息。例如,文档标题,文档所用的字符集等等。在上例中,HEAD/HEAD中插入的TITLE和META元素就分别给HEAD元素指明了题目(“意境”)以及所用的字符集(gb2312)。

  三.TITLE/TITLE和META元素。上面已经提到过这两个元素分别代表的含义。TITLE是给文档起个题目,META是说明HTML所使用的一些信息。(注意:此元素不要与HEAD混淆,META元素一般包括在HEAD元素中。)META不仅能指明文档所用的字符集,而且还能提供一些有趣的功能。例如:自动跳转网页(代码为:meta http-equiv="refresh"

  content="240(秒数); url=http://breaker.126.com(地址)")和网页出现方式(可以圆形打开网页,方形打开网页等等)。

  四.四个表格元素。它是HTML中最主要的元素。它能够帮助您解决在排版上所遇到的众多问题,例如,文字与图象对齐等等。如果有人对您说我在制作网页时从来不用表格元素的话,那么此人的网页肯定称不上“精品”。

  1.table/table。这是定义表格的元素,也可以说是表格的“身份证”。要想知道网页中总共有几张表格那就数一数有几对此元素便可。拿上例来看,总共有五对table/table,那么此张网页就有五张表格。另外此元素还附有一些属性,在此本人介绍几个比较重要的。

A.table border=数字表示表格边框线的宽度。
B. table border width=数字;height=数字指定整个表格的宽度及高度。
C. table border cellspacing=数字表示两个单元格之间的距离。
D. table border cellpadding=数字表示单元格的大小。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  注意:上面的“数字”可用正整数表示,也可用百分数表示。他们的单位都是“象素”。另外,笔者在此推荐各位在编写网页时最好用正整数来表示,因为这比较直观。而用百分数来写的话,还需经过换算才能知道您表格或单元格的大小。

  2.tr/tr。这是用来定义表行的元素。即:表格中行的“身份证”。在表格中有几对此元素就表示当前表格中有几行。

  3.td/td。关于此对元素的定义在很多书中的解释都很专业,对初识HTML语言的朋友来讲很难理解。现本人通过自己的领悟而给它一个的定义:td/td是表示一行中单元格的元素。同上原理,一行中有几对此元素,就有几个单元格。

  4.th/th。它是用来定义表头,但此元素在今天已经不常用到了。因此,笔者也不多作介绍。

  五.font/font。此元素规定了字体运用的方式,它有三个属性:SIZE,COLOR,FACE。这分别代表了字体的大小,颜色及哪种字体。例如上面的网页中这段代码font face="隶书" size="6" color="#(可以省略)FF00FF"strong欢迎进入华人网站/strong/font它表示了“欢迎进入华人网站”这八个文字,用隶书六号粗(strong/strong代表粗字体)字体紫红色在网页中显示出来。另外,color="#FF00FF" 代码中的“#”可以省略。

  六.img。它是专门设置图片属性的元素。我们以上例中的这段代码进行分析:

  img src="http://202.103.176.80/g/speaker/huaren/mypic1.gif" alt="共享程序网站进入口" border="0" width="180" height="90"。其中img src是指明了图片的路径。在ITERNENT上若要能正常地显示您在网页中所设置的图片,那么您图片的路径必须正确。否则的话,图片不会呈现。img alt这是表示在浏览器不能打开图片时显示的说明,这个说明可以是由您任意命名,但最好能写些有意义的文字。就如本人给此图片取名为“共享程序网站进入口”,也就是说当点击此图片时,网页会自动连接到共享程序网站同时打开此网站的首页。至于border,width,height这些属性很简单,即:图片的边框线宽度,图片的宽度以及图片的高度。它与表格的border,width,height属性定义差不多,只是前者是针对图片,而后者是针对表格。

  七.a href/a。这是一个超连接的元素。在href后面写下欲连接的网址,在a href与a之间写入文字或插入图片,那么您的超连接就完成了。怎么样很容易吧!

  八.marquee/marquee。这是HTML语言的高级技术运用元素。用它可以实现WEB中文字的滚动效果,让您的网页更具有动态魅力。这个元素支持以下几个属性:

  1. DIRECTION。它是指定文字的滚动方向,例如,marquee direction=right就是指文字
从左向右滚动。除了right,我们还可以用left(从右到左),up(自下往上),down(由上朝下)来设定文字的方向。

  2. BEHAVIOR。这是指定文字的滚动方式。它有三个对象:SCROLL,SLIDE,ALTERNATE。这三个对象分别代表了环绕滚动,滚动一次和来回滚动。其中,环绕滚动(即SCROLL)是滚动方式(BEHAVIOR)的默认值。例如上例中的“marquee border="0" align="middle" scrolldelay="120"若您需要帮助,请及时找我,联系E-MAIL:dibazh@online.sh.cn/marquee”的这段代码就指明了文字以默认值SCROLL的方式进行滚动。

  3. LOOP。这是指定文字滚动的循环次数。当LOOP=-1或LOOP=INFINITE时,则表明文字滚动是无限循环。

  4. SCROLLDELAY。这是指文字滚动的速度。它的单位是毫秒。再看此代码“marqueeborder="0" align="middle" scrolldelay="120"若您需要帮助,请及时找我,联系E-MAIL:dibazh@online.sh.cn/marquee”,其中“scrolldelay="120"”表示,文字滚动速度为120毫秒。

  5. ALIGN。这是滚动文字的对齐属性也就是处于的位置。它有TOP(对齐上方),MIDDLE(对齐中部),BOTTOM(对齐下方)三个对象。上段代码中的“align="middle"”则明确了文字的位置是在中部。另外,此元素不仅能够用在MARQUEE中而且在其他元素中也经常用到,例如,TABLE,TD等等。它们的用法与含义与MARQUEE是相同的。

  好了,HTML介绍到此就该告已段落。现在再回首看一下上文开始时的网页代码,您是否觉得太简单了。(惨啦!又有一位网页高手出现了,我的“饭碗”不保。)是啊!作为网页编写语言――HTML它真的是非常容易。笔者只用了很少的时间便能彻底领悟它的精髓,我想对于聪明的读者来说肯定是不在话下的。

  在写本文时,笔者遇到一位电脑朋友,他劝我不要写这篇文章因为如今有很多网页编辑软件,如ProntPage98,Dreamweaver3等等,它们都能自动生成网页,为何还需研究HTML呢?这位朋友的话初听起来不无道理,然而仔细想想便感到他的话缺乏“品味”。其实HTML语言是所有网页的基础,对于一个想成为WEB高手的您来讲,学习HTML是必不可少的。就象今天我们虽有计算器,但在学数学时仍须从“1+1=2”开始一样,这就是基本功。要知道“建立在沙漠中的宫殿,再豪华也会倒塌的。”(因为缺乏基础!)
最后,祝愿您们都能成为WEB高手!若有问题,请E-MAIL本人: dibazh@online.sh.cn。

展开更多 50%)
分享

猜你喜欢

WEB高手培训班之HTML篇

Web开发
WEB高手培训班之HTML篇

9岁男生两天上满9个培训班 如何正确帮助孩子选择培训班

电脑网络
9岁男生两天上满9个培训班 如何正确帮助孩子选择培训班

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

孕妇产前培训班不容忽视

电脑网络
孕妇产前培训班不容忽视

北京学生培训班9天收费2万 给孩子报培训班的注意事项

早教 教育
北京学生培训班9天收费2万 给孩子报培训班的注意事项

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

产前培训班对孕妇有哪些帮助

怀孕
产前培训班对孕妇有哪些帮助

专家谈是否该给孩子报暑期培训班

早教 误区 育儿知识 怀孕 孕妇
专家谈是否该给孩子报暑期培训班

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

q点怎么获得?

q点怎么获得?

与HTML相比XHTML有什么特点?

与HTML相比XHTML有什么特点?
下拉加载更多内容 ↓