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. 【BZOJ4016】【FJOI2014】最短路径树问题

    题意: Description 给一个包含n个点,m条边的无向连通图.从顶点1出发,往其余所有点分别走一次并返回. 往某一个点走时,选择总长度最短的路径走.若有多条长度最短的路径,则选择经过的顶点序列 ...

  2. luogu P2137 Gty的妹子树（分块，主席树）

    询问的化我们可以建主席树.然后修改?,树套树...,最后插入?炸了. 所以我们对操作进行分块. 我们先对整棵树建一个主席树.修改,插入我们先记录下来.然后询问的时候先对主席树查询,然后暴力遍历我们记录 ...

  3. 洛谷P4894 GodFly求解法向量

    如果没有学过向量相关知识请出门右转高中数学必修四~~~ 当然如果你和我一样也是小学生我也不反对 首先说结论:\(\vec{z}=(y1z2-y2z1,z1x2-z2x1,x1y2-x2y1)\) 其实 ...

  4. solr启动时报错org.apache.solr.common.SolrException: undefined field text的解决办法

    solr启动时报错org.apache.solr.common.SolrException: undefined field text的解决办法 原创 2015年08月21日 20:47:40 标签: ...

  5. Java的TreeMap，C++的lower_bound，合并间隔

    https://leetcode.com/problems/data-stream-as-disjoint-intervals/?tab=Description 这道题目是合并间隔的经典题目. htt ...

  6. android自己定义圆盘时钟

    自己定义圆盘时钟的大概流程:由于圆盘时钟的圆盘是不须要动的,所以不必要加在自己定义的view里面,在view里面仅仅须要绘制秒针和分针时针并控其转动就可以. 下面就是自己定义view的主要代码: pa ...

  7. 大浪淘沙，JSP终将死去

    首先讲明,我不是标题党. 这纯属我个人的意见.勿喷. 先来讲讲JSP是怎么出现的吧. 在早期的WEB中,JS.CSS远未成熟,技术慷慨向并不明白!因为前端语言的匮乏.各家大公司都推出基于后端的模板语言 ...

  8. mysql---左连接、右连接、内连接之间的差别与联系

    现有两张表 第一张表为男生表,记录了男生的姓名和配偶的编号 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXlfbWFv/font/5a6L5L2T/fo ...

  9. 将一个文件夹纳入library或者移除remove

    https://support.microsoft.com/en-us/help/4026298/windows-show-libraries-in-file-explorer To show lib ...

  10. jzoj1495 宝石 解题报告[扫描线]

    Description 见上帝动了恻隐之心,天后也想显示一下慈悲之怀,随即从口袋中取出一块魔术方巾,让身边的美神维纳斯拿到后堂的屏风上去试试,屏风是正方形的,高和宽方向上各划有m条鱼屏风的边平行的直线 ...