Lecture 2 Lecture 3 01 02 03 04 An Introduction To The HTML Language Web Arts #2 HTML By Yanju Chen 01 02 introduction grammar 03 04 examples summary
→ → → → introduction grammar What is HTML? ● Hyper Text Markup Language 超文本标记语言 ● It is not a programming language, but a markup language. 标记语言 ● A markup language is a set of markup tags. 标记标签 ● HTML uses markup tags to describe the page. → → →
→ → → → → → → introduction grammar Markup Tag 标记标签 What is HTML? ● Surrounded by “<”and ”>” 由尖括号包围 ● Appear in pairs 成对出现 ● They are “start tag” and “end tag”. 开始标签和结束标签 ● HTML uses markup tags to describe the page. Tags Example #1 <html> <body> Hello HTML! </body> </html> → What is HTML? ● Hyper Text Markup Language 超文本标记语言 ● It is not a programming language, but a markup language. 标记语言 ● A markup language is a set of markup tags. 标记标签 ● HTML uses markup tags to describe the page. → Tags Example #2 <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> → → → → →
→ → → → → → → Markup Tag 标记标签 HTML Documentation & Web Page ● Surrounded by “<”and ”>” 由尖括号包围 ● Appear in pairs 成对出现 ● They are “start tag” and “end tag”. 开始标签和结束标签 ● HTML uses markup tags to describe the page. HTML Documentation & Web Page ● HTML Documentation describes web page. 描述网页 ● A HTML Document contains HTML Tags & texts. HTML标签和纯文本 ● So, we can call HTML Document Web Page. 某种程度上，HTML文档也被称为网页。 ● The Web Browsers display web page by understanding HTML Tags. 浏览器使用标签来解释网页。 → Tags Example #1 <html> <body> Hello HTML! </body> </html> Tip #1 HTM我更喜欢理解为一种框架，告诉你该去获取什么。 → Tip #2 就像瓶子，告诉你装牛奶你就装牛奶，装可乐就装可乐。 Tags Example #2 <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> → → → → →
→ → → → → → → HTML Documentation & Web Page Let’s start writing one… ● HTML Documentation describes web page. 描述网页 ● A HTML Document contains HTML Tags & texts. HTML标签和纯文本 ● So, we can call HTML Document Web Page. 某种程度上，HTML文档也被称为网页。 ● The Web Browsers display web page by understanding HTML Tags. 浏览器使用标签来解释网页。 Let’s start writing one… ● Start with <HTML> & end with </HTML> 必需，表明HTML属性 ● In between, a <TITLE></TITLE> is needed to specify the browser’s title but not necessary. 指定浏览器标题 ● A <BODY></BODY> is needed. 主体内容 ● The postfix of the file can be .htm or .html. 后缀名要求 ● More flexible to choose your tools. 编辑自由 → Tip #1 Tip #1 ● Not Case Sensitive 大小写不敏感 i.e. The following is OK: <html><title><body> → Tip #2 ● Recommended Tools Simple: Notepad Pro. : Dreamweaver Others… Tip #2 → → → → →
→ → → → → A Simple “Hello World” Let’s start writing one… Tip #1 <HTML> <TITLE> This is the title of the browser. </TITLE> <BODY> Hello World! </BODY> </HTML> Let’s start writing one… ● Start with <HTML> & end with </HTML> 必需，表明HTML属性 ● In between, a <TITLE></TITLE> is needed to specify the browser’s title but not necessary. 指定浏览器标题 ● A <BODY></BODY> is needed. 主体内容 ● The postfix of the file can be .htm or .html. 后缀名要求 ● More flexible to choose your tools. 编辑自由 → Tip #1 ● Not Case Sensitive 大小写不敏感 i.e. The following is OK: <html><title><body> Tip #1 ● You can run it on nearly all browsers. 任意浏览器运行 → Tip #2 ● Recommended Tools Simple: Notepad Pro. : Dreamweaver Others… → → →
Lecture 2 Lecture 3 01 02 03 04 An Introduction To The HTML Language grammar 03 04 examples summary
→ → → → grammar examples The Basic Grammar Pairs Singles ● Pairs of start tag and end tag 成对标签 ● Or just a single tag 单个标签 ● It is so easy to understand and to use. 不是很容易吗？ ● By the way, you comments can be included: <!-- Your Comment --> 注释 Pairs <p>&</p> <a>&</a> <he>&</h1> <table>&</table> <li>&</li> <form>&</form> → Singles <br/> <hr/> <b> <input/> → →
→ → → → → → → grammar examples Simple HTML Elements HTML元素 ●<body>元素：定义文档主体 ●<html>元素：定义整个文档 ●<table>元素：定义表格 ●<li>元素：定义列表 ●<form>元素：定义表单 还有很多…… Example #1 <html> <body> <table><tr><td>A Table </td></tr></table> </body> </html> → The Basic Grammar ● Pairs of start tag and end tag 成对标签 ● Or just a single tag 单个标签 ● It is so easy to understand and to use. 不是很容易吗？ ● By the way, you comments can be included: <!-- Your Comment --> 注释 Pairs <p>&</p> <a>&</a> <he>&</h1> <table>&</table> <li>&</li> <form>&</form> → Example #2 <html> <body> <ul><li>Apple</li> <li>Bannar</li></ul> </body> </html> Singles <br/> <hr/> <b> <input/> → → → → →
→ → → → → HTML属性 Simple HTML Properties Simple HTML Elements HTML元素 ● <a>：定义HTML链接（包括锚记和超链接等） ●align：附加对齐方式的属性 ●bgcolor：附加背景颜色信息 ●border：附加某些元素的边框信息 ●class：附加元素的类信息 ●id：附加一个唯一的id，相当于变量名 ●title：附加额外信息（提示信息） Simple HTML Elements HTML元素 ●<p>元素：定义段落 ●<body>元素：定义文档主体 ●<html>元素：定义整个文档 ●<table>元素：定义表格 ●<li>元素：定义列表 ●<form>元素：定义表单 还有很多…… → Example #1 <HTML><BODY> <A HREF=“http:// www.google.com”>HyperLink</A> </BODY></HTML> Example #1 <html> <body> <table><tr><td>A Table </td></tr></table> </body> </html> → Example #2 <HTML><BODY bgcolor=“green”> </BODY></HTML> Example #2 <html> <body> <ul><li>Apple</li> <li>Bannar</li></ul> </body> </html> → → →
Lecture 2 Lecture 3 01 02 03 04 An Introduction To The HTML Language grammar 03 04 examples summary
→ → examples summary Learn By Modifying Question #1 Question #2 ● Start with the following codes: <HTML> <TITLE>EXAMPLE</TITLE> <BODY> Normal Text <BR/> <FONT SIZE=“10”FACE=“Verdana”COLOR=“blue”>Specialized Text</FONT> <TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> <A HREF=“http://www.cnbeta.com”>Link</A> </TABLE> </BODY> </HTML> Question #1 Imagine or draw the web that is to be displayed in the browsers. 想象展示的网页形象，可以描述或者画出来。 → Question #2 Do you have some ideas, like combining some of the elements and properties? 有什么想法？例如融合网页元素、嵌套等？
Lecture 2 Lecture 3 01 02 03 04 An Introduction To The HTML Language grammar 03 04 examples summary
→ → summary Just A Simple Course 只是简单地介绍和实践 ● 本次介绍的HTML只是用于网页框架 ● 功能和排版等问题一般结合css+div+js和后台实现 ● 这些只是最基础的HTML语言 ● 更加高级的HTML的东西要靠自己兴趣 ● 资源到处都有，就看你愿不愿意去接触 →
Lecture 2 Lecture 3 01 Thank You! 02 03 04 An Introduction To The HTML Language 01 Thank You! 02 introduction grammar And have a nice day… 03 04 examples summary