Download Tag - Personal web pages for people of Metropolia

Web Development Basics
Lecture 1 - Introduction
Patrick Ausderau
Contents
 Course introduction and project
 What is WWW?
 What is HTML?
 Tags
 Attributes
 Structure
Course Info





3 hours, includes lecture (2/3) and labs (1/3)
3 credits
7 lectures and 6 labs
Last lab will be reserved for the projects
Exam?
Grading
 To pass the course you must:
 Return your project
 Pass the exam?
 Labs: ±1 grade
 Compulsory:
 Project max: 40 points
 Exam max: 40 points?
Goals
 After this course you will be able to:
 Understand HTML 4 & 5
 Understand XHTML 1.1 & 5
 Understand CSS 2 & 3
 Be familiar with web standards
 Know a few software tools in web development
 Introduction to SVG
 Know the work flow in a web development
project?
 Introduction to MathML?
 Introduction to mobile web?
What is WWW?
 The Internet is a global system of interconnected
computer networks
 The World Wide Web is a collection of interlinked
hypertext documents and other resources
accessed via the Internet
 Often abbreviated as WWW or W3 or "The Web"
 In short:
 The Web ≠ The Internet
 The Web ~= All the web sites
 Web site is a collection web pages
What is WWW? – Internet Protocols
 To run as a service over the Internet, the WWW
uses the Hypertext Transfer Protocol (HTTP) or
the Secure Hypertext Transfer Protocol (HTTPS).
 HTTP functions as a request-response protocol
(client-server) where the client can be a Web
Browser, Crawler, Mobile app, etc.
 Many others services run over the Internet using
their own protocols
 E-mail (SMTP, POP, IMAP), Remote connection (SSH,
telnet), File transfer (FTP, TFTP), Chat (IRC), RTP,
RTMP, DNS, DHCP, RPC, NTP, LDAP, XMPP, etc.
What is WWW?
 A Web page is stored on a Web server also called
an HTTP server.
 To view a Web page, the user runs a software
called a Web browser.
 The Web browser retrieve Web page by its URL
(either by typing the URL of the page in address bar or by
following a hyperlink to it) .
 The browser then requests the resource to the Web
server (using HTTP request) , parse the HTML text of
the page, display it and do additional requests for
images, files, etc. to complete the page rendering.
What is WWW?
 Web pages are text files written in HTML
(HyperText Markup Language) with .html or .htm
filename extension.
 Markup Language is an artificial language used
to describe and format documents and their
content.
 HTML is the common markup language of the
Web. It is the building blocks of all basic
websites.
 HTML is not a programming language – it is a
markup language i.e. a set of markup tags.
HTML – The language of the Web
 It is written in the form of HTML elements
consisting of "tags" surrounded by angle
brackets within the web page content.
 It is the job of the Web browser to interpret
these tags and render the text and other
elements accordingly.
 HTML documents can be displayed across
different operating systems.
HTML – Web Browsers
 The most common Web browsers used today
are:
 Microsoft Internet Explorer (IE)
 Mozilla Firefox
 Google Chrome
 Apple Safari
 Opera
HTML – Web Browsers Layout Engine
The layout engine is the software component responsible to
parse the mark up content (HTML, XML, XHTML, images (PNG,
JPEG, GIF, SVG), MathML, etc.) and the formatting information
(CSS, XSL, etc.) to display the formatted content on screen
(computer, mobile, TV, etc.) or on print. It also interpret and
execute scripting language (ECMA & JavaScript).
 KDE's open-source KHTML 1999 used by Konqueror
 Basis for WebKit 2001 (TM 2013 Apple) used by Safari, Chrome (27 -)
 Forked to Blink 2013 used by Chrome (28+), Chromium, Opera (15+)
 Mozilla open-source Gecko 1997 used by Firefox
 Microsoft proprietary Trident end 1997 used by IE
 Opera proprietary Presto (2003-2012) used by Opera (12.16-)
HTML continued
 HTML has a set of rules, called syntax.
 Syntax are a set of standards or specifications
developed by a consortium of Web developers,
programmers, and authors called the World Wide
Web Consortium (W3C).
 http://www.w3.org
 HTML extensions have been added to support new
