Sunteți pe pagina 1din 17

Basic HTML Coding Document Elements -- These are the tags that set up the sections of a web

page, as well as identifying it as a web page. Base elements: <html>< html> -- defines the page as an html document <head>< head> -- area at the beginning that pro!ides information to the browser, but does not show on the page <title>< title> -- element within heading that shows the title of the page. This is the title that shows on the top of the browser and for boo"mar" purposes, but does not appear on the page itself. <body>< body> -- defines the actual body of the page #ere$s how the basic format for a web page could loo": <html> <head> <title>%y &eb 'age< title> < head> <body> %ain body of the page, with te(t, pictures, etc. < body> < html> Elements in the Body Tag: )ou can add a lot of style to your document by adding or changing things within the body tag *simply include them in the opening body tag before the +>+ #ere are some optional elements: *in all cases, you may pic" whate!er color you wish,. te(t-+.//////+ ma"es te(t on the page blac" lin"-+.00////+ ma"es un!isited lin"s on the page red !lin"-+.//00//+ ma"es pre!iously !isited lin"s green alin"-+.////00+ ma"es lin"s in the process of being clic"ed blue bgcolor-+.000000+ ma"es the bac"ground color of the page white bac"ground-+123.gif+ uses a gif image and tiles it to be the bac"ground of the page #ere$s how the body tag might loo" with se!eral elements: <body bgcolor-+.000000+ lin"-+.00////+ !lin"-+.//00//+ alin"-+.////00+> 4ote: There are a number of other tags which can go into the +head+ tag *li"e the +meta+ tag, for !arious functions, but we$ll wait for later to discuss those. &hat you ha!e here is enough to design most pages.

5imple Tags -- 5imple tags ma"e something happen at a point in the document,
such as a line brea", as opposed to affecting a portion of the document *li"e ma"ing some te(t bold,. To affect a portion of a document, you use container tags. %ost tags are container tags. 6

Tag <br>

Name 3ine Brea"

Format of code used in example 7tem 6 <br>7tem 8 <br>7tem 9

How it loo s 7tem 6 7tem 8 7tem 9 7tem 6 7tem 8

<br>

3ine Brea"

7tem 6 <br><br>7tem 8

<p>

'aragraph

'articularly useful for setting apart paragraphs of te(t.<p>The paragraph tag gi!es the e:ui!alent of a double return. )ou generally do not want to use multiple paragraph tags. 1se line brea" to mo!e down a number of lines.<p>The paragraph tag can also be a container.

'articularly useful for setting apart paragraphs of te(t. The paragraph tag gi!es the e:ui!alent of a double return. )ou generally do not want to use multiple paragraph tags. 1se line brea" to mo!e down a number of lines. The paragraph tag can also be a container.

<hr>

#ori;ontal 2ule #ori;ontal 2ule <ptions

This places a line <hr> across your document <hr noshade> <hr width-8=> <hr si;e-=> <hr width->/ align-left> <hr noshade width-9= si;e->>

This places a line across your document

<hr>

