HTML + CSS + JavaScript Archives - Page 4 of 4

HTML. Unit 2. Text formatting.

Introduction

In order to make the structure of our text clearer, we can mark some elements to make them more relevant than other elements. In HTML there are some tags for this purpose:

<b>Bold text</b>
<strong>Important text</strong>
<i>Italic text</i>
<em>Emphasized text</em>
<mark>Marked (or highlighted) text</mark>
<small>Small text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript text</sub>
<sup>Superscript text</sup>

The <b> and <strong> elements

The <b> element represents a piece of bold text to which attention is being drawn, but it does not add any extra importance. On the other hand, the text inside the <strong> element is displayed in bold too, but it also adds a strong importance to the text, which could be meaningfull when the web page is analyzed and processed to extract important words or expressions. This kind of text analysis is done for example by some search engines, which need to know what any page is about to include it in the results when a user is searching for pages containing specific keywords.

Proposed exercise: Important text

Create a web page with the text below using a header and a paragraph, and also add extra importance to several words inside the paragraph:

Doctors without borders

In May 1968, a group of young doctors decided to go and help victims of wars and major disasters. This new brand of humanitarianism would reinvent the concept of emergency aid. They were to become Médecins Sans Frontières (MSF), known internationally in English as Doctors Without Borders.

The <i> and <em> elements

The <i> element defines a part of the text in an alternate voice or mood, and the content inside is usually displayed in italic. It is often used to indicate a technical term, a phrase from another language, a thought, etc. On the other hand, the HTML <em> defines an emphasized text, which is displayed in italic too, but the result is different when a screen reader is used, since the words inside the <em> tag will be pronounced with an emphasis, using verbal stress.

Proposed exercise: Emphasized text

Create a web page with the text below using a header and a couple paragraphs, and also emphasize several words inside the paragraphs:

People first

MSF was officially created on December 22, 1971. At the time, 300 volunteers made up the organization: doctors, nurses, and other staff, including the 13 founding doctors and journalists.

MSF was created on the belief that all people have the right to medical care regardless of gender, race, religion, creed, or political affiliation, and that the needs of these people outweigh respect for national boundaries.

The <del> and <ins> elements

The <del> element is used to define a text which has been deleted from a document. Search engines sometimes use this tag to show the changes inside a website, when some text has been removed after the developer has uploaded a new version.

On the other hand, the <ins> element is used to define a text which has been inserted into a document. Search engines sometimes use this tag to show the changes inside a website, when some text has been replaced after the developer has uploaded a new version.

It depends on the browser how to display the text inside these elements, but most of them will strike a line through deleted text, and will underline the inserted text by default.

Proposed exercise: Deleted and inserted text

Create a page to show several paragraphs where some words or sentences were previously said, but now the authors have changed their minds and want to tell their readers a new version of their thoughts. Using the <del> and <ins> tags, show the previous texts and the new ones in a way that makes clear that the new text is replacing the first one. The result should look like this (you should write at least 10 paragraphs):

The Earth is flat rounded.

On 31 December 2020 the whole world is going to end! carry on as usual.

...

The <mark> element

The <mark> element represents text which is marked or highlighted for reference or notation purposes, due to the marked passage’s relevance or importance in the enclosing context.

Proposed exercise: Highlighted text

Create a web page with the text below using a header and a couple paragraphs, and also highlight several words or figures inside the paragraphs:

Building MSF

Since 1980, MSF has opened offices in 28 countries and employs more than 30,000 people across the world. Since its founding, MSF has treated over a hundred million patients. 

MSF has also maintained itsinstitutional and financial independence, and the organization has continued to be critical of both itself and the broader aid system when appropriate, all in the name of trying to help direct more effective and timely aid to those who need it most.

Proposed exercise: Highlighted text

Create a web page with the following text and highlight the “salamander” word in the last two paragraphs:

Search results for "salamander":

Several species of salamander inhabit the temperate rainforest of the Pacific Northwest.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

Proposed exercise: Highlighted text

