Talking HTML

View Top 200 Chart

Back to Rankings Page

Latest Episodes:

PHP Includes – Talking HTML Feb 17, 2016

Show notes

PHP includes are a vital aspect of websites and should be incorporated into every Web Developer’s workflow.

Code via Chris Coyier and the CSS Tricks website

Main reason for using a PHP include:

All code for a specific function is under 1 roof.
1. If you need to make a change you change it in 1 spot instead of going to each and every individual page

When using and creating includes the files need to have the php extension on the file.

Index.html turns into index.php

Popular includes to create:

Footer.php
Header.php
Navigation.php

Other examples:

Meta data/ stylesheets/ head information
Social media
Separate website tracking code if you don’t/can’t include it in the footer.

General include statement:

<?php include(“header.php”); ?>

PHP include statement from root.

<?php
$path = $_SERVER[‘DOCUMENT_ROOT’];
$path .= “/common/header.php”;
include_once($path);
?>

DISCLAIMER: when using PHP includes you HAVE TO ensure ALL OF YOUR LINKS are sourced from the root.

All internal navigation
Direct links from 1 page to another that is not in the navigation
Image file locations

Generally speaking this is something to get into the habit of doing anyway, that way if you move something you don’t have to remember to fix the link. Also I do believe that this is a general web standard.

webdevpod.com

@tommnorman

@TNPWDesign

The post PHP Includes – Talking HTML appeared first on Schaffen Creative.

Eps 25: CSS Backgrounds – Talking HTML Feb 10, 2016

Show notes

http://www.w3schools.com/cssref/css3_pr_background.asp

Individual Properties

Background -image

Background -repeat

Background -position

Background -size

Shortcode

background : #cccccc url(“img_tree.gif”) no-repeat fixed top left;

Multiple Background Images

background -image: url(“img_tree.gif”), url(“img_flwr.gif”);

Properties

positioning: top, bottom, left, right, center repeat, repeat-x (horizontal), repeat-y (vertical), no-repeat,

horizontal% vertical% (top left is 0% 0%)

horizontalpos verticalpos – ex= (0px 0px), (0em, 0em)

background -image default is top-left corner of an element and repeated

You can set a background to inherit, though I don’t recommend it.

Gradients can be created – however it is not supported by all browsers. Use with caution. If you are interested in background gradients simply search css background gradients to find some tutorials

@TNPWdesign

@tommnorman

Dreamhost.com – promo code: TNPW

The post Eps 25: CSS Backgrounds – Talking HTML appeared first on Schaffen Creative.

Eps 24: Building A Table – Talking HTML Feb 03, 2016

Show notes

Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out

W3 Schools

The headers attribute specifies one or more header cells a table cell is related to and has no visual effect in ordinary web browsers, but can be used by screen readers.

Please go to iTunes and Stitcher and rate the show! Ratings get listeners!!

http://www.Webdevpod.com for all the content and links

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw

HTML Code

<div id=”table”>
<table>
<tr class=”odd”>
<th id=”project”>Project Type</th>
<th id=”price”>Price</th>
<th id=”description”>General Requirements</th>
</tr>
<tr>
<td headers=”project”>Websites</td>
<td headers=”price”>$750+</td>
<td headers=”description”>Personal, Business (non e-commerce) or Informational.</td>
</tr>
<tr class=”odd”>
<td headers=”project”>E-Commerce</td>
<td headers=”price”>$2,500+</td>
<td headers=”description”>Websites in which selling merchandise is the main function.</td>
</tr>
<tr>
<td headers=”project”>Hourly Rate</td>
<td headers=”price”>$30/hour</td>
<td headers=”description”>Reserved for projects under 10 hours of work and website maintenance.</td>
</tr>
<tr class=”odd”>
<td headers=”project”>Charity and Non-profit</td>
<td headers=”price”>Negotiable</td>
<td headers=”description”>Reserved for organizations that deal with charities and non-profit organization.</td>
</tr>
<tr>
<td headers=”project”>Podcast Setup</td>
<td headers=”price”>$20/hour (minimum 1 hr)</td>
<td headers=”description”>The setup and demonstration of the programs and options available in beginning and maintaining a FREE! audio and/or video podcast.</td>
</tr>
</table>
</div>

CSS Code

