Introduction

HTML

CSS

References

HTML basic usage

Preamble

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>title here</title>
</head>
<body>
 .....
</body>
</html>

Style sheet

<head>
 <link rel="stylesheet" type="text/css" href="hoge.css" />
</head>
<head>
 <style type="text/css">
  body {
    background-color:yellow;
  }
  p {
    color:blue;
  }
 </style>
</head>

Inline style sheet

<p style="color:blue;margin-left:20px;">Inline style sheet for a paragraph.</p>

Comment

<!-- This is a comment -->

Heading

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

Paragraph

<p>This is a pen.</p>

Link

basic:

<a href="http://www.hoge.co.jp">This is a pen</a>

open in new tab or page:

<a href="http://www.hoge.co.jp" target="_blank">This is a pen</a>

create anchor and link to it:

<a name="hoge">hoge is there</a>
<a href="#hoge">hoge is here</a>

OR

<a href="http://www.hoge.co.jp/index.html#hoge">

Image

<img src="hoge.jpg" alt="this is a image" width="640px" height="480px"/>

Brake

Inserts a single line break:

<br>
<br />

"br" is empty element, which is not needed to be closed

Text Format

TagDescriptiontext_format.png
<b>Defines bold text
<big>Defines big text
<em>Defines emphasized text
<i>Defines italic text
<small>Defines small text
<strong>Defines strong text
<sub>Defines subscripted text
<sup>Defines superscripted text
<ins>Defines inserted text
<del>Defines deleted text

Table

<table border="0">
 <tr>
  <td>Row 1, cell 1</td>
  <td>Row 1, cell 2</td>
 </tr>
</table>

List

unordered list(itemize):

<ul>
 <li>Coffee</li>
 <li>Coke</li>
</ul>

ordered list(enumerate):

<ol>
 <li>Coffee</li>
 <li>Coke</li>
</ol>

Frame

<frameset cols="25%,75%">
    <frame src="frame_x.htm" />
    <frame src="frame_y.htm" />
</frameset>
<frameset cols="25%,*">
    .....
<frameset cols="300px,500px">
    ....

You cannot use the "body" tags together with "frameset" tags.

open web page in the other frame:

<frameset cols="25%,75%">
    <frame src="menue.htm" />
    <frame src="frame_a.htm" name="showframe"/>
</frameset>

In the "menu.html", there are links like:

<a href="frame_a" target="showframe">Frame a</a><br />
<a href="frame_b" target="showframe">Frame b</a><br />
.....

IFrame

Web page in a web page:

<iframe src="hoge.htm" width="640" height="480"></iframe>
<iframe src="hoge.htm" width="640" height="480" frameborder="0"></iframe>

Draw horizontal line

<Hr width="100%" border="1">

Reflesh automatically

<meta name="reflesh" content="120" />
<meta name="reflesh" content="5; url=http://www.google.com/" />

No cache used

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0">
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="cache-control" content="no-store" />

HTML Meta

HTML Input

How to get value

<form action="test.py" method="get">
User name: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

You need "test.py" which catches the submitted values.

If you need arguments like "test.py?date=today", use "post" not "get" like:

<form action="test.py&date=today" method="post">

If you want to display in-line "form", use

<form style="display: inline">
  <input type="submit">
</form>

Text field

<form>
 First name: <input type="text" name="first_name" /><br />
 Last name: <input type="text" name="last_name" />
</form>

Radio button

You can choose only 1 entry:

<form>
 <input type="radio" name="select" value="hoge" /> Hoge<br />
 <input type="radio" name="select" value="aho" /> Aho
</form>

Checkbox

<form>
 <input type="checkbox" name="select" value="hoge" /> Hoge<br />
 <input type="checkbox" name="select" value="aho" /> Aho
</form>

Audio

HTML5 <audio> Tag

<audio id="alarm" preload="auto" autoplay="true" loop="loop">
   <source src="alarm.wav" type="audio/wav" />
   <source src="alarm.mp3" type="audio/mp3" />
   Your browser does not support the audio.
 </audio>

You can also use "controls" attribution to add an audio controller.

Symbols and Greek Letters for HTML

