Szablon artykułu w HTML

Kodowanie HTML to nie tylko odpowiednie pocięcie projektu graficznego, ale także przygotowanie i ostylowanie treści serwisu. Zainspirowany bardzo ciekawą stroną HTML ipsum i występującym tam elementem zwanym „Kitchen sink”, przygotowałem sobie pewnego rodzaju szablon HTML dla treści na stronie. Podstawowym założeniem było zamieszczenie w artykule jak najwięcej przydatnych znaczników HTML, i tak w kodzie znalazły się:

• nagłówki od h1 do h6
• elementy wyróżniające strong i em
• wygląd linków
• trzy rodzaje list ul i ol wraz z zagnieżdżeniami, oraz listę definicji
• obrazki, jedne większy na całą szerokość tekstu, oraz dwa mniejsze do opływania tekstu
• tabela
• cytat, indeks górny i dolny
• znacznik code i pre

Poniżej przedstawiam kod. Mam nadzieję, że się Wam przyda:

<h1>Sed commodo condimentum elit, imperdiet pulvinar odio tristique vel</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi,
condimentum sed, <code>code inline $this-&gt;db-&gt;getLastId();</code>, ornare
sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum
rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a>
in turpis pulvinar facilisis. Ut felis.</p>

<p><img class="center" src="path/to/image/full.jpg" alt="Full image" /></p>

<h2>H2 Aenean ultricies mi vitae est.</h2>

<p>A small paragraph to <em>emphasis</em> and show <strong>important</strong> bits.</p>

<ul>
  <li>Unordered list</li>
  <li>tincidunt mauris eu risus</li>
  <li>Next level:
    <ul>
      <li>liquam tincidunt mauris eu risus</li>
      <li>mauris eu risus</li>
      <li>orem ipsum dolor</li>
      <li>consectetuer adipiscing elit</li>
    </ul>
  </li>
  <li>amet consectetur adipiscing</li>
  <li>consectetur adipiscing</li>
</ul>

<p>Proin a massa ut orci porttitor malesuada. Mauris tortor ipsum, facilisis nec
viverra et, commodo ac diam. Curabitur suscipit pretium eros vitae convallis.
Suspendisse dui nulla, aliquam pretium tempus vitae, convallis sed leo. Sed id
vulputate leo. Proin non ipsum lorem. Nullam vel eleifend sem.
<strong> Ordered lists</strong>:</p>

<ol>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.
    <ol>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
    </ol>
  </li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus. </li>
</ol>

<p>Some elemnts CO<sub>2</sub> and H<sub>2</sub>O. Some equations x<sup>2</sup>+2=0.</p>

<h3>Header Level 3</h3>

<table>
  <thead>
    <tr>
      <th>Table Heading</th> <th>Table Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>table data</td>
      <td>table data</td>
    </tr>
    <tr>
      <td>table data</td>
      <td>table data</td>
    </tr>
    <tr>
      <td>table data</td>
      <td>table data</td>
    </tr>
    <tr>
      <td>table data</td>
      <td>table data</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Table footer</th> <th>Table footer</th>
    </tr>
  </tfoot>
</table>

<p>blockquote:</p>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida.
Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus,
at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</blockquote>

<h4>Header Level 4 Pellentesque habitant morbi tristique</h4>

<p><img class="left" src="path/to/image/small.jpg" alt="Small left image" />
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor
sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
vitae est. Mauris placerat eleifend leo. Donec libero urna, euismod id pretium nec,
posuere tempor mi. Ut tincidunt euismod odio. Pellentesque a ante felis. Sed vel
turpis et enim tincidunt lobortis. Ut facilisis, nisi eu congue semper, lorem magna
gravida arcu, et pellentesque est nunc et ligula. Aliquam at nisl urna, vel
vulputate dolor. Nullam convallis, lectus eu tincidunt viverra, metus tortor
vulputate eros, aliquet ornare nunc dui in sem. Mauris fringilla venenatis libero
quis blandit. Donec gravida sollicitudin felis, nec pharetra felis sollicitudin
nec. Integer et eleifend velit. Ut nulla ligula, bibendum sed ullamcorper a,
laoreet id felis. Suspendisse potenti. Integer at odio sit amet justo fermentum
semper. Vestibulum rhoncus commodo mattis. Praesent tincidunt venenatis neque,
sit amet dictum arcu ultrices non. Nulla eros est, pharetra nec faucibus eu,
mattis et arcu.Sed dapibus mollis metus, eget mattis velit vehicula id.
<img class="right" src="path/to/image/small.jpg" alt="Small right image" />
Curabitur mattis ultrices varius. Pellentesque varius dolor sed dolor aliquet
id venenatis arcu accumsan. Vivamus quis metus facilisis elit dignissim venenatis.
Donec velit orci, vulputate a vulputate id, hendrerit ut diam. Pellentesque congue
velit et ipsum fermentum sit amet porttitor ligula mattis. Cras vulputate mauris
eget lacus blandit in semper ligula ullamcorper. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Duis adipiscing ultricies
sapien, sit amet tristique nisi lacinia sit amet. Morbi tincidunt ullamcorper
eros, a convallis ipsum aliquet egestas. Nullam vestibulum, dolor eget vestibulum
viverra, est nulla sollicitudin velit, id placerat ligula felis ut purus.
Nulla facilisi.</p>

<pre>
  <code>
    #header h1 a {
      display: block;
      width: 300px;
      height: 80px;
    }
  </code>
</pre>

<h5>Header Level 5 morbi tristique senectus et netus</h5>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
  turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor
  sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
  mi vitae est. Mauris placerat eleifend leo.</p>

<dl><dt>Definition list</dt> <dd>Consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd> <dt>Lorem ipsum dolor sit amet</dt> <dd>Consectetur
    adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea     commodo consequat.</dd></dl>

<h6>Header Level 6 morbi tristique senectus et netus</h6>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

Brakuje Wam pewnych elementów? Dajcie znać w komentarzach.

• Bookmark
• RSS
• Tweet
• Opublikuj

Dodaj komentarz Komentarze są moderowane, a przy linkach używane jest rel="nofollow". Prosimy o nie reklamowanie i nie spamowanie w komentarzach.
Linki tworzone za pomocą tagu [url] np: [url=www.xyz.pl]xyz[/url]
Źródła za pomoc tagu [code] z wskazaniem języka np. [code=php] echo [/code]