Scribd
Upload
26 views74 pages

Chapter 2

Uploaded by

dejenehundaol91
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
26 views74 pages

Chapter 2

Uploaded by

dejenehundaol91
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 2

Hyper Text Markup Language (HTML)


What is HTML?
• Stands for Hyper Text Markup Language.
• Is not a programming language, it is a markup language.
• HTML 1.0 was created by Berners-Lee in late 1991.
• Is a most widely used language on web to develop web pages.
• Is a set of logical codes (markup) that constitute the appearance of a
web document and the information it contains.
• This codes are enclosed by less than “<” and greater than “>”
brackets these bracketed code of the markup are commonly
referred to as tags.
• Most elements have an opening element (tag) and a closing
element (tag) distinguished by the “/” inside the “<” opening
bracket.
E.g. <p>this text is paragraph</p>
Cont…
Basic HTML document structure

• An element called HTML surrounds the whole document.


• This element contains two sub-elements, HEAD and BODY. These elements are required
to form any HTML document.
• Open-up any word processing software (e.g. Notepad) and write the following code
fragments and save the file by .html file extension and view the result using any
browser.
Creating the first Web page

• Document explanation: <HTML>The first tag in your HTML document this


tag tells your browser that this is the start of HTML document.
• <HEAD>has sub-elements that define header information such as
<title>,<script>, <meta>, <style> and etc.
• <TITLE> tag defines document title.
• The text between <body> tag is displayed in your browser window.
• </HTML> this tag tells your browser that this is the end of the HTML
document.
What is DOM?
• When an HTML document is loaded into a web browser, it becomes a document
• object.
• The document object is the root node of the HTML document and the "owner" of all
other nodes: (element nodes, text nodes, attribute nodes, and comment nodes).
• The HTML DOM model is constructed as a tree of Objects:
HTML headings

• Heading are defined with the <h1> to <h6> tags. Output


Paragraph tag <p>…..</p>

• The <p> tag is supported in all major browsers.


• The <p> tag defines a paragraph.
• Browsers automatically add some space (margin) before and after
each <p> element.
• Paragraphs allow you to add text to a document
Example: <p> the text displayed in the form of paragraph</p>
Meta tag
• HTML <meta> tag is used to represent the metadata about the
HTML document. It specifies page description, keywords, language,
author of the documents, etc.
• The metadata does not display on the webpage, but it is used by
search engines, browsers and other web services which scan the
site or webpage to know about the webpage.
• With the help of meta tag, you can experiment and preview that
how your webpage will render on the browser.
• The <meta> tag is used to provide such additional information.
• Example:
HTML Comments
• Comments are some text or code written in your code to give an explanation
about the code, and not visible to the user.
• Comments which are used for HTML file are known as HTML comments.
• Anything written between these tags will be ignored by the browser, so
comments will not be visible on the webpage.
• Comments of any code make code easy to understand and increase
readability of code.
Break tag:
<br>
• Line breaks allow you to decide where the text will break on a line.
• The <BR> element does not have a closing tag.

Example: Output:
<body>
<H1>Heading 1</H1>
<P>Paragraph 1, <BR>
Line 2 <BR>
Line 3 <BR>
... </P>
</body>
Horizontal rule:
<hr>
• The <HR> element causes the browser to display a horizontal
line (rule) in your document.
• This element does not use a closing tag, </HR>.
• Simply type <HR> to insert a horizontal line (rule) element into
your document.
Character formatting elements

• HTML defines a lot of elements for formatting output, like bold or


italic some of the element are listed below.
• Font element:
• Used to modify the text size using size attribute
– e.g. <FONT SIZE="+2">Two sizes bigger</FONT>
– Normal text is size 3.
– Used to modify the text color using color attribute
– E.g. <FONT COLOR=”#RRGGBB”>this text has color</FONT>
Character formatting elements

• Bold Text: The <b> Element:


• Anything that appears in a <b>...</b> element is displayed in bold,
like the word bold here:
 e.g. <p>The following word uses a <b>bold</b> typeface.</p>
This will produce the following result:
The following word uses a bold typeface.
•Another element that used to make the text bold is <STRONG>
element.
 <STRONG> STRONG </STRONG> browsers display this as bold.
Character formatting elements

