Blog of Kaloyan Savov: HTML

Показват се публикациите с етикет HTML. Показване на всички публикации

петък, 28 декември 2012 г.

Syntax Highlighter за Blogger

Syntax Highlighter е много полезен инструмент, който се интегрира в Blogger и с помощта на който публикуването на код става много по прегледно и четливо. За да може да се използва този инструмент той трябва да бъде предварително интегриран в избрания Template на блога ви. За целта се отива в менюто Template и там се натиска Edit HTML. След като вече се вижда HTML кода над </head> тага се слага следния код:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>

Syntax Highlighter може да форматира кода на доста езици. Ако в блога ви ще се публикува код само на един или няколко от изброените езици може да се изберат само желаните езици, а останалите да не се добавят.
След като инструмента вече е добавен има два начина за задаване на формата на публикувания код. Първият начин е чрез използване на script тага. Когато се публикува кода се отива в HTML таба на публикацията и преди публикувания код се слага следното:
<script type="syntaxhighlighter" class="brush: csharp">
След края на кода се слага:
</script>
След като това се направи при визуализация на публикацията кода вече ще е форматиран в избрания език. В конкретния пример форматирането е за езика C#.
Вторият начин по който може да се зададе форматиране е чрез тага pre. Нещата са идентични като при първия начин, само че в началото преди кода се слага следното:
<pre class="brush: csharp">
След края на кода се слага:
</pre>
И в този пример е показано форматиране за езика C#. На мен лично втория начин повече ми допада, тъй като е с по-кратък запис.
Ако трябва да се публикува HTML код той предварително трябва да бъде минат през HTML енкодер. Такъв може да бъде на мерен тук. След като HTML кода бъде минат през енкодера той вече може да бъде поставен и форматиран чрез изброените по-горе начини.
Форматирането на кода беше едно от нещата, заради което не публикувах домашните веднага когато ги написах. Сега когато вече съм интегрирал този инструмент ще мога много по-четливо да публикувам всички минали и предстоящи домашни. Единствен минус на този инструмент, който съм видял досега е че при разглеждането на блога във формат за мобилни устройства форматирането липсва. Тествал съм на вградения браузър на Android 4.2 и на Doplhin и при двата браузъра кода не е коректно форматиран. При Opera Mobile и визуализация на десктоп версията всичко си се вижда както трябва да бъде.

вторник, 13 ноември 2012 г.

HTML: Semantic Web

Това е последното домашно от курса по въведение в HTML. Всички задачи са минати през валидатор.

Задача 1: Refactor the refactoring-homework.html web page and make its HTML semantic.

<!DOCTYPE html>
<html>
<head>
 <title>Design_1</title>
</head>
<body>
<header>
 <h1>
  <img src="logo.jpg" alt="Logo" /><span>Welcome to our Web Site</span>
 </h1>
 <nav>
  <ul>
   <li><a href="#">Nav Item 1</a></li>
   <li><a href="#">Nav Item 1</a></li>
   <li><a href="#">Nav Item 1</a></li>
   <li><a href="#">Nav Item 1</a></li>
  </ul>
 </nav>
</header>
<table border="1" cellspacing="0">
 <thead>
  <tr>
   <th>First name</th>
   <th>Last name</th>
   <th>Score</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Doncho</td>
   <td>Minkov</td>
   <td>4.54</td>
  </tr>
  <tr>
   <td>Svetlin</td>
   <td>Nakov</td>
   <td>4.31</td>
  </tr>
  <tr>
   <td>Georgi</td>
   <td>Georgiev</td>
   <td>4.54</td>
  </tr>
 </tbody>
</table> 
</body>
</html>

Задача 2: Create a web page using semantic HTML by the design in homework-design-1.pptx.

<!DOCTYPE html>
<html>
<head>
 <title>LinkedIn</title>
</head>
<body>
<header>
 <h1><a href="http://www.linkedin.com/">LinkedIn</a></h1>
  <nav>
   <ul>
    <li><a href="#">LinkedIn</a>
    <li><a href="#">What is LinkedIn</a></li>
    <li><a href="#">Join Today</a></li>
    <li><fieldset><legend>Sign In</legend>
     <ul>
      <li><form><label>Email:</label>
      <input type="email" name="email"  pattern="[a-zA-Z0-9_]{3,}@[a-zA-Z0-9_]{3,}.[a-zA-Z0-9_]{2,4}" /></form></li>
      <li><form><label>Password:</label>
      <Input type="password" name="password" /></form></li>
      <li><input type="button" value="Sign In" /></li>
     </ul>
     </fieldset>
    </li>
   </ul>
  </nav>
 <hr/>
