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

Web Design-Lecture6-HTML5

The document discusses HTML5 and provides information on key concepts: - HTML5 is the latest version of HTML that introduces new features and elements to help develop web applications. It is maintained by the W3C. - New HTML5 elements are introduced for better semantics and dynamic content using JavaScript. Elements include <article>, <aside>, <audio>, <video>, etc. - HTML5 code includes HTML, CSS, and JavaScript. Elements can be block-level, inline, empty, and identified using id or class attributes. Semantic elements clearly describe meaning to browsers and developers.

Uploaded by

James Lues
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
29 views

Web Design-Lecture6-HTML5

The document discusses HTML5 and provides information on key concepts: - HTML5 is the latest version of HTML that introduces new features and elements to help develop web applications. It is maintained by the W3C. - New HTML5 elements are introduced for better semantics and dynamic content using JavaScript. Elements include <article>, <aside>, <audio>, <video>, etc. - HTML5 code includes HTML, CSS, and JavaScript. Elements can be block-level, inline, empty, and identified using id or class attributes. Semantic elements clearly describe meaning to browsers and developers.

Uploaded by

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

Web Design

Fundamental of HTML5 Soran University


Computer Science Dept.
3rd Stage

Hoshang Qasim

E-mail: hoshang.awla@soran.edu.iq

2021
What is HTML5?
• HTML5 is the latest version of Hypertext Markup Language, the code that
describes web pages.

• In this version, new features are introduced to help Web application authors, new
elements are introduced.

• the standard programming language for describing the contents and appearance of
Web pages.

• World Wide Web Consortium (W3C) is in charge with delivering the HTML5
specification.
What is HTML5?
• Adds some new tags and attributes which allow for better semantics and for
dynamic elements that are activated using JavaScript.

• New elements include section


<article>, <aside>, <audio>, <bdi>, <canvas>, <datalist>, <details>, <embed>, <figure>, <figc
aption>, <footer>, <header>, <keygen>, <mark>, <meter>, <nav>, <output>, <progress>, <rp>,
<rt>, <ruby>, <time>, <track>, <video>, and <wbr>.

➢ HTML5 containing three kind of code:


• HTML, which provides the structure.
• Cascading Style Sheets (CSS), which take care of presentation.
• JavaScript, which makes things happen.
Tree Structure
• HTML elements form a tree like structure.
• Some HTML elements can have children. Those have start and end
tags.
• HTML elements that do not allow children only have an opening tag.

4
span
Empty Elements

• HTML elements with no content are called empty elements.


• Empty element does not have closing tag
• <br> is an empty element without a closing tag (the <br> tag defines a line break)
• Some other empty Elements:
<hr> - inserts a horizontal line
<img> - used to display images
<input> - it’s an input

5
Block and Inline Elements

• There are two major types of HTML elements according to the way they
display on the browser:
Block-level elements or Inline elements

Block-level : elements, by default, use all the horizontal space they can get, appear on the screen
as if they have a carriage return or line break before and after them
• For example <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>,
<hr >, <blockquote>,<address>
• All start on their own new lines,
and anything that follows them
6

appears on its own new line too


Block and Inline Elements

Inline elements:
• can appear within sentences and do not need to appear on new lines
• Example <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <small>, <ins>, <del>,
<code>, <cite>, <dfn>, <kbd>, and <var>

7
Block and Inline Elements

<h1>Block-Level Elements</h1>
<p><strong>Block-level elements</strong> always start on a new line. The
<code>&lt;h1&gt;</code> and <code>&lt;p&gt;</code> elements will not sit
on the same line, whereas the inline
elements flow with the rest of the text.
</p>

Note
8
inline elements may not contain block-level elements and can appear
only within block-level elements.
Id and Class

• The id and class attributes are used to easily identify a tag for manipulation (using
JavaScript) or styling (using CSS).

A HTML document cannot have two elements with the same id:

<img id="logo" src="logo.png>

A HTML element can have more than one class (separated by


whitespace).
<p class="first important">Some text</p>

9
Semantic Elements

• Semantic tags tell the browser something about what's inside them.
• Clearly describes its meaning to both the browser and the developer.
• HTML 5 brings a whole new set of semantic tags to replace commonly used div
blocks.

<header> It defines a header for the document or a section


<article> It defines an article in the document

10
Semantic & non-Semantic Elements

11
The markup for that document using HTML5 could look like the following
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>
...
</aside>
<footer>
...
12 </footer>
</body>
GROPING CONTENT – Non semantic

<div> Element
• It represents a generic block or container for flow content.
• designed to be used with classes and ids to give structure to documents.
• It has no effect on the content or layout until styled using CSS
• There’s no semantic meaning behind the <div>

<div class="header">
<h1>EXAMPLE CAFE</h1>
<p>Welcome to example cafe. We will be developing this site throughout
the book.</p>

13 </div>
GROPING CONTENT – Non semantic

<div>Element with Class Example


<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {

border: 4px outset blue;


height: 90px;
width: 60%;
background-color: orange;
text-align: center;
}
</style>
</head>
<body>

<h1>The div element</h1>

<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>

<p>This is some text outside the div element.</p>


14

</body>
</html>
GROPING CONTENT – Non semantic

<div>Element with Class Example


<html>
<head>
<style>
.city {
background-color: silver;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px; }
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
15
</body>
</html>
GROPING CONTENT - Semantic Elements

