2. What is HTML?
HTML is a language or codes used for describing web
pages.
HTML stands for Hyper Text Mark-up Language
A mark-up language is a set of specifically named tags
which are used to describe document or page content.
HTML documents contain HTML tags and plain text.
3. HTML Tags
HTML markup tags are usually called “HTML tags”
HTML tags are keywords OR tag names surrounded by angle
brackets - e.g. <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag.
The end tag is written like the start tag, with a forward slash before
the tag name
Start and end tags are also called opening tags and closing tags
5. List of Basic Tags
1. <html> : used at the beginning of each HTML document
2. <body> : used after the <html> tag to specify what is displayed on the
webpage
3. <!DOCTYPE> : defines a document type (e.g. html, xml, asp.net)
4. <h> : to create a heading in the HTML document (web page)
5. <p> : to create a paragraph in the HTML document
6. <b> : to boldface text
7. <i> : to italicize text
8. <u> : to underline text
9. <a> : defines a hyperlink
10. <!--…--> : defines a comment or non-code text
11. <br> : to give a single line break in the HTML document
12. <button> : defines a clickable button
13. <hr> : defines a horizontal line
14. < img>: causes an image to be displayed on the web page
6. Tag Usage in HTML document editing
<!DOCTYPE html> is the first line of text used when creating a web
page. This declaration helps the browser to display the web page
correctly.
The text between
The text between
The text between
The text between
<html> and </html> describes the web page
<body> and </body> is the visible page content
<h1> and </h1> is displayed as a heading
<p> and </p> is displayed as a paragraph
7. HTML Hyperlinks (Links)
The HTML “<a> tag” defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you can click
on to jump to another HTML document.
When you move the cursor over a link in a Web page, the arrow will turn
into a little hand.
The most important attribute of the <a> tag element is the href
attribute, which indicates the link's destination.
8. HTML Hyperlinks (Links)
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue.
A visited link is underlined and purple.
An active link is underlined and red.
NOTE: ALL URLs (web addresses) MUST BE IN QUOTATION MARKS.
e.g. <a href="http://www.microsoft.com"> Visit Microsoft</a>
9. Cascading Style Sheets (CSS) and HTML
CSS can be added to HTML in the following ways:
Inline - using the style attribute in HTML elements
Internal - using the <style> element in the <head> section
External - using an external CSS file
The preferred way to add CSS to HTML, is to put CSS syntax in separate
CSS files, however the style attribute is simple and makes editing styles
easier and more direct.
10. Cascading Style Sheets (CSS) Syntax
INLINE CSS using the STYLE attribute
CSS Inline styles are declared in the START (Opening) tags
Style elements must be in quotation marks.
Examples:
<body style="background-color:yellow"> (page background color)
<h1 style="font-family:verdana"> (specifies display font for the page)
<h1 style="text-align:center"> (alignment of page content)
11. Inserting an Image in a HTML document
In HTML, images are defined with the <img> tag.
The <img> tag is empty, meaning it contains attributes only, and
has no closing tag.
To display an image on a web page, you need to use the src
attribute in the <img> tag. SRC stands for "source". The value of
the src attribute is the URL (location & name with file extension)
of the image you want to display. The name of the image file must
be in quotation marks (“image name”)
e.g. <img src="audi.jpg">
13. Example of Simple Web Page Scripting in HTML
TRY IT YOURSELF (image file must be replaced before trying code)
<!--Author: Derville Lowe-->
<head>
<title> HMTHS </title>
</head>
<!--Specifies text to be displayed in the title bar of the browser-->
<html>
<body style="background-color:green"; align="center">
<!--Specifies how the web page is displayed using an INLINE CSS-->
<img src="audi.jpg"; height=150px; width=200px>
<! --Displays a jpeg image on the web page with dimensions (image size) specified-->
<hr>
<!--Displays a horizontal line on the web page-->
<h1>My First Heading</h3>
<!--Displays a heading on the web page-->
<p><u>My first <br>paragraph.</u></p>
<p>My Second paragraph. This is great!</p>
<!--Displays an underlined paragraph with a line break-->
<!--Displays a paragraph with no formatting-->
<a href="http://www.microsoft.com"> Visit Microsoft </a><br>
<!--Creates a link to the Microsoft website-->
<button><a href="http://www.facebook.com"> Go To Facebook </a></button>
<!--Creates a button link to the Facebook website-->
</body>
</html>