[go: up one dir, main page]
Scribd
Upload
36 views69 pages

1 HTML

The document discusses HTML and provides information about required software, XAMPP and Sublime Text, responsive web design, what HTML is, prerequisites for HTML, outlines of HTML chapters including structure, text, lists, links and images, and text formatting tags.

Uploaded by

drsm sdar
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
36 views69 pages

1 HTML

The document discusses HTML and provides information about required software, XAMPP and Sublime Text, responsive web design, what HTML is, prerequisites for HTML, outlines of HTML chapters including structure, text, lists, links and images, and text formatting tags.

Uploaded by

drsm sdar
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/ 69

HYPER TEXT MARKUP

LANGUAGE (HTML)
Dr. Saw Myat Sandar
2

REQUIRED SOFTWARE INSTALLATION


• To create website application, some software are needed.

• There are so many open source web server package such as XAMPP,
WAMP(Windows users), MAMP (Mac OS X users) , LAMP (badass Linux users)

• The most popular Editor is Dreamweaver and others are Notepad, Notepad++,
Sublime Text and so on.

• Photoshop (pixel) and Illustrator (vector) are widely used to create design and
sometime Paint, FormatFactory application are used to design logo or images.

• XAMPP, Sublime Text 3, Photoshop, Paint and FormatFactory are choose to


develop the web site.
3

XAMPP & SUBLIME TEXT

• XAMPP, which stands for Cross-Platform (X) Apache, MySQL, PHP and Perl, is a popular, free and open

source web server package that you can use to install a web server onto your desktop.

• Sublime Text is a sophisticated text editor for code, markup and prose.

• When comparing Sublime Text vs Notepad++, recommends Sublime Text for most people.

• Sublime Text is ranked 4th while Notepad++ is ranked 13th.

• The most important reason people chose Sublime Text is: Sublime Text has a top-down view of the file and

keyboard shortcuts for most actions.

• It also supports a large number of languages and general text editing features out of the box.

• Lovely for the smooth user interface, extraordinary features and amazing performance.
4

WHAT IS RESPONSIVE WEB DESIGN?


• Responsive web design makes your web page look good on all devices.
• Responsive web design uses only HTML and CSS.
• Responsive web design is not a program or a JavaScript.

Phone
Desktop Tablet
5

WHAT IS HTML?
• HTML stands for Hyper Text Markup Language, which is the most widely used language

on Web to develop web pages.

• HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard

HTML specification which was published in 1995.

• HTML 4.01 was a major version of HTML and it was published in late 1999.

• Though HTML 4.01 version is widely used but currently we are having HTML-5 version

which is an extension to HTML 4.01, and this version was published in 2012.
6

PREREQUISITES FOR HTML


• Experience with any text editor like notepad, notepad++, sublime test, vs code etc.

• How to create directories and files on your computer.

• How to navigate through different directories.

• How to type content in a file and save them on a computer.

• Understanding about images in different formats like JPEG, PNG format.


7

OUTLINES OF HTML
• Chapter 1: Structure

• Chapter 2: Text

• Chapter 3: Lists

• Chapter 4: Links

• Chapter 5: Images

• Chapter 6: Tables

• Chapter 7: Forms

• Flash, Video & Audio

• HTML Special Characters


8

CHAPTER 1: STRUCTURE
FIRST HTML PAGE: TAGS
<!DOCTYPE HTML>
<html> Opening tag <title>
<head> The contents of the <title>
element are either shown in the
<title>My First HTML Page</title> top of the browser, above where
</head> you usually type in the URL of the
page you want to visit, or on the
<body> tab for that page (if your
<p>This is some text...</p> browser uses tabs to allow you to
view multiple pages at the same
</body> time).
</html> Closing tag

An HTML element consists of an opening tag, a closing tag and the content inside.

In sublime Alt + Shift + 2


9

FIRST HTML PAGE: HEADER