Create a web page with the following heading and paragraph, and mark the text “Rebel spies managed to steal secret plans”:

Star Wars Episode IV - A New Hope

It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.

The <sub> and <sup> elements

The <sub> and <sup> elements specify inline text which should be displayed as subscript (or superscript) for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text, and superscripts are usually rendered with a raised baseline using smaller text.

Proposed exercise: Subscripts

Create a web page to display the following text:

One of my favorite molecules is C₈H₁₀N₄O₂, also known as "caffeine".

The horizontal coordinates' positions along the X-axis are represented as x₁ ... x_n.

Proposed exercise: Subscripts

Create a page to display the chemical formula of some common compounds, applying subscript formatting to the numbers (you must print each compound in a different paragraph, using the <p> element). The result should look like this (you must add some other compounds on your own):

Oxygen: O₂
Water: H₂O
Carbon dioxide: CO₂
Vinegar: C₂H₄O₂
Baking soda: NaHCO₃
Sugar: C₁₂H₂₂O₁₁
Alcohol: C₂H₅OH
...

Proposed exercise: Superscripts

Create a web page to display the following text:

The Pythagorean theorem is often expressed as the following equation: a² + b² = c²

One of the most common equations in all of physics is: E = mc²

The ordinal number "fifth" can be abbreviated in English as follows: 5^th

Proposed exercise: Superscripts

Print the squares of the numbers 1 – 25. Each number should be on a separate line (using the <br /> element), next to it the number 2 superscripted, an equal sign and the result. Something like this should be displayed:

1² = 1
2² = 4
...
25² = 625

The <span> element

If we need to mark a text but we consider that none of the existing tags is a good option, we can use the <span> element. Thus, we can isolate a piece of text although there are no changes in the appearence of the text marked when using it on its own (<span>...</span>). The advantage of this tag comes when it is used together with some attributes like class or style, combined with some CSS code. We will work on this deeply in the future, but by now, let’s have a look for example at this code, where we use a <span> element to color only a part of the text inside a paragraph:

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

Proposed exercise: Text color

Using the <p> and <span> elements, create a web page to display the color of the eyes (e.g. blue, brown, green, gray) of some people you know.

Quiz

Test your skills with this quiz about text formatting and some other concepts related to this unit.

HTML. Unit 1. Basic HTML file structure.

Introduction

HTML is the standard markup language for creating web pages. HTML stands for HyperText Markup Language. This language consists on some elements which define some kind of content. An HTML file can be edited by any simple text editor but there are some editors that use colors and tips to help the developer. One of the best free ones is Visual Studio Code. It can be downloaded here.

Elements

Each element has two parts, a start tag and an end tag, and the content inserted in between:

<tagname>Content goes here...</tagname>

The HTML element is defined by everything from the start tag to the end tag. For example:

<h1>My First Heading</h1>
<p>My first paragraph.</p>

Void elements

There are a few elements which are made of only a start tag (usually called “void elements” or “self-closing tags”). A self-closing tag is a special form of start tag with a slash immediately before the closing right angle bracket. These indicate that the element is to be closed immediately, and has no content. For example, in the following code, the void element <br /> is used to print a new line in the middle of a paragraph:

<p>The quick brown fox<br />jumps over the lazy dog.</p>

Attributes

HTML attributes provide additional information about HTML elements. We must keep in mind the following considerations:

All HTML elements can have attributes.
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name=”value”

For example, using the following code we can jump to the page https://www.wikipedia.org (the <a> tag defines an hyperlink, and the href attribute specifies the URL of the page where the link goes to):

<a href="https://www.wikipedia.org">Wikipedia</a>

Internet and web pages

So that an end user can get and read the contents of a web site, some basic steps must be followed:

To make web pages, the developer has to create files written in HTML (with any text editor) and place them on a web server (e.g., using an ftp client).
The HTML in any web page tells the browser what it needs to know to display the page. And, if the developer develops the web site in the right way, the pages will even display well on both desktop and mobile devices.
Once the files are put on a web server, any browser can retrieve the web pages over the Internet.
Finally, the end users will use PCs and other devices connected to the Internet, all running web browsers.

