Scribd
Upload
9 views

HTML Slides

Contains good content about HTML language notes

Uploaded by

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

HTML Slides

Contains good content about HTML language notes

Uploaded by

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

Welcome

to
Bright Future Institute
Muneer Ahmed Khan
HTML

HYPER TEXT MARKUP


LANGUAGE

1
Outline

 HTML Introduction  HTML Images


 HTML Editor  HTML Favicon
 HTML Basic  HTML Tables
 HTML Elements  HTML Lists
 HTML Attributes  HTML Block & In block
 HTML Headings  HTML Classes
 HTML Paragraphs  HTML ID
 HTML Styles  HTML Entities
 HTML Formatting  HTML Emojis
 HTML Quotations  HTML Forms
 HTML Comment  HTML Input Types
 HTML Links  HTML Video

2
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating web pages
 HTML describe the structure of a web pages
 HTML consist of series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as “this is a
heading”, “this is a paragraph”, “this is a link”, etc.

3
 Atom  Froala

 Notepad  CoffeeCup

 Notepad++  Visual Studio Code


 Sublime Text

4
 HTML Documents
• All HTML documents must start with a document type declaration:
<!DOCTYPE html>.

• The HTML document itself begins with <html> and end with </html>.

• The visible part of the HTML document is between <body> and


</body>.

5
 Example
<!DOCTYPE html>  Output
<html>
This is heading.
<body>
This is paragraph.
<h1> This is heading. </h1>
<p> This is paragraph. </p>

</body>
</html>

6
 The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration represents the document type, and help
browsers to display web pages correctly.

• Its only appear once, at the top of the page (before any HTML
tags).

• The <!DOCTYPE> declaration is not case sensitive.

• The <!DOCTYPE> declaration for HTML 5 is:

<!DOCTYPE html>

7
The HTML element is everything from the start tag to the
end tag:
<tagname>Content goes here…</tagname>

 Examples of some HTML elements:

<h1> This is heading </h1>


<p> This is paragraph </p>

Note: Some HTML elements have no content (like the <br> element).
These elements are called empty elements.
Empty elements do not have an end tag!

8
 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> );

9
• All HTML elements can have attributes
• Attribute provide additional information about elements.
• Attributes are always specified in the start tag.

• Attributes usually come in name/value pairs like: name=“value”

 Lang Attributes
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.
<html lang=“en”>…..</html>

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

11
 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.

Note: Use HTML headings for heading only. Don’t use headings to make
text BIG or bold.

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

13
 HTML Display
• You cannot be sure how HTML will be displayed.
• Large or small screens, and resized windows will create
different result.
• With HTML, you cannot change the display by adding extra
spaces or extra lines in your HTML code.
• The browser will automatically remove any extra spaces and
lines when the page is displayed.

14
 Example

<p> <p>
This is paragraph This is paragraph
Contains a lot of lines Contains a lot of spaces
In the source code, In the source code,
But the browser But the browser
Ignores it. Ignores it.
</p> </p>

15
• The <hr> tag defines a thematic break in an HTML page, and is
most often displayed as a horizontal rule.

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

• The <hr> tag is an empty tag, which means that it has no end tag.

16
• Use <br> if you want a line break (a new line) without starting a
new paragraph.

Example

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

• The <br> tag is an empty tag, which means that it has no end tag.

17
• The HTML <pre> element defines preformatted text.
• The text inside a <pre> element is displayed in fixed-width
font(usually Courier), and it preserves both space and line break.

Example

<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

oh, bring back my Bonnie to me


</pre>

18
• The HTML style attribute is used to add styles to an element, such
as color, font size, and more.

Example
I am Red
I am Blue
I am Big

• The HTML style attribute has the following syntax:

<tagname style=“property:value;”>
• The property is CSS property. The value is CSS value.

You will learn more about CSS later in this tutorial.

19
 HTML contains several elements for defining text with a special
meaning.

• <b> • <small>

• <strong> • <del>

• <i> • <ins>

• <em> • <sub>

• <mark> • <sup>

20
 We will go through the HTML Quotations elements:

• <blockqoute> • <cite>

• <q> • <bdo>

• <abbr>

• <address>

21
 HTML comments are not displayed in the browser, but they can
help document your HTML source code.
 You can add comments to your HTML source by using the following
syntax:
<!-- Write your comments here -->

 Notice that there is an exclamation point (!) in the start tag, but
not in the end tag.

22
 Links are found in nearly all web pages. Links allow users to click their
way from page to page.
 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.
 A link does not have to be text. A link can be an image or any other
