Chapterبەش 3 · Lectureوانە 3.3

Websites and Web Developmentتۆڕگەکان و دروستکردنیان

What makes a good website, the parts of a web page, how a website is planned, built and published, the words for the people and tools involved (front end, back end, HTML, CSS, CMS, hosting), and how to give advice with should, it’s a good idea to and had better.

چی باش دەکات، بەشەکانی ، چۆن پلانی بۆ دادەنرێت، دروست دەکرێت و بڵاو دەکرێتەوە، وشەکانی ئەو کەس و ئامرازانەی تێیدا بەشدارن (، ، ، ، ، ) و چۆن بە should، it’s a good idea to و had better ئامۆژگاری بکەیت.

11 min read13 خولەک خوێندنەوە · 23 stepsهەنگاو

What you will learnچی فێر دەبیت

  • Name the parts of a web page: header, navigation menu, main content, sidebar, footer.
  • Describe the stages of making a website: plan, design, build, test, publish, update.
  • Use the words of web development: front end, back end, HTML, CSS, JavaScript, CMS, hosting.
  • Evaluate a website against clear criteria: design, navigation, accessibility, speed, accuracy.
  • Give advice with should, it’s a good idea to, I recommend, make sure and had better, and add reasons.
  • ناوی بەشەکانی بزانیت: header، ، main content، sidebar، footer.
  • قۆناغەکانی دروستکردنی وەسف بکەیت: پلاندانان، دیزاین، دروستکردن، تاقیکردنەوە، بڵاوکردنەوە، نوێکردنەوە.
  • وشەکانی دروستکردنی وێب بەکاربهێنیت: ، ، ، ، ، ، .
  • بەپێی پێوەری ڕوون هەڵبسەنگێنیت: دیزاین، ڕێنیشاندان، ، خێرایی، ڕاستی.
  • بە should، it’s a good idea to، I recommend، make sure و had better ئامۆژگاری بکەیت و هۆکار زیاد بکەیت.

EN shows the lessons for English-speaking students; کوردی shows the lessons for Kurdish-speaking students. کوردی وانەکانی خوێندکارانی کوردزمان پیشان دەدات؛ EN وانەکانی خوێندکارانی ئینگلیزیزمان پیشان دەدات.

Warm-up: what makes you stay on a website?خۆئامادەکردن: چی وات لێدەکات لەسەر تۆڕگەیەک بمێنیتەوە؟

Think of a website you use every week: a shop, a news site or your university website. Why do you like it? Is it fast? Can you find things easily? Does it work well on your phone? Most visitors decide in a few seconds whether to stay or leave.

بیر لە بکەرەوە کە هەموو هەفتەیەک بەکاری دەهێنیت: دوکانێک، هەواڵ یان زانکۆکەت. بۆچی حەزت لێیەتی؟ خێرایە؟ بە ئاسانی شتەکان دەدۆزیتەوە؟ لەسەر مۆبایلەکەت باش کار دەکات؟ زۆربەی سەردانکەران لە چەند چرکەیەکدا بڕیار دەدەن بمێننەوە یان بڕۆن.

Quick checkپشکنینی خێراA website changes its layout so that it works well on a laptop, a tablet and a phone. What is this called? شێوەی ڕێکخستنەکەی دەگۆڕێت بۆ ئەوەی لەسەر ، و مۆبایل باش کار بکات. ئەمە ناوی چییە؟

Key words: building websitesوشە سەرەکییەکان: دروستکردنی تۆڕگەکان

  • web designnoun/ˈweb dɪˌzaɪn/
    Planning how a website looks and how people use it: layout, colours, fonts and navigation.
    Good web design makes information easy to find.
    باش دۆزینەوەی زانیاری ئاسان دەکات.
  • web developernoun/ˈweb dɪˌveləpə/
    A person who writes the code that makes a website work.
    Dilan works as a freelance web developer in Duhok.
    دیلان وەک سەربەخۆ لە دهۆک کار دەکات.
  • front endnoun/ˌfrʌnt ˈend/
    The part of a website that runs in the browser and that people see and use.
    The front end is built with HTML, CSS and JavaScript.
    بە ، و دروست دەکرێت.
  • back endnoun/ˌbæk ˈend/
    The part that runs on the server: the database, user accounts and orders.
    Orders are saved in the back end.
    داواکارییەکان لە هەڵدەگیرێن.
  • HTMLnoun/ˌeɪtʃ tiː em ˈel/
    وەک خۆی لە کوردیدا بەکاردێت
    The language that gives a web page its structure: headings, paragraphs, links and images.
    Every web page is written in HTML.
    هەموو بە دەنووسرێت.
  • CSSnoun/ˌsiː es ˈes/
    وەک خۆی لە کوردیدا بەکاردێت
    The language that controls how a page looks: colours, fonts, spacing and layout.
    We changed the colours in the CSS file.
    ڕەنگەکانمان لە گۆڕی.
  • JavaScriptnoun/ˈdʒɑːvəskrɪpt/
    وەک خۆی لە کوردیدا بەکاردێت
    The programming language that makes pages interactive, for example menus that open and forms that check your input.
    JavaScript checks the form before it is sent.
    پێش ناردنی دەیپشکنێت.
