Scribd
Upload
13 views

Lecture 1 Introduction To HTML

HTML

Uploaded by

Muhammad Hassan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

Lecture 1 Introduction To HTML

HTML

Uploaded by

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

WEB PROGRAMMING

LANGUAGES

1
Mobile Applications
Lecture Outcome
• What is HTML
• HTML Examples
• HTML Tables , Frames and Forms
• XHTML
• CSS (Cascade Style Sheets)
• Introduction to Java Script
Types of Applications
Application can be broadly classified:
• Desktop/Windows Form Applications (runs on Computers & needs Installation)
• Mobile Applications (runs on Mobile)
• Web Based Applications / Websites (runs on browsers)
Desktop Applications
Web Applications
Mobile Applications
SERVER SIDE

CLIENT SIDE
1. ASP.NET
2. JSP
1. HTML 3. PHP
2. JAVA SCRIPT
Mobile Applications
Client Side Task Server Side Task

1. Send Request 2. Receive Request


6. Receive Response 3. Process Request
7. Display Response 4. Generate Response (depends on Req)
5. Send Response

Client Side Languages Server Side Languages

1. HTML 1. PHP
2. CSS (Bootstrap) 2. JSP (Java)
3. JavaScript (jQuery, Angular, Node,....) 3. ASP.NET (C#)
Hyper Text Markup Language

• Developed by Tim Berners-Lee at CERN, the European


Particle Physics Laboratory.(1989)
• Hyper Text is the text from which we can jump to other part
by just clicking.
• Use of tags to create web pages is referred to as Markup.
• Used to create Web Page.
• Surrounding tags (<HTML> </HTML>)
• Separating tags (<HR> , <BR>)
HTML Page Structure

All HTML pages have a nested structure.


In the example below, the <head> and <body> tags are nested inside the <html> tag. Also,
the <title> tag is nested inside the <head> tag and the <h1> and <p> tags are nested inside
the <body> tag.
HTML Page Structure

All HTML pages have a nested structure.


<!DOCTYPE html> <html> <head> <title>Page title goes here</title> </head> <body>
<p>This text sits within a paragraph element.</p> <p>Other elements are used to write
text in <strong>bold</strong> or <em>italics</em>.</p> </body> </html>
Example
• <html>
• <head>
• <title>This text is in the document’s Title</title>
• </head>
• <body>
• <h1 align=“center”>This is a Centered Heading</h1>
• <p> This is the first paragraph </p>
• <p> This is the second paragraph </p>
• <hr size =“10”>
• <p align=“center”>This paragraph is centered and below the horizontal
rule.</p>
• </body>
• </html> Output
Description of HTML Example
Features of HTML
HTML Text Editors

Text editor recommendations


If you want a better plain-text editor than the one pre-installed on your
machine, you won’t go wrong by trying one of these:
• Notepad++ for Windows
• BBEdit for Mac
HTML code with Notepad. (Recommended for Beginners)
HTML code with Notepad ( 2of4 )
HTML code with Notepad ( 3of4 )
HTML code with Notepad ( 4of4 )
HTML: Basic Tags, Elements and Attributes

HTML Tag: Use to mark up the start and end of an element. End tags
consist of an opening angle bracket followed by a forward slash, the
element name, and a closing angle bracket.

HTML Attribute: defines a property of an element. It is on the form of


"attribute=value"
<from name="my_form">

HTML Element: represents an html structure and generally consists of


an start and end tag.
<p>
This is an Element
</p>
HTML: Basic Tags, Elements and Attributes
HTML
Elements

HTML
Attributes
HTML: Type of Tag
HTML: Type of Tag
HTML: Semantic & Non-Semantic
HTML: Example - Form
HTML: Example - Form
What is '&hellip;' in HTML?
HTML Character Entities: Punctuation Symbols, Punctuation Entities and
ASCII Character Code Reference

Easily find character codes for the HTML # sign, HTML @ symbol (at symbol), HTML
percent sign, HTML ampersand (& HTML code), HTML copyright symbol and HTML
caret insertion point, along with regular punctuation like the question mark, exclamation
point, non-breaking hyphen, non-breaking space and more.
HTML Character Entities: Punctuation Symbols, Punctuation Entities and
ASCII Character Code Reference
HTML: Example –Common Form Elements with CSS
HTML: Example –Common Form Elements with CSS
HTML Examples

• Paragraph
P , Div , Block quote
• Font & List
size , Heading , List
• Text Formatting
Text
• Special Commands
Special
HTML TABLES
<table border="1" >
<tr>
<td> Item A</td> Item A Item B
<td>Item B</td>
</tr> Item C
<tr>
<td>Item C</td>
<td></td>
</tr>
</table>
Questions ?
Israr Ali
NED University of Engineering & Technology

10/14/2024 Israr Ali (NED CCEE) 47


HTML: Example – Frame like Layout with CSS Fixed Position
HTML: Example - Form
HTML: CSS Box Model
CSS
• To make Web Page Attractive Styles are used.
• Storing all Styles together is called Creating Style
Sheet.
• Inside Command (H1, Body)
• In the <Head> of Page
• In Separate Notepad file (Recommended)
Simple CSS
• <html>
• <head>
• <title> Web engineering Style Sheet </title>
• <style>
• h1 { Text-Align:center; Text-decoration:underline;
• font-style:Italic; color:green; }
• </style>
• </head>

• <h1> HTML Style Sheets are easy and Powerfull</h1>


• </body>
• </html> Output
Separate File
NED.CSS
h1 { Text-Align:center; Text-decoration:underline;
font-style:Italic; color:green; }
STYLE.HTML

• <html> <head>
• <title> Web engineering Style Sheet </title>

• <link rel=stylesheet href=Ned.css>

• </head>
• <h1> HTML Style Sheets are easy and Powerfull</h1>
• </body></html> Output
Israr Ali
NED University of Engineering & Technology

10/14/2024 Israr Ali (NED CCEE) 55


What Is XHTML?
• XHTML stands for EXtensible HyperText Markup Language
• XHTML is aimed to replace HTML
• XHTML is almost identical to HTML 4.01
• XHTML is a stricter and cleaner version of HTML
• XHTML is HTML defined as an XML application
• XHTML is a W3C Recommendation
Why XHTML?

• <html>
• <head>
• <title>This is bad HTML</title>
• <body>
• <h1>Bad HTML
• </body>
HTML , XML , XHTML

• XML is a markup language where everything has to be marked up


correctly, which results in "well-formed" documents.
• XML was designed to describe data and HTML was designed to
display data.
• by combining HTML and XML, and their strengths, we got a markup
language that is useful now and in the future - XHTML.
Syntax

• XHTML elements must be properly nested


• XHTML elements must always be closed
• XHTML elements must be in lowercase
• XHTML documents must have one root element
• Attribute names must be in lower case
• Attribute values must be quoted
• Attribute minimization is forbidden
• The id attribute replaces the name attribute
• The XHTML DTD defines mandatory elements
XHTML DTD
• <!DOCTYPE> Is Mandatory
• The basic document structure is:

• <!DOCTYPE ...>
• <html>
• <head> <title>... </title> </head>
• <body> ... </body>
• </html>

• The DOCTYPE declaration should always be the first line in an XHTML document.
Example
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
• <html>
• <head>
• <title>simple document</title>
• </head>
• <body>
• <p>a simple paragraph</p>
• </body>
• </html>
DTD
There are currently 3 XHTML document types:

STRICT

FRAMESET TRANSITIONAL
XHTML 1.0 Strict
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• Use this when you want really clean markup, free of presentational
clutter. Use this together with Cascading Style Sheets.
XHTML 1.0 Transitional
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• Use this when you need to take advantage of HTML's presentational


features and when you want to support browsers that don't
understand Cascading Style Sheets.
XHTML 1.0 Frameset
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

• Use this when you want to use HTML Frames to partition the browser
window into two or more frames.
Summary
• You have learned that all XHTML elements must be properly nested,
XHTML documents must be well-formed, all tag names must be in
lowercase, and that all XHTML elements must be closed.
• You have also learned that all XHTML documents must have a
DOCTYPE declaration, and that the html, head, title, and body
elements must be present.
Review Question
1) What is HTML? ...

2) What are Tags? ...

3) Do all HTML tags have an end tag? ...

4) What is formatting in HTML? ...

5) How many types of heading does an HTML contain? ...

6) How to create a hyperlink in HTML? ...

7) Which HTML tag is used to display the data in the tabular form?
Web Resource
https://www.youtube.com/watch?v=bClVtd_2fAwlist=PLRBov8uf2SxTA9MnSbbB_AKcg0mOxusvA

https://www.youtube.com/watch?v=bClVtd_2fAw&list=PLRBov8uf2SxTA9MnSb
bB_AKcg0mOxusvA
Thank you
Insert the title of your subtitle Here

You might also like