web1o1 - intro to html/css
DESCRIPTION
Intro to HTML/CSS for those looking to get into the web or just to have more knowledge of the web.TRANSCRIPT
![Page 2: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/2.jpg)
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
![Page 3: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/3.jpg)
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)
![Page 4: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/4.jpg)
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
![Page 5: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/5.jpg)
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
![Page 6: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/6.jpg)
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)
![Page 7: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/7.jpg)
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
![Page 8: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/8.jpg)
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)
![Page 9: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/9.jpg)
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>
![Page 10: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/10.jpg)
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>
![Page 11: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/11.jpg)
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!)
![Page 12: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/12.jpg)
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>
![Page 13: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/13.jpg)
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
![Page 14: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/14.jpg)
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>
![Page 15: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/15.jpg)
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
![Page 16: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/16.jpg)
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>
![Page 17: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/17.jpg)
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.
![Page 18: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/18.jpg)
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>
![Page 19: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/19.jpg)
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
![Page 20: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/20.jpg)
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
![Page 21: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/21.jpg)
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
![Page 22: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/22.jpg)
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
![Page 23: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/23.jpg)
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” />
![Page 24: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/24.jpg)
How CSS looks?
#element-id {color: #fff;font-size: 12px;
}
.element-class {color: #f00;font-weight: 700;
}
(selectors, properties and values)
![Page 25: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/25.jpg)
What is JS?
• Programming (scripting) language that adds functionality to website
• Behavior layer (functionality)
• Common Libraries: jQuery, MooTools
![Page 26: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/26.jpg)
Tools to Write
• Simple text editor works perfectly fine for writing HTML and CSS– Notepad, Notepad++, BBEdit, NetBeans, TextEdit,
TextWrangler, TextMate, Dreamweaver, Vim
![Page 27: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/27.jpg)
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/
![Page 28: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/28.jpg)
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/
![Page 29: Web1O1 - Intro to HTML/CSS](https://reader033.vdocuments.us/reader033/viewer/2022061212/5495c8d9ac7959342e8b4f58/html5/thumbnails/29.jpg)
Thank You!
Any Questions?
SlideShare: http://www.slideshare.net/katmilk/
katarina milkovat: twitter.com/katmilke: [email protected]