Web Programming I - Week 1: Mikheil Rukhaia

Web Programming I — Week 1
Mikheil Rukhaia
International Black Sea University,

Tbilisi, Georgia
August 27, 2018

Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work
Outline
1 Introduction
2 Hyper Text Markup Language
3 HTML5 Basics
4 Laboratory Work
Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 2 / 45
Introduction
History of WWW
I In 1989 Tim Berners-Lee proposed an idea of web for better com-

munication between CERN computers.
I In 1990 Robert Cailliau proposed to use hypertext to link and ac-

cess information.
I On 6 August 1991 Tim Berners-Lee released first web page on a

web server.
I On 23 August 1991 external users accessed the page. (official

birthday of W3)
First components of WWW
I URL: Uniform Resource Locator (by Tim Berners-Lee)
I HTML: Hyper Text Markup Language (by Tim Berners-Lee and

Robert Cailliau)
I HTTP: Hyper Text Transfer Protocol (by Ted Nelson)
How web works?!
(The picture is taken from wikipedia.org)
I Client side: HTML, CSS, JavaScript, etc.
I Server side: PHP, Perl, etc.
We will learn
I HTML5: latest version of HTML, used to describe the structure

of web pages.
I CSS3: latest version of CSS, used to control document style and

how it should appear.
I JavaScript: used to add interactivity to the web pages (the

browser side), and related techniques such as jQuery and Ajax.
Evaluation schema
I Midterm Exam, Attendance/Activity, and Course

Project/Presentation — 60%.
I Final Exam — 40%.
I Final grade: ME × 0.3 + AA × 0.15 + CP × 0.15 + FE × 0.4
Course project
I Groups of max. 2 persons (you can do it alone as well).
I Think yourself what you want to do and write 1 or 2 pages

proposal (sooner you do so, more time you have to implement it).
I Each member of the group must participate in the final

presentation.
Take in mind
A good web site should:
I Support as many web browsers and media types as possible.
I Be usable: easy for users to get around (or navigate).
I Be accessible: available to people with disabilities.
Literature
Rob Larsen.
Beginning HTML and CSS.
Wiley Publishing Inc., 2013.
http://www.w3schools.com
Hyper Text Markup Language
What is HTML?
I HTML: Hyper Text Markup Language.
I To use HTML5 it is mandatory to use <!DOCTYPE html>

declaration at the beginning.
I Without the declaration browser switches to quirks mode,

allowing some funky rules from the old versions of HTML.
Basic skeleton
I The basic skeleton of HTML document becomes:

<!DOCTYPE html>
<html>
<head>
<title> web page title </title>
</head>
<body>
The body of the web page
</body>
</html>
Backward compatibility
I Internet Explorer 8 and older versions cannot recognize HTML5

tags and CSS rules are not applied to them.
I Thus web page looks simply wrong in these browsers.
I To solve this problem, there are several libraries like

html5shiv and modernizr.
I You can include them in the document using the following links:
<script
src="http://cdnjs.cloudflare.com/ajax/libs/
html5shiv/3.6/html5shiv.min.js">
// or
// modernizr/2.6.1/modernizr.min.js">
</script>
Comments
I Comments have the following syntax .
I To avoid problems, comments cannot be:

Placed in an hierarchy
 comment -->
Placed inside tags

<Tag  attrib=’123’>
End with a minus sign


The <head> element
I <base> to specify a base URL for a page.
I <link> to link to an external file, e.g. CSS.
I <style> to include CSS rules inside the document.
I <script> to include script in the document.
I <meta> to include meta-information, such as keywords,

description, etc., which are helpful for search engines.
The <title> element
I It should be always specified and must be descriptive.

<title>Mikheil’s personal web page </title>
I It is used:
At the very top of a browser window.
As the default name for a bookmark.
By search engines to help index pages.
I Should contain only text, no other elements.
The <body> element
I Contains body content: what you actually see in a browser.
I (Almost) All tags you learn in the course are written inside the
<body> element.
I All elements inside the <body> element can have:

Core attributes: id, class, title, and style.
UI events: onclick, ondoubleclick, onmouseover, onkeypress, etc.
Core attributes
I id: uniquely identify any element within a page (should start

with letter or underscore).
I class: list of classes where element belongs to; used with CSS.
I title: title of the element; displayed as a tooltip or while the

element is loading.
I style: used to specify CSS rules within the element.
UI attributes
I Associate events with scripts.
I The names are self-descriptive.
I Common events: onclick, ondoubleclick,

onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup.
I Form events: onfocus, onblur, onsubmit, onreset,

onselect, onchange.
HTML5 Basics
Basic rule
I HTML is white space collapsing: consecutive spaces, empty

lines and tab characters are displayed as a one space.
Common elements
I Headings <h1>-<h6>, paragraphs <p>, preformatted sections

<pre>, line breaks <br />, and addresses <address>
I Grouping elements: <div>, <header>, <footer>,

<hgroup>, <nav>, <section>, <article>, <span>
I Presentational elements: <b>, <i>, <sup>, <sub> and <hr>
I Phrase elements: <em>, <strong>, <abbr>, <dfn>,

<blockquote>, <q>, <cite>, <code>, <kbd>, <var>,
and <samp>
I Lists: unordered <ul> and <li>; ordered <ol> and <li>; and
definition lists <dl>, <dt>, and <dd>
I Editing elements: <ins> and <del>

Headings
I <h1>, <h2> and <h3> are larger than the default text size.
I <h4> has the same size as the default text.
I <h5> and <h6> are smaller than the default text size.
Paragraphs
I Paragraphs should be written inside <p> element.
I Browser usually inserts a new line before the next paragraph and
adds a little bit of extra vertical space.
I Use <br /> for line breaks.
I Whitespace is important: if you omit it, older browsers won’t

handle it.
Escape sequences
Entity Character
& &
> >
< <
' ’
" ”
I These entities are used in the text to avoid mismatch errors with
the markups.
Preformatted text
I Any text in the <pre> element will preserve the formatting.
I Browser will display it with monospaced fonts by default.
I Usually it is used to represent computer source code.
Grouping elements
I Grouping of elements have no effect on their own, but very

important for CSS.
I <div> groups block-level elements.
I <span> groups inline elements only.
Grouping elements (ctd.)
I <header>: used to mark up headers for pages, articles and the

like.
I <hgroup>: used to group together multiple levels of headings

having some logical connection.
I <footer>: used to mark up footers; commonly used for legal

copy.
I <nav>: used to represent a navigation section of the page,

containing links to other pages or sections within the page.
I <section>: used to represent a section of a document.
Grouping elements (ctd.)
I <article>: used to mark up “independent content”; it can be

shared without the rest of the site context (e.g. a blog post, a
movie review, a news article, etc.).
I <aside>: used to mark up related content to the surrounding

one (e.g. sidebars, ads. and the like).
I <figure> and <figcaption>: used to mark up figures or

illustrations and their labels (mainly used around <canvas>).
I <mark>: used to mark text like a highlighter in a paper book.
Presentational Elements
I <b>: display bold text, but not necessarily using boldface font.
I <i>: display italicized text, but not necessarily using italicized

font.
I <sup>: display superscript; font size is the same, but may create
a taller gap between lines.
I <sub>: display subscript; font size is the same, but may create a
taller gap between lines.
I <hr />: creates a horizontal rule.
Phase elements
I <em> and <strong> are almost the same as <i> and <b>.
I <blockquote> creates separate block of text indented from

the left and right edges.
I <q> quotes text within sentence.
I <cite> used for citations.
Phase elements (ctd.)
I <abbr> indicates abbreviation. title attribute can be used to

specify full version of abbreviation.
I <acronym> indicates acronyms. title attribute can be used

to specify full version of acronyms.
I <dfn> indicates special terms. Typically it is used when a key

term is introduced for the first time.
Phase elements (ctd.)
I <code> indicates computer source code; unlike <pre> it does

not preserve whitespaces.
I <kbd> indicates keyboard input.
I <var> indicates variables in the code.
I <samp> indicates sample output from a program, script, etc.
I <address> indicates snail-post address.
Editing text
I It is usually a good practice to keep track of the changes you

make in text (like, e.g., MS Word’s Track Changes does).
I <ins> to add text (underline).
I <del> to delete some text (strikethrough).
I With CSS it is possible to show and hide the inserted and deleted
content as required.
Lists
I Unordered lists: list of bullet points.
I Ordered lists: list of enumerated points.
I Definition lists: list of terms and definitions.
Unordered lists
I <ul> creates unordered list.
I <li> creates list item.
I Example:
<ul>
<li>Bullet point number one</li>
<li>Bullet point number two</li>
<li>Bullet point number three</li>
</ul>
Ordered lists
I <ol> creates ordered list.
I It has type and start attributes to change enumeration style.
I It is recommended instead of these attributes to use CSS.
I Example:
<ol type="i" start="4">
<li>Point number one</li>
<li>Point number two</li>
<li>Point number three</li>
</ol>
Ordered list style
Value for type Description Example

