外文翻譯--html tutorial - preface 原文

上傳人：奔*** IP屬地：河北更新時間：2024-03-02 格式：doc 頁數(shù)：10 大小：59.50KB 人氣指數(shù)：12 舉報 版權申訴

已閱讀1頁，還剩9頁未讀，繼續(xù)免費閱讀

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、　　HTML Tutorial - Preface　　Html 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 Hyp

2、erText Markup Laguage.The only use for Html is for writing web pages. A web page is really a program, only a very simple one. What is easy about HTML is that: 1. There is no compiling, and 2. It is simple coding only. Th

3、ere 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 tu

4、torial, 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 ord

5、inary Notepad, so you don't need anything special. 　　If you do not already have a web browser, you can download: Netscape at www.netscape.com 　　MSIE at www.microsoft.com <

6、/p>　　HTML Tutorial - Chapter 1 Tags, and the Skeleton Layout　　Before anything, HTML is written in tags. Tags are like the command words that make up the language. A tag is written like

7、this: <tag>. An example tag would be <bold>, <html>, <title>, <hr> and others. The entire code is made up mostly of tags, tags tell the web page what to do. Sometimes a tag starts something,

8、 like for instance <bold> will make all the text after it turn bold. Or <title> will make anything after it become the title. But in some instances, like section tags, you will need to en

9、　　One good thing about HTML is that it always follows one layout. The following layout is an entire Html web page: 　　<html>　　<head></b&

10、gt;　　<title>This is the Title!</title>　　</head>　　<body>　　Welcome to my Web

11、-Page!　　</body>　　</html>　　This is the basic code, called a skeleton layout. You should always start your Ht

12、ml code in that way. Now lets explain some of the tags. The tags you saw in the example are used only once usually. Here is just an explanation of the layout tags. Each tag in the skeleton layout starts or ends a section

13、. A section in Html declares when a certain part of the Html code is beginning. 　　<html> - Starts the Html section. (Begins the page)　　<head> - Starts the Header sect

14、ion. 　　<title>This is the Title!</title> - Starts (and ends) the title section.　　<body> - Starts the Body section. (Main part of page)　　<

15、;/body> - Ends the Body section.　　</html> - Ends the page.　　The Html section contains the entire code. The Header section contains the Title section, and some other stuf

16、f. The title section contains the text that goes in the title bar at the top of the browser window, like "'Welcome to My Page!' -Netscape." The body section is the main part of the page that contains al

17、l the text that appears in the page. 　　HTML Tutorial - Chapter 2 Body Attributes　　The Body tag has more to it than just <body>. The <body> tag also controls the colo

18、r of the page text, the background of the page, and others. An attribute to any tag (in this instance, it will be the <body> tag) is an extra keyword that can be set inside the tag that allows for certain things to

19、 be set. 　　To set a body attribute, like the background of the page, you simply include the option in the <body> tag and what it is set to. 　　Example: &l

20、t;/p>　　<body BGCOLOR="blue" text="black" link="yellow" alink="green"　　vlink="white"> 　　There are a few body

21、attributes that you will learn for now. Background, text, link, and active link. 　　The Background is controlled with either BGCOLOR="color" or 　　BACKGROUND="http:/

22、/www.examplesite.com/background.gif" 　　If the Background you want is a solid color, like black, blue, white, red, etc, you use the BGCOLOR option. BGCOLOR accepts BGCOLOR="blue" (a col

23、or 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

24、white is limited to simple colors. A few simple colors are blue, white, black, green, yellow, orange.... Mostly first, secondary, and tertiary colors. The BACKGROUND option is for if you want to use a picture as a backgr

25、ound. You must use the URL of the picture, like: 　　<body BACKGROUND="http://www.testsite.com/puppy.jpg"> 　　Graphics in any web page must be in either GIF (.gif) o

26、r JPEG (.jpg) format. The next option is text. Text is the color of all normal text in the page. It follows this format: text="color" or text="hexnumber." This follows the same routine as in

27、　　Background; 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. It's format is the

28、same as the text option. 　　The next is alink. This is the color of a link that is being clicked on. For example, if　　there is a link to www.microsoft.com and you click on it, unt