➢ Semantic element

In html5 we have some semantic element tag:

✓ semantic elements like <header>, <footer>, <article>, and <section>.

✓ Graphic elements: <svg> and <canvas>.

✓ Multimedia elements: <audio> and <video>.

16
GROPING CONTENT - Semantic Elements

<header> Element

• Represents introductory content


• Useful for common introductory or navigation content may contain some heading elements
also other elements like a logo, a search form, an author name, and so on.

<header>
<h1>EXAMPLE CAFE</h1>
<p>Welcome to example cafe. We will be developing this site </p>
</header>

17
GROPING CONTENT - Semantic Elements

<article> Element
• Use an <article> element to mark up “independent content of the site
• such as a blog post, a forum post, a movie review, a news article.
• The basic rule is that if the content can be shared without the rest of the site context, than
it should be marked up as an article

<article>
<h1>Example Cafe, Great Food Delivered with Superior Markup and Style</h1>
<p>It's rare to find a restaurant that combines as many exemplary elements as the example
café.From the superior markup of the café's website to the delicious dishes served with
care nothing about the Example Café is left to chance.</p>
</article>
18
GROPING CONTENT - Semantic Elements

<article> Element
<html>
<head>
<style>
article {background-color:silver;}
</style>
</head>
<body>

<article>
<h1>Hyper Text Markup Language</h1>
<p>HTML It can be thought of as a programming language that is used
to place text, images and other contents on a webpage. . </p>
</article>

19
</body>
</html>
GROPING CONTENT - Semantic Elements

<article> Element

20
GROPING CONTENT - Semantic Elements

<section> Element

• Is used to represent a section of a document such as chapters, headers, footers, or any other
sections of the document.
• use it when none of the other semantic container <section>
<h1>Introduction</h1>
elements are appropriate. </section>
• A simplified example, just using the headings for <section>
<h1>Recipes</h1>
each section and no content, would look </section>
section>
something like this: <h1>Menu</h1>
</section>
<section>
21
<h1>Opening Times</h1>
</section>
GROPING CONTENT - Semantic Elements

Semantic element : <section>

22
GROPING CONTENT - Semantic Elements

<footer> Element

• defines a footer for a document or section


• typically contains information about the author of the section, copyright data, contact
information back to top links, sitemap or link to related document
• Its possible to have several footers in one document

<footer>
<p>All content copyright Example Café </p>
</footer>
23
GROPING CONTENT - Semantic Elements

<nav> Element

• represents a navigation section of the page


• containing a list of links either within the current document or to other documents.

<nav>
<p><a href="recipes.html">Recipes</p>
<p><a href="menu.html">Menu</a></p>
<p><a href="opening_times.html">Opening Times</a></p>
<p><a href-"contact.html">contact</a></p>
</nav>
24
GROPING CONTENT - Semantic Elements

<blockquote> Element
• Used to quote a passage from another source
• Text inside a <blockquote> element is usually indented from the left and right edges of the
surrounding text.
• The cite attribute can be used with blockquote element to indicate the source of the quote
• The value of this attribute should be a URL pointing to an online document.

<blockquote cite= "http://developers.whatwg.org/grouping-content.html#the-blockquote-element">

The blockquote element represents a section that is quoted from another source.
Content inside a blockquote must be quoted from another source, whose address,
if it has one, may be cited in the cite attribute.
25 </blockquote>
GROPING CONTENT - Semantic Elements

<aside> Element

• defines some content aside from the content it is placed in.


• content in the aside should be related to the documents main content.

<article>
<h1>Example Cafe, Great Food Delivered with Superior Markup and Style</h1>
<p>It's rare to find a restaurant that combines as many exemplary elements as
the example café. From the superior markup of the café's website to the delicious
dishes served with care nothing about the Example Café is left to chance.</p>
<aside> It's rare to find a restaurant that combines as many exemplary
elements as the example café.</aside>
</article>
26
GROPING CONTENT - Semantic Elements

<aside> Element

27
GROPING CONTENT - Semantic Elements

<address> Element

• used to mark up contact information for an article element or for the document as a whole

Note! In this example you add it as contact information in the footer

<footer>
<address>Written by <a href=”ABC Group">
ABC Group</a><br>
Soran – Kurditan region </address>
28 <p>All content copyright Example Café </p>
</footer>
Canvas tag Drawing

• The HTML <canvas> element is used to draw graphics on a web page.


• The <canvas> element is only a container for graphics. You must use JavaScript to
actually draw the graphics.
• Canvas has several methods for drawing paths, boxes, circles, text, and adding
images.
• By default, the <canvas> element has no border and no content.
<canvas id="myCanvas" width="200"
height="100" style="border:1px solid red;">

29
Draw a Line into the Canvas
<html>
<body>

<canvas id="myCanvas" width="200" height="100"


style="border:1px solid blue;">
</canvas>
<script>
var a = document.getElementById("myCanvas");
var x = a.getContext("2d");
x.moveTo(0,0);
x.lineTo(200,100);
x.stroke();
</script>

</body>
</html>
30
Semantic elements <figure> and <figcaption>
The purpose of a figure caption is to add a visual explanation to an image.
In HTML5, an image and a caption can be grouped together in a <figure> element:

31
GROPING CONTENT - Semantic Elements

Creating <article> in <article>:

32

You might also like