SlideShare a Scribd company logo

Web1O1 - Intro to HTML/CSS

•Download as PPTX, PDF•
•
NYCSS Meetup
NYCSS Meetup

This document provides an introduction to HTML, CSS, and the basic structure of a web page. It explains that HTML is the content layer and defines the structure and semantics of a web page using tags. CSS is the presentation layer and controls the styling and layout of HTML content. The main parts of an HTML document are the <DOCTYPE>, <html>, <head>, and <body> tags. The <head> contains meta information while the <body> holds visible page content. CSS can be included inline, embedded, or through an external stylesheet to style HTML elements. JavaScript adds interactivity and functionality to web pages.

Related slideshows

Html for beginners
Html for beginnersHtml for beginners
Html for beginners
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
 
1 of 29
MeetupWeb 1O1 – Intro to HTML/CSSkatarinamilkovat: twitter.com/katmilke: katarina.milkova@gmail.com
What is the Web?It’s magic!Network of a collection of interlinked hypertext documents accessed via internetConsists of web servers, IP (internet protocol), DNS (domain name service) and pixie dust
WebConsists of many languages HTML, CSS, JS, PHP, etc.Every language has it’s own syntax and semanticsSyntax: the study of grammar (how you say something)Semantics: the study of meaning (meaning behind what you say)
Web LayersHTML = Content LayerThis is the structure and raw content of the pageCSS = Presentation LayerThis layer add styles to the structure and content of your webpageJS = Behavior LayerThis layer dictates how an item behaves when clicked on, hovered over, or sometimes further styled to achieve a certain look/behaviorIt dictates how things act and react to user interaction
What is HTML?HyperTextMarkup LanguageIt is a simple data language that consists of tags used to display content of a webpageIt defines the structure and semantics of your web documentIt is referred to as the content layer in the web cake analogyMost commonly used today is the more structured way of writing HTML: xHTML Extensible HyperTextMarkup Language
What is HTML?It is NOT a programming languageIt is a markup languageA markup language is a set of markup tagsUses markup tags to describe web pages(source: http://www.w3schools.com/html/html_intro.asp)
How does it work?Very simple and logical formatMuch like a word documentRead from top to bottom, left to right.Written with text in a plain text editorConsists 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 HTMLIt’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 usingwhich convention you’ll need to follow when coding the website contentFor more info see recommended list of doctypes: http://www.w3.org/QA/2002/04/valid-dtd-list.htmlMost common:xHTML 1.0 TransitionalxHTML 1.0 StrictNewest:HTML5 (not a standard yet!)
Lookat 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 tagSets the starting point of your HTML document</html>The closing HTML tagSets 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 pageThis is not rendered in the page itselfContains 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-8Description: sets description of website that appears in search engine listingsKeywords: 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 pageThis 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 styleHTML is just raw content and structure (markup of the document)To style HTML, we use a stylesheetThe stylesheet dictates how we present our content (HTML) to the user in the browserCascading Style Sheets are used to style HTML
What is CSS?Cascading Style SheetsIt’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 documentOwn language with own syntax
How to include CSS?InlineWritten on actual HTML tagsWorst way to include CSS *avoid if possible, but there are some exceptionsEmbeddedWritten between <style> tag typically in the <head>Override any similar rules in external sheetStyles stay with HTML page and don’t carry over to other pages with your websiteExternalTypically loaded in the <head> with a <link> tagBest way to include CSS in document
Including CSSInternal: 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 websiteBehavior layer (functionality)Common Libraries: jQuery, MooTools
Tools to WriteSimple text editor works perfectly fine for writing HTML and CSSNotepad, Notepad++, BBEdit, NetBeans, TextEdit, TextWrangler, TextMate, Dreamweaver, Vim
Helpful Linkshttp://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 HaveWeb Developer Toolbar for FirefoxLink: https://addons.mozilla.org/en-us/firefox/addon/web-developer/Firebug for FirefoxLink: https://addons.mozilla.org/en-US/firefox/addon/firebug/
Thank You!Any Questions?SlideShare: http://www.slideshare.net/katmilk/katarinamilkovat: twitter.com/katmilke: katarina.milkova@gmail.com

More Related Content

Web1O1 - Intro to HTML/CSS

  • 1. MeetupWeb 1O1 – Intro to HTML/CSSkatarinamilkovat: twitter.com/katmilke: katarina.milkova@gmail.com
  • 2. What is the Web?It’s magic!Network of a collection of interlinked hypertext documents accessed via internetConsists of web servers, IP (internet protocol), DNS (domain name service) and pixie dust
  • 3. WebConsists of many languages HTML, CSS, JS, PHP, etc.Every language has it’s own syntax and semanticsSyntax: the study of grammar (how you say something)Semantics: the study of meaning (meaning behind what you say)
  • 4. Web LayersHTML = Content LayerThis is the structure and raw content of the pageCSS = Presentation LayerThis layer add styles to the structure and content of your webpageJS = Behavior LayerThis layer dictates how an item behaves when clicked on, hovered over, or sometimes further styled to achieve a certain look/behaviorIt dictates how things act and react to user interaction
  • 5. What is HTML?HyperTextMarkup LanguageIt is a simple data language that consists of tags used to display content of a webpageIt defines the structure and semantics of your web documentIt is referred to as the content layer in the web cake analogyMost commonly used today is the more structured way of writing HTML: xHTML Extensible HyperTextMarkup Language
  • 6. What is HTML?It is NOT a programming languageIt is a markup languageA markup language is a set of markup tagsUses markup tags to describe web pages(source: http://www.w3schools.com/html/html_intro.asp)
  • 7. How does it work?Very simple and logical formatMuch like a word documentRead from top to bottom, left to right.Written with text in a plain text editorConsists 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
  • 8. What is a tag?A tag is the basis for HTMLIt’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)
  • 9. 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>
  • 10. 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>
  • 11. DOCTYPE?<!DOCTYPE html PUBLIC … >The doctype declaration is important It tells the browser:what type of HTML you are usingwhich convention you’ll need to follow when coding the website contentFor more info see recommended list of doctypes: http://www.w3.org/QA/2002/04/valid-dtd-list.htmlMost common:xHTML 1.0 TransitionalxHTML 1.0 StrictNewest:HTML5 (not a standard yet!)
  • 12. Lookat HTML tag<!DOCTYPE html PUBLIC … ><html> <head> <title>Basic HTML Page</title> <meta name=“” content=“” /> </head> <body> <h1>Hello World!</h1> </body></html>
  • 13. HTML tag?<html> </html>Creates basic HTML document<html>The opening HTML tagSets the starting point of your HTML document</html>The closing HTML tagSets the closing point of your HTML document
  • 14. 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>
  • 15. HEAD tag?<head> </head>Contains header information for the pageThis is not rendered in the page itselfContains other tags like:<title>, <meta>, <link>, etc.<head>The opening head tag</head>The closing head tag
  • 16. 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>
  • 17. 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-8Description: sets description of website that appears in search engine listingsKeywords: lists out keywords and phrases that relate to your page, separated by commas.
  • 18. 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>
  • 19. What is the BODY tag?<body> </body>Contains all the contents of the web pageThis is where all the content of your webpage goes<body>The opening body tag</body>The closing body tag
  • 20. How do I style my HTML?HTML is not meant for styleHTML is just raw content and structure (markup of the document)To style HTML, we use a stylesheetThe stylesheet dictates how we present our content (HTML) to the user in the browserCascading Style Sheets are used to style HTML
  • 21. What is CSS?Cascading Style SheetsIt’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 documentOwn language with own syntax
  • 22. How to include CSS?InlineWritten on actual HTML tagsWorst way to include CSS *avoid if possible, but there are some exceptionsEmbeddedWritten between <style> tag typically in the <head>Override any similar rules in external sheetStyles stay with HTML page and don’t carry over to other pages with your websiteExternalTypically loaded in the <head> with a <link> tagBest way to include CSS in document
  • 23. Including CSSInternal: 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” />
  • 24. How CSS looks?#element-id {color: #fff;font-size: 12px;}.element-class {color: #f00;font-weight: 700;} (selectors, properties and values)
  • 25. What is JS?Programming (scripting) language that adds functionality to websiteBehavior layer (functionality)Common Libraries: jQuery, MooTools
  • 26. Tools to WriteSimple text editor works perfectly fine for writing HTML and CSSNotepad, Notepad++, BBEdit, NetBeans, TextEdit, TextWrangler, TextMate, Dreamweaver, Vim
  • 28. Tools to HaveWeb Developer Toolbar for FirefoxLink: https://addons.mozilla.org/en-us/firefox/addon/web-developer/Firebug for FirefoxLink: https://addons.mozilla.org/en-US/firefox/addon/firebug/
  • 29. Thank You!Any Questions?SlideShare: http://www.slideshare.net/katmilk/katarinamilkovat: twitter.com/katmilke: katarina.milkova@gmail.com