Scribd
Upload
10 views45 pages

1 HTML

Uploaded by

Judah Cagasan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views45 pages

1 HTML

Uploaded by

Judah Cagasan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

Hyper Text Markup

Language (HTML)
What is HTML?

By: Engr. Richard P. Cabales


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>

By: Engr. Richard P. Cabales


What is an HTML Element?
- An HTML element is defined by a start tag,
some content, and an end tag:

By: Engr. Richard P. Cabales


HTML Page Structure

By: Engr. Richard P. Cabales


HTML Editors
Make sure you have…

By: Engr. Richard P. Cabales


HTML Headings
- HTML headings are defined with the <h1> to
<h6> tags.

<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>

By: Engr. Richard P. Cabales


HTML Paragraphs
- HTML paragraphs are defined with the <p> tag:

<p>This is first paragraph.</p>


<p>This is second paragraph.</p>
<p>This is third paragraph.</p>

By: Engr. Richard P. Cabales


HTML Comments
- HTML comments are not displayed in the
browser, but they can help document your HTML
source code.:
<!-- Write your comments here -->

By: Engr. Richard P. Cabales


HTML Links
- HTML links are defined with the <a> tag:

<a href="https://www.Domain_Name.com">This is a link</a>

By: Engr. Richard P. Cabales


HTML Images
- HTML images are defined with the <img> tag.

- The source file (src), alternative text (alt),


width, and height are provided as attributes:

<img src=“image.PNG" alt=“description of image" width="104" height="142">

By: Engr. Richard P. Cabales


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>

By: Engr. Richard P. Cabales


Nested HTML Elements
- HTML elements can be nested (this means that
elements can contain other elements).
- All HTML documents consist of nested HTML
elements. <!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

By: Engr. Richard P. Cabales


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:

<p>This is a <br> paragraph with a line break.</p>

By: Engr. Richard P. Cabales


HTML is Not Case
Sensitive
- HTML tags are not case sensitive: <P> means
the same as <p>.

GOOD PRACTICE: always use lowercase tag names.

By: Engr. Richard P. Cabales


HTML Attributes
- HTML attributes provide additional information
about HTML elements.
 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"

By: Engr. Richard P. Cabales


The href Attribute
- The <a> tag defines a hyperlink. The href
attribute specifies the URL of the page the link
goes to:

<a href="https://www.domain_name.com">Visit Domain_Name</a>

By: Engr. Richard P. Cabales


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:

<img src=“Richard.PNG">

By: Engr. Richard P. Cabales


There are two ways to specify the
URL in the src attribute:
1. Absolute URL - Links to an external image that
is hosted on another website.
src="https://www.domain_name.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission
to use it, you may be in violation of copyright laws. In addition, you cannot
control external images; it can suddenly be removed or changed.

By: Engr. Richard P. Cabales


There are two ways to specify the
URL in the src attribute:
2. Relative URL- Links to an image that is hosted
within the website.
<img src=“Richard.PNG">

Tip: It is almost always best to use relative URLs. They will not break if you
change domain.

By: Engr. Richard P. Cabales


The width and height Attributes
- The <img> tag should also contain the width
and height attributes, which specify the width
and height of the image (in pixels):

<img src=“Richard.PNG" width="500" height="600">

By: Engr. Richard P. Cabales


The alt Attribute
- The required alt attribute for the <img> tag
specifies an alternate text for an image, if the
image for some reason cannot be displayed. This
can be due to a slow connection, or an error in
the src attribute, or if the user uses a screen
reader.
<img src=“Richard.PNG" alt=“Richard POGI">

By: Engr. Richard P. Cabales


The style Attribute
- The style attribute is used to add styles to an
element, such as color, font, size, and more.

<p style="color:red;">This is a red paragraph.</p>

By: Engr. Richard P. Cabales


The lang Attribute
- You should always include the lang attribute
inside the <html> tag, to declare the language of
the Web page. This is meant to assist search
engines and browsers.
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en-US">
<body> <body>
... ...
</body> </body>
</html> </html>

