HTML REVIEW

The title Attribute

The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the element:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>

<h2 title="I'm a header">The title Attribute</h2>

<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p>

</body>
</html>

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>

<h2>Single or Double Quotes?</h2>
<p>In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:</p>
<p>Move your mouse over the paragraphs below to see the effect:</p>

<p title='John "ShotGun" Nelson'>John with double quotes</p>
<p title="John 'ShotGun' Nelson">John with single quotes</p>

</body>
</html>

HTML Display

You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.

The browser will automatically remove any extra spaces and lines when the page is displayed:

image-20240501121249526

HTML Horizontal Rules < hr >

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:

The HTML < pre > Element

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

image-20240501121448184

Tag Description
< p > Defines a paragraph
< hr > Defines a thematic change in the content
< br > Inserts a single line break
< pr > Defines pre-formatted text

Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

1
2
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

Centered Heading

Centered paragraph.

HTML Formatting Elements

Formatting elements were designed to display special types of text:

  • <b> - Bold text
  • <strong> - Important text, bold
  • <i> - Italic text
  • <em> - Emphasized text, italic
  • <mark> - Marked text, highlight
  • <small> - Smaller text
  • <del> - Deleted text
  • <ins> - Inserted text, underline
  • <sub> - Subscript text, higher
  • <sup> - Superscript text, lower

HTML Quotation and Citation Elements

Tag Description
abbr Defines an abbreviation or acronym
address Defines contact information for the author/owner of a document
bdo Defines the text direction. BDO stands for Bi-Directional Override.is used to override the current text direction
blockquote Defines a section that is quoted from another source
cite Defines the title of a work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.)
q Defines a short inline quotation

HTML Comments

1
2
3
4
5
6
<p>This is a paragraph.</p>
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>This is a paragraph too.</p>

HTML Colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

To use an image as a link, just put the <img> tag inside the <a> tag:

1
2
3
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Use mailto: inside the href attribute to create a link that opens the user’s email program (to let them send a new email):

1
<a href="mailto:someone@example.com">Send email</a>

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

1
<button onclick="document.location='default.asp'">HTML Tutorial</button>

target attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

  • _self - Default. Opens the document in the same window/tab as it was clicked
  • _blank - Opens the document in a new window or tab
  • _parent - Opens the document in the parent frame
  • _top - Opens the document in the full body of the window
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>

<h2>The target Attribute</h2>

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a> 

<p>If target="_blank", the link will open in a new browser window or tab.</p>

</body>
</html>

https://www.w3schools.com/html/html_links_colors.asp

HTML Image Maps

https://www.w3schools.com/html/html_images_imagemap.asp

HTML Image Tags

Tag Description
img Defines an image
map Defines an image map
area Defines a clickable area inside an image map
picture Defines a container for multiple image resources

table

td stands for table data.

tr stands for table row.

th stands for table header.

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
<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>

<h2>TH elements define table headers</h2>

<table style="width:100%">
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

<p>To understand the example better, we have added borders to the table.</p>

</body>
</html>

HTML List

  • Use the HTML <dl> element to define a description list
  • Use the HTML <dt> element to define the description term
  • Use the HTML <dd> element to describe the term in a description list

block inline

https://www.w3schools.com/html/html_blocks.asp

Path

Path Description
< img src=”picture.jpg”> The “picture.jpg” file is located in the same folder as the current page
< img src=”images/picture.jpg”> The “picture.jpg” file is located in the images folder in the current folder
< img src=”/images/picture.jpg”> The “picture.jpg” file is located in the images folder at the root of the current web
< img src=”../picture.jpg”> The “picture.jpg” file is located in the folder one level up from the current folder