Print bookPrint book

Submodule 1.3: Simple HTML file

Site: HUB de Montée en Compétences - CYRITECH C.S.L
Course: HTML
Book: Submodule 1.3: Simple HTML file
Printed by: Visiteur anonyme
Date: Thursday, 21 November 2024, 10:02 PM

Description

  • Simple web page
  • Headings and paragraphs
  • Text formatting
  • Types of break

Table of contents

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.

Exercise

  1. Copy the above code 
  2. Open your editor and create a new file
  3. Paste the code in the page
  4. Save the page as exersice01.3.01.htmland place it in the folder "Exercises".
  5. Preview this page in your browser. 

What do you see?

This is an empty page.

Where does the "Simple Web Page" appear?

In the title of the browser

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

Exercise

  1. Open your editor and the file  exersice01.3.01.html 
  2. Save the file as  exersice01.3.02.html, in the folder "Exercises"
  3. Copy the above code, paste it into the new file and save it
  4. Preview this page in your browser
  5. Add in your editor a new <h5> element and a new <p> element. You can use Lorem ipsum, the pseudo-Latin text
  6. Save and preview it in your browser 

Add empty space in your new paragraph and save the file. What do you see in your browser?

The empty space in the editor doesn't appear in the browser.

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>

Exercise

  1. Open your editor, create a new file and save it as  exersice01.3.04.html in the folder "Exercises"
  2. Modify the file. The browser's output, should be as shown in the following image: 

 

Solution: