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

Introduction To HTML5-Part1

This document provides an introduction to HTML5 through a series of lectures. It discusses the structure and elements of HTML5 including headings, paragraphs, attributes, images, hyperlinks and meta tags. It provides examples of basic HTML5 page structure and common tags like <h1>-<h6> for headings and <p> for paragraphs. It also covers empty elements, line breaks, formatting text and practicing building simple HTML5 pages.

Uploaded by

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

Introduction To HTML5-Part1

This document provides an introduction to HTML5 through a series of lectures. It discusses the structure and elements of HTML5 including headings, paragraphs, attributes, images, hyperlinks and meta tags. It provides examples of basic HTML5 page structure and common tags like <h1>-<h6> for headings and <p> for paragraphs. It also covers empty elements, line breaks, formatting text and practicing building simple HTML5 pages.

Uploaded by

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

Introduction to HTML5-Part1

Week6
In this lecture…
• Introduction to HTML5
• structure and elements
• Heading and Paragraph
• HTML Attributes
• Images
• Hyperlinks
• Meta

2
HTML
HTML is an application of the Standard Generalized Markup Language
Hypertext Markup Language
The language used to create web documents
All page elements are identified by special tags
The tags give the browser instructions on how to display the content
the tags themselves don’t display

3
HTML5
• HTML5 is the new standard for HTML.
• The previous version of HTML, HTML 4.01, came in 1999. The
web has changed a lot since then.
• HTML5 is in progress. However, the major browsers support many
of the new HTML5 elements.
• All HTML examples in this course are compatible with HTML5.

4
HTML Element
• An HTML element starts with a start tag
• An HTML element ends with an end tag
• The element content is between the start and the
end tag
• Most HTML elements can be nested (elements can
contain elements).

5
HTML Example
<!DOCTYPE html>
<html>
<head>
<title>Title of page</title>
</head>
<body>
<p>This is my first page.<p>
</body>
</html>

How many HTML elements are in this example?

6
<!DOCTYPE html >
• The <!DOCTYPE > declaration must be the very first thing in your
HTML5 document, before the <html> tag.
• The <!DOCTYPE > declaration is not an HTML5 tag; it is an
instruction to the web browser about what version of HTML the
page is written in.
• Different HTML version have different <!DOCTYPE >

7
Example HTML5 Web Page

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title Goes Here</title>
<meta charset="utf-8">
</head>
<body>
... body text and more HTML5 tags go here ...
</body>
</html>
8
Head & Body Sections
• Head Section
Contains information that describes the Web page document
<head>
…head section info goes here
</head>
• Body Section
Contains text and elements that display in the Web page
document
<body>
…body section info goes here
</body>

9
Title Element
Meta Element

10
HTML page structure
html

head body

title p b i …..

11
HTML page structure
<html> Defines the text file as being in HTML format. This is
</html> found on the beginning and end of each web page.

<head>
The heading area of the page.
</head>

<title> Defines the title displayed at the title bar of the


</title> browser window.

Found after the <head> tag and is used to define the


<body>
area of the file which formats the way the web page
</body>
is seen.
12
Heading
• Headings are defined with the <h1> to <h6> tags.
• <h1> defines the largest heading.
• <h6> defines the smallest heading.
• Search engines use your headings.

13
Paragraph
• Paragraphs are defined with the <p> tag.
• HTML automatically adds an extra blank line before and after a
Heading and paragraph.

14
Heading and Paragraph Example
<!DOCTYPE html>
<html>
<body>
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>

<p> this is default paragraph text</p>


</body>
</html>

15
HTML Formatting Tags
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and
<sup>superscript</sup></p>
</body>
</html>
16
Empty HTML Elements
• HTML elements with no content.
• <br> is an empty element without a closing tag (the
<br> tag defines a line break).
• Sometimes called Stand-alone element.
• You can close the empty element in the opening tag like
this: <br />.

17
Line Break
The <br> tag is used when you want to end a line,
but don't want to start a new paragraph.
The <hr>tag defines a horizontal rule.
Example
<p>This <br> is a
para<br>graph with line break</p>

Can you change the output by adding extra spaces


or extra lines in your HTML code?

18
Practice
• Launch Notepad or another text editor and type the 1st HTML example.
• Save the file as test.html.
• Launch a browser such as Internet Explorer or Firefox to test your page.
• Try the Heading and Paragraph Example.
• Use text formatting tags.
• Add spaces and empty line in the code and check your out put, add <br>
<hr>.
• Add background color and image to the body tag.
• Insert and image and link to your college webpage.
• Add your name and student-id as comment title.

19
References
1. Gary B. Shelly & Misty E. Vermaat & Jeffrey J. (CON) Quasney & Susan L. (CON) Sebok & Steven M. (CON)
Freund.(2011). Discovering Computers, Complete: Your Interactive Guide to the Digital World. Cengage
Learning
2. MacDonald M(2015).Creating a Website; The Missing Manual. 4th Ed
3. Tittel, Ed(2013). Beginning HTML5 & CSS3 for dummies, John Wiley and Sons Publisher.
4. Castro,Elizabeth(2007).HTML,XHTML&CSS:Visual quickstart guide,Peachpit Press.

20

You might also like