ICT Chapter 21 - Website Teacher Nageeb
HTML5 structure Simple Table
main structure <!DOCTYPE html> <table border="1">
<html> <caption> Table title </caption>
<head> <tr>
<meta charset="UTF-8"> <td> content </td>
<title> Webpage Title </title> <td> content </td>
</head> </tr>
<body>
Content -- HTML code goes here <tr>
</body> <td> content </td>
</html> <td> content </td>
Comment </tr>
</table>
comment <!-- Your comment here -->
Text (Tags) Table with header and footer
Paragraph <p> Your paragraph here </p> <table border="1">
Heading font size h1 <h1> Your paragraph here </h1> <caption> Table title </caption>
Heading font size h2 <h2> Your paragraph here </h2>
Heading font size h3 <h3> Your paragraph here </h3> <thead>
<tr>
Heading font size h4 <h4> Your paragraph here </h4>
<th> content </td>
Heading font size h5 <h5> Your paragraph here </h5>
<th> content </td>
Heading font size h6 <h6> Your paragraph here </h6>
</tr>
span (inline Label) <span> Your paragraph here </span>
</thead>
bold <b> Text </b> or <strong> Text </strong>
italic <i> Text </i> or <em> Text </em> <tbody>
superscript <sup> Text </sup> <tr>
subscript <sub> Text </sub> <td> content </td>
Underline <u> Text </u> <td> content </td>
new line (line break) <br/> </tr>
Horizontal line <hr/> </tbody>
List
Ordered list <ol> <tfoot>
<li> content </li> <tr>
<li> content </li> <td> content </td>
</ol> <td> content </td>
</tr>
Unordered list <ul>
<li> content </li> </tfoot>
<li> content </li>
</ul> </table>
Image (inline element) Division
display image <img src=" file name" alt = "image title" > Division as container <div> content </div>
Link (inline element) Additional features
Hyper link (Anchors) <a href="webpage/file name/location" Target ="_blank"> Text </a> Inline Elements <span> , <b>,<strong>,<img>,<a>
Email Hyper link <a href="Mailto:Destmail@[Link]?subject=Message Title"> Send </a> Block-level Elements all elements except inline-element
Audio
Add Audio <Audio controls > Base target (targe of the link)
<source src="filename" type = "Audio/mpeg" > (_blank : to open link in new window <base target="_blank"/>
this browser dose not support this kind of file _self : to open link in the same window,
</Audio> _parent: to open link in parent frame
Video meta
Add Video <Video controls width="320" height="240" > charset <head>
<source src="filename" type = "Audio/mp4"> author <meta charset="UTF-8">
this browser dose not support this kind of file description <meta name="author" content="John Doe">
</Video> keywords <meta name="description" content="This Is Our Book Store" />
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
CSS Stylesheet Class
inline style CSS <h1 style="color : blue; "> A Blue Heading </h1> add effect for dedicated element tag <h1 class=" class_name" > Text </h1>
External style CSS link to html <head>
<link rel="stylesheet" href="file [Link]">
</head>