Two panels joined by the internet. Left, the front end: a browser window made of three layers, HTML for the structure (headings, paragraphs, links, images), CSS for the look (colours, fonts, spacing, layout) and JavaScript for the behaviour (opening menus, checking forms). Right, the back end on a server: a database that stores the site’s data, user accounts with usernames and passwords, and the orders that customers make online.دوو بەش کە ئینتەرنێت پێکیانەوە دەبەستێت. لای چەپ، بەشی پێشەوە: پەنجەرەی تۆڕگەڕێک کە لە سێ چین پێکهاتووە: HTML بۆ پێکهاتە (سەردێڕ، بڕگە، بەستەرەکان، وێنە)، CSS بۆ ڕووخسار (ڕەنگ، فۆنتەکان، بۆشایی، ڕێکخستنی لاپەڕە) و JavaScript بۆ جووڵە و کارلێک (کردنەوەی مێنیوەکان، پشکنینی فۆرمەکان). لای ڕاست، بەشی پشتەوە لەسەر ڕاژەکار: بنکەدراوە کە دراوەکانی تۆڕگەکە هەڵدەگرێت، هەژمارەکانی بەکارهێنەر بە ناوەکانی بەکارهێنەر و تێپەڕەوشەکانەوە و ئەو داواکارییانەی کڕیاران بە ئۆنلاین دەیکەن.
The front end runs in the browser; the back end runs on the server لە کار دەکات؛ لەسەر CêIT original
Quick checkپشکنینی خێراWhich language controls the colours and fonts of a web page?کام زمان ڕەنگ و کۆنترۆڵ دەکات؟

Key words: tools and servicesوشە سەرەکییەکان: ئامراز و خزمەتگوزارییەکان

  • CMSnoun/ˌsiː em ˈes/
    Content management system: software such as WordPress that lets people change a website without writing code.
    With a CMS, the shop owner can change the prices himself.
    بە ، خاوەنی دوکانەکە خۆی دەتوانێت نرخەکان بگۆڕێت.
  • web hostingnoun/ˈweb ˌhəʊstɪŋ/
    A service that keeps your website on a server that is always connected to the internet.
    We pay for web hosting every year.
    هەموو ساڵێک پارەی دەدەین.
  • responsive designnoun/rɪˈspɒnsɪv dɪˈzaɪn/
    A way of building so that the same page changes its layout to fit any screen, from a small phone to a large .
    Thanks to responsive design, the menu becomes a small button on phones.
    بەهۆی ، لەسەر مۆبایل دەبێتە دوگمەیەکی بچووک.
The same Shirin Bakery page on three screens. On a laptop, the navigation menu is one row and the content has two columns: the main content and a sidebar. On a tablet, the menu is still a row, but the sidebar moves below the main content. On a phone, everything is in one column and the menu becomes a small button with three lines.هەمان لاپەڕەی نانەواخانەی شیرین لەسەر سێ شاشە. لەسەر لاپتۆپ، لیستی ڕێنیشاندەر یەک ڕیزە و ناوەڕۆک دوو ستوونە: ناوەڕۆکی سەرەکی و ستوونی لاتەنیشت. لەسەر تابلێت، مێنیوەکە هێشتا یەک ڕیزە، بەڵام ستوونی لاتەنیشت دەچێتە ژێر ناوەڕۆکی سەرەکی. لەسەر مۆبایل، هەموو شتێک لە یەک ستووندایە و مێنیوەکە دەبێتە دوگمەیەکی بچووک بە سێ هێڵ.
Responsive design: the layout changes to fit the screen: دەگۆڕێت تا لەگەڵ شاشەکەدا بگونجێتCêIT original
Quick checkپشکنینی خێراYour website must be online day and night. What do you pay a company for? دەبێت شەو و ڕۆژ ئۆنلاین بێت. پارەی چی دەدەیت بە کۆمپانیایەک؟

Reading: a website for a bakeryخوێندنەوە: تۆڕگەیەک بۆ نانەواخانەیەک

Readingخوێندنەوە
A website for Shirin Bakeryتۆڕگەیەک بۆ نانەواخانەی شیرین

Shirin Bakery in Duhok sells bread and cakes. Last spring, the owner, Kawa, asked Dilan, a freelance , to build a website for the shop.

Dilan started with a short meeting. “Who are your customers, and what do they need to find?” she asked. Most customers want three things: prices, opening hours and the location. Kawa also wanted people to order cakes online. Because nearly all his customers use phones, Dilan chose a : the pages change their layout to fit any screen.

Next, she drew a simple plan of each page and chose the colours of the shop sign. She built the site with a , so Kawa can change the prices himself without writing any code. For the cake orders, she wrote some extra code for the .

The site is in Kurdish and English. Kurdish is written from right to left, so every page was tested in both directions. Dilan also checked the site on old phones and slow connections, and she added to every photo.

Finally, a domain name was registered, and the site was published on a hosting company’s server. “A website is never finished,” Dilan told Kawa. “You should update it every week, or customers will stop visiting.”

Kurdish translationوەرگێڕانی کوردی

نانەواخانەی شیرین لە دهۆک نان و کێک دەفرۆشێت. بەهاری ڕابردوو، خاوەنەکەی، کاوە، داوای لە دیلان کرد کە سەربەخۆیە، بۆ دوکانەکە دروست بکات.

دیلان بە کۆبوونەوەیەکی کورت دەستی پێکرد. پرسیاری کرد: «کڕیارەکانت کێن و پێویستیان بە دۆزینەوەی چییە؟» زۆربەی کڕیاران سێ شتیان دەوێت: نرخەکان، کاتەکانی کردنەوە و شوێنەکە. کاوە هەروەها دەیویست خەڵک بە ئۆنلاین داوای کێک بکەن. لەبەر ئەوەی نزیکەی هەموو کڕیارەکانی مۆبایل بەکاردەهێنن، دیلان هەڵبژارد: لاپەڕەکان شێوەی ڕێکخستنیان دەگۆڕن تا لەگەڵ هەر شاشەیەک بگونجێن.

