Introduction to HTML

(1)

Introduction to HTML

Jes´us Arias Fisteus

Web Applications (2022/23)

(2)

¡Hello World!

1

<!DOCTYPE html>

2

<html>

3

<head>

4

<meta charset=”UTF =8” >

5

< title >My first HTML page</title>

6

</head>

7

<body>

8

<p>Hello World!</p>

9

</body>

10

</html>

Web Applications (2022/23) Introduction to HTML 2

(3)

The document head

The head element contains information about the document

that won’t be visually presented by the browser.

(4)

The document head

Some elements that can appear at the document head:

I meta: metadata regarding the document, such as its MIME

type and character encoding system.

I title: page title.

I link

: link to an external resource (e.g. metadata, style sheet, etc.).

I style: style sheet embedded within the document.

I script

: code of a program embedded within the document, usually Javascript, or reference to an external resource that contains the code.

(5)

The document body

The body element represents the contents of the document itself, i.e. the part of it intended to be visually presented by

the browser.

Its content is structured with elements that represent

paragraphs, tables, images, forms, lists, etc.

(6)

White spaces

1 <p>

2 If t h e r e are m u l t i p l e c o n s e c u t i v e w h i t e s p a c e s

3 t h e y are t r e a t e d as if t h e r e w e r e j u s t one .

4 End of l i n e c h a r a c t e r s and t a b s

5 are t r e a t e d as if t h e y w e r e j u s t

6 w h i t e s p a c e c h a r a c t e r s .

7 < /p>

(7)

Comments

1

<! == Anything a p p e a r i n g between comment

2

marks i s i g n o r e d by t h e b r o w s e r == >

(8)

Pre-formatted text

1 <pre>

2 public class CircleAreaCalc {

3

4 private BigDecimal pi;

5

6 public CircleAreaCalc ( int numDigits) {

7 PiCalc piCalc = new PiCalc(numDigits);

8 pi = piCalc.compute();

9 }

10

11 public BigDecimal area(BigDecimal radius) {

12 BigDecimal area = radius .pow(2);

13 area = area. multiply ( pi ) ;

14 return area ;

15 }

16 }

17 </pre>

(9)

Block and inline elements

The elements that appear at the body of a document can be:

I Block elements:

there is a line break before and after them.

I Examples: p,table,div,pre,h1, etc.

I Inline elements:

they are displayed within the normal flow of a paragraph, without forcing line breaks.

I Examples: em,strong,a,img, etc.

(10)

Semantic markup

Elements that control how text needs to be presented:

I em: emphasis (typically, italics).

I strong

: strong emphasis (typically, boldface).

I i

: italics.

I b

: boldface.

I small

: additional comments to be typed with a smaller font such as, for example, legal remarks in advertisements.

(11)

Semantic markup

1

<p>

2

This web application allows you to <em>buy</em>

3

and <em>sell</em> second hand objects

4

<strong>only</strong>.

5

</p>

6

7

<p>

8

<small>The service provider can close this service

9

without any prior warning.</small>

10

</p>

(12)

Images

The

img

element represents an image:

I

It’s an inline element.

I

A textual description should also be provided for visually impaired people.

I

The size of the image can be scaled in width and/or height.

(13)

Images

1

<p>

2

<img src=”logo=uc3m.jpg” alt=”UC3M logo”>

3

<img src=”logo =uc3m.jpg” width=”100”

4

alt =”UC3M logo”>

5

<img src=”logo=uc3m.jpg” width=”100” height=”100”

6

alt =”UC3M logo”>

7

</p>

(14)

Hyperlinks

An HTML document can link through hyperlinks to:

I

External objects: another HTML page, or a specific position of it, files to be downloaded, etc.

I

Another position of the same document, e.g. a link to another section of the same document.

(15)

Hyperlinks

1

<p>

2

The <a href=”http://www.uc3m.es/”>Universidad

3

Carlos III de Madrid</a> university was founded in 1989.

4