29、il you let go, that link　　will turn to the alink color. It follows the same format as the text option. 　　The last option you will learn is vlink. Vlink sets the color of all link

30、s 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

31、 Tutorial - Chapter 3 Text Tags　　Now that you've learned body options, 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 tag

32、s and how they work. Tags are important to text because they can change the way text looks, and acts. Lets take a look at an example to learn a few basic tags. 　　<html></p

33、>　　<head>　　<title>Text Example</title>　　</head>　　<body BGCOLOR="black&quo

34、t; text="white">　　This is my first, ordinary paragraph.　　This is my second, bold paragraph.　　<i

35、>This is my third, italics paragraph.　　This is my fourth, underlined paragraph.　　<blink>This is my fifth, BlInKiNg paragra

36、ph.</blink>　　<center>This is my last, centered paragraph.</center>　　</body>　　</html></

37、p>　　The tag stands for paragraph. It starts text on a new line. Without , all the text would be in one line and wrapped around, and it would look pretty messed up.　　I

38、n the second paragraph, there was a (or <bold> 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 didn't end

39、a bold tag, everything after the would be bold, even text that you didn't want to be bold. To end a tag (stop what a tag is going, use this format: </tagname>. Thus, to end a bold tag, you use </bo

40、ld> (or for short, ). 　　 stands for Italics. Anything after and before will become italic, or slanted. 　　 stands for underline

41、d. Anything after and before is underlined. 　　<center> sets the alignment for text. You could also center text by using <p　　align="center"&

42、gt;Centered Text, but <center> is a lot easier. Center makes text　　go in the center of the screen. 　　You can also use:　　<p align="lef

43、t">This sets alignment to the left.　　This sets alignment to the right of the screen. 　　NOTE: If you use opt

44、ion, like to set alignment, in order to stop it's effect you must end it, by using . 　　<blink> makes text blink repeatedly. Be careful not to overdo the blink tag, as it can tend

45、to get very annoying. Here are a few more text tags with brief explanations. You can experiment with　　them: 　　<tt> - Teletype　　<p

46、re> - Predefined. HTML usually ignores extra spaces which can be bad for　　documents which depend on independent formatting.　　<big> - Makes text generally big.

47、　　 - Hm...　　<s> - Strikethrough, makes a horizontal line through the center of the selection.　　<su> - Superscript.　　<fo

48、nt> - Controls font, and can also make text bigger than possible with just <h1>.　　I.e. or <font color="color&qu

49、ot;> <font　　color="#hexcol">. means the actual font, like Courier.　　It is also possible to combine tags on text. For example: &l

50、t;/p>　　This is slanted, bold, and underlined! 　　Now you will learn how to change the size of text. It follows the same format of

51、 <bold> or <italics>; <tag>Modified text</endtag>, and they too can be combined with <bold> <italics> or whatever as a combination: 　　<html></b&g

52、t;　　<head>　　<title>Text Sizes</title>　　</head>　　<body BGCOLOR="bla

53、ck" text="white">　　<h1>This is HUGE!</h1>　　<h2>This is big.</h2>　　<h3>This is a li

54、ttle large.</h3>　　<h4>This is normal.</h3>　　<h5>This is quite small.</h5>　　<h6>This is TINY.&l

55、t;/h6>　　To modify text size, as you saw, the tag is <h(1-6)>Text</h(1-6). Text sizes range from 1 to 6, 1 huge, 6 tiny. These tags can be combined with <bold> or <italic> or w

56、hat have you, so that you could get a huge, bold, italic, and underlined text. 　　A few tags don't modify text, but they do put something into the body, such as a line. To put a line, which can ni

57、cely seperate a section on your page, like if you had a table of contents and a story paragraph. To put in a line, use <hr> anywhere you want. Example: 　　<html></p&g

58、t;　　<head>　　<title>A line!</title>　　</head>　　<body BGCOLOR="black" text

59、="white">　　Section1　　<hr>　　(Seperated) Section 2　　</body></b&g

60、t;　　</html>　　HTML Tutorial - Chapter 4 Images　　No page is a page without images, or graphics, Images give an entire light to a web

61、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 example: 　　<html&g

62、t;　　<head>　　<title>Graphics!</title>　　<body BACKGROUND="http://www.lala.com/smileyfaces.jpg">&

63、lt;/p>　　This page has graphics!　　<img src="http://www.lalasite.com/puppy.gif">　　<img src="http://www.lalasitee.co

64、m/kitty.jpg">　　</body>　　</html>　　A few rules of images:　　#1. When linking to A

65、NY URL (such as www.lalasite.com/puppy.gif), you must ALWAYS have http:// unless the picture is in your web site server. If it is a local picture, (in your server account), the link can just be puppy.gif or kitty.jpg. &l

66、t;/p>　　#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, it

67、's a safe bet to use GIF or JPG image files. 　　#3. Pictures can be formatted in a few ways. Two text tags can format a picture, and <center>. If you want to start a picture on a n

68、ew line, or center it, you can use or <center> to do so. <img src> tag has a few options to change the size of a picture, if you wanted to make a thumbnail sized preview of a picture for example. Th

69、e format is <img src="http://www.site.com/picture.jpg"　　height="pixelnumber" width="pixelnumber>. 　　#4. Pictures must be uploaded onto a server. Ju

70、st because a picture is on your computer doesn't mean that everyone can see it. It has to be on a webserver, otherwise only you will be able to see it. 　　HTML Tutorial - Chapter 5 Linking Pages&l

71、t;/p>　　If you want to have multiple pages, or want to link to a favorite site of yours, you must place a link in your page. A link is easy to do: 　　<a href="http://adress"&

72、gt;Click here to go!</a> 　　Anything between the <a href> tag and the </a> tag becomes a link. When you click on a link, it takes you to the page. Here are some examples:

73、　　<a href="http://www.yahoo.com">Yahoo!</a>　　<a href="http://members.tripod.com/~mach8>Cool page!</a>　　Note: In

74、 the address part of <a href>, the http:// is required unless you are 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 <a href="

75、hobbies.html">My Hobbies!</a> 　　The following will not work:　　<a href="www.yahoo.com">Yahoo?</a> 　　The same goes for link

76、ing pictures in chapter 4 　　You can make pictures link to sites as well:　　<a href="http://www.somesite.com/apage.html"><img src="apicture.gif&quo

77、t;> 　　Some browsers automatically place a border around images that are links. To disable this, put border=0 in the tag. 　　HTML Tutorial - Chapter 6<b&

78、gt;　　Tables　　Tables 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 sm

79、aller sections, called cells. 　　To start a table you begin with a tag, <table>. <table> declares a few things about the table. The things are defined by using them as options in the tag.

80、For example,　　<table width=4 height=3 cellspacing=4 cellpadding=5 border=3> In a table a cell is a square in the table that contains html code that is confined to that small square.

81、　　NOTE: The cell size is determined 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 ho

82、w 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 the spacing is. Border is how wide the border is. Border=0 m

83、eans no border. 　　Now you must make the cells. It's very easy. To start cells on a new row, you use the <tr> tag. To make a cell, use the <td> tag. After a row is done, you must </

84、tr>. After a cell is done, you must </td> Rows/Cells should go with the height and width. 　　Example: 　　<html><

85、p>　　<head>　　<title>Tables!</title>　　</head>　　<body BGCOLOR="black" text="w

86、hite">　　<table border=3 height=2 width=2>　　<tr>　　<td>Cell1</td>　　<td>Cell2</

87、td>　　</tr>　　<tr>　　<td>Cell3></td>　　<td>Cell4</td></p&

88、gt;　　</tr>　　</table>　　</body>　　</html></p&g

89、t;　　HTML Tutorial - Chapter 7　　Forms and Buttons　　Interactivity depends on... well... being able to interact and input. Enter forms and buttons. Forms and buttons allo

90、w you to put questionaires on your page, find out whose using it, and if you get really good and learn cgi, run programs on your page. 　　For now we'll do the basics because anything advanced woul

91、d involve CGI – a totally different programming language requiring another tutorial... You don't want to get into that right now. 　　The initial tag is <form>. <Form> has somoe attribu

92、tes that define what the form does. There are 2 attributes you will learn now. Action, and Method. To define an attribute, like any other tag, you use <form action="option" method=option>.Action is the ad

93、dress 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 <a href>. So <form &

94、lt;p>　　action="mailto:pstein@nettaxi.com"> would send form information to that email. Method is whether the form is getting information or posting it. Get is only for CGI really, so all you need to put no

95、w is post. Before the </form>, you must use the <input> tag to put in the actual form data　　that needs to be filled out. There are several kinds of form inputs. 　　Fo

96、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 it's own sub attributes. Just follow the examples. All form types have name attribute. Any info

97、rmation is listed under that name, and CGI can depend on it. Just set it to whatever job it fits, like "Name", "Address","FavFood." 　　Text - Normal one line text input &

98、lt;input name="test" type=text size=50 max=80 value="Default text"> 　　Size is how many charachters the box is. 　　Max is how many charachters the box can sc

99、roll horizontally, even past size. 　　Value is the default text. It can be omitted if desired.　　Password - Exactly identical to Text, only any input is shown as **** to the user.&

100、lt;/p>　　Textarea - Large text box input, can be used for comment forms. 　　<input textarea name="test2" cols=50 rows=50> 　　Cols are how many columns

101、of text the box can have.　　Rows are how many rows of text the box can have 　　Submit - Sends form to action　　<input type=submit name=submit value="Sen

102、d now!"> 　　Submit makes a button with the value that, when clicked, will activate the form and do whatever is defined in <form> 　　Reset - Clears all data Same as su

103、bmit, only it will clear all <inputs> inside the <form> tag. 　　Radio - Makes a list of radio buttons in which only 1 can be used, for multiple choice questions. 　　<

104、;input type=radio name="gender" value="F">Female To define a "set" of radio buttons, i.e. in which inputs can only 1 be selected, give them all the same name, just different values. </

105、p>　　Checkbox - Makes a checkbox with a yes/no question　　<input type=checkbox name="moreinfo" value="yes" checked> 　　Hidden - Delivers pred

106、efined text without asking the user.　　<input type=hidden name="totalsalessofar" value="54.50"> 　　The hidden option is usually only used with CGI. </p

107、>　　HTML Tutorial - Chapter 8 E-Mailing　　It is possible to make a link that allows people to e-mail you or someone else directly from your webpage, assuming they have a compatible web b

108、rowser. 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, you'll learn how to add for

109、m e-mailing later) is a link　　tag. If you remember, a link tag follows this format: 　　<a href="http:www.dummysite.com">Click here!</a>.

