21
Web Fundamentals
| Date post: | 09-Feb-2017 |
| Category: |
Technology |
| Upload: | fadwa-gmiden |
| View: | 88 times |
| Download: | 0 times |
Web Fundamentals
Objective
1st Step
2nd Step
3rd Step
4th Step
5th Step
We stand here
Types of Websites
How does it really works
First web page
Firstweb project?
Structure and Styling
What are websites types?
Dynamic vs Static
Static websites
Our website
HTML5File
CSSFile
JSFile
Dynamic websites
Our website
HTML5File
HTML5File
JSFile
PHPFile
SQLFile
How does web work?
Application Server & Web Server
Internet
HTTP Requests
Web Response
Protocol Requests
Our First Web Page
Web Page Structure
Header
Main Content
Footer
Web Page Structure
<!DOCTYPE html><head>
<title>Page Title</title></head><body>
[...] yada yada yada [...]</body></html>
Web Page Structure in depth<!DOCTYPE html><head>
<title>Page Title</title><meta ...><link rel="stylesheet" type="text/css" href=""><link rel="icon" href="my/path/to/favicon.ico" type="image/x-icon" />
<script type="text/javascript"></script></head><body>
<header><nav></nav>
</header><section>
<article></article>…<!-->This is a comment<-->
</section><aside></aside><footer></footer>
</body></html>
Structure and Styling
What is structure?
Head Structure in depth
<head><title>Page Title</title><meta ...><link rel="stylesheet" type="text/css" href=""><link rel="icon" href="my/path/to/favicon.ico" type="image/x-icon" />
<script type="text/javascript"></script></head>
Body Structure in depth
Body Structure:
<body><header>
<nav></nav>
</header><section>
<article></article>...
</section><aside></aside><footer></footer>
</body>
Important tags inside of Body:
<h1></h1> Header tag from 1..<h6></h6> To 6<p></p> Paragraph tag<ul></ul> (<ol></ol>) List tag<a></a> Link tag<img> Image tag<table></table> Table tag<video></video> Video tag<audio></audio> Audio tag<br/> Break-line<hr> Horizontal line<div></div> new block
What is styling?
Styling web pages
CSS: Cascading Style Sheet
body{background-color: #015582;color: white;line-height:1.45
}img{
width:100%;height:400px;
}
Styling in depth
3 ways to add styles to the code:➔ Inside the Style tag
<style type="text/css">body{
background-color: #015582;color: white;line-height:1.45
}img{
width:100%;height:400px;
}</style>
➔ Inside a tag using style attribute<p style = "color:red;"></p>
➔ In an external file <link rel="stylesheet" type="text/css" href="path/to/file.css">
Styling in depth
Why use CSS:
➔ Defining areas➔ Defining Colors➔ Creating transitions➔ Fonts➔ ...➔ Responsiveness ➔ Usability
First web project
Creating our first web project
Understandingfolder hierarchy
Ask Questions
Pick a project
Present your work
Work together
Thank youFadwa Gmiden
