HTML5 and CSS3 - pdf

Contents

This tutorial will guide you through the following steps:




pdf HTML5 and CSS3


TEXT FORMATTING

HTML text formatting tags make certain text on your web pages to appear differently than normal text content.

These are types and examples of formatted text:

<b> This is bold style </b>
<i> This is italics style </i>
<em> This is emphasized style </em>
<strong> This is an important text </strong>
<small> This is small text </small>
<mark> This is marked text </mark>
<del> This is deleted text </del>
<sub> sub </sub>
<sup> superscript </sup>
<u> This is the underlined text </u>
<ins> This is inserted text </ins>

HTML Text Formatting Examples

code:


<p>H<sub>2</sub>SO<sub>4</sub></p><br/>
 <p>2Y+2X<sup>3</sup>=150</p>

result:

H2SO4

2Y+2X3=150


INSERTING IMAGES

To insert images on HTML pages, the <img> tag is required with the SRC attribute.

<img src="earth.png">




Using the width and height attributes, you can specify the size of the image in pixels or percentages.




<img src="earth.png" width="150px" height ="125px" >



HTML LINKS

The HTML anchor element <a> </a> creates a hyperlink to specifics part on the same HTML page, other web pages, scripts or any other URL adress. The anchor element is used together with the href attribute that contains the URL of the files.

Syntax: <a href="url">text link</a>

example:

<a href="https://itpresent.com">IT present </a>

result:

IT present



Relative and Absolute HTML Links

There are relative and absolute HTML links.

Relative links show the path to files relative to the current document on the same web site or computer. It is recommended for use always where it can be used.

example:

<a href="index.html">All HTML posts</a>




Absolute links/paths contain a complete URL, which includes a HTTPS protocol, the website’s domain name and possibly a specific folders, subfolders and page name.

example:

<a href="https://itpresent.com/web/html/index.html">All HTML posts</a>





HTML LISTS

There are three list types in HTML:

<ul>unordered list</ul>
<ol>ordered list</ol>
<dl>definition list</dl>

Each item begins with a <li> tag.



UNORDERED list <ul> used to group a set of related items in no particular order

code:


<ul>

<li>Gold</li>
<li>Silver</li>
<li>Bronze</li>

</ul>

result:

  • Gold
  • Silver
  • Bronze




ORDERED list <ol> used to group a set of related items in a specific order

code:


<ol>

<li>Gold</li>
<li>Silver</li>
<li>Bronze</li>

</ol>

result:

  1. Gold
  2. Silver
  3. Bronze




DESCRIPTION list <dl> used to display name/value pairs such as terms and definitions

code:


<dl> 
<dt>FRUIT</dt>
<dd>apple</dd>
<dd>pear</dd> 
<dt>VEGETABLES</dt>
<dd>cucumber</dd> 
<dd>tomatoes</dd>
</dl>

result:

FRUIT
apple
pear
VEGETABLES
cucumber
tomatoes





pdf HTML5 and CSS3