Lec1 Web Programming

Web Programming
Dr Mohamed Abdelhafeez
Lecture 1
1
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
HTML
• HyperText Markup Language (HTML) is a platform
independent markup language for describing the content of
Web pages
– hypertext refers to the fact that Web pages are more than
just text
• can contain multimedia, provide links
• HTML is not a programming language, it is a markup
language and very easy to learn
• Current Version :HTML5
HyperText
2
HTML4-XHTML
• XHTML:Extensible HyperText Markup
Language , XHTML is a stricter HTML4 and is
still used frequently today.
3
What is HTML 5?
• HTML5 is the new standard for HTML, XHTML.
• Most modern browsers have HTML5 support.
• HTML5 reduce the need for external plugins (like
Flash) and offers More markup to replace scripting
• Some of the most interesting new features in HTML5:
– New form controls, like calendar, date, time, email, url,
search
– The video and audio elements for media playback
– Canvas
– Improvement of local storage
4
HTML5 Support
Support for HTML5 features varies by browser.
The HTML5 Test website (http://html5test.com/) scores each browser based on its
support for the latest features of these evolving standards.
http://html5test.com/results/desktop.html
http://html5test.com/results/mobile.html

Editing HTML
• We’ll create HTML documents by typing HTML markup
text in a text editor and saving it with the .html or
.htm filename extension.
• Computers called web servers store HTML5 documents.
• Clients (such as web browsers running on your local
computer or smartphone) request specific resources
such as HTML5 documents from web servers.
• Servers respond by sending the requested file
• The filename of your homepage preferred to be
index.html
– If a browser does not request a specific file in a
directory, normal Web server response is to return
index.html
6
Editing HTML
• Creating HTML documents
– Any simple editors can be used: notepad-wordpad-TextPad-notepad++
• Authoring tools (e.g. Microsoft Expression Web, Netscape Composer, Dreamwaver)
• so, why are we learning low-level HTML using a basic text
editor?
– may want low-level control
– may care about size/readability of pages
– may want to "steal" page components and integrate into
existing pages
– may want features such as scripts or applets
Dreamweaver Microsoft Expression Web

HTML Validation
• You must use proper HTML, CSS3 and JavaScript
syntax to ensure that browsers process your
documents properly.
• Use :http://validator.w3.org/ to validate your
HTML5 code
8
HTML file Basic Structure
▪ An HTML file has 2 basic parts :Head & Body
▪ HTML5 Elements are defined by tags (markers)
▪ An html page will have tags like <html> and <head> and <body>
<!DOCTYPE html>
<html>
Head <head>
………….
……………
Body </head>
<body>
…………….
…………..
</body>
</html>
9
First HTML5 Example
<!DOCTYPE html>


<html>
<head>
<meta charset = "utf-8">
<title>Welcome</title>
</head>
<body>
<p>Welcome to HTML5!</p>
</body>
</html>
main.html
10
Notes on First HTML5 Example
 The document type declaration <!DOCTYPE html>
(DOCTYPE) is required in every
HTML5 documents so that browsers 
render the page in standards mode. <html>
 Comments start with . <head>
 The head section contains <title>Welcome</title>
information about the HTML5 </head>
document, such as the character set
(UTF-8), and the title. (if you skip <body>
the charset, you will get a warning in <p>Welcome to HTML5!</p>
validation) </body>
 The body section contains the </html>
page’s content, which the main.html
browser displays when the user
visits the web page.
11
HTML Basic Syntax
• Elements are defined by tags (markers)
• Tag format:
– Opening tag: <name>
– Closing tag: </name>
• The opening tag and its closing tag together specify a container for the
content they enclose <!DOCTYPE html>
– E.g. <p> Hello </p> <html>
• The container and its content together are called an element <body>
• Not all tags have content
– If a tag has no content (void tag), its form is <name /> <h1>My First Heading</h1>
– E.g. <hr />
• HTML5 does not require empty elements to be <p>My first paragraph.</p>
closed. But if you want stricter validation, or you
need to make your document readable by XML </body>
parsers, you should close all HTML elements. </html>
➢If a tag has attributes, they appear between its name and the right bracket of the
opening tag. All attribute values must be enclosed in quotes
➢E.g. <img src = “spurs.jpg” />
Browsers ignore
Web Programming all unrecognized tags, line breaks,lec1
CS333-CS644 HTML might be frustrating
Dr Walid M. Aly to programmers
HTML Title Tag
• The <title> tag defines the title of the document, it can only appear in head
section
• Mandatory for having a valid HTML5 page.
• 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
<!DOCTYPE html>
<html>
<head>
<title> My Web Page</title>
</head>
<body>
</body>
</html>
TitleDemo.html
13
Basic Text Markup
14
HTML Paragraphs
• HTML paragraphs are defined with the <p> tag.
• The p element automatically creates some space before and after itself. The space is
automatically applied by the browser,
<!DOCTYPE html>
<html>
<head>…..</head>
<body>
<p>Welcome to CS433</p>
<p>It is a web programming course</p>
</body>
</html> simple.html
Adding a line break

<br/> tag defines a line break
…………..
<body> This is line1.
<p>This is line1. <br/> this is line2 this is line2 This is line 3.
This is line 3.</p>
</body>
……Programming CS333-CS644
Web lec1 Dr Walid M. Aly 15
HTML Headings
– Six sizes, 1 - 6, specified with <h1> to <h6>
• 1, 2, and 3 use font sizes that are larger than the default font size
• 4 uses the default size
• 5 and 6 use smaller font sizes
▪H1 headings should be used as main headings

▪The heading tag always break the current line, their content always appear on a new line .
▪Browsers usually insert some vertical space before and after all headings
<body>
<h1>This is heading 1</h1>
</body>

Font Styles
- set in italics - <em> or <i>
- set in boldface - <strong> or <b>
-Subscript <sub>
-Superscript <sup>
-underline <ins> ,<u>
-strikethrough <del>
<body>
<strong>This text is bold</strong><br />
<em>This text is italic</em><br />
<strong> <em> This text is bold and italic
</em> </strong><br />
Y<sub>x</sub><br />
X<sup>2</sup>
</body>
<body>
<p> <ins>this text is undelined</ins> </p>
<p> <del> this text is striked <del> </p>
</body>
17
Web Browser and HTML
Web browsers do not detect carriage returns (line breaks), tabs, extra spaces
embedded in an HTML source code document.
HTML Browser
Hello There Hello There
Hello
Hello There
There
18
HTML Output Tips
Be aware that with HTML, you cannot change the output by adding extra spaces or extra lines in
your HTML code. The browser will remove extra spaces and extra lines when the page is
displayed.
<!DOCTYPE html>
<html>
<head>
<title>
Demo1
</title>
</head>
<body>
<h1> My Page</h1>
<p>
This is line 1
This is line 2
</p>
</body>
</html> Demo1.html 19
Using &nbsp and <br/> to format output
Use &nbsp to add space and <br/> to add extra line
<html>
<head>
<title>
Demo1
</title>
</head>
<body>
<h1> My Page</h1>
<p>
This is line 1<br/>
This is line 2
</p>
</body>
</html>
Demo2.html
20
Preserving white space with HTML <pre> Tag
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.
<html >
<head>
<title> My Web Page</title>
</head> Arab
<pre> Academy
Arab for Science & Technology
Academy
for Science & Technology
</pre>
</body>
</html>
Adding a horizontal line

The <hr /> tag creates a horizontal line in an HTML page
<p>The hr tag defines a horizontal rule:</p>
<hr />
21
Character Entities
• HTML provides a collection of special characters that are
sometimes needed in a document but can not be typed as
themselves
HTML
Browser
Hello &nbsp &nbsp &nbsp &nbspThere
Hello There
<p>x<10 </p> <p>x < 10 </p>

22
HTML Images
 Images are inserted into a document with the <img> tag
 The img element’s src attribute specifies an image’s location
 Every img element must have an alt attribute, which contains text that is
displayed if the client cannot render the image
 Width and height are optional attributes
If omitted, the browser uses the image’s actual width and height
Images are measured in pixels
➢ In the following example ,the image file is in the same folder as html document,
so only the file name is required(relative path)
<body>
<p>
<img src="AASTMT_Logo.gif" alt=“logo” width="104" height="142" />
</p>
</body>
23
HTML Lists
• The most common HTML lists are ordered and unordered lists:
• Use <ul> , <ol> <li>
<ul> <ol>
<li>Coffee</li> <li>Coffee</li>
<li>Milk</li> <li>Milk</li>
</ul> </ol>
• Coffee 1. Coffee
• Milk 2. Milk
Lists can be nested
Other format exists for list 24
Web Programming CS333-CS644 ListDemo.html lec1 Dr Walid M. Aly
Linking
Source
on the Web
Anchor
Document 1 Link
(reference) Destination
Here is a link to document 2
Document 2
This is document 2.
A link has two ends -- called anchors -- and a direction. The link starts at the "source"
anchor and points to the "destination" anchor, which may be any Web resource (e.g., an
image, a video clip, a sound bite, a program, an HTML document, an element within an
HTML document, etc.).
Hypertext Links
• Hypertext is the essence of the Web!
• A hyperlink links to other resources, such as HTML5
documents and images.
• A link is specified with the href (hypertext reference)
attribute of <a> (the anchor tag)
• The content of <a> is the visual link in the document
• Web browsers typically underline text hyperlinks and
color them blue by default.
• The link specify a certain url (uniform resource locator
to be directed to.
<a href="http://www.aast.edu">click to visit AAST</a>
Web Programming CS333-CS644 Links.html lec1 Dr Walid M. Aly

Targets within Documents - The id Attribute
• The id attribute specifies the name of an anchor to create a
bookmark inside an HTML document.
• Bookmarks are not displayed in any special way. They are
invisible to the reader.
Linking to an anchor
Example :Create a link to the “Top of Page " inside the same document:
<h2 id="home">Top of page</a>

…………………
…………………
<a href="#home">Go To Top</a>
Example : create a link to your anchor from another page:

<a href="http://www.myPage.com/Page1.htm#home"> Go To Page</a>
27
An image as a link
<a href="http://www.aast.edu">
<img src=" AASTMT_Logo.gif " alt="HTML tutorial" width="32" height="32" />
</a>
Create a mailto link

<p>
This is an email link:
<a href="mailto:someone@example.com?Subject=Hello%20again"> Send Mail</a>
</p>
Spaces between words should be replaced by %20 to ensure that the browser will display
the text properly.
28
The target Attribute
• The target attribute specifies where to open the linked
document.
• The example below will open the linked document in a new
browser window or a new tab:
<a href="http://www.w3schools.com/" target="_blank“ >Visit W3Schools!</a>
Value Description
_blank Open the linked document in a new window or tab
_self Open the linked document in the same frame as it was clicked (this is
default)
Creating a linked List

<h4> Linked list </h4>
<ul>
<li> <a href="http://www.yahoo.com/ "> Yahoo </a> </li>
<li> <a href="http://www.google.com/ " >Google </a> </li>
<li> <a href="http://www.bing.com/ " > Bing </a></li>
</ul>
29
HTML <map> Tag
The <map> tag is used to define a client-side image-map. An image-map is an image with
clickable areas.
<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap“ >
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html> Imagemapdemo.html
shape rect-circle-poly : Specifies the shape of an area (default: whole region)
coords coordinates Specifies the coordinates of an area

30
HTML <area> coords attribute
❑ The <area> tag defines an area inside an image-map (an image-map is an image
with clickable areas).
❑ The <area> element is always nested inside a <map> tag
31
meta Elements
• One way that search engines catalog pages is by reading the
meta element’s contents.
– The name attribute identifies the type of meta element
– The content attribute
• Of a keywords meta element: provides search engines with a list of
words that describe a page, which are compared with words in search
requests
• Of a description meta element: provides a three- to four-line
description of a site in sentence form, used by search engines to catalog
your site. This text is sometimes displayed as part of the search result
<head>
<title>Welcome</title>
<meta name = "keywords" content = "web page, design, HTML5, tutorial">
<meta name = "description" content = "This website will
help you learn the basics of HTML5 and web page design
through the use of interactive examples and instruction.">
</head>
32
block level and inline
HTML elements can be divided into two categories : block level and inline elements.
a block element can never be within an inline element , inline element must be within a block
element
HTML block level elements
1. HTML block level elements can appear in the body of an HTML page.
2. It may contain other block level
3.It can contain inline elements.
4. A block element takes up the full width available, and has a line break before and after
it.
Example:
<p> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> ,<ol>, <ul>, <pre>,<div>,<table>, <form>
HTML inline elements
<body>
1. inline element is usually used to format contents in block element <p>
2. It can contain data and other inline elements. Hello
3. An inline element only takes up as much width as necessary, and does not <i>there </i>
force line breaks. </p>
4. Example: <body>
<b>,< i>,<a>,<label>,<img>,<br>,<span>,<input>
33
Good Programming Practice
The World Wide Web Consortium (W3C) recommends lower case in HTML4/5 and
demand lower case in XHTML
34
Useful links
• W3Schools
– http://www.w3schools.com/
• HTML Tutorial at w3Schools

– Http://www.w3schools.com/html/default.asp
• HTML5 Tags
http://www.w3schools.com/html5/html5_reference.asp
35

Lec1 Web Programming

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

Lec1 Web Programming

Uploaded by

Copyright:

Available Formats

Web Programming

Web Programming CS333-CS644 lec1 Dr Walid M. Aly

Dreamweaver Microsoft Expression Web

Web Programming CS333-CS644 lec1 Dr Walid M. Aly

Adding a line break

▪H1 headings should be used as main headings

Web Programming CS333-CS644 lec1 Dr Walid M. Aly

Adding a horizontal line

<p>x<10 </p> <p>x < 10 </p>

Web Programming CS333-CS644 Links.html lec1 Dr Walid M. Aly

<h2 id="home">Top of page</a>

<a href="#home">Go To Top</a>

Example : create a link to your anchor from another page:

Create a mailto link

Creating a linked List

shape rect-circle-poly : Specifies the shape of an area (default: whole region)

coords coordinates Specifies the coordinates of an area

• HTML Tutorial at w3Schools

You might also like

Lec1 Web Programming

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

Lec1 Web Programming

Uploaded by

Copyright:

Available Formats

Web Programming

Web Programming CS333-CS644 lec1 Dr Walid M. Aly

Dreamweaver Microsoft Expression Web

Web Programming CS333-CS644 lec1 Dr Walid M. Aly

Adding a line break

▪H1 headings should be used as main headings

Web Programming CS333-CS644 lec1 Dr Walid M. Aly

Adding a horizontal line

<p>x<10 </p> <p>x &lt; 10 </p>

Web Programming CS333-CS644 Links.html lec1 Dr Walid M. Aly

<h2 id="home">Top of page</a>

<a href="#home">Go To Top</a>

Example : create a link to your anchor from another page:

Create a mailto link

Creating a linked List

shape rect-circle-poly : Specifies the shape of an area (default: whole region)

coords coordinates Specifies the coordinates of an area

• HTML Tutorial at w3Schools

You might also like

<p>x<10 </p> <p>x < 10 </p>