• Italic Text: The <i> Element:


• Anything that appears in a <i>...</i> element is displayed
in italicized, like the word italicized here:
 e.g. <p>The following word uses a <i>italicized</i>
typeface.</p>
This will produce the following result:
The following word uses a italicized typeface
Character formatting elements

• Underline Text: The <u> Element:


• Anything that appears in a <u>...</u> element is
displayed in underlined, like the word underlined here:
 e.g. <p>The following word uses a
<u>Underlined</u> typeface.</p>
• This will produce the following result:
• The following word uses a Underlined typeface
Character formatting elements

• <TT> element
– <TT>TELETYPE </TT> Text is displayed in a mono-
spaced font.
e.g. <TT>TELETYPE </TT>
• This will produce following result:
Character formatting elements

• <CITE> element
• The cite element is used to identify a reference to
another document, such as a book, magazine, article title,
and so on.
– <p>Passages of this article were inspired by <cite>The
Complete Manual of Typography</cite> by James
Felici.</p>
Character formatting elements

• Strike Text - The <strike> Element:


• Anything that appears in a <strike>...</strike> element is
displayed with strikethrough, which is a thin line through
the text:
e.g. <p>The following word uses a
<strike>strikethrough</strike> typeface.</p>
This will produce following result:
The following word uses a strikethrough typeface.
Character formatting elements
• Subscript Text: The <sub> Element:
• The content of a <sub> element is written in subscript;
– e.g. H<sub>2</sub>O Outputs: H20
• Superscript: The <sup> Element:
• The content of a <sup> element is written in
superscript.
- e.g. 10<sup>2</sup> Outputs: 102
Character formatting elements

• Larger Text - The <big> Element:


– The content of the <big> element is displayed one font
size larger than the rest of the text surrounding it.
• Smaller Text - The <small> Element:
– The content of the <small> element is displayed one
font size smaller than the rest of the text surrounding
it.
Character formatting elements

• Pre formatted element - The <pre> Element:


 Spaces and line breaks are supported without
additional elements or special characters.

• <pre>the text that contains with


Example:
a lot of spaces</pre>

• Output:
Character formatting elements

• <BLOCKQUOTE> element
<blockquote>…</blockquote>
• The <blockquote> tag specifies a section that is
quoted (refer to) from another source.
• This element can also contain most other formatting
elements such as Headings, paragraphs, tables, etc.
• E.g <p>Matthew Carter, said:</p>
<blockquote><p>Our alphabet hasn't changed;.</p>
</blockquote>
Character formatting elements

• ADDRESS> element
<ADDRESS>…</ADDRESS>
• The address element specifies information such as authorship and
contact details for the current document. You will need to use some
other method if you want the address displayed differently from left
aligned.
• E.g. <address> Our contact address is: [email protected] </address>
• To align the text in to center use <center>..</center>
• Let’s Break !
Generic element
• HTML provides two generic elements that can be customized to describe your
content perfectly.
• You give a generic element a name using either an id or class attribute.
• The difference between span and div is that a span element is in-line and
usually used for a small chunk of HTML inside a line (such as inside a
paragraph).
• Whereas a div (division) element is block-line (which is basically equivalent to
having a line-break before and after it) and used to group larger chunks of code.
The <div>
element
• The <div> tag is used to group the large section of HTML element
together.
• The HTML <div> tag is used for defining a section of your document.
• The <div> used to break a page into sections for context, structure, and
lay out purposes.
• The div (short for division) is used to indicate a generic block-level element.
• With the <div> tag, you can group large sections of HTML elements together
and format them with CSS.
The <div>
•
element
E.g. A heading and several paragraph are enclose in a div and identified as
the “news” section.
<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>
The <span> element
• The <span> tag is an inline element container used to mark a part of a text, or part of
a document.
• The <span> tag is easily styled by CSS or manipulated with JavaScript using the class
or id attribute.
• The <span> element is used to indicate a generic inline element.
<p>This one is <span style="color:red; font-weight:bold">only a
test</span>.</p>
<p>This one is another <span style="font-size:32px; font-
weight:bold">TEST</span>.</p>
Element identifier
• The class identifier
– The class attribute is used for grouping similar elements
– they can be used multiple times in the same HTML document
• Id and class value
– the values for id and class attribute should start with a letter (A- Z or a-z) or
underscore
– they should not content any character spaces or special
characters
– Letter, number, hyphens, underscore, colons, and periods are
allowed.
Character entity
• Some characters have a special meaning in HTML, like the less
than sign (<) that defines the start of an HTML tag.
• If want the browser to actually display these characters, we must
insert character entities in the HTML source.
• A character entity has three parts: an ampersand (&), an entity
name or a # and an entity number and finally a semicolon (;)
The most common character entities
Result description Entity na m e Entity number
Non-braking space &nbsp; &#160;
< Less than &lt; &#60;
> Greater than &gt; &#62;
“ Quotation mark &quot; &#34;
‘ apostrophe &apos; &#39;
cent &cent; &#162

