HTML BASIC 2

Structure of Web Pages

<HTML>

<HEAD><TITLE>My First Home Page</TITLE>

<META NAME="New Web" CONTENT="Mr. Onny">
<LINK REL=HOME HREF="http://www.tik-khadijah.blogspot.com">
</HEAD>

<BODY>

My First Home Page

</BODY>

</HTML>
Description :

  • <HTML> tags must be placed at the beginning of the document and </html> tags placed at the end of the document, the html page have 2 main parts, namely <HEAD> and <BODY>. <HEAD> tags contains information about html. this information is communicated through the tag <TITLE>, <LINK> and <META>
  • <TITLE> ...= must be in the tag that states the title of an HTML page, not shown in the documents but displayed in the browser bar
  • <LINK.....>= Defining the relationship between the current page and the page or other resources. For example, we have already a web page and we will connect to the other pages.
  • <META....>= Used to describe a web page. containing information about the information on the web page.
  • <BODY ...>= Defining the section shown on the document, it has a number of attributes that control the view the document as a whole.


Page Format

<BODY BACKGROUND="sands.gif" BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#FF66FF" ALINK="#FF0000">>

Description :
  • BACKGROUND = Using "image" as background of web pages
  • Bgcolor = Used to color the background, there are 2 types of color selection, the first to use the text as "Red", "Green", "Blue," "Yellow", "Magenta", "Gold" and so forth. Meanwhile, other ways to use RGB color layout using the hexadecimal code.
RGB Color Code:
RGB stands for Red Green Blue, like a painter, we can combine these 3 colors into new colors based on the intensity of each color. the three colors have the lowest value "00" and "FF" for the highest number with the sequence of hexadecimal

Example :
bgcolor=#FF0000 ---> after the # sign, 2 digits for the first red, 2 digits next green, the last 2 digits blue

bgcolor=#FF0000--->Red
bgcolor=#00FF00--->Green
bgcolor=#0000FF--->Blue

bgcolor=#000000---> black ; bgcolor=#FFFFFF...>white

TEXT="#000000"--->text color

LINK="#0000FF"--->text link color before click

VLINK="#FF66FF"--->text link color after link visited (Visited Link)

ALINK="#FF0000"---> text link color when cursor through link text(Active Link)

<Background> attributes

bgproperties : If the background image of the HTML document can not be in the scroll
topmargin : size of top and bottom margins
leftmargin : size of left and right margins
marginheight : size of top and bottom margins
marginwidth : size of left and right margins
onload : Script to run once the page is fully loaded
onunload
onfocus
onblur
stylesrc : MS Front page ekstension
scroll : to activate the scroll bar if necessary


Text

<B>.....</B> = > Bold
<I>.....</I> = > Italic
<U>.....</U> = > Underline
<S>.....</S> = > Strikeout
<SUB>...</SUB> = > Subscript
<SUP>...</SUP> = > Superscript
<TT>....</TT> = > Typewriter
<center>...</center> = > Center text
<blink>....</blink> = > Blinking
<pre>......</pre> = > Preformat


Font

<font....>....</font>

Attribute :
Face=...=>Font name
Size=....=>Font Size
Color=...=>Font Color
Weight=...=>Font Weight



Practice :
Type the following HTML code :

<html>
<head>
<Title>I Can Do it, I’ll Find New Things</title>
</head>
<body bgcolor=”#9933aa” text=”000000”>
<font face="Verdana" size=7>
<center><B>My New Title (It’s Bold)</B></center>
<BR/>
<font size=1>SMA KHADIJAH SURABAYA</FONT><BR/>
<font size=2>SMA KHADIJAH SURABAYA</FONT><BR/>
<font size=3>SMA KHADIJAH SURABAYA</FONT><BR/>
<font size=4>SMA KHADIJAH SURABAYA</FONT><BR/>
&nbsp
<FONT COLOR="RED" SIZE=4>
<B>CHEMISTRY</B>
&nbsp = H<sub>2</sub>SO<sub>4</sub><br/>
&nbsp
<B>Mathematic</B> &nbsp = R<sup>2</sup>=X<sup>2</sup> + Y <sup>2</sup>
<font color="black">
<pre>
SMA Khadijah
Surabaya
Jl. A Yani No. 2-4 Surabaya

Is a Leader of Modern Islamic International School
</pre>

</body>

Result :


Practice 2 :
Use all html tag above to see the result in browser

Tidak ada komentar:

Posting Komentar