Scribd Logo
Importer

Bienvenue sur Scribd !

  • FP103 T

    Transféré par

    Wan Norbaizurah Rohaizat
    27 vues61 pages
    Html is a abbreviation of Hyper text Markup Language, that use to develop a web site. Head is use as a header of the web, Body is use as document title will display at a title of website.

    Description originale:

    Titre original

    FP103t

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PPT, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    Html is a abbreviation of Hyper text Markup Language, that use to develop a web site. Head is use as a header of the web, Body is use as document title will display at a title of website.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PPT, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    27 vues61 pages

    FP103 T

    Transféré par

    Wan Norbaizurah Rohaizat
    Html is a abbreviation of Hyper text Markup Language, that use to develop a web site. Head is use as a header of the web, Body is use as document title will display at a title of website.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PPT, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 61

    FP103 : HTML

    Asyran Zarizi Bin Abdullah JTMK, October 2011

    Introduction of HTML
    What

    is Html? Html is a abbreviation of Hyper Text Markup Language, that use to develop a web site.

    HTML code
    Html

    fail is divide by two, <head> and <body>. Head is use as a header of the web, Body is use as a document Title will display at a Title of website.

    Example
    <html> <head> <title>Disini title websiteku</title> </head> <body> Disini adalah kandungan di browser </body> </html>

    Font style
    <html> <head></head> <body> <title>Font Style</title> Untuk membuat jenis font (face): <h1 style="font-family:verdana"> Judul Menggunakan font verdana</h1>

    Bold, italic, underline


    italic

    - <i>..</i> bold - <b>.</b> underline - <u>.</u>

    Font color
    <html> <head></head> <body> <title>Font Color</title> </p> Untuk membuat warna font (color): <h1 style="color:blue">Judul dengan warna Biru</h1>

    Font size
    <html> <head></head> <body> <title>Font Size</title> </p> Untuk membuat font size(color): <h1 style=font-size:211%>Judul dengan size 211%</h1>

    Attribute
    Font(face). Color(Color), Size(Size) face="Jenis font yang digunakan", contoh: face="Tahoma" size="Ukuran dari font (1-7)", contoh: size="3" size="Memperbesar ukuran font", contoh: size="+1" size="Memperkecil ukuran font", contoh: size="-1" color="Warna dari font", contoh: color="blue" color="Warna dari font", contoh: color="#FF0000

    <hr> : Horizontal <h1> : Heading style (h1 h6) K = New paragraph

    Exercise
    By

    using HTML code, create a file that namely as My Biodata Your file must use all of html code that we have learn before.

    Font Style
    <title>Font Style</title> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><big>This text is big</big></p> <p><em>This text is emphasized</em></p> <p><code>This is computer output</code></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

    The Heading
    <title>Heading</title> <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6>

    Justify, Center, Left, Right


    <html>

    <head> <title> Contoh command</title> </head> <body> <p align="center"> Kaedah kawalan (Left, Right, Center, Justify)</p></body> </html>

    Background colour
    <body>

    <body bgcolor=SOFT YELLOW><b>TUKAR BACKGROUND MENGIKUT WARNA KESUKAAN ANDA</b></p></body> </html>

    Hyperlink
    <html>

    <head></head> <body> <p>Command hyperlink</p> <title>Hyperlink</title> Jika anda ingin mengunjungi Facebook :<a href="http://www.facebook.com/">Klik disini</a><br>

    Image Hyperlink
    <a

    href="http://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31 align="left"></a>

    Color Value
    <p style="background-color:#FFFF00"> Color set by using hex value </p> <p style="background-color:rgb(255,255,0)"> Color set by using rgb value </p> <p style="background-color:yellow"> Color set by using color name </p>

    Color Value

    Tutorial

    Header
    <HTML>

    <TITLE> A Home Pages About Manchester United </TITLE>


    <BODY> <FONT FACE="arial" SIZE="+4"> Manchester United Official Page</FONT> </BODY> </HTML>

    Header2 - Bold
    <HTML> <TITLE> A Home Pages About Manchester United </TITLE>

    <BODY> <FONT FACE="arial" SIZE="+4"> <B>Manchester United Official Page</B></FONT>


    </BODY> </HTML>

    Header3 - Bullets
    <P> <FONT FACE=arial SIZE=-1> Manchester United FC Player: <UL> <LI> David Beckham <LI> Rynn Giggs <LI> David De Gea </UL> </BODY> </HTML>

    New Pages
    <HTML> <TITLE> David Beckham </TITLE> <BODY> <FONT FACE=verdana SIZE=+3><B> David Beckham </B></FONT> </BODY> </HTML>

    Pages sebelumnya!
    <P> <FONT FACE=arial SIZE=-1> Manchester United FC Player: <UL> <LI> <B><A HREF=david beckham.htm> David Beckham </B></A> <LI> Rynn Giggs <LI> David De Gea </UL>

    Pages sebelumnya!
    <UL> <LI> <B><A HREF=david beckham.htm> David Beckham </B></A> <LI> Rynn Giggs <LI> David De Gea </UL> For more information, contact <A HREF="mailto:info@mufc.com">info@mufc. com</A>

    Insert Image
    <HTML> <TITLE> David Beckham </TITLE> <BODY> <FONT FACE="verdana" SIZE="+3"><B> David Beckham </B></FONT> <P> <IMG SRC="a.jpg"> </BODY> </HTML>

    Align
    <P> <IMG SRC="a.jpg ALIGN=left> <P> David Beckham atau nama sebenarnya ialah kamsan bin rajud David Beckham atau nama sebenarnya ialah kamsan bin rajud David Beckham atau nama sebenarnya ialah kamsan bin rajud </BODY> </HTML>

    Vspace, Hspace, Border


    <P> <IMG SRC="a.jpg" ALIGN="left" VSPACE="4" HSPACE="12" BORDER="1" WIDTH="150" HEIGHT="189"> <P> David Beckham atau nama sebenarnya ialah kamsan bin rajud David Beckham atau nama sebenarnya ialah kamsan bin rajud David Beckham atau nama sebenarnya ialah kamsan bin rajud

    Home hypelink
    <P> David Beckham atau nama sebenarnya ialah kamsan bin <P> <A HREF=index.html>Home</A> <P> <A HREF="home.htm">Home</A> | Ryan Giggs | David De Gea

    </BODY> </HTML>

    Home hypelink
    <P> David Beckham atau nama sebenarnya ialah kamsan bin <P> <A HREF=index.html>Home</A> <P> <A HREF="home.htm">Home</A> | Ryan Giggs | David De Gea

    </BODY> </HTML>

    Background colour
    <HTML> <TITLE> A Home Pages About Manchester United </TITLE>

    <BODY BGCOLOR="#ffffcc" LINK="#ff0000 VLINK="#00ff00">


    <BODY> <FONT FACE="arial" SIZE="+4" COLOR="red"><U> <B>Manchester United Official

    Tutorial 2

    Table
    <HTML> <TITLE> MUFC Official Page </TITLE> <BODY>

    </BODY> </HTML>

    Table 1
    <BODY> <TABLE BORDER=1> <TR> <TD>Links</TD> <TD>Content</TD> </TR> </TABLE> </BODY> </HTML>

    Table 2
    <BODY> <TABLE BORDER=1 WIDTH="100%"> <TR> <TD>Links</TD> <TD>Content</TD> </TR> </TABLE> </BODY> </HTML>

    Table 2
    <BODY> <TABLE BORDER=0 WIDTH=100%> <TR> <TD BGCOLOR=#CCCCCC>Links</TD> <TD>Content</TD> </TR> </TABLE>

    Table 3
    <BODY> <TABLE BORDER=0 WIDTH=100% CELLPADDING=16> <TR> <TD BGCOLOR=#CCCCCC>Links</TD> <TD>Content</TD> </TR> </TABLE>

    Table 4
    <BODY> <TABLE BORDER=0 WIDTH=100% CELLPADDING=16 CELLSPACING=0> <TR> <TD BGCOLOR=#CCCCCC VALIGN=top> </TR> </TABLE>

    Menu
    <TD BGCOLOR="#CCCCCC">

    <FONT FACE=arial SIZE=4"><a href="pages2.htm"> <P> Home</a> <P> History <P> Old Trafford </FONT> </TD>

    Header
    <P> Old Trafford </FONT> </TD> <td valign="center" width="85%"> <FONT FACE="verdana" SIZE="100" COLOR="red><B> Manchester United Official Page</FONT></B>

    Add image
    </TD> <FONT FACE="verdana" SIZE="100" COLOR="red"><B> Manchester United Official Page</FONT></B> <P> <IMG SRC="a.jpg">

    Add word
    <P> <IMG SRC="a.jpg"> <P> <FONT FACE="verdana" SIZE="-1">Glory Glory Manchester United Glory Glory Manchester United Glory Glory Manchester United Glory Glory Manchester United Glory Glory Manchester United </TD> </TR> </BODY> </HTML>

    Hyperlink header
    <HTML> <TITLE> MUFC Official Page </TITLE> <BODY>

    <TABLE border=0 width="100%" cellpadding="4" cellspacing="0">

    Hyperlink header 1
    <HTML> <TITLE> MUFC Official Page </TITLE> <BODY> <TABLE border=0 width="100%" cellpadding="4" cellspacing="0"> <TD BGCOLOR="#ffff00" TD WIDTH="5.10%"> <CENTER> HOME </CENTER> </TD>

    Hyperlink header 2
    <TD BGCOLOR="#ffff00" TD WIDTH="5.10%"> <CENTER> HOME </CENTER> </TD>

    <TD BGCOLOR="#CCC0CC" TD WIDTH="10%"><a href="pages2.htm"><CENTER>Players</CENTER></ TD></font></td></a>

    Hyperlink header 3
    <TD BGCOLOR="#CCC0CC" TD WIDTH="10%"><a href="pages2.htm"><CENTER>Players</CENTER></ TD></font></td></a> <TD BGCOLOR="#ccc00c" TD WIDTH="10%"> <CENTER> The Rockies </CENTER> </TD></td> <TD BGCOLOR="#cccccc" TD WIDTH="10%"> <CENTER>The Midwest </CENTER> </TD>

    Tutorial 3

    Add video
    <embed

    src="videoplayback_10.FLV" height="200" width="200"/>

    Add music
    <P align="center"><audio controls="controls" height="50px" width="100px"> <source src="MU - Glory Glory Man United.mp3" type="audio/mpeg" /> <embed height="50px" width="100px" src="MU Glory Glory Man United.mp3" /> </p> </audio>

    Form (New Page)


    <P> <FORM> <TABLE BORDER=1 width="10%"> <TD><P ALIGN="center"></TD> <p> Fill out the following form for subscribe and registration of MUFC fan </p>

    Form 2
    <p> Fill out the following form for subscribe and registration of MUFC fan </p> <TR> <TD>Name: </TD> <TD><INPUT TYPE="text" NAME="name" SIZE="40"></TD> </TR>

    Form 3
    <TR> <TD>Name: </TD> <TD><INPUT TYPE="text" NAME="name" SIZE="40"></TD> </TR> <TR> <TD>Address: </TD> <TD><INPUT TYPE="text" ADDRESS=address" SIZE="20"></TD> </TR>

    Form 4
    <TR> <TD>Address: </TD> <TD><INPUT TYPE="text" ADDRESS=address" SIZE="20"></TD> </TR> <TR> <TD> E-Mail: </TD> <TD><INPUT TYPE="text" E-MAIL =e-mail " SIZE="20"></TD> </TR>

    Form 5
    <TR> <TD> E-Mail: </TD> <TD><INPUT TYPE="text" E-MAIL =e-mail " SIZE="20"></TD> </TR> <TR> <TD></TD> <TD><INPUT TYPE="submit" VALUE=" Send me info "> </TD> </TR></P> </TABLE> </BODY>

    Form 6
    <P> <FORM>

    <TABLE BORDER=0 width="10%"> <TD><P ALIGN="center"></TD>


    <p> Fill out the following form for subscribe and registration of MUFC fan </p>

    Textbox Horizontal
    Nama : <input type=text name=nama> Alamat : <input type=text name=alamat> No. Telp : <input type=text name=notelp>

    Combo textbox
    <P> My favorite football team : <select name='EPL'> <option value=MUFC>MUFC</option> <option value=Chelsea>Chelsea</option> <option value=Arsenal>Arsenal</option> <option value=Liverpool>Liverpool</option></P>

    Option menu
    <p> Please select your gender: </p> <p> <input type="radio" name="sex" value="male" /> Male <br />

    <input type="radio" name="sex" value="female" /> Female</p>

    Assignment

    1) Hyperlink 2) Video 3) Audio 4) Form 5) Table

    Assignment

    1) Hyperlink 2) Video 3) Audio 4) Form 5) Table

    Assignment

    1) Hyperlink 2) Video 3) Audio 4) Form 5) Table

    Vous aimerez peut-être aussi