Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
277 views

Chapter 1 Introduction To HTML5

The document provides an introduction to HTML 5 including: - The objectives of understanding HTML structure, semantics, elements, tags, file management, and text formatting - What HTML is and how it uses tags to mark up text - Examples of HTML tags and basic document structure including the <DOCTYPE>, <html>, <head>, and <body> tags

Uploaded by

alhinai676
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
277 views

Chapter 1 Introduction To HTML5

The document provides an introduction to HTML 5 including: - The objectives of understanding HTML structure, semantics, elements, tags, file management, and text formatting - What HTML is and how it uses tags to mark up text - Examples of HTML tags and basic document structure including the <DOCTYPE>, <html>, <head>, and <body> tags

Uploaded by

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

Chapter 1

Introduction to HTML 5
Objectives:
 At the end of this module, the students will be able to
understand:
 What is Hypertext Markup Language?
 The different HTML 5 structure, semantics and elements.
 How to write the tags?
 Correct and Incorrect Nesting of tags
 Comments

 How to save html file and file management?


 What are the different text formatting in HTML?
 How to Insert Special Characters?
University of Technology and Applied Sciences 2
What is HTML?
 It is acronym stands for HyperText Markup Language.
 a standardized system for tagging text files to achieve font,
colour, graphic, and hyperlink effects on World Wide Web pages.
 HyperText is the method by which you move around on the web —
by clicking on special text called hyperlinks which bring you to the
next page.
 Markup is what HTML tags do to the text inside them. They mark it
as a certain type of text. For example (italicised text)
 HTML files saved with the .html or .htm extension (example:-
index.html)

University of Technology and Applied Sciences 3


File Management
 Websites use several types of files, including HTML files, image
files, media such as audio and video files, and CSS files

 Each site must follow a systematic method to organize its files

 The main folder, also called the root folder, contains all files
and other folders for the website

University of Technology and Applied Sciences

4
File Management

University of Technology and Applied Sciences 5


HTML tags
 HTML tags are keywords (tag names) surrounded
by angle brackets like <html> , each tags gives a specific
instructions.
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the opening tag, the second tag
is the closing tag
 The closing tag is written like the opening tag, with
a forward slash before the tag name
 <html>…………………</html>
 Some tags have only opening tag.
 <br/> and <hr/>
University of Technology and Applied Sciences 6
Examples:
<br/> <hr/>

<br><br/> <hr><hr/>

Do not have pair of tags


University of Technology and Applied Sciences 7
How to write the tags
 The HTML5 standard does not require lowercase tags,
but W3C recommends lowercase in HTML
 HTML5 does not require empty elements to be closed.
 Example: <br>
 Do Not Forget the End Tag

University of Technology and Applied Sciences 8


Basic Structure of an HTML5 Documents

University of Technology and Applied Sciences 9


The <!DOCTYPE> declare, very first thing in your HTML document,
before the <html> tag.
<!DOCTYPE>
The <!DOCTYPE> declaration is not an HTML tag;
it is an instruction to the web browser about what version of
HTML the page is written in.

The first tag in your HTML document, it tells your


<html>
browser that this is the start of an HTML document.
<head> The text between the <head>tag and the</head>tag is header
</head> information.

<body> The text between the<body>tags is the text that will be displayed in
</body> your browser.

</html> The last tag in your document, It tells your browser that
this is the end Of the HTML document.
University of Technology and Applied Sciences 10
Sample Document Structure

University of Technology and Applied Sciences 11


Using HTML5 Semantic Elements

University of Technology and Applied Sciences 12


Using HTML5 Semantic Elements

University of Technology and Applied Sciences 13


Understanding the Web Page Layout

Source: https://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-with-html5.html

University of Technology and Applied Sciences 14


Correct and Incorrect nesting tags
 Unrecognised tags are simply ignored by browser!!
 Container tags must be nested!!
Correct Incorrect

<tag1> <tag1>
<tag2> <tag2>

</tag2> </tag1>
</tag1> </tag2>

University of Technology and Applied Sciences 15


 Head  Meta
 Title  Line break
 Header  Progress
 Main  Meter
 Nav  Address
HTML Tags/  Section

HTML5  Summary
 Details
Elements  Aside
 Mark
 Footer
 Heading
 Paragraph
University of Technology and Applied Sciences 16
The Head Element
 The HTML <head> element has nothing to do with HTML headings.
 The <head> element can include a title for the document, scripts, styles, meta
information (metadata) and more
 HTML metadata is data about the HTML document.
 Metadata is not displayed.
 The <head> element is placed between the <html> tag and the <body> tag.
 The following elements can go inside the <head> element are:
 <title> (this element is required in an HTML document)
 <style>
 <link>
 <meta>
 <script>

University of Technology and Applied Sciences 17


Example:

University of Technology and Applied Sciences 18


The <title> tag
 A title tag is an HTML element that specifies the title of a
web page.
 The title tag of a web page is meant to be an accurate and
concise description of a page's content.
Example:

University of Technology and Applied Sciences 19


Output:

University of Technology and Applied Sciences 20


The <meta> tag
 The <meta> tag provides metadata about the HTML document.

 Used to specify page description, keywords, author of the document, last modified and
other metadata.

 <meta> tags always goes inside the <head> element.

Note: The metadata will not be displayed on the page.

Examples:

University of Technology and Applied Sciences 21


The <body> tag
 The <body> tag defines the document's body.
 The <body> element contains all the contents of an HTML document, such as
text, hyperlinks, images, tables, lists, etc.
 The HTML <body> tag defines the main content of the HTML document or the
section of the HTML document that will be directly visible on your web page.
This tag is also commonly referred to as the <body> element.
Syntax: Example:

University of Technology and Applied Sciences 22


Header
 The <header> element represents a container for
introductory content or a set of navigational links.
 A <header> element typically contains:
 one or more heading elements (<h1> - <h6>)
 logo or icon
 authorship information
 Youcan have several <header> elements in one
document.
 Note: A <header> tag cannot be placed within
a <footer>, <address> or another <header>
element.
University of Technology and Applied Sciences 23
Headings tags
 Headings are defined with the <h1> to <h6> tags.
 <h1> defines the largest heading.

 <h6> defines the smallest heading.

<h1>This is a heading</h1>
This is a Heading
<h2>This is a heading</h2>
This is a heading
<h3>This is a heading</h3>
This is a heading
<h4>This is a heading</h4>
This is a heading

<h5>This is a heading</h5> This is a heading

<h6>This is a heading</h6> This is a heading


University of Technology and Applied Sciences 24
Paragraph
 The HTML <p> element defines a paragraph.
 Browsers automatically add some space (margin) before and after
each <p> element. The margins can be modified with CSS (with the
margin properties).

University of Technology and Applied Sciences 25


How to write a comment?
 You can add comments to your HTML source by using the following syntax:

Note: A comment will be ignored by the browser.


Example:
Output without comments:

Output with comments:


University of Technology and Applied Sciences 26
How to add line breaks?
 The <br> tag inserts a single line break.
 Use the <br> tag to enter line breaks, not to separate paragraphs.

Example:
Output:

University of Technology and Applied Sciences 27


How to add Non-breaking Space?
 A non-breaking space (&nbsp;) is a space that will not break into a new line.
 Two words separated by a non-breaking space will stick together (not break
into a new line).
Example:

Output:

University of Technology and Applied Sciences 28


The <nav>tag
 The <nav> tag defines a set of navigation links.

Example:
Output:

University of Technology and Applied Sciences 29


The <main> tag
 The <main> tag specifies the main content of a document.
Note: There must not be more than one <main> element in a document.
The <main> element must NOT be a descendant of an <article>,
<aside>, <footer>, <header>, or <nav> element.

Example:

University of Technology and Applied Sciences 30


Section Tag
 The <section> tag defines sections in a document, such as chapters,
headers, footers, or any other sections of the document.

Example:
Output:

University of Technology and Applied Sciences 31


Aside
 The <aside> tag defines some content aside from the content it is placed in.
 The aside content should be related to the surrounding content.
Note: The sample output presented below is with Cascading Style
Example:

Output:

University of Technology and Applied Sciences 32


Mark
 The <mark> tag defines marked text.
 Use the <mark> tag if you want to highlight parts of your text.

Example:

Output:

University of Technology and Applied Sciences 33


Summary
 The <summary> tag defines a visible heading for the <details>
element. The heading can be clicked to view/hide the details.
 Example:
 Code

 Output

University of Technology and Applied Sciences 34


Details
 The <details> tag specifies additional details that the
user can view or hide on demand.
 The <details> tag can be used to create an interactive
widget that the user can open and close. Any sort of
content can be put inside the <details> tag.
 The content of a <details> element should not be
visible unless the open attribute is set.
 The details element represents a disclosure widget
from which the user can obtain additional information
or controls.

University of Technology and Applied Sciences 35


Progress
 The <progress> tag is new in HTML5. The <progress> tag represents
the progress of a task.

Example: Output:

University of Technology and Applied Sciences 36


Meter Tag
 The<meter> tag defines a scalar measurement within
a known range, or a fractional value. This is also
known as a gauge.

University of Technology and Applied Sciences 37


Example 1

Example 2

University of Technology and Applied Sciences 38


Footer
 The <footer> tag defines a footer for a document or
section.
 A <footer> element should contain information about its
containing element.
 A <footer> element typically contains:
 authorship information
 copyright information
 contact information
 sitemap
 back to top links
 related documents
 You can have several <footer> elements in one document.
University of Technology and Applied Sciences 39
Footer
 Sample:

University of Technology and Applied Sciences 40


Address
 The <address> tag defines the contact information for the
author/owner of a document or an article.
 Ifthe <address> element is inside the <body> element, it represents
contact information for the document.
 Ifthe <address> element is inside an <article> element, it represents
contact information for that article.
 The text in the <address> element usually renders in italic. Most
browsers will add a line break before and after the address element.

University of Technology and Applied Sciences 41


HTML Text Formatting

Tags Description
<b> ... </b> Defines bold text
<i> ... </i> Defines italic text
<sub> ... </sub> Defines subscripted text
<sup> ... </sup> Defines super scripted text
<small>…</small> Defines smaller text
<strong> </strong> It defines important text (bold)

<del> </del> Defines strikethrough text (delete)


<ins> </ins> For inserting text
<em> </em> Defines emphasized text (italicizes)

<q>….</q> Defines a short quotation.


<blockquote>…</blockquote> tag specifies a section that is quoted from
another source usually indented.
University of Technology and Applied Sciences 42
Quotation VS Block quote
EXAMPLE: EXAMPLE:

OUTPUT: OUTPUT:

University of Technology and Applied Sciences 43


Use Special Character (Escape Sequence)
Character Numbered Entity Named Entity

&#169; &copy;

&#174; &reg;

&#36; &dollar;

&#8364; &euro;

&#9742; &phone;

Starting with An ampersand (&)


Ending with Semicolon (;)

University of Technology and Applied Sciences 44


The End

University of Technology and Applied Sciences 45


References:

 https://www.w3schools.com/
 https://www.tutorialrepublic.com/html-tutorial/
 https://www.tutorialspoint.com/html5/

University of Technology and Applied Sciences 46

You might also like