features, which have been adopted in subsequent
sets of standards released by the W3C.
 These extensions have provided Web page authors
with more options.
Versions of HTML
 HTML 1.0 (1989-1994)
 The first public version of HTML supported
images and text controls.
 HTML 2.0 (1995)
 The first version supported by all graphical
browsers.
 HTML 3.0 (1997)
 better tables, better form options.
Versions of HTML
 HTML 4.01 (1999)
 Added support for style sheets.
 New features for tables and forms.
 Expanded HTML’s scripting capability.
 Increased support for multimedia.
 HTML 5 (started in 2004), Candidate Recommendation
(2013)
 APIs.
 Video, audio playback.
 Drag-and-drop.
 consideration for other devices (smartphones,
tablets, etc.).
Versions of XHTML
 XHTML (eXtensible HyperText Markup Language)
 Strict, with more elements and attributes
deprecated.
 File extension .htm or .html or .xhtml or .xht or
.xml
 XHTML 1.0 (2001)
 A reformulation of HTML 4.01 and XML; combines
the strength of HTML and power of XML.
 XHTML 2.0 – NOT a standard (2002-2006, dropped
in 2009)
 Is incompatible with XHTML 1.x.
Versions of XHTML
 XHTML Mobile Profile 1.1 (2004), 1.2 (2007),
1.3 (2008)
 standardized by OMA (Open Mobile Alliance)
 Subset of XHTML for mobile and low resources
devices
 XHTML 1.1 (2001, 2 nd edition 2010)
 Module based (Basic, Print)
 better support for East-Asian languages
 XHTML 5 – Candidate Recommendation (2013)
 Update to XHTML 1.x, is being defined
alongside HTML 5.
Web Development
 Web development is focusing more on XML
(Extensible Markup Language) and XHTML for
developing document content.
 XML combined with style sheets provides the
same functionality as HTML, but with greater
flexibility.
 XHTML was designed to overcome some of the
problems with competing HTML standards.
 But the war was lost: the new upcoming
standard is HTML5
Tools for Creating HTML Documents
 HTML documents are text files.
 A text editor such as Notepad (++) can be used to
create/modify an html page.
 An HTML converter like Microsoft Word takes text in
one format and converts it to HTML code (does
poor code).
 An HTML editor helps you create an HTML file by
inserting HTML codes for you as you work (e.g.
often embedded in IDE).
 “WYSIWYG editors” (What You See Is What You
Get): DreamWeaver, Microsoft Expression Web, etc.
HTML Syntax
 Document content is what the users sees on the
page, such as headings, text and images.
 Tags are the HTML codes that control the
appearance of the document content.
 Tag is the name of the HTML tag.
 Attributes are the properties of the tag.
 Document content is the actual content that
appears on the Web page.
HTML Tags
 Tags are surrounded by angle brackets <tag>
 Tags can be one-sided or two-sided.
 two-sided tags contain an opening tag <b>
that tells the browser to turn on a feature and
apply it to the content that follows, and a
closing tag </b> that turns off the feature.
 one-sided tags are used to insert non character
data into the Web page, such as a graphic
image or video clip <br> (or strict <br/>).
HTML Tags
 Tag are not case sensitive
<B> is the same as <b>
but w3c recommends to use lowercase.
 XHTML imposes the lowercase.
 Tags can be nested
but must be completely within each other,
without overlapping
 <p>This <em>is <strong>correct</strong>.</em></p>
 <p>This <em>is <strong>wrong</em>!</strong></p>
HTML Tags Attributes
 Tags can have attributes.
 An attribute gives additional information for the
tag.
 key / value(s) inside the tag.
 The key should be unique within the tag.
 Key/value are case insensitive (prefer lower case!).
 Value should always be enclosed in quote (single or
double quote).
 Always specified in the opening tag (for twosided tags).
 <table id="my_table" border="3"> … </table>
HTML Document Skeleton
 The document starts with a declaration of which
version of HTML is used <!doctype …>.
 So the browser knows what “grammar” is used (e.g. help to
speed up the parsing).
 The <html> ... </html> acts as a container for the
document.
 <head> tags includes heading information of the