دواتر، نەخشەیەکی سادەی هەر لاپەڕەیەکی کێشا و ڕەنگەکانی تابلۆی دوکانەکەی هەڵبژارد. بە دروست کرد، بۆیە کاوە خۆی دەتوانێت نرخەکان بگۆڕێت بەبێ ئەوەی هیچ کۆدێک بنووسێت. بۆ داواکردنی کێک، هەندێک کۆدی زیادەی بۆ نووسی.

بە کوردی و ئینگلیزییە. کوردی لە ڕاستەوە بۆ چەپ دەنووسرێت، بۆیە هەموو لاپەڕەیەک بە هەردوو ئاراستەکە تاقی کرایەوە. دیلان هەروەها لەسەر مۆبایلی کۆن و پەیوەندیی خاو پشکنی و بۆ هەموو وێنەیەک زیاد کرد.

لە کۆتاییدا، تۆمار کرا و لەسەر کۆمپانیایەکی بڵاو کرایەوە. دیلان بە کاوەی گوت: « هەرگیز تەواو نابێت. باشترە هەموو هەفتەیەک نوێی بکەیتەوە، ئەگینا کڕیاران سەردانی ناکەن.»

Quick checkپشکنینی خێراWhy did Dilan choose a responsive design?بۆچی دیلان هەڵبژارد؟

Review questionsپرسیارەکانی پێداچوونەوە
What three things do most customers want to find?زۆربەی کڕیاران دەیانەوێت چ سێ شتێک بدۆزنەوە؟

Prices, opening hours and the location.

نرخەکان، کاتەکانی کردنەوە و شوێنەکە.

Why did Dilan use a CMS?بۆچی دیلان سیستەمی بەڕێوەبردنی ناوەڕۆکی بەکارهێنا؟

So that Kawa can change the prices himself without writing code.

تا کاوە خۆی بتوانێت نرخەکان بگۆڕێت بەبێ نووسینی کۆد.

Why was every page tested in both directions?بۆچی هەموو لاپەڕەیەک بە هەردوو ئاراستەکە تاقی کرایەوە؟

Because the site is in Kurdish (right to left) and English (left to right).

چونکە بە کوردی () و ئینگلیزییە (چەپ بۆ ڕاست).

What advice did Dilan give Kawa at the end?دیلان لە کۆتاییدا چ ئامۆژگارییەکی کاوەی کرد؟

To update the site every week, or customers will stop visiting.

هەموو هەفتەیەک نوێ بکاتەوە، ئەگینا کڕیاران سەردانی ناکەن.

The stages of making a websiteقۆناغەکانی دروستکردنی تۆڕگەیەک

  1. Planپلاندانان

    Decide the purpose, the audience and the pages.

    ئامانج، بینەر و لاپەڕەکان دیاری بکە.

  2. Designدیزاین

    Sketch the layout of each page and choose colours and fonts.

    ڕێکخستنی هەر لاپەڕەیەک بە ڕەشنووس بکێشە و ڕەنگ و هەڵبژێرە.

  3. Buildدروستکردن

    Write the HTML, CSS and JavaScript, or set up a CMS and a template.

    ، و بنووسە، یان و ئامادە بکە.

  4. Testتاقیکردنەوە

    Check every page on phones and computers, in different browsers, and with slow connections.

    هەموو لاپەڕەیەک لەسەر مۆبایل و ، لە جیاواز و بە پەیوەندیی خاو بپشکنە.

  5. Publishبڵاوکردنەوە

    Register a domain name and upload the site to a hosting server.

    تۆمار بکە و بار بکە بۆ سەر .

  6. Updateنوێکردنەوە

    Keep the content up to date and fix problems.

    ناوەڕۆکەکە نوێ بهێڵەوە و کێشەکان چاک بکە.

Each stage is taught in detail in the Web Programming lesson The Website Development Life Cycle.

هەر قۆناغێک بە وردی لە وانەی سووڕی ژیانی گەشەپێدانی تۆڕگە لە کۆرسی وێبدا فێر دەکرێت.

To publish a website, you upload it to a hosting server like these. These servers run Wikipedia.بۆ ، فایلەکانی بار دەکەیتە سەر وەک ئەمانە. ئەم ویکیپیدیا ڕادەگرن.Victor Grigas, via Wikimedia Commons · CC BY-SA 3.0
Quick checkپشکنینی خێراAt which stage do you check the site on old phones and slow connections?لە کام قۆناغدا لەسەر مۆبایلی کۆن و پەیوەندیی خاو دەپشکنیت؟

The parts of a web pageبەشەکانی لاپەڕەتۆڕێک