110、;　　An e-mail link tag is slightly different. It follows this format: 　　<a href=mailto:user@address.com>Click here to e-mail me!</a> 　　For example, <p&g

111、t;　　<a href=mailto:pstein@nettaxi.com>Pete's E-mail</a> Like it's said in Chapter 5, an image can also be a link to an e-mail address, example: <a href=mailto:me@site.com　　<

112、img src="http://www.site.com/mailme.jpg"></a>　　If someone clicks on the link, it will open their mail program to send you comments! 　　HTML Tutorial - Chapter 9

113、 Frames　　Frames are features 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 se

114、ction 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 to use the frameset tag: <frameset> Some options will be used in fr

115、ameset 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: </frameset>

眾賞文庫> 全部分類> 畢業(yè)設計

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
5. 眾賞文庫僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

本站為文檔C2C交易模式，即用戶上傳的文檔直接被用戶下載，本站只是中間服務平臺，本站所有文檔下載所得的收益歸上傳人(含作者)所有。眾賞文庫僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對上載內容本身不做任何修改或編輯。若文檔所含內容侵犯了您的版權或隱私，請立即通知眾賞文庫，我們立即給予刪除！

備案號: 經(jīng)營許可證編號:浙ICP備20018660號

/ 10

  0
 分享

復制分享文檔地址

http://canyonlakefaqs.com/shtml/view-3420121.html

復制

下載本文檔

外文翻譯--html tutorial - preface 原文

文檔簡介

溫馨提示

最新文檔

評論

外文翻譯--html tutorial - preface 原文

文檔簡介

溫馨提示

最新文檔

評論

免費下載