Scribd
Upload
2 views

Chapter Two_HTML-3

Uploaded by

tommili867
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Chapter Two_HTML-3

Uploaded by

tommili867
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 70

Chapter Two

HTML

1
Introduction
What is HTML?
• HTML is the standard markup language for creating Web
pages.
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of Web pages using markup
• HTML elements are the building blocks of HTML pages
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading",
"paragraph", "table", and so on
• Browsers do not display the HTML tags, but use them to
render the content of the page
2
Introduction
A Simple HTML Document (Example)
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
3
Introduction
Example Explained
• The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML
page
• The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a
container for all the visible contents, such as headings, paragraphs,
images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
4
Introduction
What is an HTML Element?
• An HTML element is defined by a start tag, some content, and an
end tag:
<tagname>Content goes here... </tagname>
• The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>

Start tag Element content End tag


<h1> My First Heading </h1>
<p> My first </p>
paragraph.
<br> none none
5
Introduction
HTML Documents
• All HTML documents must start with a document type declaration: <!
DOCTYPE html>.
• The HTML document itself begins with <html> and ends with </html>.
• The visible part of the HTML document is
between <body> and </body>.
• Example
<!DOCTYPE html>
<html>
<head> <title> Webpage 1</title></head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html> 6
Introduction
HTML Tags
• HTML tags are element names surrounded by angle
brackets:
 <tagname>content goes here...</tagname>
 HTML tags normally come in pairs like <p> and </p>
 The first tag in a pair is the start tag, the second tag is
the end tag
 The end tag is written like the start tag, but with
a forward slash inserted before the tag name
• Tip: The start tag is also called the opening tag, and the end
tag the closing tag.
7
Introduction
HTML Page Structure
• Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
• Note: Only the content inside the <body> section (the white area
above) is displayed in a browser
8
Introduction
HTML Document Structure
• Entire document enclosed within <html> and </html> tags
• Two subparts:
– Head
• Enclosed within <head> and </head>
• Within the head, more tags can be used to specify title of the page,
meta-information, etc.
– Body
• Enclosed within <body> and </body>
• Within the body, content is to be displayed
• Other tags can be embedded in the body

9
Introduction
The <head> Section
• Contains information that doesn’t show directly on the
viewable page
• Starts after the <!doctype> declaration
• Begins with <head> and ends with </head>
• Contains mandatory single <title> tag
• Can contain some other tags, e.g.
– <meta>
– <script>
– <style>
– <!–- comments -->

10
<head> Section: <title> tag
• Title should be placed between <head> and
</head> tags
<title>Telerik Academy–Winter Season
2009/2010 </title>

• Used to specify a title in the window title bar


• Search engines and people rely on titles
11
<head> Section: <meta>
• Meta tags additionally describe the content
contained within the page
<meta name="description" content="HTML
tutorial" />

<meta name="keywords" content="html, web


design, styles" />

<meta name="author" content="Chris


Brown" />

<meta charset="utf-8">