A wireframe of the Shirin Bakery home page in a browser window, with eight numbered parts: 1 header with logo and site name, 2 navigation menu, 3 search box, 4 main content, 5 image with alt text, 6 an Order now button, 7 sidebar with opening hours, 8 footer with contact details.ڕەشنووسی لاپەڕە سەرەکییەکەی نانەواخانەی شیرین لەناو پەنجەرەی تۆڕگەڕدا، بە هەشت بەشی ژمارەدار: ١ سەرپەڕە بە لۆگۆ و ناوی تۆڕگەکە، ٢ لیستی ڕێنیشاندەر، ٣ خانەی گەڕان، ٤ ناوەڕۆکی سەرەکی، ٥ وێنە بە دەقی جێگرەوە، ٦ دوگمەی «ئێستا داوا بکە»، ٧ ستوونی لاتەنیشت بە کاتەکانی کردنەوە، ٨ ژێرپەڕە بە زانیاریی پەیوەندی.
The home page of the Shirin Bakery website نانەواخانەی شیرین
  • page headernoun/ˌpeɪdʒ ˈhedə/
    — بەشی سەرەوەی لاپەڕە کە زۆرجار لۆگۆ و ناوی تێدایە.
    The top part of a page, usually with the logo and the site name.
    Put the logo in the header.
    لۆگۆکە لە دابنێ.
  • navigation menunoun/ˌnævɪˈɡeɪʃn ˈmenjuː/
    The group of main on a , usually at the top of every page, that helps visitors move between the main parts of the site.
    The navigation menu is the same on every page.
    لە هەموو لاپەڕەیەکدا وەک یەکە.
  • search boxnoun/ˈsɜːtʃ bɒks/
    خانەی گەڕان: خانەیەکی بچووک کە وشەی تێدا دەنووسیت بۆ گەڕان لە .
    A small box where you type words to search the site.
    Type “birthday cake” in the search box.
    «کێکی ڕۆژی لەدایکبوون» لە خانەی گەڕاندا بنووسە.
  • main contentnoun/ˌmeɪn ˈkɒntent/
    ناوەڕۆکی سەرەکی: گرنگترین زانیاریی لاپەڕەکە. content .
    The most important information on the page. Content is uncountable.
    The main content of the page is the price list.
    ناوەڕۆکی سەرەکیی لاپەڕەکە لیستی نرخەکانە.
  • sidebarnoun/ˈsaɪdbɑː/
    ستوونی لاتەنیشت: ستوونێکی باریک لە لاتەنیشتەوە کە زانیاریی زیادەی تێدایە.
    A narrow column at the side with extra information.
    The opening hours are in the sidebar.
    کاتەکانی کردنەوە لە ستوونی لاتەنیشتدان.
  • footernoun/ˈfʊtə/
    — بەشی خوارەوەی لاپەڕە، بە زانیاریی پەیوەندی، و .
    The bottom part of a page, with contact details, links and copyright.
    You can find our phone number in the footer.
    ژمارەی تەلەفۆنەکەمان لە دەدۆزیتەوە.
  • buttonnoun/ˈbʌtn/
    — دوگمە: شێوەیەکی بچووکی سەر شاشە کە لێدەکەیت یان دەستی لێدەدەیت بۆ ئەنجامدانی کارێک.
    A small shape on the screen that you click or tap to do something.
    Tap the “Order now” button.
    دەست لە دوگمەی «ئێستا داوا بکە» بدە.
  • alt textnoun/ˈɔːlt tekst/
    A short text that describes a picture, a or another image in a document, on a or on a . read it aloud for people who cannot see the image, and a shows it when the image cannot load. In HTML it is the alt attribute; in Word and PowerPoint you write it in the Alt Text .
    The alt text says: “Fresh bread on a shelf”.
    دەڵێت: «نانی تازە لەسەر ڕەفێک».
How to properly layout a website (in 8 minutes)Payton Clark Smith · Englishئینگلیزی · 107K viewsبینین · 4.2K likesلایک

Learn the main parts of a web page and their order: navigation menu, top (hero) section, body sections and footer.

بەشە سەرەکییەکانی و ڕیزبەندییان فێر دەبیت: ، بەشی سەرەوە (hero)، بەشەکانی ناوەڕۆک و بەشی خوارەوە (footer).

Navigation, hero section, body and footer of a typical web page.

بەشەکانی ئاسایی: ، بەشی hero، ناوەڕۆک و footer.

Practice: the parts of a pageڕاهێنان: بەشەکانی لاپەڕە

Exerciseڕاهێنان

Complete the sentences about web pages.

ڕستەکان دەربارەی تەواو بکە.

  1. The links to the main pages are in the menu. بۆ گرنگترین لاپەڕەکان لە .
  2. The at the bottom of the page has the contact details.ژێرپەڕە لە خوارەوەی لاپەڕەکەدا زانیاریی پەیوەندیی تێدایە.
  3. The logo is usually in the at the top.لۆگۆ زۆرجار لە سەرپەڕەدایە، لە سەرەوە.
  4. Type a word in the search to find a product.وشەیەک لە خانەی گەڕاندا بنووسە بۆ دۆزینەوەی بەرهەمێک.
  5. Every image needs text for people who cannot see it.هەموو وێنەیەک پێویستی بە هەیە بۆ ئەو کەسانەی نایبینن.
  6. Click the “Order now” . لە دوگمەی «ئێستا داوا بکە» بکە.

HTML tags are short English wordsتاگەکانی HTML وشەی کورتی ئینگلیزین

HTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<header><h1>Shirin Bakery</h1></header>
<nav>
  <a href="index.html">Home</a>
  <a href="prices.html">Prices</a>
</nav>
<main>
  <h2>Fresh bread every morning</h2>
  <img src="bread.jpg" alt="Fresh bread on a shelf">
</main>
<aside>Open 6:00–14:00</aside>
<footer>Duhok · © 2026</footer>
Explain the codeڕوونکردنەوەی کۆدەکە
Lineدێڕی 1

header = the header; h1 = heading, level 1 (the biggest).

header = سەرپەڕە؛ h1 = سەردێڕی ئاستی ١ (گەورەترین).

Lineدێڕی 2-5

nav = navigation; a = anchor, a link; href = hypertext reference, the address of the link.

nav = navigation (ڕێنیشاندان)؛ a = anchor، واتە ؛ href = ناونیشانی .

Lineدێڕی 6-9

main = main content; img = image; alt = alternative text.

main = ناوەڕۆکی سەرەکی؛ img = وێنە؛ alt = .

Lineدێڕی 10-11

aside = something at the side (a sidebar); footer = the footer.

aside = شتێک لە لاتەنیشت (ستوونی لاتەنیشت)؛ footer = ژێرپەڕە.

Quick checkپشکنینی خێراWhich HTML tag holds the links to the main pages of a site?کام گرنگترین لاپەڕەکانی لەخۆ دەگرێت؟

