HTML-CSS Course
Tradotto da
ScribdTranslationsHTML-CSS Course
Tradotto da
ScribdTranslationsDocument structure Paintings Notation of Forms
<!-- ... --> Code in comment. <table param...> Table creation tag. colors <form params...> Creation of a form.
<H1>|<H2>|...<H6> Header : titres hiérarchisés de niveau width=length Width of the table. Constants Notations action=URI URI of the processing page.
... respective 1, 2, 3, 4, 5, 6. RGB symbols
</H1>|</H2>|...</H6> (1 = big, 6 = small) border=integer Border thickness. method=get|post Data submission method:
Black "#000000"
"get": données concaténées à l'URI.
<P param...> ... </p> Paragraph. bgcolor=couleur Background color. "post": données transmise dans le corps de
Silver #C0C0C0
the request
align=alignment Text color. cellspacing=length Cell size space.
Gray "#808080"
target=frame Name of the frame that will display the result.
title=texte Tooltip text. cellpadding=length Spacing size between the
border of a cell and its White "#FFFFFF"
<input params...> Form component.
<br> Forced line break. content. Maroon "#800000"
type=type Component type:
<pre> ... </pre> Preformatted text (html tags ignored). dir=direction "LTR" : cellules de gauche à Red "#FF0000" text simple line of text,
right (default) password: mot de passe,
... Text in emphasis (italic). "RTL" : cellules de droite à Purple "#800080" checkbox: boite à cocher,
left radio radio button
... Bold text. Fuchsia #FF00FF submit submit button
<thead>...</thead> Header grouping.
Citation image graphic submit button,
Silver #C0C0C0
</blockquote> <tfoot>...</tfoot> Table leg grouping. reset reset button
Green #008000 button simple button
cite=URI URI of the citation source. <tbody>...</tbody> Table body grouping. hidden hidden component,
Lime "#00FF00" file file selector.
title=texte Texte de l'info bulle. <tr param...>...</tr> Body line, header or footer.
Olive "#808000" name=texte Field name.
<HR params...> Insert a horizontal separation line. <th param...>...</th> Header cell (text in
grass). Yellow #FFFF00 value=texte Default value of the component.
width=length Line width.
<td param...>...</td> Table cell. Navy "#000080" size=entier Size in pixels or characters
align=alignment Alignment of the line.
colspan=n Merge the cell with cell n-1 Blue #0000FF maxlength=integer Maximum input length.
size=entier Height of the line in points. right cells.
Teal #008080 checked Radio or checkbox component activated.
<A params...> ... </A> Hyperlink. rowspan=n Merge the cell with the n-1
cells underneath. Water #00FFFF src=URI Image URI (image type only)
href=URI URI of the referenced document.
Width, border, bgcolor, <textarea params...> Text input area containing text
target=frame Name of the framework that is to receive the the same
cellspacing,cellpadding initial text initial.
document. Special values: </textarea>
"_blank": nouvelle fenêtre, </table> End table tag.
_self same frame name=texte Field name.
"_parent": cadre parent,
"_top": cadre de plus haut niveau. Frames rows=integer Number of lines.
<frameset params...> Define a frame layout. cols=integer Number of columns.
Document header
<body param...> Opening of the body of the document. rows="length,length..." List of frame widths ('* ': the rest) <select params...>... Dropdown list.
of the available width).
bgcolor=couleur Background color. name=texte Field name.
cols="length,length..." Liste des hauteurs des frames ("* " : le reste
color Text color. of the available width). <option params...> Dropdown list option displaying
description</option>description.
link=couleur Link color. <frame params...>...</frame> Nested frame.
value=texte Value of the choice option.
alink=couleur Color of the clicked link. src=URI URI of the nested document.
</select> End of choice list description.
vlink=couleur Color of the visited link. noresize Prevents the user from resizing the frame
<button params...> Transform code into button
color Image alignment position. Values scrolling=auto|yes|no Elevator display: code</button>
possible :bottom,middle,top,left,right if necessary,
no: no elevator, name=texte Field name.
</body> Closing of the document's body. yes: elevators always displayed.
type=type Button type: button|submit|reset.
Frameborder ={0, 1} Display the frame border (1) or not
(0). </form> End of the form.
Body of the document
Marginwidth=integer Size of left and right margins.
<body param...> Opening body tag.
Marginheight=integer Top and bottom margin size. Lists, enumerations
bgcolor=couleur Background color.
... HTML code to interpret if the frames do not <ul> Opening list tag.
color Text color. are not supported by the browser.
<li> ... [</li>] List item element tag.
link=couleur Link color. </frameset> End of frame provisions.
</ul> Closing tag for list.
alink=couleur Color of the clicked link.
<ol> Opening tag of enumeration.
vlink=couleur Color of the visited link.
Parameter values li> ... [/li> Enumerated element tag.
color Image alignment position. Values length Width in pixels or in percentage of available width.
possible :bottom,middle,top,left,right </ol> End enumeration tag.
alignment Text alignment: left, center, right, justify.
</body> Closing body tag.
HTML Cheat Sheet (continued) Cascading style sheets Policies
<style="text/css"> Note: selector corresponds to the name of a font font-style, font-variant, font-weight, font-size/line-height
/* comment */ HTML element (e.g., BODY, P, H1, etc...) font-family, caption, icon, menu, message-box, small-
selector, selector ... {property: value; property: value; ... } property to an attribute (e.g., font-size, border, caption, status-bar
Text formatting [Link] {property: value; property: value; ... } etc...)
... Centered text. </style> font-family family-name, generic-family
<TT> ... </TT> Text in teletype style. font-size xx-small, x-small, small, medium, large, x-large, xx-large,
Backgrounds smaller, larger, length, %
... Text in italics. background Background color, background image, background repeat, background attachment
background-position font-size-adjust: none, number
... Bold text.
background-attachment scroll, fixed font-stretch normal, wider, narrower, ultra-condensed, extra-
... Underlined text. condensed, condensed, semi-condensed, semi-expanded
background-color color-rgb, color-hex, color-name, transparent {"expanded":"expanded","extra-expanded":"extra-expanded","ultra-expanded":"ultra-expanded"}
... Struck text.
background-image url, none font-style normal, italic, oblique
... Text in large font.
background-position ["top left","top center","top right","center left","center center","center right","bottom left"] font-variant normal, small-caps
... Text in small font. bottom center, bottom right, x-% y-%, x-pos y-pos
font-weight normal, bold, bolder, lighter, 100, 200, 300, 400, 500,
Change the style of the text. background-repeat repeat, repeat-x, repeat-y, no-repeat 600, 700, 800, 900
size =entier Absolute or relative size
from the police. Spacings Classification
padding padding-top, padding-right, padding-bottom clear left, right, both, none
color=couleur Text color. padding-left
cursor url, auto, crosshair, default, pointer, move, e-
padding-bottom, padding-top, padding-left, padding-right length, %
Images resize, ne-resize, nw-resize, n-resize, se-resize,
text
<img param...> Image insertion tag Borders
display ["none","inline","block","list-item","run-in","compact"]
src=uri Image URI border-color color
marker, table, inline-table, table-row-group
border-style None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset table-header-group, table-footer-group, table-
alt=text Short description
row, table-column-group, table-column, table-
width=integer Display width border-width Thin, medium, thick, length cell, table-caption
height=entier Display height float left, right, none
Dimensions Contours
border=integer Border width of the image. position ["static","relative","absolute","fixed"]
Height, width auto, length, % outline outline-color, outline-style, outline-width
(0 = no border).
visibility visible, hidden, collapse
line-height normal, number, length, % outline-color color, invert
align=alignmentPosition image alignment.
max-height, max-width none, length, % outline-style ["none","dotted","dashed","solid","double"]
alt=text Text displayed if the image cannot
be displayed.
["groove","ridge","inset","outset"] Positioning
min-height, min-width none, length, %
outline-widththin, medium, thick, length bottom, top, right, left auto, length, %
title=texte Text of the tooltip.
Tableaux clip shape, auto
border-collapse table collapse, separate Margins overflow Visible, hidden, scroll, auto
border-spacing length margin margin-top, margin-right, position ["static","relative","absolute","fixed"]
margin-bottom, margin-left
caption-side top, bottom, left, right vertical-align baseline, sub, super, top, text-top, middle, bottom,
margin-bottom, margin- auto, length, % text-bottom, length, %
empty-cells show, hide top, margin-left,
margin-right z-index car, number
table-layout auto, fixed
Text
color color
Learn more ... direction ltr, rtl
W3C recommendation [Link]
letter-spacing normal, length
HTML reference [Link]
CSS2 reference [Link] text-align left, right, center, justify
text-decoration none, underline, overline, line-through, blink
text-indent length, %
text-shadow none, color, length
Reminder text-transform none, capitalize, uppercase, lowercase
unicode-bidi normal, embed, bidi-override
HTML/CSS white-space normal, pre, nowrap