9. Setting up a local development enviroment
You need:
✓ A Web Server (Apache) w/ PHP
✓ Text Editor (for plain text docs)
✓ Web Browser(s) (Latest Firefox, Chrome, Safari, Opera,
IE)
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
10. Setting up a local development enviroment
For Windows:
✓ WAMP (http://wampserver.com)
✓ Notepad++ (http://notepad-plus-
plus.org)
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
11. Setting up a local development enviroment
For Mac:
✓ MAMP (http://mamp.info)
✓ Text Wrangler
(http://barebones.com/products/textwrangler/)
✓ TextMate
(http://macromates.com/)
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
13. Verify that everything works
http://
localhost/
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
14. Setting up your web directory
✓ Navigate to web directory.
✓ Create a new folder called
“workshop”.
✓ Within “workshop”, create a
subfolder called “css”.
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
15. Setting up your web directory
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
67. CSS - Cascading Style Sheets
Specificity
How browsers deal with
conflicting rules
ID 100
Class 10
Element 1
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
68. CSS - Cascading Style Sheets
Specificity
Selector ID classes elements Total
body 0 0 1 1
#footer 1 0 0 100
.intro 0 1 0 10
div p 0 0 2 2
#content p 1 0 1 101
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
70. ?
How do we add CSS
to HTML documents?
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
71. Different Ways to embed CSS into HTML
Inline Styles
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
72. Different Ways to embed CSS into HTML
Inline Styles
<p style="">This is blue.</p>
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
73. Different Ways to embed CSS into HTML
Inline Styles
<p style="color: blue;">This is blue.</
p>
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
74. Different Ways to embed CSS into HTML
Embedded Styles
<style></style>
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
75. Different Ways to embed CSS into HTML
Embedded Styles
<!DOCTYPE html>
<html>
<head>
<title>Sample HTML Document</title>
<style>
p { color: blue; }
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
76. Different Ways to embed CSS into HTML
External Stylesheet files
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
77. Different Ways to embed CSS into HTML
External Stylesheet Files
p {
color: blue;
font-size: 12px;
}
Save file as css/style.css
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
78. Different Ways to embed CSS into HTML
External Stylesheet Files
<!DOCTYPE html>
<html>
<head>
<title>Sample HTML Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<p>Hello World</p>
</body>
</html>
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
79. Basics
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
81. Questions?
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
82. Thank you.
Intro to Hacking — Tweet! @ptahdunbar #wpworkshop
Notas do Editor
\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&#x2019;t be needing a database in this class, however it&#x2019;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&#x2019;t be needing a database in this class, however it&#x2019;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&#x2019;t be needing a database in this class, however it&#x2019;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&#x2019;t be needing a database in this class, however it&#x2019;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 <b> and </b>\nStart and end tags are also called opening tags and closing tags\n\n
Here&#x2019;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&#x2014;information that describes the document itself.\nIt&#x2019;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 &#x201C;Sample HTML Document&#x201D;.\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&#x2019;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&#x2019;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 &#x201C;hello-world.html&#x201D;\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&#x2019;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.&#x201D;\n
Three ways to embedd CSS into HTML documents.&#x201D;\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