1 Arabic numerals (default) 1,2,3,4,. . .
A Capital letters A,B,C,D,. . .
a Small letters a,b,c,d,. . .
I Roman numerals I,II,III,IV,. . .
i Small roman numerals i,ii,iii,iv,. . .
Definition lists
I <dl> creates definition list.
I List item consist of <dt> and <dd> elements, referring to the

term and its definition respectively.
I Example:
<dl>
<dt>Unordered List</dt>
<dd>A list of bullet points.</dd>
<dt>Ordered List</dt>
<dd>A list of enumerated points.</dd>
<dt>Definition List</dt>
<dd>A list of terms and definitions.</dd>
</dl>
Block and inline elements
I Block-level elements start on their own new line, and anything

that follows them appears on its own new line, too.
<p>, <h1>-<h6>, <ul>, <ol>, <dl>, <pre>,
<hr />, <blockquote>, <address>
I Inline elements appear within sentences and do not have to

appear on their own new line.
<b>, <i>, <u>, <em>, <strong>, <sup>, <sub>,
<big>, <small>, <li>, <ins>, <del>, <code>,
<cite>, <dfn>, <kbd>, <var>
I Block-level elements can contain inline elements, but not vice

versa.
Laboratory Work
Exercises
I Create a web page containing important information about you

(a short CV).
I Use as many text formatting elements as possible.
I Use different kind of lists.
Discussion?!

Web Programming I - Week 1: Mikheil Rukhaia

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Programming I - Week 1: Mikheil Rukhaia

Uploaded by

Copyright:

Available Formats

Web Programming I — Week 1

International Black Sea University,

August 27, 2018

2 Hyper Text Markup Language

I In 1989 Tim Berners-Lee proposed an idea of web for better com-

I In 1990 Robert Cailliau proposed to use hypertext to link and ac-

I On 6 August 1991 Tim Berners-Lee released first web page on a

I On 23 August 1991 external users accessed the page. (official

First components of WWW

I URL: Uniform Resource Locator (by Tim Berners-Lee)

I HTML: Hyper Text Markup Language (by Tim Berners-Lee and

I HTTP: Hyper Text Transfer Protocol (by Ted Nelson)

How web works?!

(The picture is taken from wikipedia.org)

I Client side: HTML, CSS, JavaScript, etc.

I Server side: PHP, Perl, etc.

I HTML5: latest version of HTML, used to describe the structure

I CSS3: latest version of CSS, used to control document style and

I JavaScript: used to add interactivity to the web pages (the

I Midterm Exam, Attendance/Activity, and Course

I Final Exam — 40%.

I Final grade: ME × 0.3 + AA × 0.15 + CP × 0.15 + FE × 0.4

I Groups of max. 2 persons (you can do it alone as well).

I Think yourself what you want to do and write 1 or 2 pages

I Each member of the group must participate in the final

A good web site should:

I Support as many web browsers and media types as possible.

I Be usable: easy for users to get around (or navigate).

I Be accessible: available to people with disabilities.

Hyper Text Markup Language

I HTML: Hyper Text Markup Language.

I To use HTML5 it is mandatory to use <!DOCTYPE html>

I Without the declaration browser switches to quirks mode,

I The basic skeleton of HTML document becomes:

I Internet Explorer 8 and older versions cannot recognize HTML5

I Thus web page looks simply wrong in these browsers.

I To solve this problem, there are several libraries like

I Comments have the following syntax .

I To avoid problems, comments cannot be:

Placed inside tags

End with a minus sign

The <head> element

I <base> to specify a base URL for a page.

I <link> to link to an external file, e.g. CSS.

I <style> to include CSS rules inside the document.

I <script> to include script in the document.

I <meta> to include meta-information, such as keywords,

The <title> element

I It should be always specified and must be descriptive.

I Should contain only text, no other elements.

The <body> element

I Contains body content: what you actually see in a browser.

I All elements inside the <body> element can have:

UI events: onclick, ondoubleclick, onmouseover, onkeypress, etc.

I id: uniquely identify any element within a page (should start

I title: title of the element; displayed as a tooltip or while the

I style: used to specify CSS rules within the element.

I Associate events with scripts.

I The names are self-descriptive.

I Common events: onclick, ondoubleclick,

I Form events: onfocus, onblur, onsubmit, onreset,

I HTML is white space collapsing: consecutive spaces, empty