Scribd
Upload
8 views

chapter 2 (web design and programming)

Chapter Two covers the fundamentals of HTML, including its definition, structure, and essential tags. It explains the roles of client-side and server-side scripting, the importance of HTML elements, and how to format content using various tags. Additionally, it provides examples of HTML documents and discusses multimedia integration, links, and lists.

Uploaded by

firaolfro
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
8 views

chapter 2 (web design and programming)

Chapter Two covers the fundamentals of HTML, including its definition, structure, and essential tags. It explains the roles of client-side and server-side scripting, the importance of HTML elements, and how to format content using various tags. Additionally, it provides examples of HTML documents and discusses multimedia integration, links, and lists.

Uploaded by

firaolfro
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/ 74

Chapter Two

HTML

By: Behayilu M.
Faculty of Computing and Software Eng.,
Arba Minch Institute of Technology(AMiT),
Arba Minch University
Web design and Programming 1
Contents

Web design and Programming 2


Getting started with Web application development

• This is introducing you to the practicalities of web application development.


o Installing basic software
 A text editor – Sublime, vs-code, Notepad++ …
 Client software (browser) - Chrome, Firefox, Safari…
 Server-side stack software - WAMP, XAMPP, LAMP…
o What will your website look like?
 plan out the application content and design
o Dealing with files
 set up a sensible file structure
Web design and Programming 3
… cont’d

o Client-side scripting o Server-side scripting


 Client-side or Front-end development  Server-side or Back end development

manages everything that users visually refers to the server side of an

see first in their browser or application. application and everything that

Front end developers are responsible communicates between the database

for the look and feel of a site. and the browser.


 Back-end languages such as Java,
 Front end languages include HTML,
PHP, Ruby on Rails, Python,
CSS, and JavaScript.
and .NET
Web design and Programming 4
What is HTML?

• HTML stands for Hyper Text Markup Language

• HTML is the standard markup language for creating Web pages

• HTML describes the structure of a Web page

• HTML consists of a series of elements

• HTML elements tell the browser how to display the content

• HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.
Web design and Programming 5
Hypertext Markup Language (HTML)

• HTML documents are simply text documents with a specific form

• Documents comprised of content and markup tags


• Content: actual information being conveyed

• Markup tags: tell the Web browser how to display the page

• An HTML file must have an .htm or .html file extension

• An HTML file can be created using a simple text editor.

Web design and Programming 6


Our First Example
• If you are running Windows, start Notepad
• Type in the following save as .html extension:

• Open this file using a browser, and you will


see…

7
HTML Tags
• Tags are one of the most important part in an HTML Document.

• HTML uses some predefined tags which tells the browser about content display property, that is
how to display a particular given content.
• For Example, to create a paragraph, one must use the paragraph tags(<p> </p>) and to insert an image one must
use the img tags(<img />).

• There are generally two types of tags in HTML:


• Paired Tags/container : These tags come in pairs. That is they have both opening(< >) and closing(</ >) tags.
E.g. <h1> Hello world </h1>
• Empty Tags/standalone: These tags do not require to be closed. E.g. <br/>

Web design and Programming 8


… cont’d
• HTML tags are keywords (tag names) surrounded by angle brackets:
Closing tag
<tagname> content </tagname>
• The text between the start and end tags is the element content
• Not case-sensitive <b> Software Engineering </b>
• Follow the latest web standards:
• Use lowercase tags Opening tag
Content

• The end tag is written like the start tag, but with a slash before the tag name

The start tag is often called the opening tag. The end
tag is often called the Webclosing tag.
design and Programming 9
Tag Attributes
• Tags can have attributes that provide additional information to an
HTML element
• Attributes specify properties and behavior
• Attributes always come in name/value pairs like: name=“value”
• Attributes are always specified in the start tag
• Attribute values should always be enclosed in quotes. Double quotes are most
common.
• Also case-insensitive: however, lowercase is recommended
• Some elements have obligatory attributes

