- Muhazam

Download Report

Transcript - Muhazam 

EEE3112
Introduction to Multimedia
Application & Technology
Chapter 4: Web Development
– Part 1: HTML, CSS
& The Composer
by Muhazam Mustapha, October 2012
Learning Outcome
• By the end of this chapter, students are
expected to be ready to demonstrate the
required first part skills for CO4:
– Writing HTML file in raw text
– Understanding of CSS formatting
– Develop web pages using a composer
Chapter Content
• Basic Theory on Raw HTML
• Basic Theory on CSS
• Adobe Dreamweaver CS6:
– Workspace and Tools
– Templates
World Wide Web
Definitions
• World Wide Web: the international connection of
networks – also called internet
• Hypertext Markup Language (HTML): the
standard for defining web pages
• Web page: the browser render-able files written
in HTML
• Web site: the portal/host that houses web pages
Hypertext Markup Language
• HTML is the standard language for defining web
pages
• Current version of HTML is HTML5
• Web developers adopt MVC (model-viewcontrol) design pattern in their approach
• In MVC approach HTML plays the role of model
• Due to MVC approach, some HTML tags have
been deprecated and some are added in
HTML5
Hypertext Markup Language
Hypertext Markup Language
• HTML is merely a text file
• You can edit HTML directly as raw using any
text editors
• Browsers are the translators / compilers of the
HTML files, but the rules of HTML standard is
not imposed so strictly by them
– Means browsers still can display (render) the content
as correct HTML with some non-adherence
– If they are so picky, they will get less users
• Current version of HTML5 is moving toward a
more strict rule of XHTML – but this is still in
transition period
Tags
• The core of HTML contents are TAGS
• Part of the rules imposed by XHTML is that
every content must be part of a tag [*]
• However, the XHTML part of HTML content are
not following the proper HTML tag standard
• For example, XHTML requires HTML to start
with the following:
–
[*]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
This means we are not going to follow this rules strictly.
Not HTML
Tags Anatomy
• Tags follow this format:
– Opening tag: <tag_name>
– Closing tag: </tag_name>
• Tags can be nested but not overlapped
• Many tags can have text content:
– <tag_name>...text...</tag_name>
• If the tag doesn’t need any text content, it can
be simplified as follows:
– Line break tag: <br></br>  <br />
HTML Skeletal Anatomy
• Now that you know about tags, this is the
simplest HTML file that can be built using tags:
<html>
<head>
<title>Page Title</title>
</head>
<body>
...Page Content...
</body>
White spaces are
space bar, tabs and
line breaks (enter /
return key)
</html>
• The way we structure or format the HTML text is
not important – any white space used for
formatting will be collapsed into just one single
white space
Tags Attribute
• Besides content (text between opening and
closing tags), tags can also be modified with
attribute values
an attribute
• Syntax:
– <tag_name attr_name="value"></tag_name>
• For example the image tag as follows:
– Image tag: <img src="pic.jpg" />
– The above src attribute is given the value of
pic.jpg which is the filename of the image to use
URL Referencing Syntax
• Many tag attributes are references to resources
• URL (Uniform Resource Locator) is the way to
reference resources in the internet
• There many types of resources and ways to
reference them:
– HTTP (Hypertext Transfer Protocol):
[http://en.wikipedia.org/wiki/Uniform_resource_identifier]
– FTP (File Transfer Protocol):
[http://en.wikipedia.org/wiki/File_Transfer_Protocol]
– Email: [http://en.wikipedia.org/wiki/Email_address]
– File: [http://en.wikipedia.org/wiki/File_URI_scheme]
URL Referencing Syntax
• For our class we will only cover HTTP
• Syntax:
–
http://subdomain.primary_domain.TLD:port_no/subfolder/...more
subfolder.../filename.ext#anchor
• Subdomain
– domains created within the primary domain
– default is www
• Primary domain
– a realm of administrative autonomy, authority, or
control on the Internet [Wikipedia definition]
URL Referencing Syntax
• TLD (top level domain): .net, .com, .com.my,
etc
• Subfolders are optional – specify when needed
• Anchor is a specific location in a web page
• URL can be specified as absolute (in full) or
relative (starting from a point) – can use ".." to
move up or down
Syntax of Some Common Tags
• Minimal image tag:
– <img src="source_URL" />
• Minimal hyperlink tag:
– <a href="target_URL">Display Text</a>
• Minimal table:
Define table rows
– <table>
<tr><td>content</td><td>content</td></tr>
<tr><td>content</td><td>content</td></tr>
</table>
Define table cells
and content
List of Important Tags
•
•
•
•
•
•
•
•
•
<!-- -->
<p>
<img />
<table>,
<tr>, <td>
<a>
<strong>
<em>
<br />
<hr />
•
•
•
•
•
•
•
•
<html>
<body>
<head>
<title>
<iframe>
<div>
<span>
<script>
• <ol>,
<ul>,
<li>
• <form>
• <h1>,
<h2>,
<h3>,
<h4>,
<h5>,
<h6>
Tags in HTML5
• New
–
–
–
–
–
<video>
<svg>
<mathml>
<button>
<canvas>
– etc
• Deprecated
–
–
–
–
–
<center>
<b>
<i>
<font>
<frame>
– etc
Entity
• Specifying entity in HTML is the way to include
hard-to-type characters
• Syntax: &entity_name; or &#x4_digit_hex_unicode;
• Example: Since the character “<” and “>” are
used as tag markers, then the only way to
specify them literally in the web content is by
entities – &lt; and &gt; respectively
• Example: Since the character & is used as entity
marker, then the best way to specify it literally is
&amp; – most browsers are smart enough to
understand a standalone ampersand though
Unicode on the Web
• Unicode is the standardization of encoding of
possibly all characters or symbols ever existed
• Unicode of characters can be found in:
– [http://www.unicode.org/]
• Examples:
– Arabic: [http://www.unicode.org/charts/PDF/U0600.pdf]
– Hebrew / Jewish: [http://www.unicode.org/charts/PDF/U0590.pdf]
– Rejang (Bengkulu Indonesia):
[http://www.unicode.org/charts/PDF/UA930.pdf]
– Thai: [http://www.unicode.org/charts/PDF/U0E00.pdf]
– Box Drawing: [http://www.unicode.org/charts/PDF/U2500.pdf]
– Chemistry: [http://www.unicode.org/charts/PDF/U1F700.pdf]
Unicode Entity
• HTML entity can be added in HTML text
anywhere content can be put
• Should one need to put special characters in
HTML, predefined entity can be used
– List and syntax:
[http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references]
• Or, custom Unicode characters can be used
• Example: To put Greek character lambda (λ)
and division sign (÷) – &#x03BB; and
&#x00F7; respectively
Cascading Style Sheet
Cascading Style Sheet
• In the MVC pattern, CSS plays the role as View
• In the modern approach to web design, HTML
file should contain only the structure of the web
page and NOT the formatting
• Formatting is left to CSS
• The current version of CSS is 4.0 but the
currently supported is 3.0
• The formatting with CSS 3.0 is virtually
unlimited: color, background, font, font size,
drop shadow, rotating, etc
Location to put style (CSS)
• As style attribute in tags:
– All tags can have style attribute
– Example:
<p style="font-size:x-large;">My name is</p>
Location to put style
• As <style> tag section nested in <head>:
– This will centralize styles in one place in the same file
– Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.MainTitle {
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align:center; }
</style>
</head>
<body>
<p class="MainTitle">Muhazam</p>
<body>
</html>
CSS
Location to put style
• As separate CSS text file:
– This enables many files to have standard formatting
across one portal
– Linking syntax:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel=StyleSheet href="MyStyle.css"
External CSS
type="text/css" />
</head>
<body>
<p class="MainTitle">Muhazam</p>
<body>
</html>
Selector
• A SELECTOR is needed if we put CSS as
<style> tag or as separate .css files because
browser needs to be told which style to be
applied where
• If the style is to be repeated on many tags, use
class (attribute) selector in the tags – denoted
as ‘.’ (dot) in CSS
• If the style is to be used by only one specific
tag, use id (attribute) selector in the tag (one
id cannot be repeated in one HTML file) –
denoted as ‘#’ in CSS
Selector
• style.css:
#mainTitle {
text-align:center;
font-weight:bold; }
.popUpLink {
border-bottom:1px dotted; }
• sample.html:
...
<body>
...
<p id="mainTitle">Hello!!!</p>
<br />
<a class="popUpLink" href="pop1.html">Pop Up Link 1</a>
<a href="normal.html">Normal Link</a>
<a class="popUpLink" href="pop2.html">Pop Up Link 2</a>
...
</body>
...
Redefining Tags Formatting
• We can redefine and standardize the default
formatting of tags by using CSS at style tag or
external one
• For example, by default a hyperlink would be
formatted as underlined blue colored text – we
can redefine them to become dotted blue
underline as follows in a CSS file:
– a { text-decoration: none;
border-bottom: 1px dotted; }
remove underlining
put dotted
underlining
DIV and SPAN
• There are many times that web developers
need to have special tags for customization that
are not provided by the standard HTML tags
• <div> and <span> tags can be used as
generic tags that can be customized according
to its id or class
• <div> – generic tag that is customizable for
formatting that has line break before and after it
(like <table> tag)
• <span> – generic tag that is customizable for
formatting that follows the line flow (like <p>
tag)
Cascading Effect
• As mentioned before, CSS styles can be
defined at different locations
• If styles at different locations define different
formatting parameters for the same class, id
or tag, the effect is additive (accumulated)
• If styles at different locations define the same
and clashing formatting parameters for the
same class, id or tag
– Definitions at style attribute take the highest
precedence
– Definitions in style tag overwrite the ones in
separate CSS files
Cascading Effect
• Example of accumulated style of different
parameters:
– style.css content:
#testStyle { font-weight: bold; }
– HTML file:
<style>
#textStyle { font-style: italic; }
</style>
...
<p id="testStyle"
style="text-decoration: underline">
Test Text
</p>
Formatted with
...
bold, italic &
underline
Cascading Effect
• Example of overwritten style of the same
parameter:
– style.css content:
#testStyle { font-size: 18px; }
– HTML file:
<style>
#textStyle { font-size: 20px; }
</style>
...
<p id="testStyle"
style="font-size: 24px">
Test Text
</p>
Font size will be
...
24px
CSS Format Categories
• For this class, you are expected to learn the
vast options of CSS formatting yourselves by
Googling the right keyword
• So far we have seen formatting of text as
follows:
–
–
–
–
–
–
(italic): text-style
(bold): font-weight
(underline): text-decoration
(text color): color
(text size): font-size
(text alignment): text-align
– etc
CSS Format Categories
• There are many other formatting can be found
as the following categories
• Bordering
–
–
–
–
–
border size
3D style: inset, outset, groove, etc
color
style: dotted, dashed, solid, doubled, etc
Look in: http://www.w3schools.com/css/css_border.asp
CSS Format Categories
• Positioning & Sizing of Block Elements (DIV)
–
–
–
–
Positioning mode: static, absolute, relative, fixed
Location: top, bottom, left, right
Sizing: width, height
Suggested URL to read:
• http://www.w3schools.com/css/css_positioning.asp
• http://www.alistapart.com/articles/css-positioning-101/
• Shading/Background & Shadowing
• Shadowing: http://www.w3schools.com/cssref/css3_pr_boxshadow.asp
• Background: http://www.w3schools.com/css/css_background.asp
• Alpha channel:
http://stackoverflow.com/questions/12216572/add-alpha-channelto-a-given-color
CSS Format Categories
• Padding & Margining
– Padding is the gap between the content and its
border
• http://www.w3schools.com/css/css_padding.asp
– Margin is the gap between the border and the outside
content
• http://www.w3schools.com/css/css_margin.asp
Templates
• With the knowledge you have about HTML and
CSS you can create your own web page from
scratch
• However, the best, fastest and recommended
way to get a cool-looking website is by starting
with a template then editing the content and
images (CSS normally doesn’t need to adjust)
• There are thousands of free templates out
there; examples:
– http://www.templatesbox.com/templates.htm
– http://www.quackit.com/html/templates/
– http://www.templateworld.com/free_templates.html
Adobe Dreamweaver CS6
Workspace
Create new
HTML
Workspace
To see both HTML and its rendering, click View  Code and Design
Code
Design Rendering
Autogenerated
content
Property Panels