Scribd
Upload
9 views

CH3 HTML

HTML is the standard markup language used to create web pages. It uses tags to define elements like headings, paragraphs, links and images. Tags are surrounded by angle brackets and consist of an opening and closing tag. Attributes provide additional information about elements, like the href attribute specifying a link destination or the src attribute specifying an image source. Headings are defined using tags from h1 to h6, with h1 being the most important. Paragraphs are defined using the p tag. Links are defined using the a tag along with the href attribute.

Uploaded by

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

CH3 HTML

HTML is the standard markup language used to create web pages. It uses tags to define elements like headings, paragraphs, links and images. Tags are surrounded by angle brackets and consist of an opening and closing tag. Attributes provide additional information about elements, like the href attribute specifying a link destination or the src attribute specifying an image source. Headings are defined using tags from h1 to h6, with h1 being the most important. Paragraphs are defined using the p tag. Links are defined using the a tag along with the href attribute.

Uploaded by

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

CHAPTER 3

HTML
Hypertext Markup Language (HTML)
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating
Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the
content
Hypertext Markup Language (HTML)
• The purpose of a web browser (Chrome, Edge, Firefox,
Safari) is to read HTML documents and display them
correctly.
• A browser does not display the HTML tags, but uses
them to determine how to display the document:
A Simple HTML Document

• <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Elements
• An HTML element is defined by a start tag, some
content, and an end tag:
• <tagname>Content goes here...</tagname>
• The HTML element is everything from the start tag to
the end tag:
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>
HTML Editors

• 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).
HTML Editors - Notepad

• Step 1: Open Start > Programs > Accessories > Notepad


• Step 2: Write Some HTML
• <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Editors
• Step 3: Save the HTML Page
• Save the file on your computer. Select File > Save
as in the Notepad menu.
• Name the file "index.htm" and set the encoding
to UTF-8 (which is the preferred encoding for HTML
files).
HTML Editors
• Step 4: View the HTML Page in Your Browser
• Open the saved HTML file in your favorite browser
(double click on the file, or right-click - and choose
"Open with").
• The result will look much like this:
HTML Documents

• All HTML documents must start with a


document type declaration: <!DOCTYPE html>.
• The HTML document itself begins with <html>
and ends with </html>.
• The visible part of the HTML document is
between <body> and </body>.
HTML Documents

• <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
•
HTML Documents

• 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

• <h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="https://www.w3schools.com">This is a link</a>

• The link's destination is specified in the href attribute.


• Attributes are used to provide additional information about HTML
elements.
• You will learn more about attributes in a later chapter.
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
• <img src=“google.jpg" alt=“goo.com.my" width="104" heig
ht="142">
HTML Elements

• An HTML element is defined by a start tag, some


content, and an end tag.
• The HTML element is everything from the start tag to
the end tag:
• <tagname>Content goes here...</tagname>
• Examples of some HTML elements:
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>
HTML Elements
Nested HTML Elements
• HTML elements can be nested (this means that elements can
contain other elements).
• All HTML documents consist of nested HTML elements.
• The following example contains four HTML elements
(<html>, <body>, <h1> and <p>):

• Example
• <!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Never Skip the End Tag

• Some HTML elements will display correctly, even if you forget the
end tag:
• Example
• <html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>

• Unexpected results and errors may occur if you forget the


end tag!
Empty HTML Elements

• HTML elements with no content are called empty


elements.
• The <br> tag defines a line break, and is an empty
element without a closing tag:

• Example
• <p>This is a <br> paragraph with a line break.</p>
HTML is Not Case Sensitive

• HTML tags are not case sensitive: <P> means the same
as <p>.
• The HTML standard does not require lowercase tags,
but W3C recommends lowercase in HTML,
and demands lowercase for stricter document types
like XHTML.
HTML Tag Reference
HTML Attributes

• All HTML elements can have attributes


• Attributes provide additional information about
elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs
like: name="value"
The href Attribute

• The <a> tag defines a hyperlink. The href attribute specifies the
URL of the page the link goes to:
• Example
• <a href="https://www.google.com">Visit Google</a>
•
The src Attribute
• The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be displayed:
• Example
• <img src="img_girl.jpg">
The width and height Attributes
• The <img> tag should also contain the width and height attributes,
which specifies the width and height of the image (in pixels):
• Example
• <img src="img_girl.jpg" width="500" height="600">
• Example
• <img src="img_girl.jpg" width="500" height="600">
HTML Headings

• HTML headings are titles or subtitles that you want to


display on a webpage.
• Example
HTML Headings
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
• <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
•
Headings Are Important

• Search engines use the headings to index the structure


and content of your web pages.
• Users often skim a page by its headings. It is
important to use headings to show the document
structure.
• <h1> headings should be used for main headings,
followed by <h2> headings, then the less
important <h3>, and so on.
HTML Paragraphs
• The HTML <p> element defines a paragraph.
• A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before
and after a paragraph.
• Example
• <p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links

• Links are found in nearly all web pages. Links allow


users to click their way from page to page.
HTML Links - Hyperlinks

• HTML links are hyperlinks.


• You can click on a link and jump to another document.
• When you move the mouse over a link, the mouse
arrow will turn into a little hand.
• END

You might also like