29
| Date post: | 18-Dec-2014 |
| Category: |
Education |
| Upload: | nycss-meetup |
| View: | 1,037 times |
| Download: | 1 times |
What is the Web?
• It’s magic!
• Network of a collection of interlinked hypertext documents accessed via internet
• Consists of web servers, IP (internet protocol), DNS (domain name service) and pixie dust
Web
• Consists of many languages – HTML, CSS, JS, PHP, etc.
• Every language has it’s own syntax and semantics• Syntax: – the study of grammar – (how you say something)
• Semantics: – the study of meaning – (meaning behind what you say)
Web Layers
• HTML = Content Layer– This is the structure and raw content of the page
• CSS = Presentation Layer– This layer add styles to the structure and content of
your webpage• JS = Behavior Layer– This layer dictates how an item behaves when clicked
on, hovered over, or sometimes further styled to achieve a certain look/behavior
– It dictates how things act and react to user interaction
What is HTML?
• HyperText Markup Language– It is a simple data language that consists of tags used to display
content of a webpage– It defines the structure and semantics of your web document– It is referred to as the content layer in the web cake analogy
• Most commonly used today is the more structured way of writing HTML: xHTML
Extensible HyperText Markup Language
What is HTML?
• It is NOT a programming language• It is a markup language• A markup language is a set of markup tags• Uses markup tags to describe web pages
(source: http://www.w3schools.com/html/html_intro.asp)
How does it work?
• Very simple and logical format• Much like a word document• Read from top to bottom, left to right.• Written with text in a plain text editor• Consists of tags used to set certain sections apart (bigger text,
bolder text, etc)• Different tags call different functions and do different things
to the HTML text.
For a list of tags for HTML 4.0 and xHTML 1.0 visit: http://www.w3schools.com/tags/default.asp
What is a tag?
• A tag is the basis for HTML• It’s a command enclosed with less-than and greater-than sign
– <html>, <head>, <body>, <h1>, <p>– making text bold, turning text into a heading, grouping
sentences to form a paragraph, etc.• Most tags come in pairs:
– an opening (starting) and a closing (ending) tag <title> title goes here </title>
• Some tags are self closing, such as a meta tag<meta name=“” content=“” />
• Every open tag must correspondingly be closed
(source: http://www.w3schools.com/html/html_intro.asp)
What does it look like?
<!DOCTYPE html PUBLIC … ><html>
<head><title>Basic HTML Page</title><meta name=“” content=“” /></head><body><h1>Hello World!</h1></body>
</html>
Closer Look at DOCTYPE
<!DOCTYPE html PUBLIC … ><html>
<head><title>Basic HTML Page</title><meta name=“” content=“” /></head><body><h1>Hello World!</h1></body>
</html>
DOCTYPE?
<!DOCTYPE html PUBLIC … >• The doctype declaration is important • It tells the browser:
– what type of HTML you are using– which convention you’ll need to follow when coding the website
content• For more info see recommended list of doctypes:
http://www.w3.org/QA/2002/04/valid-dtd-list.html • Most common:
– xHTML 1.0 Transitional– xHTML 1.0 Strict
• Newest:– HTML5 (not a standard yet!)
Look at HTML tag
<!DOCTYPE html PUBLIC … ><html>
<head><title>Basic HTML Page</title><meta name=“” content=“” /></head><body><h1>Hello World!</h1></body>
</html>
HTML tag?
<html> </html>• Creates basic HTML document• <html>– The opening HTML tag– Sets the starting point of your HTML document
• </html>– The closing HTML tag– Sets the closing point of your HTML document
Take a look at HEAD tag
<!DOCTYPE html PUBLIC … ><html>
<head><title>Basic HTML Page</title><meta name=“” content=“” /></head><body><h1>Hello World!</h1></body>
</html>
HEAD tag?
<head> </head>• Contains header information for the page– This is not rendered in the page itself– Contains other tags like:• <title>, <meta>, <link>, etc.
• <head>– The opening head tag
• </head>– The closing head tag
Look inside the HEAD
<!DOCTYPE html PUBLIC … ><html>
<head><title>Basic HTML Page</title><meta name=“” content=“” /></head><body><h1>Hello World!</h1></body>
</html>
Inside the HEAD
• <title>Title of page</title>– rendered in top of browser or browser tab
• <meta name=“description” content=“” />• There are 3 basic types of meta tags used:– Content-type: tells browser which character set you’re
using. Most common: UTF-8– Description: sets description of website that appears
in search engine listings– Keywords: lists out keywords and phrases that relate
to your page, separated by commas.
Look that BODY tag
<!DOCTYPE html PUBLIC … ><html>
<head><title>Basic HTML Page</title><meta name=“” content=“” /></head><body><h1>Hello World!</h1></body>
</html>
What is the BODY tag?
<body> </body>• Contains all the contents of the web page– This is where all the content of your webpage goes
• <body>– The opening body tag
• </body>– The closing body tag
How do I style my HTML?
• HTML is not meant for style• HTML is just raw content and structure
(markup of the document)
• To style HTML, we use a stylesheet• The stylesheet dictates how we present our
content (HTML) to the user in the browser• Cascading Style Sheets are used to style HTML
What is CSS?
• Cascading Style Sheets– It’s a style language that defines the presentation of
your HTML (colors, layout, text-formatting, etc.)– Referred to as the presentation layer
• Recommended way to control presentation of your HTML document
• Own language with own syntax
How to include CSS?
• Inline– Written on actual HTML tags– Worst way to include CSS *avoid if possible, but there are some exceptions
• Embedded– Written between <style> tag typically in the <head>– Override any similar rules in external sheet– Styles stay with HTML page and don’t carry over to other pages
with your website• External
– Typically loaded in the <head> with a <link> tag– Best way to include CSS in document
Including CSS• Internal: Written inline on HTML tags
<body style=“background-color: #f00;”>
• Embedded: Written in a <style> tag <style type=“text/css” media=“screen”>
body { background-color: #f00;
}</style>
• External: Included as a separate document<link type=“text/css” href=“http://link/file.css” rel=“stylesheet” media=“screen” />
How CSS looks?
#element-id {color: #fff;font-size: 12px;
}
.element-class {color: #f00;font-weight: 700;
}
(selectors, properties and values)
What is JS?
• Programming (scripting) language that adds functionality to website
• Behavior layer (functionality)
• Common Libraries: jQuery, MooTools
Tools to Write
• Simple text editor works perfectly fine for writing HTML and CSS– Notepad, Notepad++, BBEdit, NetBeans, TextEdit,
TextWrangler, TextMate, Dreamweaver, Vim
Helpful Links
• http://www.w3.org/• http://www.w3.org/html/• http://www.w3.org/Style/CSS/
• http://www.w3schools.com/
• http://www.htmldog.com/guides/htmlbeginner/
Tools to Have
• Web Developer Toolbar for Firefox– Link:
https://addons.mozilla.org/en-us/firefox/addon/web-developer/
• Firebug for Firefox– Link:
https://addons.mozilla.org/en-US/firefox/addon/firebug/
Thank You!
Any Questions?
SlideShare: http://www.slideshare.net/katmilk/
katarina milkovat: twitter.com/katmilke: [email protected]
