Wednesday, April 25, 2018
Tuesday, April 24, 2018
HTML Text Formatting
Text
Formatting
HTML
Text Formatting Elements
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
This text is
bold
This text is
italic
This is
subscript and superscript
»
HTML
Formatting Elements
In the
previous chapter, you learned about the HTML style attribute.
HTML also
defines special elements for defining text with a special meaning.
HTML uses
elements like <b> and <i> for formatting output, like bold or
italic text.
Formatting
elements were designed to display special types of text:
<b> -
Bold text
<strong>
- Important text
<i> -
Italic text
<em> -
Emphasized text
<mark>
- Marked text
<small>
- Small text
<del>
- Deleted text
<ins>
- Inserted text
<sub>
- Subscript text
<sup>
- Superscript text
HTML
<b> and <strong> Elements
The HTML
<b> element defines bold text, without any extra importance.
Example
<b>This
text is bold</b>
»
The HTML
<strong> element defines strong text, with added semantic
"strong" importance.
Example
<strong>This
text is strong</strong>
»
HTML
<i> and <em> Elements
The HTML
<i> element defines italic text, without any extra importance.
Example
<i>This
text is italic</i>
»
The HTML
<em> element defines emphasized text, with added semantic importance.
Example
<em>This
text is emphasized</em>
»
Note: Browsers
display <strong> as <b>, and <em> as <i>. However,
there is a difference in the meaning of these tags: <b> and <i>
defines bold and italic text, but <strong> and <em> means that the
text is "important".
HTML
<small> Element
The HTML
<small> element defines smaller text:
Example
<h2>HTML
<small>Small</small> Formatting</h2>
»
HTML
<mark> Element
The HTML
<mark> element defines marked or highlighted text:
Example
<h2>HTML
<mark>Marked</mark> Formatting</h2>
»
HTML
<del> Element
The HTML
<del> element defines deleted (removed) text.
Example
<p>My
favorite color is <del>blue</del> red.</p>
»
HTML
<ins> Element
The HTML
<ins> element defines inserted (added) text.
Example
<p>My
favorite <ins>color</ins> is red.</p>
»
HTML
<sub> Element
The HTML
<sub> element defines subscripted text.
Example
<p>This
is <sub>subscripted</sub> text.</p>
»
HTML
<sup> Element
The HTML
<sup> element defines superscripted text.
Example
<p>This
is <sup>superscripted</sup> text.</p>
»
HTML The class Attribute
HTML The class Attribute
Using The class Attribute
The HTML class attribute makes it possible to define equal
styles for elements with the same class name.
Here we have three <div> elements that points to the
same class name:
Example
<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital 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>
</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>
</body>
</html>
»
London
London is the capital of England. It is the most populous
city in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.
Standing on the River Thames, London has been a major
settlement for two millennia, its history going back to its founding by the
Romans, who named it Londinium.
Paris
Paris is the capital and most populous city of France.
Situated on the Seine River, it is at the heart of the �le-de-France region, also known as the r�gion parisienne.
Within its metropolitan area is one of the largest population
centers in Europe, with over 12 million inhabitants.
Tokyo
Tokyo is the capital of Japan, the center of the Greater
Tokyo Area, and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial
Palace, and the home of the Japanese Imperial Family.
The Tokyo prefecture is part of the world's most populous
metropolitan area with 38 million people and the world's largest urban economy.
Using The class Attribute on Inline Elements
The HTML class attribute can also be used for inline
elements:
Example
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
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>
HTML Tables
HTML
Table Tags
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a
table for formatting
<col> Specifies column properties for each column
within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
HTML
Table Example
Company Contact Country
Alfreds
Futterkiste Maria Anders Germany
Centro
comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island
Trading Helen Bennett UK
Laughing
Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini
Alimentari Riuniti Giovanni Rovelli Italy
»
Defining an
HTML Table
An HTML
table is 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>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
»
Note: The
<td> elements are the data containers of the table.
They can
contain all sorts of HTML elements; text, images, lists, other tables, etc.
HTML Table -
Adding a Border
If you do
not specify a border for the table, it will be displayed without borders.
A border is
set using the CSS border property:
Example
table,
th, td {
border: 1px solid black;
}
»
Remember to
define borders for both the table and the table cells.
HTML Table -
Collapsed Borders
If you want
the borders to collapse into one border, add the CSS border-collapse property:
Example
table,
th, td {
border: 1px solid black;
border-collapse: collapse;
}
»
HTML Table -
Adding 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:
Example
th,
td {
padding: 15px;
}
»
HTML Table -
Left-align Headings
By default,
table headings are bold and centered.
To
left-align the table headings, use the CSS text-align property:
Example
th
{
text-align: left;
}
»
HTML Table -
Adding Border Spacing
Border
spacing specifies the space between the cells.
To set the border
spacing for a table, use the CSS border-spacing property:
Example
table
{
border-spacing: 5px;
}
»
Note: If the
table has collapsed borders, border-spacing has no effect.
HTML 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>
<th>Name</th>
<th
colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
»
HTML 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>
<td>Bill Gates</td>
</tr>
<tr>
<th
rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
»
HTML
Table - Adding 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>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
»
Note: 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>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</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) {
background-color: #eee;
}
table#t01
tr:nth-child(odd) {
background-color: #fff;
}
table#t01
th {
color: white;
background-color: black;
}
HTML Styles - CSS
HTML
Styles - CSS
HTML
Style Tags
Tag Description
<style> Defines
style information for an HTML document
<link> Defines
a link between a document and an external resource
CSS = Styles and Colours
Manipulate Text
Colours, Boxes
Styling HTML with CSS
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on
screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of
multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the
<head> section
External - by using an external CSS file
The most common way to add CSS, is to keep the styles in
separate CSS files. However, here we will use inline and internal styling,
because this is easier to demonstrate, and easier for you to .
This example sets the text colour of the <h1>
element to blue:
Example
<h1
style="colour:blue;">This is a Blue Heading</h1>
»
Internal CSS
An internal CSS is used to define a style for a single
HTML page.
An internal CSS is defined in the <head> section of
an HTML page, within a <style> element:
Example
<!DOCTYPE
html>
<html>
<head>
<style>
body
{background-colour: powderblue;}
h1 {colour: blue;}
p {colour: red;}
</style>
</head>
<body>
<h1>This
is a heading</h1>
<p>This
is a paragraph.</p>
</body>
</html>
»
External CSS
An external style sheet is used to define the style for
many HTML 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
<!DOCTYPE
html>
<html>
<head>
<link rel="stylesheet"
href="styles.css">
</head>
<body>
<h1>This
is a heading</h1>
<p>This
is a paragraph.</p>
</body>
</html>
»
An external style sheet can be written in any text
editor. The file must not contain any HTML code, and must be saved with a .css
extension.
Here is how the "styles.css" looks:
body
{
background-colour: powderblue;
}
h1
{
colour: blue;
}
p
{
colour: red;
}
CSS Fonts
The CSS colour property defines the text colour to be
used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
Example
<!DOCTYPE
html>
<html>
<head>
<style>
h1
{
colour: blue;
font-family: verdana;
font-size: 300%;
}
p {
colour: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This
is a heading</h1>
<p>This
is a paragraph.</p>
</body>
</html>
»
CSS Border
The CSS border property defines a border around an HTML
element:
Example
p
{
border: 1px solid powderblue;
}
»
CSS Padding
The CSS padding property defines a padding (space)
between the text and the border:
Example
p
{
border: 1px solid powderblue;
padding: 30px;
}
»
CSS Margin
The CSS margin property defines a margin (space) outside
the border:
Example
p
{
border: 1px solid powderblue;
margin: 50px;
}
»
The id Attribute
To define a specific style for one special element, add
an id attribute to the element:
<p
id="p01">I am different</p>
then define a style for the element with the specific id:
Example
#p01
{
colour: blue;
}
»
Note: The id of an element should be unique within a
page, so the id selector is used to select one unique element!
The class Attribute
To define a style for a special type of elements, add a
class attribute to the element:
<p
class="error">I am different</p>
then define a style for the elements with the specific
class:
Example
p.error
{
colour: red;
}
»
External References
External style sheets can be referenced with a full URL
or with a path relative to the current web page.
This example uses a full URL to link to a style sheet:
Example
<link
rel="stylesheet"
href="https://www.Omegas.com/html/styles.css">
»
This example links to a style sheet located in the html
folder on the current web site:
Example
<link
rel="stylesheet" href="/html/styles.css">
»
This example links to a style sheet located in the same
folder as the current page:
Example
<link
rel="stylesheet" href="styles.css">
»
HTML Styles
HTML Styles
Chapter Summary
Use the style attribute for styling HTML elements
Use background-colour for background colour
Use colour for text colours
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment
Example
I am Red
I am Blue
I am Big
»
The HTML Style Attribute
Setting the style of an HTML element, can be done with the
style attribute.
The HTML style attribute has the following syntax:
<tagname
style="property:value;">
The property is a CSS property. The value is a CSS value.
HTML Background Colour
The background-colour property defines the background colour
for an HTML element.
This example sets the background colour for a page to
powderblue:
Example
<body
style="background-colour:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
»
HTML Text Colour
The colour property defines the text colour for an HTML
element:
Example
<h1 style="colour:blue;">This
is a heading</h1>
<p style="colour:red;">This is
a paragraph.</p>
»
HTML Fonts
The font-family property defines the font to be used for an
HTML element:
Example
<h1
style="font-family:verdana;">This is a heading</h1>
<p
style="font-family:courier;">This is a paragraph.</p>
»
HTML Text Size
Example
<h1 style="font-size:300%;">This
is a heading</h1>
<p style="font-size:160%;">This
is a paragraph.</p>
»
HTML Text Alignment
The text-align property defines the horizontal text alignment
for an HTML element:
Example
<h1
style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered
paragraph.</p>
»
