SlideShare a Scribd company logo
1 of 69
Download to read offline
Building the basics 
An introduction to HTML, CSS, and WordPress.
Building the basics 
What we’re going to cover in 30 minutes or less. 
- the who, what, where, when, and 
why of the web; 
- where this all came from; 
- and how to use it;
The history of the web 
(super condensed and non boring)
The history of the web 
What is the web? 
- http:// is the hypertext transfer 
protocol; 
- https:// is the secure hypertext 
transfer protocol;
The history of the web 
What is the web? 
- the HTTP transfers text files from a 
server, to a web browser; 
- the text files may be formatted in the 
HyperText Markup Languages
The basics of HTML 
What is HTML and how do we use it? 
- HTML has ~10 basic tags 
- document structure; 
- paragraphs, lists, and formatting; 
- images, and linking
The basics of HTML 
structural tags 
Document structure tags 
<html> 
<head></head> 
<body></body> 
</html>
The basics of HTML 
paragraph tags 
The Paragraph Tag 
<p>Hello, I’m a paragraph.</p> 
opening content closing
Hello, I’m a paragraph.
The basics of HTML 
heading tags 
Heading Tags 
<h1>This is a heading</h1> 
opening content closing 
(also <h2> .. <h5>)
This is a heading 
Hello, I’m a paragraph.
This is a heading 
Hello, I’m a paragraph. 
This is an h2 heading. 
And here is another paragraph full of 
amazing things that we’re going to 
love.
The basics of HTML 
lists 
Lists 
<li>This is a list item.</li> 
opening content closing 
<ul> 
opening 
</ul> 
closing 
(also <ol>)
This is a heading 
Hello, I’m a paragraph. 
This is an h2 heading. 
And here is another paragraph full of 
amazing things that we’re going to 
love. 
• This is a list item.
This is a heading 
Hello, I’m a paragraph. 
This is an h2 heading. 
And here is another paragraph full of 
amazing things that we’re going to 
love. 
1. This is a list item.
The basics of HTML 
formatting tags 
Formatting Tags 
<b>This text is bold.</b> 
opening content closing 
<i>This text is italic.</i> 
opening content closing
The basics of HTML 
formatting tags 
Formatting Tags 
<strong>This text is strong.</strong> 
opening content closing 
<em>This text has emphasis.</em> 
opening content closing 
(also <tt>, <cite>, <font>, <blockquote>)
The basics of HTML 
Formatting tags 
Using Formatting tags in a <p> 
<strong>This text is strong.</strong> 
opening content closing 
<p> 
</p>
This is a heading 
Hello, I’m a paragraph. 
This is an h2 heading. 
And here is another paragraph full of 
amazing things that we’re going to 
love. 
1. This is a list item.
The basics of HTML 
The line break 
Using line breaks in a <p> 
<br> 
opening 
<p> 
</p> 
(also <hr>)
This is a heading 
Hello, I’m a paragraph. 
This is an h2 heading. 
And here is another paragraph. Full 
of amazing things 
that we’re going to love. 
1. This is a list item.
The basics of HTML 
the anchor tag 
The Anchor Tag 
<a href=“index.html”>text link</a> 
attribute value 
opening content closing
The basics of HTML 
Adding a link tag 
Using link tags into a list 
<li> </li> 
<a href=“index.html”>text link</a> 
attribute value 
opening content closing
This is a heading 
Hello, I’m a paragraph. 
This is an h2 heading. 
And here is another paragraph. 
Full of amazing things that we’re going 
to love. 
1. This is a list item.
The basics of HTML 
The image tag. 
The Image Tag 
<img src=“image.jpg”> 
opening 
attribute value 
x 
(no closing)
This is a heading 
Hello, I’m a paragraph. 
This is an h2 heading. 
And here is another paragraph. 
Full of amazing things that we’re going to 
love. 
1. This is a list item.
Tim Berners-Lee 
Web Developer.
The basics of HTML 
Combining a tag 
Combing two tags to link an image 
<p> </p> 
<a href=“index.html”><img 
src=“image.jpg></a> 
attribute value 
opening 
attribute value 
opening closing
New(ish) HMTL tags 
Some additions to the standards 
- <div> is used to divide block content 
on a page; 
- <span> is used to divide inline 
content; 
<span>content</span> 
<div> 
</div>
New HMTL5 tags 
Some additions to the standards 
- <header>, <footer>, <nav>, <aside>, 
<article> all replace <div> tags; 
- <figure> (sort of) replaces <img> tag
The attributes of a tag 
anchor tags 
The Anchor Tag 
<a href=“index.html”>text link</a> 
attribute value content closing 
opening
The attributes of a tag 
paragraph tags 
The Paragraph Tag 
<p class=“first_paragraph 
example_class” 
attribute value 
id=“opening” 
attribute value 
>my paragraph text</p>
The basics of CSS 
What is CSS and how do we use it?
The attributes of a tag 
paragraph tags 
The Paragraph Tag 
<p class=“first_paragraph 
example_class” 
attribute value 
id=“opening” 
attribute value 
>my paragraph text</p>
The attributes of a tag 
paragraph tags 
The Paragraph Tag 
<p class=“first_paragraph 
example_class” 
id=“opening” 
class 
id 
class 
>my paragraph text</p>
Using the attributes in 
CSS paragraph tags 
The Paragraph Tag 
<p class=“first_paragraph example_class” 
id=“opening”> 
class class id 
.first_paragraph {} 
.example_class {} 
#opening {}
Using the attributes in 
CSS paragraph tags 
<div id=“first_div”> 
<p class=“first_paragraph 
example_class”>…</p> 
<p>…</p> 
<p class=“example_class”>…</p> 
<ul><li class=“example_class”>…</li></p> 
</div> 
<div id=“second_div”> 
<p class=“first_paragraph 
example_class”>…</p> 
<p class=“example_class”>…</p> 
</div>
<div id=“opening_div”> 
<p class=“first_paragraph example_class”>…</<p>…</p> 
<p class=“example_class”>…</p> 
<ul><li class=“second_list_item”>…</li></p> 
</div> 
<div id=“second_div”> 
<p class=“first_paragraph example_class”>…</<p class=“example_class”>…</p> 
</div>
#opening_div { color: #000; } 
<div id=“opening_div”> 
<ul><li class=“second_list_item”>…</li></<p class=“first_paragraph example_class”>…</<p>…</p> 
<p class=“example_class”>…</p> 
</div> 
<div id=“second_div”> 
<p class=“first_paragraph example_class”>…</<p class=“example_class”>…</p> 
</div>
#second_div { color: #000; } 
<div id=“opening_div”> 
<p class=“first_paragraph example_class”>…</<p>…</p> 
<p class=“example_class”>…</p> 
<ul><li class=“second_list_item”>…</li></p> 
</div> 
<div id=“second_div”> 
<p class=“first_paragraph example_class”>…</<p class=“example_class”>…</p> 
</div>
.first_paragraph{ color: #000; } 
<div id=“opening_div”> 
<p class=“first_paragraph example_class”>…</<p>…</p> 
<p class=“example_class”>…</p> 
<ul><li class=“second_list_item”>…</li></p> 
</div> 
<div id=“second_div”> 
<p class=“first_paragraph example_class”>…</<p class=“example_class”>…</p> 
</div>
.second_list_item{ color: #000; } 
<div id=“opening_div”> 
<p>…</p> 
<p class=“example_class”>…</p> 
<ul><li class=“second_list_item”>…</li></<p class=“first_paragraph example_class”>…</</div> 
<div id=“second_div”> 
<p class=“first_paragraph example_class”>…</<p class=“example_class”>…</p> 
</div>
.example_class{ color: #000; } 
<div id=“opening_div”> 
<p class=“first_paragraph example_class”>…</<p>…</p> 
<p class=“example_class”>…</p> 
<ul><li class=“second_list_item”>…</li></p> 
</div> 
<div id=“second_div”> 
<p class=“first_paragraph example_class”>…</<p class=“example_class”>…</p> 
</div>
#second_div .example_class{ color: #000; } 
<div id=“opening_div”> 
<p class=“first_paragraph example_class”>…</<p>…</p> 
<p class=“example_class”>…</p> 
<ul><li class=“second_list_item”>…</li></p> 
</div> 
<div id=“second_div”> 
<p class=“first_paragraph example_class”>…</<p class=“example_class”>…</p> 
</div>
Using the attributes in 
CSS cascading styles in html 
<div id=“second_div”> 
<p class=“first_paragraph 
example_class”>…</p> 
<p class=“example_class”>…</p> 
</div>
Using the attributes in 
CSS cascading styles in html 
<div id=“second_div”> 
<p class=“first_paragraph 
example_class”>…</p> 
<p class=“example_class”>…</p> 
</div> 
#second_div p 
#second_div p
Using the attributes in 
CSS cascading styles in html 
<div id=“second_div”> 
<p class=“first_paragraph 
example_class”>…</p> 
<p class=“example_class”>…</p> 
</div> 
.example_class 
.first_paragraph 
.example_class
Using the attributes in 
CSS cascading styles in html 
<div id=“second_div”> 
<p class=“first_paragraph 
example_class”>…</p> 
<p class=“example_class”>…</p> 
</div> 
div p 
div#second_div p 
div#second_div 
p.first_paragraph 
div#second_div 
p.example_class 
p.example_class 
p.first_paragraph 
p
The basics of 
JavaScript One slide, that’s all.
JavaScript & jQuery 
ReusiSng wehlaet wce atloreardsy know. 
console.log( jQuery(“.first_paragraph”).text( 
); 
selector
The basics of 
WordPress What does this all really mean for WordPress?
<div id=“header”> or <header> 
header.php 
<div id=“main”> 
index.php 
- archive.php 
- - category.php 
- - author.php 
single.php 
- single-[id].php 
- single-[slug].php 
page.php 
404.php 
search.php 
<div id=“footer”> or <footer> 
footer.php
Using the template 
how to overhridiee WroradPrrecssh payge templates 
- WordPress will always search for 
templates with -ID or -slug first; 
- for example page-about.php or 
archive-sales.php; 
- WordPress waterfalls while 
searching for page templates;
About PHP 
Basic PHP usage 
<title><?php echo ‘hello’; ?></title> 
open php php command close php
Getting data from 
WSomoe bradsicP cormemasndss 
<title><?php bloginfo( ‘title’ ); ?></title> 
open php close php 
bloginfo fetches and displays 
information stored in the 
WordPress options table by 
name. 
What do you want to fetch from 
the database?
Getting data from 
WSomoe bradsicP cormemasndss 
<?php $title = get_bloginfo( ‘title’ ); ?> 
open php 
get_bloginfo() fetches details 
but doesn’t display it. It’s ideal 
for reading data into a variable. 
What do you want to fetch from 
the database?
Basic WordPress 
Some basicC WoordmPresms coammnadndss for the Loop 
the_title(); the post title 
the_excerpt(); the excerpt 
the_author(); the author 
the_id(); the post id 
the_content(); the post content
Basic WordPress 
Some mCoreo bamsic WmordaPrnesds csommands 
get_posts( $args ); get a group of posts 
get_post( $id ); get a specific post 
get_the_title( $id ); get a post title 
wp_mail( $args ); send an email 
wp_insert_posts( $args 
create a new post 
); 
human_time_diff() converts dates
Basic WordPress 
CHoookimng inmto WaorndPdresss 
function my_content( $content ) { 
$content = “Hello World!”; 
return $content; 
} 
add_filter( ‘the_content’, ‘my_content’ );
Basic WordPress 
CWoordmPresms shaorntcoddess 
function my_shortcode( $content = null ) { 
return ‘Christopher Ross’; 
} 
add_shortcode( ‘my_name’, ‘my_shortcode’ );
Putting it all together 
Using HTML, CSS, and WordPress together.
Putting it all together 
Using HTML, CSS, and WordPress together. 
- All WordPress pages include 
extensive CSS and HTML to all on.
<?php 
$menu_class = ( is_rtl() ) ? ' navbar-right' : ''; 
wp_nav_menu( array( 'theme_location' => 'primary', 'container' => ?>
<ul id="menu-top-menu" class="nav navbar-nav”> 
<li id="menu-item-34574" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item 
current_page_item menu-item-home active menu-item-34574"><a href="http://thisismyurl.com/">Home</a></li> 
<li id="menu-item-34353" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-34353"><a 
href="http://thisismyurl.com/downloads/">Plugins</a></li> 
<li id="menu-item-34572" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item- 
34572"><a href="http://thisismyurl.com/news/">News</a></li> 
<li id="menu-item-34573" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item- 
34573"><a href="http://thisismyurl.com/tutorials/">Tutorials</a></li> 
<li id="menu-item-34177" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34177"><a 
href="http://thisismyurl.com/about/">About</a></li> 
<li id="menu-item-34578" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34578"><a 
href="http://thisismyurl.com/about/contact/">Contact</a></li> 
<li id="menu-item-34653" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-34653"><a 
href="http:/
<?php 
$menu_class = ( is_rtl() ) ? ' navbar-right' : ''; 
wp_nav_menu( array( 'theme_location' => 'primary', 
'container' => '', 'menu_class' => 'nav navbar-nav' . 
$menu_class, 'fallback_cb' => 'default_menu', 'depth' 
=> 2 ) ); 
?> 
<ul id="menu-top-menu" class="nav navbar-nav”> 
<li id="menu-item-34574" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active 
menu-item-34574"><a href="http://thisismyurl.com/">Home</a></li> 
<li id="menu-item-34353" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-34353"><a 
href="http://thisismyurl.com/downloads/">Plugins</a></li> 
<li id="menu-item-34572" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-34572"><a 
href="http://thisismyurl.com/news/">News</a></li> 
<li id="menu-item-34573" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-34573"><a 
href="http://thisismyurl.com/tutorials/">Tutorials</a></li> 
<li id="menu-item-34177" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34177"><a 
href="http://thisismyurl.com/about/">About</a></li> 
<li id="menu-item-34578" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34578"><a 
href="http://thisismyurl.com/about/contact/">Contact</a></li> 
<li id="menu-item-34653" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-34653"><a href="http:/ 
+

More Related Content

What's hot

Introduction to Wordpress
Introduction to WordpressIntroduction to Wordpress
Introduction to WordpressReuben Rock
 
Introduction to WordPress
Introduction to WordPressIntroduction to WordPress
Introduction to WordPressEunus Hosen
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themesDaisyOlsen
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Joe Querin
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themesDaisyOlsen
 
WordPress best practices by billrice
WordPress best practices by billriceWordPress best practices by billrice
WordPress best practices by billriceRiceDesign
 
5 Things You Shouldn't Do With A WordPress Plugin
5 Things You Shouldn't Do With A WordPress Plugin5 Things You Shouldn't Do With A WordPress Plugin
5 Things You Shouldn't Do With A WordPress PluginKelly Phillips
 
WordPress Theme Structure
WordPress Theme StructureWordPress Theme Structure
WordPress Theme Structurekeithdevon
 
Choosing Themes
Choosing ThemesChoosing Themes
Choosing ThemesDaisyOlsen
 
Child Themes in WordPress
Child Themes in WordPressChild Themes in WordPress
Child Themes in WordPressJeff Cohan
 
Custom Menu Support for WordPress Themes
Custom Menu Support for WordPress ThemesCustom Menu Support for WordPress Themes
Custom Menu Support for WordPress ThemesDaisyOlsen
 
Introduction To WordPress
Introduction To WordPressIntroduction To WordPress
Introduction To WordPressCraig Bailey
 
Wordpress theme submission requirement for Themeforest
Wordpress theme submission requirement for ThemeforestWordpress theme submission requirement for Themeforest
Wordpress theme submission requirement for ThemeforestEnayet Rajib
 
WCLV - Introduction to child themes
WCLV - Introduction to child themesWCLV - Introduction to child themes
WCLV - Introduction to child themesvegasgeek
 
Getting started with WordPress development
Getting started with WordPress developmentGetting started with WordPress development
Getting started with WordPress developmentSteve Mortiboy
 
How to create a WordPress Site
How to create a WordPress Site How to create a WordPress Site
How to create a WordPress Site MuhammadUsaid2
 

What's hot (20)

Introduction to Wordpress
Introduction to WordpressIntroduction to Wordpress
Introduction to Wordpress
 
Introduction to WordPress
Introduction to WordPressIntroduction to WordPress
Introduction to WordPress
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015
 
Beginning WordPress
Beginning WordPressBeginning WordPress
Beginning WordPress
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
 
WordPress best practices by billrice
WordPress best practices by billriceWordPress best practices by billrice
WordPress best practices by billrice
 
What is (not) WordPress
What is (not) WordPressWhat is (not) WordPress
What is (not) WordPress
 
5 Things You Shouldn't Do With A WordPress Plugin
5 Things You Shouldn't Do With A WordPress Plugin5 Things You Shouldn't Do With A WordPress Plugin
5 Things You Shouldn't Do With A WordPress Plugin
 
WordPress Theme Structure
WordPress Theme StructureWordPress Theme Structure
WordPress Theme Structure
 
Choosing Themes
Choosing ThemesChoosing Themes
Choosing Themes
 
Child Themes in WordPress
Child Themes in WordPressChild Themes in WordPress
Child Themes in WordPress
 
WordPress Basics
WordPress BasicsWordPress Basics
WordPress Basics
 
Custom Menu Support for WordPress Themes
Custom Menu Support for WordPress ThemesCustom Menu Support for WordPress Themes
Custom Menu Support for WordPress Themes
 
Introduction To WordPress
Introduction To WordPressIntroduction To WordPress
Introduction To WordPress
 
Wordpress theme submission requirement for Themeforest
Wordpress theme submission requirement for ThemeforestWordpress theme submission requirement for Themeforest
Wordpress theme submission requirement for Themeforest
 
WCLV - Introduction to child themes
WCLV - Introduction to child themesWCLV - Introduction to child themes
WCLV - Introduction to child themes
 
Getting started with WordPress development
Getting started with WordPress developmentGetting started with WordPress development
Getting started with WordPress development
 
Wordpress plugin
Wordpress pluginWordpress plugin
Wordpress plugin
 
How to create a WordPress Site
How to create a WordPress Site How to create a WordPress Site
How to create a WordPress Site
 

Similar to Building the basics (WordPress Ottawa 2014)

WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010Brendan Sera-Shriar
 
02 HTML-01.pdf
02 HTML-01.pdf02 HTML-01.pdf
02 HTML-01.pdfEshaYasir1
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS PresentationShawn Calvert
 
Html, css and jquery introduction
Html, css and jquery introductionHtml, css and jquery introduction
Html, css and jquery introductioncncwebworld
 
HTML Foundations, part 1
HTML Foundations, part 1HTML Foundations, part 1
HTML Foundations, part 1Shawn Calvert
 
Caracteristicas Basicas De Htlm
Caracteristicas Basicas De HtlmCaracteristicas Basicas De Htlm
Caracteristicas Basicas De HtlmMaria S Rivera
 
HTML (Basic to Advance)
HTML (Basic to Advance)HTML (Basic to Advance)
HTML (Basic to Advance)Coder Tech
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1Heather Rock
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developersHernan Mammana
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02Aditya Varma
 
Web technologies: Lesson 2
Web technologies: Lesson 2Web technologies: Lesson 2
Web technologies: Lesson 2nhepner
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...LinnAlexandra
 
Industrial training report
Industrial training report Industrial training report
Industrial training report Akash Kr Sinha
 

Similar to Building the basics (WordPress Ottawa 2014) (20)

Html intro
Html introHtml intro
Html intro
 
WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010
 
02 HTML-01.pdf
02 HTML-01.pdf02 HTML-01.pdf
02 HTML-01.pdf
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Html, css and jquery introduction
Html, css and jquery introductionHtml, css and jquery introduction
Html, css and jquery introduction
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
HTML Foundations, part 1
HTML Foundations, part 1HTML Foundations, part 1
HTML Foundations, part 1
 
Caracteristicas Basicas De Htlm
Caracteristicas Basicas De HtlmCaracteristicas Basicas De Htlm
Caracteristicas Basicas De Htlm
 
HTML (Basic to Advance)
HTML (Basic to Advance)HTML (Basic to Advance)
HTML (Basic to Advance)
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
 
Web technologies part-2
Web technologies part-2Web technologies part-2
Web technologies part-2
 
Artdm171 Week4 Tags
Artdm171 Week4 TagsArtdm171 Week4 Tags
Artdm171 Week4 Tags
 
Advance HTML
Advance HTMLAdvance HTML
Advance HTML
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02
 
Week 2-intro-html
Week 2-intro-htmlWeek 2-intro-html
Week 2-intro-html
 
Web technologies: Lesson 2
Web technologies: Lesson 2Web technologies: Lesson 2
Web technologies: Lesson 2
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
 
Industrial training report
Industrial training report Industrial training report
Industrial training report
 

Recently uploaded

Summary ID-IGF 2016 National Dialogue - English (tata kelola internet / int...
Summary  ID-IGF 2016 National Dialogue  - English (tata kelola internet / int...Summary  ID-IGF 2016 National Dialogue  - English (tata kelola internet / int...
Summary ID-IGF 2016 National Dialogue - English (tata kelola internet / int...ICT Watch - Indonesia
 
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...vmzoxnx5
 
IPv6 Operational Issues (with DNS), presented by Geoff Huston at IETF 119
IPv6 Operational Issues (with DNS), presented by Geoff Huston at IETF 119IPv6 Operational Issues (with DNS), presented by Geoff Huston at IETF 119
IPv6 Operational Issues (with DNS), presented by Geoff Huston at IETF 119APNIC
 
Basic Security.pptx is a awsome PPT on your mobiel
Basic Security.pptx is a awsome PPT on your mobielBasic Security.pptx is a awsome PPT on your mobiel
Basic Security.pptx is a awsome PPT on your mobielpratamakiki860
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119APNIC
 
Making an RFC in Today's IETF, presented by Geoff Huston at IETF 119
Making an RFC in Today's IETF, presented by Geoff Huston at IETF 119Making an RFC in Today's IETF, presented by Geoff Huston at IETF 119
Making an RFC in Today's IETF, presented by Geoff Huston at IETF 119APNIC
 
draft-harrison-sidrops-manifest-number-01, presented at IETF 119
draft-harrison-sidrops-manifest-number-01, presented at IETF 119draft-harrison-sidrops-manifest-number-01, presented at IETF 119
draft-harrison-sidrops-manifest-number-01, presented at IETF 119APNIC
 
Is DNS ready for IPv6, presented by Geoff Huston at IETF 119
Is DNS ready for IPv6, presented by Geoff Huston at IETF 119Is DNS ready for IPv6, presented by Geoff Huston at IETF 119
Is DNS ready for IPv6, presented by Geoff Huston at IETF 119APNIC
 
Power of Social Media for E-commerce.pdf
Power of Social Media for E-commerce.pdfPower of Social Media for E-commerce.pdf
Power of Social Media for E-commerce.pdfrajats19920
 
Summary IGF 2013 Bali - English (tata kelola internet / internet governance)
Summary  IGF 2013 Bali - English (tata kelola internet / internet governance)Summary  IGF 2013 Bali - English (tata kelola internet / internet governance)
Summary IGF 2013 Bali - English (tata kelola internet / internet governance)ICT Watch - Indonesia
 
Tari Eason Warriors Come Out To Play T Shirts
Tari Eason Warriors Come Out To Play T ShirtsTari Eason Warriors Come Out To Play T Shirts
Tari Eason Warriors Come Out To Play T Shirtsrahman018755
 

Recently uploaded (11)

Summary ID-IGF 2016 National Dialogue - English (tata kelola internet / int...
Summary  ID-IGF 2016 National Dialogue  - English (tata kelola internet / int...Summary  ID-IGF 2016 National Dialogue  - English (tata kelola internet / int...
Summary ID-IGF 2016 National Dialogue - English (tata kelola internet / int...
 
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
 
IPv6 Operational Issues (with DNS), presented by Geoff Huston at IETF 119
IPv6 Operational Issues (with DNS), presented by Geoff Huston at IETF 119IPv6 Operational Issues (with DNS), presented by Geoff Huston at IETF 119
IPv6 Operational Issues (with DNS), presented by Geoff Huston at IETF 119
 
Basic Security.pptx is a awsome PPT on your mobiel
Basic Security.pptx is a awsome PPT on your mobielBasic Security.pptx is a awsome PPT on your mobiel
Basic Security.pptx is a awsome PPT on your mobiel
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119
 
Making an RFC in Today's IETF, presented by Geoff Huston at IETF 119
Making an RFC in Today's IETF, presented by Geoff Huston at IETF 119Making an RFC in Today's IETF, presented by Geoff Huston at IETF 119
Making an RFC in Today's IETF, presented by Geoff Huston at IETF 119
 
draft-harrison-sidrops-manifest-number-01, presented at IETF 119
draft-harrison-sidrops-manifest-number-01, presented at IETF 119draft-harrison-sidrops-manifest-number-01, presented at IETF 119
draft-harrison-sidrops-manifest-number-01, presented at IETF 119
 
Is DNS ready for IPv6, presented by Geoff Huston at IETF 119
Is DNS ready for IPv6, presented by Geoff Huston at IETF 119Is DNS ready for IPv6, presented by Geoff Huston at IETF 119
Is DNS ready for IPv6, presented by Geoff Huston at IETF 119
 
Power of Social Media for E-commerce.pdf
Power of Social Media for E-commerce.pdfPower of Social Media for E-commerce.pdf
Power of Social Media for E-commerce.pdf
 
Summary IGF 2013 Bali - English (tata kelola internet / internet governance)
Summary  IGF 2013 Bali - English (tata kelola internet / internet governance)Summary  IGF 2013 Bali - English (tata kelola internet / internet governance)
Summary IGF 2013 Bali - English (tata kelola internet / internet governance)
 
Tari Eason Warriors Come Out To Play T Shirts
Tari Eason Warriors Come Out To Play T ShirtsTari Eason Warriors Come Out To Play T Shirts
Tari Eason Warriors Come Out To Play T Shirts
 

Building the basics (WordPress Ottawa 2014)

  • 1. Building the basics An introduction to HTML, CSS, and WordPress.
  • 2. Building the basics What we’re going to cover in 30 minutes or less. - the who, what, where, when, and why of the web; - where this all came from; - and how to use it;
  • 3. The history of the web (super condensed and non boring)
  • 4. The history of the web What is the web? - http:// is the hypertext transfer protocol; - https:// is the secure hypertext transfer protocol;
  • 5. The history of the web What is the web? - the HTTP transfers text files from a server, to a web browser; - the text files may be formatted in the HyperText Markup Languages
  • 6. The basics of HTML What is HTML and how do we use it? - HTML has ~10 basic tags - document structure; - paragraphs, lists, and formatting; - images, and linking
  • 7. The basics of HTML structural tags Document structure tags <html> <head></head> <body></body> </html>
  • 8. The basics of HTML paragraph tags The Paragraph Tag <p>Hello, I’m a paragraph.</p> opening content closing
  • 9. Hello, I’m a paragraph.
  • 10. The basics of HTML heading tags Heading Tags <h1>This is a heading</h1> opening content closing (also <h2> .. <h5>)
  • 11. This is a heading Hello, I’m a paragraph.
  • 12. This is a heading Hello, I’m a paragraph. This is an h2 heading. And here is another paragraph full of amazing things that we’re going to love.
  • 13. The basics of HTML lists Lists <li>This is a list item.</li> opening content closing <ul> opening </ul> closing (also <ol>)
  • 14. This is a heading Hello, I’m a paragraph. This is an h2 heading. And here is another paragraph full of amazing things that we’re going to love. • This is a list item.
  • 15. This is a heading Hello, I’m a paragraph. This is an h2 heading. And here is another paragraph full of amazing things that we’re going to love. 1. This is a list item.
  • 16. The basics of HTML formatting tags Formatting Tags <b>This text is bold.</b> opening content closing <i>This text is italic.</i> opening content closing
  • 17. The basics of HTML formatting tags Formatting Tags <strong>This text is strong.</strong> opening content closing <em>This text has emphasis.</em> opening content closing (also <tt>, <cite>, <font>, <blockquote>)
  • 18. The basics of HTML Formatting tags Using Formatting tags in a <p> <strong>This text is strong.</strong> opening content closing <p> </p>
  • 19. This is a heading Hello, I’m a paragraph. This is an h2 heading. And here is another paragraph full of amazing things that we’re going to love. 1. This is a list item.
  • 20. The basics of HTML The line break Using line breaks in a <p> <br> opening <p> </p> (also <hr>)
  • 21. This is a heading Hello, I’m a paragraph. This is an h2 heading. And here is another paragraph. Full of amazing things that we’re going to love. 1. This is a list item.
  • 22. The basics of HTML the anchor tag The Anchor Tag <a href=“index.html”>text link</a> attribute value opening content closing
  • 23. The basics of HTML Adding a link tag Using link tags into a list <li> </li> <a href=“index.html”>text link</a> attribute value opening content closing
  • 24. This is a heading Hello, I’m a paragraph. This is an h2 heading. And here is another paragraph. Full of amazing things that we’re going to love. 1. This is a list item.
  • 25. The basics of HTML The image tag. The Image Tag <img src=“image.jpg”> opening attribute value x (no closing)
  • 26. This is a heading Hello, I’m a paragraph. This is an h2 heading. And here is another paragraph. Full of amazing things that we’re going to love. 1. This is a list item.
  • 27. Tim Berners-Lee Web Developer.
  • 28. The basics of HTML Combining a tag Combing two tags to link an image <p> </p> <a href=“index.html”><img src=“image.jpg></a> attribute value opening attribute value opening closing
  • 29. New(ish) HMTL tags Some additions to the standards - <div> is used to divide block content on a page; - <span> is used to divide inline content; <span>content</span> <div> </div>
  • 30. New HMTL5 tags Some additions to the standards - <header>, <footer>, <nav>, <aside>, <article> all replace <div> tags; - <figure> (sort of) replaces <img> tag
  • 31. The attributes of a tag anchor tags The Anchor Tag <a href=“index.html”>text link</a> attribute value content closing opening
  • 32. The attributes of a tag paragraph tags The Paragraph Tag <p class=“first_paragraph example_class” attribute value id=“opening” attribute value >my paragraph text</p>
  • 33. The basics of CSS What is CSS and how do we use it?
  • 34. The attributes of a tag paragraph tags The Paragraph Tag <p class=“first_paragraph example_class” attribute value id=“opening” attribute value >my paragraph text</p>
  • 35. The attributes of a tag paragraph tags The Paragraph Tag <p class=“first_paragraph example_class” id=“opening” class id class >my paragraph text</p>
  • 36. Using the attributes in CSS paragraph tags The Paragraph Tag <p class=“first_paragraph example_class” id=“opening”> class class id .first_paragraph {} .example_class {} #opening {}
  • 37. Using the attributes in CSS paragraph tags <div id=“first_div”> <p class=“first_paragraph example_class”>…</p> <p>…</p> <p class=“example_class”>…</p> <ul><li class=“example_class”>…</li></p> </div> <div id=“second_div”> <p class=“first_paragraph example_class”>…</p> <p class=“example_class”>…</p> </div>
  • 38. <div id=“opening_div”> <p class=“first_paragraph example_class”>…</<p>…</p> <p class=“example_class”>…</p> <ul><li class=“second_list_item”>…</li></p> </div> <div id=“second_div”> <p class=“first_paragraph example_class”>…</<p class=“example_class”>…</p> </div>
  • 39. #opening_div { color: #000; } <div id=“opening_div”> <ul><li class=“second_list_item”>…</li></<p class=“first_paragraph example_class”>…</<p>…</p> <p class=“example_class”>…</p> </div> <div id=“second_div”> <p class=“first_paragraph example_class”>…</<p class=“example_class”>…</p> </div>
  • 40. #second_div { color: #000; } <div id=“opening_div”> <p class=“first_paragraph example_class”>…</<p>…</p> <p class=“example_class”>…</p> <ul><li class=“second_list_item”>…</li></p> </div> <div id=“second_div”> <p class=“first_paragraph example_class”>…</<p class=“example_class”>…</p> </div>
  • 41. .first_paragraph{ color: #000; } <div id=“opening_div”> <p class=“first_paragraph example_class”>…</<p>…</p> <p class=“example_class”>…</p> <ul><li class=“second_list_item”>…</li></p> </div> <div id=“second_div”> <p class=“first_paragraph example_class”>…</<p class=“example_class”>…</p> </div>
  • 42. .second_list_item{ color: #000; } <div id=“opening_div”> <p>…</p> <p class=“example_class”>…</p> <ul><li class=“second_list_item”>…</li></<p class=“first_paragraph example_class”>…</</div> <div id=“second_div”> <p class=“first_paragraph example_class”>…</<p class=“example_class”>…</p> </div>
  • 43. .example_class{ color: #000; } <div id=“opening_div”> <p class=“first_paragraph example_class”>…</<p>…</p> <p class=“example_class”>…</p> <ul><li class=“second_list_item”>…</li></p> </div> <div id=“second_div”> <p class=“first_paragraph example_class”>…</<p class=“example_class”>…</p> </div>
  • 44. #second_div .example_class{ color: #000; } <div id=“opening_div”> <p class=“first_paragraph example_class”>…</<p>…</p> <p class=“example_class”>…</p> <ul><li class=“second_list_item”>…</li></p> </div> <div id=“second_div”> <p class=“first_paragraph example_class”>…</<p class=“example_class”>…</p> </div>
  • 45. Using the attributes in CSS cascading styles in html <div id=“second_div”> <p class=“first_paragraph example_class”>…</p> <p class=“example_class”>…</p> </div>
  • 46. Using the attributes in CSS cascading styles in html <div id=“second_div”> <p class=“first_paragraph example_class”>…</p> <p class=“example_class”>…</p> </div> #second_div p #second_div p
  • 47. Using the attributes in CSS cascading styles in html <div id=“second_div”> <p class=“first_paragraph example_class”>…</p> <p class=“example_class”>…</p> </div> .example_class .first_paragraph .example_class
  • 48. Using the attributes in CSS cascading styles in html <div id=“second_div”> <p class=“first_paragraph example_class”>…</p> <p class=“example_class”>…</p> </div> div p div#second_div p div#second_div p.first_paragraph div#second_div p.example_class p.example_class p.first_paragraph p
  • 49. The basics of JavaScript One slide, that’s all.
  • 50. JavaScript & jQuery ReusiSng wehlaet wce atloreardsy know. console.log( jQuery(“.first_paragraph”).text( ); selector
  • 51. The basics of WordPress What does this all really mean for WordPress?
  • 52.
  • 53. <div id=“header”> or <header> header.php <div id=“main”> index.php - archive.php - - category.php - - author.php single.php - single-[id].php - single-[slug].php page.php 404.php search.php <div id=“footer”> or <footer> footer.php
  • 54. Using the template how to overhridiee WroradPrrecssh payge templates - WordPress will always search for templates with -ID or -slug first; - for example page-about.php or archive-sales.php; - WordPress waterfalls while searching for page templates;
  • 55. About PHP Basic PHP usage <title><?php echo ‘hello’; ?></title> open php php command close php
  • 56. Getting data from WSomoe bradsicP cormemasndss <title><?php bloginfo( ‘title’ ); ?></title> open php close php bloginfo fetches and displays information stored in the WordPress options table by name. What do you want to fetch from the database?
  • 57. Getting data from WSomoe bradsicP cormemasndss <?php $title = get_bloginfo( ‘title’ ); ?> open php get_bloginfo() fetches details but doesn’t display it. It’s ideal for reading data into a variable. What do you want to fetch from the database?
  • 58. Basic WordPress Some basicC WoordmPresms coammnadndss for the Loop the_title(); the post title the_excerpt(); the excerpt the_author(); the author the_id(); the post id the_content(); the post content
  • 59. Basic WordPress Some mCoreo bamsic WmordaPrnesds csommands get_posts( $args ); get a group of posts get_post( $id ); get a specific post get_the_title( $id ); get a post title wp_mail( $args ); send an email wp_insert_posts( $args create a new post ); human_time_diff() converts dates
  • 60. Basic WordPress CHoookimng inmto WaorndPdresss function my_content( $content ) { $content = “Hello World!”; return $content; } add_filter( ‘the_content’, ‘my_content’ );
  • 61. Basic WordPress CWoordmPresms shaorntcoddess function my_shortcode( $content = null ) { return ‘Christopher Ross’; } add_shortcode( ‘my_name’, ‘my_shortcode’ );
  • 62. Putting it all together Using HTML, CSS, and WordPress together.
  • 63. Putting it all together Using HTML, CSS, and WordPress together. - All WordPress pages include extensive CSS and HTML to all on.
  • 64.
  • 65.
  • 66. <?php $menu_class = ( is_rtl() ) ? ' navbar-right' : ''; wp_nav_menu( array( 'theme_location' => 'primary', 'container' => ?>
  • 67. <ul id="menu-top-menu" class="nav navbar-nav”> <li id="menu-item-34574" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-34574"><a href="http://thisismyurl.com/">Home</a></li> <li id="menu-item-34353" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-34353"><a href="http://thisismyurl.com/downloads/">Plugins</a></li> <li id="menu-item-34572" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item- 34572"><a href="http://thisismyurl.com/news/">News</a></li> <li id="menu-item-34573" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item- 34573"><a href="http://thisismyurl.com/tutorials/">Tutorials</a></li> <li id="menu-item-34177" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34177"><a href="http://thisismyurl.com/about/">About</a></li> <li id="menu-item-34578" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34578"><a href="http://thisismyurl.com/about/contact/">Contact</a></li> <li id="menu-item-34653" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-34653"><a href="http:/
  • 68.
  • 69. <?php $menu_class = ( is_rtl() ) ? ' navbar-right' : ''; wp_nav_menu( array( 'theme_location' => 'primary', 'container' => '', 'menu_class' => 'nav navbar-nav' . $menu_class, 'fallback_cb' => 'default_menu', 'depth' => 2 ) ); ?> <ul id="menu-top-menu" class="nav navbar-nav”> <li id="menu-item-34574" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-34574"><a href="http://thisismyurl.com/">Home</a></li> <li id="menu-item-34353" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-34353"><a href="http://thisismyurl.com/downloads/">Plugins</a></li> <li id="menu-item-34572" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-34572"><a href="http://thisismyurl.com/news/">News</a></li> <li id="menu-item-34573" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-34573"><a href="http://thisismyurl.com/tutorials/">Tutorials</a></li> <li id="menu-item-34177" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34177"><a href="http://thisismyurl.com/about/">About</a></li> <li id="menu-item-34578" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34578"><a href="http://thisismyurl.com/about/contact/">Contact</a></li> <li id="menu-item-34653" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-34653"><a href="http:/ +