HTML
Lecture
~MOHAMEDY HIT
HTML Computer Code
MOHAMEDY HIT
2
HTML Computer Code Formatting
• HTML normally uses variable letter size and spacing.
• This is not wanted when displaying examples of computer
code.
• The <kbd>, <samp>, and <code> elements all support fixed
MOHAMEDY HIT
letter size and spacing.
3
HTML <kbd> For Keyboard Input
• The HTML <kbd> element defines keyboard input:
• Example
MOHAMEDY HIT
• <kbd>File | Open...</kbd>
4
HTML <samp> For Computer Output
• The HTML <samp> element defines sample output from a
computer program:
• Example
• <samp>
MOHAMEDY HIT
[Link] login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-
reslog-v6.189
</samp>
5
HTML <code> For Computer Code
• The HTML <code> element defines a piece of programming code:
Example
• <code>
var x = 5;
var y = 6;
[Link]("demo").innerHTML = x + y;
</code>
MOHAMEDY HIT
• Notice that the <code> element does not preserve extra whitespace
and line-breaks.
• To fix this, you can put the <code> element inside a <pre> element:
• Example
• <pre>
<code>
var x = 5;
var y = 6;
6
[Link]("demo").innerHTML = x + y;
</code>
</pre>
HTML <var> For Variables
• The HTML <var> element defines a variable.
• The variable could be a variable in a mathematical expression
or a variable in programming context:
MOHAMEDY HIT
Example
• Einstein wrote: <var>E</var> =
<var>m</var><var>c</var><sup>2</sup>.
7
HTML Comments
MOHAMEDY HIT
8
HTML Comment Tags
• You can add comments to your HTML source by using the
following syntax:
• <!-- Write your comments here -->
MOHAMEDY HIT
Note: There is an exclamation point (!) in the opening tag, but
not in the closing tag.
• Comments are not displayed by the browser, but they can help
document your HTML.
• With comments you can place notifications and reminders in
your HTML:
• Comments are also great for debugging HTML, because you
can comment out HTML lines of code, one at a time, to search 9
for errors:
HTML Colors
MOHAMEDY HIT
TVs and computer screens display colors by combining Red,
Green, and Blue light.
10
Color Names
• With CSS, colors can be set by using color names:
MOHAMEDY HIT
11
MOHAMEDY HIT
12
MOHAMEDY HIT
13
MOHAMEDY HIT
14
MOHAMEDY HIT
15
MOHAMEDY HIT
16
MOHAMEDY HIT
17
MOHAMEDY HIT
18
MOHAMEDY HIT
19
MOHAMEDY HIT
With CSS, colors can be set by using color names:
CSS supports 140 standard color names.
20
RGB (Red, Green, Blue)
• With HTML, RGB color values can be specified using this
formula: rgb(red, green, blue)
• Each parameter (red, green, and blue) defines the intensity of
the color between 0 and 255.
• For example, rgb(255,0,0) is displayed as red, because red is
MOHAMEDY HIT
set to its highest value (255) and the others are set to 0.
Experiment by mixing the RGB values below:
21
Shades of gray are often defined using
equal values for all the 3 light sources:
MOHAMEDY HIT
22
Hexadecimal Colors
• With HTML, RGB values can also be specified using
hexadecimal color values in the form: #RRGGBB, where RR
(red), GG (green) and BB (blue) are hexadecimal values
between 00 and FF (same as decimal 0-255).
• For example, #FF0000 is displayed as red, because red is set to
its highest value (FF) and the others are set to the lowest
MOHAMEDY HIT
value (00).
23
Shades of gray are often defined using equal
values for all the 3 light sources:
MOHAMEDY HIT
24
HTML Styles - CSS
MOHAMEDY HIT
25
Styling HTML with CSS
• CSS stands for Cascading Style Sheets
• Styling can be added to HTML elements in 3 ways:
• Inline - using a style attribute in HTML elements
• Internal - using a <style> element in the HTML <head> section
MOHAMEDY HIT
• External - using one or more external CSS files
• The most common way to add styling, is to keep the styles in
separate CSS files. But, in this tutorial, we use internal styling,
because it is easier to demonstrate, and easier for you to try it
yourself.
26
Inline Styling (Inline CSS)
• Inline styling is used to apply a unique style to a single HTML
element:
• Inline styling uses the style attribute.
• This example changes the text color of the <h1> element to
MOHAMEDY HIT
blue:
• Example
• <h1 style="color:blue;">This is a Blue Heading</h1>
27
Internal Styling (Internal CSS)
• Internal styling is used to define a style for one HTML page.
• Internal styling is defined in the <head> section of an HTML page,
within a <style> element:
• Example
• <!DOCTYPE html>
<html>
<head>
<style>
MOHAMEDY HIT
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p> 28
</body>
</html>
External Styling (External CSS)
• An external style sheet is used to define the style for many pages.
• With an external style sheet, you can change the look of an entire
web site by changing one file!
• To use an external style sheet, add a link to it in the <head> section
of the HTML page:
• Example
MOHAMEDY HIT
• <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p> 29
</body>
</html>
• An external style sheet can be written in any text editor. The
file should not contain any html tags. The style sheet file must
be saved with a .css extension.
Here is how the "[Link]" looks:
• body {
background-color: lightgrey;
}
MOHAMEDY HIT
h1 {
color: blue;
}
p{
color:green;
} 30
CSS Fonts
• The CSS color property defines the text color to be used for the HTML element.
• The CSS font-family property defines the font to be used for the HTML element.
• The CSS font-size property defines the text size to be used for the HTML element.
• Example
• <!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
MOHAMEDY HIT
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1> 31
<p>This is a paragraph.</p>
</body>
</html>
The CSS Box Model
• Every HTML element has a box around it, even if you cannot see it.
• The CSS border property defines a visible border around an HTML element:
Example
• p{
border: 1px solid black;
}
The CSS padding property defines a padding (space) inside the border:
Example
MOHAMEDY HIT
• p{
border: 1px solid black;
padding: 10px;
}
The CSS margin property defines a margin (space) outside the border:
Example
• p{
border: 1px solid black;
padding: 10px; 32
margin: 30px;
}
The id Attribute
• All the examples above use CSS to style HTML elements in a
general way.
• To define a special style for one special element, first add an id
attribute to the element:
• <p id="p01">I am different</p>
MOHAMEDY HIT
then define a style for the element with the specific id:
Example
• #p01 {
color: blue;
}
33
The class Attribute
• To define a style for a special type (class) of elements, add a class
attribute to the element:
• <p class="error">I am different</p>
• Now you can define a different style for elements with the specific
class:
MOHAMEDY HIT
• Example
• [Link] {
color: red;
}
• Use id to address a single element. Use class to address groups of
elements.
NOTE: 34
• You can learn much more about CSS in my CSS lectures..
MOHAMEDY HIT
HTML Links
35
HTML Links - Hyperlinks
• HTML links are hyperlinks.
• A hyperlink is a text or an image you can click on, and jump to
another document.
HTML Links - Syntax
MOHAMEDY HIT
• In HTML, links are defined with the <a> tag:
• <a href="url">link text</a>
Example
• <a href="[Link] google.</a>
• The href attribute specifies the destination address
([Link]
• The link text is the visible part (Visit google). 36
• Clicking on the link text, will send you to the specified address.
Local Links
• The example above used an absolute URL (A full web address).
• A local link (link to the same web site) is specified with a
relative URL (without [Link]
Example
MOHAMEDY HIT
• <a href="html_images.asp">HTML Images</a>
37
HTML Links - Colors
• When you move the mouse over a link, two things will normally
happen:
• The mouse arrow will turn into a little hand
• The color of the link element will change
• By default, a link will appear like this (in all browsers):
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
MOHAMEDY HIT
• You can change the default colors, by using styles:
Example
• <style>
a:link {color:green; background-color:transparent; text-
decoration:none}
a:visited {color:pink; background-color:transparent; text-
decoration:none}
a:hover {color:red; background-color:transparent; text-
decoration:underline} 38
a:active {color:yellow; background-color:transparent; text-
decoration:underline}
</style>
HTML Links - The target Attribute
• The target attribute specifies where to open the linked
document.
• This example will open the linked document in a new browser
window or in a new tab:
Example
• <a href="[Link] target="_blank">Visit
MOHAMEDY HIT
Google!</a>
39
Target Value Description
Opens the linked document in a new
_blank
window or tab
Opens the linked document in the same
_self
frame as it was clicked (this is default)
MOHAMEDY HIT
Opens the linked document in the parent
_parent
frame
Opens the linked document in the full
_top
body of the window
Opens the linked document in a named
framename
frame
40
Target Value Description
Opens the linked document in a new
_blank
window or tab
Opens the linked document in the same
_self
frame as it was clicked (this is default)
Opens the linked document in the parent
_parent
frame
Opens the linked document in the full
_top
body of the window
MOHAMEDY HIT
Opens the linked document in a named
framename
frame
If your webpage is locked in a frame, you can use target="_top" to break out
of the frame:
Example
<a href=http:”//[Link] “ target="_top">HTML5 tutorial!</a> 41
HTML Links - Image as Link
• It is common to use images as links:
Example
• <a href="[Link]">
<img src="[Link]" alt="HTML tutorial"
MOHAMEDY HIT
style="width:42px;height:42px;border:0">
</a>
Note:
• border:0 is added to prevent IE9 (and earlier) from displaying
a border around the image.
42
HTML Links - Create a Bookmark
• HTML bookmarks are used to allow readers to jump to specific parts
of a Web page.
• Bookmarks are practical if your website has long pages.
• To make a bookmark, you must first create the bookmark, and then
add a link to it.
• When the link is clicked, the page will scroll to the location with the
bookmark.
MOHAMEDY HIT
Example
• First, create a bookmark with the id attribute:
• <h2 id="tips">Useful Tips Section</h2>
• Then, add a link to the bookmark ("Useful Tips Section"), from
within the same page:
• <a href="#tips">Visit the Useful Tips Section</a>
• Or, add a link to the bookmark ("Useful Tips Section"), from another
page:
Example 43
• <a href="html_tips.html#tips">Visit the Useful Tips Section</a>
MOHAMEDY HIT
HTML Images
44
HTML Images Syntax
• In HTML, images are defined with the <img> tag.
• The <img> tag is empty, it contains attributes only, and does
not have a closing tag.
• The src attribute specifies the URL (web address) of the image:
MOHAMEDY HIT
• <img src="url" alt="some_text">
45
The alt Attribute
• The alt attribute specifies an alternate text for an image, if the
image cannot be displayed.
• The alt attribute provides alternative information for an image
if a user for some reason cannot view it (because of slow
connection, an error in the src attribute, or if the user uses a
MOHAMEDY HIT
screen reader).
• If a browser cannot find an image, it will display the alt text:
Example
• <img src="[Link]" alt="HTML5 Icon"
style="width:128px;height:128px;">
The alt attribute is required. A web page will not validate
correctly without it. 46
HTML Screen Readers
• A screen reader is a software program that can read what is
displayed on a screen.
• Screen readers are useful to people who are blind, visually
impaired, or learning disabled.
MOHAMEDY HIT
• Note:
• Screen readers can read the alt attribute.
47
Image Size - Width and Height
• You can use the style attribute to specify the width and height
of an image.
• The values are specified in pixels (use px after the value):
Example
MOHAMEDY HIT
• <img src="[Link]" alt="HTML5 Icon"
style="width:128px;height:128px;">
Alternatively, you can use width and height attributes. Here, the
values are specified in pixels by default:
Example
• <img src="[Link]" alt="HTML5 Icon" width="128"
48
height="128">
Width and Height or Style?
• Both the width, height, and style attributes are valid in the latest HTML5
standard.
• We suggest you use the style attribute. It prevents styles sheets from
changing the original size of images:
Example
• <!DOCTYPE html>
<html>
<head>
MOHAMEDY HIT
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="[Link]" alt="HTML5 Icon"
style="width:128px;height:128px;">
<img src="[Link]" alt="HTML5 Icon" width="128" height="128">
49
</body>
</html>
Images in Another Folder
• If not specified, the browser expects to find the image in the
same folder as the web page.
• However, it is common to store images in a sub-folder. You
must then include the folder name in the src attribute:
MOHAMEDY HIT
Example
• <img src="/images/[Link]" alt="HTML5 Icon"
style="width:128px;height:128px;">
50
Images on Another Server
• Some web sites store their images on image servers.
• Actually, you can access images from any web address in the
world:
Example
MOHAMEDY HIT
• <img
src="[Link]
g" alt="[Link]">
51
Animated Images
• The GIF standard allows animated images:
Example
• <img src="[Link]" alt="Computer Man"
style="width:48px;height:48px;">
MOHAMEDY HIT
• Note that the syntax of inserting animated images is no
different from non-animated images.
52
Using an Image as a Link
• To use an image as a link, simply nest the <img> tag inside the
<a> tag:
• Example
• <a href="[Link]">
MOHAMEDY HIT
<img src="[Link]" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
</a>
• Add "border:0;" to prevent IE9 (and earlier) from displaying a
border around the image.
53
Image Floating
• Use the CSS float property to let the image float.
• The image can float to the right or to the left of a text:
Example
• <p>
<img src="[Link]" alt="Smiley face"
MOHAMEDY HIT
style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>
<p>
<img src="[Link]" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p> 54
HTML Tables
MOHAMEDY HIT
55
Defining HTML Tables
• <table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
MOHAMEDY HIT
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
56
Example explained:
• Tables are defined with the <table> tag.
• Tables are divided into table rows with the <tr>
tag.
• Table rows are divided into table data with the
<td> tag.
• A table row can also be divided into table
MOHAMEDY HIT
headings with the <th> tag.
• Table data <td> are the data containers of the
table.
They can contain all sorts of HTML elements like
text, images, lists, other tables, etc. 57
An HTML Table with a Border Attribute
• If you do not specify a border for the table, it will be displayed
without borders.
• A border can be added using the border attribute:
• Example
• <table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
MOHAMEDY HIT
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
58
• The border attribute is on its way out of the HTML standard! It
is better to use CSS.
• To add borders, use the CSS border property:
Example
MOHAMEDY HIT
• table, th, td {
border: 1px solid black;
}
• Remember to define borders for both the table and the table
cells.
59
An HTML Table with Collapsed Borders
• If you want the borders to collapse into one border, add CSS
border-collapse:
• Example
• table, th, td {
MOHAMEDY HIT
border: 1px solid black;
border-collapse: collapse;
}
60
An HTML Table with Cell Padding
• Cell padding specifies the space between the cell content and
its borders.
• If you do not specify a padding, the table cells will be
displayed without padding.
• To set the padding, use the CSS padding property:
MOHAMEDY HIT
• Example
• table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px; 61
}
HTML Table Headings
• Table headings are defined with the <th> tag.
• By default, all major browsers display table headings as bold and centered:
• Example
• <table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
MOHAMEDY HIT
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
• To left-align the table headings, use the CSS text-align property:
Example
62
• th {
text-align: left;
}
Table Cells that Span Many Columns
• To make a cell span more than one column, use the colspan
attribute:
• Example
• <table style="width:100%">
<tr>
MOHAMEDY HIT
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table> 63
Table Cells that Span Many Rows
• To make a cell span more than one row, use the rowspan attribute:
• Example
• <table style="width:100%">
<tr>
<th>Name:</th>
MOHAMEDY HIT
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr> 64
</table>
An HTML Table With a Caption
• To add a caption to a table, use the <caption> tag:
• Example
• <table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
MOHAMEDY HIT
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table> 65
• The <caption> tag must be inserted immediately after the <table>
tag.
A Special Style for One Table
• To define a special style for a special table, add an id attribute
to the table:
Example
• <table id="t01">
<tr>
MOHAMEDY HIT
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr> 66
</table>
Now you can define a special style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}\
And add more styles:
• table#t01 tr:nth-child(even) {
MOHAMEDY HIT
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
} 67
HTML Lists
MOHAMEDY HIT
68
Unordered HTML Lists
• An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.
• The list items will be marked with bullets (small black circles):
Example
MOHAMEDY HIT
• <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
69
Unordered HTML Lists - The Style Attribute
• Unordered HTML Lists - The Style Attribute
• A style attribute can be added to an unordered list, to define
the style of the marker:
Style Description
MOHAMEDY HIT
The list items will be marked with bullets
list-style-type:disc
(default)
list-style-type:circle The list items will be marked with circles
The list items will be marked with
list-style-type:square
squares
list-style-type:none The list items will not be marked 70
Disc:
• <ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Circle:
MOHAMEDY HIT
• <ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
71
Square:
• <ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
None:
MOHAMEDY HIT
• <ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
72
Ordered HTML Lists
• An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
• The list items will be marked with numbers:
MOHAMEDY HIT
Example
• <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
73
Ordered HTML Lists - The Type Attribute
• A type attribute can be added to an ordered list, to define the
type of the marker:
Type Description
MOHAMEDY HIT
The list items will be numbered with
type="1"
numbers (default)
The list items will be numbered with
type="A"
uppercase letters
The list items will be numbered with
type="a"
lowercase letters
The list items will be numbered with
type="I"
uppercase roman numbers
The list items will be numbered with 74
type="i"
lowercase roman numbers
Numbers:
• <ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Letters:
MOHAMEDY HIT
• <ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
75
Lowercase Letters:
• <ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Roman Numbers:
• <ol type="I">
MOHAMEDY HIT
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Roman Numbers:
• <ol type="i">
<li>Coffee</li>
<li>Tea</li> 76
<li>Milk</li>
</ol>
HTML Description Lists
• HTML also supports description lists.
• A description list is a list of terms, with a description of each
term.
• The <dl> tag defines the description list, the <dt> tag defines
MOHAMEDY HIT
the term (name), and the <dd> tag describes each term:
Example
• <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd> 77
</dl>
Nested HTML Lists
• List can be nested (lists inside lists):
• Example
• <ul>
<li>Coffee</li>
<li>Tea
MOHAMEDY HIT
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
• List items can contain new list, and other HTML elements, like
images and links, etc. 78
Horizontal Lists
• HTML lists can be styled in many different ways with CSS.
• One popular way, is to style a list to be displayed horizontally:
• Example
• <!DOCTYPE html>
<html> <head>
<style>
ul#menu li {
display:inline;
MOHAMEDY HIT
}
</style> </head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul> 79
</body>
</html>
• With a little extra style, you can make it look like a menu:
Example
• ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
MOHAMEDY HIT
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
80
ul#menu li a:hover {
background-color: orange;
}
HTML Block
MOHAMEDY HIT
81
HTML Block and Inline Elements
• Every HTML element has a default display value depending on
what type of element it is. The default display value for most
elements is block or inline.
MOHAMEDY HIT
82
Block-level Elements
• A block-level element always starts on a new line and takes up
the full width available (stretches out to the left and right as
far as it can).
• The <div> element is a block-level element.
MOHAMEDY HIT
Examples of block-level elements:
• <div>
• <h1> - <h6>
• <p>
• <form>
83
Inline Elements
• An inline element does not start on a new line and only takes
up as much width as necessary.
• This is an inline <span> element inside a paragraph.
Examples of inline elements:
MOHAMEDY HIT
• <span>
• <a>
• <img>
84
The <div> Element
• The <div> element is a block-level element that is often used as a
container for other HTML elements.
• The <div> element has no required attributes, but style and class are
common.
• When used together with CSS, the <div> element can be used to
MOHAMEDY HIT
style blocks of content:
Example
• <div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city
in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
</div> 85
The <span> Element
• The <span> element is an inline element that is often used as
a container for some text.
• The <span> element has no required attributes, but style and
class are common.
• When used together with CSS, the <span> element can be
MOHAMEDY HIT
used to style parts of the text:
Example
• <h1>My <span style="color:red">Important</span>
Heading</h1>
86
HTML Grouping Tags
Tag Description
Defines a section in a document
<div>
(block-level)
Defines a section in a document
<span>
MOHAMEDY HIT
(inline)
87
HTML Classes
MOHAMEDY HIT
88
Classing Block Elements
• The HTML class attribute makes it possible to define equal
styles for "equal" <div> elements:
Example
• <!DOCTYPE html>
<html>
<head>
<style>
MOHAMEDY HIT
[Link] {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body> 89
• <div class="cities">
<h2>London</h2>
<p>London is the capital city of England. It is the most
populous city in the United Kingdom, with a metropolitan area
of over 13 million inhabitants.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
MOHAMEDY HIT
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater
Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
90
</body>
</html>
Classing Inline Elements
• The HTML class attribute also makes it possible to define equal
styles for "equal" <span> elements:
Example
• <!DOCTYPE html>
<html>
<head>
<style>
MOHAMEDY HIT
[Link] {font-size:120%;color:red;}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html> 91
MOHAMEDY HIT
92