Scribd
Upload
3 views

Chapter 2 HTML

This document provides an overview of HTML, including its definition, structure, and various elements such as tags, attributes, hyperlinks, images, and lists. It outlines the basic syntax for creating HTML documents and includes examples of common HTML tags and their usage. Additionally, it covers character entities, comments, and the formatting of text and tables in HTML.

Uploaded by

Tesfalegn Yakob
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

Chapter 2 HTML

This document provides an overview of HTML, including its definition, structure, and various elements such as tags, attributes, hyperlinks, images, and lists. It outlines the basic syntax for creating HTML documents and includes examples of common HTML tags and their usage. Additionally, it covers character entities, comments, and the formatting of text and tables in HTML.

Uploaded by

Tesfalegn Yakob
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 37

Debremarkos University

Computer Science Department


Web Programming
(CoSc3082 )
Chapter: Two
Hyper Text Markup Language
(HTML)
Basics of HTML

• HTML is a markup language for describing web documents (web


pages).
• HTML stands for Hyper Text Markup Language
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document content
• Version
 HTML…. 1991
 HTML 2.0…. 1995
 HTML 3.2…. 1997
 HTML 4.01…. 1999
 XHTML…. 2000
 HTML5…. 2014
Basics of HTML

• Write HTML Using Notepad or any Text Editor.


• Step 1: Open Notepad
• Step 2: Write Some HTML
• Step 3: Save the HTML Page
• Name the file "index.htm/html" and set the encoding to UTF-
8 (which is the preferred encoding for HTML files).
• Step 4: View the HTML Page in Your Browser.
HTML Tags and Their Attributes