What makes a good website?چی تۆڕگەیەک باش دەکات؟

Web professionals judge a website against clear criteria (singular: criterion). Ask these questions when you visit a site.

پسپۆڕانی وێب بەپێی چەند پێوەرێکی ڕوون هەڵدەسەنگێنن (criteria، تاکەکەی criterionـە). کاتێک سەردانی دەکەیت ئەم پرسیارانە بکە.

CriterionپێوەرAsk yourselfلە خۆت بپرسە
ContentناوەڕۆکIs the information correct and up to date? Who wrote it, and when was it last updated?زانیارییەکان ڕاست و نوێن؟ کێ نووسیونی و دوا جار کەی نوێ کراونەتەوە؟
NavigationڕێنیشاندانCan I reach any page in two or three clicks? Is the menu the same on every page?دەتوانم بە دوو یان سێ بگەمە هەر لاپەڕەیەک؟ لە هەموو لاپەڕەیەکدا وەک یەکە؟
SpeedخێراییDoes it load quickly, even on a slow mobile connection?بە خێرایی بار دەبێت، تەنانەت بە پەیوەندیی خاوی مۆبایلیش؟
Responsive designDoes it work on a phone, a tablet and a laptop?لەسەر مۆبایل، و کار دەکات؟
DesignدیزاینIs it clean and easy to read? Do the colours and fonts work well together?ڕێک و خوێندنەوەی ئاسانە؟ ڕەنگ و لەگەڵ یەک دەگونجێن؟
Ease of useDo the buttons and forms work as I expect?دوگمە و وەک چاوەڕوانی دەکەم کار دەکەن؟
AccessibilityCan people with poor sight use it? Do images have alt text? Is there enough contrast?ئەو کەسانەی بینینیان لاوازە دەتوانن بەکاری بهێنن؟ وێنەکان هەیە؟ جیاوازیی ڕەنگ بەس هەیە؟
SecurityDoes the address start with https, especially on pages with forms?ناونیشانەکە بە https دەست پێدەکات، بەتایبەتی لەو لاپەڕانەی تێدایە؟
Quick checkپشکنینی خێراA blind student uses a screen reader. What helps her most on a website?خوێندکارێکی نابینا بەرنامەی خوێندنەوەی شاشە بەکاردەهێنێت. چی زیاتر لە یارمەتیی دەدات؟

Word focus: describing websitesوشەکان: وەسفکردنی تۆڕگەکان

  • accessibilitynoun/əkˌsesəˈbɪləti/
    Designing so that everyone can use them, including people who cannot see, hear or use a well: clear text, good colour contrast, for images and pages that work with the .
    Accessibility is a legal requirement for public websites in many countries.
    لە زۆر وڵاتدا مەرجێکی یاساییە بۆ گشتییەکان.
  • user-friendlyadjective/ˌjuːzə ˈfrendli/
    ئاسان بۆ بەکارهێنان و تێگەیشتن.
    Easy to use and understand.
    The new booking page is very user-friendly.
    لاپەڕە نوێیەکەی حیجزکردن زۆر ئاسانە بۆ بەکارهێنان.
  • up to dateadjective/ˌʌp tə ˈdeɪt/
    نوێ؛ زانیاریی تازەی تێدایە. پێش ناو بە هێڵی بچووک دەنووسرێت: up-to-date prices.
    Containing the newest information. Before a noun it has hyphens: up-to-date prices.
    Keep the opening hours up to date.
    کاتەکانی کردنەوە نوێ بهێڵەوە.
  • loadverb/ləʊd/
    بار بوون: دەرکەوتن لەسەر شاشە دوای گەیشتنی .
    To appear on the screen after the data arrives.
    The page loads in two seconds.
    لاپەڕەکە لە دوو چرکەدا بار دەبێت.
  • blognoun/blɒɡ/
    A website, or part of one, with regular posts; the newest post comes first.
    The bakery’s blog has recipes and news about new cakes, so customers come back often.
    نانەواخانەکە ڕێچکەی خواردن و هەواڵی کێکە نوێیەکانی تێدایە، بۆیە کڕیاران زۆرجار دەگەڕێنەوە.
Quick checkپشکنینی خێراWhich sentence is correct?کام ڕستە ڕاستە؟

Language focus: giving adviceزمان: ئامۆژگاریکردن

FormشێوەExampleنموونە
should / shouldn’t + verbYou should put the menu at the top. You shouldn’t use too many colours.
It’s a good idea to + verbIt’s a good idea to show the prices clearly.
I recommend (that) you + verbI recommend (that) you add a map to the contact page.
Make sure (that) + sentenceMake sure that every image has alt text.
Avoid + verb-ingAvoid using very small text.
Don’t + verbDon’t put important information only in pictures.
You’d better + verb (…, or …)You’d better test it on a phone, or customers may leave.

Advice is more convincing with a reason: to + verb, so that… or because…: “You should make the images smaller so that the page loads faster.”

ئامۆژگاری بە هۆکار قایلکەرترە: to + کار، so that… یان because…: You should make the images smaller so that the page loads faster.

How to Use Should, Ought to, Supposed to and Had Better - English Modal Verbs LessonOxford Online English · Englishئینگلیزی · 423K viewsبینین · 11K likesلایک · Partبەشی 0:45–13:42 (ofلە 13:42)

Learn to give advice with should and ought to, and strong warnings with had better, with many clear examples.

فێر دەبیت بە should و ought to ئامۆژگاری بکەیت و بە had better هۆشداریی بەهێز بدەیت، لەگەڵ نموونەی ڕوونی زۆر.

From 0:45: should, ought to, supposed to and had better.