10
Some Simple Tags – Example
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Tags Demo</title>
</head>
<body>
<a href="http://www.amu.edu.et/" title=“amu site">Go to AMU
website.</a>
<br />
<img src="logo.gif" alt="logo" />
<br />
<strong>Bold</strong> and <em>emphasized or italic</em> text.
</body>
</html>
11
HTML Document Structure
• All HTML documents must start with a document type declaration: <!DOCTYPE html>.
• 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

Web design and Programming 12


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

13
<head> Section: <title> tag
• Title should be placed between <head> and </head> tags
<title>Arba minch University Website</title>

• Used to specify a title in the window title bar


• Search engines and people rely on titles
14
<head> Section: <meta>
• Meta tags additionally describe the content contained within the page

15
<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

16
The <script> Tag – Example
<!DOCTYPE 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>
17 </body>
</html>
<head> Section: <style>
• The <style> element embeds formatting information (CSS styles) into
an HTML page
<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>
18 </body>
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://amu.edu.et.com/">Arba
Minch University</a>

<!–- Show the news table -->


<table class="newstable">
19 ...
<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>

20
Headings and Paragraphs – Example
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
headings.html <h3>Sub heading 3</h3>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>

<div style="background:skyblue">
This is a div</div>
</body>
</html>
21
Text Formatting
• Text formatting tags modify the text between the opening tag and the closing
tag
• Ex. <b>Hello</b> makes “Hello” bold
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through

22
Text Formatting – Example
<!DOCTYPE html >
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br />
Next line.</p>
</body>
</html>

23
HTML styles
• The HTML style attribute is used to add styles to an element, such as
color, font, size, and more.
• <h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Use the style attribute for styling


HTML elements
 background-color for
background color
 color for text colors
 font-family for text fonts
 font-size for text sizes
 text-align for text alignment

24
HTML colors

• HTML colors are specified with predefined color names, or with RGB,
HEX, HSL, RGBA, or HSLA values.
• <h1 style="color:Tomato;">Hello World</h1>

25
HTML links - hyperlinks

• Links are found in nearly all web pages.


• Links allow users to click their way from page to page.
Syntax: <a href="url">link text</a>
• The target Attribute
self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab

26
HTML links

• An HTML link is displayed in a different color depending on whether it has been visited, is unvisited, or

is active.
• HTML Link Colors
By default, a link will appear like this (in all browsers):
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
HTML Links - Create Bookmarks
• HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page.
• Bookmarks can be useful if a web page is very long.
To create a bookmark - first create the bookmark, then add a link to it.
When the link is clicked, the page will scroll down or up to the location with the bookmark.
• <h2 id="C4">Chapter 4</h2>
• <a href="#C4">Jump to Chapter 4</a>
27
HTML images

• The HTML <img> tag is used to embed an image in a web page.


The <img> tag is empty, it contains attributes only, and does not have a closing
tag.
• The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Syntax: <img src="url" alt="alternatetext">
Image Size - Width and Height

<img src=“ronaldo.jpg" alt=“ronaldo


image" style="width:500px;height:600px;">
28
HTML Lists
• HTML lists are used to present list of information in well formed and
semantic way.
• There are three different types of list in HTML.
• Ordered list —to create a list of related items, in a specific order.
• Unordered list — to create a list of related items, in no particular order.
• Description list —to create a list of terms and their descriptions.

29
Ordered Lists: <ol> Tag
<ol type="1">
Create an Ordered List using <ol></ol>:
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

type="1" type="A" type="a" type="I" type="i"

1. Apple A. Apple a. Apple I. Apple i. Apple


2. Orange B. Orange b. Orange II. Orange ii. Orange
3. Grapefruit C. Grapefruit c. Grapefruit III. Grapefruit iii. Grapefruit

30
Unordered Lists: <ul> Tag
<ul type="disk">
Create an Unordered List using <ul></ul>: <li> Apple </li>
<li> Orange </li>
<li> Grapefruit </li>
</ul>

type="disk" type="circle" type="square"

• Apple o Apple  Apple


• Orange o Orange  Orange
• Grapefruit o Grapefruit  Grapefruit

31
Definition lists: <dl> tag
Create definition lists using <dl>

