Simple HTML file
| Site: | ΕΛ/ΛΑΚ Moodle |
| Course: | Study / Web Design and Web Development |
| Book: | Simple HTML file |
| Printed by: | Guest user |
| Date: | Wednesday, 27 November 2024, 4:14 AM |
Description
- Simple web page
- Headings and paragraphs
- Text formatting
- Types of break
Simple web page
Every HTML page contains some basic elements that are necessary for its structure.
These are:<html>, <head>, <title> and <body>
Almost all HTML elements have a start tag and an end tag. The exceptions will be discussed later in the course.The basic structure of an HTML page is:
The very first statement that exists in any HTML page is the <!DOCTYPE html>.This declaration should only appear one time, at the beginning of our document, and it represents the document type. When we state the document type, we help browsers to display the content of our web page correctly.
Right after the <!DOCTYPE html> comes the <html> tag. Every HTML document begins with <html> and ends with </html>. This tag is the root of our document and is also the place where we state the language of our document. For example, if our content is in English we will have: <html lang="en"> </html>
The <head> elements starts below <html> start tag and close before <body> start tag. It contains information about the web page that usually is not displayed in the page. It also contains the <title> element which is where we state the title of our document.
The <body> element is where we put our content. Everything placed in the <body> will be visible on our web page.
Headings and paragraphs
HTML headings
HTML has six headings : <h1>, <h2>,<h3>,<h4>,<h5> and <h6>.
Different headings have different importance and different size.
<h1> is the bigger and most important heading whereas <h6> is the smaller and less important heading.
Thus the order is: <h1> > <h2> > <h3> > <h4> > <h5> > <h6>.
It is important to use headings to represent the document structure. For example the main title should be within an <h1> tag, a title within <h2> tag and a subtitle will be within an <h3> tag.
Here we should note, that as described in the word, headings should be used only for headings. You should not use headings to make words bigger. Later in the course, we will learn how to make words appear bigger.
HTML Paragraphs
Paragraphs in an HTML are defined by the <p> element. Paragraphs are used within the <body> element and have a start <p>and an end tag. </p>.
It is important to note that by default, browsers leave some white space before and after a paragraph so that it is distinct from neighboring paragraphs. Every paragraph starts at a new line. Inside the <p> element you cannot format the appearance of your content by applying extra whitespaces or line breaks within a paragraph. Browser will remove these from the displaying page.
Example
Types of break
<br> or <br/>
In the <p> tag section, we mentioned that any extra lines are removed when the page is displayed. However, there is a way to add line breaks that will not be removed.
<br> or <br/> tag, inserts a single line break. It is usually used within paragraphs when we want to format the line appearance of our content. Moreover, <br> is one of the elements that do not have an end tag.
These elements are called empty tags. In HTML we can use <br> tag by writing either <br> or <br/>. The latest is a more strict way to refer to this element and is mandatory in XHTML. However, in HTML both produce the same result.
<wbr>
The <wbr> tag is a new element of HTML5. It stands for “Word Break Opportunity”.
We use it when we have a long word or phrase and we don’t know how the browser will display it on the page. By adding <wbr> we specify the place where our text is going to split if the page has not enough space.
Similar with <br>, <wbr> does not have an end tag.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Break elements</title>
</head>
<body>
<h1>Break elements</h1>
<p>
My favourite word is supercalifragilisticexpialidocious. It comes
from the movie 'Mary Poppins' and is hard to spell correctly.
</p>
<p>
My favourite word is supercalifragilisticexpialidocious.<br>It comes
from the movie 'Mary Poppins' and is hard to spell correctly.
</p>
<p>
My favourite word is supercalifragilistic<wbr>expialidocious. It comes
from the movie 'Mary Poppins' and is hard to spell correctly.
</p>
</body>
</html>
Text formatting
Text formatting elements are used to display text with special meaning.
These elements are:
- Strong and bold:
<strong>,<b> - Italic and emphasized:
<i>,<em> - Subscript and Superscript :
<sub>,<sup> - Inserted and Deleted:
<ins>,<del> - Small:
<small> - Marked:
<mark>
The first pair <strong> and <b> would have the same outcome on the page. Both will make the text appear bold. However, semantically they do not represent the same thing. <b> is used just to make a text appear bold and it can be used for random reasons. <strong> on the other side, has semantic importance and it is used when we want to emphasize the importance of the specific text.
Italic <i> and emphasized <em>, will both make the text appear italic. However, similar to our previous example, they are semantically different. <i> is used to make a text italic without any special meaning. <em> on the other side emphasizes the importance of the specific text.
Subscript <sub> and Superscript <sup> are used for offsetting. <sub> moves the text down, it defines subscript text. <sup> moves the text up, it defines superscript text.
Inserted <ins> and Deleted <del> are used to illustrate edits. <ins> defines inserted text within a document. It is displayed in the browser by underlining the specific text. <del> defines deleted text within a document and it is displayed by a line which strikes through the specific text.
Small <small> tag defines smaller text. It makes the specific text appear smaller from its surrounding text.
Marked <mark> tag defines marked text. It is displayed by highlighting in yellow the specific text.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Formating text</title>
</head>
<body>
<h1>Text formatting</h1>
<p>
<strong>Strong </strong> text <br>
<b>Bold </b>text <br>
<em>Emphasized </em> text <br>
<i>Italic </i> text <br>
<sub>Subscript </sub> text <br>
<sup>Superscript </sup> text <br>
<ins>Inserted </ins> text <br>
<del>Deleted</del> text <br>
<small>Small</small> text <br>
<mark>Marked</mark> text <br>
</p>
</body>
</html>