Character Entity Decimal Hex Rendering in Your Browser
Entity Decimal Hex
Latin small f with hook = function = florin &fnof; &#402; &#x192; ƒ ƒ ƒ
Greek capital letter alpha &Alpha; &#913; &#x391; Α Α Α
Greek capital letter beta &Beta; &#914; &#x392; Β Β Β
Greek capital letter gamma &Gamma; &#915; &#x393; Γ Γ Γ
Greek capital letter delta &Delta; &#916; &#x394; Δ Δ Δ
Greek capital letter epsilon &Epsilon; &#917; &#x395; Ε Ε Ε
Greek capital letter zeta &Zeta; &#918; &#x396; Ζ Ζ Ζ
Greek capital letter eta &Eta; &#919; &#x397; Η Η Η
Greek capital letter theta &Theta; &#920; &#x398; Θ Θ Θ
Greek capital letter iota &Iota; &#921; &#x399; Ι Ι Ι
Greek capital letter kappa &Kappa; &#922; &#x39A; Κ Κ Κ
Greek capital letter lambda &Lambda; &#923; &#x39B; Λ Λ Λ
Greek capital letter mu &Mu; &#924; &#x39C; Μ Μ Μ
Greek capital letter nu &Nu; &#925; &#x39D; Ν Ν Ν
Greek capital letter xi &Xi; &#926; &#x39E; Ξ Ξ Ξ
Greek capital letter omicron &Omicron; &#927; &#x39F; Ο Ο Ο
Greek capital letter pi &Pi; &#928; &#x3A0; Π Π Π
Greek capital letter rho &Rho; &#929; &#x3A1; Ρ Ρ Ρ
Greek capital letter sigma &Sigma; &#931; &#x3A3; Σ Σ Σ
Greek capital letter tau &Tau; &#932; &#x3A4; Τ Τ Τ
Greek capital letter upsilon &Upsilon; &#933; &#x3A5; Υ Υ Υ
Greek capital letter phi &Phi; &#934; &#x3A6; Φ Φ Φ
Greek capital letter chi &Chi; &#935; &#x3A7; Χ Χ Χ
Greek capital letter psi &Psi; &#936; &#x3A8; Ψ Ψ Ψ
Greek capital letter omega &Omega; &#937; &#x3A9; Ω Ω Ω
Greek small letter alpha &alpha; &#945; &#x3B1; α α α
Greek small letter beta &beta; &#946; &#x3B2; β β β
Greek small letter gamma &gamma; &#947; &#x3B3; γ γ γ
Greek small letter delta &delta; &#948; &#x3B4; δ δ δ
Greek small letter epsilon &epsilon; &#949; &#x3B5; ε ε ε
Greek small letter zeta &zeta; &#950; &#x3B6; ζ ζ ζ
Greek small letter eta &eta; &#951; &#x3B7; η η η
Greek small letter theta &theta; &#952; &#x3B8; θ θ θ
Greek small letter iota &iota; &#953; &#x3B9; ι ι ι
Greek small letter kappa &kappa; &#954; &#x3BA; κ κ κ
Greek small letter lambda &lambda; &#955; &#x3BB; λ λ λ
Greek small letter mu &mu; &#956; &#x3BC; μ μ μ
Greek small letter nu &nu; &#957; &#x3BD; ν ν ν
Greek small letter xi &xi; &#958; &#x3BE; ξ ξ ξ
Greek small letter omicron &omicron; &#959; &#x3BF; ο ο ο
Greek small letter pi &pi; &#960; &#x3C0; π π π
Greek small letter rho &rho; &#961; &#x3C1; ρ ρ ρ
Greek small letter final sigma &sigmaf; &#962; &#x3C2; ς ς ς
Greek small letter sigma &sigma; &#963; &#x3C3; σ σ σ
Greek small letter tau &tau; &#964; &#x3C4; τ τ τ
Greek small letter upsilon &upsilon; &#965; &#x3C5; υ υ υ
Greek small letter phi &phi; &#966; &#x3C6; φ φ φ
Greek small letter chi &chi; &#967; &#x3C7; χ χ χ
Greek small letter psi &psi; &#968; &#x3C8; ψ ψ ψ
Greek small letter omega &omega; &#969; &#x3C9; ω ω ω
Greek small letter theta symbol &thetasym; &#977; &#x3D1; ϑ ϑ ϑ
Greek upsilon with hook symbol &upsih; &#978; &#x3D2; ϒ ϒ ϒ
Greek pi symbol &piv; &#982; &#x3D6; ϖ ϖ ϖ
bullet = black small circle &bull; &#8226; &#x2022;
horizontal ellipsis = three dot leader &hellip; &#8230; &#x2026;
prime = minutes = feet &prime; &#8242; &#x2032;
double prime = seconds = inches &Prime; &#8243; &#x2033;
overline = spacing overscore &oline; &#8254; &#x203E;
fraction slash &frasl; &#8260; &#x2044;
script capital P = power set = Weierstrass p &weierp; &#8472; &#x2118;
blackletter capital I = imaginary part &image; &#8465; &#x2111;
blackletter capital R = real part symbol &real; &#8476; &#x211C;
trade mark sign &trade; &#8482; &#x2122;
alef symbol = first transfinite cardinal &alefsym; &#8501; &#x2135;
leftwards arrow &larr; &#8592; &#x2190;
upwards arrow &uarr; &#8593; &#x2191;
rightwards arrow &rarr; &#8594; &#x2192;
downwards arrow &darr; &#8595; &#x2193;
left right arrow &harr; &#8596; &#x2194;
downwards arrow with corner leftwards = carriage return &crarr; &#8629; &#x21B5;
leftwards double arrow &lArr; &#8656; &#x21D0;
upwards double arrow &uArr; &#8657; &#x21D1;
rightwards double arrow &rArr; &#8658; &#x21D2;
downwards double arrow &dArr; &#8659; &#x21D3;
left right double arrow &hArr; &#8660; &#x21D4;
for all &forall; &#8704; &#x2200;
partial differential &part; &#8706; &#x2202;
there exists &exist; &#8707; &#x2203;
empty set = null set = diameter &empty; &#8709; &#x2205;
nabla = backward difference &nabla; &#8711; &#x2207;
element of &isin; &#8712; &#x2208;
not an element of &notin; &#8713; &#x2209;
contains as member &ni; &#8715; &#x220B;
n-ary product = product sign &prod; &#8719; &#x220F;
n-ary sumation &sum; &#8721; &#x2211;
minus sign &minus; &#8722; &#x2212;
asterisk operator &lowast; &#8727; &#x2217;
square root = radical sign &radic; &#8730; &#x221A;
proportional to &prop; &#8733; &#x221D;
infinity &infin; &#8734; &#x221E;
angle &ang; &#8736; &#x2220;
logical and = wedge &and; &#8743; &#x2227;
logical or = vee &or; &#8744; &#x2228;
intersection = cap &cap; &#8745; &#x2229;
union = cup &cup; &#8746; &#x222A;
integral &int; &#8747; &#x222B;
therefore &there4; &#8756; &#x2234;
tilde operator = varies with = similar to &sim; &#8764; &#x223C;
approximately equal to &cong; &#8773; &#x2245;
almost equal to = asymptotic to &asymp; &#8776; &#x2248;
not equal to &ne; &#8800; &#x2260;
identical to &equiv; &#8801; &#x2261;
less-than or equal to &le; &#8804; &#x2264;
greater-than or equal to &ge; &#8805; &#x2265;
subset of &sub; &#8834; &#x2282;
superset of &sup; &#8835; &#x2283;
not a subset of &nsub; &#8836; &#x2284;
subset of or equal to &sube; &#8838; &#x2286;
superset of or equal to &supe; &#8839; &#x2287;
circled plus = direct sum &oplus; &#8853; &#x2295;
circled times = vector product &otimes; &#8855; &#x2297;
up tack = orthogonal to = perpendicular &perp; &#8869; &#x22A5;
dot operator &sdot; &#8901; &#x22C5;
left ceiling = APL upstile &lceil; &#8968; &#x2308;
right ceiling &rceil; &#8969; &#x2309;
left floor = APL downstile &lfloor; &#8970; &#x230A;
right floor &rfloor; &#8971; &#x230B;
left-pointing angle bracket = bra &lang; &#9001; &#x2329;
right-pointing angle bracket = ket &rang; &#9002; &#x232A;
lozenge &loz; &#9674; &#x25CA;
black spade suit &spades; &#9824; &#x2660;
black club suit = shamrock &clubs; &#9827; &#x2663;
black heart suit = valentine &hearts; &#9829; &#x2665;
black diamond suit &diams; &#9830; &#x2666;

