Learn HTML Using Notepad or
TextEdit
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like
Notepad (PC) or TextEdit (Mac).
We believe in that using a simple text editor is a good way to
learn HTML.
Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start
Screen (the window symbol at the bottom left on your
screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
The <!DOCTYPE>
Declaration
The <!DOCTYPE> declaration
represents the document type, and helps browsers to display web pages
correctly.
It must only appear once, at the top of the page (before any HTML
tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>HTML Headings
HTML headings are defined with the <H1> to <H6> tags.
<H1> defines the most important
heading. <H6> defines the least
important heading:
Example:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML Paragraphs
HTML paragraphs are defined with the <P> tag:
Example:
<p>This
is a paragraph.</p>
<p>This
is another paragraph.</p>
HTML Text Formatting
HTML contains several elements for defining text
with a special meaning.
HTML Formatting Elements
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> - Smaller text
- <del> - Deleted text
- <ins> - Inserted text
- <sub> - Subscript text
- <sup> - Superscript text
HTML <b> and
<strong> Elements
The HTML <b> element
defines bold text, without any extra importance.
<b>This
text is bold</b>
The HTML <strong element defines text with strong importance. The
content inside is typically displayed in bold.
<strong>This
text is important!</strong>
HTML <i> and <em>
Elements
The HTML <i> element
defines a part of text in an alternate voice or mood. The content inside is
typically displayed in italic.
Tip: The <i> tag
is often used to indicate a technical term, a phrase from another language, a
thought, a ship name, etc.
<i>This
text is italic</i>
The HTML <em> element
defines emphasized text. The content inside is typically displayed in italic.
Tip: A screen reader will pronounce the
words in <em> with an emphasis, using
verbal stress.
<em>This
text is emphasized</em>
HTML <small> Element
The HTML <small> element
defines smaller text:
<small>This
is some smaller text.</small>
HTML <mark> Element
The HTML <mark> element
defines text that should be marked or highlighted:
<p>Do
not forget to buy <mark>milk</mark> today.</p>
HTML <del> Element
The HTML <del> element
defines text that has been deleted from a document. Browsers will usually
strike a line through deleted text:
<p>My
favorite color is <del>blue</del> red.</p>
HTML <ins> Element
The HTML <ins> element
defines a text that has been inserted into a document. Browsers will usually
underline inserted text:
<p>My
favorite color is <del>blue</del> <ins>red</ins>.</p>
HTML <sub> Element
The HTML <sub> element
defines subscript text. Subscript text appears half a character below the
normal line, and is sometimes rendered in a smaller font. Subscript text can be
used for chemical formulas, like H2O:
<p>This
is <sub>subscripted</sub> text.</p>
HTML <sup> Element
The HTML <sup> element
defines superscript text. Superscript text appears half a character above the
normal line, and is sometimes rendered in a smaller font. Superscript text can
be used for footnotes, like WWW[1]:
<p>This
is <sup>superscripted</sup> text.</p>
HTML Images Syntax
The HTML <img tag
is used to embed an image in a web page.
Images are not technically inserted into a web page; images are
linked to web pages. The <img> tag
creates a holding space for the referenced image.
The <img> tag is empty, it
contains attributes only, and does not have a closing tag.
The <img> tag has two required
attributes:
- src
- Specifies the path to the image
- alt
- Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext">
The src Attribute
The required src attribute
specifies the path (URL) to the image.
Note: The browser pulls the picture from a web server and puts it into the page as soon as a web page loads. To avoid giving your visitors a broken link indicator, ensure that the picture truly stays in the same location on the website. If the browser cannot locate the picture, the broken link symbol and alt text are shown.
Example:
<img src="img_chania.jpg" alt="Flowers
in Chania">
The alt Attribute
The value of the alt attribute should describe the image:
Example:
<img src="img_chania.jpg" alt="Flowers
in Chania">
Image Size - Width and Height
You can use the style attribute to
specify the width and height of an image.
Example:
<img src="img_girl.jpg" alt="Girl
in a jacket" style="width:500px;height:600px;">
Alternatively, you can use
the width and height attributes:
Example:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
HTML Anchor
A hyperlink that connects one page to another is defined by the HTML anchor tag. It has the ability to build links to other websites, files, locations, or any URL. The HTML a tag's "href" property is its most crucial component. and which points to the URL or target page.
href attribute of HTML anchor tag
The syntax of HTML anchor tag is
given below.
<a href =
"..........."> Link Text </a>
Let's see an example of HTML anchor
tag.
1. <a href="second.html">Click for Second Page</a>
Comments
Post a Comment