</header>
<h1>Over 175 million proffesionals use LinkedIn to exchange information, ideas and opportunities</h1>
<ul>
 <li>Stay informed about your contacts and industry</li>
 <li>Find the people & knowledge you need to achieve your goals</li>
 <li>Control your professional identity online</li>
</ul>
<h2>Join LinkedIn Today</h2>
 <fieldset>
  <legend>Sign Up</legend>
  <ul>
   <li><form><label>First Name:</label>
   <div><input type="text" name="firstname" /></div></form></li>
   <li><form><label>Last Name:</label>
   <div><input type="text" name="lastname" /></div></form></li>
   <li><form><label>Email:</label>
   <div><input type="email" name="email" pattern="[a-zA-Z0-9_]{3,}@[a-zA-Z0-9_]{3,}.[a-zA-Z0-9_]{2,4}" /></div></form></li>
   <li><form><label>Password</label>
   <div><input type="password" name="password"   /></div></form>
   <div>6 or more characters</div></li>
  </ul>
  <form><input type="button" value="Join Now" /></form>
  <span><a href="#">*</a></span>
  <p>Already on LinkedIn? <a href="#">Sign In</a></p>
 </fieldset>
<h3>Search for someone by name</h3>
<ul>
 <li><form><label>First Name</label>
 <input type="text" name="firstname" /></form></li>
 <li><form><label>Last Name</label>
 <input type="text" name="lastname" ></form></li>
</ul>
<form><input type="button" value="Go" /></form>
</body>
</html>

Задача 3: Create a web page using semantic HTML by the design in homework-design-2.pptx.

<!DOCTYPE html>
<html>
<head>
 <title>Refactoring</title>
</head>
<body>
<header>
<h1>The Header</h1>
<nav>
 <ol type="1">
  <li><a href="#">nav item 1</a></li>
  <li><a href="#">nav item 2</a></li>
  <li><a href="#">nav item 3</a></li>
  <li><a href="#">nav item 4</a></li>
 </ol>
</nav>
</header>
<h2>Post header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong>elit</strong>. Mauris urna orci, euismod vitae sollicitudin et, varius et velit. 
 Cras et tellus erat. Vestibulum auctor varius purus faucibus posuere. Maecenas et libero et orci bibendum eleifend sit amet ut purus. 
 Sed at lorem in metus tempus pretium. Praesent cursus rhoncus nulla. Nulla condimentum lacus et ligula consectetur eu tristique sem scelerisque. 
 Duis id velit enim, sed sodales nulla. Donec leo erat, posuere vel scelerisque in, rutrum ac magna. <em>Donec elementum nunc molestie nulla semper</em> vitae placerat turpis bibendum. 
 Phasellus egestas lobortis dictum.</p>
<h2>Post header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong>elit</strong>. Mauris urna orci, euismod vitae sollicitudin et, varius et velit. 
 Cras et tellus erat. Vestibulum auctor varius purus faucibus posuere. Maecenas et libero et orci bibendum eleifend sit amet ut purus. 
 Sed at lorem in metus tempus pretium. Praesent cursus rhoncus nulla. Nulla condimentum lacus et ligula consectetur eu tristique sem scelerisque. 
 Duis id velit enim, sed sodales nulla. Donec leo erat, posuere vel scelerisque in, rutrum ac magna. <em>Donec elementum nunc molestie nulla semper</em> vitae placerat turpis bibendum. 
 Phasellus egestas lobortis dictum.</p>
<h2>Post header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong>elit</strong>. Mauris urna orci, euismod vitae sollicitudin et, varius et velit. 
 Cras et tellus erat. Vestibulum auctor varius purus faucibus posuere. Maecenas et libero et orci bibendum eleifend sit amet ut purus. 
 Sed at lorem in metus tempus pretium. Praesent cursus rhoncus nulla. Nulla condimentum lacus et ligula consectetur eu tristique sem scelerisque. 
 Duis id velit enim, sed sodales nulla. Donec leo erat, posuere vel scelerisque in, rutrum ac magna. <em>Donec elementum nunc molestie nulla semper</em> vitae placerat turpis bibendum. 
 Phasellus egestas lobortis dictum.</p>
