<html>

<head>

                <title>  </title>

</head>

<body>

 

</body>

</html>

 

 

Web Authoring

HTML code structure:

 

 

 

 

 

 

 

Description

Code

Location

To add a title:

<title>  </title>

Head area

To attach a stylesheet

<link rel="stylesheet" type="text/css" href="filename.css">

Head area

To add meta tags

<meta name="description" content="Text">
<meta name="keywords" content="Text1,Text2,Text3,…etc">
<meta name="author" content="Author name and more info">

Head area

To add internal styles

<style>

          h1 {font-family: Arial, sans-serif; font-weight:bold; font-size:42px; }

          h2 {font-size:30px;  text-align:center; }

          body { background-image: url('sea.jpg'); background-repeat: repeat; }

</style>

Head area

Default target name

<base target="_self">

Head area

To add inline styles

<p style="text-align: center; font-size: 16pt">Manar School</p>

Or

<table style="width: 100%; border-style: solid; border-width: 1px">

Body

To apply the style h1 on a text

<h1>some Text</h1>

 

Add an image

<img src="Flag.png" alt="Text" width="200" height="120" />

 

Add a horizontal line across

<hr>

 

 


 


Description

Code

Location

To center align a table

<table align="center">

Body

Table head area

<thead>

</thead>

Body inside table area

Table body area

<tbody>

</tbody>

Body inside table area

Table foot area

<tfoot>

</tfoot>

Body inside table area

Table row

<tr></tr>

Body inside table area

Table data (cell)

<td></td>

Body inside table area

Table header

<th></th>

Body inside table area

Example

<table>
 <tr>
   <th>Name</th>
   <th>Salary</th>
 </tr>
 <tr>
   <td>Ali</td>
   <td>$1500</td>
 </tr>
</table>

Body

Merge 2 columns in a table

<td colspan="2">Out employees</td>

Body inside table area

Merge 2 rows  in a table

<td rowspan="2">add image here</td>

 

Ordered list

<ol>

   <li>Arabic</li>

   <li>English</li>

</ol>

Body

Uordered list

<ul>

   <li>Ali</li>

   <li>Mona</li>

</ul>

Body

Non breaking space

is a space that will not break into a new line.

&nbsp;

Body


 

Description

Code

Location

Add an anchor

<a name="TOP"></a>

Body

Link to an anchor

<a href="#TOP"> Text or image </a>

Body

Link to a webpage

<a href="Grade1.htm" target="_self">Grade 1 webpage</a>

Body

Link to an email message

<a href="mailto:mr.amrict@yahoo.com?subject=Welcome">Contact us</a>

Body

Link to an external website

<a href="http://www.google.com">Use best search engine</a>

Body

Bold text

<b>Text</b>

Body

Bold text

<strong>Text</strong>

Body

Italic text

<i>Text</i>

Body

Italic text

Emphasized

<em>Text</em>

Body

Underlined text

<u>Text</u>

Body

Subscript text

<sub>Text</sub>

Body

Superscript text

<sup>Text</sup>

Body

Add comments

<!-- Add comment text here -->

Wherever between <html> and </html>

Moving text

<marquee>Manar</marquee>

Body

Add audio

Way1

<audio controls src="filename.mp3">

</audio>

Body

Add audio

Way2

<audio controls width="1000" height="200">

<source src="ks.mp3">

</audio>

Body

Add video

Way1

<video controls src="filename.mp4" width="400" height="240">

</video>

Body

Add video

Way2

<video controls width="1000" height="200">

      <source src="small.mp4">

</video>

Body

 

 


 

 

Forms:

Description

Code

Location

Add a simple form:

2 labels

2 text boxes

1 button

<form>

  First name: <input type="text"><br><br>

  Last name: <input type="text"><br>

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

</form>

Body

Add a simple form:

1 labels

2 checkboxes

 

<form>

<strong>What do you have?</strong> <br>

<input type="checkbox" value="Bike" checked> I have a bike<br>

<input type="checkbox" value="Car" checked> I have a car<br>

</form>

Body

Add a simple form:

1 labels

2 radiobuttons

 

<form>

<strong>Gender:</strong> <br>

<input type="radio" name="gender" value="male" checked> Male<br>

<input type="radio" name="gender" value="female"> Female<br>

</form>

Body

Add a simple form:

1 listbox

<select multiple="multiple">

    <option>Egypt</option>

    <option>USA</option>

    <option>Italy</option>

</select>

Body

Add a simple form:

1 dropdown list

<select>

  <option value="volvo">Volvo</option>

  <option value="mercedes">Mercedes</option>

  <option value="audi">Audi</option>

</select>

Body

Add a simple form:

1 Text area

<textarea></textarea>

Body

Link to an email message

<a href="mailto:mr.amrict@yahoo.com?subject=Welcome">Contact us</a>

Body

 


 

CSS                                                     Description

Code

Font name Arial, if not available any sans-serif font

font-family: Arial, sans-serif;

The font size is 20 pixel

font-size: 20px;

The font is bold

font-weight: bold;

The font is italic

font-style: italic;

The font is underlined

text-decoration: underline;

The font is centered

text-align: center;

The style h2 text colour is green

h2 { color: #00FF00; }

The background colour of the style h3 is aqua

h3 { background-color: #00FFFF; }

The background colour of the webpage is light yellow

body { background-color: #FFFF99; }

The background image is the image bg1.jpg, which will be repeated

body { background-image: url('bg1.jpg');    

            background-repeat: repeat;}

The style li uses a normal bullet (disc)

li { list-style-type: disc; }

The style li uses numbered list

li { list-style-type: decimal; }

The style li uses a the image Square1.png as a bullet

li { list-style-image: url('Square1.png'); }

The external border is 3pixel width, solid, and black

table { border: 3px solid #000000; }

The borders is collapsed

table { border-collapse: collapse; }

The width of the table is 500 pixel wide and 300 pixel high

table { width: 500px; height: 300px; }

The table padding is 10 pixels (all sides)

table { padding: 10px; }

Table padding are (top 10px, right 8px, bottom 6px, left 4px)

table { padding: 10px 8px 6px 4px; }

The table is Centered

table { margin-right: auto; margin-left: auto; }

The table margins are (top 10px, right 8px, bottom 6px, left 4px)

table { margin: 10px 8px 6px 4px; }

The internal borders are 1 pixel width, solid, and black

td { border: 1px solid #0000FF; }

No External or internal borders

table, td { border: 0; }

For style p the space between words is 0.5em, space between letters is 0.2em

p { word-spacing: 0.5em; letter-spacing: 0.2em; }

Break words only at allowed break points

h3 { word-wrap: normal; }

Allow long words to be able to break and wrap onto the next line

h3 { word-wrap: break-word; }

Add comments to CSS code

/* Add your comments */