</p>

5

<p>

6

<a href=”http://www.uc3m.es/”>

7

<img src=”logo=uc3m.jpg”></a>

8

</p>

9

<p>

10

This <a href=”http://www.uc3m.es/” target=” blank”>

11

hyperlink </a> will open at another tab.

</p>

(16)

Hyperlinks

1

<p>

2

This topic will be explained more in depth

3

<a href=”#p3”>later in this document</a>.

4

</p>

5

(...)

6

<p id=”p3”>

7

The complexity of this topic is ...

8

</p>

(17)

Ordered lists

1 <p>

2 This is an ordered list

3 (the order of its items is relevant ) :

4 </p>

5 <ol>

6 <li>First point .</li>

7 <li>Second point.</li>

8 </ol>

9

10 <p>

11 Number, letters , etc . can be chosen:

12 </p>

13 <ol type=”a”>

14 <li>First point .</li>

(18)

Unordered lists

1

<p>

2

This is an unordered list

3

(the order of its items is irrelevant ) :

4

</p>

5

<ul>

6

<li>First point .</li>

7

<li>Second point.</li>

8

</ul>

(19)

Tables

1 <table>

2 <thead>

3 <tr>

4 <th>Date</th><th>Place</th><th>Price</th>

5 </tr>

6 </thead>

7 <tbody>

8 <tr>

9 <td>10-09-2014</td><td>Madrid</td><td>60</td>

10 </tr>

11 <tr>

12 <td>12-09-2014</td><td>Sevilla</td><td>50</td>

13 </tr>

14 <tr>

15 <td>13-09-2014</td><td>M´alaga</td><td>50</td>

16 </tr>

17 </tbody>

18 <tfoot>

19 <tr>

20 <td>TOTAL:</td><td></td><td>160</td>

(20)

Sections

Markup for sectioning a document:

I

Document or section header: element

header.

I

Document or section footer: element

footer

.

I

Navigation links: element

nav

.

I

Secondary/related information: element

aside

.

I

Contact information: element

address

.

I

Self-contained content unit: element

article.

I

Plain section (without specific semantics): element

section

.

(21)

Titles

Markup for the title of sections and other parts of a document:

I

Elements

h1

,

h2

,

h3

,

h4

,

h5

and

h6

.

(22)

Sections

1 <article>

2 <header>

3 <h2>Apples</h2>

4 <p>Tasty, delicious fruit !</p>

5 </header>

6 <p>The apple is the pomaceous fruit of the apple

7 tree .</p>

8 <section>

9 <h3>Red Delicious</h3>

10 <p>These bright red apples are the most common

11 found in many supermarkets.</p>

12 </section>

13 <section>

14 <h3>Granny Smith</h3>

15 <p>These juicy, green apples make a great

16 filling for apple pies .</p>

17 </section>

18 </article>

(23)

Grouping content: div and span

I

Sometimes grouping several pieces of content in just one element is useful. For example, in order to:

I Apply CSS style attributes to them as a whole.

I Manipulate them as a whole by a program.

I Group several inline elements within a single block element.

I

Two elements for grouping (without specific semantics):

I Elementdiv: grouping as a block element.

I Elementspan: grouping as an inline element.

(24)

Forms

I

Forms allow users to enter information in a web page.

I

Several types of controls to enter different kinds of data: text, dates, numbers, lists, check boxes, files, etc.

I

The data are typically uploaded to the server through an HTTP request.

(25)

Forms

1

<form action=”http://example.com/search”>

2

<label>

3

Text: <input type=”search” name=”term”>

4

</label>

5

<input type=”submit” value=”Search”>

6

</form>

(26)

Forms: the input element

type attribute Use

text A line of text

search A line of text, with search semantics

tel A phone number

url A URL

email An email address

password A line of text, for security-sensitive information number A number

range A number for which full precision isn’t needed color A color

hidden A hidden value, not rendered in the form

(27)

Forms: the input element

type attribute Use

