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)
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.
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.
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!
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.
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.
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;
}
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;}
With CSS there are four link states:
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;}
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');
}
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
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.
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.
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!
<!DOCTYPE html>
<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body>
</html>
<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 -->
<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)
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>
<img src="URL" alt="Alternate Text" height="42" width="42">
<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>
<ul>
<li>Item</li>
<li>Item</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<dl>
<dt>Item 1</dt>
<dd>Describe item 1</dd>
<dt>Item 2</dt>
<dd>Describe item 2</dd>
</dl>
<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 src="demo_iframe.htm"></iframe>
<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>
< is the same as <
> is the same as >
© is the same as ©
As well as new features, version 2.0 comes with a whole new UI! A full list of features includes:
In addition to this I have also created a whole new pro version that is ad-free.
So what is in the pro version?
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.
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.
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.
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.
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.
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.
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.
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.
In the above sections you learned some basic data-tags. Find the full refernce guide at jQuerymobile.com.
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.