<!DOCTYPE HTML>
HTML
<html>
header <head>
<head> Before the <body> element you will
often see a <head> element.
<title>My First HTML Page</title> This contains information
</head> about the page (rather than
information that is shown within the
<body> main part of the browser window
<p>This is some text...</p> that is highlighted in blue on the
opposite page). You will usually find
</body> a <title> element inside the <head>
</html> element.
10

FIRST HTML PAGE: BODY

<body> <!DOCTYPE HTML>


<html>
You met the <body> element in
the first example we created.
<head>
Everything inside this element is <title>My First HTML Page</title>
shown inside the main browser </head>
window.
<body>
<p>This is some text...</p>
</body>
</html>
HTML body
11

CHAPTER 2: TEXT
HEADINGS
<h1>This is a Main Heading</h1>
• <h1> <h2>This is a Level 2 Heading</h2>
• <h2> <h3>This is a Level 3 Heading</h3>
<h4>This is a Level 4 Heading</h4>
• <h3> <h5>This is a Level 5 Heading</h5>
• <h4> <h6>This is a Level 6 Heading</h6>

• <h5>
• <h6>
• HTML has six "levels" of headings:
• <h1> is used for main headings
• <h2> is used for subheadings
12

PARAGRAPHS
• <p>

• To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and
closing </p> tag. By default, a browser will show each paragraph on a new line with some space
between it and any subsequent paragraphs.

<p>Text is easier to understand when it is split up into units of text.</p>

<br /> <hr />


As you have already seen, the browser will automatically
To create a break between themes — such as a change
show each new paragraph or heading on a new line. But if
of topic in a book or a new scene in a play — you can
you wanted to add a line break inside the middle of a
add a horizontal rule between sections using the <hr />
paragraph you can use the line break tag <br />.
tag.
13

TEXT FORMATTING
Code Definition • Text formatting tags
<b></b> bold
modify the text
between the opening
<i></i> italicized tag and the closing tag
<u></u> underlined

<sup></sup>

<sub></sub>
Samplesuperscript

Samplesubscript
<q>
The <q> element is used
for shorter quotes that sit
<strong></strong> strong
within a paragraph.
<em></em> emphasized

<ins></ins> Insert text

<blockquote></blockquote> Quoted text block

<del></del> Deleted text – strike through


14

Code Definition Example (test yourself)

<abbr> Abbreviations <p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and


cosmologist.</p>

<acronym> Acronyms <p><acronym title="National Aeronautics and Space


Administration">NASA</acronym> do some crazy space stuff.</p>

<cite> Citations <p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million
copies worldwide.</p>

<dfn> Definitions <p>A <dfn>black hole</dfn> is a region of space from


which nothing, not even light, can escape.</p>
<address> Auth or Details <address>
<p><a href="mailto:homer@example.org">homer@example.org</a></p>
<p>742 Evergreen Terrace, Springfield.</p>
</address>
15

WRITE A SIMPLE WEB PAGE BY


USING HEADING AND PARAGRAPH

h1

h2

h4

P & sup

Dr. Saw Myat SANDAR 10/03/2023


16

PROCEDURE
• Create a folder “html” on your desktop or local disk
• Open Sublime Text
• Go to File Tab  New File
• Save as “index1.html” and write code <ht
• Write code as a screenshot
• Save this by clicking Ctrl+S
• Call Right Click and Open in Browser

Dr. Saw Myat SANDAR 10/03/2023


17

CHAPTER 3: LISTS

<ol> <dl>
The definition list is created with the <dl>
The ordered list is created with the <ol> element and usually consists of a series of terms
element. and their definitions. Inside the <dl> element

<ul>
you will usually see pairs of <dt> and <dd>
elements.

The unordered list is created with the <ul>


element.
<dt>
This is used to contain the term being defined

<li> (the definition term).

Each item in the list is placed between an <dd>


