Scribd
Upload
6 views

Complete_HTML_Tutorial_

The document provides a comprehensive guide on HTML elements and their usage, including buttons, links, images, lists, and text formatting. It also covers attributes, CSS properties, semantic versus non-semantic elements, and various HTML entities. Additional examples illustrate how to create mailto links, image maps, and apply background images.

Uploaded by

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

Complete_HTML_Tutorial_

The document provides a comprehensive guide on HTML elements and their usage, including buttons, links, images, lists, and text formatting. It also covers attributes, CSS properties, semantic versus non-semantic elements, and various HTML entities. Additional examples illustrate how to create mailto links, image maps, and apply background images.

Uploaded by

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

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>

<li>Tea</li>

<li>Milk</li>

</ul>

Lists contain three tags:

<dl>, <dt>, and <dd>


How to use the alt attribute:

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

To get a horizontal line:

<hr> just use it wherever you want

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 point in a paragraph:

<pre></pre>

To add background color (can only be added to the body):

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

To center a sentence:

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

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

To convert text to bold:

<p><b>This text is bold</b></p>

To convert text to italic:

<p><i>This text is italic</i></p>

<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 a sentence in reverse:

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

To add a quotation to a sentence:

<q></q>

For border styles:

border:8px solid orange;

Use CSS padding for space inside the border:

padding:20px;

Use CSS margin for space outside the border:

margin:20px;

The target attribute specifies where to open the linked document.

Examples:

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

To create a mailto link:

<p><a href="mailto:[email protected]">Send email</a></p>

To assign a link to a button:

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

To create bookmarks within a page:

<a href="#C4">Jump to Chapter 4</a>


<h1 id="C4">Chapter 4</h1>

To display a smiley symbol in a paragraph:

<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">

To create an image map:

Attributes: usemap, map name, area (shape, coords, alt, href)

Example:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">

<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">

<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">

<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">

</map>

To apply a background image to text:

<p style="background-image: url('img_girl.jpg');">

To apply an image to the entire page:

<style>

body {

background-image: url('img_girl.jpg');

To repeat the background image multiple times:

Use "background-repeat" property.

To set a page title:


<title>HTML Tutorial</title>

To change list markers:

<ul style="list-style-type:disc;">

Available keywords: disc, circle, none, square.

To assign numbers to a list:

<ol type="a"> (Lowercase letters)

<ol type="A"> (Uppercase letters)

<ol type="1"> (Numbers)

<p> vs <div>: Both create a new line.

<span>: Used to continue the same line.

To highlight a word in a sentence:

<h2>My <span class="note">Important</span> Heading</h2>

To display the time and date:

<button type="button"

onclick="document.getElementById('demo').innerHTML = Date()">

Click me to display Date and Time.</button>

<p id="demo"></p>

Semantic vs Non-semantic elements:

Non-semantic: <div>, <span>

Semantic: <form>, <table>, <article>


Entities and their codes:

&lt; (<), &gt; (>), &amp; (&), &quot; ("), &apos; (')

ASCII and URLs (http, https, ftp).

... (Additional details on forms, multimedia, and tables follow.)

You might also like