pound &pound; &#163;

yen &yen; &#165;

copyright &copy; &#169;

Registerd trademark &reg; &#174;

Multiplacation &times; &#215;


division &divide; &#245;
HTML Lists

• HTML Lists are used to specify lists of information.


• All lists may contain one or more list elements. There are three
different types of HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
Ordered list (Numbered List)
• An ordered list starts with the <ol> tag.
• Each list item starts with the <li> tag.
• The list items are marked with numbers.
• Example: output:
<body>

<h3>List of African countries</h3>


<ol>
<li> Ethiopia</li>
<li> Eritrea </li>
<li> South Africa</li>
</ol>
</body>
Unordered list (Bulleted List)
• Used to list out a list of items in your HTML document.
• An unordered list starts with the <ul> tag.
• Each list item starts with the <li> tag.
• This will list items using bullets
• Example: <body> List of African countries:
<ul> output:
<li> Ethiopia</li>
<li> Eritrea </li>
<li> South Africa</li>
</ul>
</body>
Description List (Definition List)

• HTML Description list is also a list style which is supported by HTML and
XHTML.
• It is also known as definition list where entries are listed like a dictionary or
encyclopedia.
• The definition list is very appropriate when you want to present glossary,
list of terms or other name-value list.
• The HTML definition list contains following three tags:
• <dl> tag defines the start of the list.
• <dt> tag defines a term.
• <dd> tag defines the term definition (description).
Cont…

• Example:
• <html>
• <body> output:
• <h2>A Description List</h2>
• <dl>
A Description List
• <dt>Coffee</dt>
Coffee
• <dd>- black hot drink</dd>
- black hot drink
• <dt>Milk</dt>
Milk
• <dd>- white cold drink</dd>
- white cold drink
• </dl>
• </body>
• </html>
Adding links
• Anchor tag or <a> element allows us to link to other sites.
• To make a selection of text a link, simply wrap it in opening
and closing <a>...</a> tags and use the href attribute to
provide the URL of the target page.
• Example:
<a href=“http://www.google.com”>Google</a>
Inserting image
• You can insert any image in your web page by using
<img> tag.
• Syntax:
<img src="image URL" attr_name = "attr_value“ ...more
attributes />
e.g. <img src=“image1.jpg” alt=“lion image” width=“300”
height=“200”>
Inserting
• Following are most frequently used attributesattributes:
for <img> tag.
– width: sets width of the image.
– height: sets height of the image.
– border: sets a border around the image.
– src: specifies URL of the image file.
– alt: this is an alternate text which will be displayed if image is missing.
– align: this sets horizontal alignment of the image and takes value
either left, right or center.
– name: name of the image with in the document.
– id: id of the image with in the document.
– title: specifies a text title. The browser, perhaps flashing the title when the mouse
passes over the link.
Inserting multimedia in HTML
Multimedia is a form of communication that combines different content forms such as text,
audio, images, animations, or video into a single interactive presentation, in contrast to
traditional mass media which features little to no interaction from users, such as printed
material or audio recordings.

• Adding multimedia files

• <a href=“filename.extension> listen to sound file </a>

• <a href=“sound1.wav> listen to sound file </a>

• <a href=“movie1.mov> view movie clip </a> 41


Embed vs Video and Audio tags

What is the difference between embed and video/audio?

The difference between embedding and linking videos/audio. An


embedded video/audio lets you borrow the video/audio from another
platform. Visitors can watch/listen the video/audio on your website
without leaving the current page.

In contrast, linking a video/audio shares the URL of the video/audio.