opening <li> tag and a closing </li> tag. (The This is used to contain the definition.
li stands for list item.)
18

ORDERED LISTS: <OL> TAG


• Create an Ordered List using <ol></ol>:
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
• Attribute values for type are 1, A, a, I, or i

1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit iii. Grapefruit
a. Apple
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit II. Orange
C. Grapefruit III. Grapefruit
19

UNORDERED LISTS: <UL> TAG


<ul type="disk">
• Create an Unordered List using <ul></ul>:
<li>Apple</li>
• Attribute values for type are: <li>Orange</li>
• disc, circle or square <li>Grapefruit</li>
</ul>
• Apple o Apple  Apple
• Orange o Orange  Orange
• Pear o Pear  Pear
20

DEFINITION LISTS: <DL> TAG


• Create definition lists using <dl>
• Pairs of text and associated definition; text is in <dt> tag, definition in <dd> tag

• Renders without bullets

• Definition is indented
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>
LISTS – EXAMPLE 21

<ol type="1">
<li>Apple</li>
TEST YOURSELF
<li>Orange</li>
<li>Grapefruit</li>
</ol>
<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>
22

CHAPTER 4: LINKS
• <a> other-sites.html HTML

• Links are created using the <a> element which <p>Movie Reviews:
<ul>
has an attribute called href. The value of the href
<li><a href="http://www.empireonline.com">
attribute is the page that you want people to go to Empire</a></li>
<li><a href="http://www.metacritic.com">
when they click on the link. Users can click on
Metacritic</a></li>
anything that appears between the opening <a> <li><a
href="http://www.rottentomatoes.com">
tag and the closing </a> tag and will be taken to
Rotten Tomatoes</a></li>
the page specified in the href attribute. </ul>
</p>
23

Relative Link Type Example


Same Folder <a href="reviews.html">Reviews</a>
Child Folder <a href="music/listings.html">Listings</a>
Grand Child Folder <a href="movies/dvd/reviews.html">
Reviews</a>
Parent Folder <a href="../index.html">Home</a>
Use ../ to indicate the folder above the current
one
Grand Parent Folder <a href="../../index.html">Home</a>
Email Links <a href="mailto:jon@example.org">Email Jon</a>
Opening Links in a New Window <a href="http://www.imdb.com" target="_blank"> Internet
Movie Database</a>
Linking to a Specific Part of the Same Page <h1 id="top">Film-Making Terms</h1>
<a href="#arc_shot">Arc Shot</a><br />
<p><a href="#top">Top</a></p>
24

CHAPTER 5: IMAGES
<img src="images/quokka.jpg" alt="A family of quokka" title="The quokka is
an Australian marsupial that is similar in size to the domestic cat." />

<img> src alt title


To add an image into the This tells the browser where This provides a You can also use the title
page you need to use an it can find the image file. text description attribute with the <img>
<img> element. This is an This will usually be a of the image element to provide additional
empty element (which means relative URL pointing to an which describes information about the image.
there is image on your own site. the Most browsers will display
no closing tag). It must carry image if you the content of this attribute in
the following two attributes: cannot see it. a tooltip when the user
hovers over the image.

<img src="images/quokka.jpg" alt="A family of quokka"


width="600" height="450" align=“right”/>
25

HTML 5: FIGURE AND FIGURE CAPTION

<figure>
<img src="images/otters.jpg" alt="Photograph of
<figure>
two sea otters floating in water"> Images often come with
<br /> captions. HTML5 has
<figcaption>Sea otters hold hands when they introduced a new <figure>
Sleep. </figcaption> element to contain images and
</figure> their caption so that the two
are associated.

<figcaption>
The <figcaption> element has been added to HTML5 in
order to allow web page authors to add a caption to an image.
26