HTML Color

HTML Color Name Hexadecimal Color Code
ALICEBLUE "#F0F8FF"
ANTIQUEWHITE "#FAEBD7"
AQUA "#00FFFF"
AQUAMARINE "#7FFFD4"
AZURE "#F0FFFF"
BEIGE "#F5F5DC"
BISQUE "#FFE4C4"
BLACK "#000000"
BLANCHEDALMOND "#FFEBCD"
BLUE "#0000FF"
BLUEVIOLET "#8A2BE2"
BROWN "#A52A2A"
BURLYWOOD "#DEB887"
CADETBLUE "#5F9EA0"
CHARTREUSE "#7FFF00"
CHOCOLATE "#D2691E"
CORAL "#FF7F50"
CORNFLOWERBLUE "#6495ED"
CORNSILK "#FFF8DC"
CRIMSON "#DC143C"
CYAN "#00FFFF"
DARKBLUE "#00008B"
DARKCYAN "#008B8B"
DARKGOLDENROD "#B8860B"
DARKGRAY "#A9A9A9"
DARKGREEN "#006400"
DARKKHAKI "#BDB76B"
DARKMAGENTA "#8B008B"
DARKOLIVEGREEN "#556B2F"
DARKORANGE "#FF8C00"
DARKORCHID "#9932CC"
DARKRED "#8B0000"
DARKSALMON "#E9967A"
DARKSEAGREEN "#8FBC8F"
DARKSLATEBLUE "#483D8B"
DARKSLATEGRAY "#2F4F4F"
DARKTURQUOISE "#00CED1"
DARKVIOLET "#9400D3"
DEEPPINK "#FF1493"
DEEPSKYBLUE "#00BFFF"
DIMGRAY "#696969"
DODGERBLUE "#1E90FF"
FIREBRICK "#B22222"
FLORALWHITE "#FFFAF0"
FORESTGREEN "#228B22"
FUCHSIA "#FF00FF"
GAINSBORO "#DCDCDC"
GHOSTWHITE "#F8F8FF"
GOLD "#FFD700"
GOLDENROD "#DAA520"
GRAY "#BEBEBE"
GREEN "#008000"
GREENYELLOW "#ADFF2F"
HONEYDEW "#F0FFF0"
HOTPINK "#FF69B4"
INDIANRED "#CD5C5C"
INDIGO "#4B0082"
IVORY "#FFFFF0"
KHAKI "#F0D58C"
LAVENDER "#E6E6FA"
LAVENDERBLUSH "#FFF0F5"
LAWNGREEN "#7CFC00"
LEMONCHIFFON "#FFFACD"
LIGHTBLUE "#ADD8E6"
LIGHTCORAL "#F08080"
LIGHTCYAN "#E0FFFF"
LIGHTGOLDENRODYELLOW "#FAFAD2"
LIGHTGREEN "#90EE90"
LIGHTGREY "#D3D3D3"
LIGHTPINK "#FFB6C1"
LIGHTSALMON "#FFA07A"
LIGHTSEAGREEN "#20B2AA"
LIGHTSKYBLUE "#87CEFA"
LIGHTSLATEGRAY "#778899"
LIGHTSTEELBLUE "#B0C4DE"
LIGHTYELLOW "#FFFFE0"
LIME "#00FF00"
LIMEGREEN "#32CD32"
LINEN "#FAF0E6"
MAGENTA "#FF00FF"
MAROON "#800000"
MEDIUMAQUAMARINE "#66CDAA"
MEDIUMBLUE "#0000CD"
MEDIUMORCHID "#BA55D3"
MEDIUMPURPLE "#9370DB"
MEDIUMSEAGREEN "#3CB371"
MEDIUMSLATEBLUE "#7B68EE"
MEDIUMSPRINGGREEN "#00FA9A"
MEDIUMTURQUOISE "#48D1CC"
MEDIUMVIOLETRED "#C71585"
MIDNIGHTBLUE "#191970"
MINTCREAM "#F5FFFA"
MISTYROSE "#FFE4E1"
MOCCASIN "#FFE4B5"
NAVAJOWHITE "#FFDEAD"
NAVY "#000080"
OLDLACE "#FDF5E6"
OLIVE "#808000"
OLIVEDRAB "#6B8E23"
ORANGE "#FFA500"
ORANGERED "#FF4500"
ORCHID "#DA70D6"
PALEGOLDENROD "#EEE8AA"
PALEGREEN "#98FB98"
PALETURQUOISE "#AFEEEE"
PALEVIOLETRED "#DB7093"
PAPAYAWHIP "#FFEFD5"
PEACHPUFF "#FFDAB9"
PERU "#CD853F"
PINK "#FFC0CB"
PLUM "#DDA0DD"
POWDERBLUE "#B0E0E6"
PURPLE "#800080"
RED "#FF0000"
ROSYBROWN "#BC8F8F"
ROYALBLUE "#4169E1"
SADDLEBROWN "#8B4513"
SALMON "#FA8072"
SANDYBROWN "#F4A460"
SEAGREEN "#2E8B57"
SEASHELL "#FFF5EE"
SIENNA "#A0522D"
SILVER "#C0C0C0"
SKYBLUE "#87CEEB"
SLATEBLUE "#6A5ACD"
SLATEGRAY "#708090"
SNOW "#FFFAFA"
SPRINGGREEN "#00FF7F"
STEELBLUE "#4682B4"
TAN "#D2B48C"
TEAL "#008080"
THISTLE "#D8BFD8"
TOMATO "#FF6347"
TURQUOISE "#40E0D0"
VIOLET "#EE82EE"
WHEAT "#F5DEB3"
WHITE "#FFFFFF"
WHITESMOKE "#F5F5F5"
YELLOW "#FFFF00"
YELLOWGREEN "#9ACD32"

CSS basic usage

Where to define

go back here

Syntax

css.png

The selector is usually the HTML element. Each declaration consists of a property and a value.

p {color:red; text-align:center;}

OR

p {
   color:red;
   text-align:center;
}

Comment

/*  */

No one-line comment like a "//".

Selector

ID selector

#hoge {
   color:red;
   text-align:center;
}
<p id="hoge">centered-hoge</p>

The id selector is used for a unique, single element.

Class selector

.center {
   color:green;
   text-align:center;
}
<p class="center">centered-huga</p>

The class selector is used for elements with class="defined_tag".

The class selector can be defined to certain HTML elemets like

p.center {
   color:blue;
   text-align:center;
}

This effects "paragraph" elements with class="center".

Summary

  • all
    * {
      color:red;
    }
    p * {
      color:red;
    }
  • class
    .sample {
      font-size:18px;
      color:red;
    }
    p.sample {
      font-size:18px;
      color:red;
    }
  • id
    #sample {
      font-size:16px;
    }
  • E F
    p strong {
      font-size:16px;
    }
    <p><strong>hoge</strong></p>
  • grouping
    h1,h2,p
     {
     color:green;
     }

Background

h1 {background-color:white;}
p {background-color:red;}
div {background-color:blue;}
body
 {
     background-image:url('aho.png');
     background-repeat:no-repeat;
     background-position:right top;
 }

