Scribd
Upload
126 views

HTML Guide Laminated Reference Chart

Uploaded by

vladdimpulsive
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF or read online on Scribd
126 views

HTML Guide Laminated Reference Chart

Uploaded by

vladdimpulsive
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 6
BarCharts, Inc aay Getting Started with HTML documents HTML documents ate plaintext fies that are created using atexteitor; word processing software can be used ifthe documents saved as “text only with line bess” This Guide Assumes That You I. Have a general understanding of how Web servers and browsers work 2.Have access to a Web server (unless the documents are produced for personal use ona local system) Helpful Terms WWW: World Wide Web LHITML: Hypertext Markup Language ASCIE: American Standard Code for Information Interchange Hypertext (hypertink, link): Text or image within HTML linking to another document ‘Text Editor: SimpeText on a Matintosh operating system, Notepad on Microsoft Windows Image Map: One image with hyperlinked quadrants hot spots) “Element: Fundamental component ofthe structure of ‘text document ‘Tags: Used to denote various elements inthe HTML document ‘URL: Uniform Resource Locator, the address to any Internet site thats part of the WWW (such as ‘www quickstudy:com) Attribute: Additional information included inside the start tag CX tay Page options are included as attributes of the tag \ckground image ‘The SACKGxOUND atebute allows an image tobe used asa background for your document Example; To include an image of stone for ‘the backgroune, enter ‘ Background, Text & Hyperlink Colors By default, browsers display tex in black and Inypeciinks in blue witha gray or white back- ‘ground; HTML. allows you to change these cements [BGCOLOR = Background ‘Text = Text displayed inthe browser ‘Lis = Hyperlink, ALINK = Active Hypeslink, LINK » Visited Hyperlink Example: Fora black background, silver text, ‘and white hyperlinks ‘ Note: Te sx git mamber an eter coring tions represent the amount of RGB (red, green, ‘blue color as hexadecimal values fom 00m FF; 000000 i black no cole), FFFFFis white lly strated); finding a specific color using these ‘number and lene combinations can be eryptic Forms allow you to structure input from the user, such as cus- tomer response Constructing a form isa two-part process |The form must be created within your ITTML document 2.A program (usually C, Unlx or Perl) must be created: this 3 program is alled CGH (Common Gateway Interface); CGI eosives the d Specified within the program Geta tral versio of Sendit™ from atip:/ebsunlimited.com/senditinfo.ham from your form and implements the ation Sato ee a ‘The syntax for creating forms consists of 3 distinct elements between the lags INPUT elements are the bass for various button types and text inputs “Tent single line text window Radio: a group of buttons in which only one may be chosen. Reset a button set to clear form values + Checkbox: box that can be checked oF unchecked * Sli auton to send the fom data to the CGI onthe server SELECT elements create a pull-down men + OPTION elements define the menu choices + The SELECTED attribute inthe OPTTOW element speci- fis the default menu item to be displayed ‘TEXTAREA elements specify a multi-line text fetd +The COLUMNS and ROWS attributes between the TENTIAL How a Form Works tagh specify the default value ofthe Field When the “submit” button is pressed, the data from the ‘orm field is sent o a program (CGI) of the URL specified by the ACTION attribute in the tag; the NAN atibute {is matched tothe corresponding VALUE atribute and the pro- ram takes its action (such as sending the data to you as Email) WORLD'S i] QUICK REFERENCE SOFTWARE GUIDE Deere Every HTML document should contain the basic HTML togs: the head contains the tile and the body contains the text that made up of para graphs lists, images and ather elements; not every browser supports all tags: however, the browser ‘ignores the tag if is not supported ‘Nowe: HTML is nor case sensitive. is ‘equal to or Required elements shown in this bare-bones example ea Fee crates eee cfd Browser Output 1a Secloat typeretalt~ valaciich bere to 1a Hage Browser Output 86 990690 For more information about creating forms and other advanced HTML coding, visit wrmidevelopercom HTML tags consist of a left angle bracket (<, a tag ‘name, followed by a right angle bracket (>); tugs are usually pared to Start and end the tag instruction; the ‘end tag i identical tothe stat tag with a slash ()) pre= ‘ceding the text within the brackets; some elements may include additional instructions, called attributes, in the start tag to specify the position ofthe content Basic HTML Tags ‘This element tells the browser that the file contains HTML-coded information, also indicated by the lhl or htm file extension ‘The head eloment identifies the first part of your HTML-coded document that contains the title ‘The title element contains your document tile and identifies the content in a global context; the ttle is not displayed within the text of the browser, but at the top ofthe browser window ‘Note: The ttle is what is displayed on Someone's book- ‘mark list, so make your tile description relatively short - ‘The body contains the content of your document that is to be displayed in the text of your browser Headings

through
HTML has six levels of heading, fom 1 to 6, with L being the most prominent level ‘Note: The tags explained below are used within the body of your document Paragraphs

Unlike documiens in word processors, carriage returns in HTML documents are not important; word wrapping. can ocour at any point in your source file and multiple spaces are reduced to a singe space by your browser, generally, word wrapping will occur after 72 characters ‘Note: Paragraphs must be indicated with the

‘tag: a browser ignores any indentations or blank lines inthe source text; without the

tag, the document ‘becomes one large paragraph Code Example & Séoneeding tech So Sissuseding 1aves S Bataeadise iol Conte ‘, Browser Output Heading level 1 Centers Preformatted Text 


‘This tag makes spaces, line breaks and tabs
appear in the same location as the source file;
this is useful for displaying program listings
Note: The 
 tag can be used with the
WIDTH atribute; this specifies the maximum
‘number of characters fora ine

 

Extended Quotations
‘
 


Use the 

tags to include long quotations in a separate
block in your browser

Horizontal Rules 
‘This tag produces a horizontal line the width of
the browser window, useful for separating sec-
tions of your document; the SIZE attribute
specifies the line thickness in pixels; the WxD7H
attribute specifies the line width as a percentage
‘of sereen width

Forced Line Breaks / Postal Addresses
Using the 
 tag for displaying short lines of
text results in additional space between. lines;

using the 
 tag causes a line to break with
‘no extra space; this is useful for displaying postal
addresses

‘Note: No end tag is used with the 
 tag

Code Example
445285 cp Ronoetp change end on ot
5 crrimternet growene/®>

   

 

 

 

 

se seudy charts Tees

Browser Output

  

 

  
   
  
  
   
 

  
   
  
  

Physical Type Styles
“Behold text

“fined width fomts
undeline text /0>
~ subseript
superseript

The 

Samp; the eseape sequence for &
oun; the escape sequence foe
‘Ene: the escape sequence for A
Seraver the escape sequence for E

    
       
     
     
       
      

Code Example
fmt
} So
3 Stmestyiee « wocecreem

   
  

      
     
  

 

   
       
 
 

 

 
 
   
 
   
   
  
   
    
  
   
 

        
  

 

