KUC TRAINING CENTER MODUL HTML · Modul Pratika HTML - 2018 Email:[email protected] Nu....

Modul Pratika HTML - 2018

Email:[email protected] Nu. Kontaktu : +670 77176427/75633053

KUC TRAINING CENTER

MODUL HTML

Prepara Husi

Maximeno dos Santos, L.Inf.



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.



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





3. Exersisiu 3 ne’e estuda kona ba Line-Break iha HTML





4. Exersisiu 4 ne’e estuda kona ba Heading Text iha HTML



5. Exersisiu 5 ne’e estuda kona ba Alinhamento ba Heading Text iha HTML





6. Exersisiu 6 ne’e estuda kona ba Regua/<hr> iha HTML





7. Exersisiu 7 ne’e estuda kona ba Strong <strong> no <b> iha HTML



8. Exersisiu 8 ne’e estuda kona ba Italic <i> iha HTML





9. Exersisiu 9 ne’e estuda kona ba Tag baziku iha HTML





10. Exersisiu 10 ne’e estuda kona ba Link (ligasaun) baziku iha HTML



11. Exersisiu 11 ne’e estuda kona ba List (Lista) iha HTML


<li> uja hodi halo lista

<ul> Uja hodi halo lista ne’ebe la ordenada

<ol> uja hodi halo lista ne’ebe ordenada




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”>





13. Exersisiu 13 ne’e estuda kona ba Link Image iha HTML





14. Exersisiu 14 ne’e estuda kona ba Floating Image iha HTML





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.





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.



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





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:




`

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:




20. Exersisiu 20 ne’e estuda kona ba Checkbox iha HTML

Maneira hakerek Kodigu HTML ba checkbox mak hanesan tuir mai ne’e:


21. Exersisiu 21 ne’e estuda kona ba Select iha HTML

Maneira hakerek Kodigu HTML ba select mak hanesan tuir mai ne’e:




22. Exersisiu 22 ne’e estuda kona ba Button iha HTML

Maneira hakerek Kodigu HTML ba button mak hanesan tuir mai ne’e:




23. Exersisiu 23 ne’e estuda kona ba Text Area iha HTML

Maneira hakerek Kodigu HTML ba textarea mak hanesan tuir mai ne’e:




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:



Rezultadu Exersisiu :



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



Rezultadu :



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>



Exemplu :

External style sheets

Internal style sheets

REZULTADU

REZULTADU



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:



Rezultadu husi exersisiu CSS 2 mak imajen tuir mai :



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



1. File iha layout.html mak hanesan tuir mai ne’e :



2. File iha stylelayout.css mak hanesan tuir mai ne’e :



Rezultadu ba halo layout utiliza html + CSS mak hanesan tuir mai ne’e:



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 :

http://www.byethost.com/



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:



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 :



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:



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.



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:



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.

http://www.aprendehosting.byethost15.com/

http://www.aprendehosting.byethost15.com/layout.html



15. Ikus liu mak bele asesu ona website ida ne’e liu husi :

www.aprendehosting.byethost15.com

http://www.aprendehosting.byethost15.com/



BROSUR KURSU

“OBRIGADO”

KUC TRAINING CENTER MODUL HTML · Modul Pratika HTML - 2018 Email:[email protected] Nu....

Documents

Transcript of KUC TRAINING CENTER MODUL HTML · Modul Pratika HTML - 2018 Email:[email protected] Nu....