HTML provides the ability for formatting text just like you can do in MS Word, or any other text editing software.
Formatting elements were designed to display special types of text:
bold <b>
italic <i>
underline <ins>
marked <mark>
superscript <sup>
subscript <sub>
small <small>
deleted <del>
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Formatting</title>
</head>
<body>
<p><b>The text can be bold.</b></p>
<p><i>The text can be italic.</i></p>
<p><ins>The text can be underlined.</ins></p>
<p><mark>The text can be highlighted.</mark></p>
<p>The normal text
<sup>This text will be super scripted</sup>
The normal again.</p>
<p>The normal text
<sub> The text can be subscripted.</sub></p>
<p>Normal Text <small> Smal Text. </small></p>
<p><del> The text can be deleted.</del></p>
</body>
</html>
Output:
HTML Text Formatting
The text can be bold.
The text can be italic.
The text can be underlined.
The text can be highlighted.
The normal text
This text will be super scripted
The normal again.
The normal text
The text can be subscripted.
Normal Text Smal Text.
The text can be deleted.
What else you can do with the text?
HTML Styles
Setting the style of the HTML elements can be done with the style attribute (more about the style attribute you can find in my previous post).
a) Changing colour (to see more about HTML colours click here and here.)
b) Changing the font family (the CSS font-family property defines the font for an element.
Note: The HTML <font> tag is not supported in HTML5. You should use CSS instead.)
c) Changing the text size.
d) Changing the text position.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Formatting</title>
</head>
<body>
<p style="color:blue">The text can be blue. </p>
<p style="font-family:Arial"> The text can be in Arial. </p>
<p style="font-size: 55"> The size can be changed by style tag. </p>
<p style="text-align:center">
This position is changed by style tag.</p>
</body>
</html>
The colours are applied to an HTML tag/ element using CSS. You can pick which part of the element to apply colour to (background color, text color, border color, and more).
HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
1. Colour names
In HTML, a color can be specified by using a color name (to see more HTML colour names click here.)
You can also set the background colour for HTML elements.
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:mistyrose;">Hi, how are you ?</h1>
<p style="background-color:lightgreen;">
Hope is everything good and you'll learn a lot :D
</p>
</body>
</html>
Output:
3. Text colour
You can set the colour of the text as well.
Example:
<!DOCTYPE html>
<html>
<body>
<h3 style="color:salmon;">Hi, how are you?</h3>
<p style="color:sienna;">Hope is everything good and you'll learn a lot :D.</p>
<p style="color:plum;">Did you try to change a text colour? Try :) </p>
</body>
</html>
Output:
4. Border colors
You can set the color of the borders.
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid salmon;">Hi, how are you?</h1>
<h1 style="border: 2px solid palegreen;">Hi, how are you?</h1>
<h1 style="border: 2px solid powderblue;">Hi, how are you?</h1>
</body>
</html>
Output:
5. Colour Values
In HTML, colours can be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values as well:
Same as color name “Olive”:
<!DOCTYPE html>
<html>
<body>
<p>Same as color name "Olive":</p>
<h1 style="background-color:rgb(128, 128, 0);">rgb(128, 128, 0)</h1>
<h1 style="background-color:#808000;">#808000</h1>
<h1 style="background-color:hsl(60, 100%, 25.1%);">hsl(60, 100%, 25.1%)</h1>
<p>Same as color name "Olive", but 50% transparent:</p>
<h1 style="background-color:rgba(128, 128, 0, 0.5);">rgba(128, 128, 0, 0.5)</h1>
<h1 style="background-color:hsla(60, 100%, 25.1%, 0.5);">hsla(60, 100%, 25.1%, 0.5)</h1>
<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>
</body>
</html>
The HTML Image tag is the last HTML element which I would like to have a look deeper before we will go further to CSS. The image <img> tag is used to insert an image into the document.
The HTML image element mustn’t contain any content and doesn’t need a closing tag. The HTML <img> tag has two required attributes: src (source) and alt (text).
Today I would like to take a closer look at the <table> HTML element. Tables are used to represent tabular data (tables shouldn’t be used for page layouts, you can read more here).
A table allows you to look up values that indicate some kind of connection between different types of data, like days of the week, or a person and their age.
An HTML table is defined with the <table> tag. Each table row is defined with <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. The HTML <td> element can contain text, images, lists or other tables.
If you do not specify a border the table will be displayed without borders. HTML table borders are specified using CSS. To set the border of an HTML table, use CSS border property.
HTML Collapsed Border, this property is used to separate off a cell. It is used to collapse adjacent cells and make a common border. If you want the borders to collapse into one border, add the CSS border-collapse property.
HTML Table Cellpadding is used to add padding to the contents of each table cell and the border or edge of the cell. To set the padding, use the CSS padding property.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td{
padding: 20px;
}
</style>
</head>
<body>
<h3> This is the HTML Bordered Table</h3>
<p>Try to change the padding to 10px. </p>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>Anna</td>
<td>Brown</td>
<td>47</td>
</tr>
<tr>
<td>Tom</td>
<td>White</td>
<td>12</td>
</tr>
<tr>
<td>Johny</td>
<td>Deep</td>
<td>34</td>
</tr>
</table>
</body>
</html>
Continuing my previous post, today I prepared another 5 HTML elements which are frequently used in HTML documents. Se let’s take a look, how to use them in practice:
1. HTML <div> tag
2. HTML <span> tag
3. HTML <button> tag
4. HTML <br> tag
5. HTML comment tag
1. HTML <div> tag
The HTML <div> tag is an empty container, which defines section or division in an HTML document. The <div> element is often used to group together HTML elements and apply CSS styles to many elements at once.
Example:
<!DOCTYPE html>
<html>
<body>
<p>You can write some text here.</p>
<div style="background-color:lightgreen">
<h3>Heading in a div element</h3>
<p>Text in a div element.</p>
</div>
<p>You can write some text here.</p>
</body>
</html>
Output:
2. HTML <span> tag
The HTML <span> tag is used to group and applying styles to inline elements in an HTML document.
Example:
<!DOCTYPE html>
<html>
<body>
<p>My sister has <span style="color:brown;font-weight:bold">brown</span> hair and my brother has <span style="color:red;font-weight:bold"> red</span> hair.</p>
</body>
</html>
Output:
3. HTML <button> tag
The HTML <button> tag defines a clickable button and can be used in forms or anywhere in an HTML document that needs simple button functionality. Inside a <button> tag you can put content (text or images). Different browsers use different default types for the <button> element, but you can change the button’s appearance with CSS.
The HTML <br> tag inserts a single line break. The <br> element is an empty tag which means it has no end tag.
You can use the <br> tag to enter line breaks, not to separate paragraphs.
Example:
<!DOCTYPE html>
<html>
<body>
<p>
You can use br <br> tag to enter line breaks, <br> not to separate paragraphs.
</p>
</body>
</html>
Output:
5. HTML <!–…–> comment tag
The HTML comment tag is used to insert comments in the source code. Comments are not displayed in the browsers. Adding comments into HTML code can help you or someone looking at the code to indicate sections of a document (especially in complex documents).
The HTML comments are placed in between <!–…–> tags, so any content placed within <!–…–> tags will be treated as a comment.
Example:
<!DOCTYPE html>
<html>
<body>
<!-- This is a comment -->
<p>You can put some text here.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html>
To complement a previous post today we will get to know in detail HTML basic elements, that will make it easier to plan your own website. As we know now, all HTML documents consist of nested HTML elements and, the most common used by beginners elements of an HTML page are:
1) Headings <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
2) Paragraph <p>
3) Horizontal rule <hr>
4) HTML Links <a>
5) HTML List <ul>,<ol>,<dl>
1) Headings
There are six different types of text headers. It’s important to use headings to show the website structure. <h1> should be used as a main heading, followed by <h2> headings, and then the less important <h3>,<h4>,<h5>,<h6>.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Once you inserted this code in your HTML editor, you will see in the browser this:
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Importance of Headings: Search engines use headings for indexing the structure and content of the website.
2) Paragraph
The HTML <p> element defines a paragraph. So, anything mentioned within <p> and </p> is treated as a paragraph.
HTML tag <hr> is used to declare a thematic break for content. The <hr> tag is empty, so it does not require an and tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HR Tag in HTML</title>
</head>
<body>
<p>The horizontal rule tag below.</p>
<hr>
<p>The horizontal rule tag above.</p>
</body>
</html>
You can see it the browser as:
4) HTML Links
The tag <a> (anchor element), is used to create a hyperlink to another website, or another location within the same website. The hyperlink created by the tag <a> can be applied to the text, image, or other HTML content nested between the opening and closing <a> tags.
The link’s destination is specified in the href attribute.
Example:
<!DOCTYPE html>
<html>
<body>
<a href="https://www.lenastanley.com">This is a link.Click here!</a>
</body>
</html>
Lists are used to group related pieces of information (people’s names, a shopping list, or things to do). There are three lists types in HTML:
a) An unordered (bulleted) list <ul> is used to group related pieces of information in no particular order.
b) An ordered list <ol> is used to group related pieces of information in a particular order.
c) A definition list <dl> is used to represents the description list. This tag is used with <dt> tag and <dd> tag.
Example of an unordered list and an ordered list:
<!DOCTYPE html>
<html>
<body>
<h2>This is an Unordered HTML List</h2>
<ul>
<li>Bread</li>
<li>Butter</li>
<li>Cheese</li>
</ul>
<h2>This is an Ordered HTML List</h2>
<ol>
<li>Bread</li>
<li>Butter</li>
<li>Cheese</li>
</ol>
</body>
</html>
Output:
a) An unordered HTML list starts with the <ul> tag, and each list item starts with the <li> tag. In case of an unordered HTML list, you can change the bullet (small black circles) to one of several default styles, use an image, or display the list without bullets.
The CSS list-style-type property is used to define the style of the list item marker: disc, circle, square, or none.
Example – Circle bullets:
<!DOCTYPE html>
<html>
<body>
<h2>This is an Unordered HTML List with Circle Bullets</h2>
<ul style="list-style-type:circle">
<li>Bread</li>
<li>Butter</li>
<li>Cheese</li>
</ul>
</body>
</html>
Output:
b) An ordered HTML list starts with <ol> tag, and each list item starts with the <li> tag. An ordered HTML list can be displayed with several sequencing options. The default in most browsers is decimal numbers, but also you can use:
* Numbers type=”1″ numbers (1,2,3…) type=”i” lowercase Roman numerals (i,ii,iii…) type=”I” uppercase Roman numerals (I,II,III…)
Example – Uppercase letters:
<!DOCTYPE html>
<html>
<body>
<h2>This is an Ordered HTML List with Uppercase letters</h2>
<ol type="A">
<li>Bread</li>
<li>Butter</li>
<li>Cheese</li>
</ol>
</body>
</html>
Output:
c) Thy <dl> tag is used to represents the definition list (in HTML4.1) or the description list (in HTML5). This tag is used with <dt> (a term name) tag and <dd> (a description of each term) tag.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>This is A Description HTML List</h2>
<dl>
<dt>Sugar</dt>
<dd>- 500 gr</dd>
<dt>Milk</dt>
<dd>- 1 litre </dd>
</dl>
</body>
</html>
Output:
In the next post, I will try to add a description of the rest basic HTML elements (like element div, span, images, and button).
As a bonus, I am posting an example of a horizontal list styled with CSS, which you can use in your layout to create a navigation section:
