Basic Web Programming
Computer Workshop
Session 6
Sharif University of Technology
Ali Ahari
1
10/7/2015
Outline
 HTML programming
 CSS basics
 JavaScript programming
 HTML editors
2
Ali Ahari
10/7/2015
HTML
3
Ali Ahari
10/7/2015
Introduction to HTML
 HTML stands for Hyper Text Markup Language
 HTML is not a programming language, it is a markup
language
 A markup language is a set of markup tags
 We have another markup languages like XML,…
 HTML uses markup tags to describe web pages
4
Ali Ahari
10/7/2015
HTML Tags
 HTML tags are keywords surrounded by angle brackets
like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is
the end tag
 Start and end tags are also called opening tags and
closing tags.
5
Ali Ahari
10/7/2015
Why to use HTML
 HTML documents describe web pages
 HTML documents contain HTML tags and plain text
 HTML documents = web pages
 The purpose of a web browser (like Internet Explorer
or Firefox) is to read HTML documents and display
them as web pages. The browser does not display the
HTML tags, but uses the tags to interpret the content
of the page.
6
Ali Ahari
10/7/2015
HTML Elements
 An HTML element is everything from the start tag to





7
the end tag
Most HTML elements can have attributes
Most HTML elements can be nested.
HTML tags are not case sensitive but it is better to use
lowercase chars.
HTML elements without content are called empty
elements.
Empty elements can be closed in the start tag.
Ali Ahari
10/7/2015
Example
<html>
Start tag
<body>
<p>This is my first paragraph </p>
</body>
</html>
Element
content
end tag
8
Ali Ahari
10/7/2015
Example Explained
 The <p> element:
<p>This is my first paragraph</p>
 The <p> element defines a paragraph in the HTML
document
 The element has a start tag <p> and an end tag </p>
 The element content is: This is my first paragraph
9
Ali Ahari
10/7/2015
Example Explained
 The <body> element:
<body>
<p>This is my first paragraph</p>
</body> The <body> element defines the body of the
HTML document
The element has a start tag <body> and an end tag
</body>
 The element content is another HTML element (a
paragraph)
10
Ali Ahari
10/7/2015
Example Explained
 The <html> element:
<html>
<body>
<p>This is my first paragraph</p>
</body>
</html>
 The <html> element defines the whole HTML document.
 The element has a start tag <html> and an end tag </html>
 The element content is another HTML element (the body)
11
Ali Ahari
10/7/2015
Attention!
 Don’t forget the end tag!!!
<p>This is a paragraph
<p>This is a paragraph
 But don’t worry if you forget the end tag usually web
browsers often make it to work but don’t rely on it!
12
Ali Ahari
10/7/2015
HTML Attributes
 HTML elements can have attributes
 Attributes provide additional information about the
element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like:
name="value"
13
Ali Ahari
10/7/2015
Example
 <a href="http://www.w3schools.com">This is a
link</a>
This is an attribute
14
Ali Ahari
10/7/2015
Always Quote Attribute Values
 Attribute values should always be enclosed in quotes.
 Double style quotes are the most common, but single
style quotes are also allowed.
 In some rare situations, like when the attribute value
itself contains quotes, it is necessary to use single
quotes:
name='John "ShotGun" Nelson'
15
Ali Ahari
10/7/2015
HTML Paragraphs
html code
16
Ali Ahari
result
10/7/2015
HTML Line Breaks
 Use the <br /> tag if you want a line break (a new line)
without starting a new paragraph.
 The <br /> element is an empty HTML element. It has
no end tag.
17
Ali Ahari
10/7/2015
HTML Line Breaks
code
18
Ali Ahari
result
10/7/2015
HTML Formatting Tags
code
19
Ali Ahari
resut
10/7/2015
Deprecated Tags and Attributes for
formatting
20
Ali Ahari
Tags
Description
<center>
Defines centered content
<font> and <basefont>
Defines HTML fonts
<s> and <strikeout>
Defines strikeout text
<u>
Defines underlined text
Attributes
Description
align
Defines the alignment of text
bgcolor
Defines the background color
color
Defines the text color
10/7/2015
Use styles instead !
code
21
Ali Ahari
result
10/7/2015
HTML Links
<a href="url">Link text</a>
Link text
• The element content (Link text) defines the part to be
displayed.
• The href attribute defines the link "address".
22
Ali Ahari
10/7/2015
HTML Images
 In HTML, images are defined with the <img> tag.
 The value of the src attribute is the URL of the image
you want to display on your page.
 The alt attribute is used to define an "alternate text"