?ontainer Tags -- ?ontainer tags are used to affect a certain portion of your
material. They utili;e the on off approach. ?ontainer tags operate on the material between the opening tag < tag> and the closing tag < tag> !tart tag <b> End Tag < b> Format of code used in example This is for <b>bold< b> te(t How it loo s This is for "old

te(t <strong> < strong> <strong>5trong< strong> is similar to bold but may depend on the browser This is for <i>italic< i> te(t <cite>?ite< cite> is similar to italic 5o is <em>Emphasis< em> but may depend on browser <center>?enters the te(t< center> 2ight aligned paragraph. <p align-right>)ou can use the +p+ tag as a container to align te(t to the right< p> !trong is similar to bold but may depend on the browser This is for italic te(t Cite is similar to italic 5o is Emphasis but may depend on browser ?enters the te(t 2ight aligned paragraph. )ou can use the +p+ tag as a container to align te(t to the right 1se bloc":uote to indent a section of te(t from both sides. @reat for :uoted sections in a paper. Also !ery effecti!e to use on an entire page to "eep things from getting too close to the edge.

<i> <cite> <em>

< i> < cite> < em>

<center> <p align-right>

< center> < p>

<bloc":uote>

< bloc":uote >

<bloc":uote> 1se bloc":uote to indent a section of te(t from both sides. @reat for :uoted sections in a paper. Also !ery effecti!e to use on an entire page to "eep things from getting too close to the edge.< bloc":uote>

<h9>

< h9>

<#9>1se #6 or #8 or #9 etc. for headings< #9>7t automatically adds a paragraph brea" after the

Use H1 or H2 or H3

heading. 4ote: 6 is largest.

etc. for headin gs


7t automatically adds a paragraph brea" after the heading. 4ote: 6 is largest.

<font si;e-B8>

< font>

7ncreases <font si;e-B8>font si;e< font> by the amount of the number. )ou can also use <font si;e-8>negati!e< font> numbers.

7ncreases font

si;e by the
amount of the number. )ou can also use negati!e numbers. ?hanges

<font si;e-C>

< font>

?hanges <font si;e-C>font si;e< font> to a specific si;e. #igher numbers are larger font si;e.

font si;e to a
specific si;e. #igher numbers are larger font si;e.

<font color-+.////00+ >

< font>

)ou can <font color-+.////00+>change the font color< font> within your te(t. 5ee the <A #2E0-+tables8.html+>sectio n on colors< A> for options of color codes or e(periment.

)ou can change the font color within your te(t. 5ee the section on colors for options of color codes or e(periment. )ou can change the actual font used to some extent within your text. 7n this instance, the

<font face-+Derdana, Arial, #el!etica, sans-serif+>

< font>

)ou can <font face-+Derdana, Arial, #el!etica, sans-serif+>change the actual font used to some e(tent within your te(t.< font> 7n this instance, the browser will attempt to use +Derdana+ if the

>

computer has itE if not, +Arial+E if not, +#el!etica+E if not, a generic sans-serif fontE if not, it will ignore the instruction.

browser will attempt to use +Derdana+ if the computer has itE if not, +Arial+E if not, +#el!etica+E if not, a generic sans-serif fontE if not, it will ignore the instruction. Blin". The most annoying code in html. 1nordered 3ist. ?reates a list with bullets +li+ is used to denote list items Each appears with a bullet A brea" with no +li+ gi!es an item without bullet.

<blin">

< blin">

Blin". The most <blin">annoying< blin"> code in html. 1nordered 3ist.<ul><li>?reates a list with bullets<li>+li+ is used to denote list items<li>Each appears with a bullet<p>A brea" with no +li+ gi!es an item without bullet.< ul>

<ul>

< ul>

<ol>

< ol>

<rdered 3ist.<ol><li>?reates a list with numbers<li>+li+ is used to denote list items<li>Each appears with a consecuti!e<p>A brea" with no +li+ gi!es an item without a number.< ol>

<rdered 3ist. 6. ?reates a list with numbers 8. +li+ is used to denote

list items 9. Each appears with a number A brea" with no +li+ gi!es an item without a number. <dl> < dl> Definition 3ist.<dl><li>?reates a list with bullets, but the list items are not indented<li>+li+ is used to denote list items<li>Each appears with a bullet<p>A brea" with no +li+ gi!es an item without bullet.< dl> Definition 3ist. ?reates a list with bullets, but the list items are not indented +li+ is used to denote list items Each appears with a bullet A brea" with no +li+ gi!es an item without bullet. <tt> < tt> This changes to <tt>typewriter style te(t< tt> within your te(t. This changes to
typewriter style text

within your te(t.


Within the preformattedtag , text and numbers, etc. will be lined upexactlyas you typed them.Good

<pre>

< pre>

<pre>&ithin the preformatted tag, te(t and numbers, etc. will be lined up e(actly as you typed them. @ood for lists and forms, etc.< pre>

for lists and forms, etc.

#"out $e" Color: #T%3 color codes are he( codes made up of 9 pairs of digits representing red, green, and blue *in that order,. The range of codes is from // to 00. The absence of color is // and full color is 00. The first pair specifies the amount of red, the second pair the amount of green, etc. to ma"e up the color. This is li"e mi(ing light, not li"e mi(ing paint, so blac" is .////// and white is .000000. E!en if you don$t "now the he( numbering system, you can easily play around with ma"ing your own colors, stealing portions of codes from other colors. To insure the colors loo" good with e!ery browser, stic" to //, 99, CC, FF, ??, and 00 for your codes. Therefore: .00//// is red .//00// is green .////00 is blue .0000// is yellow *red and green, Any code used the same for each color is a shade of grey .?????? .FFFFFF .CCCCCC .999999 %sing Color Codes: ?olor codes go into appropriate tags. &hen you are ma"ing the bac"ground of a page, table, row, or cell a particular color, use +bgcolor-+ E(ample: <body bgcolor-+.000000+> &hen you are ma"ing an item *li"e a font, a different color, use +color-+ E(ample: <font color-+.000000+> Body Colors: &ithin the +body+ tag, you can specify colors for page bac"ground *bgcolor,, te(t *te(t,, lin"s *lin",, acti!e lin" while it$s being clic"ed *alin",, and !isited lin" *!lin", E(ample: <body bgcolor-+.000000+ te(t-+.//////+ lin"-+.//CC//+ !lin"-+.////CC+ alin"-+.CCCCCC+> Ta"les: )ou can specify bac"ground color for any portion of a table, including the entire table in the <table> tag, a row in the <tr> tag, or a cell in the <td> tag. 7f a cell is empty, the bac"ground color will not show, so you may need to include a small transparent gif as a spacer, or use a non-brea"ing space which is represented in #T%3 as: GnbspE

Miscellaneous: )ou can change the color of a hori;ontal rule: <hr color-+.??////+> 4ote: this does not wor" in all browsers, so be prepared for it to show up as blac".

#yperlin" Tags -- These are the tags that really made web pages uni:ue, by
letting a person clic" on te(t or an image and go somewhere else. #yperlin" tags are container tags, which means there must be an initial tag and an ending tag. Basic format: <a href-+123address+>Te(t to be lin"able< a> Address formats: 0ull address: <a href-+http: www.arts.ilstu.edu Iguither webtric"s.html+>3in" te(t< a> 2elati!e address *in same folder,<a href-+mypage.html+>3in" te(t< a> 2elati!e address *in one folder down,<a href-+foldername mypage.html+>3in" te(t< a> 2elati!e address *in one folder up,<a href-+.. mypage.html+>3in" te(t< a> 2elati!e address *in one folder up, then one down,<a href-+.. foldername mypage.html+>3in" te(t< a> %sing &mages to Lin 1se the same procedure as abo!e, but simply replace the 3in" te(t with the code for an image. 0or e(ample <a href-+http: www.arts.ilstu.edu Iguither webtric"s.html+><img src-+macmade.gif+>< a> 3oo"s li"e this and will lin" to that page:

7f you want to a!oid the colored line around the image that shows it is a lin", ma"e sure to add +border-/+ within the image tag: <a href-+http: www.arts.ilstu.edu Iguither webtric"s.html+><img src-+macmade.gif+ border-/>< a> 3oo"s li"e this and will lin" to that page:

Lin ing to a point in a document )ou can create a lin" to a particular point in a page. 7n order to do this, you use the +a J

name+ tag at the point where you want the lin" to connect. This container tags surrounds the word or image which you want to ha!e be the $anchor.$ Then you name this anchor within the tag. )ou can call the anchor anything you want, and then use that in a hyperlin" tag elsewhere to direct people there. 0or e(ample, if 7 wanted you to be able to clic" and Kump up to the area abo!e where 7 tal"ed about address formats, 7 could do the following around the words +Address formats+ abo!e:<a name-+address+>Address formats< a> 7n order to lin" to that name from the same page, you set up the hyperlin" li"e this: <a href-+.address+>Address 0ormats< a><br> from another page: <a href-+http: www.site.com mypage.html.address+>Address 0ormats< a><br> *you can use any of the types of address formats before the . symbol,

7mage Tags -- These are the tags that cause an image to appear in your
document. Basic code: <img src-+image.gif+> 4ote that you can use the same addressing formats that you can use in hyperlin"s -eg. full addressing: http: www.arts.ilstu.edu Iguither webtric"s image.gif or relati!e addressing, etc. #ere is the image. Lust a small nothing for demo purposes. !pecifying width and height in the image tag: 7t is !ery useful to specify the actual width and height of the image *in pi(els, in your tag. 7f you don$t, the browser has to actually load the image before showing anything else below it on the page *in order to "now how much room to lea!e,. &hen you specify the si;e, the browser lea!es the space for it and continues to show te(t, etc. while loading the image, gi!ing your !iewer more to loo" at while waiting. There are a number of programs which will show you the si;e of your image. The code format for image.gif with si;e info is:<img src-+image.gif+ width-+=>+ height-+9C+> )ou can also use si;e to force an image into a different shape or si;e *with some distortion, of course,. 0or e(ample, here is the same image with a width of F> instead of => specified in the tag. %sing '"order' in the image tag( <img src-+image.gif+ width-+=>+ height-+9C+ border-+8+> 4ote: 5pecify border-+/+ for an image that is a lin", to a!oid the lin" color automatically added as a border. &mage spacing

)ou can ma"e images line up right ne(t to each other by eliminating spaces between code elements. This is great for creating buttons that form a grid. 6. 4ote e(tra space <img src-+image.gif+ width-+=>+ height-+9C+> <img src-+image.gif+ width-+=>+ height-+9C+> 8. &ithout e(tra space: <img src-+image.gif+ width-+=>+ height-+9C+><img src-+image.gif+ width-+=>+ height-+9C+><br><img src-+image.gif+ width-+=>+ height-+9C+><img src-+image.gif+ width-+=>+ height-+9C+>

&mage alignment 7mage alignment refers to how the image is aligned with respect to te(t or other elements following it. This can be !ery useful in your page layout. 4ote that you can include images right within your te(t *in fact, to separate them out, you need to include line brea"s, etc., This te(t is written immediately before the image <img src-+image.gif+ align-top> tag. This te(t is after. This is a demonstration of how te(t interacts with !arious photo alignments as it wraps in different ways. This te(t is written immediately before the image <img src-+image.gif+ align-middle> tag. This te(t is after. This is a demonstration of how te(t interacts with !arious photo alignments as it wraps in different ways. This te(t is written immediately before the image <img src-+image.gif+ align-bottom> tag. This te(t is after. This is a demonstration of how te(t interacts with !arious photo alignments as it wraps in different ways. This te(t is written immediately before the image tag.This te(t is after. This is a demonstration of how te(t interacts with !arious photo alignments as it wraps in different ways. This te(t is written immediately before the image tag.This te(t is after. This is a demonstration of how te(t interacts with

<img src-+image.gif+ align-left>

<img src-+image.gif+ align-right>

6/

!arious photo alignments as it wraps in different ways. This te(t is written immediately before the image <img src-+image.gif+ align-absmiddle> tag. This te(t is after. This is a demonstration of how te(t interacts with !arious photo alignments as it wraps in different ways. This te(t is written immediately before the image <img src-+image.gif+ align-te(ttop> tag. This te(t is after. This is a demonstration of how te(t interacts with !arious photo alignments as it wraps in different ways. This te(t is written immediately before the image <img src-+image.gif+ align-baseline> tag. This te(t is after. This is a demonstration of how te(t interacts with !arious photo alignments as it wraps in different ways. This te(t is written immediately before the image <img src-+image.gif+ align-absbottom> tag. This te(t is after. This is a demonstration of how te(t interacts with !arious photo alignments as it wraps in different ways.

7n order to clear te(t from continuing to wrap by a picture, use <br clear-left> *or whate!er alignment was set, <img src-+image.gif+ align-left>7mage te(t with a standard line brea"<br>4e(t line of te(t. <img src-+image.gif+ align-left>7mage te(t with a +clear+ line brea"<br clear-left>4e(t line of te(t. 7mage te(t with a standard line brea" 4e(t line of te(t.

7mage te(t with a +clear+ line brea" 4e(t line of te(t.

Table Tags -- The table is one of the most useful design elements in html. 7t
allows you to use relati!ely simple html codes to create comple( and interesting arrangements on your pages. Tables can be used to create grids with information in cells, or without borders, they can help you arrange your te(t and images in all sorts of creati!e ways. 0or an o!er!iew of how tables can be used, see the @eneral Tables page and the ?olor ?hart page. This page discusses the basics of the tags for tables themsel!es.

66

Basic Ta"le Tags <table> < table> <tr> < tr> <td> < td> Tags to delineate the entire table. 5ets up a row in your table. 5ets up a cell within a row.

5o if you were going to set up a simple table with 9 rows down, and 8 columns across, the coding would loo" something li"e this *in place of the +2owM6M?olM6M+ items would be your actual te(t, images, etc.,: <table> <tr> <td> 2owM6M?olM6M < td> <td> 2owM6M?olM8M < td> < tr> <tr> <td> 2owM8M?olM6M < td> <td> 2owM8M?olM8M < td> < tr> <tr> <td> 2owM9M?olM6M < td> <td> 2owM9M?olM8M < td> < tr> < table>

Attributes in Table Tags:


There are a number of additions to the table tags you can use to add features to your tables and allow you to use them to create comple( layouts. Attributes to be used within the <table> tag *remember that you can combine a number of attributes within the table tag,: <table border-+6+> <table width-+H/N+> <table width-+9=/+> ?reates a border in your table. ?an use different amounts. 0orces the table to fit within the specified percent of the screen. 0orces the table to be a certain number of pi(els wide ?ellpadding is the space around your material to the edge of the cell *both !ertically and hori;ontally,. This "eeps the te(t from runnning right to the edge. ?ellspacing is the space between cells *if the table is bordered, cellspacing is represented in a "ind of border,. The following tables use a border of +9+. This mini table has cellpadding of 8/ and cellspacing of = <table cellspacing-+=+ cellpadding-+6/+> ?ell 7nfo ?ell 7nfo

This mini table has cellpadding of = and cellspacing of 8/ ?ell 7nfo ?ell 7nfo

This mini table has cellpadding of / and cellspacing of / ?ell 7nfo ?ell 7nfo

68

<table bgcolor-+.00////+>

?hanges the bac"ground color within the table. ?an also be used for a row or a cell. 5ee ?olor ?hart for more information.

Attributes to be used within the <tr> tag *remember that you can combine a number of attributes within the tag,: <tr align-center> ?enters the information *left to right, in all the cells in that row. ?an also use left or right -- default is left. 3ines up the information in all the cells in that row !ertically to start at the top of the cell, so that e(cess space is at the bottom. ?an also use middle and bottom -- default is middle. ?hanges the color of the bac"ground for that row.

<tr !align-top> <tr bgcolor-+.//////+>

Attributes to be used within the <td> tag *remember that you can combine a number of attributes within the tag,: <td align-center> ?enters the information *left to right, in that cell. ?an also use left or right -- default is left. 3ines up the information in the cell to start at the top of the cell, so that e(cess space is at the bottom. ?an also use middle and bottom -- default is middle. ?hanges the color of the bac"ground for that row. 7ndicates that this cell will ta"e up the width of two columns. )ou can use this for a heading of your table by ma"ing the colspan e:ual to the number of columns, or you can use this to e!en out your table. 7t$s important that all rows ha!e the same number of cells. 7ndicates that this cell will ta"e up the height of two rows. Be careful with this as it can get confusing to ma"e sure that the other rows ha!e the right number of cells. Allows you to set the width and height of the cell in pi(els

<td !align-top> <td bgcolor-+.//////+>

<td colspan-+8+>

<td rowspan-+8+> <td width-+6H/+ height-+8/+>

02A%E5
2eference 'age 0rames are a set of html pages arranged in a browser window by a +controlling+ html page which is not seen, but is the actual page that needs to be loaded *ie, boo"mar"s and lin"s must use the address of the controlling page,. The controlling page does not ha!e a body and is set up li"e this:

69

<OD<?T)'E #T%3 '1B37? +- &9? DTD #T%3 >./6 0rameset E4+ +http: www.w9.org T2 html> frameset.dtd+> <html> <head><title>'age title< title>< head> <frameset> <frame> <frame> < frameset> < html> %ain tags for 0rames in the controlling page: <frameset>< frameset> *container tag identifying the frame structure, <frame> *simple tag identifying a frame window and its contents, 5imple frame with two columns:
7ndicates the frame uses columns, that the first column is 8// pi(els wide, and the second one ta"es up the remainder 5ets up the two windows in the frame, says what html file goes in each to begin with, and names the windows Ends the frameset

<frameset cols-+8//,P+>

left right <frame src-+left.html+ name-+left+> <frame src-+right.html+ name-+right+>

< frameset> 5imple frame with two rows:

<frameset rows-+8//,P+> top bottom <frame src-+top.html+ name-+top+> <frame src-+bottom.html+ name-+bottom+>

7ndicates the frame uses rows, that the top row is 8// pi(els high, and the second one ta"es up the remainder 5ets up the two windows in the frame, says what html file goes in each to begin with, and names the windows Ends the frameset

< frameset>

?omple( frame with two columns, with the second column ha!ing two rows:

6>

<frameset cols-+8=/,P+>

7ndicates the frame starts with columns, that the left column is 8=/ pi(els wide, and the second one ta"es up the remainder 5ets up the first window on the left 7ndicates that the second column is made up of two rows, that the top one is 6=/ pi(els high, and the bottom one uses the remainder 5ets up the two windows in the right column Ends the rows frameset Ends the columns frameset

<frame src-+menu.html+ name-+menu+> title menu content <frameset rows-+6=/,P+>

<frame src-+title.html+ name-+title+> <frame src-+content.html+ name-+content+> < frameset> < frameset>

#ttri"utes which can "e used in the )frameset* tag: cols-+8/N,9/N,=/N+ rows-+8/N,9/N,=/N+ cols-+8//,P+ rows-+J/,6=/,P+ frameborder-+/+ 7ndicates in a general way how to si;e the windows *should add up to 6//N, 5pecifies a specific width or height in pi(els. &hen using this, one of the items should be represented with an asteris" *P, to allow using up the remaining space. Eliminates the separator between frame windows. Default is +6+.

#ttri"utes which can "e used in the )frame* tag: src-+filename.html+ 7ndicates the source page to go in that frame to begin with *can also be an image,. 4ames the window of the frame -- important for loading other content into that frame window -- this is the name you would use with target-+windowname+ to ha!e a lin" load into the frame window. <ptions are +yes+ +no+ +auto+ -- This indicates whether to put

name-+windowname+

scrolling-+no+

6=

a scroll bar on the window. Default is auto, which means that a scroll bar will be put on if needed to see the rest of the content. +no+ means that no scroll bar will be placed regardless of whether one is needed *use with caution,. +yes+ means a scroll bar will be put up regardless. noresi;e marginwidth-+6+ marginheight-+6+ This means that the !iewer will not be allowed to resi;e the window. 7ndicates the spacing from the edge of the frame to the content. %inimum is 6, but browsers automatically put more than 6 in there, so if you$re ha!ing problems getting your logo to fit, add the marginwidth and marginheight of 6.

2emember: put all the attributes for a tag within the same tag. eg: <frameset cols-+8//,P+ border-/> <frame src-+file.html+ name-+window+ noresi;e scroll-+no+ marginwidth-+6+ marginheight-+6+>

TA2@ET5
Be !ery careful to assign targets to all your lin"s or you could end up with pages popping up in the wrong place. 0ormat: <a href-+http: www.website.com+ target-+name+> &hat names to useQ 7f you use a name which you established in the <frame> tag, then the lin" will open up in that frame window if you use name-+Mtop+ *note the underscore,, then the lin" will fill the current browser window, eliminating the frames. if you use a name that hasn$t already been established, then the lin" will open up in a new browser window *you can use any name you wish,. &hat if you ha!e a lot of lin"s on a page *li"e a lin"s page,Q )ou can use the following code on your page *this gets placed &7T#74 the <head> tag: <base target-+name+> Then, e!ery lin" on that page will go to that target, unless you specify differently.

4<02A%E5
7f you$re concerned that people with browsers that don$t support frames may be !iewing your pages, you can help them out as well. <n the +controlling+ page, put the following in right after your final < frameset>: 6C

<noframes> <body> 'ut the information you want them to see here. 7t may be a basic inde( of lin"s without frames, or a message, or... < body> < noframes>

6H

S-ar putea să vă placă și