Scribd
Upload
117 views36 pages

Lec1 Web Programming

1. The document discusses the basics of HTML including that it is a markup language used to describe web page content, it supports multimedia, and the current version is HTML5. 2. HTML5 introduces new features like new form controls, media playback elements, canvas, and improvements to local storage. 3. Support for HTML5 varies by browser but most modern browsers support many HTML5 features. Validating code against HTML standards ensures proper rendering.

Uploaded by

Menna Saed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
117 views36 pages

Lec1 Web Programming

1. The document discusses the basics of HTML including that it is a markup language used to describe web page content, it supports multimedia, and the current version is HTML5. 2. HTML5 introduces new features like new form controls, media playback elements, canvas, and improvements to local storage. 3. Support for HTML5 varies by browser but most modern browsers support many HTML5 features. Validating code against HTML standards ensures proper rendering.

Uploaded by

Menna Saed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 36

Web Programming

CS333-CS644

Dr Walid M. Aly

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
• HTML5 is not yet an official standard, and no browsers have full HTML5
support. But all major browsers (Safari, Chrome, Firefox, Opera, Internet
Explorer) continue to add new HTML5 features to their latest versions.

HyperText

2
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
HTML4-XHTML
• Current fully implemented version :HTML 4
• XHTML:Extensible HyperText Markup
Language , XHTML is a stricter HTML4 and is
still used frequently today.
• The trend is clearly to HTML5.

3
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
What is HTML 5?
• HTML5 is the new standard for HTML, XHTML.
• Most modern browsers have some 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
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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

Web Programming CS333-CS644 lec1 Dr Walid M. Aly


6
http://www.quora.com/Jokes/What-are-some-good-Internet-Explorer-jokes
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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

7
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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

Web Programming CS333-CS644 lec1 Dr Walid M. Aly


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

9
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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>

10
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
First HTML5 Example
<!DOCTYPE html>

<!-- main.html -->


<html>
<head>
<meta charset = "utf-8">
<title>Welcome</title>
</head>

<body>
<p>Welcome to HTML5!</p>
</body>
</html>
main.html

11
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
Notes on First HTML5 Example
 The document type declaration <!DOCTYPE html>
(DOCTYPE) is required in every
HTML5 documents so that browsers <!-- main.html -->
render the page in standards mode. <html>
 Comments start with <!-- and end with -->. <head>
<meta charset = "utf-8">
 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.
12
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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 <!DOCTYPE html>
container for the content they enclose <html>
– E.g. <p> Hello </p> <body>
• The container and its content together are called an
element <h1>My First Heading</h1>
• Not all tags have content
<p>My first paragraph.</p>
– If a tag has no content (void tag), its form is
<name />
</body>
– E.g. <hr /> </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>
<meta charset = "utf-8">
<title> My Web Page</title>
</head>
<body>

</body>
</html>
TitleDemo.html
14
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
Basic Text Markup

15
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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 16
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>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>

Web Programming CS333-CS644 lec1 Dr Walid M. Aly


Font Styles
- set in italics - <em> or <i>
- set in boldface - <strong> or <b>
-Subscript <sub>
-Superscript <sup>
-underline <ins>
-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>
18
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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

19
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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>
<meta charset = "utf-8">
<title>
Demo1
</title>
</head>
<body>
<h1> My Page</h1>

<p>
This is line 1
This is line 2
</p>
</body>
</html> Demo1.html 20
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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 &nbsp; &nbsp; &nbsp; &nbsp; Page</h1>

<p>
This is line 1<br/>
This is line 2
</p>
</body>
</html>
Demo2.html

21
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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 />
22
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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 &lt; 10 </p>


23
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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>

24
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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


25
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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

26
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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 27
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.).
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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>

Links.html
Web Programming CS333-CS644 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:

<a 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>
30
Web Programming CS333-CS644 Links.html lec1 Dr Walid M. Aly
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.
31
Web Programming CS333-CS644 Links.html lec1 Dr Walid M. Aly
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>
32
Web Programming CS333-CS644 Links.html lec1 Dr Walid M. Aly
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>
<meta charset = "utf-8">
<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>
33
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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>
34
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
Good Programming Practice

The World Wide Web Consortium (W3C) recommends lower case in HTNL4/5 and
demand lower case in XHTML

35
Web Programming CS333-CS644 lec1 Dr Walid M. Aly
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

36
Web Programming CS333-CS644 lec1 Dr Walid M. Aly

You might also like