div#table {
width: 600px;
font-size: 10px;
margin: 5px auto 5px auto;
}
table {
width: 400px;
border: 3px solid #000;
margin: auto;
padding: 10px;
border-spacing: 0;
text-align: center;
}
td, th {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
tr.odd {
background: #333;
color: #FFF;
}
table tr th {
font-size: 1.6em;
font-weight: bold;
background: #999;
}
table tr td { font-size: 1.3em;
}

The post Eps 24: Building A Table – Talking HTML appeared first on Schaffen Creative.

A basic web development tutorial on styling a primary navigation using HTML and CSS. – Talking HTML Jan 26, 2016

Show notes

Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out

This is a basic web development tutorial on styling a primary navigation using HTML and CSS.

As always, the code will be in the show notes.

Please go to iTunes, Stitcher or Google Play Music and rate the show! Ratings get listeners!!

http://www.Webdevpod.com for all the content and links

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw

/* HTML */

<ul>

</ul>

</nav>

/* Navigation */

#nav {
padding-top: 205px;
margin-left: 105px;
}
#nav ul li{
color: white;
background: #113e63;
display: block;
width: 150px;
position: relative;
list-style-type: none;
float: left;
padding: 0px;
margin: 0 3px 0 0;
height: 40px;
border: 0px solid #ffbf00;
/*border-bottom: 3px solid #ffbf00;*/
border-top: 5px solid #fff;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
#nav ul li a {
display: block;
text-decoration: none;
color: white;
font-size: 1.6em;
line-height: 40px;
text-align: center;
}
#nav ul li:hover,
#nav ul li:focus,
#nav ul li#current {
background: #c1c4c4;
line-height: 40px;
border-top: 5px solid #7c765b;
}
#nav ul li a:hover,
#nav ul li a:focus,
#nav ul li#current a {
color: #000;
}

The post A basic web development tutorial on styling a primary navigation using HTML and CSS. – Talking HTML appeared first on Schaffen Creative.

Eps 22: An Aside – Talking HTML Jan 19, 2016

Show notes

Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out

section of the page with content related to the page
separate from that content.
Used as a sidebar or an inserted box/space
advertisements
bio/blurb/profile information
related links on a site
Does NOT have to be on the side of the site/page
Be creative, use a circle or other shape
Place it in the middle of the page, wrap wording around the container.
Whatever you decide to do with it, make sure it sticks out as separate content
- Different background color, use a border of some sort

As always, ease of use is most important over all

Please go to iTunes and Stitcher and rate the show! Ratings get listeners!!

http://www.Webdevpod.com for all the content and links

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw

The post Eps 22: An Aside – Talking HTML appeared first on Schaffen Creative.

Eps 21: Resolutions – Talking HTML Jan 11, 2016

Show notes

Have a combination of long term and short term goals.

Break goals into bite sized chunks. If you want to learn a language make weekly checkpoints.

For long term goals have monthly or bimonthly checkpoints.

Know who you are and be realistic about your goals.

Before you begin down your path it may be helpful to map out your plans. Create a calendar on your phone/computer and use notifications to keep you on track. Join social groups or local meet ups to enhance your experience. If you share your experience with friends, family or even strangers that may go a long way in having accountability to someone more than yourself. Nobody likes disappointing other people.

Give me a rating on iTunes, Stitcher or any other place you get your podcasts.

Leave me comments!

Webdevpod.com for all content and shows

@tnpwdesign

@tommnorman

The post Eps 21: Resolutions – Talking HTML appeared first on Schaffen Creative.

Eps 20: Google Fonts – Talking HTML Dec 16, 2015

Show notes

All about Google Fonts

<!– BEGIN GOOGLE FONTS –>
<link href=’http://fonts.googleapis.com/css?family=Kite+One|Merienda+One|Sintony’ rel=’stylesheet’ type=’text/css’>
<!– END GOOGLE FONTS–>

Ensure readability and accessibility before choosing a final font for your website!

If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!

If you leave a good comment it could end up on the front page of the site!

http://www.Webdevpod.com for all the content and links

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw

The post Eps 20: Google Fonts – Talking HTML appeared first on Schaffen Creative.

Eps 19: Head Code – Talking HTML Dec 08, 2015

Show notes