The web server

The web server is just a computer connected to the Internet waiting for requests from browsers:

The developer stores HTML, files, pictures, sounds and other file types.
Browsers make requests for HTML pages or other resources, like images.
If the server can locate the resources, it sends them to the browsers.

The web browser

The web browser is just an application which is in charge of displaying websites:

The server delivers web pages sending them to the browsers.
The browsers retrieve the pages.
The browsers display the HTML pages to the end users.

<!doctype> and <html> elements

All HTML documents must start with a document type declaration, meaning we are using the latest version of HTML (HTML5). The source code of the document itself will be enclosed between the tags <html> and </html>:

<!doctype html>
<html lang="es">
...
</html>

The <head> section

The <head> element will mainly contain information which is not displayed on the screen (metadata, links to libraries, etc.). For example:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap.min.css" />
    ...
  </head>  
  ...
</html>

The <meta> element

Metadata

It is important that your webpages contain a list of metadata items in order to provide search engines (e.g., Google, DuckDuckGo, Bing, etc.) with semantic information such as the author, keywords, description, etc. Since this kind of information will not be shown to the user by the browser, metadata items must be placed inside the <head> tag:

<head>
  <meta name="description" content="My first web page" />
  <meta name="keywords" content="HTML, CSS, JavaScript" />
  <meta name="author" content="John Doe" />
</head>

Charset

One of the most important items inside the <head> section is the definition of the charset , so that the browser will be able to correctly display special characters such as á, é, ü, ñ, etc.:

<meta charset="utf-8" />

Viewport

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. The viewport is the user’s visible area of a web page. It varies with the device, and it will be smaller on a mobile phone than on a computer screen.

You should include the following <meta name="viewport"> element inside all of your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

The <title> element

We can define a title for our document with a tag also in the <head> section. This text will appear in the tab of the browser.

<title>My first page</title>

The <link> element

The <link> element is used to link to external style sheets (CSS):

<link rel="stylesheet" href="mystyle.css" />

The <script> element

The <script> element is used to include or define blocks of client-side JavaScript code:

<!-- Include external JavaScript file -->
<script src="myScript.js"></script>
...
<!-- Define a JavaScript piece of code inside the html file -->
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

The <body> section

Inside the <body> section we must insert the content to be shown by the browser to the user. It will be opened after closing the <head> section and it will be closed before closing the <html> section. For example, using the following code, only the text “Hello!” will be displayed on the screen by the browser:

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="description" content="My first web page" />
  <meta name="keywords" content="HTML, CSS, JavaScript" />
  <meta name="author" content="John Doe" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>Sample page</title>
</head>
<body>
  Hello!
</body>
</html>

Proposed exercise: Hellow world

Create a web page to display the text “Hi World, my name is … !” inside the <body> section. You must fill also the <head> section so that the browser tab shows the “Greeting” title. Finally, insert the rest of the <meta> elements (charset, viewport, author, description and keywords), and check the results using a web browser.

Paragraphs and sections

For a better understanding of the text of our web page, we should divide it in paragraphs and sections.

A paragraph can be inserted between the <p> and </p> tags, and there are some tags for the section headings such as: <h1>, <h2>, <h3>, <h4>, <h5> and <h6> (from largest to smallest):

...
<h1>First level heading</h1>
<p>My first paragraph</p>
<p>My second paragraph</p>
<p>My third paragraph</p>

<h2>Second level heading</h2>
<p>My fourth paragraph</p>
<p>My fifth paragraph</p>
...

Proposed exercise: Paragraphs

Create a web page to display several paragraphs enclosed by the <p> and </p> tags, all of them containing several lines of any text you like. Finally, insert the rest of the <meta> elements (charset, viewport, author, description, keywords and title), and check the results using a web browser.

Proposed exercise: Headings and paragraphs

Create a web page to display several headings of different levels using all tags from <h1> to <h6>. Also put some paragraphs (enclosed by the <p> and </p> tags) with any content you like, each one after a heading. Finally, insert the rest of the <meta> elements (charset, viewport, author, description, keywords and title), and check the results using a web browser.