By: Engr. Richard P. Cabales


The lang Attribute
- You should always include the lang attribute
inside the <html> tag, to declare the language of
the Web page. This is meant to assist search
engines and browsers.
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en-US">
<body> <body>
... ...
</body> </body>
</html> </html>

By: Engr. Richard P. Cabales


The title Attribute
- The title attribute defines some extra
information about an element. The value of the
title attribute will be displayed as a tooltip when
you mouse over the element:

<p title="I'm a tooltip">This is a paragraph.</p>

By: Engr. Richard P. Cabales


HTML Headings
- HTML headings are titles or subtitles that you
want to display on a webpage. HTML headings
are defined with the <h1> to <h6> tags.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

By: Engr. Richard P. Cabales


HTML 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.

Note: Use HTML headings for headings only. Don't


use headings to make text BIG or bold.

By: Engr. Richard P. Cabales


Bigger Headings
- Each HTML heading has a default size.
However, you can specify the size for any
heading with the style attribute, using the CSS
font-size property:

<h1 style="font-size:60px;">Heading 1</h1>

By: Engr. Richard P. Cabales


HTML Paragraphs
- A paragraph always starts on a new line, and is
usually a block of text.

- The HTML <p> element defines a paragraph.


<p>
This paragraph
contains a lot of
spaces
in the source code,
but the browser
ignores it.
</p>

By: Engr. Richard P. Cabales


HTML Horizontal Rules
- The <hr> tag defines a thematic break in an
HTML page, and is most often displayed as a
horizontal rule.
- The <hr> element is used to separate content.
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other
text.</p>
<hr>

By: Engr. Richard P. Cabales


HTML Line Breaks
- The HTML <br> element defines a line break.
- Use <br> if you want a line break (a new line)
without starting a new paragraph:

<p>This is<br>a paragraph<br>with line breaks.</p>

By: Engr. Richard P. Cabales


Try This

By: Engr. Richard P. Cabales


SOLUTION - The HTML <pre>
Element
- The HTML <pre> element defines preformatted
text.
<pre>
… insert here the lyrics …

</pre>

By: Engr. Richard P. Cabales


HTML Text Formatting
- HTML contains several elements for defining
text with a special meaning.

<p><b>This text is bold</b></p>


<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

By: Engr. Richard P. Cabales


HTML Formatting Elements
- Formatting elements were designed to display
special types of text:

By: Engr. Richard P. Cabales


HTML <b> and <strong>
Elements
- The HTML <b> - The HTML <strong>
element defines bold element defines text
text, without any extra with strong importance.
importance. The content inside is
typically displayed in
<b>This text is bold</b> bold.
<strong>This text is important!</strong>

By: Engr. Richard P. Cabales


HTML <i> and <em> Elements
- The HTML <i> element - The HTML <em>
defines a part of text in element defines
an alternate voice or emphasized text. The
mood. The content content inside is
inside is typically typically displayed in
displayed in italic. italic.
<em>This text is emphasized</em>
<i>This text is italic</i>
Tip: A screen reader will pronounce the words in <em> with an
emphasis, using verbal/vocal stress.

By: Engr. Richard P. Cabales


HTML <small> Element
- The HTML <small> element defines smaller text:

<p>This is some normal text.</p>


<p><small>This is some smaller text.</small></p>

By: Engr. Richard P. Cabales


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>

By: Engr. Richard P. Cabales


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>

By: Engr. Richard P. Cabales


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>

By: Engr. Richard P. Cabales


HTML <sub> Element
- The HTML <sub> element defines subscript text.

<p>This is <sub>subscripted</sub> text.</p>

By: Engr. Richard P. Cabales


HTML <sup> Element
- The HTML <sup> element defines superscript text.

<p>This is <sup>superscripted</sup> text.</p>

By: Engr. Richard P. Cabales

You might also like