لە ⁦0:45⁩ بەدواوە: should، ought to، supposed to و had better.

How strong is the advice?

  • must / have to: a rule or a real need (Public sites must meet accessibility standards).
  • had better (’d better): strong, often with a warning of a bad result (You’d better back up the site before the update). It refers to now or the future, not the past. Negative: had better not.
  • should / ought to: normal advice.
  • It’s a good idea to… / You might want to… / You could…: softer and more polite, good for feedback to a client.
  • needn’t / don’t have to = it is not necessary; mustn’t = it is not allowed.
  • The safest forms are I recommend (that) you add… and I recommend adding…. I recommend you to add… is possible in British English, but it sounds old-fashioned and many American readers think it is wrong.

ئامۆژگاری لە کوردی و ئینگلیزیدا

کوردیئینگلیزی
باشترە ... بکەیت / پێویستە ... بکەیتYou should …
باش نییە ... بکەیتYou shouldn’t …
دەبێت ... بکەیتYou must … / You have to …
بیرۆکەیەکی باشە ... بکەیتIt’s a good idea to …
خۆت لە ... بپارێزەAvoid …ing
دڵنیابە کە ...Make sure that …
باشترە ... بکەیت، ئەگینا ...You’d better …, or …
  1. دوای (should، must، can) کار بەبێ to و بەبێ -s دێت: You should add، نەک You should to add؛ She should update، نەک She should updates.
  2. کوردی دوای «باشترە» کاری داخوازی دادەنێت (زیاد بکەیت). ئینگلیزی شێوەی بنەڕەتیی کار بەکاردەهێنێت: add.
  3. had better وەک ڕابردوو دەردەکەوێت، بەڵام واتای ئێستا و داهاتووە: You’d better test it now.
  4. دوای avoid شێوەی -ing دێت: Avoid using small text.، نەک Avoid to use.

Practiceڕاهێنان

Exerciseڕاهێنان

Complete the advice for a new website owner.

ئامۆژگارییەکان بۆ خاوەنی نوێ تەواو بکە.

  1. You use more than three fonts. It looks messy.باش نییە زیاتر لە سێ بەکاربهێنیت. شێواو دەردەکەوێت.
  2. It’s a good idea add a map to the contact page.بیرۆکەیەکی باشە نەخشەیەک بۆ لاپەڕەی پەیوەندی زیاد بکەیت.
  3. Avoid very long pages. (use)خۆت لە بەکارهێنانی لاپەڕەی زۆر درێژ بپارێزە.
  4. You’d test the site on a phone, or you may lose customers.باشترە لەسەر مۆبایل تاقی بکەیتەوە، ئەگینا ڕەنگە کڕیار لەدەست بدەیت.
  5. Make that every image has alt text.دڵنیابە کە هەموو وێنەیەک هەیە.
  6. I recommend that you the prices every week. (update)پێشنیار دەکەم هەموو هەفتەیەک نرخەکان نوێ بکەیتەوە.

Quick checkپشکنینی خێراWhich sentence is correct?کام ڕستە ڕاستە؟

Listening and speaking: planning a website with a clientگوێگرتن و قسەکردن: پلاندانانی تۆڕگەیەک لەگەڵ کڕیارێک

Dialogueگفتوگۆ
A website for a phone repair shop in Sulaimaniتۆڕگەیەک بۆ دوکانێکی چاککردنەوەی مۆبایل لە سلێمانی
Dilan (web developer)دیلان (گەشەپێدەری وێب)

Thanks for meeting me. First, what is the main purpose of the website?

سوپاس بۆ ئەوەی هاتیت بۆ کۆبوونەوەکە. سەرەتا، ئامانجی سەرەکیی چییە؟

Hana (shop owner)هانا (خاوەنی دوکان)

I want customers to see our repair prices and book a repair online.

دەمەوێت کڕیاران نرخی چاککردنەوەکانمان ببینن و بە ئۆنلاین کاتی چاککردنەوە حیجز بکەن.

Dilan (web developer)دیلان (گەشەپێدەری وێب)

OK. Who are your customers?

باشە. کڕیارەکانت کێن؟

Hana (shop owner)هانا (خاوەنی دوکان)

Mostly students and young people. They use their phones for everything.

زۆربەیان خوێندکار و گەنجن. بۆ هەموو شتێک مۆبایلەکانیان بەکاردەهێنن.

Dilan (web developer)دیلان (گەشەپێدەری وێب)

Then the site must work perfectly on phones. I recommend a simple design with big buttons.

کەواتە دەبێت لەسەر مۆبایل بە تەواوی کار بکات. پێشنیاری دیزاینێکی سادە بە دوگمەی گەورە دەکەم.

Hana (shop owner)هانا (خاوەنی دوکان)

Good. Should the site be in Kurdish or English?

باشە. بە کوردی بێت یان ئینگلیزی؟

Dilan (web developer)دیلان (گەشەپێدەری وێب)

I’d suggest both. Kurdish is written from right to left, so I’ll design the layout for both directions.

پێشنیاری هەردووکیان دەکەم. کوردی لە ڕاستەوە بۆ چەپ دەنووسرێت، بۆیە ڕێکخستنەکە بۆ هەردوو ئاراستە دیزاین دەکەم.

Hana (shop owner)هانا (خاوەنی دوکان)

How much work will it be for me after the site is finished?

دوای تەواوبوونی ، چەند کار دەکەوێتە سەر من؟

Dilan (web developer)دیلان (گەشەپێدەری وێب)

Not much. But you’d better update the prices when they change, or customers will be unhappy. With the CMS, it only takes a few minutes.

