Scribd
Upload
11 views56 pages

4 - HTMLV5

The document provides an overview of HTML and HTML5, detailing various elements such as iframes, comments, and semantic elements like <header>, <footer>, and <nav>. It also covers new features in HTML5, including video and audio elements, form inputs, and the structure of a webpage. Additionally, it includes an assignment to design a college website with specific requirements for content and layout.

Uploaded by

Abdelrahman Tamer
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
11 views56 pages

4 - HTMLV5

The document provides an overview of HTML and HTML5, detailing various elements such as iframes, comments, and semantic elements like <header>, <footer>, and <nav>. It also covers new features in HTML5, including video and audio elements, form inputs, and the structure of a webpage. Additionally, it includes an assignment to design a college website with specific requirements for content and layout.

Uploaded by

Abdelrahman Tamer
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/ 56

Web Design

HTML Iframe
- An iframe is used to display a web page within a web page
- Tag: <iframe>……</iframe>.
- Attributes:
src: the URL of the inline frame page.
height: Height in pixels.
width: Width in pixels.

<iframe src="demo.htm">
</iframe>

2
HTML Iframe
- An iframe can be used as the target frame for a link.
- The target attribute of the link must refer to the name attribute
of the iframe.

<iframe src="demo.htm" name="xyz">


</iframe>
<a href="https://www.google.com/"
target="xyz">google</a>

3
HTML Comments
- Comments are used to insert comments in the source code, they
are not displayed in the browsers

<!--
This text will not appear on the browser
-->

4
HTML <head>
- The <head> tag is placed between the <html> and <body> tags. It
is a container for data about the HTML document and is not
displayed on the webpage.
- The <head> tag contains these tags:
<meta>, <title>, <style>, <link>, <script>.

5
HTML <meta> Element
- The <meta> element is used to specify the web page character
set, page description, keywords, and author.
- Metadata is used by browsers, search engines, and by other web
services.
- To define the character set:
<meta charset="UTF-8">

- To define a description of a web page:


<meta name="description" content="mysite">
- To define keywords for search engines:
<meta name="keywords" content="HTML, CSS,">
- To refresh the page every 30 seconds:
<meta http-equiv="refresh" content="30">

6
HTML <title> Element
- The <title> element defines the title of the document.
- The <title> element:
Defines a title in the browser tab.
Provides a title for the page when it is added to favorites.
Displays a title for the page in search engine results.

7
HTML <link> Element
- The <link> element is used to link to external style sheets.

<link rel="stylesheet" href="mystyle.css">

8
HTML <style> Element
- The <style> element defines style information for a single HTML
page. (Internal CSS)

<style>
body {background-color: green;}
p {color: blue;}
</style>

9
HTML <script> Element
- The <script> element is used to define client-side JavaScript.

<script>
function xyz() {
alert("Welcome to my page!");
}
xyz();
</script>

10
HTML Assignment
- Design a website for a College. There should be at least 4 web-
pages present in the web-site. There should be:
- One Home page that contains the name of the college as heading
along with the college logo.
- There should be an appropriate description of the college on the
home
- There should a list of links for the following pages:
• Home;
• Academics;
• Admission;
• Gallery.

11
HTML Assignment
- One Academics page which contains a list of all the departments
present in the college. The list should be a nested list, with
available courses mentioned under each department.
- There should be a minimum of two courses under each
department,
- Each Course entry in the list should be a HTML link that leads to a
web-page totally dedicated to the course itself.
- Each Course should have its own dedicated web-page. This page
should contain a description about the course, a table of all the
teachers taking the course and the timetable for that particular
subject.

12
HTML Assignment
- The Admission page basically contains a form that a student
needs to fill up in order to take admission in the college. The
form should ask all the necessary questions using appropriate
form elements.
- One gallery page that contains set of photos taken of the college
and its students.
- Please note that each web-page in this website should have the
same background Image/color.
- The looks of each page should be similar

13
HTML 5

14
Why HTML 5?
- It delivers rich content without the need for additional plugins,
animations, graphics, music, and movies, and builds
complicated websites.
- Cross-platform: Designed to work with PCs, Tablets,
Smartphones, or Smart TVs.
- With HTML5, error handling becomes a simpler task.
- HTML5 is device-independent.
- All major browsers like Chrome, Firefox, Internet Explorer, Edge,
Safari, and Opera support HTML5.

15
HTML5 Syntax
- To declare the DOCTYPE in HTML 5 use:

<!DOCTYPE html>

16
The HTML5 Character Encoding
- Very simple (The default character encoding in HTML5 is UTF-8)