10 r

  
  
  
    
  

13ctiore asc chatacteresie>HTML supports unnumbered, numbered and def Tables are very usefil for presenting tabular infor=
‘mation and organizing complex Web pages:
table consists of heads to explain what is included

in columnsirows, rows for information and cells

‘Unnumbered lists
‘Start with the opening list 
     tag

 

ieee
Hypertext links: the areas (graphics
‘words) inan HTML document that
another document to be loaded when &
user clicks them

   
     

   
    
  
 

+ Enter the  (list item) tag followed by
the item to be listed

+ End the completed list with the 
 tag

+The TYPE = “shape” attribute in the 
    

Table Elements
‘The  tag defines a table in

HTML (use the BORDER= attribute to specify

The ability to Tink text and images
nother document is a major capabili
of HTML.

 

tag can be used to specify a SQUARE or CIR- [ff order thickness)

 


     defines a c
fable; the default position is top-center, but the
attribute ALIGN=BOPTOM will postion the eap-

 

CLE shaped bullet; the default solid disk ption forthe title of the

shape is displayed if no shope is specified

 

     
  

When an HTML editor specifies text

 

 

Note: No closing tag  is required tion below the table

 specifies a table row within a table; you may
specify the default attributes forthe entire row (see
Table Attributes)

-
     defines a table header cell: the text in this
call is bold and centered by default: table header

Numbered Lists / Ordered Lists look icen-
tical to an unnumbered Ii
the  taps

‘Nate: The list items arc tagged using the  tag

 

‘with the exception of

   

 

the default hypertext color to change
default color this line must be add
the HTML document after :

 

 

cells can contain ther attributes (see Table
Attributes for more information)
‘<7D> defines a table data cell; the text in this cell

   

Definition Lists 
A Gefinition lst consists of alternating definition

  

‘ponrautceatanyenarts.com Survive
Tr'elicge wile sevice

  

 

terms  and definitions 
     is aligned left and centered vertically by defaults

 

 

Note: The 
     and 
     tags can eontain [| table data cells can contain other attributes (see

 

 

‘multiple paragraphs ,listsorother definition [f) Table Attributes for more information)

   

 

Table Attributes

 

 

(LEFT, RIGHT, CENTER) the hori-
zontal alignment ofa cell

VALIGN (TOP, MIDDLE, BOTTOM) the ver-
tical alignment of cell

COLSPAN=n specifies the number (n) of columns

Lists can contain sub-lists called nested lists;
‘you can also have several paragraphs, each con-
‘wining a nested list, ina snl ist items elabo-

   
 

Links between specific
of different documents
Bookmarks are used to set a ink

    

 

 

rate nested lists are diffiult to follow and should
ROWSEAN=n specifies the number (n) of rows a

Code Example NOWRAP turns off word wrapping within a cell

  
     

Tables with Images
Use atable with no Borders to create the appearance
‘of one image with multiple images; interesting dis-
Plays can also be eteated by using fable borders

 

‘Emoronte Internat ploree

 

    
  

 

 

      
   
    

 

      
    

Browser Output Browser Output

 

 

   
   

cific section

documentB him)

Insert the HTML for the link 0
specified anchor in document A:

CaiimarsGats.neaichara"> ae

2uinsert the HTML for the
snchar in document B:
Mh swumt-chartashnchor tent within
Samet she
Links between specific
within the current document
‘This technique is the same as above

the exclusion ofthe filename

 

another d

  
   
  
   
    

     
   
 

 

   
 

   
      

 

fe Scum

Note: Be sure to insert the
anchor text
tag in the HTML document where
ink is placed.

inks to Emai
‘By including the Ma:it to attribute
hyperlink you can make i easy for
er 10 send Email to a specifie person
To include a Mailto enter:

    

    
    
  

   

        
    
    
 

Stusyatatbarcharse, com>
cera

Links to images
‘To let the viewer choose which imag
Toad, rather than waiting for many
size images to load, small
tions of images called “thumbnails”
linked tothe full size original

Example soure code:

  

  

 
 
       
 

Pambaalicgteeoeyae
    You might also like