Scribd
Upload
57 views

HTML Links: Example

The document provides examples of different HTML elements: - Links are defined with the <a> tag and can point to other pages - Images are defined with the <img> tag along with attributes for the image source, alt text, width and height - Buttons are defined with the <button> tag - Lists are defined with the <ul> tag for unordered lists and the <ol> tag for ordered lists, along with <li> tags for each list item - Styling can be applied with the style attribute or internal and external CSS

Uploaded by

Fahim Sabri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
57 views

HTML Links: Example

The document provides examples of different HTML elements: - Links are defined with the <a> tag and can point to other pages - Images are defined with the <img> tag along with attributes for the image source, alt text, width and height - Buttons are defined with the <button> tag - Lists are defined with the <ul> tag for unordered lists and the <ol> tag for ordered lists, along with <li> tags for each list item - Styling can be applied with the style attribute or internal and external CSS

Uploaded by

Fahim Sabri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML Links

HTML links are defined with the <a> tag:

Example

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

Example
<!DOCTYPE html>

<html>

<body>

<h2>HTML Links</h2>

<p>HTML links are defined with the a tag:</p>

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

</body>

</html>

HTML Images
HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as
attributes:
Example
<!DOCTYPE html>

<html>

<body>

<h2>HTML Images</h2>

<p>HTML images are defined with the img tag:</p>

<img src="image name" alt="not found" width="104" height="142">

</body>

</html>

HTML Buttons
HTML buttons are defined with the <button> tag:

Example
<!DOCTYPE html>

<html>

<body>

<h2>HTML Buttons</h2>

<p>HTML buttons are defined with the button tag:</p>

<button>Click me</button>

</body>

</html>
HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or
the <ol> (ordered/numbered list) tag, followed by <li> tags (list items):

Example
<!DOCTYPE html>

<html>

<body>

<h2>An Unordered HTML List</h2>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

<h2>An Ordered HTML List</h2>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>
Empty HTML Elements
HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag (the <br> tag defines a line
break):

<!DOCTYPE html>

<html>

<body>

<p>This is a <br> paragraph with a line break.</p>

</body>

</html>

HTML Is Not Case Sensitive


HTML tags are not case sensitive: <P> means the same as <p>.

The HTML5 standard does not require lowercase tags, but


W3C recommends lowercase in HTML, and demands lowercase for stricter
document types like XHTML.

The HTML Style Attribute


Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">
<!DOCTYPE html>

<html>

<body>
<p>I am normal</p>

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

<p style="color:blue;">I am blue</p>

<p style="font-size:50px;">I am big</p>

</body>

</html>

HTML Formatting Elements


In the previous chapter, you learned about the HTML style attribute.

HTML also defines special elements for defining text with a special meaning.

HTML uses elements like <b> and <i> for formatting output,
like bold or italic text.

Formatting elements were designed to display special types of text:

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

<!DOCTYPE html>

<html>

<body>

<p>This text is normal.</p>

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


</body>

</html>

HTML <blockquote> for Quotations


The HTML <blockquote> element defines a section that is quoted from another
source.

Browsers usually indent <blockquote> elements.

<!DOCTYPE html>

<html>

<body>

<p>Browsers usually indent blockquote elements.</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">

For nearly 60 years, WWF has been protecting the future of nature. The world's leading conservation
organization, WWF works in 100 countries and is supported by more than one million members in the
United States and close to five million globally.

</blockquote>

</body>

</html>

CSS Starting
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

You might also like