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. Python的那些坑--------括号篇

    在Python中遇见了带不带括号的问题,我目前的是这三种,有问题请指出.如果有其他的,我后续会更新 一  函数带不带括号: def a(x): return x print(a) #不带括号调用的结果 ...

  2. LayUI加载js无效问题

    在部署系统的时候,本地调试一切正常,layer.js均能正常加载.然而部署到服务器之后,经常性的出现layer.js无法加载问题.导致页面弹框无法使用. 一开始以为是Google浏览器问题,因为刚刚更 ...

  3. [USACO4.2]完美的牛栏The Perfect Stall

    题目:USACO Training 4.2(在官网上提交需加文件输入输出).洛谷P1894. 题目大意:有n头奶牛m个牛栏,每头牛只会在自己喜欢的牛栏里产奶,问一次最多有多少奶牛能产奶. 解题思路:二 ...

  4. 11g Oracle Rac安装（基于linux6）可能出现的问题

    11g Oracle Rac安装(基于linux6)可能出现的问题汇总: 7)使用"yum"命令执行节点的自动配置失败. 修改一下 /etc/resolv.conf,添加: nam ...

  5. NYIST 531 太空飞行计划

    太空飞行计划 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述        W 教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利 ...

  6. Web长连接推送

    http://www.workerman.net/web-sender http://wahahachuang5.iteye.com/blog/2311313

  7. C# winform压缩文件夹带进度条

    注意:用了开源的CL.IO.Zip库 pbYSJD是进度条的控件名 btnImport是按钮控件名,当压缩结束之后,使按钮处于激活状态,否则无法点击按钮. /// <summary> // ...

  8. SQL Server 性能调优2 之索引（Index）的建立

    前言 索引是关系数据库中最重要的对象之中的一个,他能显著降低磁盘I/O及逻辑读取的消耗,并以此来提升 SELECT 语句的查找性能.但它是一把双刃剑.使用不当反而会影响性能:他须要额外的空间来存放这些 ...

  9. 6、Java类、对象、构造器、引用类型内存基本知识、引用类型值传递

    1.面向对象三大特征: 封装:encapsulation 继承:inheritance 多态:polymorphism 2.类中 数据特征(property):属性(attribute)静态的stat ...

  10. POJ 3013 Dijkstra

    从1节点最短路,,然后再乘一下权值就OK了 //By SiriusRen #include <queue> #include <cstdio> #include <cst ...