HTML elements.
 The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href=“url”>link text</a>

23
 The Target Attributes
o By default, the linked page will be displayed in the current
browser window. To change this, you must specify another
target for the link.
o The target attribute specifies where to open the linked document.
o The target attribute can have one of the following values:

• _self • _parent

• _top
• _blank

 Syntax:
<a href=“url" target="_blank">link text</a>

24
 Images can improve the design and the appearance of a web page.
 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 • alt

 Syntax:
<img src="url" alt="alternatetext">

25
 A favicon is a small Image displayed next to the page title in the
browser tab.

 Syntax:

<link rel="icon" type="image/x-icon" href="/images/favicon.ico">

26
 HTML tables allow web developers to arrange data into rows and
columns.

 A table in HTML consists of table cells inside rows and columns


 Example:
<table>
<tr> <tr>
<th>Company</th> <td>Centro comercial Moctezuma</td>
<th>Contact</th> <td>Francisco Chang</td>
<th>Country</th> <td>Mexico</td>
</tr> </tr>
<tr> </table>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>

27
 HTML tables can have cells that spans over multiple rows and/or
columns.

 To make a cell span over multiple columns, use the colspan attribute:

 To make a cell span over multiple rows, use the rowspan attribute:

<tr> <tr>
<th colspan="2">Name</th> <th rowspan="2">Name</th>
<th>Age</th> <th>Age</th>
</tr> </tr>

28
 HTML lists allow web developers to group a set of related items in
lists.

 Example:
 An unordered HTML list:  An ordered HTML list:

• item 1. First item


• item 2. Second item
• item 3. Third item

 An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.

29
 An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.

Description Lists:
 HTML also supports description lists.
 A description list is a list of terms, with a description of each
term.
 The <dl> tag defines the description list, the <dt> tag defines
the term (name), and the <dd> tag describes each term:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
30
Block-level Elements:
 A block-level element always starts on a new line, and the
browsers automatically add some space (a margin) before and
after the element.
 A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
 Two commonly used block elements are: <p> and <div>.
 The <p> element defines a paragraph in an HTML document.
 The <div> element defines a division or a section in an HTML
document.
 Here are the some block-level elements in HTML:
<dd> <div> <p> <ul> <li> <pre> <hr> etc.

31
Inline Elements:
 An inline element does not start on a new line.

 An inline element only takes up as much width as necessary.


 This is a <span> element inside a paragraph.

 Here are the some inline elements in HTML:


<a> <b> <br> <img> <span> <i> <strong> etc.

32
Classes:
 The HTML class attribute is used to specify a class for an
HTML element.

 Multiple HTML elements can share the same class.

 The class name is case sensitive!

Example:
<p class=“para”> This is paragraph </p>

33
ID:
 The HTML id attribute is used to specify a unique id for an
HTML element.
 You cannot have more than one element with the same id in
an HTML document.
 The id name is case sensitive!
 The id name must contain at least one character, cannot start
with a number, and must not contain whitespaces (spaces,
tabs, etc.).

Example:
<h1 id=“heading”> This is First Heading. </h1>

34
 Reserved characters in HTML must be replaced with character
entities.
 If you use the less than (<) or greater than (>) signs in your text, the
browser might mix them with tags.
 Character entities are used to display reserved characters in HTML.

 A character entity looks like this:


&entity_name; or &#entity_number;

Advantage of using an entity name: An entity name is easy to remember.


Disadvantage of using an entity name: Browsers may not support all
entity names, but the support for entity numbers is good.

35
Some Useful HTML Character Entities

Result Description Entity Name Entity Number


&nbsp; &#160;
non-breaking space
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" double quotation &quot; &#34;
mark
' single quotation mark &apos; &#39;

¢ Cent &cent; &#162;


£ Pound &pound; &#163;

36
 Emojis look like images, or icons, but they are not.
 Emojis are characters from the UTF-8 character set: 😄 😄 😄
 UTF-8 covers almost all of the characters and symbols in the world.

The HTML charset Attribute:


 To display an HTML page correctly, a web browser must know the
character set used in the page.
 This is specified in the <meta> tag:
<meta charset="UTF-8">

 Example:

<p>I will display &#65; &#66; &#67;</p>

37
 An HTML form is used to collect user input. The user input is most
often sent to a server for processing.
 The HTML <form> element is used to create an HTML form for user
input:

Example
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

38
 The HTML <video> element is used to show a video on a web
page.
 To start a video automatically, use the autoplay attribute:

Example:

<video width="320" height="240" autoplay>


<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

39
BEST OF LUCK

40

You might also like