CH-1[Introduction to web technology].pdf
eyasu6
4 views
26 slides
Mar 04, 2025
Slide 1 of 26
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
About This Presentation
web related system
Slide Content
Introduction to Web Technologies
➢HTML
➢CSS
➢Bootstrap
Web Scripting Languages
CHAPTER ONE CHAPTER TWO
Web Application Development
➢JavaScript
➢Advanced JavaScript: JSON, Ajax, JQUERY
➢HTML
➢CSS
➢Bootstrap
Web Scripting Languages
CHAPTER ONE CHAPTER TWO
Web Application Development
➢JavaScript
➢Advanced JavaScript: JSON, Ajax, JQUERY
Front End Technologies
➢Front-End Frameworks
➢Angular
➢ReactJS
Back End Technologies
➢Node.JS
➢ExpressJS
➢MongoDB
CHAPTER THREE CHAPTER FOUR
Web Application Development
➢Front-End Frameworks
➢Angular
➢ReactJS
Back End Technologies
➢Node.JS
➢ExpressJS
➢MongoDB
CHAPTER THREE CHAPTER FOUR
Web Application Development
Mobile web development
➢Mobile-First? What is
➢Mobile Web? Understanding
➢Mobile Devices and Desktop
CHAPTER FIVE
Web Application Development
➢Mobile-First? What is
➢Mobile Web? Understanding
➢Mobile Devices and Desktop
CHAPTER FIVE
Web Application Development
Summary
Internet
WWW
Design good website
Types of webpage
Internet
WWW
Design good website
Types of webpage
Chapter One
Introduction to Web
Technologies
5
Introduction to Web
Technologies
5
HTML
1
4
2
5
3
not a
programming
language
used for creating
webpages
It canembed
uses markup
tags
tags normally
come in pairs
1
4
2
5
3
not a
programming
language
used for creating
webpages
It canembed
uses markup
tags
tags normally
come in pairs
HTMLDocumentStructure
•An HTML document has the following basicstructure:
<html>
<head>
<title>pagetitle</title>
</head>
<body>
</body>
</html>
7
HTML
•An HTML document has the following basicstructure:
<html>
<head>
<title>pagetitle</title>
</head>
<body>
</body>
</html>
7
HTML
Tag:-a piece of code that acts as a label that a
web browser interprets
Element:-A complete tag
Attribute:-property value that customizes or
modifies an HTML
T
E A
HTML
web browser interprets
Element:-A complete tag
Attribute:-property value that customizes or
modifies an HTML
T
E A
HTML
Body
H T M L
H T M L
FormattingTags
<i></i>
<u></u>
<sup></sup>
<sub></sub>
<em></em>
<b></b>
<del></del>
<br>
<h1></h1>
•<hr>
•<font>…</font>
•<p>…</p>
H T M L
H T M L
FormattingTags
<i></i>
<u></u>
<sup></sup>
<sub></sub>
<em></em>
<b></b>
<del></del>
<br>
<h1></h1>
•<hr>
•<font>…</font>
•<p>…</p>
10
HTMLTags
•Lists: Unordered, Ordered and Definitionlists
•Unordered Lists(ul)
•Format:
<ul>
<li>…</li>
<li>…</li>
…
</ul>
•Atribute:
•type=“bullet type” {disc, circle,square}
11
•Lists: Unordered, Ordered and Definitionlists
•Unordered Lists(ul)
•Format:
<ul>
<li>…</li>
<li>…</li>
…
</ul>
•Atribute:
•type=“bullet type” {disc, circle,square}
11
Cont…
•Ordered Lists(ol)
•Format:
<ol>
<li>…</li>
<li>…</li>
…
</ol>
•Atribute:
•type=“number type” {1, i, I, a,A}
12
•Ordered Lists(ol)
•Format:
<ol>
<li>…</li>
<li>…</li>
…
</ol>
•Atribute:
•type=“number type” {1, i, I, a,A}
12
HTMLTags
•Definition Lists(dl)
•define a list of term-descriptionpairs
•Format:
<dl>
<dt>…</dt>
<dd>…</dd>
…
</dl>
•E.g.
<dl>
<dt>book</dt><dd>somethingthat we read …</dd>
<dt>marker</dt><dd>something we write with
…</dd>
13
•Definition Lists(dl)
•define a list of term-descriptionpairs
•Format:
<dl>
<dt>…</dt>
<dd>…</dd>
…
</dl>
•E.g.
<dl>
<dt>book</dt><dd>somethingthat we read …</dd>
<dt>marker</dt><dd>something we write with
…</dd>
13
➢List
➢Link
➢Image
➢Table
➢Form
➢Frame
HTML
➢Link
➢Image
➢Table
➢Form
➢Frame
HTML
Table H T M L
Tags used
<table>
<caption></caption>
<tr></tr>
<th></th>
<td></td>
</table>
•Table attributes[<table>]: align, bgcolor, width, border, bordercolor,
cellspacing, cellpadding
•rowattributes[<tr>]:align, bgcolor, height, valign
•data attributes[<td>]:align, valign, width, bgcolor, colspan, rowspan
Tags used
<table>
<caption></caption>
<tr></tr>
<th></th>
<td></td>
</table>
•Table attributes[<table>]: align, bgcolor, width, border, bordercolor,
cellspacing, cellpadding
•rowattributes[<tr>]:align, bgcolor, height, valign
•data attributes[<td>]:align, valign, width, bgcolor, colspan, rowspan
AB C
DE F
4 columns Merged
BC D E
FG H I
3 rows Merged
B C D
E F G
H IJ
A 3 columns Merged
B C D E
F G H
2 rows
Merged
2 columns Merged I
Table 1.0
Table 4.0
Table 2.0 Table 3.0
Exercise
DE F
4 columns Merged
BC D E
FG H I
3 rows Merged
B C D
E F G
H IJ
A 3 columns Merged
B C D E
F G H
2 rows
Merged
2 columns Merged I
Table 1.0
Table 4.0
Table 2.0 Table 3.0
Exercise
FORM
H T M L
Tags used
<form>
<fieldset>
<legend></legend>
</fieldset>
<input>
<select>
<option></option>
</select>
</form>
•Form attribute[<form>]: name, action,
method
•Input attributes[<input>]: type, size,
name, value
H T M L
Tags used
<form>
<fieldset>
<legend></legend>
</fieldset>
<input>
<select>
<option></option>
</select>
</form>
•Form attribute[<form>]: name, action,
method
•Input attributes[<input>]: type, size,
name, value
Exercise
Inline:-Inside a single HTML element
Internal:-Inside the <head> element of an
HTML document
External:-In an external CSS file
I
I E
C S S
Internal:-Inside the <head> element of an
HTML document
External:-In an external CSS file
I
I E
C S S
p{
color:red;
/* This is a single-line comment*/
text-align:center;
}
mystyle.css
HTML file calling cssfile
color:red;
/* This is a single-line comment*/
text-align:center;
}
mystyle.css
HTML file calling cssfile
Bootstrap
✓isafront-endframeworkthathelpsyoudesignwebinterfaceswith
ready-madeHTML,CSSandJavaScriptcomponentsforcommon
elementslikenavigation,forms,andbuttons.
✓Italsohasaresponsivegridlayoutsystemthatadjustsyoursitefor
deviceswithdifferentscreensizes,suchasphonesandtablets.
✓WithBootstrap,developerscansavetimeandeffortbyutilizing
pre-designedcomponents
✓providesnumerousstylingoptionsandutilitiestoenhancethe
overallappearanceandfunctionalityofwebsites.
✓Itwidelyusedbywebdeveloperstostreamlinetheweb
developmentprocessandcreateconsistentandvisually
appealinguserinterfaces.
✓isafront-endframeworkthathelpsyoudesignwebinterfaceswith
ready-madeHTML,CSSandJavaScriptcomponentsforcommon
elementslikenavigation,forms,andbuttons.
✓Italsohasaresponsivegridlayoutsystemthatadjustsyoursitefor
deviceswithdifferentscreensizes,suchasphonesandtablets.
✓WithBootstrap,developerscansavetimeandeffortbyutilizing
pre-designedcomponents
✓providesnumerousstylingoptionsandutilitiestoenhancethe
overallappearanceandfunctionalityofwebsites.
✓Itwidelyusedbywebdeveloperstostreamlinetheweb
developmentprocessandcreateconsistentandvisually
appealinguserinterfaces.
Why use Bootstrap?
❖Responsive design:Bootstrapisbuiltwithamobile-first
approach,meaningitisdesignedtoberesponsiveandadaptto
differentscreensizes.
❖Time-saving:Bootstrapprovidesawiderangeofpredefinedand
customizableCSSandJavaScriptcomponents,suchasgrids,buttons,
navigationbars,andmodals.
❖help developers save time and effort by eliminating the
need to code everything from scratch.
❖Consistentappearance:WithBootstrap,youcanachieveaconsistent
andprofessional-lookingdesignacrossyourmobileapplication.
❖It offers a set of predefined styles and themes that can be
easily customized to match your brand's identity.
❖Responsive design:Bootstrapisbuiltwithamobile-first
approach,meaningitisdesignedtoberesponsiveandadaptto
differentscreensizes.
❖Time-saving:Bootstrapprovidesawiderangeofpredefinedand
customizableCSSandJavaScriptcomponents,suchasgrids,buttons,
navigationbars,andmodals.
❖help developers save time and effort by eliminating the
need to code everything from scratch.
❖Consistentappearance:WithBootstrap,youcanachieveaconsistent
andprofessional-lookingdesignacrossyourmobileapplication.
❖It offers a set of predefined styles and themes that can be
easily customized to match your brand's identity.
Cont…
✓Cross-browsercompatibility:Bootstrapisdesignedtoworkwell
acrossdifferentwebbrowsers,ensuringthatyourmobileapplication
functionsconsistentlyforusers.
✓Accessibility:Bootstrapfollowsmodernwebdevelopmentstandards
andbestpractices,includingaccessibilityguidelines.
✓ensures that your mobile application is accessible to users
with disabilities, enhancing its usability and reach.
✓Continuousupdatesandenhancements:regularlyupdatedand
improvedwithnewfeatures,bugfixes,andperformance
enhancements.
✓By using Bootstrap, you can take advantage of these updates
to keep your mobile application up-to-date and optimized.
✓Easytogetstarted:WithjusttheknowledgeofHTMLandCSSanyonecan
getstartedwithBootstrap.AlsotheBootstrapofficialsitehasagood
documentation
✓Cross-browsercompatibility:Bootstrapisdesignedtoworkwell
acrossdifferentwebbrowsers,ensuringthatyourmobileapplication
functionsconsistentlyforusers.
✓Accessibility:Bootstrapfollowsmodernwebdevelopmentstandards
andbestpractices,includingaccessibilityguidelines.
✓ensures that your mobile application is accessible to users
with disabilities, enhancing its usability and reach.
✓Continuousupdatesandenhancements:regularlyupdatedand
improvedwithnewfeatures,bugfixes,andperformance
enhancements.
✓By using Bootstrap, you can take advantage of these updates
to keep your mobile application up-to-date and optimized.
✓Easytogetstarted:WithjusttheknowledgeofHTMLandCSSanyonecan
getstartedwithBootstrap.AlsotheBootstrapofficialsitehasagood
documentation
BOOTSTRAP SOURCE CODE
With Bootstrap, you just need to include the bootstrap.cssCSS 1 file
and, optionally, the bootstrap.jsJavaScript file into your website and
you are ready to go.
With Bootstrap, you just need to include the bootstrap.cssCSS 1 file
and, optionally, the bootstrap.jsJavaScript file into your website and
you are ready to go.
THANK YOU
?
26
?
26
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 4
- Slides 26
- Age 276 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
33 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
36 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
33 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
29 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
30 views