Text

body {color:blue;}
h1 {color:red;}
h2 {color:yellow;}
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
h1 {font-size:20px;}
h2 {font-size:40px;}
p {font-size:9px;}

Pseudo-class

hoge:link {color:#FF0000;}      /* unvisited link */
hoge:visited {color:#00FF00;}  /* visited link */
hoge:hover {color:#FF00FF;}    /* mouse over link */
hoge:active {color:#0000FF;}   /* selected link */

CSS Box mode

Margin, Border & Padding

margin.png
Margin
Define an area around the border. The area of margin has no background color. The area is transparent.
Border
A border surrounded around the padding and content.
Padding
Define an area around the content.
Content
The content which includes text and image.

Margin

PropertyDescription
marginA shorthand property for setting the margin properties in one declaration
margin-bottomSets the bottom margin of an element
margin-leftSets the left margin of an element
margin-rightSets the right margin of an element
margin-topSets the top margin of an element

ValueDescription
autoThe browser sets the margin. The result of this is dependant of the browser
lengthDefines a fixed margin (in pixels, pt, em, etc.)
%Defines a margin in % of the containing element

The margin property can have from one to four values.

  • margin:25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px
  • margin:25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px
  • margin:25px 50px;
    • top and bottom margins are 25px
    • right and left margins are 50px
  • margin:25px;
    • all four margins are 25px

Padding

PropertyDescription
paddingA shorthand property for setting all the padding properties in one declaration
padding-bottomSets the bottom padding of an element
padding-leftSets the left padding of an element
padding-rightSets the right padding of an element
padding-topSets the top padding of an element

ValueDescription
lengthDefines a fixed padding (in pixels, pt, em, etc.)
%Defines a padding in % of the containing element

The padding property can have from one to four values like as margin.

添付ファイル: filecss.png 370件 [詳細] filemargin.png 372件 [詳細] filetext_format.png 361件 [詳細]