太原理工大学Web程序设计基础 第二章HTMLppt课件.ppt
《太原理工大学Web程序设计基础 第二章HTMLppt课件.ppt》由会员分享,可在线阅读,更多相关《太原理工大学Web程序设计基础 第二章HTMLppt课件.ppt(99页珍藏版)》请在三一办公上搜索。
1、1,HTML,田玉玲,2,HTML,3,HTML Introduction,4,Small ExampleHTML file, Title of Page This is my first homepage. This text is bold ,提示浏览器该怎么处理后面的数据,Example.html,浏览器中显示,但受到标记的约束,5,Small Example,6,Small Example,7,Explanation, Title of Page This is my first homepage. This text is bold ,tag tells your browser t
2、hat this is the start of an HTML document.,tag tells your browser that this is the end of an HTML document.,8,Explanation, Title of Page This is my first homepage. This text is bold ,The text between the tag and the tag is header information. Header information is not displayed in the browser window
3、s.,9,Explanation, Title of Page This is my first homepage. This text is bold ,The text between the tags is the title of your document. The title is not displayed in the browsers caption.,10,Explanation, Title of Page This is my first homepage. This text is bold ,The text between the tags is the text
4、 that will be displayed in the browser.,The text between the and tags will be displayed in a bold font.,11,HTML 语言的结构, 浏览器标题栏中的内容 网页中的内容Visible text ,文件头,文件体,12,HTML 文件组成,13,HTML Elements,The HTML elements starts with a start tagThe content of the HTML elementThe HTML element ends with an end tag Th
5、is text is bold,Element content,end tag,start tag,14,Tag Attributes,15,Small Example1, Title of Page This is my first homepage. This text is bold ,Example1.html,16,HTML Backgrounds,17, Title of Page This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragra
6、ph. ,Example2.html,18, Title of Page Image Background Both gif and jpg files can be used as HTML backgrounds.If the image is smaller than the page, the image will repeat itself. ,Example3.html,19,Header,Headings are defined with the to tags. defines the largest heading . defines the smallest heading
7、. HTML automatically adds an extra blank line before and after a heading .,20,Example for Header Element, Title of Page This is a heading. This is a heading. This is a heading. This is a heading. This is a heading. This is a heading. ,Example4.html,21,Header Element,对齐属性 属性名 align属性值left, center或rig
8、ht left-标题居左center -标题居中right-标题居右,22,Example for Header Element, Title of Page This is a heading. This is a heading. This is a heading. This is a heading. This is a heading. This is a heading. ,Example5.html,23,Comments in HTML,The comment tag is used to insert a comment in the HTML source code. A
9、comment will be ignored by the browser.You can use comments to explain youre the source code help you when you edit the source code at a later date.,24,Example for Comments, Title of Page This is a heading. ,Example6.html,25,Spaces, Tabs, and NewLine,Browsers that display HTML documents ignore extra
10、 spaces, tabs, blank lines, and newlines in the HTML document, If you need to specify these, you must use an appropriate (element) HTML tag to accomplish what you want to do.,26,Small Example2, Title of Page This is a heading. This is my first homepage. This text is bold This is another paragraph. ,
11、Example7.html,27,Paragraphs,Paragraphs are defined with the tag.HTML automatically adds an extra blank line before and after a paragraph.,28,Example for Paragraphs, Title of Page This is a heading. This is my first homepage. This text is bold This is another paragraph.end ,Example8.html,29,Paragraph
12、s 属性,对其属性 属性名align属性值left, center或right left-段落居左center -段落居中right-段落居右,30,Example for Paragraphs, Title of Page This is a heading. This is my first homepage. This text is bold This is another paragraph.end ,Example9.html,31,Line Breaks换行,The tag is used when you want to end a line, but dont want to
13、 start a new paragraph. The tag forces a line break wherever you place it.The tag is an empty tag. It has no closing tag.,32,Example for Line Breaks, Title of Page To breaklinesin a paragraph, use the br tag. ,Example10.html,33,Difference, Title of Page To breaklinesin aparagraph, use the br tag. ,E
14、xample11.html,34,Horizontal rule 横线,一般用于分隔同一文本的不同部分。Horizontal rule 的属性属性名size属性值n表示线宽,单位是像素属性名width属性值n表示长宽,单位是像素属性名align属性值left, right或center,35,Horizontal rule横线, ,36,Horizontal rule横线,37,Example for Horizontal rule, Title of Page The hr tag defines a horizontal rule:This is a paragraphThis is a
15、paragraphThis is a paragraph ,Example12.html,38,Example for Horizontal rule, Title of Page The hr tag defines a horizontal rule:This is a paragraphThis is a paragraphThis is a paragraph ,Example13.html,39,特殊字符,Computer Output These tags are often used to display computer/programming code Element 预排版
16、文本,浏览器在输出时,对这部分内容几乎不做修改地输出Element 居中,40, Title of Page This ispreformatted text.It preserves both spacesand line breaks.Wonderful!The pre tag is good for displaying computer code:for i=1 to 10print inext i ,Example16.html,41,Linking,HTML uses a hyperlink to link to anther document on the Web.Hyperli
17、nk 由两部分组成:指向的目标-同一文件中的另一部分,另一台主机中的一个文件,可以是动画或音乐指向目标的连接指针例如新浪网,42,Linking,HTML uses the (anchor) tag to create a link to another document .用作超链接的文字或图像The href attribute is used to address the document to link to -指向的目标The words between the open and dose of the anchor tag will be displayed as a hyperl
18、ink -指向目标的指针,43, This text is a link to a page on this Web site.This text is a link to a page on the World Wide Web. ,相对URL lastpage.htm与该HTML文件位于同一目录下,Example17.html,绝对URL 要访问的HTML文件与该HTML文件不位于同一目录下,Linking,44,Linking,With the target attribute, you can define where the linked document will be opene
19、d.Target attribute在新窗口打开连接Target=“_blank”,45, Title of Page lastpage ,Example18.html,Linking,46, Title of Page lastpage ,Example19.html,Linking,mailto: tells browser to load default email client with given address,47,Image,In HTML, images are defined with the tag.Element img attributes Attribute src
20、Image locationAttribute height Image height Attribute width Image widthAttribute alt Defines text if image cannot be displayed,48, ,Example22.html,49,Use an image as a link, You can also use an image as a link: ,Example23.html,50,HTML list 列表,List 用于例举事实,常用的列表有3种格式:无序列表 (unordered list)有序列表(ordered
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 太原理工大学Web程序设计基础 第二章HTMLppt课件 太原 理工大学 Web 程序设计 基础 第二 HTMLppt 课件
![提示](https://www.31ppt.com/images/bang_tan.gif)
链接地址:https://www.31ppt.com/p-1918563.html