<dl>
• Renders without bullets <dt>HTML</dt>
• <dl> defines a description list <dd>A markup language …</dd>
<dt>CSS</dt>
• It encloses a group of terms <dd>Language used to …</dd>
• <dt> defines a description term </dl>
• <dd> defines a description details
• Definition is indented

HTML
A markup language …
CSS
Language used to ..
32
HTML Special Characters
• Some characters are reserved in HTML.
• A character entity looks like this: &entity_name; or &#entity_number;
• To display a less than sign (<) we must write: &lt; or &#60;
• An entity name is easy to remember.

33
Special Chars – Example
<p>[&gt;&gt;&nbsp;&nbsp;Welcome &nbsp;&nbsp;&lt;&lt;]</p>
<p>&#9658;I have following cards: A&#9827;, K&#9830; and 9&#9829;.</p>
<p>&#9658;I prefer hard rock &#9835; music &#9835;</p>
<p>&copy; 2006 by Svetlin Nakov &amp; his team</p>
<p>Telerik Academy &trade;</p>

34
HTML Multimedia

• Multimedia on the web is sound, music, videos, movies, and animations.


HTML Video
• The HTML <video> element is used to show a video on a web page.
• To start a video automatically, use the autoplay attribute: muted
Note: Only MP4, WebM, and Ogg video are supported by the HTML standard.

35
HTML Multimedia

• HTML Audio
• The HTML <audio> element is used to play an audio file on a web page.
• <audio controls autoplay muted>
Note: Only MP3, WAV, and Ogg audio are supported by the HTML standard.
• Add muted after autoplay to let your audio file start playing automatically (but
muted):

36
HTML YouTube Videos

• Converting videos to different formats can be difficult and time-consuming.


• To play your video on a web page, do the following:
Upload the video to YouTube
Take a note of the video id
Define an <iframe> element in your web page
Let the src attribute point to the video URL
Use the width and height attributes to specify the dimension of the player
Add any other parameters to the URL (see below)
 Add mute=1 after autoplay=1 to let your video start playing automatically (but muted).

<iframe width="420" height="315“ src="https://www.youtube.com/embed/tgbNymZ7vqY">


</iframe>
37
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
• Most HTML elements are inline, e.g. <a>

38
The <div> and <span>Tag
• <div> is Block style element
• It creates logical divisions within a page
• Used with CSS
• <span> is Inline style element
• Useful for modifying a specific portion of text
• Don't create a separate area in the document
• Very useful with CSS
• Example:

<div style="font-size:24px; color:red">DIV example</div>


<p>This one is <span style="color:red; font-weight:bold">only a
test</span>.</p>
39
Working with HTML Tables
• Tables represent tabular data
• A table consists of one or several rows
• Each row has one or more columns
• Tables comprised of several core tags:
• <table></table>: begin / end the table
• <tr></tr>: create a table row
• <td></td>: create tabular data (cell)
• <th></th>: Defines a header cell in a table
• Tables should not be used for layout. Use CSS floats and positioning styles
instead
40
… cont’d
Table Cells
• Each table cell is defined by a <td> and a </td> tag.
• td stands for table data.
• Everything between <td> and </td> are the content of the table cell.
Table Rows
• Each table row starts with a <tr> and end with a </tr> tag.
• tr stands for table row.

41
Simple HTML Tables – Example
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<table style="width:60%">
<tr>
<td>Name</td>
<td>Age</td>
<td>Sex</td>

</tr>
<tr>
<td>Abebe</td>
<td>23</td>
<td>M</td>
</tr>
<tr>
<td>Meron</td>
<td>21</td>
<td>F</td>
</tr>
</table>
</body>
42
</html>
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)

43
Complete HTML Table: Example
<table> columns
• <colgroup>
<col style="width:100px" /><col />
</colgroup> header
<thead> th
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead> footer
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot> Last comes the body (data)
<tbody>
<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>
44
</table>
Complete HTML Table: Example (2)
<table> By default, header text is
<colgroup> bold and centered.
<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>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr> Although the footer is before the data
</tbody> in the code, it is displayed last
</table>
45
Nested Tables
• Table data “cells” (<td>) can contain nested tables (tables within tables):
<table>
<tr>
<td>Contact:</td>
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
46
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
47
Cell Spacing and Padding – Example
<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>