12
<head> Section: <script>
• The <script> element is used to embed
scripts into an HTML document
– Script are executed in the client's Web browser
– Scripts can live in the <head> and in the <body>
sections
• Supported client-side scripting languages:
– JavaScript (it is not Java!)
– VBScript
– JScript
13
The <script> Tag – Example
<!DOCTYPE HTML> scripts-example.html
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function sayHello() {
document.write("<p>Hello
World!<\/p>");
}
</script>
</head>
<body>
<script type=
"text/javascript">
sayHello();
</script>
</body>
</html> 14
<head> Section: <style>
• The <style> element embeds formatting
information (CSS styles) into an HTML page
<html> style-example.html
<head>
<style type="text/css">
p { font-size: 12pt; line-height: 12pt; }
p:first-letter { font-size: 200%; }
span { text-transform: uppercase; }
</style>
</head>
<body>
<p>Styles demo.<br />
<span>Test uppercase</span>.
</p>
</body>
</html> 15
Comments: <!-- --> Tag
• Comments can exist anywhere between the
<html></html> tags
• Comments start with <!-- and end with -->
<!–- AMU Logo (a JPG file) -->
<img src="logo.jpg" alt=“amu Logo">
<!–- Hyperlink to the web site -->
<a href="http://www.amu.edu.et/">Arba
Minch University</a>
<!–- Show the news table -->
<table class="newstable">
...
16
<body> Section: Introduction
• The <body> section describes the viewable
portion of the page
• Starts after the <head> </head> section
• Begins with <body> and ends with </body>
<html>
<head><title>Test page</title></head>
<body>
<!-- This is the Web page body -->
</body>
</html>

17
Introduction
The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration represents the
document type, and helps browsers to display web
pages correctly.
• It must only appear once, at the top of the page
(before any HTML tags).
• The <!DOCTYPE> declaration is not case sensitive.
• The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>

18
HTML Attributes
• Attributes provide additional information about
HTML elements.
• All HTML elements can have attributes
• Attributes provide additional Information about an
element.
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs
like: name="value“
• Example: <p style=“color:Yellow”;>
<body bgcolor=“blue”>
19
HTML Attributes
The href Attribute
• HTML links are defined with the <a> tag. The link address is
specified in the href attribute:
• Example
<a href="https://www.amu.edu.et">This is a link</a>
The src Attribute
• HTML images are defined with the <img> tag.
• The filename of the image source is specified in
the src attribute:
• Example
<img src=“amu_logo.jpg">
20
HTML Attributes
The width and height Attributes
• Images in HTML have a set of size attributes, which specifies the width and
height of the image:
• Example
<img src="img_girl.jpg" width="500" height="600">
• The image size is specified in pixels: width="500" means 500 pixels wide.
The title Attribute
• Here, a title attribute is added to the <p> element. The value of the title
attribute will be displayed as a tooltip when you mouse over the
paragraph:
• Example
<p title="I'm a tooltip">
This is a paragraph.
</p>
21
HTML Attributes
The lang Attribute
• The language of the document can be declared in the <html> tag.
• The language is declared with the lang attribute.
• Declaring a language is important for accessibility applications (screen readers)
and search engines:
<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>
• The first two letters specify the language (en). If there is a dialect, use two
more letters (US)
22
HTML Attributes
The HTML Style Attribute
• Setting the style of an HTML element, can be done with
the style attribute.
• The HTML style attribute has the following syntax:
<tagname style="property:value;">
• The property is a CSS property. The value is a CSS value.
Example:
– <body style="background-color:blue;">
– <h1 style="color:blue;">This is a heading</h1>
– <h1 style="font-family:arial;">This is a heading</h1>
– <h1 style="font-size:300%;">This is a heading</h1>
– <h1 style="text-align:center;">Centered Heading</h1>
23
HTML Attributes
We Suggest: Use Lowercase Attributes
• The HTML5 standard does not require lowercase
attribute names.
• The title attribute can be written with uppercase or
lowercase like title or TITLE.
• W3C recommends lowercase in HTML,
and demands lowercase for stricter document types
like XHTML.

24
HTML Attributes
• Below is an alphabetical list of some attributes often
used in HTML, which you will learn more about in this
tutorial:
Attribute Description

alt Specifies an alternative text for an image, when the image


cannot be displayed

disabled Specifies that an input element should be disabled

href Specifies the URL (web address) for a link

id Specifies a unique id for an element

src Specifies the URL (web address) for an image

style Specifies an inline CSS style for an element

title Specifies extra information about an element (displayed as a


tool tip) 25
Formatting Text as Paragraphs
• The <p> tag is used to create paragraph text in
HTML.
– It has both the start and end tag:
<p> text to be presented as paragraph … </p>
– It is used inside the body section of the html
document
– A given html document may contain one or more
of the paragraph tags

26
Formatting Text as Paragraphs …

• The paragraph element may be preceded or


followed by heading elements
– Heading elements are used to create heading
texts
– six heading formats defined in HTML: <h1> up to
<h6>
 <h1> the largest font size
 <h6> the smallest font size
– Format
 <h1>…</h1>
27
HTML Formatting Elements
• HTML also defines special elements for defining text with a
special meaning.
• HTML uses elements like <b> and <i> for formatting output,
like bold or italic text.
• Formatting elements were designed to display special types of text:
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text 28
HTML Lists
Unordered HTML List
• An unordered list starts with the <ul> tag. Each list
item starts with the <li> tag.
• Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
•  Apple for
Attribute values • Apple
type o Apple
are: disc, circle
or square
 Orange • Orange o Orange
 Pear • Pear o Pear 29
HTML Lists
Ordered HTML List
• An ordered list starts with the <ol> tag. Each list item
starts with the <li> tag.
• The list items will be marked with numbers by default:
• Start attribute define the starting position. Example:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
1. • Coffee
Attribute
A. values
Coffee for type are 1, A, I.a, I,Coffee
a. Coffee or i i. Coffee
2. Tea B. Tea b. Tea II. Tea ii. Tea
30
3. Milk C. Milk c. Milk III. Milk iii. Milk
HTML Lists
HTML 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:
• Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
31
HTML Lists
Nested HTML Lists
• List can be nested (lists inside lists):
• Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
32
HTML Images
• Images can improve the design and the appearance of a web
page.
• Example
<img src="pic_trulli.jpg" alt="Italian Trulli">
<img src="img_girl.jpg" alt="Girl in a jacket">
<img src="img_chania.jpg" alt="Flowers in Chania">
HTML Images Syntax
• In HTML, images are defined with the <img> tag.
• The <img> tag is empty, it contains attributes only, and does not
have a closing tag.
• The src attribute specifies the URL (web address) of the image:
<img src="url">
33
HTML Images …

The alt Attribute


• The alt attribute provides an alternate text for an image,
if the user for some reason cannot view it (because of
slow connection, an error in the src attribute, or if the
user uses a screen reader).
• The value of the alt attribute should describe the image:
• Example
<img src=“Logo.jpg" alt=“AMU Logo">
• If a browser cannot find an image, it will display the
value of the alt attribute
34
HTML Images …
Image Size - Width and Height
• You can use the style attribute to specify the width and height of
an image.
• Example
<img src="img_girl.jpg" alt="Girl in a jacket “
style="width:500px;height:600px;">
• Alternatively, you can use the width and height attributes:
• Example
<img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">
• The width and height attributes always defines the width and
height of the image in pixels.
35
HTML Tables
Defining an HTML Table
• An HTML table is defined with <table >
the <table> tag. <tr>
• Each table row is defined with <th>Firstname</th>
<th>Lastname</th>
the <tr> tag.
<th>Age</th>
• A table header is defined with </tr>
the <th> tag. By default, table <tr>
headings are bold and centered. <td>Jill</td>
• A table data/cell is defined with <td>Smith</td>
the <td> tag. <td>50</td>
• To add a caption to a table, use </tr>
</table>
the <caption> tag 36
HTML Tables …
Cell Spacing and Padding
• Tables have two important attributes:
 cellspacing  cellpadding

cell cell cell cell

cell cell cell cell

 Defines the  Defines the empty


empty space space around the cell
between cells content
37
HTML Tables …
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>

38
HTML Tables …
Column and Row Span
• Table cells have two important attributes:
 colspan  rowspan
colspan="1" colspan="1" rowspan="2" rowspan="1"

cell[1,1] cell[1,2] cell[1,2]


cell[1,1]
cell[2,1] cell[2,1]

colspan="2" rowspan="1"

 Defines how  Defines how


many columns many rows the
the cell occupies cell occupies 39
HTML Tables …
Column and Row Span – Example
<table cellspacing="0">
<tr class="1">
<td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td> </tr>
<tr class=“2">
<td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td> </tr>
<tr class=“3">
<td>Cell[1,3]</td>
<td>Cell[2,3]</td> </tr>
</table>

40
Complete HTML Tables
• Table rows split into three semantic sections:
header, body and footer
– <thead> denotes table header and contains <th>
elements, instead of <td> elements
– <tbody> denotes collection of table rows that
contain the very data
– <tfoot> denotes table footer but comes BEFORE
the <tbody> tag
– <colgroup> and <col> define columns (most
often used to set column widths)
41
Complete HTML Table: Example
<table>
<colgroup>
columns
<col style="width:100px" /><col />
</colgroup> th
<thead>
header
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
footer
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
Last comes the body (data)
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>
</table>
42
Complete HTML Table:
By default, header text is
bold andExample
centered.(2)
<table> table-full.html
<colgroup>
<col style="width:200px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
<tr><td>CellAlthough the footer is1.2</td></tr>
1.1</td><td>Cell
<tr><td>Cellbefore the data in the2.2</td></tr>
2.1</td><td>Cell
</tbody> code, it is displayed last
</table> 43
HTML Links - Hyperlinks

• HTML links are hyperlinks.


• When you move the mouse over a link, the mouse
arrow will turn into a little hand.
HTML Links - Syntax
• In HTML, links are defined with the <a> tag:
<a href="url"> link text </a>
• <a> tag defines a hyperlink or a named anchor
• Example
<a href="https://www.amu.edu.et">Visit AMU</a>

44
Linking Documents together
Anchor <a> used for navigation or linking html
documents together
Attributes:
 href=“url”
 target=“target” { _self, _blank }
 name=“anchor name”
• Examples:
<a href=“home.htm”>Go to home</a>
Opens Google on the same tab or window, since _self is
default value of target attribute
<a href=“http://www.google.com” target=“_blank”>Google</a> 45

Linking Documents together
Navigation with named anchors
◦ named anchors
 Used to navigate within named places in an html document
 Format: <a name=“anchor_name”></a>
E.g. <a name=“top”></a>
◦ linking to named anchors
 Format:
 <a href=“#anchor_name”>link text</a> {on the same page}
 <a href=“url#anchor_name”link text</a> {on a different page}
 E.g.
 <a href=“#top”>Back to Top</a> {assuming the example above}
 <a href=“http://www.aau.edu.et/history.htm#establishment”> Establishment
of AAU</a>
46
Example-Linking documents
<html>
<head>
<title>Linking documents</title>
</head>
<body>
<!-- Anchor for navigating inside the page -->
<a name="top"></a>
<h2>Linking Documents</h2>
<!-- Link to a google website -->
<a href="http://www.google.com" target="_blank">Google</a>
<hr>
<img src="f:/entertainment/ch.jpg" width="600">
<hr>
<!-- Link to the top anchor -->
<a href="#top">Back to top</a>
</body>
</html>
47
HTML <marquee> Tag
• The <marquee> is a non-standard HTML tag which was
used to create a scrolling text or an image. It was used to
make the text/image scroll horizontally across or
vertically down the web page.
• The <marquee> element is a non-standard HTML
element. If you use this element, your pages or apps
may be broken.
Syntax: <marquee> content </marquee>
• The <marquee> element comes in pairs. It means that
the tag has opening (<marquee>) and closing
(</marquee>) elements.
48
HTML <marquee> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<marquee>This is a text to be scroll</marquee>
</body>
</html>
49
HTML <marquee> Tag
Attribute Value Description

behavior Scroll, slide, alternate Defines the scrolling type.

rgb(x,x,x) , #xxxxxx
bgcolor Is used to give a background color.
colorname

Sets the direction for the scrolling


direction Up, down, left, right
content.

height Pixels, % Defines the marquee's height.


Defines how many times the content
loop number will scroll. If we don't define this, the
content will scroll forever.
width Pixels, % Defines the marquee's width.

50
Block and Inline Elements
• Block elements: add a line break before and after
them
– <div> is a block element
– Other block elements are <table>, <hr>, headings,
lists, <p> and etc.
• Inline elements don’t break the text before and
after them
– <span> is an inline element
– Other inline elements are <a>, <b>, <u>, <i>,
<input>, <button>, etc.
51
HTML Forms
• Forms are the primary method for gathering
data from site visitors
• Create a form block with
<form></form> The “method" attribute tells how
the form data should be sent – via
• Example: GET or POST request

<form name="myForm" method="post"


action="path/to/some-script.php”
enctype="multipart/form-data”>
...
</form> The "action" attribute tells where
Specify how the browser encodesthe
the form data should be sent
52
HTML Forms …
• Single-line text input fields:
<input type="text" name="FirstName"
value="This is a text field" />

• Password input – a text field which masks the entered text with *
signs
<input type="password" name="pass" />

• Hidden fields contain data not shown to the user:


<input type="hidden" name="Account"
value="This is a hidden text field" />

– Often used by JavaScript code


53
HTML Forms …

• Reset button – brings the form to its initial state


<input type="reset" name="resetBtn"
value="Reset the form" />
• Submit button:
<input type="submit" name=“Rsubmit"
value="Apply Now" />
• Ordinary button – used for JavaScript, no default
action
<input type="button" value="click me" />

54
HTML Forms …
Image button – acts like submit but image is
displayed and click coordinates are sent
<input type="image" name="imagebutton"
src="11.jpg" height="50" width="50"/>
• File input – a field used for uploading files
<input type="file" name="photo" />

<input type="file" name="fileupload"


accept="image/*"/>
• Multi-line textarea fields:
<textarea name="Comments">This is a multi-
line text field</textarea> 55
HTML Forms …

• Checkboxes:
<input type="checkbox" name="fruit"
value="apple”/>

• Radio buttons:
<input type="radio" name="title"
value="Mr." />
• Radio buttons can be grouped, allowing only one
to be selected from a group:
<input type="radio" name=“Sex"
value=“Male" />
<input type="radio" name=“Sex" value=“Female"
/> 56
HTML Forms …

• Dropdown menus:
<select name=“Degree Type">
<option value="Value 1"
selected="selected">MA</option>
<option value="Value 2">MSc</option>
<option value="Value 3">BED</option>
</select>
• Multiple select field – displays the list of items in
multiple lines, instead of one.
<select name="products" multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value 3">speakers</option>
</select> 57
HTML Forms …

Label
• Form labels are used to associate an explanatory
text to a form field using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />

• Clicking on a label focuses its associated field


(checkboxes are toggled, radio buttons are checked)
• Labels are both a usability and accessibility feature
and are required in order to pass accessibility
validation.
58
HTML Forms …
• Fieldsets are used to enclose a group of related
form fields:
<form method="post" action="form.aspx">
<fieldset>
<legend>Client Details</legend>
Full Name:<input type="text"
id="Name" />
Phone: <input type="text" id="Phone" />
</fieldset>
<fieldset>
<legend>Order Details</legend>
Quantity:<input type="text"
id="Quantity" />
Description: <textarea cols="40"
rows="10"
id="Remarks"></textarea> 59
</fieldset>
form.html HTML Forms …
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" /> 60
HTML Forms …
form.html (continued)
<br />
Gender:
<input name="gender" type="radio" id="gm"
value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf"
value="f" />
<label for="gf">Female</label>
<br />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND
CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send
Form" /> 61
<input type="reset" value="Clear Form" />
HTML Forms …
form.html (continued)

62
HTML 5 form
• Use auto complete input elements that help users re-
enter text that they’ve previously entered in a form.
• Use self-validating input elements.
• Specify temporary placeholder text in various input
elements
• Specify an input element in a form as the one that
should receive the focus by default.
• Use a data list to specify a list of values that can be
entered in an input element and to auto complete
entries as the user types.
63
HTML5: New form elements

64
HTML Frames
• Frames provide a way to show multiple HTML
documents in a single Web page
• The page can be split into separate views (frames)
horizontally and vertically
• Frames were popular in the early ages of HTML
development, but now their usage is rejected
• Frames are not supported by all user agents
(browsers, search engines, etc.)
– A <noframes> element is used to provide content for
non-compatible agents.

65
HTML Frames …

<html>
<head><title>Frames Example</title></head>
<frameset cols=“*,*,*">
<frame src="left.html" />
<frame src="middle.html" />
<frame src="right.html" />
</frameset>
</html>

 Note the target attribute applied to the <a> elements in


the left frame.
66
Inline Frames: <iframe>

• Inline frames provide a way to show one


website inside another website:

<iframe name="iframeGoogle" width="600"


height="400" src="http://www.google.com"
frameborder="yes" scrolling="yes"></iframe>

67
HTML5-Page Structure
HTML5 Semantic Elements
• <header> - Defines a header for a document or a section
• <nav> - Defines a set of navigation links
• <section> - Defines a section in a document
• <article> - Defines an independent, self-contained
content
• <aside> - Defines content aside from the content (like a
sidebar)
• <footer> - Defines a footer for a document or a section

68
HTML5-Page Structure …
HTML5 Semantic Elements
• <details> - Defines
additional details that
the user can open and
close on demand
• <summary> - Defines a
heading for the
<details> element

69
HTML5-Page Structure …

• There are four different techniques to create


multicolumn layouts:
 CSS framework
CSS float property
CSS flex box
CSS grid

70

You might also like