document like the <title> (that is seen in top of the
browser Window (tab)), style sheets, scripts as well
as metadata (information about the page).
 The <body> is the part where the content is.
Nothing outside the body tags is visible for the enduser of your page.
HTML 4 Document Skeleton
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> document's title </title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
</head>
<body>
your document's content goes here
</body>
</html>
XHTML Document Skeleton
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> document's title </title>
<meta http-equiv="Content-Type"
content="text/xhtml; charset=UTF-8"/>
</head>
<body>
<p>some text content here</p>
</body>
</html>
Tags – Text and Font
 Fonts can be set up by using CSS (cascading
style sheets).
 CSS settings can be placed in external file or in
the HTML document’s head section.
 An external document is a recommended
solution, since then the same document can be
use in all HTML pages and the fonts look the
same. If the font settings are changed, all pages
are updated by updating just one CSS file.
 The path to CSS file must be included in the
head section of the HTML document.
Tags – Text and Font
 Some font settings are available in HTML by
their own tags:
 <em>Italic</em>
 <strong>Bold</strong> <b> is bold too</b>
 <ins>Underlined</ins> (<u>Deprecated</u>)
 <del>strike-through</del>
(<s>Deprecated</s>)
 <big>, <small>, <sub>, <sup>
 <hr> for a horizontal ruler (line) separation
Tags – Text and Font
 Six levels of headings
 numbered <h1> through <h6>, with <h1>
being the largest and most prominent.
 (<h1> should be used only once per page).
 Headings, as other tags, can have attributes
such as alignment, etc.
 Paragraph
 Text paragraphs should be separated with tag
<p> (and recommended to be close with
</p>).
Tags – Text and Font








<dfn>Definition term</dfn>
<code>Computer code text</code>
<samp>Sample computer code text</samp>
<kbd>Keyboard text</kbd>
<tt>Teletype text</tt>
<var>Variable</var>
<cite>Citation</cite>
<q>Short quotation</q>
 More formatting with CSS!
Tags – List
 HTML supports three kinds of lists:
 an ordered list, which is used to display
information in a numeric order <ol>, <li>.
 an unordered list, which list items are not listed
in a particular order i.e. bullets <ul>, <li>.
 a definition list, which is a list of terms, each
followed by a definition line that is typically
indented slightly to the right <dl>, <dt>,
<dd>.
 A nested list, will produce a "sub list" (indented).
Tags – List
 A simple list, familiar to these lists in Powerpoint
slides is unordered list.
<h3>This is a list</h3>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
Tags – Images
 Inserting graphics
 <img src="dir/image.jpg" alt="alternative">
 The source src and alternative text alt attributes must
be present.
<p><img src="imgFolder/sun.jpg" alt="sunset"
width="32" height="21" align="left" title="nice
sunset :)"> This text will be flowed around the
right side of the graphic.</p>
 Formats that should be supported by all
browsers are jpeg (jpg), gif, png and svg.
Special Characters
 Special characters and codes
 Laguage specific: ä &auml; Ä &Auml; ç &ccedil;
ñ &ntilde; å &aring; ß &szlig;
 By using right charset, character can be used instead
 registered trademark symbol ® &reg;
 copyright symbol © &copy;
 Less/greater than < &lt; > &gt; (because <> can be
confuse with tags as well as the Ampersand & &amp;)
 nonbreaking space &nbsp;
 Sqare/cube 2 3 &sup2; &sup3;
 Plus-minus ± &plusmn;
 Degree °&deg;
 Etc.
Tags – Language
 With the language lang attribute
<html lang="en">
…
<body>
This is in english
<p lang="fr">en fran&ccedil;ais</p>
<p lang="es">en espa&ntilde;ol</p>
</body>
</html>
 right-to-left language: <… dir="rtl" >
 <meta http-equiv="Content-Type"
content="text/html; charset=iso-2022-jp">
Tags – Links
 Links are the most fundamental part of the world
wide web. It is the links that tie it all together.
 There are three different kinds of links you can
have on your website:
 Links to anchors on the current page (Internal).
 Links to other pages within the current site
(Local).
 Links to pages outside the current site (Global).
Tags – Links
 The anchor tag is used to produce links with the