<h2>Post header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong>elit</strong>. Mauris urna orci, euismod vitae sollicitudin et, varius et velit. 
 Cras et tellus erat. Vestibulum auctor varius purus faucibus posuere. Maecenas et libero et orci bibendum eleifend sit amet ut purus. 
 Sed at lorem in metus tempus pretium. Praesent cursus rhoncus nulla. Nulla condimentum lacus et ligula consectetur eu tristique sem scelerisque. 
 Duis id velit enim, sed sodales nulla. Donec leo erat, posuere vel scelerisque in, rutrum ac magna. <em>Donec elementum nunc molestie nulla semper</em> vitae placerat turpis bibendum. 
 Phasellus egestas lobortis dictum.</p>
<footer>
<p>and the footer</p>
</footer>
</body>
</html>

HTML: Forms

Ето ги и задачите от домашното за форми в HTML. Постарал съм се всичко да е направено максимално според изискванията. Всичко е минато през валидатор.

Задача 1: Create a Web form that looks like this sample:

<!DOCTYPE html>
<html>
<head>
 <title>Web Form</title>
</head>
<body>
<form>
 <table border="1" cellspacing="0" style="text-align:left">
  <colgroup>
   <col width="140" />
   <col width="320" />
  </colgroup>
  <tr>
   <td style="text-align:right"><label>Last Name</label></td>
   <td><input type="text" name="lname" required="required" pattern="[a-z-A-Z]{2,15}" size="40"/></td>
  </tr>
  <tr>
   <td style="text-align:right"><label>First Name</label></td>
   <td><input type="text" name="fname" required="required" pattern="[a-z-A-Z]{2,15}" size="40"/></td>
  </tr>
  <tr>
   <td style="text-align:right"><label>Adress</label></td>
   <td><textarea name="adress" cols="30" rows="4" required="required" ></textarea></td>
  </tr>
  <tr>
   <td style="text-align:right"><label>City</label></td>
   <td><input type="text" name="city" required="required" pattern="[a-z-A-Z]{2,20}" size="25"/>
   <span><label>State</label>
   </span><input type="text" name="state" required="required" pattern="[a-z-A-Z]{2,20}" size="5"/></td>
   
  </tr>
  <tr>
   <td style="text-align:right"><label>Zip/Postal Code</label></td>
   <td><input type="text" name="zip" required="required" pattern="[0-9]{4}" size="15"/></td>
  </tr>
  <tr>
   <td style="text-align:right"><label>Country</label></td>
   <td><select name="country">
    <option value="BG" selected="selected">Bulgaria</option>
    <option value="RO">Romania</option>
    <option value="GR">Greece</option>
    <option value="SR">Serbia</option>
   </select></td>
  </tr>
  <tr>
   <td style="text-align:right"><label>Phone(Country Code, Area Code, Number)</label></td>
   <td><span>*(</span>
   <input type="tel" name="phone" required="required" pattern="[\+]\d{3}" placeholder="+359" size="5"/>
   <span>)</span>
   <input type="tel" name="phone" required="required" pattern="\d{3}" placeholder="888" size="5"/>
   <span>-</span>
   <input type="tel" name="phone" required="required" pattern="\d{6}" placeholder="888888" size="15"/></td>
  </tr>
  <tr>
   <td style="text-align:right"><label>E-mail</label></td>
   <td><input type="email" name="email" required="required" pattern="[a-zA-Z0-9_]{3,}@[a-zA-Z0-9_]{3,}.[a-zA-Z0-9_]{2,4}" placeholder="sample@email.com" size="40"/></td>
  </tr>
  <tr>
   <td style="text-align:right"><label>Birth date</label></td>
   <td><span>Month</span><input type="text" name="birth date" required="required" pattern="[0-9]{1,2}" size="1"/>
   <span>Day</span>
   <input type="text" name="birthdate" required="required" pattern="[0-9]{1,2}" size="1"/>
   <span>Year(4 digit)</span>
   <input type="text" name="birthdate" required="required" pattern="[0-9]{4}" size="3"/></td>
  </tr>
  <tr>
   <td style="text-align:right"><label>Gender</label></td>
   <td><select name="gender">
    <option value="male" selected="selected">Male</option>
    <option value="female">Female</option>
   </select></td>
  </tr>
  <tr>
   <td style="text-align:right"><label>Starting date</label></td>
   <td><input name="startingdate" type="radio" value="s" />
   <label>Spring 2006</label>
   <input name="startingdate" type="radio" value="r" />
   <label>Summer 2006</label></td>
  </tr>
  <tr>
   <td style="text-align:right"><label>Comments/Questions</label>
   <td><textarea name="comments" cols="35" rows="5"></textarea></td>
  </tr>
  <tr>
   <td colspan="2" style="text-align:center"> <input type="submit" name="submit" value="Submit" />
   <input type="reset" name="reset" value="Clear This Form" /></td>
  </tr>
 </table>
