HTML Basics

Hyper Text Markup Langauage  is a great place to start for beginning programmers. It's easy and its fun! Brand new in version 2.0 is CSS and Javascript Guides! (Basic at that)

About HTML and Terms Test your code! Chat about your code!

The Basics

More Customizing

Linking CSS and JS Some basic CSS Some basic Javascript HTML Tag Reference

Pro Features

HTML Basics

Go Home

HTML is the language that drives the web! It can be used with JavaScript and CSS to help build powerful websites and mobile apps!

Below are some common HTML terms you should learn! Credit goes to http://www.comptechdoc.org This is where they are from. 

  • Angle brackets - The characters, < and >, set HTML tags off from the rest of the text on an HTML page. These two symbols enclose all HTML tags.
  • Attributes - Defined words used in an HTML tag to modify the tag properties. They can be used to add or change color or change a size in some element.
  • BODY - The main part of an HTML document.
  • Element - An HTML designator that defines special objects such as paragraphs, lists, and lines in HTML. It usually consists of a beginning and ending tag, but may have just a beginning tag.
  • FTP - File Transfer Protocol. A method used to send or receive files between two computers on the network or internet.
  • Graphics drawing program - A program used to draw graphics images that may be used on a web page. Normally these images are stored as gif files, but several formats may be used.
  • Header - The beginning part of an HTML document which defines various characteristics such as the title.
  • Home page - The main page of an organization or company which is the first page seen when the organization's URL is visited.
  • HTML - Hyper-Text Markup Language is the basic language web pages are written in.
  • HTML editor - An editor that makes web page creation easier than using a normal text editor. Although you can write HTML code using a standard text editor, it is strongly recommended that you use some type of HTML editor even for learning. There are two categories of text editor.
    1. WYSIWYG (What you see is what you get) or graphical HTML editors which allow the user to see the page as the web browser would see it as they edit the page. You will not see the HTML elements or tag sets using this type of editor, so for learning HTML it is not recommended.
    2. A text based HTML editor lets the user see and edit HTML code directly. Usually the HTML tags are displayed in a different color than the surrounding text which makes them easier to see and work with. This web page was written using the Arachnophilia v3.9 HTML editor.
  • HTTP - Hypertext transfer protocol is the internet protocol used to transport information between the client browser and the web page server.
  • Hyperlinks or links - HTML coded locations of other material on the web. They are usually underlined and consist of a different text color than the surrounding text. When you click on them they will usually cause your browser to load the page it is pointing to and you will see the new page displayed.
  • Tags - Tags are used to surround text which has special meaning in HTML. Tags tell the browser what to do. The tag set <P> </P> is used to tell the browser that text between the two tags is to be set apart as a separate paragraph in HTML.
  • URI - Uniform Resource Identifier which is used as an identifier for a resource. The URI may include a complete path to the resource or may only be relative without a complete path.
  • URL - Uniform Resource Locator. It is used to specify file locations of html or other files. The URL "http://ctdp.tripod.com" is the URL for the CTDP home page. The first section "http:" designates the type of transfer which in this case is Hyper-text transfer protocol. Other cases include FTP, GOPHER, and FILE.
  • Web browser - Software used to retrieve and display web pages on the web. It is considered to be a client program which makes requests to web servers for web page files. Browsers can all read basic HTML but may be different in other areas such as being able to display or run script code, video and graphics.
  • Web server - The computer the web pages are stored on. The web server will transmit the web pages across the network/internet to the client computer which is running a web browser.


Go Home
Code Edit

HTML Basics

Go Home

Tags are what make up every HTML document. They are very important and there are quite a few of them. Below are some basic examples. Ater the first images is an example of a full HTML document using the tags! Check out the images then I will explain them. 

So as you can see from our example code I used pretty much all the basic tags. *You can zoom in if you would like! We opened the document with <html> and <head> tags. We then have text that is centered and in bold.

We then included a line. Since it is not included in a list <li> is a line. 

Once the <body> tag is opened this is where we have the majority of our content. We made a new paragraph and then added some text. We then have two more lines of text. We then linked an image. We start with <img src="filename"> Make sure to include the exact file name. We then have a link. First we have the website to link to. Then after that is the text. You have to use that structure!

We then see two list items. The <ol> and the <ul>. Insides those lists we add <li> like you can see. We then close the </body> and </head> tags. This is what it looks like:

The code you see is just an image screenshot. 

Now this doesn't look very pleasing. We can spice it up with some CSS and Javascript. If you would like more tags check out that section.

Go Home
Code Edit

HTML Basics

Go Home