48
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


49
the cell occupies cell occupies
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>

50
Column and Row Span – Example (2)
<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> Cell[1,1
Cell[2,1]
</table> ]
Cell[1,2 Cell[3,2
] Cell[2,2 ]
Cell[1,3 ] Cell[2,3
51
] ]
<!DOCTYPE html>
<html>
Table caption
<head>
<tr>
<style>
<td>January</td>
table, th, td {
<td>$100</td>
border: 1px solid black;
</tr>
border-collapse: collapse;
<tr>
}
<td>February</td>
th, td {
<td>$50</td>
padding: 5px;
</tr>
text-align: left;
</table>
}
</body>
</style>
</html>
</head>
<body>
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
52
Exercise:

Web design and Programming 53


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
• Example: the form data should be sent –
via GET or POST request

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


action="path/to/some-script.php">
...
</form>
The "action" attribute tells where
the form data should be sent
54
Form Fields
• Single-line text input fields:
<input type="text" name="FirstName" value="This is a text field" />

• Multi-line textarea fields:


<textarea name="Comments">This is a multi-line text
field</textarea>

• Hidden fields contain data not shown to the user:


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

• Often used by JavaScript code


55
Fieldsets
• Fieldsets are used to enclose a group of related form fields:
<form method="post" action="form.aspx">
<fieldset>
<legend>Client Details</legend>
<input type="text" id="Name" />
<input type="text" id="Phone" />
</fieldset>
<fieldset>
<legend>Order Details</legend>
<input type="text" id="Quantity" />
<textarea cols="40" rows="10"
id="Remarks"></textarea>
</fieldset>
</form>

• The <legend> is the fieldset's title.


56
Form Input Controls
• 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="city" value="Lom"


/>
<input type="radio" name="city"
value="Ruse" />
57
Other Form Controls
• Dropdown menus:
<select name="gender">
<option value="Value 1"
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>

• Submit button:
<input type="submit" name="submitBtn"
value="Apply Now" />

58
Other Form Controls (2)
• Reset button – brings the form to its initial state

<input type="reset" name="resetBtn"


value="Reset the form" />
• Image button – acts like submit but image is displayed and click
coordinates are sent

<input type="image" src="submit.gif"


name="submitBtn" alt="Submit" />

• Ordinary button – used for JavaScript, no default action


<input type="button" value="click me" />
59
Other Form Controls (3)
• Password input – a text field which masks the entered text with * signs

<input type="password" name="pass" />

• 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>
60 <option value="Value
Other Form Controls (4)
• File input – a field used for uploading files

<input type="file" name="photo" />

• When used, it requires the form element to have a specific attribute:

<form enctype="multipart/form-data">
...
<input type="file" name="photo" />
...
</form>

61
Labels
• 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.

62
HTML Forms – Example
<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" />
63
HTML Forms – Example (2)
<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>
64 <input type="submit" name="submit" value="Send
Form" />
HTML Forms – Example (3)

65
HTML5: New form elements

66
Input-datalist Elements and autocomplete Attribute

67
Output
• Once you fill a data in the text box ..html 5 can recover the previous
input. *we use a datalist element to
obtain the user’s birth month.

68
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.

69
HTML Frames – Demo
frames.ht
<html> ml
<head><title>Frames Example</title></head>
<frameset cols="180px,*,150px">
<frame src="left.html" />
<frame src="middle.html" />
<frame src="right.html" />
</frameset>
</html>

70
Inline Frames: <iframe>
• Inline frames provide a way to show one website inside another
website:
iframe-
demo.html
<iframe name="iframeGoogle" width="600" height="400"
src="http://www.google.com" frameborder="yes"
scrolling="yes"></iframe>

71
Table:html structure elements

72
Table:html structure elements

73
HTML5: Semantic elements example
<header>

<nav>

<aside>

<section>

<footer>

74

You might also like