Websites design
ict-trainer.pl - © 2024 - Grzegorz Szyjewski
Exercise 1 - Introduction to HTML & CSS
Example of the webpage HTML code
General HTML document structure
Main HTML tags
 
<b> bold <b>bolded content</b> bolded content
<u> underline <u>underlined content</u> underlined content
<i> italic - <i>leaning content</i> leaning content
<p> new paragraph <p>paragraph 1 content</p><p>paragraph 2 content</p>

paragraph 1 content

paragraph 2 content
<br /> new line / line break first row <br /> second row first row
second row
<hr /> horizontal line <hr />
<a> hiperlink tag <a href="http://www.wneiz.pl">displayed link</a> displayed link
<img /> graphical object tag <img src="http://ict-trainer.pl/images/img8.jpg" title="globe image" />
<li> list element <li>element 1 </li>
  • element 1
    • <ol> numeric list <ol>
       <li>element 1 </li>
       <li>element 2 </li>
    </ol>
    1. element 1
    2. element 2
    <ul> bulleted list <ul>
       <li>element 1 </li>
       <li>element 2 </li>
    </ul>
    • element 1
    • element 2
    <div> block / generic element <div>element 1</div><div>element 2</div>
    element1
    element2
    <table> general table tag <table>
       <tr>
          <td>cell 1.1</td>
          <td>cell 1.2</td>
          <td>cell 1.3 </td>
       </tr>
       <tr>
          <td>cell 2.1</td>
          <td>cell 2.2</td>
          <td>cell 2.3 </td>
       </tr>
    </table>
    cell 1.1 cell 1.2 cell 1.3
    cell 2.1 cell 2.2 cell 2.3
    <tr> table tag - row
    <td> table tag - cell (inside the row)
    Some HTML tags styled with CSS
    <div style="background:#fff999;">object 1 content</div>
    <div style="background:#f99999;">object 2 content</div>
    object 1 content
    object 1 content
    Two merged cells (1.1 and 1.2)
    cell 2.1 cell 2.2

    Rain is liquid water in the form of droplets that have condensed from atmospheric water vapor and then precipitated—that is, become heavy enough to fall under gravity. Rain is a major component of the water cycle and is responsible for depositing most of the fresh water on the Earth. It provides suitable conditions for many types of ecosystems, as well as water for hydroelectric power plants and crop irrigation.

    more HTML tags and styles available HERE
    work to do
    ________
    Create new HTML document and put in the body section:
    - Some paragraph text (<p></p>).
    - Change some words into bold style.
    - Change dome words into uderlined and italic style.
    - Insert horizontal line into the page.
    - Insert some single words (each in new line).
    - Insert image found in the internet.
    - Insert numeric list with 3 positions.
    - insert 3 block elements (<div> </div>).
    - Insert table with 3 rows and 4 columns.