版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、中英文翻译HTML Tutorial - PrefaceHtml is one of the easiest languages to learn. This tutorial will explain how to write Html webpages, what Html is, and how to program in Html. Html stands for HyperText Markup Laguage.The only use for Html is for writing web pages. A web page is really a program, only a
2、very simple one. What is easy about HTML is that: 1. There is no compiling, and 2. It is simple coding only. There are no functions, loops. Bugs are almost impossible to make and easy to fix.To use Html, you can of course use an Html wizard program which would defeat the whole purpose of this tutori
3、al, or you can use a simple text editor, save the text as an .htm file (or .html for a Macintosh), and view it with your browser, such as Netscape or Microsoft Internet Explorer. This tutorial is being written in ordinary Notepad, so you dont need anything special.HTML Tutorial - Chapter 1 Tags, and
4、 the Skeleton LayoutBefore anything, HTML is written in tags. Tags are like the command words that make up the language. A tag is written like this: . An example tag would be , , , and others. The entire code is made up mostly of tags, tags tell the web page what to do. Sometimes a tag starts someth
5、ing, like for instance will make all the text after it turn bold. Or will make anything after it become the title. But in some instances, like section tags, you will need to end a tag. For example, say you use a tag before a text. Thats all fine and well, but everything after the bold tag will becom
6、e bold. The entire page. You may only want to make one world bold. Therefor you must end a tag which will stop its actions. To stop a tag you use this format: For example: This is bold! This isnt! Youll learn more about other tags in the chapters to come.One good thing about HTML is that it always f
7、ollows one layout. The following layout is an entire Html web page:This is the Title!Welcome to my Web!1This is the basic code, called a skeleton layout. You should always start your Html code in that way. Now lets explain some of the tags. The tags you saw in the example are used only once usually.
8、 Here is just an explanation of the layout tags. Each tag in the skeleton layout starts or ends a section. A section in Html declares when a certain part of the Html code is beginning. - Starts the Html section. (Begins the page) - Starts the Header section.This is the Title! - Starts (and ends) the
9、 title section. - Starts the Body section. (Main part of page) - Ends the Body section. - Ends the page.The Html section contains the entire code. The Header section contains the Title section, and some other stuff. The title section contains the text that goes in the title bar at the top of the bro
10、wser window, like Welcome to My Page! -Netscape. The body section is the main part of the page that contains all the text that appears in the page.HTML Tutorial - Chapter 2Body AttributesThe Body tag has more to it than just . The tag also controls the color of the page text, the background of the p
11、age, and others. An attribute to any tag (in this instance, it will be the tag) is an extra keyword that can be set inside the tag that allows for certain things to be set.To set a body attribute, like the background of the page, you simply include the option in the tag and what it is set to.Example
12、:There are a few body attributes that you will learn for now. Background, text, link, and activelink.The Background is controlled with either BGCOLOR=color or2If the Background you want is a solid color, like black, blue, white, red, etc, you use the BGCOLOR option. BGCOLOR accepts BGCOLOR=blue (a c
13、olor name), or BGCOLOR=Hexadecimal number.A Hex number can do more variant colors, such as gold, turquoise, navy blue, and most other colors, while just typing a color name like blue or white is limited to simple colors. A few simple colors are blue, white, black, green, yellow, orange Mostly first,
14、 secondary, and tertiary colors.The BACKGROUND option is for if you want to use a picture as a background. You must use theURL of the picture, like:Graphics in any web page must be in either GIF (.gif) or JPEG (.jpg) format. The next option is text. Text is the color of all normal text in the page.
15、It follows this format: text=color or text=hexnumber. This follows the same routine as inBackground; a color name will accept simple colors, a hex number can do more exotic colors. The next option is link. This is the color of all links on the page. Its format is the same as thetext option.The last
16、option you will learn is vlink. Vlink sets the color of all links that have been visited in the past. It follows the same format as the text option.NOTE: If you leave out an option in the Body tag, it will be set to a default color.HTML Tutorial - Chapter 3 Text TagsNow that youve learned body optio
17、ns, you can now learn how to add text to the body section, and how to make it look FuNkY! Before, you learned a little about tags and how they work. Tags are important to text becausethey can change the way text looks, and acts. Lets take a look at an example to learn a few basic tags.Text ExampleTh
18、is is my first, ordinary paragraph.3This is my second, bold paragraph.This is my third, italics paragraph.This is my fourth, underlined paragraph.This is my fifth, BlInKiNg paragraph.This is my last, centered paragraph.The tag stands for paragraph. It starts text on a new line. Without , all the tex
19、t would be in one line and wrapped around, and it would look pretty messed up.In the second paragraph, there was a (or for full) tag. Bold makes all text inside of it become bolder. As you learned before, some tags need to be ended. This is one of them. If you didnt end a bold tag, everything after
20、the would be bold, even text that you didnt want to be bold. To end a tag (stop what a tag is going, use this format: . Thus, to end a bold tag, you use (or for short, ). stands for Italics. Anything after and before will become italic, or slanted. stands for underlined. Anything after and before is
21、 underlined. sets the alignment for text. You could also center text by using Centered Text, but is a lot easier. Center makes textgo in the center of the screen.You can also use:This sets alignment to the left.This sets alignment to the right of the screen.NOTE: If you use option, like to set align
22、ment, in order to stop its effect you must end it, by using . makes text blink repeatedly. Be careful not to overdo the blink tag, as it can tend to get very annoying. Here are a few more text tags with brief explanations. You can experiment withthem: - Teletype - Predefined. HTML usually ignores ex
23、tra spaces which can be bad fordocuments which depend on independent formatting. - Makes text generally big. - Hm. - Strikethrough, makes a horizontal line through the center of the selection. - Superscript.4 - Controls font, and can also make text bigger than possible with just . I.e. or . means th
24、e actual font, like Courier.It is also possible to combine tags on text. For example:This is slanted, bold, and underlined!Now you will learn how to change the size of text. It follows the same format of or ; Modified text, and they too can be combined with or whatever as a combination:Text SizesThi
25、s is HUGE!This is big.This is a little large.This is normal.This is quite small.This is TINY .To modify text size, as you saw, the tag is Text/h(1-6). Text sizes range from 1 to 6, 1 huge, 6 tiny. These tags can be combined with or or what have you, so that you could get a huge, bold, italic, and un
26、derlined text.A few tags dont modify text, but they do put something into the body, such as a line. To put a line, which can nicely seperate a section on your page, like if you had a table of contents and a story paragraph. To put in a line, use anywhere you want. Example:A line!Section1(Seperated)
27、Section 25HTML Tutorial - Chapter 4ImagesNo page is a page without images, or graphics, Images give an entire light to a web page, not to mention setting the atmosphere for the page. Images are quite simple. Any image must be in either JPEG or GIF format. To put an image in a page, here is an exampl
28、e:Graphics!A few rules of images:#2. The general primary formats for web graphics are GIF and JPG. Some browsers (like IE) might support things like BMP, and newer browsers have limited support for the PNG format, but to be sure, its a safe bet to use GIF or JPG image files.height=pixelnumber width=
29、pixelnumber.#4. Pictures must be uploaded onto a server. Just because a picture is on your computer doesnt mean that everyone can see it. It has to be on a webserver, otherwise only you will be able to see it.6HTML Tutorial - Chapter 5 Linking PagesIf you want to have multiple pages, or want to link
30、 to a favorite site of yours, you must place a link in your page. A link is easy to do:Click here to go!Anything between the tag and the tag becomes a link. When you click on a link, it takes you to the page. Here are some examples:Note: In the address part of , the http:/ is required unless you are
31、 linking to a page on your site. If you have a page called myhobbies.html in your web page directory, you can do something like My Hobbies!The following will not work:The same goes for linking pictures in chapter 4You can make pictures link to sites as well:Some browsers automatically place a border
32、 around images that are links. To disable this, put border=0 in the tag.HTML Tutorial - Chapter 6TablesTables are effective in making graphical or text presentations look sharp. It can nicely organize a list of data. They form boxes around whatever you want and can split into smaller sections, calle
33、d cells.To start a table you begin with a tag, . declares a few things about the table. The things are defined by using them as options in the tag. For example,7 In a table a cell is a square in the table that contains html code that is confined to that small square.NOTE: The cell size is determined
34、 by whats in it. If you have Hi! the cell will be small. If you have the entire Constitution, it will be a tad bit longer.Width declares how many cells wide the table is. Height declares how many cells tall the table is. Cellspacing is how much space is between cells, and cell padding is how thick t
35、he spacing is. Border is how wide the border is. Border=0 means no border.Now you must make the cells. Its very easy. To start cells on a new row, you use the tag. To make a cell, use the tag. After a row is done, you must . After a cell is done, you must Rows/Cells should go with the height and wid
36、th.Example:Tables!Cell1Cell2Cell3Cell4HTML Tutorial - Chapter 7Forms and ButtonsInteractivity depends on. well. being able to interact and input. Enter forms and buttons. Forms and buttons allow you to put questionaires on your page, find out whose using it, and if you8get really good and learn cgi,
37、 run programs on your page.For now well do the basics because anything advanced would involve CGIa totally differentprogramming language requiring another tutorial. You dont want to get into that right now.The initial tag is . has somoe attributes that define what the form does. There are 2 attribut
38、es you will learn now. Action, and Method. To define an attribute, like any other tag, you use .Action is the address of what the form does.Mainly it is used for cgi, but there is another use for forms, and that is email comments. A form action can be sent to a mailto address just like in . So would
39、 send form information to that email. Method iswhether the form is getting information or posting it. Get is only for CGI really, so all you need to put now is post. Before the , you must use the tag to put in the actual form datathat needs to be filled out. There are several kinds of form inputs.Fo
40、rm uses attributes to. Here is a list of the initial ones. There will be an example for each one to follow. Each one has its own sub attributes. Just follow the examples. All form types have name attribute. Any information is listed under that name, and CGI can depend on it. Just set it to whatever
41、job it fits, like Name, Address,FavFood.Text - Normal one line text input Size is how many charachters the box is.Max is how many charachters the box can scroll horizontally, even past size.Value is the default text. It can be omitted if desired.Password - Exactly identical to Text, only any input i
42、s shown as * to the user.Textarea - Large text box input, can be used for comment forms. Cols are how many columns of text the box can have. Rows are how many rows of text the box can have Submit - Sends form to actionSubmit makes a button with the value that, when clicked, will activate the form an
43、d do whatever is defined in Reset - Clears all data Same as submit, only it will clear all inside the tag. Radio - Makes a list of radio buttons in which only 1 can be used, for multiple choicequestions.Female To define a set of radio buttons, i.e. in which inputs can only 1 be selected, give them a
44、ll the same name, just different values.Checkbox - Makes a checkbox with a yes/no question9Hidden - Delivers predefined text without asking the user. The hidden option is usually only used with CGI.HTML Tutorial - Chapter 8E-MailingIt is possible to make a link that allows people to e-mailyou or som
45、eone else directly fromyour webpage, assuming they have a compatible web browser. It would be rare for any browser to not support e-mailing. You probably have Netscape or MSIE, but even text based web browsers (Lynx) support mailing. Mailing (in its simple form, youll learn how to add form e-mailing
46、 later) is a linktag. If you remember, a link tag follows this format:An e-mail link tag is slightly different. It follows this format:Click here to e-mail me!For example,If someone clicks on the link, it will open their mail program to send you comments!HTML Tutorial - Chapter 9 FramesFrames are fe
47、atures of html that create mini sections inside a browser. These frames are relatively like individual windows inside the main browser window. Frames are used to divide-off a section of the page to be used for a menu bar, or an advertisement, or anything.In order to start a set of frames, you need t
48、o use the frameset tag: Some options will be used in frameset to define how wide the frames are and how tall they are, not to mention how many of them there are. Later on when you want to end this tag, you will use the end frameset tag: 10One last note: The placement of the form tags go before the t
49、ag. After the frameset tag is finished, anything else in the body is displayed to browsers that do not support frames.Lets start with an example:My Page Your browser is way to old! Get a new one!The frameset format goes as follow: It has 2 possible attributes. rows, and columns. This sets how many r
50、ows and columns there are for frames. The two attributes can be set according to this format: rows=number, number/* and columns=number, number/*. They can both be used in the same frameset. Each can have as many numbers as you want. For example, setting rows=10,10,10,10,* would make 4 very small row
51、s, and then one large row. * stands for what ever is left. So making columns=50,10,* would make one large column, one small column, and one huge column.Note: You should not use rows and columns in the same frameset. It gets confusing. If you get good, try experimenting with embedding a second frames
52、et inside another so that you can have rows and columns.After frameset, the frames are defined in order. In the example, there are 2 columns defined, one column is small at 20%, and the other (remember * is whatever is left) is 80% because of course, 100% - 20% = 80%. The frames themselves are defin
53、ed in order, so the first will be the small column, and the second will be the large one.The frame tag is used to declare a frame and special options for the frame, like how to make it so that there are no bars, or maybe make it so that it cant beresized.Frame attributes/options:src - This is the ht
54、ml page of the frame you want to put in.11 for - This is a keyword used to define a frame. Say you had a menu frame and wanted it so that whenever you click a link on the menu, it opens the page you want in the main frame (the large one, if you make a large one), instead of the menu. You simply put
55、target=framename in the tag, and its that simple. for example.noresize - Sets it so that the frames boder lines cannot be changed. for example.scrolling - Can the frame have scrolling? Sometimes you want scrolling off if Netscape automatically scrolls a title bar or something that you want to stay s
56、till. for example. Auto would mean that the browser would use its best judgement to decide whether the frame needed scrolling.border - How wide should the lines forming the frames be? Making invisible lines makes the page look nice because it looks like the page is solid, but you can make nice use o
57、f a menu system, and also you can have 2 different backgrounds next to each other.marginwidth - How wide the frames margin is.marginheight - How tall the frames margin is. for example.After the tags are done, thats it. Use the tag to finish off the frame syntax. Anything put in the body tag after a
58、frameset will be considered old browser text. For example, if someone enters your page with Lynx (a Unix/Linux text web browser), or Netscape 1.0 (a very old version of Netscape without frame support) then all theyd see is a blank page. But by putting something like: This page uses frames, please ge
59、t a new browser. They will be able to read that and know that your page isnt empty, it just uses frames that they cant access. You could even put a text version of your main page, so that everyone could access your site regardless of browser (an ideal thing to do).12HTML语言指南绪言Html 语言是一种极易学的语言。本绪言将介绍
60、如何编辑Html 网页,什么是 Html 语言 ,还有如何用 Html 语言编程。 Html 语言表示超文本标签语言。 它的唯一用处是编辑网页。一张网页其实就是一个程序,只不过非常极其简单罢了。HTML语言的方便之处在于: 1. 不需要编译;2. 仅有简单的代码。没有函数和循环。几乎不可能产生Bugs ,即使有,也不容易修复。为了使用 Html 语言,你当然可以使用效果比本绪言的目的还强的Html 语言向导或者用一个简单的文本编辑器,将其保存为扩展名为.htm文件(或者适合于Macintosh 机的.html 文件),然后用你的浏览器如 Netscape 或者 Microsoft Intern
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 年会策划范文集锦6篇
- 大学生实习报告范文锦集5篇
- 金融专业学生自我鉴定6篇
- 背手上铐的课件
- 建设监理合同(合集15篇)
- 2022大学生三下乡社会实践服务报告范文8篇
- 企业年终个人工作总结2021年
- 反心灵鸡汤课件
- 学校感恩节策划方案
- 节约粮食主题演讲稿
- 案例2-5 节能效果对比讲解
- 荆楚民艺智慧树知到期末考试答案章节答案2024年湖北第二师范学院
- SH/T 3065-2024 石油化工管式炉急弯弯管工程技术规范(正式版)
- 穿脱隔离衣的流程及注意事项
- GB/T 43878-2024旋挖钻机截齿
- 四年级语文上册期末试卷(下载)
- 拼多多营销总结报告
- 手术室护士交接流程
- 中式面点技艺智慧树知到期末考试答案2024年
- 干槽症的治疗方案
- 危险化学品安全使用说明书
评论
0/150
提交评论