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)
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.
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… />.
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)
<BODY> (contains tags to be displayed in web page)
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”>
Provide additional Information for web page. it contains declaration for web page title, meta, class styles, script etc.
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.
- 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)
<body background=mainbg.jpg topmargin=0>
<p> …. </p>
<img ….. />
<a ….. > … </a>
<table> … </table>
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
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]
It’s missing alt text, so it’s difficult to determine what it’s supposed to mean.
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>
<h1> First Heading </h1>
<h2> 2nd Heading <h2>
<h3> 3rd Heading </h3>
<h5> 5th Heading </h5>
<h6> 6th Heading </h6>
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).
Align = [center|left|right]
<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…
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…
- Color = [color’s code / color’s name]
- Width = [..px / ..%]
- Noshade = noshade
- Size =[number]
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
To Download the Indonesian Version of the presentation [click here]