زۆر نا. بەڵام باشترە نرخەکان نوێ بکەیتەوە کاتێک دەگۆڕێن، ئەگینا کڕیاران ناڕازی دەبن. بە تەنها چەند خولەکێک دەخایەنێت.

Hana (shop owner)هانا (خاوەنی دوکان)

And what about the web address?

ئەی ناونیشانی وێبەکە؟

Dilan (web developer)دیلان (گەشەپێدەری وێب)

We need a domain name and hosting. It’s a good idea to choose a short name with no hyphens, so it’s easy to say on the phone.

پێویستمان بە و هەیە. بیرۆکەیەکی باشە ناوێکی کورت بەبێ هێڵی بچووک هەڵبژێریت، تا بە تەلەفۆن گوتنی ئاسان بێت.

Hana (shop owner)هانا (خاوەنی دوکان)

Perfect. When can I see a first design?

نایابە. کەی دەتوانم یەکەم دیزاین ببینم؟

Dilan (web developer)دیلان (گەشەپێدەری وێب)

I’ll send you a draft of the home page next week.

هەفتەی داهاتوو ڕەشنووسێکی بۆ دەنێرم.

ExerciseڕاهێنانYour turn: a planning meetingنۆرەی تۆیە: کۆبوونەوەیەکی پلاندانان

Work with a partner. Student A owns a small business (a café, a clothes shop, a driving school…). Student B is the web developer. B asks about the purpose, the customers, the pages, the languages and who will update the site, and gives advice with should, I recommend, it’s a good idea to and you’d better. Then change roles.

لەگەڵ هاوڕێیەکت کار بکە. خوێندکاری A خاوەنی کارێکی بچووکە (چایخانە، دوکانی جلوبەرگ، قوتابخانەی لێخوڕین…). خوێندکاری B . B دەربارەی ئامانج، کڕیاران، لاپەڕەکان، زمانەکان و ئەوەی کێ نوێ دەکاتەوە پرسیار دەکات و بە should، I recommend، it’s a good idea to و you’d better ئامۆژگاری دەکات. پاشان ڕۆڵەکان بگۆڕنەوە.

Hintئاماژە

Useful questions: What is the site for? Who will visit it? Which pages do you need? Who will update it?

پرسیاری بەسوود: What is the site for? Who will visit it? Which pages do you need? Who will update it?

Writing: a website reviewنووسین: هەڵسەنگاندنی تۆڕگەیەک

ExerciseڕاهێنانReview a websiteتۆڕگەیەک هەڵبسەنگێنە

Choose a website you use, for example your college website or a shop. Write a review of 80–100 words. Say what the site is for, what is good, what could be better, and give two pieces of advice with reasons. Use the criteria in this unit.

هەڵبژێرە کە بەکاری دەهێنیت، بۆ نموونە کۆلێژەکەت یان دوکانێک. هەڵسەنگاندنێکی ٨٠ تا ١٠٠ وشەیی بنووسە. بڵێ بۆ چییە، چی باشە، چی دەکرێت باشتر بێت و دوو ئامۆژگاری لەگەڵ هۆکار بدە. پێوەرەکانی ئەم وانەیە بەکاربهێنە.

Hintئاماژە

Structure: purpose → good points → problems (however…) → advice + reason.

ڕیزبەندی: ئامانج ← خاڵە باشەکان ← کێشەکان (however…) ← ئامۆژگاری + هۆکار.

Show answerوەڵامەکە پیشان بدە

Model answer: Our college website gives students news, timetables and exam results. The design is clean, and the navigation menu is the same on every page, so it is easy to use. However, the site is slow on phones, and some news pages are not up to date. Also, many images have no alt text, which is a problem for blind students. I recommend making the images smaller so that the pages load faster. It should also update the news every week.

وەڵامی نموونە: کۆلێژەکەمان هەواڵ، خشتەی کات و ئەنجامی تاقیکردنەوە دەدات بە خوێندکاران. دیزاینەکەی ڕێکە و لە هەموو لاپەڕەیەکدا وەک یەکە، بۆیە بەکارهێنانی ئاسانە. بەڵام لەسەر مۆبایل خاوە و هەندێک لاپەڕەی هەواڵ نوێ نەکراونەتەوە. هەروەها زۆر لە وێنەکان نییە، کە ئەمە کێشەیە بۆ خوێندکارە نابیناکان. پێشنیار دەکەم کۆلێژەکە وێنەکانی بچووکتر بکاتەوە تا لاپەڕەکان خێراتر بار ببن. هەروەها باشترە هەموو هەفتەیەک هەواڵەکان نوێ بکاتەوە.

هەڵە باوەکانی کوردزمانان

هەڵەڕاستبۆچی؟
You should to update the website.You should update the website.دوای should کار بەبێ to دێت.
I recommend you to add a map.I recommend that you add a map. / I recommend adding a map.recommend you to لە ئینگلیزیی بەریتانیدا هەیە، بەڵام کۆن دەردەکەوێت و زۆر ئەمریکی بە هەڵەی دەزانن. ئەم دوو شێوەیە سەلامەتترن.
a HTML pagean HTML pageHTML بە دەنگی بزوێن دەست پێدەکات («ئێچ»)، بۆیە an دێت.
the website collegethe college website« کۆلێژ» لە ئینگلیزیدا پێچەوانە دەبێتەوە: وشە سەرەکییەکە دواجار دێت.
The website has many contents.The website has a lot of content.content بەم واتایە .
Kurdish writes from right to left.Kurdish is written from right to left.زمان خۆی نانووسێت، بۆیە پێویستە.
Avoid to use small text.Avoid using small text.دوای avoid شێوەی -ing دێت.

