Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
95 views

Web Programming HTML

Uploaded by

adhamelthn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
95 views

Web Programming HTML

Uploaded by

adhamelthn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 48

Web Programming

HTML

CSS JavaScript

Step by step Exercises


History of the Web
• Internet (1960s)
• World Wide Web - WWW ()1991
• First Web Browser - Netscape, 1994
• Google, 1998
• Facebook, 2004
• Smartphones (iPhone), 2007
• Tablets (iPad), 2010
The Web Browser

Chrome
Internet Explorer

Opera

Safari
Firefox
The Web Programming Triangle

HTML Use HTML to define the


content of web pages

Web
Programming
CSS JavaScript
Use CSS to specify the layout of web pages Use JavaScript to program
the behavior of web pages
Basic Web Programming
• HTML
• CSS
• JavaScript

For more Dynamic Web Programming we use e.g,.


• ASP.NET
• SQL
• AJAX
• PHP
• etc .
CSS

Server
Web
JavaScript
Web Architecture

Internet Explorer Chrome Firefox Opera Safari

Web Browser
Client

HTML CSS JavaScript


Server-side

Web Server
Client-Server Example
Client
Web Browser

Response
Web Server

Request
Database

Internet Information Services (IIS), Apache, etc.


Web Platform
The Web Browser creates the visual web page you see in the browser based on
<!DOCTYPE html> the HTML code
<html>
<body>

<h1>My First Heading</h1>

HTML, CSS, JavaScript


<p>My first paragraph.</p>
Client-side
</body>
Web Browser
</html>

The code runs on the server and converted to Web Page (HTML)
HTML before sending to client (Web Browser)

Web Server Server-side


ASP.NET, PHP... ,
HTML
• HyperText Markup Language (HTML)
• The Visual Appearnce of a Web Site
• “Web Browser Language:”
(All Web Browser understand HTML)
• HTML5 is the latest Maintained by W3C
( World Wide Web Consortium)

1
3
HTML Editors
Professional HTML editors:
• Adobe Dreamweaver
• CoffeeCup HTML Editor
• Notpad++,……..
For the simple examples in this Tutorial we only
need Notepad (Windows)
What Are HTML Tags?

• Tags are used to mark up the start of an HTML element and


they are usually enclosed in angle brackets.
An example of a tag is: <h1>.
• Most tags must be opened <h1> and closed </h1> in order to
function.
HTML Code

<!DOCTYPE html>
<html>
HTML
<head>
<title> This is document title </title>
</head>
<body>
<h1> This is a heading </h1>
<p> Hello World! </p>
</body>
</html>

Web Browser
HTML Page Structure

<!DOCTYPE html>
<html>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another
paragraph.</p>

</body>
</html>

1
5
My First HTML Web Page
<tagname>content</tagname>

• The DOCTYPE declaration defines the


<!DOCTYPE html> document type
<html> • The text between <html> and</html>
<body> describes the web document
• The text between <body> and</body>
describes the visible page content
<h1>My First Heading</h1> • The text between <h1> and </h1> describes
a heading
• The text between <p> and </p> describes
<p>My first paragraph.</p> pragraph

</body>
</html>
In HTML, headings are written in the following elements:
•<h1>
•<h2>
•<h3>
•<h4>
•<h5>
•<h6>

As you might have guessed <h1> and <h2> should be used for the most
important titles, while the remaining tags should be used for sub-headings
and less important text.
HTML Tags
Hyperlink:
<a href="http://www.google.com">This is a link to Google</a>

Bold Text:
Paragraph:
<b>This is my Text</b >
<p>My first paragraph.</p>
Headers:
Line Break:
<h1>This is my Header</h1>
This is my Text
<h2>This is my Header</h2> < br >
<h3>This is my Header</h3> This is also my Text

Title : Comments:
<title>This is my Title</title >
<!-- Write your comments here -->
Image:
<img src=“myimage.jpg" alt=”blabla" width="104" height="142">
<!DOCTYPE html>
<html>
<body>
Hyperlinks
<h1>This is a heading</h1>

<a href="http://www.google.com">This is a link to


Google</a>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h1>This is a heading</h1>
Images

<img src=“myimage.jpg" alt=”blabla" width="104" height="142>


</body>
</html>
HTML <pre> Tag

• The <pre> tag defines preformatted text.


• Text in a <pre> element is displayed in a fixed-width font,
and the text preserves both spaces and line breaks. The text
will be displayed exactly as written in the HTML source code.