Info about meta tags

http://www.w3schools.com/tags/tag_meta.asp

Info about HTML 5 Shiv

https://en.wikipedia.org/wiki/HTML5_Shiv

If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!

If you leave a good comment it could end up on the front page of the site!

http://www.Webdevpod.com for all the content and links

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>TNPW Design</title>
<meta charset=”utf-8″>
<meta name=”description” content=”TNPW Design is a Freelance Website Design And Website Development Business in Green Bay, WI 54301. Podcast Creation Services Available.” />
<meta name=”keywords” content=”HTML,CSS,Web Development,Web Design”>

<!– BEGIN JQUERY LIBRARY –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script>
<!– END JQUERY LIBRARY –>

<!– BEGIN GOOGLE FONTS –>
<link href=’http://fonts.googleapis.com/css?family=Kite+One|Merienda+One|Sintony’ rel=’stylesheet’ type=’text/css’>
<!– END GOOGLE FONTS –>

<!– FANCY BOX JAVASCRIPT BEGIN –>
<script type=”text/javascript” src=”js/jquery.fancybox.pack.js”></script>
<script type=”text/javascript” src=”js/jquery.fancybox.load.js”></script>
<!– END FANCY BOX JS –>

<!– Only use when building media rules –>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<!– End: meta – viewport –>
<!–[if lt IE 9]–>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<!–[endif]–>

</head>
</html>

The post Eps 19: Head Code – Talking HTML appeared first on Schaffen Creative.

Eps 18: Coding A Footer – Talking HTML Dec 02, 2015

Show notes

Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out.

If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!

If you leave a good comment it could end up on the front page of the site!

http://www.Webdevpod.com for all the content and links

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw
<footer>
<div class=”footer-box-1″>
</div>
<div class=”footer-box-2″>
</div>
<div class=”footer-box-3″>
</div>

<style>

#center {
width: 960px;
}

footer {
clear: both;
background: #7c765b;
color: #FFF;
height: auto;
padding: 10px;
}

.footer-box-1 {
width: 31%;
background: red;
color: black;
float: left;
padding: 5px 4px 5px 4px;
margin: 5px;
height: auto;
font-size: 1.2em;
}

.footer-box-2 {
width: 32%;
background: red;
color: black;
float: left;
padding: 5px 4px 5px 4px;
margin: 5px;
height: auto;
font-size: 1.2em;
}

.footer-box-3 {
width: 31%;
background: red;
color: black;
float: right;
padding: 5px 4px 5px 4px;
margin: 5px;
height: auto;
font-size: 1.2em;
}
footer p#copyright {
float: none;
clear: both;
margin: 15px 10px 0px 0px;
font-size: 1.3em;
text-align: right;
line-height: 2em;
}

</style>

The post Eps 18: Coding A Footer – Talking HTML appeared first on Schaffen Creative.

Eps 17: Optimizing WordPress – Talking HTML Nov 24, 2015

Show notes

WordPress Optimization

Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out

Child Themify WordPress Plugin

allows for easy coding without actually changing the original theme
starts with only the css file but you can add any file that you want.

robots.txt

the code for this file is in the show notes
makes your site more accessible to search engine crawling/indexing
if you use google dev tools you can see what your website looks like when it’s crawled by the google wizards. 1 of my sites looked completely broken. The images weren’t showing up and the content was a bit misplaced. When I added the robots.txt file and looked at it again the site looked as it should. Images were there and it looked like a complete website.

P3 Profiler WordPress plugin by GoDaddy, the hosting company

several different breakdowns of page load speed and how fast your plugins are loading

Optimize your images

Stay away from pngs if you can help it
use JPG, smaller file size by default. Can be optimized in Photoshop to become smaller

Ask yourself if social media share buttons are necessary or if you can get away with linking directly to the source

If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!

If you leave a good comment it could end up on the front page of the site!

http://www.Webdevpod.com for all the content and links

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw

User-Agent: *
Allow: /wp-content/uploads/
Allow: /wp-content/plugins/
Disallow: /readme.html
Sitemap: http://www.talking1265.com/post-sitemap.xml
Sitemap: http://www.talking1265.com/page-sitemap.xml

The post Eps 17: Optimizing WordPress – Talking HTML appeared first on Schaffen Creative.