Proposed exercise: Headings and paragraphs

Use the correct HTML code and also open and close the <h1> and <p> tags in the right place to create a web page to display the following text:

Alicante

Alicante is a city on the Valencian Community, Spain. It is the capital of the province of Alacant and a historic Mediterranean port. The population of the city was 330,525 as of 2016, the second-largest in Valencian Community.

Proposed exercise: Headings

Use the correct HTML tags to create a web page containing six headings with the text “Hello”. Start with the most important heading (the largest) and end with the least important heading (the smallest).

Proposed exercise: Headings and paragraphs

Mark up the following text with appropriate tags (<h1>, <h2>, <h3> and <p>). Start with the most important heading (the largest) and end with the least important heading (the smallest) followed by a paragraph:

Valencia

Valencia is the capital of the autonomous community of Valencia and the third-largest city in Spain after Madrid and Barcelona, surpassing 800,000 inhabitants in the municipality. The wider urban area also comprising the neighbouring municipalities has a population of around 1.6 million people.

Geography

Location

Located on the eastern coast of the Iberian Peninsula and the western part of the Mediterranean Sea, fronting the Gulf of Valencia, Valencia lies on the highly fertile alluvial silts accumulated on the floodplain formed in the lower course of the Turia River.

Climate

Valencia has a subtropical Mediterranean climate with mild winters and hot, dry summers. Snowfall is extremely rare; the most recent occasion snow accumulated on the ground was on 11 January 1960.

The <br /> element

The <br /> element produces a line break in text (carriage-return). It is useful for example for writing a poem or an address, where the division of lines is significant. Keep in mind that you should not use <br /> to create margins between paragraphs, since the <p> tag is much more suitable for those cases.

As you can see from the example below, a <br /> element is included at each point where we want the text to break. The text after the <br /> begins again at the start of the next line of the text block:

<p> 
    O’er all the hilltops<br />
    Is quiet now,<br />
    In all the treetops<br />
    Hearest thou<br />
    Hardly a breath;<br />
    The birds are asleep in the trees:<br />
    Wait, soon like these<br />
    Thou too shalt rest.
</p>

Proposed exercise: Poems

Create a web page containing several poems from different authors, like the one below (you must use <h1> and <h2> headings, paragraphs and line breaks):
Note: You should use an <h1> heading for the main heading and <h2> for the rest of the headings. Also keep in mind that you should not use <br /> to create margins between each poem; use paragraphs to enclose each poem, and line breaks for each line.

POEMS

William Shakespeare

Be not afraid of greatness.
Some are born great,
some achieve greatness,
and others have greatness thrust upon them.

...

Proposed exercise: Addresses

Create a document to display several addresses like the one below (you must use <h1> and <h2> headings, paragraphs and line breaks):
Note: You should use an <h1> heading for the main heading and <h2> for the rest of the headings. Also keep in mind that you should not use <br /> to create margins between each address; as before, use paragraphs to enclose each address, and line breaks for each line.

ADDRESSES

Mozilla

331 E. Evelyn Avenue
Mountain View, CA
94041
USA

...

The <pre> element

The <pre> element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional (“monospace”) font. Whitespace inside this element is displayed as written:

<pre>
 ----------------------------
< I'm an expert in my field. >
 ----------------------------
         \   ^__^ 
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
</pre>

Proposed exercise: ASCII art

Create a document to display some images drawn using characters, similar to the example provided:
Note: You may find some examples at the following links: https://www.asciiart.eu/ , https://en.wikipedia.org/wiki/ASCII_art , https://asciiart.website/ , https://fsymbols.com/text-art/ , etc.

 ----------------------------
< I'm an expert in my field. > 
 ----------------------------
        \   ^__^
         \  (oo)\_______ 
            (__)\       )\/\ 
                ||----w | 
                ||     ||

Quiz

Test your skills with this quiz about paragraphs, headings, and some other concepts related to this unit.

M	T	W	T	F	S	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30