web development.pdf

Web Development
Programming
By: Gheyath M. Othman 2018-2019

This Course Will Cover
▪ HTML (Hyper Text Markup Language)
▪ CSS (Cascading Style Sheets)
▪ JS (Java Script ) with Jquery & AJAX (Asynchronous Java script and XML)
▪ PHP ( Hyper text Preprocessor)
▪ MySQL ( Structured Query Language)

HTML … Introduction
• HTML stands for Hyper Text Markup Language.
• An HTML file is a text file containing small markup tags. The markup tags tell
the Web browser how to display the page.
▪ The extension of an HTML file is htm or html
▪ It is not a programming language in the traditional sense, but rather a set of
instructions about how to display content. The computer application that
translates this description is called a Web browser.

HTML … Versions
In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed and
prototyped ENQUIRE, a system for CERN researchers to use and
share documents.

HTML … Elements
▪ HTML documents are text files made up of HTML elements.
▪ HTML elements are defined using HTML tags.
HTML Tags
• HTML tags are keywords (tag names) surrounded by angle brackets:
• HTML tags normally come in pairs like <b> element content </b>
• First tag in a pair is the start tag, the second tag is the end tag
• HTML tags are not case sensitive, <H1> means the same as <h1>.
<tagname>content</tagname>

HTML … Elements
*** Note ***
• If you want to follow the latest web standards, you should always use
lowercase tags. The World Wide Web Consortium (W3C) recommends
lowercase tags in their HTML recommendation .
• Even if you write some tags without closing it, may work in most of the
browsers.but don't rely on it. Future version of HTML will not allow you to skip
ANY end tags.
• Closing all HTML elements with an end tag is a future-proof way of writing
HTML. It also makes the code easier to understand.

HTML … Basic Structure
The basic structure for all HTML documents is the same and should include the
following minimum elements and tags:
• The DOCTYPE declaration defines the document type to be HTML
• The text between <html> and </html> describes an HTML document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
The content of the page…
</body>
</html>

HTML … Basic Structure
• The text between <head> and </head> provides information about the
document
• The text between <title> and </title> provides a title for the document
or you can use the <link> tag to make an image as an title of the document
<link rel="shortcut icon" href="your_image_path_and_name.ico" />
• The text between <body> and </body> describes the visible page content. Like1

HTML … Basic Tags
The most important tags in HTML are tags that define headings, paragraphs and
line breaks.
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest
heading. <h6> defines the smallest heading.
HTML automatically adds an extra blank line
before and after a heading. example2
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
</body>
</html>

HTML … Basic Tags
Paragraphs
Paragraphs are defined with the <p> tag. HTML automatically adds an extra
blank line before and after a paragraph.
<p>This is a paragraph</p> <p>This is another paragraph</p>
Line Breaks (<br> or <br /> )
The <br > tag is used when you want to break a line. The <br> tag forces a line
break wherever you place it. The <br> tag is an empty tag. It has no end tag like
</br>. example3
<p>This <br> is a para<br>graph with line breaks</p>

HTML … Basic Tags

Horizontal lines (<hr> )
It defines a horizontal rule
example4
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A
comment will be ignored by the browser.
Conditional Comments
Defines HTML tags to be executed by Internet Explorer only.

HTML … Attributes
• HTML elements can have attributes which provide additional information
about an element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like: name="value“ example5
<body dir=“ltr”>
<p title="web programming"> web programming include
HTML,CSS,SQL,ASP,PHP..</p>
NOTE: not all tags accept attributes or all attributes

HTML … Attributes (examples)
The <body> tag has two attributes where you can specify backgrounds. The
background can be a color or an image.
Bgcolor: Specifies a background-color for an HTML page. The value of this
attribute can be a hexadecimal number, an RGB value, or a color name.
Text : Specify the text color for the document and it use the same values of
bgcolor attribute.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
<body text="#000000">
Example 5-1

HTML … Attributes (examples)
background:
• Specifies a background-image for an HTML page.
• The value of this attribute is the URL of the image you want to use.
• If the image is smaller than the browser window, the image will repeat itself
until it fills the entire browser window
<body background="img.jpg">
<body background="http://www.example.com/clouds.gif">
Example 5-2

HTML … Attributes
Some attribute samples:
align= (center, left, right)
valign= (middle, top, bottom)
width= (length or percent)
height= length or percent
border= length
dir= (ltr or rtl)
NOTE:
The bgcolor, background, and the text attributes in the <body> tag are deprecated in the
latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C) has
removed these attributes from its recommendations.
Style sheets (CSS) should be used instead (to define the layout and display properties of
HTML elements).

HTML … Formatting Output
HTML defines a lot of elements for formatting output, like bold or italic text..
Text Formatting tags:
Example 6
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text

