• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Wcphx 2012-workshop
 

Wcphx 2012-workshop

on

  • 937 views

 

Statistics

Views

Total Views
937
Views on SlideShare
936
Embed Views
1

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Setting up a local development enviroment, you need:\nA web server (apache)\nThe PHP interpreter\nA Text Editor that can edit plain text documents, not Word.\nAnd a web browser of your choice. I recommend Chrome, or Firefox.\nYou won’t be needing a database in this class, however it’s important to have when working with PHP applications like WordPress.\n
  • \n
  • \n
  • \n
  • Setting up a local development enviroment, you need:\nA web server (apache)\nThe PHP interpreter\nA Text Editor that can edit plain text documents, not Word.\nAnd a web browser of your choice. I recommend Chrome, or Firefox.\nYou won’t be needing a database in this class, however it’s important to have when working with PHP applications like WordPress.\n
  • Setting up a local development enviroment, you need:\nA web server (apache)\nThe PHP interpreter\nA Text Editor that can edit plain text documents, not Word.\nAnd a web browser of your choice. I recommend Chrome, or Firefox.\nYou won’t be needing a database in this class, however it’s important to have when working with PHP applications like WordPress.\n
  • Setting up a local development enviroment, you need:\nA web server (apache)\nThe PHP interpreter\nA Text Editor that can edit plain text documents, not Word.\nAnd a web browser of your choice. I recommend Chrome, or Firefox.\nYou won’t be needing a database in this class, however it’s important to have when working with PHP applications like WordPress.\n
  • \n
  • The language of the web.\nThe markup langauge for all web pages on the internet.\nEasy to learn.\n
  • HTML stands for Hyper Text Markup Language\nHTML is not a programming language, it is a markup language\nA markup language is a set of markup tags\nHTML uses markup tags to describe web pages\nAdds meaning to content for browsers and search engines to parse and understand.\n
  • HTML elements reserved HTML keywords used for the markup langauge\nHTML tags are a combination of elements and open and closing tags.\nHTML tags normally come in pairs like and \nStart and end tags are also called opening tags and closing tags\n\n
  • Here’s an example of a self-closing HTML tag.\n\n
  • HTML elements can have attributes\nAttributes provide additional information about an element\nAttributes are always specified in the start tag\nAttributes come in name/value pairs like: name="value"\nAttributes can also have blank values\n\n
  • HTML elements can have attributes\nAttributes provide additional information about an element\nAttributes are always specified in the start tag\nAttributes come in name/value pairs like: name="value"\nAttributes can also have blank values\n
  • HTML elements can have attributes\nAttributes provide additional information about an element\nAttributes are always specified in the start tag\nAttributes come in name/value pairs like: name="value"\nAttributes can also have blank values\n
  • HTML contains comments, which are not interpreted by the browser.\nComments can span multiple lines\n
  • HTML contains comments, which are not interpreted by the browser.\nComments can span multiple lines\n
  • This is a basic HTML document.\nThis is all you need to create an HTML document\n
  • The HTML tag represents the root of an HTML document.\nTells the browser that everything inside those tags are to be interpreted as HTML.\n
  • The HEAD element contains meta data—information that describes the document itself.\nIt’s also where you can include resources, such as style sheets and javascript.\n\n
  • The TITLE element represents the document's title or name.\nIn this case, the title of this page is called “Sample HTML Document”.\nThis is the text that shows up in search engine results pages.\n
  • The body element represents the main content of the document.\nEverything that you can see in the browser window is contained inside this element.\n
  • The p element represents a paragraph.\nA paragraph is typically a run of phrasing content that forms a block of text with one or more sentences.\nMost readable content on a page is contained within paragraph tags.\n
  • A DOCTYPE is a required preamble.\nThere are two types of rendering modes for HTML documents. Quirks mode and Standards Mode.\nQuirks mode renders HTML documents accounting for legacy browsers and bugs. 9 out of 10 times, you don’t want this.\nStandards mode tries to render an HTML document using the latest web standards specifications.\nWhen omitted, browsers will often render the document in quirks mode, which you don’t want.\n
  • The W3C is an international community that develops open standards for the web.\nBoth, w3c and WHATWG are made up of members from Apple, Google, Microsoft, and Opera, amongst others.\nTogether, they develop specifications like HTML and CSS (amongst others) so that we as authors of the web can create one HTML document that works across any device/browser.\nHTML has a busy history, ranging from abandoning the standard HTML spec itself, trying to move towards a more stricter language akin to XML. Given that moving towards a more stricter HTML dubbed XHTML, which would break millions of web pages already created in standard HTML, folks from Apple, Mozilla and Opera decided to do something about it and create a group that would advance the standard HTML specification with modern improvements and APIs, all while preserving backwards compatiblity.\nThis group is called The Web Hypertext Application Technology Working Group, also known as WHATWG.\nThey pushed HTML5 which the w3c later adopted and went along with.\nAll this means is that HTML is keeping up with the pace of what we demand from the web, which is increasingly becoming faster, better, and stronger! Examples: Instant load times, complex interfaces, online gaming.\n
  • \n
  • Create this document and save it as “hello-world.html”\nVisit the page in a browser. (localhost/hello-world.html)\n\n
  • \n
  • \n
  • These are the tags used when structuring your layouts.\n\nA section is a thematic grouping of content, typically with a heading.\n\nThe article element represents a self-contained piece of content that can in principle, be distributable or reusable, e.g. feeds.\n\nExamples: forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.\n\n\n\n
  • \n
  • CSS stands for Cascading Style Sheets\nStyles define how to display HTML elements\nStyles were added to HTML to solve a problem\nWhereas HTML defines the structure of a document, CSS defines the look & feel of a document.\nCSS is not a programming language. Don’t be sacred\n
  • A CSS rule has two main parts: a selector, and one or more declarations:\n
  • A CSS rule has two main parts: a selector, and one or more declarations:\n
  • A CSS rule has two main parts: a selector, and one or more declarations:\n
  • A CSS rule has two main parts: a selector, and one or more declarations:\n
  • Declarations consists of a property and a value.\nA CSS declaration always ends with a semicolon\nand declaration groups are surrounded by curly brackets\n
  • A CSS comment begins with "/*", and ends with "*/"\n
  • A CSS comment begins with "/*", and ends with "*/"\n
  • CSS stands for Cascading Style Sheets\nStyles define how to display HTML elements\nStyles were added to HTML to solve a problem\nExternal Style Sheets can save a lot of work\nExternal Style Sheets are stored in CSS files\n\n
  • Global Selectors based on HTML elements\n
  • \n
  • Attribute selectors based on class attributes applied on HTML elements\n
  • \n
  • Attribute selectors based on id attribute applied on HTML elements\n
  • A selector can be\n
  • You can group selectors by commas\n
  • \n
  • \n
  • CSS stands for Cascading Style Sheets\nStyles define how to display HTML elements\nStyles were added to HTML to solve a problem\nExternal Style Sheets can save a lot of work\nExternal Style Sheets are stored in CSS files\n\n
  • Global Selectors based on HTML elements\n
  • Global Selectors based on HTML elements\n
  • Global Selectors based on HTML elements\n
  • Global Selectors based on HTML elements\n
  • Global Selectors based on HTML elements\n
  • \n
  • CSS stands for Cascading Style Sheets\nStyles define how to display HTML elements\nStyles were added to HTML to solve a problem\nExternal Style Sheets can save a lot of work\nExternal Style Sheets are stored in CSS files\n\n
  • CSS stands for Cascading Style Sheets\nStyles define how to display HTML elements\nStyles were added to HTML to solve a problem\nExternal Style Sheets can save a lot of work\nExternal Style Sheets are stored in CSS files\n\n
  • ID = 100\nClass = 10\nElements = 1\nTotal is the sum\n\n
  • \n
  • CSS stands for Cascading Style Sheets\nStyles define how to display HTML elements\nStyles were added to HTML to solve a problem\nExternal Style Sheets can save a lot of work\nExternal Style Sheets are stored in CSS files\n\n
  • \n
  • Three ways to embedd CSS into HTML documents.\n
  • Three ways to embedd CSS into HTML documents.”\n
  • Three ways to embedd CSS into HTML documents.”\n
  • \n
  • Three ways to embedd CSS into HTML documents.\n
  • \n
  • Three ways to embedd CSS into HTML documents.\n
  • Three ways to embedd CSS into HTML documents.\n
  • \n
  • These are the tags used when structuring your layouts.\n\nA section is a thematic grouping of content, typically with a heading.\n\nThe article element represents a self-contained piece of content that can in principle, be distributable or reusable, e.g. feeds.\n\nExamples: forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.\n\n\n\n
  • \n
  • \n

Wcphx 2012-workshop Wcphx 2012-workshop Presentation Transcript