Scribd
Upload
3 views

HTML Notes

The document provides an introduction to HTML, including what it is, its structure, common tags like headings, paragraphs and formatting, and different types of HTML editors. It describes HTML tags, attributes, and the basic structure of an HTML document including the root, head and body elements.

Uploaded by

Litalam Bokleni
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

HTML Notes

The document provides an introduction to HTML, including what it is, its structure, common tags like headings, paragraphs and formatting, and different types of HTML editors. It describes HTML tags, attributes, and the basic structure of an HTML document including the root, head and body elements.

Uploaded by

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

Introduction to HTML

HTML
As noted in the theory notes, HTML stands for Hypertext Markup Language. Hypertext is a piece
of text containing links (or hyperlinks) to other texts.
Markup language is a way of writing style and layout information within a text document. HTML is
only one such example of a markup language.
Note that HTML is a simple scripting language and is easy to learn and simple to understand.
The key commands of HTML are called “tags”.
Note that an HTML document is a simple plain text le which contains text and tags. When
viewed within a browser, the document is displayed with formatting.

Remember the following about HTML


• It is not a programming language, but is a markup language.
• HTML documents are text les.
• HTML documents can be edited with the two categories of editors.
• It uses markup tags for formatting.
• HTML documents have the extensions of .htm or .html
• It is not case sensitive. Therefore tags such as <BR> <br> <bR> and <Br> are all the same.

HTML Editors
When working with HTML documents, you will be using HTML editors.
An HTML editor is a software application which is required to write HTML tags to create properly
formatted web pages. Remember that these web pages are viewable by any web browser.

The main two HTML editors are as follows:

WYSIWYG Editor (What You See Is What You Get)


This type of HTML editor allows you to create a web page without the use of HTML tags, by
visually manipulating the elements. The content displayed on the screen of the editor during
editing closely resembles what can be expected to be rendered on the nal web page.
Professionally, Adobe Dreamweaver is an example of such an editor, but online web editors such
as Wix and WordPress allow for this type of editing as well.

Text Editor
This type of editor uses plaintext to type and manually format HTML tags and content. NotePad,
WordPad, TextEdit and other basic text editing programs should o er the functionality needed to
create and edit HTML documents.

HTML Tags
HTML markup tags are also known as HTML tags, and these represent various elements in an
HTML document. HTML tags are identi ed as keywords enclosed within a pair of angular
brackets, < and >.

These tags are generally paired, such as <html> and </html> to mark the beginning and end of an
HTML instruction and element.
The rst tag in the pair is known as the opening tag and the second tag is known as the closing
tag.
The closing tag is identi ed with a forward slash / ahead of the tag keyword within the angular
brackets. Although this is a general rule, there are two types of tags:
• Container tags which have a start and an end tag to their HTML element. Examples being
<b>…</b>, <p>…….</p>, etc.
• Empty tags which only have a start tag and no closing tag. These are used to introduce a
special element such as <li>, <img>, <hr> and more.

HTML elements
The content typed alongside the start and end tags is called the HTML element. For example,
fi
fi
fi
fi
fi
ff
fi
<b>Click Here</b> is one HTML element. HTML also allows for nested elements within one
another. An example can be seen as follows: <b><u>Click Here</u></b>.
Remember that the opening and closing tags should always follow a sequence, where the tags
should be closed in the reverse order that they were opened. As noted above, the <b> tag is rst
and last place.

HTML tag attributes


Attributes of a tag can be added to provide further information about the HTML elements. These
are always written by giving a space after the tag name. The attribute is always written as the
attribute name followed by an equals sign and then the attribute value. Attribute values should
also be enclosed within double quotes. Some browsers also allow for single quotes, however, to
ensure the best optimisation, double quotes are preferred.
Di erent attributes in the same tag are separated by a space. An example follows:
<img align=“left> whereby the tag of the image is attributed to align to the left of the document.

Structure of an HTML document


All HTML documents contain standard HTML tags which are run within a web browser of choice.
The purpose of the browser is to read the HTML documents and render them as web pages. This
is why a browser does not usually display the HTML tags, but rather shows the content of the
page.

There are three main elements to an HTML document.

Root element. This contains the <html> tag. It is a container tag which does not directly show on
the web page. It is used to inform the browser that the document is an HTML document. Such
examples of root elements include the doctype declaration required to render an HTML document
in the browser. <!doctype html> <html> </html> are tags comprising the root element.

Head element. This element contains information about the document and does not directly
show on the web page either. This element contains the HEAD tag which is the rst tag under the
HTML tag. Within the head element, other tags such as the TITLE tag can be found. The TITLE
tag for example displays the page title in the title bar of the browser.

Body element. This element de nes the document’s body and comes after the head element.
The body tag is used to show text, images, links, videos and more on a web page. The body tag
may contain multiple other tags within it.
The following are some important attributes of the <body> tag:
Text: This attribute speci es the colour of the text for the tag. The value can either be the
name of the colour within quotes or a speci c hexadecimal value.
Bgcolor: This speci es the background colour of the web page. Same as the text colour,
the name of the colour can be given within quotes, or a speci c hexadecimal value.
Leftmargin: This sets the left margin of the web page, and can be given as a number or
percentage.
Topmargin: This sets the margin at the top of the web page and can also be given as a
number or percentage.
Background: This attribute is used to set an image as the background of a web page.