</form>
</body>
</html>

Задача 2: Create the following using tables and forms:

<!DOCTYPE html>
<html>
<head>
 <title>Univercity Table</title>
</head>
<body>
<form>
 <table border="1" cellspacing="0">
  <thead>
   <tr>
    <th rowspan="2">Order</th>
    <th colspan="3">Personal Info</th>
    <th colspan="5">University Marks</th>
   </tr>
   <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Faculty Number</th>
    <th>English</th>
    <th>Math</th>
    <th>Biology</th>
    <th>Physics</th>
    <th>Total</th>
   </tr>
  </thead>
  <tfoot>
   <tr>
    <td colspan="9"><input type="button" value="Previous" />
    <a href="#">1</a>
    <span>,</span>
    <a href="#">2</a>
    <span>,</span>
    <a href="#">3</a>
    <span>,</span>
    <a href="#">4</a>
    <span>,...,</span>
    <a href="#">10</a>
    <input type="button" value="Next" /></td>
   </tr>
  </tfoot>
  <tbody>
   <tr>
    <td>1</td>
    <td>Pesho</td>
    <td>Yordanov</td>
    <td>123456</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>3,50</td>
   </tr>
   <tr>
    <td>2</td>
    <td>Pesho</td>
    <td>Yordanov</td>
    <td>123456</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>3,50</td>
   </tr>
   <tr>
    <td>3</td>
    <td>Pesho</td>
    <td>Yordanov</td>
    <td>123456</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>3,50</td>
   </tr>
   <tr>
    <td>4</td>
    <td>Pesho</td>
    <td>Yordanov</td>
    <td>123456</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>3,50</td>
   </tr>
   <tr>
    <td>5</td>
    <td>Pesho</td>
    <td>Yordanov</td>
    <td>123456</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>3,50</td>
   </tr>
   <tr>
    <td>6</td>
    <td>Pesho</td>
    <td>Yordanov</td>
    <td>123456</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>3,50</td>
   </tr>
   <tr>
    <td>7</td>
    <td>Pesho</td>
    <td>Yordanov</td>
    <td>123456</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>3,50</td>
   </tr>
   <tr>
    <td>8</td>
    <td>Pesho</td>
    <td>Yordanov</td>
    <td>123456</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>3,50</td>
   </tr>
   <tr>
    <td>9</td>
    <td>Pesho</td>
    <td>Yordanov</td>
    <td>123456</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>3,50</td>
   </tr>
   <tr>
    <td>10</td>
    <td>Pesho</td>
    <td>Yordanov</td>
    <td>123456</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>3,50</td>
   </tr>
  </tbody>
 </table>
</form>
</body>
</html>

Задача 3: Construct the following Grid component:
Try to make a HTML page, that looks just like the example
Not required to style for the homework

<!DOCTYPE html>
<html>
<head>
 <title>Grid Component</title>