MARQUEE
<marquee> <marquee direction="down">
<img src="images/redcar.png" width="300" height="200"> <img src="images/redcar.png" width="300" height="200">
<img src="images/camry-red.jpg" width="300" <img src="images/camry-red.jpg" width="300"
height="200"> height="200">
<img src="images/corolla.jpg" width="300" height="200"> <img src="images/corolla.jpg" width="300"
<img src="images/prius.jpg" width="300" height="200"> height="200">
</marquee> <img src="images/prius.jpg" width="300" height="200">
</marquee>
<marquee direction="up">
<img src="images/redcar.png" width="300" height="200"> <marquee behavior="alternate">
<img src="images/camry-red.jpg" width="300" <img src="images/redcar.png" width="300" height="200">
height="200"> <img src="images/camry-red.jpg" width="300"
<img src="images/corolla.jpg" width="300" height="200"> height="200">
<img src="images/prius.jpg" width="300" height="200"> <img src="images/corolla.jpg" width="300"
height="200">
</marquee>
<img src="images/prius.jpg" width="300" height="200">
• </marquee>
27

THANK YOU
FOR
YOUR ATTENTION !!!
28

CHAPTER 6: TABLES
• Tables represent tabular data

• A table consists of one or several rows

• Each row has one or more columns

• Start and end of a table


<table> ... </table>
• Start and end of a row

<tr> ... </tr>


• Start and end of a cell in a row

<td> ... </td>


29

SIMPLE HTML TABLES – EXAMPLE


<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
30

SIMPLE HTML TABLES – EXAMPLE (2)


<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
31

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)
COMPLETE HTML TABLE: EXAMPLE
32

<table>
columns
<colgroup>
<col style="width:100px" /><col />
</colgroup>
header th
<thead>
<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>
</table>
33

<table>
COMPLETE HTML TABLE:
<colgroup>
<col style="width:200px" /><col /> By default, header text is bold and
</colgroup>
centered.
<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>
</tbody>
</table>
34

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

CELL SPACING AND PADDING


• Tables have two important attributes:

 cellspacing  cellpadding

cell cell cell cell

cell cell cell cell

 Defines the empty space  Defines the empty


between cells space around the cell
content
36

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

CELL SPACING AND PADDING – EXAMPLE (2)

<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

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 many columns the cell  Defines how many rows the cell occupies

occupies
COLUMN AND ROW SPAN – EXAMPLE
<table> <tfoot>
<tr> <tbody>
<td> Cellspacing
<thead> Cellpadding
<th> Border
Colspan Align
rowspan

Cell[1,1] Cell[2,1]

Cell[1,2] Cell[3,2]
Cell[2,2]
Cell[1,3] Cell[2,3]
39
40

CHAPTER 7: FORMS
• There are several types of form controls that you can use to collect information from visitors to your site. Three
types of Forms are

1. Adding Text,

2. Making Choices,

3. Submitting Forms

ADDING TEXT
Text input Password input Text area (multi-line)
(single-line) Used for a single Like a single line text box but it For longer areas of text, such as
line of text such as email masks the characters entered. messages and comments.
addresses and names.
41

MAKING CHOICES & SUBMITTING FORMS


Radio buttons Checkboxes Drop-down boxes
For use when a user must select When a user can select and When a user must pick one of a
one of a number of options. unselect one or more options. number of options from a list.

Submit buttons Image buttons File upload


To submit data from your form Similar to submit buttons but Allows users to upload files
to another web page. they allow you to use an image. (e.g. images) to a website.
42

FORM
<form action="login.php">
<p>Username:
<input type="text" name="username" size="15“ maxlength="30" />
</p>
</form>

<form> action
Every <form> element requires
Form controls live inside a an action attribute. Its value
method
<form> element. This element is the URL for the page on the
should always carry the action server that will receive the
attribute and will usually have a information in the form when it Forms can be sent using one of
method and id attribute too. is submitted. two methods: get or post.
43

HTML FORMS
• Forms are the primary method for gathering data from site visitors
• Create a form block with
The “method" attribute tells how the form data
<form></form>
should be sent – via GET or POST request
• Example:

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