Citations, Quotations, and Definition Tags:
Example 7
Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation

Computer code elements Example 8
Tag Description
<code> Defines programming code
<kbd> Defines keyboard input
<samp> Defines computer output
<var> Defines a mathematical variable
<pre> Defines preformatted text
<tt> Defines Teletype text

Font tag :The <font> tag specifies the font face, font size, and color of the text.
Optional attributes:
• Face: Specifies the font of text.
• Color: Specifies the color of text.
• Size : Specifies the size of text.
e8-1 >>
NOTE: The <font> tag is not supported in HTML5. Use CSS instead.
<font face="verdana" size="30px" color="blue">This is some text!</font>

HTML … Character Entities
• Some characters like the > character, have a special meaning in HTML, and
therefore cannot be used in the text.
• To display a greater than sign (>) in HTML, we have to use a character entity
like &gt (name) or &#62 (number) they are same;
• A character entity has three parts: an ampersand (&), an entity name or a #
and an entity number, and finally a semicolon (;).
Note that the entities are case sensitive.
&entity_name;
OR
&#entity_number;

• The Most Common Character Entities:

• Some Other Commonly Used Character Entities: Example 9

HTML … Links
• HTML uses a hyperlink to link to another document on the Web.
The syntax of creating an anchor:
<a href="url"> Link text </a>
• The <a> tag is used to create a link.
• The href attribute specifies the destination address.
• the words between the open and close of the anchor tag will be displayed as a
hyperlink.
NOTE: The link text does not have to be text. It can be an HTML image or any other
HTML element.

HTML … Links
• The target attribute:
The target attribute specifies where to open the linked document.
Example 10
Like: <a href="url" target="_blank"> Link text </a>
Target Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window

HTML … Links
Create a Bookmark:
HTML bookmarks are used to allow readers to jump to specific parts of a Web
page. Bookmarks are practical if your website has long pages.
Example 11
Like: <h1 id="c15">Chapter 15 </h1>
First, create a bookmark with the id attribute:
Then, add a link to the bookmark ("ch2"), within the same page:
Like: <a href="#c15">Jump to chapter 15</a>

HTML … Images
• In HTML, images are defined with the <img> tag.
• The <img> tag is empty, it contains attributes only, and does not have a closing
tag.
• The src attribute specifies the URL (web address) of the image:
Some img tag attributes:
• alt: Specifies an alternate text for an image, if the image cannot be displayed.
• width and height: to specify the width and height of an image.
• aligning image: to align the image within the text using ( top, middle or
bottom) values.
• border: specify the image border.
• bordercolor: specify the color of the border.
example-17 imgalign
<img src="url" alt="some_text">

HTML … Images
Using an Image as a Link
To use an image as a link, simply nest the <img> tag inside the <a> tag:
<a href="e5-1_bgcolor.html">
<img src="smiley.gif" alt="HTML" height="42px" width="42px"
border=“5“ bordercolor=“green”> </a>
Example-17

HTML … Frames
With frames, you can display more than one Web page in the same browser
window.
Frame tags
Frameset tag :
• The <frameset> tag defines how to divide the window into frames.
• Each frameset defines a set of rows or columns

HTML … Frames
• The values of the rows/columns indicate the amount of screen area each
row/column will occupy.
Frame tag:
• <frame> tag defines what HTML document to put into each frame.
• Attributes: name
Optional Attributes:
• Cols: Specifies the number and size of columns in a frameset its value can be
percentage or pixels.
• Rows: Specifies the number and size of rows in a frameset its value can be
percentage or pixels. <frameset cols="25%,25%,50%">
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>

HTML … Frames
Create a vertical frames
<html>
<frameset cols="25%,50%,25%">
</frameset>
</html>
Examples:
Create a horizontal frames
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_c.html" noresize='noresize'
border=''>
</frameset>
</html>
Create a mixed frames
<html>
<frameset rows="50%,50%">
<frameset cols="25%,75%">
</frameset>
</frameset>
</html>
Create a navigation frameset
<html>
<frameset cols="10%,*">
<frame src="links.html">
<frame src="frame_a.html“ name="showframe">
</frameset>
</html>
e12-vertical frames
e13-horizontal frames
e15-mixed frames
e15-navigation frames
Example 15-iframe

HTML … Frames
NOTE:
• If a frame has visible borders, the user can resize it by dragging the border. To
prevent a user from doing this, you can add noresize="noresize" to the
<frame> tag.
• Add the <noframes> tag for browsers that do not support frames.
• You cannot use the <body></body> tags together with the
<frameset></frameset> tags! However, if you add a <noframes> tag
containing some text for browsers that do not support frames, you will have to
enclose the text in <body></body> tags!

web development.pdf

More Related Content

Similar to web development.pdf (20)

Recently uploaded (20)

web development.pdf