web design fundamentals
DESCRIPTION
محاضرة اساسيات تصميم مواقع الويب لاحمد فارس فريق انوار رسالةTRANSCRIPT
![Page 1: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/1.jpg)
Web Design Fundamentals
Let’s Build Websites
AHMED FARIS
FREELANCER WEB UI / UX DEVELOPER
![Page 2: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/2.jpg)
Web Design Definition
![Page 3: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/3.jpg)
![Page 4: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/4.jpg)
WEB
![Page 5: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/5.jpg)
![Page 6: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/6.jpg)
![Page 7: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/7.jpg)
Questions Worth Asking?
What will be the purpose of your website?
Who will your audience be?
What will be the content of your website?
What types of design are you aiming at?
![Page 8: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/8.jpg)
UI Design
Sketch Layout
![Page 9: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/9.jpg)
Example 2
Sketch Layout
![Page 10: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/10.jpg)
![Page 11: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/11.jpg)
Father of the Internet
I just had to take the hypertext idea and connect it to
the TCP and DNS ideas and —ta-da! —the World Wide Web.–- Sir, Tim Berners-Lee
Known as the Creator of WWW
![Page 12: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/12.jpg)
HTMLHyper Text Markup Language
![Page 13: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/13.jpg)
<html>
Why? How?What?
![Page 14: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/14.jpg)
<tag attribute=“value”>
content
</tag>
html Syntax
<tag attribute=“value”>
content
</tag>
![Page 15: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/15.jpg)
<tag attribute=“value”>
content
</tag>
html Structure
<html>
<head>
</head>
<body>
</body>
</html>
![Page 16: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/16.jpg)
- Heading <h#></h#>
- Paragraph <P> </p>
- Order list <ol> </ol>
- Unorder list <ul> </ul>
- List item <li> </li>
- Image <img />
- Sound
<audio>
</audio>
- Video
<video>
</video>
- Link <a> </a>
- Division <div> </div>
- Table
<table></table>
- Heading <h#></h#>
- Paragraph <P> </p>
- Order list <ol> </ol>
- Unorder list <ul> </ul>
- List item <li> </li>
Tags
Text Media Misc.
- Image <img />
- Sound
<audio>
</audio>
- Video
<video></video>
- Link <a> </a>
- Division <div> </div>
- Table
<table>
</table>
![Page 17: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/17.jpg)
CSSCascading Style Sheets
![Page 18: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/18.jpg)
.CSS { }
Why? How?What?
![Page 19: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/19.jpg)
<tag attribute=“value”>
content
</tag>
CSS Syntax
Selector {
property: value;
property: value;
}
![Page 20: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/20.jpg)
Selectors
Selectors Tags
<tag
attribute=“value”>
content
</tag>
body {
font-family: Tahoma;
background: green;
}
1
Target Tags2
ID3
Class4
![Page 21: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/21.jpg)
Selectors
Selectors Tags
<tag
attribute=“value”>
content
</tag>
body div p {
font-size: 18px;
color: #fffddd;
}
1
Target Tags2
ID3
Class4
![Page 22: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/22.jpg)
Selectors
Selectors Tags
<tag
attribute=“value”>
content
</tag>
#ayhaga{
width: 320px;
border: 1px solid red;
}
1
Target Tags2
ID3
Class4
![Page 23: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/23.jpg)
Selectors
Selectors Tags
<tag
attribute=“value”>
content
</tag>
.ahmed2{
position: absolute;
margin: 5px 2px 5px 2px;
}
1
Target Tags2
ID3
Class4
![Page 24: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/24.jpg)
JQueryJava Script Library
![Page 25: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/25.jpg)
JQuery
Why? How?What?
![Page 26: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/26.jpg)
Sources
• w3.org/standards/webdesign/htmlcss
• w3schools.com
• ar.html.net
• learn.shayhowe.com/html-css
• material-ui.com
• Tutsplus.com
![Page 27: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/27.jpg)
ApplicationsWeb D&P Languages Editors
![Page 28: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/28.jpg)
Code Editors WYSIWYG
![Page 29: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/29.jpg)
CMSContent Management Systems
![Page 30: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/30.jpg)
Web Mastering
• Domain Names
• Hosting Servers
• FTP
• Servers OS’s
• WHM/Cpanel
• ………….
![Page 31: Web Design Fundamentals](https://reader033.vdocuments.mx/reader033/viewer/2022052907/55943dea1a28abf15b8b4692/html5/thumbnails/31.jpg)
Thank You !AHMED FARIS
FREELANCER WEB UI / UX DEVELOPER
WWW.ALFARIS.WS
010 9234 7057