• HTML tags are keywords (tag 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.
• The browser does not display the HTML tags, but uses them to
determine how to display the document:
• The browser will remove any extra spaces and extra lines when the
page is displayed:
Cont…
• HTML Page Structure
<!DOCTYPE html>
<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>
• Only the <body> section is displayed in a browser.
• The <!DOCTYPE> Declaration: represents the document type and
• It must only appear once, at the top of the page (before any HTML
Cont…

• HTML Elements: usually consists of a start tag and end tag, with
the content inserted in between:
• <tagname>Content goes here...</tagname>

• Some HTML elements are empty (have no content) and do not


have an end tag, such as the <br> element (which indicates a line
break).
• Some HTML elements will display correctly, even if you forget
the end tag:
• HTML tags are not case sensitive: <P> means the same as <p>.

• The HTML <title> Element: defines a title in the browser tab


Cont…

• HTML Headings: defined as the <h1> to <h6> tags.

<h1>This is heading 1</h1>


• HTML Paragraphs: defined with the <p> tag:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
• HTML Hyper Links: defined with the <a> tag:

<a href="http://www.w3schools.com">This is a link</a>


• HTML Images: defined with the <img> tag.
– <img src=“s.jpg" alt=“No image" width="104" height="142">
– <img src="HTML Slides/s.jpg" alt="Click me"
style="width:42px;height:42px;border:0;">
Cont……..

• Note that the syntax of inserting animated images is no different from


non-animated images.
• HTML Attributes: provide additional information about HTML
elements and are always specified in the start tag.
• Size Attributes:
<img src=“image.jpg" width="104" height="142">
• The alt Attribute:
• specifies an alternative text to be used, when an image cannot
be displayed.
<img src="w3schools.jpg" alt="W3Schools.com“>
Cont…

• The href Attribute: HTML links are defined with the <a> tag.
The link address is specified in the href attribute:

<a href="http://www.w3schools.com">This is a link</a>.

<a href="default.html "><img src="s.jpg” alt="Click me"


style="width:42px;height:42px;border:0;" ></a>.
 Double quotes around attribute values are the most common
in HTML, but single quotes can also be used.
HTML Hyperlinks (Links)

• HTML uses a hyperlink to link to another document on the Web.


• A hyperlink (or link) is a word, group of words, or image that you can
click on to jump to a new document or a new section within the
current document.
• To create a link to another document, by using the href attribute

HTML Link Syntax

The HTML code for a link is simple. It looks like this:


<a href="url">Link text</a>
The href attribute specifies the destination of a link.
Example
<a href="http://www.w3schools.com/">Visit W3Schools</a>
HTML Images

• The <img> Tag and the Src Attribute


• In HTML, images are defined with the <img> tag.
• The <img> tag is empty: which means that it contains attributes only
and has no closing tag.
• To display an image on a page, you need to use the src attribute. Src
stands for "source". The value of the src attribute is the URL of the
image you want to display
Syntax for defining an image

• <img src="url" alt="some_text"/>


• The required alt attribute specifies an alternate text for an image, if
the image cannot be displayed.
• The value of the alt attribute is an author-defined text:
• <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
• The height and width attributes are used to specify the height and
width of an image.
Cont…
• HTML Style Attribute: setting style of an element

<tagname style="property:value;">
• HTML Background Color

<body style="background-color:powderblue;">
• HTML Text Color

<h1 style="color:blue;">This is a heading</h1>


• HTML Fonts

<h1 style="font-family:verdana;">This is a heading</h1>


• HTML Text Size

<h1 style="font-size:300%;">This is a heading</h1>


• HTML Text Alignment
Text Formatting Tags
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term
Cont…….
<html>
<body>
<b>This text is bold</b><br>
<strong>This text is strong</strong><br>
<big>This text is big</big><br>
<em>This text is emphasized</em><br>
<i>This text is italic</i><br>
<small>This text is small</small>
<br> This text contains <sub>subscript</sub>
<br>This text contains<sup>superscript</sup>
</body></html>
Quotations: This example demonstrates how to handle quotations
<html> <body>
<q> This is a long quotation</q>
<body></html>
Text direction :This example demonstrates how to change the text
direction.
<html>
<body>
<p> If your browser supports bi-directional override (bdo), the next line
will be written from the right to the left (rtl):</p>
<bdo dir="rtl">Here is some Hebrew text</bdo>
</body></html>
Deleted and inserted text

This example demonstrates how to mark a text that is deleted or inserted


to a document.
<html>
<body>
<p>a dozen is <del>twenty</del>
<ins>twelve</ins> pieces</p>
<p> Most browsers will overstrike deleted text and underline inserted
text.</p>
<p>Some older browsers will display deleted or inserted text as plain
text.</p>
</body>
</html>
<cite> ……. </cite>:Tells the browser that this is a citation.
Usually displayed in italics.
Abbreviations and acronyms
This example demonstrates how to handle an abbreviation or an
acronym.
<html><body>
<abbr title="United Nations">UN</abbr><br>
<acronym title="World Wide Web">WWW</acronym>
</body></html>
<address> ……. </address
• Supplies the contact information of the author.
• Generally formatted in italics.
Example:
 <address>
 Instructor. Temesgen Y.<br>
 Dept. of Computer Science. <br>
 Ethiopia, Debremarkos University.<br>
 Email: [email protected]
 </address>
HTML Character Entities

• Some characters like the < character, have a special meaning in


HTML, and therefore cannot be used in the text.

• To display a less than sign (<) in HTML, we have to use a character


entity.

• A character entity has three parts:


• an ampersand (&), an entity name or a # and an entity number, and
finally a semicolon (;).
• To display a less than sign in an HTML document we must write: &lt;
or &#60;
• Advantage of using a name is easier to remember.
• Disadvantage of using a name is not all browsers support the newest
entity names, while the support for entity numbers is very good in
almost all browsers.
• Note: That the entities are case sensitive

The Most Common Character Entities:


Result Description Entity Name Entity
Number

non-breaking space &nbsp &#160;


< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" quotation mark &quot; &#34;
' apostrophe &apos; (does not work in IE) &#39;
 Non-breaking Space
• The most common character entity in HTML is the non-breaking
space.
• Normally HTML will truncate spaces in your text.
• If you write 10 spaces in your text HTML will remove 9 of them.
• To add spaces to your text, use the &nbsp; character entity.
Some Other Commonly Used Character Entities:
Result Description Entity Name
Entity Number
¢ cent &cent;
&#162;
£ pound &pound;
&#163;
¥ Yen &yen;
&#165;
€ euro &euro;
&#8364;
§ section &sect;
&#167;
© copyright &copy;
&#169;
® registered trademark &reg;
&#174;
× multiplication &times;
&#215;
÷ division &divide;
&#247;
Cont…

• HTML Comments

<!-- Write your comments here -->


• Note: Comments are not displayed by the browser, but with
comments you can place notifications and reminders in your
HTML:
• HTML Colors: can be specified by using a color name, an RGB
value, or a HEX value.
• Red/rgb(255,0,0)/#FF0000
HTML Tables:
• defined with the <table> tag.
• Each table row is defined with the <tr> tag. A table header is defined with
the <th> tag. By default, table headings are bold and centered. A table data/cell is
defined with the <td> tag.
• Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Kebede</td>
<td>Alemu</td>
<td>0950</td>
<td>2510</td>
</tr>
<tr>
<td>Abebe</td>
<td>Ayele</td>
<td>0994</td>
<td>2516</td>
</tr>
HTML Lists

List Tags
Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines a definition term
<dd> Defines a definition description
<dir> Deprecated. Use <ul> instead
<menu> Deprecated. Use <ul> instead
Different types of ordered lists
Numbered list Letters list
<html>
<html> <body>
<body> <h4>Letters list:</h4>
<h4>Numbered list:</h4> <ol type="A">
<ol> <li>Apples</li>
<li>Apples</li> <li>Bananas</li>
<li>Bananas</li> <li>Lemons</li>
<li>Lemons</li> <li>Oranges</li>
<li>Oranges</li> </ol>
</ol> </body></html>
Cont…….
Lowercase letters list Roman numbers list
<html>
<html><body>
<body>
<h4>Roman numbers
<h4>Lowercase letters
list:</h4>
list:</h4>
<ol type="I">
<ol type="a">
<li>Apples</li>
<li>Apples</li>
<li>Bananas</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Lemons</li>
<li>Oranges</li>
<li>Oranges</li>
</ol> </html></body
</ol> </body>
Lowercase Roman numbers list

<html><body>
<h4>Lowercase Roman
numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body></html>
Unordered Lists

• An unordered list is a list of items. The list items are marked with
bullets (typically small black circles).
• An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
Circle bullets list(0 )
Disc bullets list( )
<html><body>
<html> </ul><h4>Circle bullets
<body> list:</h4>
<h4>Disc bullets list:</h4> <ul type="circle">
<ul type="disc"> <li>Apples</li>
<li>Apples</li> <li>Bananas</li>
<li>Bananas</li> <li>Lemons</li>
<li>Lemons</li> <li>Oranges</li>
<li>Oranges</li> </ul>
<html><body> <body><html>
Square bullet Nested list
This example demonstrates how
</body></html>
you can nest lists.
<h4>Square bullets list:</h4> <html><body>
<h4>A nested List:</h4>
<ul type="square">
<ul>
<li>Apples</li> <li>Coffee</li>
<li>Tea<ul><li>Black tea</li>
<li>Bananas</li>
<li>Green tea</li>
<li>Lemons</li> </ul>
</li>
<li>Oranges</li>
<li>Milk</li>
</ul> </ul>
</body>
</body>
</html>
</html>
Definition List
• Specified using the tag:
<DL> ……… </DL>
• Each definition comprises of a definition term (<DT>) and a
definition description (<DD>).
• Web browsers format each definition on a new line and indent it.
Example:
<DL>
<DT> TCP
<DD> Transmission Control Protocol
<DT> UDP
<DD> User Datagram Protocol
<DT> IP
<DD> Internet Protocol
</DL>
Definition List (Example)

<html>
<head><title> Definition list 1 </title></head>
<body text=white bgcolor=blue>
<h2> Some important protocols: </h2>
<h3><DL>
<DT> TCP
<DD> Transmission Control Protocol
<DT> UDP
<DD> User Datagram Protocol
<DT> IP
<DD> Internet Protocol
</DL></h3>
</body>
</html>
Nesting of Lists

• Any list can be nested within another list.


• When unnumbered lists are nested, the browser automatically
uses a different bullet symbol for each level.
• When numbered lists are nested, by default, every level is
numbered using the arabic numerals (1, 2, 3, …).
Nesting of Lists (Example 1)
<html><head><title> List Nesting 1 </title></head>
<body text=white bgcolor=blue>
<H3> My favorite languages are:
<UL>
<LI> Java <BR>
<UL>
<LI> object-oriented
<LI> platform independent
<LI> can be embedded within HTML
</UL> <BR>
<LI> Perl <BR>
<UL>
<LI> a scripting language
<LI> powerful string handling capabilities
<LI> widely used for writing CGI scripts
</UL>
</UL> </H3>
</body></html>
Nesting of Lists (Example 2)
<html><head><title> List Nesting 2 </title></head>
<body text=white bgcolor=blue>
<H3> My favorite languages are:
<OL>
<LI> Java <BR>
<UL>
<LI> object-oriented
<LI> platform independent
<LI> can be embedded within HTML
</UL> <BR>
<LI> Perl <BR>
<OL>
<LI> a scripting language
<LI> powerful string handling capabilities
<LI> widely used for writing CGI scripts
</OL>
</OL> </H3>
</body></html>
c h !
M u
S o
o u
k Y
h a n
T

You might also like