HTML script is all about tags. For example every HTML document starts with the <html> tag. A tag is text strating with < and ending with >. You must also close every tag. To close a tag add a forward slash. For example: </html>

You can see from the above example code we have added two new tags to the document. The first is the <head> tag. After that is the <body> tag. We also closed both tags as well as the <html> tag. In the head of the document is where you can link other librares and meta content. (Explained more later) The body is where the majority of our HTML content resides. 

You can use any text editor to write HTML, but for Windows I recommend Notepad ++ and TextWrangler for OS X. They will highlight different groupings of code in different colors, making it easier to read and understand.

When you save a document make sure to save it as filename.html The .html filename is very important!

HTML is case and extension sensitive which means that Picture.png is different from picture.png. Picture.jpg and Picture.png are also different! Make sure you take note of your ENTIRE filename!

Go Home

HTML Basics

Code Edit
Go Home

CSS or Cascading Style Sheets is not HTML. CSS in addition to your HTML is what makes a web page look great. Since this is an app to teach you HTML we will only scratch the surface of CSS. Look for another app soon entilted "Learn CSS Basics".

Let's start out with learning the structure of a CSS comment.  

p {color:red;text-align:center;}

Okay so this example would color the paragraph red and center it. The "p" is known as a selector. There are two Declarations in this example. The first property is color and the value is red. You can also break this CSS up on several lines. 

p
{
color:red;
text-align:center;
}

Declaration groups are surrounded by curly brackets and always end with a semi-colon. Some other examples include: 

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

There are multiple ways to add script to a HTML document. In this section we will learn about interal style sheets. To learn about external style sheets you can click the linking tab. In the head of your document is where you can add the script. For example:

<head>

<style>

hr {color:sienna;}

</style>

CSS is defined by <style> tags. 

You can have CSS only skin certain parts of the document. In the following example you see we skin the h1, p, and div elements.

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Open the content tabs below to learn more. 

Great full example!

As you can see in this example we are using the CSS line-height tag. One is only skinning big and one is skinning small. You can see how the paragraphs are labeled. 

Go Home

Background Images

When you add a background with CSS instead of HTML it gives you much more power. 

body
{
background-image:url('gradient2.png');
}

In this example we are adding the gradient2.png image. Make sure it is in the same folder as your document. CSS repeats the image by default. If you only want it to repeat along x or y you can use these commands. 

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

But what if you don't want it to repeat? What if you want to change the starting position of the image? 

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

CSS Text Styling

With HTML you can define how big your text is with the <h1>, <h2> and so on tags. If you want to just skin certain text you can use some of these styles.

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

Say we want an entire paragraph styled a certain way. We can do that like this:

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Text can also be indented.

p {text-indent:50px;}

Styling Links

With CSS there are four link states: 

  • a:link - a normal, unvisited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouses over it
  • a:active - a link the moment it is clicked

Some rules apply however. a:hover must come after a:link and a:visted. a:active must come after a:hover. You can skin links several different ways:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

You can also change the link colors. 

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}



Styling Lists

With HTML there are unordered and ordered lists. Using CSS we can style lists even further and instead of a bullet or number you can use an image. 

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

ul is for the unordered lists and ol is for ordered. As you can see from above it's pretty easy to change the list type and fonts.

If you would like an image for the background you can use this code:

ul
{
list-style-image: url('sqpurple.gif');
}

Learn more about CSS!

Would you like to learn even more about CSS? If you would like to expand your knowledge and learn more tags and what you can do then vist http://www.w3schools.com/css

HTML Basics

Code Edit
Go Home

Let me start out by saying that JavaScript is not Java! They are two completly different languages! 

Javascript can be used to add interactivity to HTML pages. For this guide we will scratch the very basics of a complex language. If you would like to learn more I would buy a JS book. 

document.write("<p>This is a paragraph</p>");

You are learning your first javascript here. document.write adds text to a page. The text must use () and "". Every line ends with a semi colon (;).

<button type="button" onclick="myFunction()">Click Me!</button>

This exampmle makes use of a function. We will talk about those later. Anyway we are adding a button and when clicked it executes the function. The button reads click me. 

Functions can make your life easier if you need to use the same line of code in multiple places. 

function myFunction()
{
document.write("Oops! The document disappeared!");
}

In the above example we use a function named myFunction. It writes the text to the document. To call a function used code like this: 

<button onclick="myFunction()">Try it</button>

When the button is clicked it displays the text!

Now lets create another example of the functions! This function will show an alert box! (Pop Up)

function myFunction()
{
alert("Hello! I am an alert box!");
}

So again, it is just called myFunction. 

<input type="button" onclick="myFunction()" value="Show alert box" />

