I. Pengenalan HTML - · PDF filePemrograman Web Lalang Erawan, S ... Netscape Enterprise...

Click here to load reader

  • date post

    15-Feb-2018
  • Category

    Documents

  • view

    221
  • download

    3

Embed Size (px)

Transcript of I. Pengenalan HTML - · PDF filePemrograman Web Lalang Erawan, S ... Netscape Enterprise...

  • PemrogramanWebLalangErawan,S.Kom

    1

    I.PengenalanHTML

    WorldWideWebInternetmerupakanjaringanglobalyangmenghubungkansuatunetworkdengannetworklainya di seluruh dunia, TCP/IPmenjadi protocol penghubung antara jaringanjaringanyangberagamdiseluruhduniauntukdapatberkomunikasi.World Wide Web (WWW) merupakan bagian dari internet yang paling cepatberkembang dan paling populer. WWW bekerja merdasarkan pada tiga mekanismeberikut:

    Protocol, standard aturan yangdi gunakan untuk berkomunikasi pada computernetworking.HypertextTransferProtocol(HTTP)adalahprotocoluntukWWW.

    Address WWW memiliki aturan penamaan alamat web yaitu URL (UniformResourceLocator)yangdigunakansebagaistandardalamatinternet.

    HTMLdigunakanuntukmembuatdocumentyangbisadiaksesmelalui web.

    HTMLHypertext Markup Language merupakan standard bahasa yang digunakan untukmenampilkandocumentweb,yangbisaandalakukandenganHTMLyaitu:

    Mengontroltampilandariwebpagedancontentnya. Mempublikasikan document secara online sehingga bisa di akses dari seluruh

    dunia. Membuat online form yang bisa di gunakan untuk menangani pendaftaran,

    transaksisecaraonline. Menambahkan objectobject seperti image, audio, video dan juga java applet

    dalamdocumentHTML.

    BrowserdanEditor

    BrowserBrowser merupakan software yang diinstall di mesin client yang berfungsi untukmenterjemahkantagtagHTMLmenjadihalamanweb.BrowseryangseringdigunakanbiasanyaInternetExplorer,NetscapeNavigatordanmasihbanyakyanglainya.

    EditorProgram yang digunakan untukmembuat documentHTML, ada banyakHTML editoryangbisaandagunakandiantaranya:MsFrontPage,Dreamweaver,Notepad.

  • PemrogramanWebLalangErawan,S.Kom

    2

    II.BasicTagHTML

    TagtagHTMLCommandHTML biasanyadisebutTAG.TAG digunakan untukmenentukan tampilandaridocumentHTML.Hampirsemuatagberpasangan.

    Contoh :SetiapdocumentHTMLdiawalidandiakhiridengantagHTML.

    ...

    Tag tidak case sensitive, jadi anda bisa gunakan atau keduanyamenghasilkanoutputyangsama.BentukdaritagHTMLsebagaiberikut:

    Element :namatagAttribute :atributdaritagValue :nilaidariatribut.

    Contoh :

    BODYmerupakanelement,BGCOLORmerupakan atributyangmemilikinilaiblue.

    StrukturDocumentHTMLDocumentHTMLbisadibagimejaditigabagianutama:

    HTMLSetiapdocumentHTMLharusdiawalidanditutupdengantagHTML

    tag HTML memberi tahu browser bahwa didalam kedua tag tersebut adalahdocumentHTML.

  • PemrogramanWebLalangErawan,S.Kom

    3

    HEADBagian header dari document HTML diapit oleh tag .Didalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul darihalamanpadatitlebrowser.Selain ituBookmark jugamenggunakan tagTITLEuntukmemberimark suatuwebsite.Untukkeperluanpencarian(searching)biasanyatitledigunakansebagaikeyword.Header juga memuat tag META yang biasanya digunakan untuk menentukaninformasi tertentu mengenai document HTML, anda bisa menentukan authorname,keywords,danlainyanpadatagMETA.Contoh :

    AuthordaridocumenttersebutadalahBocahGunung

    BODYElemenbodydigunakan untukmenampilkan text, image, link, dan semua yangakanditampilkanpadaweb page.

    WelcometoHTML

    DocumentHTMLyangPertama

    BasicHTMLElement BlockLevelElement

    o Blocklevelelementyangseringdigunakan Heading(H1sampaiH6)Contoh:

    HeadingElementsHeadingoneHeadingtwoHeadingthreeHeadingfourHeadingfiveHeadingsix

  • PemrogramanWebLalangErawan,S.Kom

    4

    Hasildibrowser:

    o Paragraf(P)Contoh:

    FormatingParagrafHTML

    bahasa HTML sangat mudah dipelajari karena merupakanbahasabertandasehinggahanyasedikitmenuntutlogika

    PHP

    script PHP menolong HTML ketika melakukan pengolahandatakarenaHTMLtidakdapatmelakukannya

    Hasildibrowser:

  • PemrogramanWebLalangErawan,S.Kom

    5

    o ListList item digunakan untuk mengelompokkan data baik berurutan (ordered list)maupunyangtidakberurutan(unorderedlist).AdatigamacamlistyangbisaandatambahkankedocumentHTML:1. UnorderedList(Bullet):

    Contoh:

    UnorderedList

    SheduleforHTMLCourse

    SundayMondayTuesdayWednesday

    Hasildibrowser:

    2. OrderedList(Numbering)Contoh :

    OrderedList

    SheduleforHTMLCourse

    SundayIntroductiontoHTMLCreatingList

  • PemrogramanWebLalangErawan,S.Kom

    6

    MondayCreatingtableInsertingImageTuesdayCreatingLinkPreparingWebsiteWednesday

    Hasildibrowser:

    3. DefinitionListDefinitionList terdiridaritag.Tagdigunakanuntukmenentukandefinitiontermsertatag menentukandefinitionitusendiri.Contoh:

    DefinitionList

    ListofInternetResource

    HTMLHyperTextMarkupLangguageisnotLanguageProgramming

  • PemrogramanWebLalangErawan,S.Kom

    7

    HTTPHyperTextTransferProtocolisTCP/IPProtocolInternetAnetworkofnetworkTCP/IPInternetprotocol

    Hasildibrowser:

    o HorizontalRules(HR)Horizontal Rule tag digunakan untuk menggambar garis horizontal dalamdocumentHTML.Atributyangdimiliki :Align :menetukanposisidariHR,denganvalue:center|right|left.Width :untukmenentukanpanjangHRdefault100%Size :untukmenentukantebaldariHRdalampixelNoshade :efekbayangan.

    InlineatauTextLevelElementInlinelevelyangseringdigunakan :o EM,I,BdanFONT(Pemformatanfont)o A(hyperlink)o BR(Breakline)o IMG(image)

  • PemrogramanWebLalangErawan,S.Kom

    8

    PemformatanPage

    BreakTag di gunakan untuk memulai baris baru pada document HTML, tag inifungsinyamiripdengancarriagereturn.

    Contoh:

    BreakLineBulidingDynamicWebAplication

    Ifyou'rebuildingadynamicwebapplication,startbysettingupanapplicationserverandconnectingtoadatabase.

    Hasildibrowser:

    FontDengan tag anda bisa menentukan format tampilan font dalam documentHTMLseperticolor,size,styledanlainnya.

    Contoh:

    FormatingFontSettingUpWebServer

  • PemrogramanWebLalangErawan,S.Kom

    9

    Torunwebapplications,youneedawebserver.Awebserverissoftwarethatservesfilesinresponsetorequestsfromwebbrowsers.AwebserverissometimescalledanHTTPserver.CommonwebserversincludeIIS,NetscapeEnterpriseServer,iPlanetWebServer,andApacheHTTPServer.

    Hasildibrowser:

    Atributfont:

    Color :untukmenentukanwarnafont,andabisamenggunakannamafontatauhexadecimal(#000000#ffffff)

    Size :untukmenentukanukurandarifont1 7Face :untukmenentukanjenisfontbiasanyadalamsatulistadabeberapafont

    danakandibacamulaidariyangpalingkiri.

    Penjelasanlebihlanjuttentangatribut:

    ColorColor merupakan attribute yang bisa anda tambahkan pada beberapa element sepertibody, font, link dan lainnya. Color dibagi dalam tiga kategoriwarna primer yaitu red,greendanblue.Masingmasingcolordidefinisikandalamduadigithexadecimalnumber:#RRGGBB.Contoh hexadecimalColor:

    #FF0000Red#00FF00Green#0000FFBlue#000000Black#FFFFFFWhite

    AlignmentAlign attribute digunakan untuk menentukan perataan object dalam document HTMLbaikberupatext,object,image,paragraph,divisiondanlainlain.Nilaiatributini:

  • PemrogramanWebLalangErawan,S.Kom

    10

    Left :ratakiriRight :ratakananCenter:ratatengahJustify:ratakanankiri

    FormattextTagtaguntukmemformatteksantaralain:

    ... :boldtext... :italictext... :underlineText... :untukukuranyanglebihbesardarinormal... :Untukukuranyanglebihkecildari normal... :Untukmemberigarisditengahtext... :Superscripttext... :Subscripttext... :Centerdocument... :Untukteksmiring... :Texttebal

    Quotes/IndentasiUntuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untukindentasipendekandabisagunakanelementQ.Contoh:

    FormatingFontSettingUpWebServer

    Torunwebapplications,youneedawebserver.Awebserverissoftwarethatservesfilesinresponsetorequestsfromwebbrowsers.AwebserverissometimescalledanHTTPserver.CommonwebserversincludeIIS,NetscapeEnterpriseServer,iPlanetWebServer,andApacheHTTPServer.

  • PemrogramanWebLalangErawan,S.Kom

    11

    Ifyourenotusingawebhostingservice,chooseawebserverandinstallitonyourlocalcomputeroronaremotecomputer

    Hasildibrowser:

    PreformattedtextTagPREdigunakanuntukmenampilkantextsesuaidenganformataslinya.Contoh :

    FormatingFontSettingUpWebServer

    Torunwebapplications,youneedawebserver.Awebserverissoftwarethatservesfilesinresponsetorequestsfromweb browsers. A web server is sometimes called an HTTPserver.CommonwebserversincludeIIS,NetscapeEnterpriseServer,iPlanet Web Server, and Apache HTTP Server. If youre notusing a web hosting service, choose a web server andinstallitonyourlocalcomputeroronaremotecomputer

  • PemrogramanWebLalangErawan,S.Kom

    12

    GroupingelementTagDIVdanSPANdigunakanuntukmengelompokkanelementelementHTML.Spandigunakan untukmendefinisikan inline content, sementara div digunakan untuk blocklevelcontent.Contoh :

    DivdanSpanDivisi1

    Div tag digunakan untuk mengelompokkan group elementbiasanyauntukblocklevelelement.

    Divisi2

    Inididalamdevisikedua.ditulisdenganalignmentkanan.

    barisinidalamspandenganwarnalavender.

    Hasildibrowser:

    HyperlinkInimerupakansalahsatukeistimewaanyangdimilikiweb.Denganhyperlinkiniberbagaihalamanwebyangberbedadapatsalingdihubungkan.

    LinkAddressAbsolute Address merupakan full internet address (URL) yang meliputiprotocol,networklocation,danpath sertanamafile.Contoh :

  • PemrogramanWebLalangErawan,S.Kom

    13

    http://www.yahoo.com/index.html

    RelatifAddressURLyangtidakmenyebutkanprotocoldannetworklocationnya(hanyapathdannamafilenya).Contoh:

    Tkj/web1/materi1.html

    AnchorTagAnchoruntukmenentukanhyperlinkdalamdocumentHTML.PropertiHREFdigunakanuntukmenentukantujuandarihyperlinktersebut.

    HypertextHypertext

    LinkkeDocumentLainMisalkan ada dua document html link1.htm dan link2.htm untukmembuat linkdarilink1.htmkelink2.htm:

    Link1.htm

    UsingLinkCreating LinkClickheretoviewdocument2

    Link2.htm

    Document2Creating Linkbacktodocument1