Ua Tus Kws Khw Muag Khoom Nrhiav Lub Vev Xaib: 9 Kauj Ruam

2024 Tus sau: John Day | [email protected]. Kawg hloov kho: 2024-02-01 14:40

Hauv Cov Lus Qhia Kuv yuav qhia koj yuav ua li cas thiaj ua lub vev xaib yooj yim tso saib khw kas fes nyob ze koj, Siv Google Maps, HTML thiab CSS

Khoom siv

Ib lub computer

Tus kws kho ntawv nyeem (kuv siv Atom)

Kev sib txuas wifi

Kauj ruam 1: Xaiv Text Editor

Kuv siv Atom, uas tuaj yeem rub tawm ntawm no. Thaum nws rub tawm qhib nws ua ib qhov haujlwm tshiab

Kauj Ruam 2: Tsim Koj Txoj Haujlwm Tshiab

1. Qhib Atom
2. Nrhiav cov ntaub ntawv
3. Hauv qab cov ntaub ntawv nyem tshiab
4. hauv qab sab laug (mac) yuav muaj lub pob los ua daim nplaub tshev tshiab
5. npe koj daim nplaub tshev '' Daim ntawv qhia lub vev xaib '
6. Nias qhib rau hauv qab txoj cai

Kauj Ruam 3: Tsim Koj Qhov Index.html

1. Ntxiv cov ntaub ntawv tshiab hauv koj daim nplaub tshev (Hauv atom txoj cai-nias lub nplaub tshev thiab nias tshiab)
2. Lub npe cov ntaub ntawv no 'Index.html'
3. Ntxiv cov qauv HTML yooj yim no, Qhov no tau siv hauv txhua qhov haujlwm HTML:

Kauj Ruam 4: Tau Koj Daim Ntawv Qhia

1. Mus ntsib Google maps ntawm no: Google Maps
2. Nrhiav kas fes
3. koj yuav tsum tau txais txhua lub khw kas fes hauv koj cheeb tsam dav
4. nyem peb kab tom ntej ntawm kas fes
5. nrhiav sib qhia lossis kos daim duab qhia chaw
6. xaiv daim duab qhia chaw
7. Xaiv qhov loj ntawm daim duab qhia chaw (Kuv siv Loj) thiab ua kom tiav koj qhov chaw nyob
8. nias luam HTML

Kauj Ruam 5: Ntxiv rau Lub Vev Xaib

1. Lub taub hau rov qab rau cov ntawv HTML.
2. nruab nrab ntawm ob '' cim npe ntxig cov cai no:

'

COFFEE SHOPS nyob ze koj

'Qhov EMBEDED CODE los ntawm GOOGLE MAPS'

'

Kauj ruam 6: Saib ua ntej

Qhov ntawd yog ib qho ua tiav!

txuag cov ntaub ntawv thiab pom nws hauv koj lub khoos phis tawj, Nyem ob zaug nws thiab nws yuav qhib rau hauv koj lub browser ua ntej kom pom ua ntej.

Kauj Ruam 7: Ua Kom Nws Zoo Zoo

1. Nruab nrab ntawm ob qho '' cim npe ntxiv 'Cov khw kas fes nyob ze kuv'
2. Ntxiv cov ntawv tshiab ib yam li koj tau tsim 'Index.html' tab sis lub npe nws 'Style.css'
3. rov qab rau koj cov ntaub ntawv HTML, sau cov cai no saum koj lub npe,"
4. Mus rau google cov duab thiab rub tawm daim duab ntxim hlub ntawm ib khob kas fes
5. Ntxiv cov duab rau daim nplaub tshev uas muaj cov seem ntawm peb cov ntaub ntawv
6. hauv CSS cov ntaub ntawv, Sau cov cai hauv qab no: 'lub cev {
7. keeb kwm yav dhau-duab: url (Lub Npe Ntawm Duab);
8. keeb kwm yav dhau-loj: npog;
9. }'

Kauj Ruam 8: Ua Kom Nws Zoo Zoo Pt2

1. yog tias peb txuag thiab saib ua ntej tam sim no, peb tuaj yeem pom tias cov vev xaib tom qab tam sim no tau ua nrog peb cov khob kas fes
2. Tu siab nws nyuaj nyeem peb cov lus
3. Yog li hauv CSS, hauv qab 'lub cev {}' ntxiv cov cai hauv qab no: h1 {
4. xim tom qab = rgb (255, 255, 255);
5. font-loj = 40px;
6. }

Kauj Ruam 9: REVISION

Nws yog! Koj ua tiav Koj tau kawm cov hauv paus ntawm HTML, CSS thiab cov lej kos, Ua tau zoo. Koj tuaj yeem hloov kho cov cai kom ua kom haum koj qhov kev nyiam thiab ua kom nws tso tawm daim duab qhia chaw ntawm txhua yam koj xav tau. Txij thaum ntawd los koj tuaj yeem txuas ntxiv koj li kev tsim lub vev xaib thiab txhim kho mus ib txhis.