Leson (Seyans) 2
Rapèl sou baliz
Baliz HTML yo se tout eleman de baz ou kapab itilize pou w kode nan langaj HTML lan. Yo itilize pou mete yon fòm tèks,yo striktire e yo nan lòd sou kontni paj lan. Se baliz sa yo ki endike navigatè an kòman eleman yo dwe plase sou paj web lan. Lè n’ap pale de navigatè, nou jwenn chrome,Microsoft edge elatriye.
Baliz pwemye nivo yo.
Baliz pwemye nivo yo se baliz prensipal ki striktire yon paj html. Nenpòt sa wap fè yo paka pa la, se ak yo pou w toujou kòmanse. Yo trè endispansab.
Tablo lis baliz pwemye nivo
|
Baliz |
Wòl yo |
|
<html>…</html> |
Baliz prensipal |
|
<head>….</head> |
Ki defini antèt paj la |
|
<body>…..</body> |
Ki defini kò paj la |
Baliz seksyonant
Baliz sa yo, yo itilize pou lè wap konstwi eskèlèt yon paj web oubyen sit web.
|
Baliz |
Wòl yo |
||
|
<link /> |
Lyezon avèk yon fèy de stil (pou w fè lyen ak lòt paj) |
||
|
<meta /> |
Jere karaktè spesyal (charset, mo kle, elatriye.) |
||
|
<script>……</script> |
Kòd JavaScript |
||
|
<style>……</style> |
Kòd CSS |
||
|
<title>……</title> |
Defini tit wap bay yon paj |
||
|
|
|
|
|
Baliz Striktirasyon tèks
|
Baliz |
Wòl yo |
|
<abbr>….</abbr> |
Pou fè yon abreviyasyon |
|
<blockquote>…..</blockquote> |
Pou fè yon sitasyon long |
|
<cite>……..</cite> |
Sitasyon de yon tit yon èv oubyen yon evènman. |
|
<q>……</q> |
Pou fè yon sitasyon kout |
|
<sup>…..</sup> |
Pou mete yon ekspozan |
|
<sub>……</sub> |
Pou mete yon endis |
|
<strong> |
Pou mete yon tèks an gra |
|
<em>….</em> |
Pou mete yon tèks nan estil nòmal |
|
<mark>….</mark> |
Pou mete yon valè vizyèl |
|
<h1>……</h1> |
Pou mete yon tit nan nivo 1 (1 pi gwo ke 2,3,4,5,6) |
|
<h2>……</h2> |
Pou mete yon tit nan nivo 2 (2 pi gwo ke 3,4,5,6) |
|
<h3>…..</h3> |
Pou mete yon tit nan nivo 3 (3 pi gwo ke 4,5,6) |
|
<h4>…..</h4> |
Pou mete yon tit nan nivo (4 pi gwo ke 5,6) |
|
<h5>……</h5> |
Pou mete yon tit nivo 5 (5 pi gwo ke 6) |
|
<h6>…..</h6> |
Pou mete yon tit nivo 6 |
|
<img /> |
Pou mete yon imaj |
|
<figure>….</figure> |
Pou mete yon figi (imaj, kòd, elatriye.) |
|
<figcaption>…..<figcaption> |
Pou mete deskripsyon yon figi |
|
<audio>…..</audio> |
Pou mete yon son (odyo) |
|
<video>…..</video> |
Pou mete yon videyo |
|
<source> …</source> |
Fòma sous pou baliz <audio> e <video> |
|
<a>…….</a> |
Pou fè lyen ipèTèks |
|
<br /> |
Pou sote yon liy, pase a la liy. |
|
<p>…..</p> |
Pou fè yon paragraf |
|
<hr /> |
Pou fè yon liy orizontal |
|
<address>……</address> |
Pou mete yon adrès kontak |
|
<del>…..</del> |
Pou tèks siprime |
|
<ins>…..</ins> |
Pou tèks ki ensere (tèks ou mete) |
|
<dfn>….</dfn> |
Pou definisyon |
|
<kbd>…..</kbd> |
Pou fè sezi klavye |
|
<pre>….</pre> |
Afichaj fòmate(pou kòd sous yo) |
|
<progress>….</progress> |
Pou fè ba pwogresyon |
|
<time>…..</time> |
Pou mete dat oubyen lè |
|
<center>……</center> |
Pou santre |
Kèk egzanp sou baliz striktirasyon tèks yo pou w mete an Pratik sa w sot etidye yo
Egzanp baliz p ak baliz pre( si w pa sonje wòl yo, al gade nan teyori w sot etidye yo pou wè sa yo fè pou w ka konn kilè wap itilize yo).
Egzanp baliz mark
Egzanp baliz h1 pou rive h6
Fason pou w mete yon imaj
Pwemyè fason ou ka fè l: mete imaj la nan fòldè w te kreye an. Aprè al enserel sou paj ou an, swiv demach anba yo
Atansyon: Ekstansyon imaj lan kapab (png, jfif, jpg oubyen jpeg). Fòk ou verifye ekstansyon imaj lan lè wap metel
Dezyèm fason: kreye yon fòldè anndan fòldè w te kreye an, bal yon non epi mete imaj la anndan l.
Kòman w ka fè yon lyen ipèTèks?
Men yon egzanp pou w ka fè yon espas aprè chak eleman.
“ ” an se li menm ki fè espas pou sa kap vin aprè an pa kole avèl.
Men yon egzanp pou w ka plase imaj ou yo nan sant sou paj lan, epi pou w bay imaj yo yon wotè ak yon lajè.
Width=”300px” se lajè ou bay imaj ou an, height=”300px” se wotè ou bay imaj ou an. (px = piksèl)
Pou w santre imaj yo, ou mete yo nan yon baliz ki rele center, se li ki pèmèt imaj yo plase o sant
Baliz lis
Pou kreye yon lis nan HTML, ou itilize baliz <ul> …<ul/> pou w kapab ranpli lis la w’ap mete chak eleman yo nan yon baliz <li>…</li> anndan baliz <ul> </ul> lan.
| Baliz | Wòl yo |
| <ul>…</ul> | Pou fè yon lis ki pa nimewote (lis a pis) |
| <ol>….</ol> | Pou fè yon lis ki nimewote(1,2,3,…) |
| <li>….</li> | Pou mete eleman yo |
| <dl>….</dl> | Pou lis definisyon |
| <dt>….</dt> | Tèm a defini |
| <dd>…</dd> | Definisyon tèm |
Kèk egzanp sou baliz lis yo
Genyen plizyè stil ou ka bay yon lis ki pa nimewote (lis non nimewote) ak lis nimewote, nap prezante w yo anba a.
- Disk nwa: list-style-type: disc;
- Sèk: list-style-type: circle;
- Kare nwa: list-style-type: square;
- Chif: (Sa aplike pou lis nimewote): list-style-type: decimal;
- Karaktè: list-style-type: ‘@’;
- Okenn pis: list-style-type: none;
Baliz fòmilè
Prezans eleman fòmilè HTML la fè distenge yon aplikasyon web oubyen yon sit web, yon fòmilè HTML se yon pati nan yon paj web ki bay aksè pou yon itilizatè ka kominike ak sistèm nan. Li kapab gen chan kote wap antre tèks, seleksyon, bouton, kaz pou koche, bouton opsyon, bouton soumisyon fòmilè an epi konti l o nivo sèvè web.
| Baliz | Wòl yo |
| <form>…..</form> | Pou fè yon fòmilè |
| <fieldset>….</fieldset> | Gwoup chan yo |
| <legend>….</legend> | Tit gwoup chan yo |
| <label>….</label> | Libele yon fòmilè |
| <input /> | Chan fòmilè (tèks, modpas, kaz a koche, bouton, elatriye.) |
| <textarea>…..</textarea> | Zòn pou antre enfòmasyon sou plizyè liy |
| <select>….</select> | Pou fè lis dewoulan |
| <option>….</option> | Pou mete eleman nan lis dewoulan |
| <optgroup>….</optgroup> | Gwoup eleman de yon lis dewoulan |
Kèk egzanp sou baliz fòmilè yo.
Baliz Tablo
Baliz HTML <table> anglobe tout eleman ki nan tablo an. Yon tablo dwe kòmanse pa baliz <table> e tèmine pa baliz </table>
|
Baliz |
Wòl yo |
|
<table>….</table> |
Baliz pou kòmanse yo tablo |
|
<caption>…</caption> |
Tit tablo an |
|
<tr>….</tr> |
Pou fè liy tablo an |
|
<th>…</th> |
Selil antèt(enfòmasyon antèt tablo an) |
|
<td>….</td> |
Selil ki anndan liy yo(kolòn ki anndan liy yo) |
|
<thead>…..</thead> |
Seksyon antèt tablo an |
|
<tbody>…</tbody> |
Seksyon pou mete kò tablo an |
|
<tfoot>….</tfoot> |
Seksyon pou mete pye tablo an |
Kèk egzanp sou baliz tablo.
Baliz jenerik
Baliz jenerik yo, se baliz ki pa genyen sans semantik. Nou kapab di, tout lòt baliz html yo genyen yon sans kòm egzanp: <p> ki vle di « paragraf » </p >, <h2> « sou tit » </h2>, elatriye. Pafwa, nou bezwen itilize baliz jenerik yo (nou kapab di baliz inivèsèl) kote ke okenn lòt baliz paka itilize. Pi souvan yo itilize baliz jenerik yo pou yo ka fè dizay (design). Gen yen 2 tip de baliz jenerik: youn itilize pou plase eleman yo len akote lòt an anglè “inline”, lòt la itilize pou plase eleman yo youn anba lòt an anglè “block”. Nou pral prezante w nan tablo anba a 2 baliz sa yo.
|
Baliz |
Wòl yo |
|
<span>…..</span> |
Baliz jenerik tip inline |
|
<div>…..</div> |
Baliz jenerik tip block |
Baliz sa yo gen enterè inikman si w vle ba yo yon atribi ki kapab yon class oubyen yon id:
Class: Li endike non klas wap itilize an, ou kapab gen plizyè klas ki gen menm non san pwoblèm, e yon klas ka gen plizyè non, sof ke dwe gen yon espas ki separe chak non sa yo.
Id: li bay yon non ak baliz ou asosye l lan, non sa a dwe inik nan tout paj lan, padwe genyen 2 id ki gen menm non pou si tout fwa w a vle relye plizyè blòk pou sa pa koze pwoblèm. id an pèmèt ou idantifye baliz kotel ye an, blòk kote l ye an. Jan li eksplike avan an, nou kapab sèvi ak id an pou n fè plizyè bagay,pa egzanp: kreye yon lyen vè yon ank, pou w ka bay yon stil de tip id, pou manipilasyon java script, elatriye.
style : se yon atribi ki pèmèt ou endike(aplike) dirèkteman kòd CSS ou gen pou bay lan. Pi devan nap konnen kisa CSS lan ye. Ou pa oblije gen yon paj CSS a pa, ou kapab mete atribi CSS yo dirèkteman nan paj html lan. A note ke, li rekòmande pou w kreye yon paj css a pa pou w kapab mete pwopriyete CSS yo, sa ap pèmèt nou modifye sit web nou an pi fasil.
3 atribi sa yo pa rezève pou baliz jenerik yo sèlman, nou kapab aplike yo sou lòt baliz yo san pwoblèm.
Kèk egzanp baliz
Atribi e valè
- Yon baliz ka genyen plizyè atribi, depandamman de saw bezwen fè an.
- Gen yon sèten baliz ki kapab konplete pa lòt atribi ki presize sèten paramèt (adrès lyen, sous yon imaj ou gen pou afiche, elatriye.)
Atribi : Atribi yo se eleman predefini nan langaj HTML la, nou paka envante pa nou. Nou kapab mete yo anndan yon senp kot ‘ ’, doub kot “ ” oubyen kitel konsa. Pa konvansyon nou chwazi doub kot “ ”.
Nou dwe toujou mete atribi yo anndan baliz ouvran yo.
id=”non id wap mete an “: Bay yon idantifyan avèk eleman ou pral gen pou w itilize nan CSS lan oubyen pou w fè lyen ank ou an. Pa bliye id an dwe inik nan chak paj wap gen pou w metel.
egzanp: <div id=”monId”> Kontni wap mete yo </div> class=”non klas wap mete an “: Bay yon klas avèk eleman ou pral gen pou w itilize nan CSS lan. Pa bliye yon klas ka gen plizyè non san okenn pwoblèm. Konsa tou ou ka gen plizyè klas nan yon paj ki genyen menm non.