Scribd
Upload
9 views

Basic HTML

The document demonstrates various HTML elements used to structure and style web pages. It includes headings, paragraphs, hyperlinks, images, text styling, tables, and lists. The HTML elements are organized into sections defined by <div> tags and demonstrate how to add metadata, internal and external stylesheets, bookmarks, and alternative text for accessibility.

Uploaded by

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

Basic HTML

The document demonstrates various HTML elements used to structure and style web pages. It includes headings, paragraphs, hyperlinks, images, text styling, tables, and lists. The HTML elements are organized into sections defined by <div> tags and demonstrate how to add metadata, internal and external stylesheets, bookmarks, and alternative text for accessibility.

Uploaded by

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

<!DOCTYPE html> <!

--declares the type of document (html)-->


<html lang="en"> <!--holds all of the html and sets language using attribute lang--
>

<head> <!--holds metadata about the page-->


<title>Title - HTML</title> <!--shows the title of the page-->
<link rel="icon" type="image/x-icon" href="favicon.ico"> <!--displays favicon
image on the browser tab of the page-->
</head> <!--holds metadata about the page-->

<!--holds internal CSS styling-->


<style>
body{color:crimson;}
</style>

<body> <!--holds content displayed on the page-->


<div> <!--defines a section in a document-->
<h1>Heading 1</h1> <!-- displays text as heading size one-->
<h2>Heading 2</h2> <!--displays text as heading size two-->
<h3>Heading 3</h3> <!--displays text as heading size three-->
<h4>Heading 4</h4> <!--displays text as heading size four-->
<h5>Heading 5</h5> <!--displays text as heading size five-->
<h6>Heading 6</h6> <!--displays text as heading size six-->
</div> <!--defines a section in a document-->

<div> <!--defines a section in a document-->


<p>Paragraph</p> <!--displays text as a paragraph-->
<p title="Paragraph Title">Tool Tip</p> <!--displays text with tool tip
to hover over-->
<p>Line<br>Break</p> <!--displays text with a line break-->
<p id="BM1"> Internal Bookmark</p> <!--creates a bookmark using id
attribute-->
<p style="background-color:powderblue; font-family:Impact,
Haettenschweiler, 'Arial Narrow Bold', sans-serif";> Internal CSS</p><!--displays
content with internal CSS using attribute style-->
<hr> <!--displays a horizontal rule to seperate thematic content--> <p>^
Horizontal Rule</p>
<pre> <!--preserves the spaces and line breaks in text-->
Preformatted.
Text.
</pre> <!--preserves the spaces and line breaks in text-->
</div> <!--defines a section in a document-->

<div> <!--defines a section in a document-->


<a href="https://www.w3schools.com">Hyperlink</a><!--displays hyperlink
using attribute href-->
<br> <!--displays a line break-->
<a href="https://www.w3schools.com" target="_self">Self-Target
Hyperlink</a> <!--default, opens hyperlink in the same window/tab as it was
clicked-->
<br> <!--displays a line break-->
<a href="https://www.w3schools.com" target="_blank">Blank-Target
Hyperlink</a> <!--opens hyperlink in a new window or tab-->
<br> <!--displays a line break-->
<a href="https://www.w3schools.com" target="_parent">Parent-Target
Hyperlink</a> <!--opens hyperlink in the parent frame-->
<br> <!--displays a line break-->
<a href="https://www.w3schools.com" target="_top">Top-Target
Hyperlink</a> <!-- opens hyperlink in the full body of the window-->
<br> <!--displays a line break-->
<br> <!--displays a line break-->
</div> <!--defines a section in a document-->

<div> <!--defines a section in a document-->


<img src="favicon.ico" alt="Image Alternative Text"><!--displays image
using attributes src & alt-->
<img src="image.jpg" alt="Image Alternative Text"><!--displays
alternative text using attributes src & alt-->
<br><!--displays a line break-->
</div> <!--defines a section in a document-->

<div> <!--defines a section in a document-->


<p> <b>Bold</b> Text</p> <!--displays bolded text-->
<p> <strong>Strong</strong> Text</p> <!--displays strengthened text-->
<p> <i>Italic</i> Text </p> <!--displays italicized text-->
<p> <em>Emphasized</em> Text</p> <!--displays emphasized text-->
<p> <small>Small</small> Text</p> <!--displays small text-->
<p> <mark>Marked</mark> Text</p> <!--displays highlighted text-->
<p> <del>Deleted</del> Text</p> <!--displays text with striketrough-->
<p> <ins>Inserted</ins> Text</p> <!--displays underlined text-->
<p> <sup>Superscripted</sup> Text</p> <!--displays superscripted text-->
<p> <sub>Subscripted</sub> Text</p> <!--displays subscripted text-->
</div> <!--defines a section in a document-->

<div> <!--defines a section in a document-->


<a href="#BM1">Link to Internal Bookmark</a> <!--jumps to the bookmark
within the same page-->
<br><!--displays a line break-->
<a href="BasicStyle.html#BM2">Link to External Bookmark</a> <!--jumps to
the bookmark linked on a different page-->
<br><!--displays a line break-->
<br><!--displays a line break-->
</div> <!--defines a section in a document-->

<div> <!--defines a section in a document-->


<table> <!--creates a table-->
<caption>Table One</caption> <!--displays a caption/title for the
table-->
<tr> <!--creates a row in the table -->
<th>Header 1</th> <!--creates displays the header for first
column-->
<th>Header 2</th> <!--creates displays the header for second
column-->
<th>Header 3</th> <!--creates displays the header third column-->
</tr> <!--creates a row in the table -->
<tr> <!--creates a new row in the table -->
<td>Data 1</td> <!--displays data in first row, first column-->
<td>Data 2</td> <!--displays data in first row, second column-->
<td>Data 3</td> <!--displays data in first row, third column-->
</tr> <!--creates a new row in the table -->
<tr> <!--creates another row in the table -->
<td>Data One</td> <!--displays data in second row, first column--
>
<td>Data Two</td> <!--displays data in second row, second
column-->
<td>Data Three</td> <!--displays data in third row, third
column-->
</tr> <!--creates another row in the table -->
</table> <!--creates a table-->
</div> <!--defines a section in a document-->

<div> <!--defines a section in a document-->


<ul> <!--creates an unordered list-->
<li>List Item 1</li> <!--displays a list item-->
<li>List Item 2</li> <!--displays a list item-->
<li>List Item 3</li> <!--displays a list item-->
</ul> <!--creates an unordered list-->
<ol> <!--creates an ordered list-->
<li>List Item</li> <!--displays a list item-->
<li>List Item</li> <!--displays a list item-->
<li>List Item</li> <!--displays a list item-->
</ol> <!--creates an ordered list-->
<dl> <!--creates an described list-->
<dt> Term One <!--displays a list term-->
<dd>Description</dd> <!--displays a term description-->
</dt> <!--displays a list term-->
<dt> Term Two <!--displays a list term-->
<dd>Description</dd> <!--displays a term description-->
</dt> <!--displays a list term-->
<dt> Term Three <!--displays a list term-->
<dd>Description</dd> <!--displays a term description-->
</dt> <!--displays a list term-->
</dl> <!--creates an described list-->
</div> <!--defines a section in a document-->
</body> <!--holds content displayed on the page-->

</html> <!--holds all of the html-->

You might also like