42
Different types of files

File Type Extension/Mime type


================================
plain text: .txt
HTML document: .html
GIF image: .gif or .jpg or .png
Acrobat file: .pdf
AIFF sound file: .aiff .au . wav
MP3 .mp3
QuickTime movie: .mov
MPEG movie: .mpeg or .mpg

43
Inserting audios:
• The audio element is used to insert audio into web pages.
• Example:
<audio id="audiolist" controls>
<source src="music.mp3" type="audio/mp3">
</audio>
Output:
Inserting video
• The video element is used to insert video into web pages.
• Example:
<video width="500" height="350" controls>
<source src="Tedy.mp4" type="video/mp4">
</video>
Inserting tables:
• The <table> tag defines an HTML table.
• Each table row is defined with a <tr> tag.
• Each table header is defined with a <th> tag.
• Each table data is defined with a <td> tag.
• By default the text in <th> elements are bold and
centered.
Inserting
• Example: tables:
<table border=“1”>
<tr>
Output:
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Kedir</td>
<td>Mohammed</td>
<td>25</td>
</tr>
<tr>
<td>Abel</td>
<td>Solomon</td>
<td>48</td>
</tr>
</table>
Col span:
• Column spans, created with the colspan attribute in the td or th
element, stretch a cell to the right to span over
the subsequent columns. Output:
<table border="1">
<tr>
<th colspan="2">Movie categories</th>
</tr>
<tr>
<td>Adventure</td> <td>Action</td>
</tr>
</table>
Row span:
• Row spans, created with the rowspan attribute, work just
like column spans. Output:
<table border="1">
<tr><th rowspan=“2">Serving Size</th>
<td>Small</td>
</tr>
<tr><td>Medium </td></tr>
</table>
Cell Spacing and Padding
 Tables have two important attributes:

 cellspacing  cellpadding
cell cell cell cell

cell cell cell cell

 The cell spacing  The cell padding attribute of


attribute of <table> is <table> is used to specify the
used to specify the spacing between content of
distance between cells the cell and inner walls of the
in a table. cell.
50
Cell Spacing and Padding – Example

table-cells.html
<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>
51
HTML Frames
Frame divides a browser window into several individual frames or panes, each pane
containing a separate HTML page.

The page can be split into separate views (frames) horizontally and vertically.

One of the key advantages that frames offer is that you can then load and reload single
panes without having to reload the entire contents of the browser window.

A collection of frames in the browser window is known as a frameset.

When to Use Frames

• A lot of beginners use frames in their sites, particularly creating one for navigation and
the other for content. But then as they learn more about HTML and XHTML they tend to
HTML Frames cont…
• A couple of other drawbacks you should be aware of with frames are as follows:

Some browsers do not print well from framesets.

Some smaller devices cannot cope with frames, often because their screen is not big enough to
be divided up.

Frames are not supported by all user agents (browsers, search engines, etc.)

The browser’s back button might not work as the user hopes and so on.

When writing a frameset document, you use a different DOCTYPE declaration. This is because
frameset documents use a few elements in different ways than other XHTML documents.
53
Cont…

HTML Frames
<frameset> and <frame>
HTML Frames cont…

To create a frameset document, first you need the <frameset> element, which is used
instead of the <body> element.

The frameset defines the rows and columns your page is divided into, which in turn
specify where each individual frame will go. Each frame is then represented by a
<frame> element.
You also need to use the <noframes> element, which provides a message for users whose
browsers do not support frames.

The <frameset> element have many attributes rows, cols, noresize, scrolling, and src.

But rows and cols attributes used to specify the number of rows and columns that make
55
Cont…
• <!DOCTYPE html>
• <html>
• <head>
• <title>Frame</title>
• </head>
• <frameset cols="50%,50%">
• <frame src=“frame1.html">
• <frame src=“frame2.html">
• <noframes>Sorry! Your browser does not support frames. </noframes>
• </frameset>
• </html>
56
HTML iframes (internal frames)

An HTML <iframe> is used to display a web page within a web page.
The HTML <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current
HTML document.

It is a good practice to always include a title attribute for the <iframe>.
This is used by screen readers to read out what the content of the iframe is.

Summary

