website design, development & maintenance | foundations | week 01
TRANSCRIPT
![Page 1: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/1.jpg)
mh653 | 2011web design, development and maintenance
![Page 2: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/2.jpg)
The Presentation layeris the tip of the iceberg
![Page 3: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/3.jpg)
the code renderedjust under the surface
![Page 4: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/4.jpg)
The program rendering
![Page 5: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/5.jpg)
the machine housing the source code
![Page 6: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/6.jpg)
source code
HTML
CSS
MySQL
ASP
ASP.NET
PHP
ColdFusion
AJAX JSON
JAVAAS3
Rails
SOAP
JavaScript
XMLXSLT
DHTML
Flex
OWL
![Page 7: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/7.jpg)
HTML CSS
![Page 8: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/8.jpg)
Hyper Text Markup Language
Cascading Style Sheet
![Page 9: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/9.jpg)
HTMLthe frame of all web pages
![Page 10: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/10.jpg)
CSSmakes it pretty
![Page 11: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/11.jpg)
all code has an author
![Page 12: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/12.jpg)
all code has an author
• coding is a ‘by hand’ activity
• code can be repetitive
• code has to get put onto the server
![Page 13: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/13.jpg)
FTP
![Page 14: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/14.jpg)
FTP
FILE TRANSFER PROTOCOL
![Page 15: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/15.jpg)
File transfer protocol
• a means of getting files from your computer to a web server; whereby others can request it on their computers
![Page 16: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/16.jpg)
process from beginningwrite the code
![Page 17: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/17.jpg)
process from beginningsave the file locally
![Page 18: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/18.jpg)
process from beginningupload your file to a server
![Page 19: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/19.jpg)
process from beginningrequest your file via your URL
![Page 20: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/20.jpg)
process from beginningYou just made a web page
![Page 21: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/21.jpg)
All languages = HTML
CSS
MySQL
ASP
ASP.NETPHP
ColdFusion
AJAX
JSON
JAVAAS3Rails
SOAP JavaScriptXML
XSLTDHTML
FlexOWL
![Page 22: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/22.jpg)
All languages = HTML
+
HTML
CSS
MySQL
ASP
ASP.NETPHP
ColdFusion
AJAX
JSON
JAVAAS3Rails
SOAP JavaScriptXML
XSLTDHTML
FlexOWL
![Page 23: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/23.jpg)
what makes up code?
• html is made up of elements or ‘tags’
• the content of tags are what you see on a page
• tags are the language you will be learning
![Page 24: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/24.jpg)
What do tags look like?
<html> this is what an opening tag looks like
</html> this is what an closing tag looks like
![Page 25: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/25.jpg)
how does code work?
• All web pages have three elements, opened and closed, that are needed to work properly
<html></html><head></head><body></body>
![Page 26: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/26.jpg)
how they are organized<html>
</html>
<head></head>
<body>
</body>
<html> tells the browser the kind of doc
<head> helps search engines
<body> is where visual and functional items you see on a web page are put
![Page 27: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/27.jpg)
understanding nesting
• nesting helps different elements in HTML appear correctly
• think of nesting like tupperware, you can fit different elements inside each other
• Those that can fit will work correctly
• Those that can’t, will not work right - not necessarily break but won’t work right
![Page 28: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/28.jpg)
lets begin formatting text
<h1>hello world</h1><h2>hello world</h2><h3>hello world</h3><h4>hello world</h4><h5>hello world</h5><h6>hello world</h6><p>hello world</p>
![Page 29: Website Design, Development & Maintenance | Foundations | Week 01](https://reader034.vdocument.in/reader034/viewer/2022042716/55ab419a1a28ab6a728b46a3/html5/thumbnails/29.jpg)
What we do now
• Open up a text editing program on your machine
• MAC = Text Edit
• PC = TextEdit
• MAC == please turn off RTF and restart
• To the Web