<pre>
Text in a pre element is displayed in a fixed-width
font, and it preserves both spaces and line breaks
</pre>
HTML <meta> Tag

• The <meta> tag defines metadata about an HTML document.


Metadata is data (information) about data.

• <meta> tags always go inside the <head> element, and are typically used
to specify character set, page description, keywords, author of the
document, and viewport settings.

• Metadata will not be displayed on the page, but is machine parsable.


Example:

<head>

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
Attributes:

Attribute Value Description

charset character_set Specifies the character encoding for


the HTML document
content text Specifies the value associated with
name attribute
name application- Specifies a name for the metadata
name
author
description
keywords
viewport
More Examples:

Define keywords for search engines:


<meta name="keywords" content="HTML, CSS, JavaScript">
Define a description of your web page:
<meta name="description" content="Free Web tutorials for HTML and CSS">
Define the author of a page:
<meta name="author" content="John Doe">
Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The viewport is the user's visible area of a web page. It varies with
the device - it will be smaller on a mobile phone than on a computer
screen.

• You should include the following <meta> element in all your web
pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• The width=device-width part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device).
• The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by
the browser.
HTML block level and inline elements

In general, HTML elements can be divided into two categories :

block level elements and inline elements.


1. HTML block level elements can appear in the body of an HTML page.
2. It can contain another block level as well as inline elements.
3. By default, block-level elements begin on new lines.
4. block level elements create larger structures (than inline elements).
List of block level elements

• P <p></p>
• h1, h2, h3, h4, h5, h6
• ol, ul
• pre
• address
• blockquote
• dl
• div
• fieldset
• form
• hr
• noscript
• table
Example of block level elements:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of HTML block level element</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque
mollis nisl, vel posuere nulla convallis non.</p>
<p>Aenean lacus ligula, suscipit a fringilla id, laoreet nec tortor. Fusce pharetra
interdum mauris quis mollis.</p>
</body>
</html>
The results
HTML inline elements

1. HTML inline level elements can appear in the body of an HTML page.
2. It can contain data and other inline elements.
3. By default, inline elements do not begin on new lines.
4. inline elements create shorter structures (than block level elements).
List of inline elements
• b, big, i, small, tt
• abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
• a, bdo, br, img, map, object, q, script, span, sub, sup
• button, input, label, select, textarea
Example of inline elements:

The result
HTML <blockquote> Tag
The <blockquote> tag specifies a section that is quoted from another source.
Editing Elements

ins element (for insertions) and the del element (for


deletions)
The <ins> tag defines a text that has been inserted into a
document. Browsers will usually underline inserted text.
The <del> tag defines text that has been deleted from a
document. Browsers will usually strike a line through deleted
text.
The HTML <q> tag is used for indicating short quotations (i.e. quotations
that needs to display within a non-quoted paragraph).
Browsers generally surround <q> text with quotation marks
dfn and abbr, Elements
• The <dfn> tag stands for the "definition element", and it specifies
a term that is going to be defined within the content.

• The nearest parent of the <dfn> tag must also contain the
definition/explanation for the term.
The <abbr> tag defines an abbreviation or an acronym, like
"HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
sub, sup, s, mark, and small Elements
• The <sub> tag is used to add a subscript text to the HTML document.
The <sub> tag defines the subscript text. Subscript text appears half a
character below the normal line and is sometimes rendered in a
smaller font. Subscript text can be used for chemical formulas, like H2O
to be written as H2O.

• The <sup> tag is used to add a superscript text to the HTML document.
The <sup> tag defines the superscript text. Superscript text appears half
a character above the normal line and is sometimes rendered in a
smaller font. Superscript text can be used for footnotes.
The <s> element renders text with a strikethrough, or a line through it.
The <mark> element represents text which
is marked or highlighted for reference or notation purposes, due to
the marked passage's relevance or importance in the enclosing
context.
The <small> element represents side-comments and small print
strong, em, b, u, and i Elements
The <strong> element indicates that its contents have strong
importance
• The <em> element marks text that has stress emphasis.
The <em> element can be nested, with each level of nesting
indicating a greater degree of emphasis.
The <u> element represents a span of inline text which should be
rendered in a way that indicates that it has a non-textual annotation.
This is rendered by default as a simple solid underline
The <i> element these have been presented using italicized type,
which is the original source of the <i> naming of this element.
span Element
The <span> element is a generic inline container for phrasing
content, which does not inherently represent anything. It can be
used to group elements for styling purposes

You might also like