Embed Size (px)
Citation preview
mh653 | 2011web design, development and maintenance
The Presentation layeris the tip of the iceberg
the code renderedjust under the surface
The program rendering
the machine housing the source code
source code
HTML
CSS
MySQL
ASP
ASP.NET
PHP
ColdFusion
AJAX JSON
JAVAAS3
Rails
SOAP
JavaScript
XMLXSLT
DHTML
Flex
OWL
HTML CSS
Hyper Text Markup Language
Cascading Style Sheet
HTMLthe frame of all web pages
CSSmakes it pretty
all code has an author
all code has an author
• coding is a ‘by hand’ activity
• code can be repetitive
• code has to get put onto the server
FTP
FTP
FILE TRANSFER PROTOCOL
File transfer protocol
• a means of getting files from your computer to a web server; whereby others can request it on their computers
process from beginningwrite the code
process from beginningsave the file locally
process from beginningupload your file to a server
process from beginningrequest your file via your URL
process from beginningYou just made a web page
All languages = HTML
CSS
MySQL
ASP
ASP.NETPHP
ColdFusion
AJAX
JSON
JAVAAS3Rails
SOAP JavaScriptXML
XSLTDHTML
FlexOWL
All languages = HTML
+
HTML
CSS
MySQL
ASP
ASP.NETPHP
ColdFusion
AJAX
JSON
JAVAAS3Rails
SOAP JavaScriptXML
XSLTDHTML
FlexOWL
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
What do tags look like?
<html> this is what an opening tag looks like
</html> this is what an closing tag looks like
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>
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
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
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>
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