for an image.
 <img src="boat.gif" alt="Big Boat" />
23
Ali Ahari
10/7/2015
HTML Images
<html>
<body>
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="../images/pulpit.jpg" width="304"
height="228" />
</body>
</html>
24
Ali Ahari
10/7/2015
HTML Images
25
Ali Ahari
10/7/2015
HTML Tables
 Tables are defined with the <table> tag.
 A table is divided into rows (with the <tr> tag), and
each row is divided into data cells (with the <td> tag).
 The letters td stands for "table data," which is the
content of a data cell. A data cell can contain text,
images, lists, paragraphs, forms, horizontal rules,
tables, etc.
 To display a table with borders, you will have to use
the border attribute
26
Ali Ahari
10/7/2015
HTML Tables
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
27
Ali Ahari
10/7/2015
HTML Tables
28
Ali Ahari
10/7/2015
HTML Lists
 HTML supports ordered, unordered and definition lists.
 Unordered Lists:
 An unordered list is a list of items. The list items are marked with
bullets (typically small black circles).
 An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
 Ordered Lists:
 An ordered list is also a list of items. The list items are marked with
numbers.
 An ordered list starts with the <ol> tag. Each list item starts with the
<li> tag.
29
Ali Ahari
10/7/2015
Ordered Lists
code
result
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
30
Ali Ahari
10/7/2015
unordered Lists
code
result
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
31
Ali Ahari
10/7/2015
HTML Styles
 Three ways to apply sytle:
 External style: An external style sheet is ideal when the style is
applied to many pages. With an external style sheet, you can
change the look of an entire Web site by changing one file. Each
page must link to the style sheet using the <link> tag. The <link> tag
goes inside the head section.
 Internal Style Sheet: An internal style sheet should be used when a
single document has a unique style. You define internal styles in the
head section with the <style> tag.
 Inline Styles: An inline style should be used when a unique style is
to be applied to a single occurrence of an element.
32
Ali Ahari
10/7/2015
Example
 External style
 <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
 Internal Style Sheet
 <head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
 Inline Styles:
 <p style="color: red; margin-left: 20px">
This is a paragraph
</p>
33
Ali Ahari
10/7/2015
HTML Character Entities
 Some characters are reserved in HTML. For example,
you cannot use the greater than or less than signs
within your text because the browser could mistake
them for markup.
 If we want the browser to actually display these
characters we must insert character entities in the
HTML source.
 A character entity looks like this: &entity_name; OR
&#entity_number;
34
Ali Ahari
10/7/2015
Non-breaking Space
 The most common character entity in HTML is the
non-breaking space.
 Normally HTML will truncate spaces in your text. If
you write 10 spaces in your text HTML will remove 9
of them. To add lots of spaces to your text, use the
&nbsp; character entity.
35
Ali Ahari
10/7/2015
Commonly Used Character Entities
Result
36
Ali Ahari
Description
Entity Name
Entity Number
non-breaking space
&nbsp;
&#160;
<
less than
&lt;
&#60;
>
greater than
&gt;
&#62;
&
ampersand
&amp;
&#38;
¢
cent
&cent;
&#162;
£
pound
&pound;
&#163;
¥
yen
&yen;
&#165;
€
euro
&euro;
&#8364;
§
section
&sect;
&#167;
©
copyright
&copy;
&#169;
®
registered
trademark
&reg;
&#174;
10/7/2015
HTML Head
 The head element contains general information, also
called meta-information, about a document. Meta
means "information about".
 The elements inside the head element should not be
displayed by a browser.
 According to the HTML standard, only a few tags are
legal inside the head section. These are: <base>,
<link>, <meta>, <title>, <style>, and <script>.
37
Ali Ahari
10/7/2015
title
 The <title> tag defines the title of the document.
 The title element is required in all HTML/XHTML
documents.
 The title element:
 defines a title in the browser toolbar
 provides a title for the page when it is added to favorites
 displays a title for the page in search-engine results
38
Ali Ahari
10/7/2015
HTML Meta
 HTML also includes a meta element that goes inside
the head element
 Most often the meta element is used to provide
information that is relevant to browsers or search
engines like describing the content of your document.
 However, since too many webmasters have used meta
tags for spamming, like repeating keywords to give
pages a higher ranking, some search engines have
stopped using them entirely.
39
Ali Ahari
10/7/2015
Example
 This meta element defines a description of your page:
 <meta name="description" content="Free Web tutorials
on HTML, CSS, XML, and XHTML" />
 This meta element defines keywords for your page:
 <meta name="keywords" content="HTML, DHTML, CSS,
