Sulaimani Polyteachnic University

College Of Informatics
Department of Information Technology

2022-2023

Lecture Three
 Outline Of Lecture …...................................................Three
✓ Long quotations
✓ Short quotations
✓ Element formatting
✓ Meta tag
✓ Comment
✓ Link
✓ Relative
✓ Absolute
✓ Email
✓ Image
✓ Multimedia
✓ Audio
✓ video

1
Long quotation and short quotation?
2

If you have a long quotation, a testimonial, or a section of copy from

another source, you should mark it up as a blockquote element.
It is recommended that content within blockquote elements be contained
in other elements, such as paragraphs, headings, or lists.
Preserve Formatting 3

It is a unique element in that it is displayed exactly as it is typed —

including all the carriage returns and multiple character spaces.
syntax: <pre> ….</pre>
Example:
The Inline Element Roundup 4

❑ Emphasized text
Use the em element to indicate which part of a sentence should be
stressed or emphasized.
Syntax: <em>...</em>

❑ Important text
Syntax: <strong>...</strong>
Bold, Italic and Underline text 5

❑ <b>...</b>element, text displayed in bold.

❑ <i>...</i> element, text displayed in italicized
❑ <u>...</u>element, text displayed with underline
Stick, Superscript and Subscript text
6

❑ <s>...</s> or <strike>…</strike> is displayed with strikethrough

❑ ^... element is written in superscript
❑ _... element is written in subscript
Mark, abbreviate and Acronym 7

❑ Marking element: <mark>...</mark>

❑ Abbreviate element: <abbr> …</abbr>

Program code elements 8

A number of inline elements are used for describing the parts of

technical documents, such as code (code), variables (var), and
program samples (samp)

<code>...</code> Code
<var>...</var> Variable
<samp>...</samp> Program sample
<kbd> …</kbd> computer keyboard
Special Characters 9
Meta tag 10

❑ Deposited in the head section of an HTML document.

❑ Meta tags are used to indicate coded information and specify

metadata.

❑ They don’t appear on the actual website.

❑ Instead user agents like browsers or web crawlers can read meta
tags.
The function of a meta element is to convey additional information
to a website, which facilitates the analysis of HTML files and makes
maintaining file contents easier.
Usage for Different Meta Tags
11

❑ Descriptions: The most commonly used meta tag.

❑ In cases of empty descriptions (or non-existent ones), search engines will

generate a description from the content of the page.
❑ You can also set the author of a page using meta tags.

❑ The charset attribute is used to specify the character encoding of your content.
An HTML page can have only a single charset. For most web pages, you shoul
d use the UTF-8 character encoding.
Usage for Different Meta Tags
12

❑ Substituting HTTP Headers: meta tags can be used to perform

the task of HTTP headers like redirection and refresh.

❑ The value of the content attribute refers to the time interval in

seconds before the refresh is performed.
❑ The URL might be kept the same or different depending on whether
you want to refresh the page or redirect to a new one.
❑ You could also leave the URL empty to refresh the current page.
The Viewport in HTML5 13

<meta name="viewport“ content=

"width=device-width, initial-scale=1.0">

A <meta> viewport element gives the browser instructions on how to

control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the
screen-width of the device

The initial-scale=1.0 part sets the initial zoom level when the page is
first loaded by the browser.
HTML comments
14

❑ HTML comments are placed in between <!-- ... --> tags.

❑ So any content placed with-in <!-- ... --> tags will be treated as
comment and will be completely ignored by the browser.

❑ Comments do not nest which means a comment can not be put

inside another comment.
❑ There are no spaces in the start-of-comment string.
<!-- valid comment -->
< !--invalid comment -- >
The importance of documentation code
15

❑ With comments you can place notifications and

reminders in your HTML

❑ Comments are also great for debugging HTML

HTML Links 17

A link re-directs or leads you from one location ( HTML document)

to another location.

• Links are created by using anchor, <a> tag.

• Links have opining and closing tag <a>….</a>.

• The href attribute used to specifies the direction for a link,

without href attribute a link is basically useless

<a href=“https://www.google.com”> google</a>

17
HTML Links 18

•Title attribute allows you to provide a title/description for a link.

<a href="http://www.w3schools.com/" title="w3school”>
HTML turorial </a>

• The target attribute specifies how the link should be opened

and the values for the target attribute are:
1. _self value: opens the link within the same browser window.
2. _blank value: opens completely in a new browser window

<a href=“www.google.com” target=“_blank”> google </a>

HTML Links 19

Link can be classified as:

 Absolute link

 relative link

 Download link

 E-mail link

• HTML link syntax:

<a href =“ url” > Link text </a>
Absolute link 20

Absolute link is created when the href value is a fully qualified URL,
including:
✓ HTTP:// as the transfer protocol
✓ www.yourdomain.com as a domain name
✓ Page.html as a file name

Example:
<a href=“https://www.google.com"> Google</a>
Or
<a href="https://www.w3.org/standards/semanticweb”>