action="path/to/some-script.php">
</form>

The "action" attribute tells where the form data


should be sent
44

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 text field" />
45

FIELDSETS
• Fieldsets are used to enclose a group of related form fields:
<form method="post" action="form.php">
<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.


46

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" />
47

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" />
48

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" />


49

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>
<option value="Value 3">speakers</option>
</select>
50

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: (test yourself)

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

LABELS
• <label> element can be used in two ways. It can:
• 1. Wrap around both the text description and the form input (as shown on the first line of the
example to your right).
• 2. Be kept separate from the form control and use the for attribute to indicate which form
control it is a label for (as shown with the radio buttons).
• for
• The for attribute states which form control the label belongs to.

<label>Age: <input type="text" name="age" /></label><br/ >


Gender:
<input id="female" type="radio" name="gender“ value="f">
<label for="female">Female</label>
<input id="male" type="radio" name="gender“ value="m">
<label for="male">Male</label>
52

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 dministration</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" />
53

FORM VALIDATION
• Forms on the web that give users messages if the form control has not been filled in correctly; this
is known as form validation. Normally used “required”.

<form action="http://www.example.com/login/"
method="post">
<label for="username">Username:</label>
<input type="text" name="username“ required="required" /></title><br/>
<label for="password">Password:</label>
<input type="password" name="password“ required="required" />
<input type="submit" value="Submit" />
</form>
54

OTHER INPUT TYPES


Date Input <form action=http://www.example.com/bookings/ method="post">
<label for="username">Departure date:</label>
<input type="date" name="depart" />
<input type="submit" value="Submit" />
</form>
Email Input <form action="http://www.example.org/subscribe.php">
<p>Please enter your email address:</p>
<input type="email" name="email" />
<input type="submit" value="Submit" />
</form>
URL Input <form action="http://www.example.org/profile.php">
<p>Please enter your website address:</p>
<input type="url" name="website" />
<input type="submit" value="Submit" />
</form>
Search Input <form action="http://www.example.org/search.php">
<p>Search:</p>
<input type="search" name="search" />
<input type="submit" value="Search" />
</form>
55

THANK YOU
FOR
YOUR ATTENTION !!!
56

VIDEO & AUDIO


57

VIDEO
poster src
<video> This attribute allows you to This attribute specifies the path
to the video
The <video> element has a specify an image to show while
number of attributes which allow the video is downloading or until
you to control video playback: the user tells the video to play.

width,height autoplay none


When used, this attribute The browser should not load
These attributes specify the size
specifies that the file should play the video until the user presses
of the player in pixels.
automatically. play.

loop auto
When used, this attribute preload The browser should download
the video when the page loads.
indicates that the video should This attribute tells the browser
start playing again once it has what to do when the page
ended. loads. It can have one of three
values:
58

Test Yourself
metadata <video width="320" height="240" controls>
The browser should just collect <source src="C:\Users\SMSD\Desktop\smsd\
information such as the size, aa.mp4" type="video/mp4">
first frame, track list, and </video>
duration.

AUDIO
<source> <audio controls>
To specify the location of the file <source src="horse.mp3" type="audio/mpeg">
to be played, you can use the
<source> element inside the </audio>
<video> element. (This should
replace the src attribute on the
opening <video> tag.)
59

DOCUMENT TYPES & COMMENTS


HTML5 HTML 4

<!DOCTYPE html> <!DOCTYPE html PUBLIC


"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Because there have been several versions of HTML, each web page should begin with a DOCTYPE
declaration to tell a browser which version of HTML the page is using (although browsers usually
display the page even if it is not included).

<!-- --> - good idea to add comments to your code because, no matter how familiar you
are with the page at the time of writing it, when you come back to it later
ID ATTRIBUTE & CLASS
60

