Tag Diagram

You may have noticed that HTML tags come in pairs;

HTML has both an opening tag (<tag name>) and a closing tag (</tag name>).

The only difference between the opening and closing tags is that the closing tag contains an extra forward slash.

Some EXAMPLE HTML tags that might make things clearer: 

<b>Makes text bold</b>

<i>Makes text italic</i>

<h1>Tells the browser that this text is very important -the browser usually

makes this text really big</h1>

<table>Creates an HTML table - think of a spreadsheet</table>

I hope you can see the pattern in the list above.

HTML tags are not just for placing and formatting text, HTML tags can be used to include other things like: animation, video, Flash, audio, and even multimedia programs.

Comparing HTML code and the web page it creates

Let’s start with a very simple web page to make it as easy for you to understand. First lets look at the final page: sample web page

Now that we’ve seen what the page looks like, let’s look at the HTML code used to create the page.

What you should do now is take a little time and compare the HTML page and the page with the code that is used to create the page.

Notice where the tags are and what they are doing.

Some Theory: The structure of an HTML page

An HTML page is divided into two major sections:

1. The head
The head (<head>) section contains underlying information about the page which does not get displayed in the web page (except for the title of the page). It does, however, have an affect on how the web page is displayed.
2. The body
The body (<body>) section: this section contains all the stuff that appears on the actual web page when someone happens to come along with their web browser. We are talking about the actual text, images, flash movies, and so on that people will see. That, of course, means the tags used to format all this stuff are there too…

You will notice that both the head and the body sections of a web site are marked in the HTML page with their respective tags: (<head> </head>) and (<body> </body>).

If the body tag creates the body of an HTML page, and the head tag creates the head of an HTML page, how do you create an HTML page itself? You guessed it, use the HTML tags:

<html></html>

The ‘mother of all tags’ is the HTML (<html>) tag, and like all tags it must have a start tag (<html>) and an end tag (</html>).

The difference between the start and end tags is the forward slash (/), but you already knew that.

Every web page MUST begin and end with the HTML tag, otherwise the web browser (programs like Internet Explorer) will not be able to display the page.

You also have to have the head tags and the body tags. All the other tags are optional.

So the bare-bones HTML page must have these tags and in this order:

<html>

    <head>

        <title>Title of your page</title>

    </head>

    <body>

    </body>

</html>

Lesson 2 Building your first web page: Part 2的更多相关文章

  1. Lesson 2 Building your first web page: Part 1

    In this ‘hands-on’ module we will be building our first web page in no time. We just need to quickly ...

  2. Lesson 2 Building your first web page: Part 3

    Time to build your first HTML page by hand I could go on with more theory and send half of you to sl ...

  3. Building a RESTful Web Service(转)

    Building a RESTful Web Service This guide walks you through the process of creating a "hello wo ...

  4. 【转】Building a RESTful Web Service

    目标 构建一个service,接收如下HTTP GET请求: [plain] view plain copy   http://localhost:8080/greeting 并返回如下JSON格式的 ...

  5. 解读Web Page Diagnostics网页细分图

    解读Web Page Diagnostics网页细分图 http://blog.sina.com.cn/s/blog_62b8fc330100red5.html Web Page Diagnostic ...

  6. 网页细分图结果分析（Web Page Diagnostics）

    Discuz开源论坛网页细分图结果分析(Web Page Diagnostics) 续LR实战之Discuz开源论坛项目,之前一直是创建虚拟用户脚本(Virtual User Generator)和场 ...

  7. Atitit.web三大编程模型 Web Page Web Forms 和 MVC

    Atitit.web三大编程模型 Web Page    Web Forms 和 MVC 1. 编程模型是 Web Forms 和 MVC (Model, View, Controller). 2.  ...

  8. [转]Calling Web Service Functions Asynchronously from a Web Page 异步调用WebServices

    本文转自:http://www.codeproject.com/Articles/70441/Calling-Web-Service-Functions-Asynchronously-from Ove ...

  9. Tutorial: Importing and analyzing data from a Web Page using Power BI Desktop

    In this tutorial, you will learn how to import a table of data from a Web page and create a report t ...

随机推荐

  1. [LOJ2422]【NOIP2015】斗地主

    大名鼎鼎的NOIP2015D1T3 题意: 由于一些众所周知的原因,没有完整题面…… 给你一副斗地主的手牌(牌数<=23),问最少要几次能出完: 包含双王,没有癞子,连对要三连对以上,可以直接出 ...

  2. 紫书 习题 11-2 UVa 1001 （Floyd）

    这道题只是在边上做一些文章. 这道题起点终点可以看成半径为0的洞, 我是直接加入了洞的数组. 边就是两点间的距离减去半径, 如果结果小于0的话, 距离就为0, 距离不能为负 然后我看到n只有100, ...

  3. System.IO.IsolatedStorage 使用 IsolatedStorageFileStream 存储信息

    在C#中还有一种叫做IsolatedStorage的存储机制,他存储信息的方式类似于我们的cookie, IsolatedStorage存储独立于每一个application,换句话说我们加载多个应用 ...

  4. hadoop-12-安装ambari-agent

    hadoop-12-安装ambari-agent 在所有的机器上面安装ambari-agent 1, cd /etc/yum.repos.d/vi 三个文件vi ambari.repo#VERSION ...

  5. mysql-计算字段

    一.计算字段 存储在数据库表中的数据一般不是应用程序所需要的格式 1.如果想在一个字段中既显示公司名,又显示公司的地址,但这两个信息一般包含在不同的字段中. 2.城市.州和邮编存储在不同的列中,但邮件 ...

  6. 福利贴——爬取美女图片的Java爬虫小程序代码

    自己做的一个Java爬虫小程序 废话不多说.先上图. 目录命名是用标签缩写,假设大家看得不顺眼能够等完成下载后手动改一下,比方像有强迫症的我一样... 这是挂了一个晚上下载的总大小,只是还有非常多由于 ...

  7. nodejs是什么

    nodejs是什么 一种javascript的运行环境,能够使得javascript脱离浏览器运行. 阅读本帖需要先复习小学语文课文,华罗庚的<统筹方法>. 比如,想泡壶茶喝.当时的情况是 ...

  8. hdoj--5569--matrix(动态规划)

    matrix Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Sub ...

  9. 利用Matlab自带的深度学习工具进行车辆区域检测与车型识别【Github更新！！！】（三）

    前言 对前面的东西更新了一下.地方包括: 1.GUI的更新,更友好的用户界面 2.支持用手直接画车辆区域,并且识别出来 3.将proposal.detect.fine-grained classifi ...

  10. BZOJ 2342 Manacher

    思路: 首先用manacher可以求出以i和i+1中间为对称轴,最长回文串能扩增的长度p[i]. 然后4*(y-x)能更新答案,当且仅当y≤x+p[x]/2且y-p[y]≤x. 按i-p[i]将所有点 ...