<meta charset="UTF-8">

17
The HTML5 Document

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Document Title</title>
</head>
<body>
HTML tags
</body></html>

18
HTML 5 New Semantic Elements
- Many websites contain HTML code like:
<div id="nav">
<div class="header">
<div id="footer">
- to indicate navigation, header, and footer, HTML5 offers new
semantic elements to define different parts of a web page like:
<article> <aside> <details>
<figcaption> <figure> <footer>
<header> <main> <mark>
<nav> <section> <summary>

19
Why Semantic Elements?
- In HTML4, developers uses their own id/class names to style
elements like header, footer, navigation, and container.
- This made it impossible for search engines to identify the correct
web page content.
- With the new HTML5 elements (<header> <footer> <nav>
<section> <article>), this will become easier.

20
Why Semantic Elements?

21
HTML <section>
- The <section> element defines a section in a document.
- It is a group of contents, with a heading.
- A webpage could be split into many sections
(Ex: introduction, content, and contact information).

<section>
<h1>Welcome</h1>
<p>This is our website for....</p>
</section>

22
HTML <article>
- The <article> element specifies independent, self-contained
content.
- Examples of where an <article> element can be used:
Forum post, Blog post, Newspaper article.

<article>
<h1>What We Offer</h1>
<p>We are a nonprofit organization aiming to…...</p>
</article>

23
HTML <header>
- The <header> element specifies a header for a document or a
section.
- The <header> element should be used as a container for
introductory content.
- You can have several <header> elements in one document.

<article>
<header>
<h1>……………</h1>
<p>……………</p>
</header>
<p>…………….</p>
</article>

24
HTML <footer>
- The <footer> element specifies a footer for a document or
section.
- A <footer> element should contain information about its
containing element.
- A footer contains copyright information, links to terms of use,
and contact information.
- You may have several <footer> elements in one document.
<footer>
<p>Contact information: </p>
<p><a href="mailto:[email protected]">
[email protected]</a></p>
</p>
</footer>

25
HTML <nav>
- The <nav> element defines a set of navigation links.
- Notice that NOT all document links should be inside a <nav>
element. The <nav> element is intended only for major blocks of
navigation links.

<nav>
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
<a href="/js/">JavaScript</a>
</nav>

26
HTML <aside>
- The <aside> element defines some content aside from the
content it is placed in (like a sidebar).

<aside>
<h4>NEWS</h4>
<p>……………………………..</p>
</aside>

27
HTML <figure> and <figcaption>
- The purpose of a figure caption is to add an explanation to an
image.

<figure>
<img src="pic1.jpg">
<figcaption>Fig1. – Cat Image.</figcaption>
</figure>

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

<details>
<summary>Copyright 2018.</summary>
<p> - by NTI. All Rights Reserved.</p>
<p>All content on this web site are the property of
NTI.</p>
</details>

29
HTML <Dialog >
- HTML <dialog> tag is used to create a new horizontally centered
popup dialog (dialog box) on a web page or other interactive
component like a window.
- The <dialog> element uses a Boolean attribute named “open”
that activates the element.
- Note: By default, the dialog position is set to absolute on the
webpage; i.e., the Top, left, right, and bottom CSS properties can
be used.
<dialog open>Alert from the HTML Page</dialog>

30
HTML <main>
- The <main> tag specifies the main content of a webpage.
- The content inside the <main> element should be unique to the
document.
- It should not contain any content that is repeated across
documents.

<main>
<h1>………………….</h1><p>……………….…….</p>
<article>
<h1>…………………</h1><p>……………………….p></article>
<article>
<h1>…………………</h1><p>……………………….p></article>
</main>

31
HTML5 Videos
- The HTML5 <video> element specifies a standard way to embed a
video in a web page.

<video width="320" height="240" controls autoplay loop


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

32
HTML5 Videos
- Controls: Add video controls, like play, pause, and volume.
- Autoplay: used to start the video automatically.
- Loop: used to start the video over again after it is finished.
- Muted: used to start the video muted (no sound played).
- Preload: attribute used to preload the video.
- Poster: attribute specifies an image to be shown while the video
downloads or until the user hits the play button.
- Width and Height: Defines the width and the height.
- <source>: element specifies alternative video files for the browser
to choose from them.
- Text: between the <video> and </video> tags will only be
displayed in browsers that do not support the <video> element.

33
HTML5 Audio
- The HTML5 <audio> element used to play an audio file a web
page.

<audio controls>
<source src="sound.ogg" type="audio/ogg">
<source src="sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

