Scribd
Upload
2 views

Complete_HTML_Guide_with_Examples

The document is a comprehensive guide on HTML, detailing how to create various elements such as buttons, links, images, lists, forms, tables, and multimedia components. It includes examples of HTML tags and attributes for styling and formatting content. Additionally, it covers advanced features like target attributes for links and embedding videos and audio.

Uploaded by

ys304123
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Complete_HTML_Guide_with_Examples

The document is a comprehensive guide on HTML, detailing how to create various elements such as buttons, links, images, lists, forms, tables, and multimedia components. It includes examples of HTML tags and attributes for styling and formatting content. Additionally, it covers advanced features like target attributes for links and embedding videos and audio.

Uploaded by

ys304123
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Complete HTML Guide

To create a button:

<button>Click me</button>

To create a link:

<a href="https://www.w3schools.com">This is a link</a>

To upload an image:

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

To create a list:

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

To assign numbers to a list:

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

To assign dots to a list:

<ul>

<li>Coffee</li>
Complete HTML Guide

<li>Tea</li>

<li>Milk</li>

</ul>

Lists contain three tags: dl, dt, dd.

To use the 'alt' attribute for images:

<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">

To add a horizontal line:

<hr>

To break a sentence:

<br>

To assign heading size or color to a sentence:

<h1 style="font-size:60px;"></h1>

<p style="color:red;"></p>

To write a paragraph with points:

<pre>

Point 1

Point 2

</pre>
Complete HTML Guide

To add background color (only within body tag):

<body style="background-color:powderblue;">

To center text:

<h1 style="text-align:center;">Centered Heading</h1>

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

To format text styles:

<b> - Bold text

<strong> - Important text

<i> - Italic text

<em> - Emphasized text

<mark> - Marked text

<small> - Smaller text

<del> - Deleted text

<ins> - Inserted text

<sub> - Subscript text

<sup> - Superscript text

To write text in reverse:

<bdo dir="rtl">This line will be written from right to left</bdo>

To add a quotation:

<q>Quotation here</q>
Complete HTML Guide

For border styling:

border:8px solid orange;

For spacing inside the border (padding):

padding:20px;

For spacing outside the border (margin):

margin:20px;

Target attributes for links:

_self: Default. Opens the document in the same window/tab.

_blank: Opens the document in a new window/tab.

_parent: Opens the document in the parent frame.

_top: Opens the document in the full body of the window.

To open links in a new tab:

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

Form example:

<form action="/action_page.php">

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Doe"><br><br>


Complete HTML Guide

<input type="submit" value="Submit">

</form>

To add a comment box in a form:

<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>

Common input types include:

<input type="text"> - Single-line text input.

<input type="radio"> - Radio button.

<input type="checkbox"> - Checkbox.

<input type="submit"> - Submit button.

<input type="button"> - Clickable button.

To create a table:

<table>

<tr>

<th>Header</th>

<th>Header</th>

</tr>

<tr>

<td>Data</td>

<td>Data</td>

</tr>

</table>
Complete HTML Guide

Table styling examples:

Dotted borders: border-style: dotted;

Solid borders: border-style: solid;

To span a header across multiple columns:

<th colspan="2">Header</th>

For zebra-striped tables:

tr:nth-child(even) {background-color: #D6EEEE;}

To add a video:

<video controls>

<source src="movie.mp4" type="video/mp4">

</video>

To add audio:

<audio controls>

<source src="sound.mp3" type="audio/mpeg">

</audio>

To embed a YouTube video:

<iframe src="https://www.youtube.com/embed/videoID" allowfullscreen></iframe>

You might also like