</head>
<body>
<form>
 <table cellspacing="0" border="1">
  <thead>
   <tr>
    <th colspan="6">Drag a column header and drop it here to group by that column</th>
   </tr>
   <tr>
    <th>ProductID</th>
    <th>Product Name</th>
    <th>Unit Price</th>
    <th>Quantity per unit</th>
    <th>Units in stock</th>
    <th>Discontinued</th>
   </tr>
   <tr>
    <th><input type="text" name="1" /></th>
    <th><input type="text" name="2" /></th>
    <th><input type="text" name="3" />
    <input type="image" src="images/Button1.jpg" width="20" alt="B" /></th>
    <th><input type="text" name="4"  /></th>
    <th><input type="text" name="5"  />
    <input type="image" src="images/Button1.jpg" width="20" alt="B" /></th>
    <th style="text-align:left"><input type="checkbox" name="" value="" />
    <input type="image" src="images/Button1.jpg" width="20" alt="B" /></th>
   </tr>
  </thead>
  <tfoot>
   <tr>
    <td colspan="4"><input type="image" src="images/first.jpg" width="20" alt="<<" />
    <input type="image" src="images/Previous.jpg" width="20" alt="<" />
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#">10</a>
    <span>...</span>
    <input type="image" src="images/next.jpg" width="20" alt=">" />
    <input type="image" src="images/last.jpg" width="20" alt=">>" />
    <label for="pagesize">Page size:</label>
    <select name="pagesize" id="pagesize">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="2">3</option>
    <option value="2">4</option>
    <option value="2">5</option>
    <option value="2">6</option>
    <option value="2">7</option>
    <option value="2">8</option>
    <option value="2">9</option>
    <option value="2" selected="selected">10</option>
    </select></td>
    <td colspan="2" style="text-align:right">335104 items in 33511 pages</td>
   </tr>
  </tfoot>
  <tbody  style="text-align:left">
   <tr>
    <th>1</th>
    <th>Chai</th>
    <th>$18.00</th>
    <th>10 boxes x 20 bags</th>
    <th>39</th>
    <th><input type="checkbox" name="" value="" /></th>
   </tr>
   <tr>
    <th>2</th>
    <th>Chang</th>
    <th>$19.00</th>
    <th>24 - 12 oz bottles</th>
    <th>17</th>
    <th><input type="checkbox" name="" value="" /></th>
   </tr>
   <tr>
    <th>3</th>
    <th>Aniseed Syrop</th>
    <th>$10.00</th>
    <th>12 - 550ml bottles</th>
    <th>13</th>
    <th><input type="checkbox" name="" value="" /></th>
   </tr>
   <tr>
    <th>4</th>
    <th>Chef Anton's Cajun Seasoning</th>
    <th>$22.00</th>
    <th>48 - 6 oz jars</th>
    <th>53</th>
    <th><input type="checkbox" name="" value="" /></th>
   </tr>
   <tr>
    <th>5</th>
    <th>Chef Anton's Gumbo Mix</th>
    <th>$21.35</th>
    <th>35 boxes</th>
    <th>0</th>
    <th><input type="checkbox" name="" value="" /></th>
   </tr>
   <tr>
    <th>6</th>
    <th>Grandma's Boysenberry Spread</th>
    <th>$25.00</th>
    <th>12 - 8 oz jars</th>
    <th>120</th>
    <th><input type="checkbox" name="" value="" /></th>
   </tr>
   <tr>
    <th>7</th>
    <th>Uncle Bob's Organic Dried Pears</th>
    <th>$30.00</th>
    <th>12 - 1 lb pkgs.</th>
    <th>15</th>
    <th><input type="checkbox" name="" value="" /></th>
   </tr>
   <tr>
    <th>8</th>
    <th>Northwoods Cranberry Sause</th>
    <th>$40.00</th>
    <th>12 - 12oz jars</th>
    <th>6</th>
    <th><input type="checkbox" name="" value="" /></th>
   </tr>
   <tr>
    <th>9</th>
    <th>Mishi Kobe Niku</th>
    <th>$97.00</th>
    <th>18 - 500g pkgs.</th>
    <th>29</th>
    <th><input type="checkbox" name="" value="" /></th>
   </tr>
   <tr>
    <th>10</th>
    <th>Ikura</th>
    <th>$31.00</th>
    <th>12 - 300ml jars</th>
    <th>31</th>
    <th><input type="checkbox" name="" value="" /></th>
   </tr>
  </tbody>
 </table>
</form>
</body>
</html>

Задача 4*: Create the following HTML Page:

<!DOCTYPE html>
<html>
<head>
 <title>Mac Book Air</title>