Semantic web </a>

Relative link 21

A relative link is created when the destination href

value is relative to the location of the current webpage

• It does required the domain name and its extension if it is in the

exact same folder or place
Example:
If we built 2 pages both of them in the one folder and we need t
o create a link from page1.html to page2.html the following c
ode is be used
From page1:
<a href=“page2.html”> link to page 2 </a>
From page2:
<a herf=“page1.html”> link to page1 </a>
Relative link 22

If both pages don’t in the same place or folder we use a file dir
ectory path with the file name and extension
• If we used to go from index.html to jon.html,use following
<a href=“profiles/jon.html>
go to jon</a>

Videopage nick.html

<a href=“profiles/nick.htm”
> Go to nick</a>
Relative link 23

Linking from sub directory to top directory

e.g1: From jon.html to index.html

<a href=“../index.html”> index page </a>

e.g2: from nick.html to Videopage.html

<a href=“../videopage.html”
> videopage</a>
Download link 24

•File links are used for allowing a visitor to download a file.

•These links are set up exactly the same as the absolute and relative
links.
Instead of “pointing” to another page or site, it points to a file.

•A file could be pdf , document or music, and a common and most

accepted type is a ZIP file.

<a href=“syllabus.zip”> download syllabus here! </a>

Target download 25

<a href=“file name.extension" download >

The file could be .img, .pdf, .txt, .html, etc.

Example:
<a href=“ WDLecture4.pdf ” download>
download lecture
</a>
Or

<a href=“WDLecture4.pdf “ download=“ Web Design Lecture4”>

Download lecture
</a>
E-mail link 26

•The e-mail link is for receiving e-mail and feedback from visitors
<a href="mailto:[email protected]">
Contact Me!
</a>
***Note1 the mailto: in the HREF value.This is how the browser
detects an e-mail setting instead of a web page setting***

***Note2 You can also add set the subject, the subject line of an
e-mail can be filled in automatically by adding a SUBJECT property
as follows:
<a href="mailto:[email protected]?subject=lecture enqury"> contact
me for any question</a>
Images in HTML 27

•To put a simple image on a webpage, we use the <img> element.

•<img> element requires a minimum of one attribute to be useful
which is src attribute.

•The src attribute contains a path pointing to the image you

want to embed in the page, which can be a relative or absolute URL,
in the same way as <a> element href attribute values.

•<img> is an empty element (meaning that it has no text

content or closing tag)

27
Images in HTML 28

•Syntax: <img src=”url">

•Example:
–Relative <img src=”flower.jpg” >
–Relative<img src=“images/flower.jpg”>
–Absolute <img src="https://www.example.com/images/flower. jpg ">

•In the same way as with links, you can also add title attributes
to images to provide further supporting information if needed.

<img src=“flower.jpg” title=“red flower”>

<img> attribute 29

The alternate attribute ( alt ) displays a text description in bro

wsers that are unable to display the image.

<img src="roseeee.jpg"
alt=" The flowers of the rose grow in many different colors, from the well-known red rose to
yellow roses and sometimes white or purple roses ">
Width and height 30

You can use the width and height attributes to specify the wid
th and height of your image

<img src="rose.jpg" width="100” height="300">

<img src="rose.jpg" width="300” height="300">
<img src="rose.jpg" width="300” height="100">
 31

<img> can be used as a link as follows

<a href="http://www.google.com"> <img src=“google.jpg”> </a>

Image formats 32

• There are four basic formats you will find on the Web.
• Each is denoted to the browser by a different suffix.
• .gif , .png , jpeg or .jpg , .bmp

The gif format

HTML Multimedia 33

•Multimedia comes in many different formats, It can be almost

anything you can hear or see.

•Examples:
Images, music, sound, videos, records, films, animations,….

•The most common way to discover the type of a file, is to look

at the file extension.

•Multimedia files have formats and different extension like:

.swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
HTML Multimedia- video 34

The HTML5 <video> tags make it simple to add media to a website.

Syntax:
<video src=“anyvideo.webm” controls> </video>
Video Attribute Specification

•Controls: If this attribute is present, it will allow the user to control video playback, in
cluding volume, seeking, and pause/resume playback.

•Autoplay: This Boolean attribute if specified, the video will automatically begin to pla
y back as soon as it can do so without stopping to finish loading the data.
•Loop: This Boolean attribute if specified, will allow video automatically seek back to th
e start after reaching at the end.
•Height: This attribute specifies the height of the video's display area
•width: This attribute specifies the width of the video's display area
HTML Multimedia- audio 35

The HTML5 <audio> element specifies a standard way to embed audio in

a web page.

Syntax: <audio src=“audio_name.mp3”> </audio>

audio Attribute Specification : controls, loop, autoplay

Video and audio fallback……..

36
 NW-First Web Design Quiz
Group A Group B
• List 3 Programming code • List 4 Meta elements in
elements HTML5

• Comment tag in HTML