Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
KUC TRAINING CENTER
MODUL HTML
Prepara Husi
Maximeno dos Santos, L.Inf.
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
INTRODUSAUN HTML
Definisaun HTML
HTML habadak husi (Hyper Text Markup Language). Dokumentu HTML
nudar file text ida ne’ebé bele halo ho kualker editor textu. Dokumentu ne’e
kuinhesidu hanesan web page no hamosu husi web browser. Dokumentu
ne’e geralmente iha informasaun no mos aplikasaun iha internet
Definisaun TAG
Atu fo sinal ba elementu hotu ne’ebé iha dokumentu mak html ita uja Tag.
Geralmente elementu ida iha dokumentu html bele hakerek hanesan tuir mai
nee:
<narantag>………..</narantag>
Ezemplu:
<h1>………………….</h1>
Elementu HTML
HTML iha kriteria hodi hakerek mak hanesan tuir mai nee:
<html>
<head>……..informasaun konaba dokumentu HTML……..</head>
<body>…..informasaun ne’ebé sei mosu iha pajina web ……. </body>
<html>
Informasaun:
a. Kada pajina html sei komesa ho tag <html> no sei hakotu ho
tag</html>.
b. Tag <head> no </head> hanesan informasaun konaba pajina web nian.
c. Tag <body> no </body> hanesan informasaun ne’ebé sei mosu iha pajina
web nia laran.
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
1. Exersisiu dahuluk ne’e estuda kona ba Estrutura HTML
Maneira hakerek Kodigu HTML mak hanesan tuir mai ne’e:
Rezultadu husi Exersisiu 1.
2. Exersisiu 2 ne’e estuda kona ba paragrafu iha HTML
Maneira hakerek Kodigu HTML mak hanesan tuir mai ne’e:
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
Rezultadu husi Exersisiu 2.
3. Exersisiu 3 ne’e estuda kona ba Line-Break iha HTML
Maneira hakerek Kodigu HTML mak hanesan tuir mai ne’e:
Rezultadu husi Exersisiu 3.
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
4. Exersisiu 4 ne’e estuda kona ba Heading Text iha HTML
Maneira hakerek Kodigu HTML mak hanesan tuir mai ne’e:
Rezultadu husi Exersisiu 4.
5. Exersisiu 5 ne’e estuda kona ba Alinhamento ba Heading Text iha HTML
Maneira hakerek Kodigu HTML mak hanesan tuir mai ne’e:
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
Rezultadu husi Exersisiu 5.
6. Exersisiu 6 ne’e estuda kona ba Regua/<hr> iha HTML
Maneira hakerek Kodigu HTML mak hanesan tuir mai ne’e:
Rezultadu husi Exersisiu 6.
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
7. Exersisiu 7 ne’e estuda kona ba Strong <strong> no <b> iha HTML
Maneira hakerek Kodigu HTML mak hanesan tuir mai ne’e:
Rezultadu husi Exersisiu 7.
8. Exersisiu 8 ne’e estuda kona ba Italic <i> iha HTML
Maneira hakerek Kodigu HTML mak hanesan tuir mai ne’e:
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
Rezultadu husi Exersisiu 8.
9. Exersisiu 9 ne’e estuda kona ba Tag baziku iha HTML
Maneira hakerek Kodigu HTML mak hanesan tuir mai ne’e:
Rezultadu husi Exersisiu 9.
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
10. Exersisiu 10 ne’e estuda kona ba Link (ligasaun) baziku iha HTML
Maneira hakerek Kodigu HTML mak hanesan tuir mai ne’e:
Rezultadu husi Exersisiu 10.
11. Exersisiu 11 ne’e estuda kona ba List (Lista) iha HTML
Maneira hakerek Kodigu HTML mak hanesan tuir mai ne’e:
<li> uja hodi halo lista
<ul> Uja hodi halo lista ne’ebe la ordenada
<ol> uja hodi halo lista ne’ebe ordenada
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
Rezultadu husi Exersisiu 11.
12. Exersisiu 12 ne’e estuda kona ba Insert Image iha HTML
<img src=”URL”> : Uja para hatama imajen ba iha pajina web ka dokumentu
HTML
Exemplo : <img src=”Forest.JPG”>
Maneira hakerek Kodigu HTML mak hanesan tuir mai ne’e:
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
Rezultadu husi Exersisiu 12.
13. Exersisiu 13 ne’e estuda kona ba Link Image iha HTML
Maneira hakerek Kodigu HTML mak hanesan tuir mai ne’e:
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
Rezultadu husi Exersisiu 13.
14. Exersisiu 14 ne’e estuda kona ba Floating Image iha HTML
Maneira hakerek Kodigu HTML mak hanesan tuir mai ne’e:
Rezultadu husi Exersisiu 14.
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
15. Exersisiu 15 ne’e estuda kona ba Table iha HTML
Elementu iha tabela HTML mak :
<table>….</table> Atu define tabela ida
<tr>…….</tr> Atu define Linha iha tabela laran
<th> ….</th> Atu define Cell heading iha tabela
<td> ….</td> Atu define cell iha tabela laran
Atributu iha Tabela
- Align = { left | center | right} Atributu ida ne’e atu define alinhamentu ba
testu ho modelu horizontal.
- Valign = { top | middle | bottom} Atributu ida ne’e atu define alinhamentu ba
testu ho modelu Vertialmente.
- Colspan Halo marge iha cell
- Rowspan Halo Marge iha Linha
Kada linha (row) hahu ho tag tr.
Kada celula (cell) hahu ho td.
Maneira hakerek Kodigu HTML mak hanesan tuir mai ne’e:
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
Rezultadu husi Exersisiu 15.
16. Exersisiu 16 ne’e estuda kona ba Colspan no Rowspan Table iha HTML
Maneira hakerek Kodigu Colspan iha HTML mak hanesan tuir mai ne’e:
Rezultadu Colspan husi Exersisiu 16.
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
Maneira hakerek Kodigu Rowspan iha HTML mak hanesan tuir mai ne’e:
Rezultadu Rowspan husi Exersisiu 16.
17. Exersisiu 17 ne’e estuda kona ba Background Tabel iha HTML
Maneira hakerek Kodigu HTML mak hanesan tuir mai ne’e:
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
Rezultadu husi Exersisiu 17.
18. Exersisiu 18 ne’e estuda kona ba Form iha HTML
Informasaun:
Atributu name nudar naran ba formulariu.
Atributu action nudar fatin determina URl ne’ebe uja hodi prosesa field
input form.
Atributu method ne’e uja hodi determina oinsa input ruma mai husi form
bele haruka ba iha servidor.
Maneira hakerek Kodigu HTML ba input form mak hanesan tuir mai ne’e:
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
Rezultadu husi Exersisiu 18.
`
19. Exersisiu 19 ne’e estuda kona ba Radio Button iha HTML
Maneira hakerek Kodigu HTML ba radio button mak hanesan tuir mai ne’e:
Rezultadu husi Exersisiu 19.
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
20. Exersisiu 20 ne’e estuda kona ba Checkbox iha HTML
Maneira hakerek Kodigu HTML ba checkbox mak hanesan tuir mai ne’e:
Rezultadu husi Exersisiu 20.
21. Exersisiu 21 ne’e estuda kona ba Select iha HTML
Maneira hakerek Kodigu HTML ba select mak hanesan tuir mai ne’e:
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
Rezultadu husi Exersisiu 21.
22. Exersisiu 22 ne’e estuda kona ba Button iha HTML
Maneira hakerek Kodigu HTML ba button mak hanesan tuir mai ne’e:
Rezultadu husi Exersisiu 22.
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
23. Exersisiu 23 ne’e estuda kona ba Text Area iha HTML
Maneira hakerek Kodigu HTML ba textarea mak hanesan tuir mai ne’e:
Rezultadu husi Exersisiu 23.
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
EXERSISIU FORM NO TABELA
Iha exersisiu ne’e ita sei halo formulariu kona ba identidade ne’ebe sei uja mos tabela
no form:
File mak:
File name exersisiu.html
Kodigu HTML iha file exersisiu.html mak tuir mai ne’e:
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
Rezultadu Exersisiu :
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
HALO LAYOUT UJA TABELA
Imajen tuir mai ne’e hanesan layout ne’ebe sei halo uja tabela:
Atu fahe layout hanesan imajen nebe iha leten it abele halo uja tabela,
hanesan tuir mai nee:
File : layout_tabela.html.
HEADER
MENU
FOOTER
CONTEN
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
KOINHESIMENTU KONA BA CSS
SAIDA MAK Cascading Style Sheets (CSS)?
Hanesan fitur ida atu halo dinamika ba html
Style sheet hodi halo diskripsaun oinsa hamosu dokumentus html iha pagina web
(template)
Fo uniku efek ou jeito ba pagina web
Bele suporta ba iha browse hotu-hotu
Regras hakerek Cascading Style Sheets.
Valor properti la bele fo sinais “petik” exemplo color : green;
Naran properti ho case sensitive
Metodu Utiliza Cascading Style Sheets.
EXTERNAL SYTLE SHEET
FORMULA :
<link rel="stylesheet" type="text/css" href="URL" />
Observasaun :
<link hanesan tag dahuluk no taka ho sinais >
rel =“Stylesheet” hanesan pagina nebe’e sei fo efek style sheet
Type =“text/css”, file ne’ebe sei bolu ho tipu CSS
href=“gaya.css” hanesan enderesu dokumentos stylesheet
ne’ebe atu bolu ba iha pagina index
INTERNAL STYLE SHEET
FORMULA :
<style type=“text/css”> …Definisaun style…</style>
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
Exemplu :
External style sheets
Internal style sheets
REZULTADU
REZULTADU
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
1. Exersisiu 1 ne’e aprende kona ba kor (warna) background pajina HTML ho nia
style
Maneira hakerek Kodigu HTML no CSS mak hanesan tuir mai ne’e:
Rezultadu husi exersisiu CSS 1 mak imajen tuir mai :
2. Exersisiu 2 ne’e aprende kona style Informasaun HTML
Maneira hakerek Kodigu HTML no CSS mak hanesan tuir mai ne’e:
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
Rezultadu husi exersisiu CSS 2 mak imajen tuir mai :
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
HALO LAYOUT UJA HTML + CSS
Imajen tuir mai ne’e hanesan layout ne’ebe sei halo uja HTML + CSS :
Atu fahe layout hanesan imajen ne’ebé iha leten ita bele halo uja HTML ho nia
style CSS. Atu dezeña layout ida ne’e presiza file iha rua: mak file ida naran
layout.html no file ida seluk naran stylelayout.css
HEADER
MENU
FOOTER
CONTEN
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
1. File iha layout.html mak hanesan tuir mai ne’e :
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
2. File iha stylelayout.css mak hanesan tuir mai ne’e :
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
Rezultadu ba halo layout utiliza html + CSS mak hanesan tuir mai ne’e:
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
MANEIRA HALO HOSTING WEB LIU HUSI BYETHOST
Saida mak web hosting?
Servidor internet ne’ebe mak sei funsiona hodi fo fatin atu armmazena dadus sira
ne’ebe mak iha pajina web. Dadus hirak ne’e mak hanesan textu, imajen, audio, video,
aplikasaun, database no seluk tan.
Atu halo hosting ita sei presiza mak email ne’ebé aktiva hela, tamba ita sei hetan link
ne’ebe mak sei haruka husi server hostinger/Byethost.
Maneira atu registu web hosting mak hanesan tuir mai ne’e:
1. Asesu ba www.byethost.com mak sei fo sai pajina ida hanesan tuir mai :
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
2. Hanesan iha imajen iha leten, click iha sign up for free hosting mak form ida atu
registu web hosting sei mosu hanesan iha imajen tuir mai:
3. Iha form hirak ne’e sub Domain name mak sei prense enderesu sub domain, no Your
Password sei prense password tuir ita nia hakarak, email mak ita sei prense ita nia
email ne’ebe aktivu hela, Site category bele hili tuir ita nia kategoria web ne’ebe iha,
site language ne’e hili lingua no enter code ne’e tau tuir Security Code ne’ebe mak
iha, depois click iha Register mak sei sai hanesan iha imajen tuir mai ne’e:
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
4. Sai ona hanesan imajen iha leten ne’e ita bele chek ita nia email hodi hare mensagen foun
ne’ebe mak tama. Mensagen ne’e mak hanesan tuir mai ne’e:
5. Click iha mensagen ida ne’e hodi hare link ne’ebe mak iha :
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
6. Click iha link iha letene mak sei mosu pajina ida hanesan tuir mai ne’e :
8. Iha pajina Your Account Deitails :
Control Panel Username ne’e mak ita uja hodi login.
Control Panel Password ne’e mak password ba username b15_21805815 nian.
Control Panel URL mak pajina login nian.
Home page mak enderesu ba ita nia web site.
Click iha link cpanel.byethost15.com mak sei mosu pajina login hanesan tuir mai ne’e:
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
9. Depois de login mak sei mosu mai pajina principal husi byethost mosu hanesan iha imajen
tuir mai ne’e:
10. Click iha Online File Manager mak sei mosu pajina ba upload web html nian.
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
11. Click iha folder htdocs hodi upload file html. Hanesan iha imajen tuir mai ne’e click iha
upload depois browse file ne’ebe mak atu upload. (Ex: layout.html, stylelayout.css,
Forest.JPG)
12. Depois de browse tiha file, Click iha tanda centan mak sei mosu hanesan imajen tuir mai
ne’e:
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
13. Hanesan iha imajen leten, click dala ida tan iha tanda centan depois mak click fali butaun
back mak ita sei hare dadus hirak ne’ebe mak upload ona. Hanesan iha imajen tuir mai
ne’e:
14. Depois de ida ne’e halo mudansa ba file nia naran (rename) layout.html tau fali index.html
atu nune’e diretamente ba iha www.aprendehosting.byethost15.com ne’e bele asesu ona.
Karik la halo mudansa ba naran layout.html mak ita asesu ba file ne’e tenke tau url hanesan
www.aprendehosting.byethost15.com/layout.html mak ita bele asesu ita nia website.
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
15. Ikus liu mak bele asesu ona website ida ne’e liu husi :
www.aprendehosting.byethost15.com
Modul Pratika HTML - 2018
Email:[email protected] Nu. Kontaktu : +670 77176427/75633053
BROSUR KURSU
“OBRIGADO”