Now the user will see a button and when the click it, it executes the function which is to show the alert box. 

Now lets talk about variables. 

var carname="Volvo";

In the example below we create a variable called carname, assigns the value "Volvo" to it, and put the value inside the HTML paragraph with id="demo":

<p id="demo"></p>
var carname="Volvo";
document.getElementById("demo").
innerHTML=carname;

The last thing we will cover are if or else statments. They are pretty self explanitory. Let's set a variable of time. We will make it 10.

var time=10;

Now we will add an if or else statement. 

if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }

So in this example the output would be "Good Day". 

Okay so we just scratched the surface of JavaScript! I would reccomend learning a lot more! This should give you some understanding if you see it on web pages though!



Go Home

HTML Basics

Code Edit
Go Home

The following list is from w3schools.com! They are a great site for learning HTML and other Web Tech! More will be added to this list as time goes on! You may have to rotate your deivce to the side to see all of the code!

HTML Basic Document

<!DOCTYPE html>
<html>
<head>
<title>Title of document goes here</title>
</head>

<body>
Visible text goes here...
</body>

</html>

Basic Tags

<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>

<p>This is a paragraph.</p>
<br> (line break)
<hr> (horizontal rule)
<!-- This is a comment -->

Formatting

<b>Bold text</b>
<code>Computer code</code>
<em>Emphasized text</em>
<i>Italic text</i>
<kbd>Keyboard input</kbd> 
<pre>Preformatted text</pre>
<small>Smaller text</small>
<strong>Important text</strong>

<abbr> (abbreviation)
<address> (contact information)
<bdo> (text direction)
<blockquote> (a section quoted from another source)
<cite> (title of a work)
<del> (deleted text)
<ins> (inserted text)
<sub> (subscripted text)
<sup> (superscripted text)

Links

Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>

Bookmark:
<a id="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>

Images

<img src="URL" alt="Alternate Text" height="42" width="42">

Styles/Sections

<style type="text/css">
  h1 {color:red;}
  p {color:blue;}
</style>

<div>A block-level section in a document</div>
<span>An inline section in a document</span>

Unordered list

<ul>
  <li>Item</li>
  <li>Item</li>
</ul>

Ordered list

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

Definition list

<dl>
  <dt>Item 1</dt>
    <dd>Describe item 1</dd>
  <dt>Item 2</dt>
    <dd>Describe item 2</dd>
</dl>

Tables

<table border="1">
  <tr>
    <th>table header</th>
    <th>table header</th>
  </tr>
  <tr>
    <td>table data</td>
    <td>table data</td>
  </tr>
</table>

Iframe

<iframe src="demo_iframe.htm"></iframe>

Forms

<form action="demo_form.asp" method="post/get">

<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>

<textarea name="comment" rows="60" cols="20"></textarea>

</form>

Entities

&lt; is the same as <
&gt; is the same as >
&#169; is the same as ©

Go Home

HTML Basics

Go Home

As well as new features, version 2.0 comes with a whole new UI! A full list of features includes:

  • Better Layout and Page Animations
  • More Content
  • Removed the iWebkit Section (See Pro)
  • Added CSS and JS sections.
  • Added Videos
  • Added Code Edit Section
  • Removed Changelog
  • Included Ads

In addition to this I have also created a whole new pro version that is ad-free.

So what is in the pro version?

  • In depth sections on jQuery and iWebkit
  • No Ads
  • Save the content in the code edit field when you close the app
  • Troubleshoot your code
  • Learn how to make Native Apps
  • Learn how to get a free server and upload content to it
  • Link javascript and CSS libraries in the edit field.
  • Spam free peer-to-peer help chat servers!

 

HTML Basics

Go Home
Email the code!

This code will not save when you close the app unless you upgrade to the pro edition!

You can view more information on the pro version on the main page or the about 2.0 page. It's only 99 cents and comes with a lot more features!

*Also included in the pro version is the ability to link external javascript and css files.

HTML Basics

Go Home
Enter content here...

HTML Basics

Go Home

Chat Channels

Chat Room 1 Chat Room 2 Chat Room 3 Chat Room 4

The above chat rooms are not monitored. There is a good chance they are over-run by spam. If you would like spam-free peer-to-peer chat please upgrade to the pro version. They are garunteed spam free.

In the pro version you can also specify the chat channel if you and a HTML tutor would like to meet up.

HTML Basics

Go Home

JavaScript and CSS are not HTML and the code can not be used together.You can use the css or js in the HTML document or you can link them externally. Let's start by using them inside the document.

For CSS:


Whenever you want to use the CSS you must open and close the style tags.

For JS:

Whenever you want to use the JS you must open and close the script tags.

