HTML

To link a file, <html> <body> <a href="http://www.yahoo.
com"> This is a link</a> </body> </html>
To insert an image, <html> <body> <img src="C:/s nset.!pg" width=""#$" height=""$%" /> </body> </html>
Theory,

&n 'T() element starts with a start tag / opening tag &n 'T() element ends with an end tag / closing tag The element content is e*erything between the start and the end tag +ome 'T() elements ha*e empty content ,mpty elements are closed in the start tag (ost 'T() elements can ha*e attrib tes
The e-ample abo*e will work in most browsers, b t don.t rely on it. /orgetting the end tag can prod ce ne-pected res lts or errors. &dding a slash to the start tag, like , is the proper way of closing empty elements, accepted by 'T(), 0'T().

'T() elements can ha*e attrib tes &ttrib tes pro*ide additional information abo t the element &ttrib tes are always specified in the start tag &ttrib tes come in name/*al e pairs like: name="*al e"
'tml headings, <html> <body> <h">This is heading "</h"> <h%>This is heading %</h%> <h1>This is heading 1</h1> <h$>This is heading $</h$> <h2>This is heading 2</h2> <h3>This is heading 3</h3> </body> </html>
Theory, 4rowsers a tomatically add an empty line before and after headings. '" headings sho ld be sed as main headings, followed by '% headings, then less important '1 headings, and so on.
5aragraphs, breaks and hori6ontal r les <html> <body> This is a para graph with line breaks The hr tag defines a hori6ontal r le: <hr /> This is a paragraph <hr /> This is a paragraph <hr /> This is a paragraph </body> </html>
Theory, 4r and hr tags are npaired, tho gh its good to pair, like shown in abo*e eg, which makes it f t re proof.
Comment tag, 7which wo ld be in*isible to the sers, and which ! st remains in the coding8 <9:: This is a comment ::>
Theory, 'ow to ;iew 'T() +o rce: right:click in the page and select ";iew +o rce" 7<nternet ,-plorer8 theory, =ith 'T(), yo cannot change the o tp t by adding e-tra spaces or e-tra lines in yo r 'T() code. The browser will remo*e e-tra spaces and e-tra lines when the page is displayed. ,g": <html> <body> (y 4onnie lies o*er the ocean. (y 4onnie lies o*er the sea. (y 4on nie lies o*er the ocean. >h, bring back my 4onnie to me. ?ote that yo r browser ignores yo r layo t9 </body> </html>
,g%: This paragraph contains a lot of lines in the so rce code,
b t the browser ignores it. This paragraph contains a b t the browser ignores it. lot of spaces in the so rce code,
 The n mber of lines in a paragraph depends on the si6e of yo r browser window. <f yo resi6e the browser window, the n mber of lines in this paragraph will change. 
Theory, 'T() /ormatting Tags 'T() ses tags like and for formatting o tp t, like bold or italic te-t. These 'T() tags are called formatting tags. ,g": <html> <body> This te-t is bold <big>This te-t is big</big> This te-t is italic <code>This is comp ter o tp t</code>
 This is<s b> s bscript</s b> and <s p>s perscript</s p> </body> </html>
,g%: <html> <body> This te-t is bold This te-t is strong <big>This te-t is big</big> This te-t is emphasi6ed 
 This te-t is italic This te-t is small This is<s b> s bscript</s b> and <s p>s perscript</s p> </body> </html>