Some important points to remember are:


• The space between the tags doesn’t matter. For example <b>Bold Text</b> is the same as <b>
Bold Text </b>.
• There should not be any space between the letters of the tag names. Example: <body> is
correct while <bo dy> and <b ody> are incorrect.
• Attributes are always speci ed with the tag that they belong to.
• Attribute names are also not case-sensitive.

HTML document heading


Heading tags are used to display text that is slightly bigger and bolder than normal body text.
HTML has six levels of heading tags, ranging from <h1> to <h6> where <h1> is the biggest and
ff
fi
fi
fi
fi
fi
fi
fi
fi
<h6> is the smallest heading tag. The rst heading in a document should be tagged as <h1>…</
h1> as it is a container element.

Be careful not to use heading tags only to make text bold or bigger. Only use them for headings.

HTML paragraph tag <p>


While writing an HTML document, all sorts of spaces are ignored, including blank lines and the
enter key. Rather, these are all compressed into one single space when displayed. To get around
this, we use a paragraph tag.
The <p> tag is used to de ne the beginning of a paragraph in a web page, and leaves a blank line
after the paragraph. Therefore the text following <p> will appear on a new line.
In the source HTML document, if there is a line break between sentences, the browser will ignore
the line break and start the new paragraph only when there is another <p> tag.
A paragraph can be aligned with the align attribute in the following con gurations: left, right,
center, and justify.

Line break tag <br>


As noted, browsers do not recognise the enter key as representing a line break. In this case, we
use the <br> tag as an empty tag to insert a forced line break without inserting any blank line
space in between the lines. As it is an empty tag, there is only an opening tag needed.

No break tag <nobr>


This is the opposite of a line break tag and is used to prevent any line breaks in the text enclosed
within the tags. Unlike the <br> tag, the <nobr> tag is a container element and has an opening
and closing tag. The text placed within this element will be displayed within a single line and can
cause horizontal scrolling should the text be too long.

Formatting Tags
Tags which are used to give formatting e ects to the text on a web page are called formatting
tags. Some of these tags are explained now.

Bold tag <b>


This tag displays the text in bold type, and is a container element. <b>Text</b> and appears
darker than other text. This tag is used for headings and to highlight important terms.
Another way to achieve the same function is to use the <strong> tag.

Italics tag <i>


This tag displays the text in an italic type, and is a container element. <i>Text</i> and appears
thinner and slanted to the right.
Another way to achieve the same function is to use the <em> tag for emphasis.

Underline tag <u>


This tag displays the text with a line underneath, and is a container element. <u>Text</u> and
appears underlined when rendered.
Another way to achieve the same function is to use the <mark> tag to highlight the text.

Strikethrough tag <strike>


This tag is used to display text with a line through the middle of the text, and is a container
element.

Center tag <center>


This tag displays the text image in the center of the web page, and is a container element.

Horizontal rule tag <hr>


This tag is used to create a horizontal rule or a line in an HTML document. This tag functions to
separate the contents of an HTML document. The attribute tags uses with the <hr> tag include”
• For thickness: size=“”
fi
fi
ff
fi
• For line colour: color=“”
• For length of the line: width=“”
• For the alignment of the line: align=“”
• To make a solid line: noshade

Comment tag
This is a container tag used to insert hidden comments in HTML code. This is used to increase
the readability of the code, as the comments do not get executed or displayed. The syntax of the
comment tag is <!- - Comment - ->

Inserting images
Images can be inserted into an HTML page with the <img> tag. Most image formats are
supported. Note that images take longer to load in a web page. Therefore the size and number of
images is important to reduce the loading time of a web page.

Image attributes: The following attributes are important to the image tag.
Src stands for the source and speci es the location of the URL of the image to be displayed in
the web page. If the image is in the same directory as the HTML document, the image name can
be used only.
Align as assumed handles the alignment of the image on a web page.
Height speci es the height of the image in pixels and can be resized in numbers or percentages.
Width speci es the width of the image in pixels and can be resized in numbers or percentages.
Border is a numeric value which sets the width of the border around the image.
Alt assigns an alternative text to be displayed if the image is not available.

Hyperlinks
Linking is the most powerful tool in HTML as it can be used to connect di erent web pages and
form a complete website. A browser highlights the identi ed text or image with colour and
underlines it to indicate that it is a hyperlink. Hyperlinks can point to any resource on the web:
another HTML document, an image, sound, movie and more.

The tag used to produce links is called the anchor tag <a> which is a container element.

The <a> tag has the following attributes:


Href which is responsible for creating links, and references the le or website that opens when
you click on a link. The syntax used is <a href=“url”>Link text</a>
Name which is used to name a portion of the same document or another document. This portion
can then be linked by using href.
Title gives additional information that pops up when you hover a mouse cursor over it.
Target is used to specify where the linked document will open.
fi
fi
fi
fi
fi
ff

You might also like