ATTRIBUTE
• the id attribute, it is used to uniquely identify that element from other elements on the page. Its
value should start with a letter or an underscore. id attribute is known as a global attribute because
it can be used on any element.

• a class attribute, sometimes, rather than uniquely identifying one element within a document, you
will want a way to identify several elements as being different from the other elements on the page.
no two elements on the same page have the
<p id="pullquote">Every time I view the sea same value for their id attributes
I feel a calming sense of security, </p>
The id attribute of an HTML tag can be used to
<p class="important">For a one-year period uniquely identify any element within an HTML
from November 2010, the Marugame Genichiro- page.
Inokuma Museum of Contemporary Art (MIMOCA) The class attribute is used to associate an
will host a cycle of four Hiroshi Sugimoto element with a style sheet, and specifies the
exhibitions.</p> class of element.
61

DIV & SPAN


<div id="header">

<div> <img src="images/logo.gif" alt="Anish Kapoor" />


<ul>
The <div> element allows you to <li><a href="index.html">Home</a></li>
group a set of elements together <li><a href="biography.html">Biography</a></li>
in one block-level box. <li><a href="works.html">Works</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

<span> </div><!-- end of header -->

The <span> element acts like an inline equivalent of the <div> <p>Anish Kapoor won the
element. It is used to either: Turner Prize in 1991 and
1. Contain a section of text where there is no other suitable element to exhibited at the <span
differentiate it from its surrounding text class="gallery">Tate
2. Contain a number of inline elements The most common reason why Modern</span> gallery in
people use <span> elements is so that they can control the appearance London in 2003.</p>
of the content of these elements using CSS.
62

DIFFERENCE BETWEEN ID AND


• ID's are unique
CLASS, DIV AND SPAN
• Each element can have only one ID

• Each page can have only one element with that ID

• Classes are NOT unique


• You can use the same class on multiple elements.

• You can use multiple classes on the same element.

• <div> tag is used to identify a blocklevel section/division of a document that has a line break both before and after it.

• <span> tag is used to identify an inline section/division of a document.

• Some elements will always appear to start on a new line in the browser window. These are known as block level elements.

Examples of block elements are <h1>, <p>, <ul>, and <li>.


• Some elements will always appear to continue on the same line as their neighbouring elements. These are known as inline

elements. Examples of inline elements are <a>, <b>, <em>, and <img>.
63

META
• Meta tags additionally describe the content contained within the page

<meta name="description"
content="HTML tutorial" />

<meta charset=“UTF-8"/>

<meta name="author"
content="Chris Brewer" />

<meta http-equiv="refresh"
content="5;
url=http://www.telerik.com"
/>

HTML 5 authors can use simple syntax to specify Character Encoding as follows
<meta charset="UTF-8"> syntax is case-insensitive
<iframe>
64

IFRAMES
HTML Need to embed using this website
An iframe is like a little window that has https://www.mapsdirections.info/en/custom-google-maps/
been cut into your page — and in that
window you can see another page. The
term iframe is an abbreviation of inline
frame.

<iframe
src="http://
maps.google.co.uk/maps?
q=moma+new+York
&amp;output=embed"
width="450"
height="350"
frameborder="0"
scrolling="no">
</iframe> it indicates whether the frame should have a border or not. A
value of 0 indicates that no border should be shown. A value of
1 indicates that a border should be shown.
HTML Special Characters 65

Symbol Name HTML Entity Symbol


Copyright Sign &copy; ©
Registered Trademark Sign &reg; ®
Trademark Sign &trade; ™
Less Than &lt; <
Greater Than &gt; >
Ampersand &amp; &
Non-breaking Space &nbsp;
Em Dash &mdash; —
Quotation Mark &quot; "
Euro &#8364; €
British Pound &pound; £
Japanese Yen &yen; ¥
66

SPECIAL CHARACTERS – EXAMPLE


TEST YOURSELF
<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>
67
68
69

THANK YOU
FOR
YOUR ATTENTION !!!

You might also like