</head>
<body>
<form>
 <table>
  <thead>
   <tr>
    <th style="text-align:center" colspan="3"><span><a href="#">Apple</a></span>
    <span><a href="#">Toshiba</a></span>
    <span><a href="#">Lenovo</a></span>
    <span><a href="#">Dell</a></span>
    <span><a href="#">Asus</a></span>
    <span><a href="#">Acer</a></span>
    <span><a href="#">HP</a></span>
    </th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><fieldset><legend>Apple Mac Book Air</legend>
     <table>
      <tr>
       <td  rowspan="2"><img src="macbook.jpg" width="200" alt="Mac Book Air"></td>
       <td>64GB SSD</td>
      </tr>
      <tr>
       <td>2GB DDR</td>
      </tr>
      <tr>
       <td>1300USD</td>
       <td>Intel Core i5</td>
      </tr>
     </table>
     </fieldset>
    </td>
    <td><fieldset><legend>Apple Mac Book Air</legend>
     <table>
      <tr>
       <td  rowspan="2"><img src="macbook.jpg" width="200" alt="Mac Book Air"></td>
       <td>64GB SSD</td>
      </tr>
      <tr>
       <td>2GB DDR</td>
      </tr>
      <tr>
       <td>1300USD</td>
       <td>Intel Core i5</td>
      </tr>
     </table>
     </fieldset>
    </td>
    <td rowspan="3"><div>Min price: 500USD</div>
    <div><input type="range" min="500" max="1500" /></div>
    <div>Max price: 500USD</div>
    <div><input type="range" min="500" max="1500" /></div>
    <div>Min RAM: 4GB</div>
    <div><input type="range" min="4" max="16" /></div>
    <div>Max RAM: 16GB</div>
    <div><input type="range" min="4" max="16" /></div></td>
   </tr>
   <tr>
    <td><fieldset><legend>Apple Mac Book Air</legend>
     <table>
      <tr>
       <td  rowspan="2"><img src="macbook.jpg" width="200" alt="Mac Book Air"></td>
       <td>64GB SSD</td>
      </tr>
      <tr>
       <td>2GB DDR</td>
      </tr>
      <tr>
       <td>1300USD</td>
       <td>Intel Core i5</td>
      </tr>
     </table>
     </fieldset>
    </td>
    <td><fieldset><legend>Apple Mac Book Air</legend>
     <table>
      <tr>
       <td  rowspan="2"><img src="macbook.jpg" width="200" alt="Mac Book Air"></td>
       <td>64GB SSD</td>
      </tr>
      <tr>
       <td>2GB DDR</td>
      </tr>
      <tr>
       <td>1300USD</td>
       <td>Intel Core i5</td>
      </tr>
     </table>
     </fieldset>
    </td>
   </tr>
      <tr>
    <td><fieldset><legend>Apple Mac Book Air</legend>
     <table>
      <tr>
       <td  rowspan="2"><img src="macbook.jpg" width="200" alt="Mac Book Air"></td>
       <td>64GB SSD</td>
      </tr>
      <tr>
       <td>2GB DDR</td>
      </tr>
      <tr>
       <td>1300USD</td>
       <td>Intel Core i5</td>
      </tr>
     </table>
     </fieldset>
    </td>
    <td><fieldset><legend>Apple Mac Book Air</legend>
     <table>
      <tr>
       <td  rowspan="2"><img src="macbook.jpg" width="200" alt="Mac Book Air"></td>
       <td>64GB SSD</td>
      </tr>
      <tr>
       <td>2GB DDR</td>
      </tr>
      <tr>
       <td>1300USD</td>
       <td>Intel Core i5</td>
      </tr>
     </table>
     </fieldset>
    </td>
   </tr>
  </tbody>
 </table>
</form>
</body>
</html>

Последната задача съм се опитал да я докарам едно към едно със заданието, но има лека разлика. Според мен може да има и по-лесен начин за реализация, но за момента само така успях да го направя.

неделя, 11 ноември 2012 г.

HTML: Tables

Това са задачите от второто домашно по HTML на тема таблици.

Задача 1: Create Web Pages like the following using tables:

<!DOCTYPE html>
<html>
<head>
 <title>Fruit Table</title>
</head>
<body>
<table>
<colgroup>
 <col width="300">
 <col width="200">
</colgroup>
 <thead>
  <tr>
   <th colspan="2">Fresh Fruits</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>It has long been known that a diet that includes
    at least a few servings of fresh fruit every day
    will help keep you healthy, fit and trim.</td>
   <td><img src="fruit.jpg" width="200" alt="fruits"/></td>
  </tr>
 </tbody>
</table>
</body>
</html>

Задача 2: Create a Web Page like the following using forms:

<!DOCTYPE html>
<html>
<head>
 <title>Alphabet Table</title>
</head>
<body>
<table border="1">
 <tr>
  <td colspan="3" >Title goes here</td>
  <td>A</td>
  <td>B</td>
 </tr>
 <tr>
  <td rowspan="3">C</td>
  <td>D</td>
  <td>E</td>
  <td>F</td>
  <td>G</td>
 </tr>
 <tr>
  <td>H</td>
  <td colspan="2" >I</td>
  <td rowspan="2" >J</td>
 </tr>
 <tr>
  <td>K</td>
  <td>L</td>
  <td>M</td>
 </tr>
 <tr>
  <td>N</td>
  <td colspan="4">O</td>
 </tr>