XML, XHTML, JavaScript" />
40
Ali Ahari
10/7/2015
Plain text inside HTML
 <pre>
 The <pre> tag defines preformatted text.
 Text in a pre element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line
breaks.
 Use the pre element to display computer code!
 <xmp>
 indicates a block of text where all HTML tags are
ignored. The only tag that is not ignored is <xmp>
41
Ali Ahari
10/7/2015
Example
 <pre>:
 <PRE> &#60;A
HREF="http://www.idocs.com"&#62;Cool!&#60;/A&#62; </PRE>
 <xmp>:
 <XMP> <A HREF="http://www.idocs.com">Cool!</A> </XMP>
 Result for both of them:
 <A href="http://www.htmlcodetutorial.com">Cool!</A>
 Notice:
in <xmp> code example we did not need to use
character codes for > and <.
42
Ali Ahari
10/7/2015
Animating text
 <marquee>: creates a scrolling display.
 Example:
 <MARQUEE> Hi There! <IMG SRC="graphics/idocs.gif" HEIGHT=33
WIDTH=82 ALT="Idocs Guide to HTML"> </MARQUEE>
43
Ali Ahari
10/7/2015
CSS
 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements
 Styles are normally stored in Style Sheets
 Styles were added to HTML 4.0 to solve a problem
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files
 Multiple style definitions will cascade into one
44
Ali Ahari
10/7/2015
Example
html code:
<html>
<head><link rel="stylesheet“ type="text/css" href="ex1.css" /></head>
<body>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>
45
Ali Ahari
10/7/2015
Example
CSS File:
body {background-color: yellow}
h1 {font-size: 36pt} h2 {color: blue}
p {margin-left: 50px}
46
Ali Ahari
10/7/2015
HTML DOM
 The HTML DOM is:
 A standard object model for HTML
 A standard programming interface for HTML
 Platform- and language-independent
 A W3C standard
 DOM Nodes
 The entire document is a document node
 Every HTML element is an element node
 The text in the HTML elements are text nodes
 Every HTML attribute is an attribute node
 Comments are comment nodes
47
Ali Ahari
10/7/2015
Example
 <html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
48
Ali Ahari
10/7/2015
Example
<html>
<head>
<title>
49
Ali Ahari
<body>
<h1>
<p>
10/7/2015
JavaScript
 JavaScript was designed to add interactivity to HTML pages
 JavaScript is a scripting language
 A scripting language is a lightweight programming




50
language
JavaScript is usually embedded directly into HTML pages
JavaScript is an interpreted language (means that scripts
execute without preliminary compilation)
Everyone can use JavaScript without purchasing a license
There is no relationship between java and javascript!
Ali Ahari
10/7/2015
Example
 <html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
</script>
</body>
</html>
51
Ali Ahari
10/7/2015
Example Explained
 To insert a JavaScript into an HTML page, we use the
<script> tag. Inside the <script> tag we use the type
attribute to define the scripting language.
 So, the <script type="text/javascript"> and </script>
tells where the JavaScript starts and ends:
 The document.write command is a standard
JavaScript command for writing output to a page.
52
Ali Ahari
10/7/2015
HTML Event Attributes
 New to HTML 4.0 is the ability to let HTML events
trigger actions in the browser, like starting a JavaScript
when a user clicks on an HTML element.
 Four kinds of events:
 Winow event
 Form event
 Keyboard event
 Mouse event
53
Ali Ahari
10/7/2015
Example
 <html>
<head>
<script type="text/javascript">
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text</h1>
</body>
</html>
54
Ali Ahari
10/7/2015
HTML editors
 You can edit your html file with any simple text editor
like notepad,…
 Also you can use some tex highlighting editors like
notepad++ and gvim,…
 Another way to produce html file is to use WYSIWYG
editors like FrontPage,MS Expression Web,…
55
Ali Ahari
10/7/2015
Assignment
 Each student shoul create some sort of “homepage”.
You are not required to upload it to the CE server
(extra marks). This homepage should consist of at
least three HTML pages linking to each other. The
pages should contain CSS & JavaScript. You are not
allowed to use WYSIWYG editors or off-the-shelf
JavaScript code snippets in this assignment. Creating a
page as your résumé is highly recommended (extra
marks).
56
Ali Ahari
10/7/2015
Any Question?
57
Ali Ahari
10/7/2015
Refrences
http://www.w3schools.com
2. http://www.htmlcodetutorial.com
1.
58
Ali Ahari
10/7/2015
Descargar

Hardware