[IT] HTML 1


The-following-week-topic after the previous Internet Technology topic (although it was a failure class due to black out in some classes including mine, so the class dismissed earlier than it should be)

HTML
stands for Hyper Text Markup Language, is a format that tells the computer how to display a web pages. the document itself is a plain text files (ASCII) with a special TAGS or code that the browser knows how to interpret and display in a computer’s browser. HTML is a collection of tags, and as a matter of that, HTML consist of two elements there are TAGS and TAG’S ATTRIBUTES. so, HTML isn’t a programming language, but just the markup language and it makes HTML doesn’t have any variable, any algorithm or such things that belongs to programming language. Remember, HTML just a plain files that able to tell the browser what the browser suppose to display. He is good at telling other people what they suppose to do.😀

As I mention above that two basic-most-important elements of HTML are TAGS and ATTRIBUTES. so let discuss each element.

TAG
HTML consist of tags, tags define each HTML objects. the tags writing begins with ‘<‘ symbol followed by tag’s name then closed by ‘>’ symbol. so it should be like this <tag’sname>. most of those tags have their own pair, except some of them are the oneline/inline tags. this inline tags stand by them selves. if most of the tags should be written like this <FONT> text </FONT> then inline tags just need to write the single tag without the closing tag like this <IMG… />.

ATTRIBUTE
When Tag define the object, attributes give the additional information for those objects. It gives the properties information to support the objects. that’s why attributes couldn’t stand in their own. it needs tags. attributes placed after tag’s name. each tag may has more than one attribute.

<FONT COLOR=BLUE> TEXT </FONT>

BASIC STRUCTURE OF HTML

<!DOCTYPE html> (to define the documents type)<HTML>
<HEAD>  (to define the information of a web page)
</HEAD>
<BODY> (contains tags to be displayed in web page)
</BODY>
</HTML>

DOCTYPE
DOCTYPE is declared before you declare the <HTML> tag. this tag provides the information used by browser about the type of document you used, it tells the browser HTML version use by the page so the browser will render your page correctly. DOCTYPE in html 4 you need to declare the DTD (Document Type Definition) but in HTML 5 you can forget all the DTD.
DOCTYPE declaration in HTML 4
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN“ “http://www.w3.org/TR/html4/strict.dtd”&gt;

DOCTYPE declaration in HTML 5

—<!DOCTYPE html>
HEAD
Provide additional Information for web page. it contains declaration for web page title, meta, class styles, script etc.
example :
<head>
<meta… >
<style> </style>
<title> </title>
<link …/>
dst
</head>BODY
place you can put lots of tags related with webpage (content, image, video etc). Tons of tags could be used within this tag, well…it’s obvious. and we will discuss tags within the <body> tag in separate chapter.
Attributes :

  • topmargin/bottommargin/leftmargin/rightmargin = [..px/..%]
  • alink = [color’s name / color’s code begin with ‘#’] (to change the color of active link, selected by tab, deprecated in HTML 4.01)
  • background = [location of picture] (to make a picture background,deprecated, people nowadays love make background from CSS)
  • bgcolor = [color’s name / color’s code begin with ‘#’] (solid color background, deprecated)
  • link = [color’s name / color’s code begin with ‘#’] (to change the color of available link, deprecated)
  • vlink =[color’s name / color’s code begin with ‘#’] (to change the color of visited link, deprecated)
  • text = [color’s name / color’s code begin with ‘#’] (to change the color of text inside the body tag, deprecated)

example :
<body background=mainbg.jpg topmargin=0>
<p> …. </p>
<img ….. />
<a ….. > … </a>
<table> … </table>
</body>
etc

Then here is some of block Element in HTML :
PARAGRAPH
use <p > … </p> tags.
attribute :
align = [center | left | right | justify] (to manage the align for the whole content inside the <p> tag )
Example :

<p align=center>
having failed miserably to manage something as simple as  order a breakfast and pay for it, ” we set about our next task:  submitting a visa application for our impending visit to
</p>

BLOCKQUOTE
Use to mark a quote within the paragraph. you see, quote has a special mark among another text. and this <blockquote> … </blockquote> tag really come in handy.😀
attributes :cite = [url source]

example

<blockquote cite=http://www.brucelawson.co.uk/index.php/2005/stupid-stock-photography/“>
It’s missing alt text, so it’s difficult to determine what it’s supposed to mean.
</blockquote>

HEADING
There are 6 levels of heading available in HTML, begin with <H1> … </H1> up to <H6> … </H6>. <H1> indicates the highest level of heading and the lowest is -of course- <H6>
Example :

<h1> First Heading </h1>
<h2> 2nd Heading <h2>
<h3> 3rd Heading </h3>
<h4>4th Heading</h4>
<h5> 5th Heading </h5>
<h6> 6th Heading </h6>

DIV
This is one of most popular tag used by developer nowadays. to make layout, format the block element etc. it’s quite funny at first (when you happen to know nothing about CSS) because it doesn’t quite looks like another tag that has a specific function, like blockquote or heading where the changes between the text that has a blockquote and doesn’t looks significant. while, in the other hand, <DIV> … </DIV> tag doesn’t have it. when DIV is applied to a statement or even a paragraph, the result is just the same when you applied nothing. buuuuuttt… when you already know the magic of 3 words called CSS, you’ll love it to death (well I am dying by the web designed as I designed the website).

attributes :
Align = [center|left|right]

example :

<div align=left> It’s missing alt text, so it’s difficult to determine what it’s supposed to mean. </div>

the statement above looks plain, an unedited statement. see what happen if you change it to the following tag. DIV tag + inline CSS

<div align=left style=”border:purple solid 1px; width:500px; height:300px; padding:15px 15px; font-family:verdana;”> It’s missing alt text, so it’s difficult to determine what it’s supposed to mean. </div>

write it and run it…..
Note that I used ‘style’ attribute above. yes, it is an attribute and I put it inside the DIV tag. it is an attribute that every tag has. it isn’t a special tag for DIV neither for specific tag. it belongs to everyone…

HORIZONTAL LINE
to make a line that horizontally divide the page. Ok, I am trying to define what this tag suppose to do, but well….. the title already give you the idea what this tag capable of. yes… it makes a horizontal line… what else…

attributes :

  • —Color = [color’s code / color’s name]
  • —Width = [..px / ..%]
  • —Noshade = noshade
  • —Size =[number]

Example :

<p>
having failed miserably to manage something as simple as  order a breakfast and pay for it <hr width=500 size=20 color=#EEEEEE />  so it’s difficult to determine what it’s supposed to mean.” we set about our next task:  submitting a visa application for our impending visit to
</p>

To Download the Indonesian Version of the presentation [click here]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s