</table>
</body>
</html>

Задача 3: Create a Calculator-like table. You should use a HTML 5 form for the Calculator.
Buttons for all the numbers and operators (+, -, etc.)
Textbox for the result
Do not make the same styles as the example

<!DOCTYPE html>
<html>
<head>
 <title>Form</title>
</head>
<body>
<form>
 <fieldset>
 <label for="mname">Member Name</label>
 <input type="text" name="mname" id="mname" />
 <label>*req</label>
 <br />
 <label for="email">Email</label>
 <input type="text" name="email" id="email" />
 <label>*req</label>
 <br />
 <label for="school">School</label>
 <input type="text" name="school" id="school" />
 <label>*req</label>
 <br />
 <input type="image" src="Submit.jpg" width="50" name="SubmitBtn" alt="submit" />
 </fieldset>
</form>
</body>
</html>

Задача 4:

<!DOCTYPE html>
<html>
<head>
 <title>Calculator</title>
</head>
<body>
<form>
 <table border="1">
  <tr>
   <td colspan="5" dir="rtl"><input type="text" value="0" /></td>
  </tr>
  <tr>
   <td><input type="image" src="images/mc.jpg" alt="MC" /></td>
   <td><input type="image" src="images/mr.jpg" alt="MR" /></td>
   <td><input type="image" src="images/ms.jpg" alt="MS" /></td>
   <td><input type="image" src="images/mplus.jpg" alt="M+" /></td>
   <td><input type="image" src="images/mminus.jpg" alt="M-" /></td>
  </tr>
  <tr>
   <td><input type="image" src="images/back.jpg" alt="Back" /></td>
   <td><input type="image" src="images/ce.jpg" alt="CE" /></td>
   <td><input type="image" src="images/c.jpg" alt="C" /></td>
   <td><input type="image" src="images/invert.jpg" alt="+/-" /></td>
   <td><input type="image" src="images/sqrt.jpg" alt="Sqrt" /></td>
  </tr>
  <tr>
   <td><input type="image" src="images/seven.jpg" alt="7" /></td>
   <td><input type="image" src="images/eight.jpg" alt="8" /></td>
   <td><input type="image" src="images/nine.jpg" alt="9" /></td>
   <td><input type="image" src="images/divide.jpg" alt="/" /></td>
   <td><input type="image" src="images/percent.jpg" alt="%" /></td>
  </tr>
  <tr>
   <td><input type="image" src="images/four.jpg" alt="4" /></td>
   <td><input type="image" src="images/five.jpg" alt="5" /></td>
   <td><input type="image" src="images/six.jpg" alt="6" /></td>
   <td><input type="image" src="images/multiple.jpg" alt="*" /></td>
   <td><input type="image" src="images/onex.jpg" alt="1/x" /></td>
  </tr>
  <tr>
   <td><input type="image" src="images/one.jpg" alt="1" /></td>
   <td><input type="image" src="images/two.jpg" alt="2" /></td>
   <td><input type="image" src="images/three.jpg" alt="3" /></td>
   <td><input type="image" src="images/minus.jpg" alt="-" /></td>
   <td rowspan="2"><input type="image" src="images/equal.jpg" alt="=" /></td>
  </tr>
  <tr>
   <td colspan="2"><input type="image" src="images/zero.jpg" alt="0" /></td>
   <td><input type="image" src="images/comma.jpg" alt="," /></td>
   <td><input type="image" src="images/plus.jpg" alt="+" /></td>
  </tr>
 </table>
</form>
</body>
</html>

В домашното има много картинки, които няма да се визуализират ако се използва този код. Хубаво е да се спомене, че навсякъде където има input трябва да се използва таг <form>.

неделя, 4 ноември 2012 г.

Introduction HTML

Това са решенията на задачите от първото домашно по HTML.

Задача 1. Write an HTML page like the following:

<!DOCTYPE html>
<html>
<head>
 <title>Runners Home</title>
</head>
<body>
<header>
<p>Hello, Stranger!</p>
<h1>Welcome to Runners Home™</h1>
</header>
<div>Runners Home™ is dedicate to providing you with:</div>
<div>-the most up-to-date information on running races</div>
<div>-the best recources for runners</div>
<hr/>
<footer>©2007 Runners Home. All Rights Reserved.</footer>
</body>
</html>

Задача 2. Write an HTML page like the following:

<!DOCTYPE html>
<html>
<head>
 <title>Preceding Text</title>
</head>
<body>
<p>Preceding Text</p>
<ol type="I">
 <li>List Item 1</li>
  <ol type="a">
   <li>Nested Item 1.1</li>
   <li>Nested Item 1.2</li>
  </ol>
 <li>List Item 2</li>
  <ol>
   <li>Nested Item 2.1</li>
   <li>Nested Item 2.2</li>
    <ul type="circle">
     <li>Nested Item 2.2.1.</li>
     <li>Nested Item 2.2.2.</li>
      <ul type="square">
       <li>Nested Item 2.2.2.1</li>
       <li>Nested Item 2.2.2.2</li>
      </ul>
     <li>Nested Item 2.2.3.</li>
    </ul>
   <li>Nested Item 2.3</li>
  </ol>
 <li>List Item 3</li>
  <ul type="disc">
   <li>Nested item 3.1</li>
   <li>Nested item 3.2</li>
   <li>Nested item 3.3</li>
  </ul>
</ol>
</body>
</html>

Задача 3. Create an user profile Web page Profile.html, friends page named Friends.html and info page named Info.html. Link them to one another using <a> tag.

<!DOCTYPE html>
<html>
<head>
 <link type="text/css" rel="stylesheet" href="styles/semantic-tags.css" /> 
 <title>Profile</title>
</head>
<body>

 <div id="navigation">
  <ul>
   <li>
    <a href="Profile.html">
     Profile
    </a>
   </li>
   <li>
    <a href="Friends.html">
     Friends
    </a>
   </li>
   <li>
    <a href="AdditionalInformation.html">
     Additional information
    </a>
   </li>   
  </ul>
 </div>
<hr/>
<h1>Profile of Kaloyan</h1>
<hr/>
<img src="images/Kaloyan.jpg" width="50" alt="logo" />
<p>Name:Kaloyan Savov</P>
<p>Birthday: 28 July 1985</p>
<p>Occupation: Student</P>
<p>Area of Occupation: IT</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
 <link type="text/css" rel="stylesheet" href="styles/semantic-tags.css" /> 
 <title>Friends</title>
</head>
<body>
 <div id="navigation">
  <ul>
   <li>
    <a href="Profile.html">
     Profile
    </a>
   </li>
   <li>
    <a href="Friends.html">
     Friends
    </a>
   </li>
   <li>
    <a href="AdditionalInformation.html">
     Additional information
    </a>
   </li>   
  </ul>
 </div>
<hr/>
<h1>Friends of Kaloyan</h1>
<hr/>
<dl>
 <dt>1.Valentin Bozhinov</dt>
 <dd>Software Developer</dd>
 <dt>2.Ventislav Petkov</dt>
 <dd>Telecommunication Engineer</dd>
 <dt>3.Martin Savov</dt>
 <dd>Student</dd>
</dl>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
 <link type="text/css" rel="stylesheet" href="styles/semantic-tags.css" />
 <title>Additional information</title>
</head>
<body>
 <div id="navigation">
  <ul>
   <li>
    <a href="Profile.html">
     Profile
    </a>
   </li>
   <li>
    <a href="Friends.html">
     Friends
    </a>
   </li>
   <li>
    <a href="AdditionalInformation.html">
     Additional information
    </a>
   </li>   
  </ul>
 </div>
<hr/>
<h1>Additional information about Kaloyan</h1>
<hr/>
<p>Student at Telerik Academy</P>
<p>Born in Sofia</p>
<p>Living in Sofia</p>
<p>Working at Altech LTD.</P>
</body>
</html>

Blog of Kaloyan Savov

петък, 28 декември 2012 г.

Syntax Highlighter за Blogger

вторник, 13 ноември 2012 г.

HTML: Semantic Web

HTML: Forms

неделя, 11 ноември 2012 г.

HTML: Tables

неделя, 4 ноември 2012 г.

Introduction HTML

Всичко за мен

Архив на блога

петък, 28 декември 2012 г.

Syntax Highlighter за Blogger

вторник, 13 ноември 2012 г.

HTML: Semantic Web

HTML: Forms

неделя, 11 ноември 2012 г.

HTML: Tables

неделя, 4 ноември 2012 г.

Introduction HTML

петък, 28 декември 2012 г.

вторник, 13 ноември 2012 г.

неделя, 11 ноември 2012 г.

неделя, 4 ноември 2012 г.