User Tools

Site Tools


coding:html

HTML

Pictures

Adding pictures

<img src="cows.jpg" alt="Brown and white cows in a field">

Resizing pictures
Positioning pictures

semantics for pictures

<figure>
  <img src="images-audio-video/cows.jpg" alt="Brown and white cows in a field">
  <figcaption>A couple of brown and white {...}</figcaption>
</figure>



Adding audio

<audio src="images-audio-video/jazz.ogg" autoplay controls loop preload*.></audio>

*preload values: none, auto, metadata

For older browser versions:

<audio controls>
  <source src="jazz.ogg" type="audio/ogg">
  <source src="jazz.mp3" type="audio/mpeg">
  <object type="application/x-shockwave-flash" data="player.swf?audio=jazz.mp3">
    <param name="movie" value="player.swf?audio=jazz.mp3">
    <p>This browser does not support the audio format. Please <a href="jazz.mp3" title="Jazz song">download</a> the audio clip.</p>
  </object>
</audio>



Adding video

Specify size and hight with CSS.

<video src="earth.ogv" autoplay controls loop preload*></video>

*preload values: none, auto, metadata

Adding a picture before the video (called poster)

<video src="earth.ogv" controls poster="cows.jpg"></video>


Video controls for older browsers:

<video controls>
  <source src="earth.ogv" type="video/ogg">
  <source src="earth.mp4" type="video/mp4">
  <object type="application/x-shockwave-flash" data="player.swf?video=earth.mp4">
    <param name="movie" value="player.swf?video=earth.mp4">
    <p>This browser does not support the video format. Please <a href="earth.mp4" title="Earth video">download</a> the video.</p>
  </object>
</video>



Forms

general

Setting up a form:

<form action="#" method="foo">
  ...
</form>


Textfields

Textfield

<input type="text" name="sample_text_field">

Possible types in html 5:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Textarea

<textarea name="sample_textarea">Sample textarea</textarea>



Multiple Choice Inputs & Menus

Radio buttons

<input type="radio" name="day" value="Friday" checked> Friday
<input type="radio" name="day" value="Saturday"> Saturday
<input type="radio" name="day" value="Sunday"> Sunday


Checkboxes

<input type="checkbox" name="day" value="Friday" checked> Friday
<input type="checkbox" name="day" value="Saturday"> Saturday
<input type="checkbox" name="day" value="Sunday"> Sunday


Drop and down lists

<select name="day">
  <option value="Friday" selected>Friday</option>
  <option value="Saturday">Saturday</option>
  <option value="Sunday">Sunday</option>
</select>


Multiple selections

<select name="day" multiple>
  <option value="Friday" selected>Friday</option>
  <option value="Saturday">Saturday</option>
  <option value="Sunday">Sunday</option>
</select>

Resize multiple list

Buttons

Submit button

<input type="submit" name="submit" value="Submit Form">

Reset button (seldom used)

<input type="reset" name="reset" value="Reset Form">


Hidden information

<input type="hidden" name="tracking_code" value="abc_123">


adding files

<input type="file" name="file">


labels

<label for="username">Username</label>
<input type="text" name="username" id="username">

labels with radio buttons and checkboxes can be directly included in the code:

<label><input type="radio" name="day" value="Friday" checked> Friday</label>
<label><input type="radio" name="day" value="Saturday"> Saturday</label>
<label><input type="radio" name="day" value="Sunday"> Sunday</label>


Fieldset and labels

Fieldset = regroupment of the form. Label = name

<fieldset>
  <legend>Login</legend>
  <label for="username">Username</label>
  <input type="text" name="username" id="username">
  <label for="password">Password</label>
  <input type="text" name="password" id="password">
</fieldset>


Form & input attributes

Disabled:

<label for="username">Username</label>
<input type="text" name="username" id="username" disabled>

Placeholder and value:

<label for="username">Username placeholder</label>
<input type="text" name="username" id="username" placeholder="Holder">

Required:

<label for="name">Name</label>
<input type="text" name="name" id="name" required>

Styling is onde with: :optional and :required classes
Other possible values:

  • accept
  • autocomplete
  • autofocus
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • max
  • maxlength
  • min
  • pattern
  • readonly
  • selectionDirection
  • step


Tables

<table>
  <tr>
    <th scope="col">Date</th>
    <th scope="col">Opponent</th>
    <th scope="col">Location</th>
    <th scope="col">Time</th>
  </tr>
  <tr>
    <td>Monday, March 5th</td>
    <td>Indiana Pacers</td>
    <td>United Center, Chicago, IL</td>
    <td>7:00 PM</td>
  </tr>
  <tr>
    <td>Wednesday, March 7th</td>
    <td>Milwaukee Bucks</td>
    <td>Bradley Center, Milwaukee, WI</td>
    <td>7:00 PM</td>
  </tr>
  <tr>
    <td>Thursday, March 8th</td>
    <td>Orlando Magic</td>
    <td>United Center, Chicago, IL</td>
    <td>7:00 PM</td>
  </tr>
  <tr>
    <td>Saturday, March 10th</td>
    <td>Utah Jazz</td>
    <td>United Center, Chicago, IL</td>
    <td>7:00 PM</td>
  </tr>
</table>

Possible scope values for th: row, col, rowgroup, and colgroup.

combining cells

<table>
  <tr>
    <th scope="col">Date</th>
    <th scope="col">Opponent</th>
    <th scope="col">Location</th>
    <th scope="col">Time</th>
  </tr>
  <tr>
    <td>Monday, March 5th</td>
    <td>Indiana Pacers</td>
    <td>United Center, Chicago, IL</td>
    <td rowspan="4">7:00 PM</td>
  </tr>
  <tr>
    <td>Wednesday, March 7th</td>
    <td colspan="2">Milwaukee Bucks, Bradley Center, Milwaukee, WI</td>
  </tr>
  <tr>
    <td>Thursday, March 8th</td>
    <td>Orlando Magic</td>
    <td rowspan="2">United Center, Chicago, IL</td>
  </tr>
  <tr>
    <td>Saturday, March 10th</td>
    <td>Utah Jazz</td>
  </tr>
</table>


Structuring tables

<table>
  <caption>...</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

For borders visit Table borders


Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 201 bytes) in /home_p2/d/o/domidesign.ch/htdocs/domicode.com/wiki/lib/plugins/authplain/auth.php on line 327