ACM Teach Me
CSC243
  1. What is Object Oriented Programming?
  2. What is a class
  3. Let the Coding Begin
  4. Java Variables
  5. Stream Input/Output
  6. Arithmetic Operations
  7. Control Statements
  8. Switch Statement
  9. The For Loop
  10. The while loop
  11. The do...while Loop
  12. Break and continue
  13. Java Strings
  14. Java Arrays
  15. Traversing Arrays
  16. More on Object Oriented Programming
LINUX101
  1. Intro to Linux
  2. Linux Distributions
  3. The Linux Interface
WEB101
  1. What's HMTL?

What's HMTL?

Hyper Text Markup Language (HTML) is a markup language (a language that deals with tags) that is used to create web pages. HTML is not compiled like Java or other programming languages, it is processed while being read by web browsers like firefox, chrome, opera, safari etc... (There is also something called Internet Explorer but I am not really sure if it's a web browser or a prank).



How to write HTML


Writing HTML is fairly easy. All you have to do is open a tag and then close it.
ex: 

<tag> here is the content of the tag </tag>

in HTML a tag is opened using <...> and closed using </...>



HTML Structure


The HTML is structure is easy as well. An HTML document (saved as example.html) will consist of several tags containing several others tags, the way you like it: 

<tag>

    <tag2>

    <tag3> .....</tag3>

     </tag2>

</tag>

Follow how the tag is opened and how it is closed to understand that better. An HTML document consists of 3 main tags:

  • The HTML tag: <html> </html>

  • The head tag: <head> </head>

  • The body tag: <body> </body>


Put together a simple document will be:


<html>

<head>

here goes the head content

</head>

<body>

here goes the body content

</body>
</html>

The head will hold extra information that has to do with the title of the document, extra metadata (google this if you want) and usage of other external documents. The body will hold everything that you actually see on a website or webpage.



HTML Editors:


There are lots of HTML editors out there. But, you can simply write an HTML document using using notepad (if you want something light and efficient I recommend notepad++ - http://notepad-plus-plus.org/)



Some HTML Tags:


  • <p> stands for paragraph - used to write simple text </p>

  • <hx> stands for heading (x is between 1 and 6 depending on the size - 1 is the largest) </hx>

  • <a href = "www.facebook.com">this is a link </a>

    • href specifies the link and what is in between the a tags specifies what is the clickable text

  • <img src="example.jpg" width="104" height="142" /> This is an image

    • (notice how this tag closes in the opening tag and does not split into two tags - one opening and one closing. This will be discussed later on)


All of these tags go into the body so the final example including all would be:

<html>

<head>

<title> This is the title seen in the browser tab </title>

</head>

<body>

<h1>This is a large header</h1>

<h2> this is smaller </h2>

<h3> and smaller </h3>

<h4> and smaller </h4>

<h5> and smaller </h5>

<h6> this is the smallest - no h7 so we stop here </h6>

<a href= "http://www.facebook.com/groups/acmlau/"> I love the LAU ACM Chapter</a>


<img src="example.jpg" width="104" height="142" />

</body>

</html>

Copy this, save it in a file (call it whatever you want but make sure it's .html) double click it and check what you get.

Edit this code and check what happens, create something and wait for more tutorials to come.