This post will describe about how to create responsive technical documentation web page using only HTML and CSS.
Before creating this mini project I will explain you about what the technical documentation is.
What is technical documentation?
Technical documentation is a short description about the product so user can learn how to use it. Example of technical documentation includes user manual, Wiki, tutorials, etc..
Skills required for project:-
HTML and CSS
Description:-
The technical documentation page is simple page with menu bar and content part. The menu bar is consists of links of topics so user can directly jump to respective topic. In this mini project I will creating technical documentation of HTML.
HTML structure:-
The structure of page has been created using version 5 of HTML. The main heading has been defined under header element. I have taken two sections: one for navigation menu and second for content. The content has been written inside article elements. The “<pre>” and “<code>” element has been used to display html example as it is.
CSS design:-
The width of main heading has been 100% and sticked at top. The navigation menu positioned left and the content area positioned right using float property.
 |
| HTML CSS technical documentation page (output image on laptop) |
responsive technical documentation page using media query :-
To make page mobile friendly I have taken media query so that this page also look good on small devices.
All the content of this page positioned to left. The navigation menu has been hidden, when you hover on menu the navigation links displayed. The font size also has been decreased.
HTML source code:-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | <!DOCTYPE html> <html> <head> <title>Technical Documentation</title> <link rel="stylesheet" href="tech_doc.css"> </head> <body> <header> <h1>HTML Documentation</h1> </header> <section id="sec1"> <h2>Menu</h2> <nav> <a href="#intro">Introduction</a> <a href="#elem">Elements and attributes</a> <a href="#heads">Headings and paragraph</a> <a href="#format">HTML foramtting</a> <a href="#list">HTML lists</a> <a href="#image">HTML image and link</a> <a href="#inline">Inline and BLock elements</a> <a href="#table">HTML table</a> <a href="#form">HTML forms</a> </nav> </section> <section id="sec2"> <article> <a name="intro"> <h3>INTRODUCTION</h3> <a name="intro"> <h5>What is HTML?</h5> <p>Tim Berners-Lee invented HTML in 1991. After that new versions were introduced in period of time. HTML stands for Hyper Text Markup Language. As name suggest HTML is markup language used for web development. In web developement, HTML creates structure of Web pages.HTML is consists of elements(tags).</p> <p>Following is the basic structure of HTML.</p> <pre> <code> <!DOCTYPE html> ← HTML documentation version <html> ← Root element <head> ← Contains meta information. <title> ← title of html page </title> </head> <body> .....Rest of the elements written here..... </body> </html> </code> </pre> </article> <article> <a name="elem"> <h3>Elements and attributes</h3> </a> <p>The HTML elements are defined by start tag,content and end tag. <br />examples of HTML elements:<br /><h1>Heading<h1><br /><p>Paragrahph<p>.<br>HTML elements with no content are called empty elements. Examples of empty elements are:<hr>,<br>,<img>,etc.</p> <p>The HTML attributes are defined by 'name=value' pair inside an element. The id and class are core attributes of html used to uniquely identify html element.<br> For example:- <code><br><a href="filepath">name</a><br><p id="p1"> some content</p></code></p> </article> <article> <a name="heads"> <h3>Headings and Paragraphs</h3> </a> <p>HTML have 6 levels of headings:<h1>,<h2>,<h3>,<h4>,<h5>,<h6>.The <h1> specifies the largest heading among 6.Similarly <h6> specifies smallest heading.</p> <p>The <p> tag specifies the paragraph.Each paragraph starts with a new line.If you want to break the paragraph at middle and start the next sentence at new line then use <br> tag before the sentence which you want to start at new line.</p> </article> <article> <a name="format"> <h3>HTML formatting</h3> </a> <p>The formatting elements are used to make simple text beutiful on browser window. following are the list of elements that are used to format text.</p ><p> <b> :- Bold text <br> <strong> :- Important text <br> <em> :- Emphasized text <br> <mark> :- Marked text <br> <small> :- smaller text <br> <del> :- Deleted text <br> <ins> :- Inserted text <br> <sub> :- Subscripted text <br> <sup> :- Superscripted text </p> </article> <article> <a name="list"> <h3>HTML lists</h3> </a> <p>HTML list elements allow you listing your content in ordered or unordered lists. Another listing approach is description list which have little description about specified term.</p> <p><ol> :- Ordered list<br>Display list with series of either number,romans or alphabetic bullets.</p> <p><ul> :- Unordered list<br>Display list with series of either disc,circle or square bullets.</p> <p><li> :- List items<br>Container for items.</p> <p><dl> :- Definition list<br>Display list of terms with some description.</p> <p><dt> :- Definition term<br>Display list of term.</p> <p><dd> :- Term description<br>Display description about specified term.</p> </article> <article> <a name="image"> <h3>HTML image and link</h3> </a> <p>Images can be insert in html document using <img> element. It is an empty element. It is necessary to write src attribute with image element, because without file path image is not displayed on screen. You can also set size of images with height and width atrribute. Always use alt attribute that provide description of image. In case an image not loaded the text in alt is displayed inplace of image. <br>Example :-<br><code> <img src="imagefilepath" alt="description" height="300" width="400"/></code></p> <p>An anchor tag is used to put links on text or images. Using anchor tag you can link another page or link the content of same page. <br> Example:-<br> <code><a href="filepath">some text/image</a><br><a>href="#text">text link</a><br><a name="text">some text</a></code></p> </article> <article> <a name="inline"> <h3>Inline and Block Elements</h3> </a> <p>Inline elements are the elements that never starts at new line and takes only required width. Some inline elements are:<code><a>,<br>,<input>,<strong>,<q>,<sup>,<b>,<span>,<img> </code>and more.</p> <p>Block elements are opposite to inline elements, takes full width and start at new line.The browser also adds margins before and after elements.Examples of block level elements are:<code><p>,<div>,<address>,<article>,<ol>,<section><hr>,<nav></code> and more.</p> <pre> Example:- <code> <p>This is an example of <b>block</b> <br>and <span>inline</span> elements.</p> </code> </pre> <p>An inline element can not contain block elements but block elements contains inline elements.</p> </article> <article> <a name="table"> <h3>HTML table</h3> </a> <p>HTML also display data in tabular form.The <table> element is arrange data in row and column format. Following are the list of table elements.</p> <p> <table> :- define table <br> <tr> :- define table row <br> <td> :- define table cell <br> <th> :- define heading cell <br> <caption> :- define table caption <br> <thead> :- define table header <br> <tbody> :- define table body <br> <tfoot> :- define table footer <br> <colgroup> :- define column group <br> </p> </article> <article> <a name="form"> <h3>HTML forms</h3> </a> <p>HTML form is used to get input from user and sent to server. The <form> element is used to create html form.It contains other input elements such as:text fields,checkboxes,radio buttons,submit button,drop-down menu,etc..In form craetion most of the times an <input> element is used.It has type attribute, which specifies different form of inputs.The <form> element used attributes like:name,target,method,action.<br>Example:-<br> <pre> <code> <form name="f1" method="post" action="url"> <input type="text" name="nm"> <input type="submit" name="submit" value="submit"> </form> </code> </pre> </p> </article> </section> </body> </html> |
CSS styles sheet:-
* { font-family:"Times New Roman", Times, serif; } header h1 { position:fixed; top:0; margin:auto; width:98%; background-color:#CCCCCC; color:#0033FF; text-align:center; border:3px solid #999999; } #sec1 { margin-top:30px; margin-left:20px; position:fixed; width:20%; height:100%; display:inline-block; padding:10px; } h2 { text-align:center; background-color:#000000; color:#FFFFFF; padding:5px; } nav a { display:block; padding:5px; text-decoration:none; font-size:18px; text-align:justify; color:#000000; border-bottom:1px inset #CCCCCC; } nav a:hover { border:3px inset #999999; font-size:20px; } a:active { background-color:#CCCCCC; } #sec2 { margin-top:20px; margin-right:30px; float:right; width:70%; text-align:justify; } h3 { background:#000000; color:#FFFFFF; padding:5px; } p { font-size:18px; } /*media query for mobile phones*/ @media only screen and (max-width:600px) { header h1{ left:0; right:0; width:auto; text-align:left; } #sec1{ width:100%; height:auto; margin-top:35px; margin-left:-10px; margin-right:0; background-color:#0000FF; } h2{ padding:0; text-align:left; } nav a{ display:none; } #sec1:hover nav a{ display:block; } #sec2 { margin-top:100px; float:left; } p{ font-size:16px; } }
Output on laptop:-
Output on mobile phone:-
So here the project of making technical documentation of HTML completed.
Summary
This is simple and beginners friendly mini project. In html less than (“<”) and greater than (“>”) sign not display on screen because the browser confused between HTML tags and less than and greater than sign. So to display html example on screen as it is I have used html character entity < for less than and > for greater than sign.
0 Comments