57
iframes:
• The iframe element lets you embed a separate HTML
document or other web resource in a document.
• Example: <iframe src=“check.html” width=“500”
height=“300”> </iframe>
HTML Forms:
• Forms are used to collect input from the user.
• Forms are added to web pages with the <form> element.
• Example: Output:
<form>
<label for="tname">Name </label>
<input type="text" id="tname"><br>
</form>
TEXT FIELDS:
• Text fields are used for entering a single word or line of text.
• Add a text input field to a form by inserting an input element with its type
attribute set to text.
Output
• Example:
<form>
<label for="tname">Name </label>
<input type="text" id="tname“ value=“Abel”
maxlength=“30”><br>
</form>
Multiline text-entry field:
• Textarea element, is used for multiline, scrollable
text entry box when displayed by the browser.
Output:
• Example:
<form>
<label for=“com">Name </label>
<textarea id=“com” cols=“6” rows=“12”>write your comment
</textarea>
</form>
Password entry field:
• the input type password makes the inputted text hidden.
• Example: Output:
<form>
<label for=“pass">Password </label>
<input type=“password" id=“pass”><br>
</form>
Radio buttons:
• Radio buttons are added to a form via the input
element with the type attribute set to “radio.”
• Example
Output:
<label for="gend">Gender</label>
<input type="radio" id="gend" value="male"
name="gender">Male
<input type="radio" id="gend" value="female"
name="gender">Female
Check box:
• Checkboxes are added via the input element with its type
set to checkbox.
• Check boxes allows the user to select multiple options.
• Example
<label for="gend">Select your Hobbies</label><br>
<input type="checkbox" name="hobbie"
value="football">Playing football<br>
<input type="checkbox" name="hobbie"
value="games">Playing games
<br>
<input type="checkbox" name="hobbie"
value="sing">singing songs
Menus or Combo box:
• Another way to provide a list of choices is to put them in a drop-
down or scrolling menu.
• Example:
<form>
<label for="cnt">country</label><br> Output:
<select id="cnt">
<option>Ethiopia</option>
<option>Uganda</option>
<option>Kenya</option>
</select>
</form>
File selection control
• The file selection control makes it possible for users to select a
document from the hard drive to be submitted with the form data.
• We add it to the form by using input element, with its type set to
file.
• Example: Output:
<form>
<p>select your file</p>
<input type="file" name="image">
</form>
Submit and reset button
• <input type="submit"> Submits the form data to the server
• <input type="reset"> Resets the form controls to their default
settings.
Output:
• Example:
<form>
<input type="submit" value="Register">
<input type="Reset" value="Clear">
</form>
HTML Graphics

There are two modern web technologies for creating rich drawn graphics within the

browser: HTML5 Canvas and Scalable Vector Graphics (SVG).

Canvas: A hypertext markup language element introduced in HTML5 for creating and

analyzing bitmap images as pixels.

The Canvas specification provides a JavaScript API for accessing the element's graphics

context and performing drawing operations with it.

Canvas is used to create high performance, interactive and complex scenes.


Cont…
• The HTML <canvas> element can be used to draw graphics on a web page.

The <canvas> element is only a container for


graphics.
You must use JavaScript to actually draw the
graphics. Canvas has several methods for
drawing paths, boxes, circles, text, and adding
images.
Canvas Example
Scalable Vector Graphics (SVG) in HTML

SVG: An XML-based vector graphics format. It is a markup language for describing all

aspects of an image or web application, from the geometry of shapes, to the styling of simple

presentation, text and shapes.

The HTML <svg> element allows vector based graphics in HTML:

SVG can also be generated through JavaScript.

71
Scalable Vector Graphics (SVG) in HTML

SVG has several methods for drawing paths, boxes, circles, text, and
Example
graphic images. The stroke attribute is a presentation attribute defining the color
(or any SVG paint servers like gradients or patterns) used to
paint the outline of the shape; Note: As a presentation attribute
stroke can be used as a CSS property.

Creates circles like this

72
Difference b/n SVG and Canvas
• SVG • Canvas
• Vector based (composed of • Raster based (composed of
shapes). pixel).
• Modified through CSS and Script. • Modified through Script.
• Better scalability. Can be printed • Poor scalability. Not suitable for
with high quality. printing on higher resolution.
Q&A

You might also like