Scribd
Upload
32 views45 pages

Web Programming I - Week 1: Mikheil Rukhaia

This document outlines a course on web programming at the International Black Sea University. It covers an introduction to HTML, including a brief history of the World Wide Web and its components. The course will teach HTML5, CSS3, and JavaScript. Students will complete a midterm exam, laboratory work, and final project and exam. The document provides evaluation criteria and expectations for the course project. It also lists recommended literature and continues with an introduction to HTML markup.

Uploaded by

Mail Ashirov
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
32 views45 pages

Web Programming I - Week 1: Mikheil Rukhaia

This document outlines a course on web programming at the International Black Sea University. It covers an introduction to HTML, including a brief history of the World Wide Web and its components. The course will teach HTML5, CSS3, and JavaScript. Students will complete a midterm exam, laboratory work, and final project and exam. The document provides evaluation criteria and expectations for the course project. It also lists recommended literature and continues with an introduction to HTML markup.

Uploaded by

Mail Ashirov
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

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 Hyper Text Markup Language HTML5 Basics Laboratory Work

Introduction

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 3 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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)

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 4 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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)

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 5 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

How web works?!

(The picture is taken from wikipedia.org)

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

I Server side: PHP, Perl, etc.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 6 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 7 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 8 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 9 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 10 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

Literature

Rob Larsen.
Beginning HTML and CSS.
Wiley Publishing Inc., 2013.

http://www.w3schools.com

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 11 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

Hyper Text Markup Language

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 12 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 13 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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>

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 14 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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>

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 15 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

Comments

I Comments have the following syntax <!-- text -->.

I To avoid problems, comments cannot be:


Placed in an hierarchy
<!-- an <!-- incorrect --> comment -->

Placed inside tags


<Tag <!-- misplaced comment --> attrib=’123’>

End with a minus sign


<!-- incorrect comment --->

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 16 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 17 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 18 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 19 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 20 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 21 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

HTML5 Basics

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 22 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

Basic rule

I HTML is white space collapsing: consecutive spaces, empty


lines and tab characters are displayed as a one space.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 23 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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>


Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 24 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 25 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 26 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

Escape sequences

Entity Character
&amp; &
&gt; >
&lt; <
&apos; ’
&quot; ”

I These entities are used in the text to avoid mismatch errors with
the markups.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 27 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 28 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 29 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 30 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 31 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 32 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 33 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 34 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 35 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 36 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

Lists

I Unordered lists: list of bullet points.

I Ordered lists: list of enumerated points.

I Definition lists: list of terms and definitions.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 37 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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>

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 38 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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>

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 39 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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,. . .

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 40 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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>

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 41 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 42 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

Laboratory Work

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 43 / 45
Introduction Hyper Text Markup Language HTML5 Basics 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.

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 44 / 45
Introduction Hyper Text Markup Language HTML5 Basics Laboratory Work

Discussion?!

Web Programming I — Week 1 M. Rukhaia International Black Sea University August 27, 2018 45 / 45

You might also like