5 de September de 2020 - Fernando Ruiz Rico

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

Day: September 5, 2020

HTML. Unit 1. Basic HTML file structure.

Introduction

Elements

Void elements

Attributes

Internet and web pages

The web server

The web browser

<!doctype> and <html> elements

The <head> section

The <meta> element

Metadata

Charset

Viewport

The <title> element

The <link> element

The <script> element

The <body> section

Proposed exercise: Hellow world

Paragraphs and sections

Proposed exercise: Paragraphs

Proposed exercise: Headings and paragraphs

Proposed exercise: Headings and paragraphs

Proposed exercise: Headings

Proposed exercise: Headings and paragraphs

The <br /> element

Proposed exercise: Poems

Proposed exercise: Addresses

The <pre> element

Proposed exercise: ASCII art

Quiz