HTML Notes

3.2 HTML

Hypertext Markup Language (HTML) is the language used to define and display your contents in the form of a webpage. With the help of tags, you will define different contents what they are, correspondingly HTML will display them accordingly. Html identifies and provides support for every object in a webpage on the basis of tags.

<p>This is my first attempt for a webpage</p>

3.2.1 HTML Document Object Model

The Document Object Model (DOM) is a standard which provides mutual interpretation where grammar of a language can be associated with and can coexist on various operating systems. In HTML, every file is interpreted as a XHTML document...

3.2.2 Tags in HTML

HTML is a tag-based programming language, so we should recognize ourselves with the most important and frequent tags that we will encounter in the development of learning curve.

3.2.2.1 HTML Tag

Any html is identified with the <html> and </html> tag-pair. So, anything written between this tag-pair is recognized as a html document...

Common HTML Tags

Tag Pair	For the Task
<p>	Paragraph sentence
<br>	Line break
<em>	Text is shown in italics
<strong>	When emphasize a word with bold

3.2.2.8 Bullets & Numbering

HTML treats bullets and numbering in the form of an unordered <ul> and ordered list <ol>, respectively. Bullets can be of type circle, square or disc. The numbered list have the option of numerals and alphabets to choose from, just like a word-editor.

<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to my First Web Page</h1>
    <h2>My Hobbies</h2>
    <ul>
      <li>Reading books</li>
      <li>Watching movies</li>
      <li>Playing games</li>
    </ul>
    <h2>My Favorite Subjects</h2>
    <ol>
      <li>Mathematics</li>
      <li>Science</li>
      <li>Literature</li>
    </ol>
  </body>
</html>

3.2.3 Manipulating Data with Tables

Tables are a good way to enlist data which is visually appealing. HTML provides 'table' tag-pair to allocate and designate data within the table. The first row of the table is the header row and is generally used for headings and is defined with the 'th' tag-pair. Whereas data is manipulated through 'td' tag-pair.

<table>
  <tr>
    <th>Student Name</th>
    <th>Class</th>
    <th>Fee Dues</th>
  </tr>
  <tr>
    <td>Alia</td>
    <td>9</td>
    <td>200</td>
  </tr>
  <tr>
    <td>Zeshan</td>
    <td>9</td>
    <td>0</td>
  </tr>
  <tr>
    <td>Naveed</td>
    <td>9</td>
    <td>0</td>
  </tr>
</table>

3.2.4 Links to Resources

Links are helpful components of a webpage, via which you can redirect to another webpage or a document. Links are called Hyperlinks in HTML with 'a' tag-pair. Hyperlinks are easy to identify on a webpage, as the mouse cursor changes as soon as the cursor touches a link element. Hyperlinks can be associated not only to text, but to images as well. The general syntax for defining a link is like:

<a href='https://www.example.com' target='_blank'>Link text</a>

Here, 'href' refers to the address along with the path and link text is for user information. 'target' is an optional parameter but its value defines where to open the webpage. If the value chosen is 'blank', it will open in a new tab or browser window for the value of 'self' the destination address will open in the same tab or window.