دەربڕینی دروست

  • design /dɪˈzaɪn/: پیتی g ناخوێنرێتەوە: «دیزاین».
  • header /ˈhedə/، نەک «هیدەر».
  • menu /ˈmenjuː/ و layout /ˈleɪaʊt/.
  • HTML پیت بە پیت: «ئێچ-تی-ئێم-ئێڵ»؛ CSS: «سی-ئێس-ئێس».

وەرگێڕان: لە کوردییەوە بۆ ئینگلیزی

Exerciseڕاهێنان

ئەم ڕستانە وەربگێڕە بۆ ئینگلیزی. ١. باشترە لە سەرەوەی لاپەڕەکە دابنێیت. ٢. لەسەر کۆمپانیایەکی بڵاو کرایەوە. ٣. دڵنیابە کە هەموو وێنەیەک هەیە. ٤. خۆت لە بەکارهێنانی ڕەنگی زۆر بپارێزە.

Show answerوەڵامەکە پیشان بدە
  1. You should put the navigation menu at the top of the page.
  2. The website was published on a hosting company’s server.
  3. Make sure that every image has alt text.
  4. Avoid using too many colours.

Going further: job titles, hyphens and polite feedback

  • Web designer plans the look and the user experience; web developer writes the code. A front-end developer works on what runs in the browser, a back-end developer on the server, and a full-stack developer on both. Webmaster is an older word for the person who runs a site.
  • Hyphens: use a hyphen when the compound comes before a noun: a front-end developer, an up-to-date list, a user-friendly menu. No hyphen as a noun phrase: work on the front end, keep it up to date.
  • Publishing verbs: publish, launch, go live, put a site up, take a site down; developers also say deploy.
  • content is uncountable (a lot of content, a piece of content); contents means the list of chapters in a book.

Extension: polite feedback for a client

Exerciseڕاهێنان

Direct criticism can sound rude to a client. Soften these comments with could, might, would or it would be a good idea to. 1. Your home page is too busy. 2. Your text is too small. 3. Change the colours.

Show answerوەڵامەکە پیشان بدە
  1. The home page could be a little simpler. It might help to remove some of the boxes.
  2. It would be a good idea to make the text slightly bigger, so that it’s easier to read on phones.
  3. Would you consider using the colours of your shop sign? They would make the site look more professional.

Reviewپێداچوونەوە

Review questionsپرسیارەکانی پێداچوونەوە
What is the difference between the front end and the back end?جیاوازیی نێوان بەشی پێشەوە و بەشی پشتەوە چییە؟

The front end runs in the browser and is what people see and use. The back end runs on the server: the database, accounts and orders.

لە کار دەکات و ئەوەیە کە خەڵک دەیبینن و بەکاری دەهێنن. لەسەر کار دەکات: ، هەژمارەکان و داواکارییەکان.

Name the six stages of making a website.ناوی شەش قۆناغەکەی دروستکردنی تۆڕگەیەک بهێنە.

Plan, design, build, test, publish, update.

پلاندانان، دیزاین، دروستکردن، تاقیکردنەوە، بڵاوکردنەوە، نوێکردنەوە.

Where on a page do you usually find the contact details?زۆرجار زانیاریی پەیوەندی لە کوێی لاپەڕەکەدا دەدۆزیتەوە؟

In the footer.

لە ژێرپەڕەدا (footer).

Give one piece of advice about images on a website, with a reason.ئامۆژگارییەک دەربارەی وێنەکانی تۆڕگەیەک بدە، لەگەڵ هۆکار.

For example: You should add alt text to every image so that blind visitors can understand it. / You should make images smaller so that pages load faster.

بۆ نموونە: You should add alt text to every image so that blind visitors can understand it.

Quick checkپشکنینی خێراWhich tool lets a shop owner change a website without writing code?کام ئامراز ڕێگە بە خاوەنی دوکانێک دەدات بگۆڕێت بەبێ نووسینی کۆد؟

Quick checkپشکنینی خێراWhich advice is the strongest?کام ئامۆژگاری بەهێزترینە؟

Videoڤیدیۆ

Watch a videoسەیری ڤیدیۆیەک بکە

A video that viewers liked a lot and praised in their comments, chosen for this lesson.ڤیدیۆیەک کە بینەران زۆریان پێ خۆش بووە و لە کۆمێنتەکانیاندا ستایشیان کردووە، بۆ ئەم وانەیە هەڵبژێردراوە.

How Websites Work | simply explained with examplesTechWorld with Nana · Englishئینگلیزی · 93K viewsبینین · 2.4K likesلایک

See what a website is made of: front-end code (HTML, CSS, JavaScript), back-end code and a database, and the servers that host them.

دەبینیت لە چی پێکهاتووە: کۆدی وەک ، و ، کۆدی و و ئەو لەسەریان دادەنرێت.

How a website is built and delivered: front end, back end, servers.

چۆن دروست دەکرێت و چۆن دەگاتە لای تۆ: ، و .

Lesson complete!وانەکە تەواو بوو!

Well done. Review the key terms, then go on to the next lesson.دەستخۆش. سەیرێکی زاراوە سەرەکییەکان بکەرەوە، پاشان بڕۆ بۆ وانەی داهاتوو.

Key termsزاراوە سەرەکییەکان

Next lessonوانەی داهاتوو

Communicating Onlineپەیوەندیکردن بە شێوەی ئۆنلاین

References and further readingسەرچاوەکان و خوێندنەوەی زیاتر

This lecture is a first edition. The Kurdish text and terminology are waiting for review by Kurdish IT teachers.ئەم وانەیە چاپی یەکەمە. دەقە کوردییەکە و زاراوەکانی چاوەڕێی پێداچوونەوەی مامۆستایانی کوردی بواری IT ن.