,g1: <html> <body> <pre> This is preformatted te-t. +pa ces and line <t preser*es both
breaks. </pre> The pre tag is good for displaying comp ter code: <pre> for i = " to "# print i
ne-t i </pre> </body> </html> Theory, The following tags sed prod ces the o tp t in different fonts. ,g$: <html> <body> <code>Comp ter code</code> <kbd>@eyboard inp t</kbd> <tt>Teletype te-t</tt> <samp>+ample te-t</samp> <*ar>Comp ter *ariable</*ar> ?ote: These tags are often sed to display comp ter/programming code. 
</body> </html>
&ddress tag, 7prints in italics and in address form8 <html> <body> <address> Aonald A ck 4>0 222 Aisneyland B+& </address> </body> </html>
&bbr and &cronym tags, e-planation gi*en in the eg itself. <html> <body> <abbr title="Bnited ?ations">B?</abbr> <acronym title="=orld =ide =eb">===</acronym> The title attrib te is sed to show the spelled:o t *ersion when holding the mo se pointer o*er the acronym or abbre*iation. </body> </html>
4do tag with dir attrib te,
<html> <body> <f yo r browser s pports bi:directional o*erride 7bdo8, the ne-t line will be written from the right to the left 7rtl8: <bdo dir="rtl"> 'ere is some 'ebrew te-t </bdo> </body> </html>
<?+ert and Aelete tags, <html> <body> a do6en is <del>twenty</del> <ins>twel*e</ins> pieces (ost browsers will o*erstrike deleted te-t and nderline inserted te-t. +ome older browsers will display deleted or inserted te-t as plain te-t. ;ersion %.# is <s>not yet a*ailable9</s> now a*ailable9 ;ersion %.# is <strike>not yet a*ailable9</strike> now a*ailable9 </body> </html>
4lockC ote and C tags, 7e-planation gi*en in the eg itself8
<html> <body> 'ere comes a long C otation: <blockC ote> This is a long C otation. This is a long C otation. This is a long C otation. This is a long C otation. This is a long C otation. </blockC ote> ?otice that a browser inserts white space before and after a blockC ote element. <t also insert margins for the blockC ote element. <C> 'ere is a short C otation here is a short C otation, no s ch special thing happens for short C ote. </C> </body> </html>
Theory, The p rpose of the style attrib te is: To pro*ide a common way to style all 'T() elements. +tyles was introd ced with 'T() $, as the new and preferred way to style 'T() elements. =ith 'T() styles, styles can be added to 'T() elements directly by sing the style attrib te, or indirectly in separate style sheets 7C++ files8.
style="backgro nd:color:yellow" style="font:si6e:"#p-"
style="font:family:Times" style="te-t:align:center"
/Dold way:::old html formatD/ <html> <body bgcolor="yellow"> <h%>)ook: Colored 4ackgro nd9</h%> /or f t re proof 'T(), se 'T() styles instead: style="backgro nd:color:yellow" </body> </html> /Dold way:::::old html formatD/ <html> <body> This is a paragraph. This is another paragraph. </body> </html>
)inking two pages together, reC ires the ser to create two notepad doc ments, and write in one, <html> <body> <a href="secondpage.htm"> This te-t</a> is a link to the other page yo created </body> </html> &nd sa*e this file with Eonepage.htmlF &nd write on the other, <html> <body> 'ey yo came from first pageGG </body> </html> &nd sa*e this file with Esecondpage.htmlF and open Eonepage.htmlF in the internet e-plorer and click on the appeared link.
Theory, 7?ame attrib te of EaF tag8
=hen the name attrib te is sed, the <a> element defines a named anchor inside a 'T() doc ment. ?amed anchor are not displayed in any special way. They are in*isible to the reader. ?amed anchor synta-: <a name="label">&ny content</a> The link synta- to a named anchor: <a href="Hlabel">&ny content</a> ,gI <html> <body> <a href="HC$">+ee also Chapter $.</a> <h%>Chapter "</h%> This chapter e-plains ba bla bla <h%>Chapter %</h%> This chapter e-plains ba bla bla <h%>Chapter 1</h%> This chapter e-plains ba bla bla <h%><a name="C$">Chapter $</a></h%> This chapter e-plains ba bla bla <h%>Chapter 2</h%> This chapter e-plains ba bla bla </body> </html>
(ail link, 7creates a mail for yo with all the contents written along with s b!ect and ids of all the people to which the mail needs to be sent to8 ,g: <html> <body> This is another mailto link: <a href="mailto:someoneJmicrosoft.comG cc=someoneelseJmicrosoft.comKbcc=andsomeoneelse%Jmicrosoft.comKs b !ect=+ mmerL%#5artyKbody=Mo L%#areL%#in*itedL%#toL%#aL%#big L%#s mmerL%#party9">+end mail9</a> ?ote: +paces between words sho ld be replaced by L%# to ens re that the browser will display yo r te-t properly. </body> </html>
Theory, (o*ing image and a non mo*ing image ha*e the same synta-. <mg is the tag, src is an attrib te.
To incl de backgro nd pict re, ,g: <html> <body backgro nd="backgro nd.!pg">
<h1>)ook: & backgro nd image9</h1> 4oth gif and !pg files can be sed as 'T() backgro nds. <f the image is smaller than the page, the image will repeat itself. </body> </html>
Aifferent alignment codes for the image position and te-t positions, ,g: <html> <body> &n image <img src="C:/s nset.!pg" align="bottom" width="$N" height="$N" /> in the te-t. &n image <img src=" C:/s nset.!pg " align="middle" width="$N" height="$N" /> in the te-t. &n image <img src=" C:/s nset.!pg " align="top" width="$N" height="$N" /> in the te-t. ?ote: The bottom alignment is the defa lt9 &n image <img src=" C:/s nset.!pg " width="$N" height="$N" /> in the te-t. <img src=" C:/s nset.!pg " width="$N" height="$N" /> &n image before the te-t. &n image after the te-t. <img src=" C:/s nset.!pg " width="$N" height="$N" />
</body> </html>
Table tag and its attrib tes, td= table data/definition, tr= table row, This eg creates different tables with different rows and col mns. <html> <body> ,ach table starts with a table tag. ,ach table row starts with a tr tag. ,ach table data starts with a td tag. <h$>>ne col mn:</h$> <table border="""> <tr> <td>"##</td> </tr> </table> <h$>>ne row and three col mns:</h$> <table border="""> <tr> <td>"##</td> <td>%##</td> <td>1##</td> </tr> </table> <h$>Two rows and three col mns:</h$> <table border="""> <tr> <td>"##</td> <td>%##</td> <td>1##</td> </tr>
<tr> <td>$##</td> <td>2##</td> <td>3##</td> </tr> </table> </body> </html> )ists in html, These are of two types nordered and ordered list. >rdered list n mbers the list and nordered attaches a b llet before the list. ,g: <html> <body> <h$>&n Bnordered )ist:</h$> < l> <li>Coffee</li> <li>Tea</li> <li>(ilk</li> </ l> </body> </html> ,g: <html> <body> <h$>&n >rdered )ist:</h$> <ol> <li>Coffee</li> <li>Tea</li> <li>(ilk</li> </ol> </body> </html>
Aefinition )ists & definition list is not a list of single items. <t is a list of items 7terms8, with a description of each item 7term8. & definition list starts with a <dl> tag 7definition list8. ,ach term starts with a <dt> tag 7definition term8. ,ach description starts with a <dd> tag 7definition description8. <dl> <dt>Coffee</dt> <dd>4lack hot drink</dd> <dt>(ilk</dt> <dd>=hite cold drink</dd> </dl> 'ere is how it looks in a browser: Coffee 4lack hot drink (ilk =hite cold drink <nside the <dd> tag yo can p t paragraphs, line breaks, images, links, other lists, etc. 'tml forms, 7This e-ample demonstrates how to create te-t fields on an 'T() page. & ser can write te-t in a te-t field8 <html> <body>
<form > /irst name: <inp t type="te-t" name="firstname"> )ast name: <inp t type="te-t" name="lastname"> </form> </body> </html> 5assword field, 7hides the characters with either b llets or asterisks8 ,g: <html> <body> <form action=""> Bsername: <inp t type="te-t" name=" ser"> 5assword: <inp t type="password" name="password"> </form> ?ote that when yo type characters in a password field, the browser displays asterisks or b llets instead of the characters. </body> </html> Theory, & form is an area that can contain form elements. /orm elements are elements that allow the ser to enter information 7like te-t fields, te-tarea fields, drop:down men s, radio b ttons, checkbo-es, etc.8 in a form.
& form is defined with the <form> tag.?ote that the form itself is not *isible. &lso note that in most browsers, the width of the te-t field is %# characters by defa lt.
Oadio 4 ttons, Oadio 4 ttons are sed when yo want the ser to select one of a limited n mber of choices. <form> <inp t type="radio" name="se-" *al e="male" /> (ale <inp t type="radio" name="se-" *al e="female" /> /emale </form> 'ow it looks in a browser: (ale /emale ?ote that only one option can be chosen. Checkbo-es Checkbo-es are sed when yo want the ser to select one or more options of a limited n mber of choices. <form> < ha*e a bike: <inp t type="checkbo-" name="*ehicle" *al e="4ike" /> < ha*e a car: <inp t type="checkbo-" name="*ehicle" *al e="Car" /> < ha*e an airplane:
<inp t type="checkbo-" name="*ehicle" *al e="&irplane" /> </form> 'ow it looks in a browser: < ha*e a bike: < ha*e a car: < ha*e an airplane:

HTML

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML

Загружено:

Авторское право:

Доступные форматы

To link a file, <html> <body> <a href="http://www.yahoo.

com"> This is a link</a> </body> </html>

4do tag with dir attrib te,

4lockC ote and C tags, 7e-planation gi*en in the eg itself8

style="backgro nd:color:yellow" style="font:si6e:"#p-"

Theory, 7?ame attrib te of EaF tag8

Вам также может понравиться