If you don't like using the CSS and the JS inside the HTML document then you can link it externally. It's pretty similar for both. Step one is to write all of the seperate code in a new document. You then have to save that as either .js or .css. Now you will need to add lines of code in your head tag.

For Javascript:

<script type = "text/javascript" src = "name.js" >

The src  tag is linking the external file you just created.

For CSS:

<link rel="stylesheet" type="text/css" href="test.css" />

In this case the css file name is "test.css".

You can choose what method to use or JS or CSS, but I would suggest exteranl if you have a lot of code.

Go Home

HTML Basics

Go Home Go Home

HTML Basics

Go Home

iWekbit is a mobile framework that you can use to build iPhone web apps. They look like native apps, and while it's not as popular or powerful as jQuery Mobile it's still a great framework. 

Lets start out by downloding it from snippetspace.com. You will download a zip that has a framework and a demo folder. Open the demo folder and copy the following lines into a new document. These are the links to the stylesheets and libraries iWebkit needs to work. You may want to zoom in so you can see the code closer. 

So lets make a quick example. 

Once again you will want to zoom in on this code or rotate landscape. So what does this code do? You can also find this code in the iWebkit example. This code displays the picture below. 

iWebkit works with divs. First we open a new content id. We are then adding a new page item. This <li> class is a menu and it links to an html file named example. The image can be found in thumbs/ and it's name is changelog.png as you can see in the image. We then name the line and add a name of Example 1.  

Now lets add a text box to the top. 

So what code do we add to put this title and text box in? 

So as you can see we add more content. This time we are adding a new div class called graytitle. It's just example title. Now we are adding another pageitem. The second part is an li class of textbox. We then close everything up. 

So these are obvioulsy very simple examples. If you would like to expand your iWebkit knowledge check out the example files. 

Go Home

HTML Basics

Go Home Go Home

HTML Basics

Go Home

Would you like to turn you code into native apps? It's very easy and we will be using Apache Cordova!


THIS SECTION IS COMING IN THE VERY NEXT UPDATE SOON!

Go Home

Basics

Go Home

jQuery Mobile allows you to write a standard HTML site, and by simply including a link to the jQuery Javascript files we can skin our sites. As you can see from the picture below, we are  going to an onine link. To make it faster and viewable offline, download the framework. Zoom in if you can't see the code below. 

Some of this code can be found on jQuery's website. 

About the "data-role"-We will talk about them more soon, they are a big part of jQuery mobile.

Now let me explain what all of this code is doing. You should understand some of it from your HTML lessons. You can see we open the HTML document and the Head. We use atag then. The next four lines specify some settings and links. We then open a new After the see something called "data-role". In jQuery this allows you to have content. We then close the header. After that we open another div. This is where all of your content would go. As you can see in this one all we have is hello world. We then close everything and the HTML docuent. Below is a screenshot of everything completed. 

List Views

Now we will learn how to make a list view with a "data-role" of listview. You can see the structure of the syntax below, and what it looks like. 

You can see here that data-roles help you define what you would like to do. The data-inset and the data-filer="true" is what allows you to have to search bar at the top. You could search this list. It is very easy to make very powerful tools. Each statement in the list starts with a <li> which stands for list item. Then it links to a different page. You can just see it links to # but you should link it to another site. You should recognize them from your HTML lessons. 

Buttons

The data-role of a button is obviously "button". You can see at the start it is a link. Instead of # add your link. Here is a new data tag: data-icon="star" You can then see the title on the button and closing it up. Buttons are easy ;) Below are some more icons instead of stars. 

Some Basics Themes

By now you should be good with linking buttons to other pages and with data-roles of buttons. You should also be alright with the icons. Now we will be adding different colors to the buttons. Make sure you remeber the data-theme letters. 

Enter content here...

In the above sections you learned some basic data-tags. Find the full refernce guide at jQuerymobile.com. 

Go Home

Server Upload

Go Home

If you have created your site with jQuery or iWebkit with code you should have a folder full of all of your HTML content. So now how do you test this on devices or let friends use it? We will upload it to a web server. You can get free web space with x10hosting. They are my favorite hosting company. You can get 10/GB of space and bandwidth for free without any ads. Start out by creating an account. You should be able to view your web adress and set a username and password. 

If  you have a PC then download WinSCP or Cyberduck if you have a Mac. This will allow you to use what is called FTP to transfter files to your server. 

Make sure you change the file protocol to FTP. You should also make sure the port is 21. The host name should be your domain and your username and password are what you picked. 

Drag all of your HTML files in a folder to your public_html folder. You can then go to your domain and test them on your device. 

Go Home