34
HTML5 Audio
- Controls: Add audio controls, like play, pause, and volume.
- Autoplay: specifies that the audio will start playing as soon as it is
ready.
- Loop: used to start the audio over again, every time it is finished.
- Muted: specifies that the audio output should be muted.
- <source>: element allows to specify alternative audio files which
the browser may choose from. The browser will use the first
recognized format.
- Text: between the <audio> and </audio> tags will only be
displayed in browsers that do not support the <audio> element.

35
Table Header and Footer and Body
- The <thead>, <tbody> and <tfoot> elements are used together to
specify each part of a table (header, body, footer).
- The <thead> tag must be used as a child of a <table> element,
after the <caption>, and the <colgroup> elements.
<table>
<thead><tr>
<td>Header 1</td><td>Header 2</td><td>Header
3</td>
</tr></thead>
<tfoot><tr>
<td>Footer 1</td><td>Footer 2</td><td>Footer 3</td>
</tr></tfoot>
<tbody><tr>
<td>Cell 1</td><td>Cell 2</td><td>Cell 3</td>
</tr></tbody>
</table>
36
Progress Bar <progress>
- Used to create progress bars.
- You can specify the value of “max” attribute to set how much
work the task requires in total and the “value” attribute to set
how much of this work has been completed.
- Progress bar that has a value attribute is known as
“determinate” and progress bar that doesn’t have a value
attribute is known as being “indeterminate”.

<p>
<progress max="100"></progress>
</p>
<p>
<progress value="60" max="100"></progress>
</p>

37
Meter
- Use to measure data within a given range
- Meter can be use for Disk usage, the relevance of a query result,
etc.

<html>
<body>
<meter value="20" min="0" max="100"></meter>
<meter value="0.6"></meter>
</body>
</html>

38
Meter Attributes:
- value – A floating point number that represents the current value of the
measured range. This must be between the min and the max value (if
specified).
- min – Indicates the lower bound of the measured range.
- max – Indicates the upper bound of the measured range.
- low – It represents the upper bound of the low end of the measured
range. This must be greater than the min attribute, but less than the
high and max value (if specified).
- high – It represents the lower bound of the high end of the measured
range. This must be less than the max attribute, but greater than the
low and min value (if specified).
- optimum – This attribute indicates the optimum value and must be
within the range of min and max values. When used with the low and
high attributes, it indicates the preferred zone for a given range.

39
HTML5 new form inputs
<input type="color">
- Used for input fields that should contain a color.

40
HTML5 new form inputs
<input type="datetime-local">
- Adds a date and time input field, with no time zone.

41
HTML5 new form inputs
<input type="email">
- Adds an input field that should contain an e-mail address.
- Can be automatically validated when submitted using the
“required” attribute.

42
HTML5 new form inputs
<input type="month">
- Adds an input fields that allows the user to select a month and
year.

43
HTML5 new form inputs
<input type="number">
- Defines a numeric input field. Max and Min and Step attributes
values can be added.

44
HTML5 new form inputs
<input type="range">
- It adds a slider control for entering a number whose exact value
is not important. The Max, Min, and Step attributes can be set,
and the “value” attribute can be set to define the default value.

45
HTML5 new form inputs
<input type="search">
- Used to add search fields.

46
HTML5 new form inputs
<input type="time">
- Allows the user to select a time (no time zone).

47
HTML5 new form inputs
<input type="url">
- Used for input fields that should contain a URL address.
- The URL field is automatically validated when submitted.

48
HTML5 new form inputs
<input type="week">
- Allows the user to select a week and year.
- A date picker shows up in the input field.

49
Data lists
- The <datalist> tag is used to provide an "autocomplete” feature
on <input> element.

<input name="country" list="country_name">


<datalist id="country_name">
<option value="Albania">
<option value="Algeria">
<option value="Austria">
</datalist>

50
Placeholder attribute
- Specifies a hint displayed in the input field before the user enters
a value.
- Works only with these input types: text, search, url, tel, email,
and password.

<input type="text" placeholder="Please enter your


name">

51
Autofocus attribute
- it specifies that an <input> element should automatically get
focus when the page loads.

<input type="text" autofocus>

52
HTML5 new form inputs
- HTML Button Tag <button>........</button>
- The <button> tag is used to create a clickable button within HTML
form on your webpage.
- We can put content like text or image within the
<button>........</button> tag.

<button type="button">Hello</button>

53
Exercise
- Create the following form

54
Exercise
- Create the following form

55
Exercise
- Create the following form

56

You might also like