checkbox A check box (multiple selection allowed) radio A radio button (just one can be selected)

file A file

submit A button to submit the form

image An image to submit the form (image coordinates where the user clicked are included)

reset A button to reset the form to its default values button A generic button

(28)

Forms: the input element

type attribute Use

datetime Date and time, with UTC time zone

date Date (day, month and year)

month Date as month (month and year) week Date as week (number of week, year)

time Time, without time zone

datetime-local Date and time without time zone

(29)

Forms: the select element

The select element defines a pop-up menu.

1

<label for =”unittype”>Select unit type :</label>

2

<select id=”unittype” name=”unittype”>

3

<option value=”1”>Miner</option>

4

<option value=”2”>Puffer</option>

5

<option value=”3” selected>Snipey</option>

6

<option value=”4”>Max</option>

7

<option value=”5”>Firebot</option>

</select>

(30)

Forms: the textarea element

The textarea element defines a multi-line box to enter text.

1

<textarea name=”message” rows=”5” cols=”80”

2

placeholder =”write your message here ... ”></textarea>

(31)

Forms: common attributes of controls

Attribute Use

name Name of the control. When the form is submitted to the server, both name and value of each control are sent.

maxlength Maximum number of characters that can be entered.

minlength Minimum number of characters that must be entered.

disabled If used, users cannot interact with the control.

autofocus If used, this control receives focus when the page is loaded.

autocomplete Its value can be on (by default) or off. If it’s on, browsers are allowed to store the values entered for doing autocomplete suggestions later. It should be

(32)

Forms: common attributes of the input control

Attribute Use

size Visible size of this control (as a number of characters).

readonly If present, the value of this control cannot be changed.

required If present, the form cannot be submitted until a value is entered for this control.

pattern Regular expression to validate the value of this control.

min Minimum value for numerical values.

max Maximum value for numerical value.

step Step between two consecutive numerical values.

list List of values to be suggested to the user (in combina- tion with thedatalistelement).

placeholder Hint about the kind of value expected in this control.

(33)

Forms: grouping controls

The fieldset element groups related controls. They are usually displayed with a frame surrounding all the controls in

the group. The title for the group is set with the legend

element.

(34)

Forms: grouping controls

1 <fieldset>

2 <legend>Display</legend>

3 <div>

4 <label>

5 <input type=”radio”name=”c”value=”0”checked> Black on White

6 </label>

7 </div>

8 <div>

9 <label>

10 <input type=”radio”name=”c”value=”1”> White on Black

11 </label>

12 </div>

13 <div>

14 <label>

15 <input type=”checkbox”name=”g”> Use grayscale

16 </label>

17 </div>

18 </fieldset>

(35)

Forms: suggesting values

The datalist element defines lists of values, which can be linked to input controls through their list attribute.

1

<label>

2

Country

3

<input type=”text” name=”country” list=”countries”>

4

</label>

5

<datalist id=”countries”>

6

<option value=”Spain”>

7

<option value=”Portugal”>

8

<option value=”Andorra”>

(36)

Forms: multiple files

The multiple attribute allows the user to select and upload more than one file in input controls of type file .

1

<label>

2

Select one or more pictures :

3

<input type=”file” name=”picture” multiple required >

4

</label>

(37)

Compatibility with browsers

HTML5 is a “live” stantard in constant evolution: some features might not be available in some browsers or in their

older versions.

Supporting older browsers and, at the same time, benefiting from the new HTML features is complex, but there are resources that help: Javascript libraries such as Modernizr, Web sites that collect compatibility information, such as Can

I Use.

(38)

References

I

Rob Larsen, Beginning HTML and CSS. Wrox (2013).

I Access at O’Reilly through UC3M Library I Chapters 1, 2, 3, 4, 5 and 6.

I

MDN Web Docs, “HTML: HyperText Markup Language”

I

HTML5 specification at WHATWG:

I http://www.whatwg.org/specs/web-apps/

current-work/multipage/