<a> and </a>.
 The address of the link is set by href attribute.
 Example:
<a href="http://www.address.com">Click here</a>
Tags – Links Local
 A simple example of linking is a link to another
local document.
 This means that the linked documents are
located in the same server, under the same
container (folder/dir).
 For example, if you have to create links between
your own html documents, you simply type the
name of the document inside the href attribute.
 <a href="document.htm">Click here</a>
Tags – Links Global
 The most used link is a link to another web
page.
 To create an external link, the whole web
address must be set in href attribute.
 To create a hypertext link to a document on the
Internet, you need to know its URL.
 A URL, Uniform Resource Locator, specifies
the exact location on the Web for a resource.
Uniform Resource Locator (URL)
 Each URL follows the same format:
scheme://username:password@domain:port/path?query_string#anchor
 The first portion of the URL identifies the
communication protocol, which is a set of rules that
governs how information is exchanged.
 Web pages use the communication protocol HTTP, so
most Web pages URLs begin with the letters "http" or
"https" for the secure HTTPS.
 Following the communication protocol, there is
typically a separator, such as a colon and two slashes
(://) i.e. http://
 The domain represents the name of the server (or the
IP address) e.g. www.metropolia.fi or 195.148.144.10
Tags – Links Global
 You can find the URL of a Web page in the
Location or Address box of your browser’s
document window.
 <a href="http://www.address.com">Linked
area</a>
 Browsers assume that if no folder or URL
information is given, the file (resource) is in the
same folder (on same site) as the current
document.
Tags – Links Internal
 Links within a page need an anchor, which is the
target of the link.
 Linking to anchors is very similar to normal links.
Normal links always point to the top of a page.
Anchors point to a place within a page.
 A hash # in front of a link location specifies that
the link is pointing to an anchor on a page.
 To link to an anchor you need to:
 Create a link pointing to the anchor.
 Create the anchor itself.
Tags – Links Internal
 An example:
 Anchor: <a name="content">Example text</a>
 Link: Click <a href="#content">here</a> to find the
“Example text” content.
 When you link to anchors on external pages use
this syntax:
 <a href="http://www.website.net#anchor">this will
go to the specified anchor</a>
Tags – Links Email
 Email links are done using the <a href> tag.
 Instead of HTTP, it must begin with MAILTO.
 <a href="mailto:[email protected]">Send me email.</a>
 You can also set the subject and the body of the
message:
 <a href="mailto:[email protected]?subject=Feedback">Send
Email</a>
 <a href="mailto:email@me?body=I believe in
miracles">Send Email</a>
 These can be used both at the same time: <a
href="mailto:[email protected]?subject=Feedback&body=I
believe in miracles">Email Me</a>
Tags – Links Target Attribute
 By default, links will open in the current window
(or frame).
 Set by using target attribute inside <a> tag.
 Predefined targets are:
 _blank loads the page into a new browser window.
 _self loads the page into the current window.
 _parent loads the page into the frame that is superior to
the frame the hyperlink is in.
 _top cancels all frames, and loads in full browser
window.
 An example: <a href="http://www.metropolia.fi"
target="_blank">Metropolia</a>
Deep from the Past
 The next slides presents very old things you
have to know that have existed…
 … Know the past:
 To avoid the same mistakes in the future
 To understand the present evolution
 To be able to fix very old Web pages
 …But, kids, NEVER DO THAT AT HOME!!!
Font Settings
 Before CSS, font was set in HTML using font tag.
 Font tag is not included in HTML 4.01 nor XHTML
specification, so you should avoid it, although
browsers support it.
 When using font tag, the font is not sent with the
web page to the end-users’ computer; If the user
does not have the same font on his or her computer,
the page does not look the same as on you screen.
 To use <font> tag (really, don’t do that!!!), you will
use basically two different parameters: size and
face.
Working with Color in HTML
 HTML is a text-based language, requiring you to
define your colors in text.
 HTML identifies a color in two ways:
 by the color’s name.
 by the color values.
The 16 Basic Color Names
This figure shows the 16 basic color names that are recognized by all versions of HTML.
The 16 Basic Color Names
 Different browsers may display different colors
for the same color name. "Green" can be lighter
in one browser than another. To achieve the
same result in all browsers, always use the
hexadecimal notation.
 A collection of nearly 150 color names are
supported by all major browsers (but are not
w3c standard).
 http://en.wikipedia.org/wiki/Web_colors
Color Value
 To have more control and more choices, specify
colors using color values.
 A color value is a numerical expression that
precisely describes a color.
 HTML requires color values be entered as
hexadecimals (base-16 (A=10, B=11,…, F=15)).
 It is based on the RGB. E.g. FF0047 refers to
R=255, G=0, B=71
 When computers supported only 256 colors, a list
of 216 "Web Safe Colors" was suggested as a Web
standard, reserving 40 fixed system colors.
A Typical Colors Dialog Box
In most programs, you
make your color choices
with visual clues,
usually without being
aware of the underlying
RGB triplet.
This figure shows a
typical dialog box in
which you would make
color selections
based on the
appearance of the color,
rather than on the RGB
values.
Using Color – HTML Attributes
 bgcolor attribute sets the background color


the value of color will be either one of the accepted color names or
the color’s hexadecimal value.
if you use the hexadecimal value, you must preface the
hexadecimal string with the pound symbol (#) and enclose the
string in double or single quotation marks i.e.
<body bgcolor="#FFC088">
 text attribute controls text color.
 link attribute defines the color of hypertext links.
 vlink attribute defines the color of links that have been visited
by the user.
 alink attribute determines the color of an active hyperlink (the
color of the link as it is clicked by the user).
Using Color – HTML Attributes
active hyperlink color
text color
background color
previously followed hyperlink color
hyperlink color
The Page with the New Color Scheme
The Arcadium Web page
now has dark blue text on a
light blue background.
Hypertext links are red and
dark blue.
By adding the color scheme
to the <body> tag of the
HTML file, you’ve
superseded the browser’s
default color scheme with
one of your own.
Background Image
 The background attribute allows an image file
for the background of a Web page.
 To insert a background image, use the
background attribute:
e.g. <body background="URL">.
 URL is the location and filename of the graphic
file you want to use for the background of the
Web page.
 for example, to use an image named ‘bricks.gif’ from
subfolder ‘img’ as a background image, you would use
the tag: <body background="img/brick.gif">
Background Image
This figure shows
that when a browser
retrieves your image
file, it repeatedly
inserts the image into
the background, in a
process called tiling,
until the entire
display window is
filled up.
Background Image
 In choosing a background image, you should
remember the following:
 use an image that will not detract from the text
on the Web page, making it hard to read.
 do not use a large image file; large and
complicated backgrounds will increase the page
loading time.
 take into consideration how an image looks
when it is tiled in the background.
Background Image
This figure shows
how the background
affects the users
ability to read text.
Background overwhelms the foreground text
Background shows distracting seams between image tiles
Background doesn’t overwhelm the foreground text and seams are not evident
#End of Deep from the Past
 Like the font tag, background and colors
attributes have been marked deprecated (will
no more be supported in future version of
(x)html).
 Use CSS.
 List of valid tags and attributes:




http://www.w3.org/TR/html401/index/elements.html
http://www.w3.org/TR/html401/index/attributes.html
http://www.w3.org/TR/xhtml11/doctype.html
http://www.w3schools.com/tags/default.asp
Validate HTML Page
 Web browsers do an incredible job for parsing
even the worst HTML “tag soup”.
 So WHY validate?
 Helps in learning “best practices”.
 Show you are a professional.
 Greater chance that page look the same across
different browsers (even version) and platforms.
 Guarantee that future Web platforms will handle your
pages as designed.
 Easier to maintain.
 http://validator.w3.org/
 This slide is the most important of the course!
Sources











http://en.wikipedia.org/wiki/Internet
http://en.wikipedia.org/wiki/World_Wide_Web
http://en.wikipedia.org/wiki/SGML
http://en.wikipedia.org/wiki/HTML
http://en.wikipedia.org/wiki/HTTP
http://www.w3.org
http://www.w3.org/TR/html401
http://www.w3.org/TR/xhtml1
http://www.w3.org/TR/xhtml11
www.w3schools.com/html
http://validator.w3.org/docs