Scribd
Upload
10 views

Lecture 3

Uploaded by

iakambamu
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
10 views

Lecture 3

Uploaded by

iakambamu
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 16

Internet Technologies

& webpage authoring


HTML Elements
 HTML documents are made up by HTML
elements.
 HTML elements are written with a start tag, with
an end tag, with the content in between:
 <tagname>content</tagname>
 An HTML element is everything from the start tag
to the end tag:
Start tag Element End tag
content
<p> This is a </p>
paragraph
<a This is a link </a>
href="default.htm
">
<h1> My first Heading </h1>
HTML Element Syntax

 An HTML element starts with a start tag


 An HTML element ends with an end tag
 The element content is everything between
the start and end tag
 Some HTML elements have empty content
 Some HTML elements have a missing end
tag
 Note: The start tag can have additional
information (attributes) see that later.
Nested HTML Element
 HTML elements can be nested (elements can
contain elements).
 All HTML documents consist of nested HTML
elements.
 This example contains 4 HTML elements:
 Example
 <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Example Explained
 The <html> element defines the whole document.
 It has a start tag <html> and an end tag </html>.
 The element content is another HTML element (the
<body> element).
 The <body> element defines the document body.
 It has a start tag <body> and an end tag </body>.
 The element content is two other HTML elements
(<h1> and <p>).
 The <h1> element defines a heading.
 It has a start tag <h1> and an end tag </h1>.
 The element content is: My First Heading.
 The <p> element defines a paragraph.
 It has a start tag <p> and an end tag </p>.
 The element content is: My first paragraph.
Empty HTML Elements
HTML elements without content are called empty
elements. Empty elements have no end tag.
<br /> is an empty element without a closing tag.
Adding a slash to the start tag, like <br />, is the
proper way of closing empty elements, accepted
by HTML, XHTML and XML and HTML5.
Even if <br> works in all browsers, writing <br />
instead is more future proof.
HTML Tip - Lowercase Tags
HTML tags are not case sensitive: <P> means the
same as <p>. Plenty of web sites use uppercase
HTML tags in their pages.
W3Schools use lowercase tags because the World
Wide Web Consortium (W3C) recommends
lowercase.
HTML Text Formatting
Elements
HTML uses elements like <b> and <i> for
formatting output, like bold or italic text.
These elements are called formatting elements.
HTML Bold Formatting
The HTML <b> element defines bold text, without
any extra importance.
Example
<p>This text is normal.</p>
<p><b>This text is bold</b></p>
The HTML <strong> element defines strong text,
with added semantic importance.
Example
<p>This text is normal.</p>
<p><strong>This text is bold</strong></p>
HTML Formatting elements cont…..

The HTML <mark> element defines marked or


highlighted text:
Example
<h2>HTML <mark>Marked</mark>
Formatting</h2>
HTML Deleted Formatting
The HTML <del> element defines deleted
(removed) of text.
Example
<p>My favorite color is <del>blue</del> red.</p>
HTML Inserted Formatting
The HTML <ins> element defines inserted (added)
text.
Example
<p>My favorite <ins>color</ins> is red.</p>
HTML formatting element cont….

 HTML Subscript Formatting


 The HTML <sub> element defines
subscripted text.
 Example
 <p>This is <sub>subscripted</sub>
text.</p>
HTML Superscript Formatting
 The HTML <sup> element defines
superscripted text.
 Example
 <p>This is <sup>superscripte</sup>
text.</p>
HTML Attributes

 Attributes provide additional information about HTML


elements.
 HTML elements can have attributes
 Attributes provide additional information about the element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value"
Attribute Syntax
 Attributes always come in name/value pairs
like this: name="value".
 Examples
 border="1"
 href="http://www.w3scchools.com"
 bgcolor="yellow“
 Attributes Example 1:
 <table> defines an HTML table. (You will
learn more about HTML tables later)
 <table border="1">
 The border attribute defines a border type
for the <table> element.
Attribute Examples
Attributes Example 2:
<a> defines an anchor (an HTML link). (You
will learn more about HTML links later)
<a href="http://www.w3schools.com">
<a href=“index.html">
The href attribute provides the link
address for the <a> element.
Attributes Example 3:
<body> defines the body of an HTML
document.
<body bgcolor="yellow">
The bgcolor attribute defines the
background color for the <body> element.
Attribute examples
Size Attributes
HTML images are defined with the <img> tag.
The filename of the source (src), and the size of the
image (width and height) are all provided as
attributes:
Example
<img src=“altcon.jpg" width="104" height="142">
The image size is specified in pixels: width="104"
means 104 screen pixels wide.
The image alt Attribute
The alt attribute specifies an alternative text to be
used, when an HTML element cannot be displayed.
The value of the attribute can be read by "screen
readers". This way, someone "listening" to the
webpage, i.e. a blind person, can "hear" the element.
Example
<img src=“altcon.jpg" alt="W3Schools.com"
width="104" height="142">
Always Quote Attribute
Values
Attribute values should always be enclosed in
quotes. Double style quotes are the most
common, but single style quotes are also
allowed.
In some rare situations, like when the attribute
value itself contains quotes, it is necessary to
use single quotes:
name='John “Bob" Atwiine‘

HTML Tip - Use Lowercase Attributes


Attribute names and attribute values are case-
insensitive.
However, the World Wide Web Consortium
(W3C) recommends lowercase
attributes/attribute values in their HTML 4
recommendation
Newer versions of (X)HTML will demand
lowercase attributes.
Special Characters
 Many characters (such as < > & “) are used by
your browser to represent html tags. So what if
you want one of these special characters to
actually display in your web page? You can use
certain codes in your html to represent these
characters.
 Similar codes may also be used to show characters
(such as © ® ¶ ™) that can’t be typed normally.
Below is a list of some of the more common codes
and how they will appear in your browser. Most
HTML editors allow you to easily insert special
character codes from a menu without the need for
typing them. However for characters you need
frequently, it can be just as easy to simply type
them as you go.
Special Characters
examples
 &nbsp; non-breaking (blank) space
 &quot; “ (quotation mark)
 &amp; & (ampersand)
 &copy; © (copyright logo)
 &lt; < (less than symbol)
 &gt; > (greater than symbol)
 &reg; ® (registered symbol)
 &trade; ™ (trade mark symbol)
 &#189; ½ (half fraction)
 &#182; ¶ (paragraph symbol)

You might also like