Texnologiyalari va kommunikatsiyalarini rivojlantirish vazirligi muhammad al-xorazmiy nomidagi toshkent

O‘ZBEKISTON RESPUBLIKASI AXBOROT

TEXNOLOGIYALARI VA KOMMUNIKATSIYALARINI

RIVOJLANTIRISH VAZIRLIGI

MUHAMMAD AL-XORAZMIY NOMIDAGI TOSHKENT

AXBOROT TEXNOLOGIYALARI UNIVERSITETI

Web dasturlashga kirish

Fanidan

4-Laboratoriya

mashg`uloti

Mavzu:

14

-variant topshirig`ini bajarish.

Guruh: 022-L4 talabasi

Bajardi: Sharifjonovn Farruxjon

Mavzu:

4-variant topshirig`ini bajarish.

14-variant

Bu labaratoriya mashg`ulotida menga berilgan topshiriq bo`yicha web sahifa

tayyorlashim kerak bo`lib u web sahifada foydalanuvchi haqida ma`lumotlar

kiritish qismi ham mavjud bo`lishi lozim bo`ladi. Shuningdek web sahifani

ko`rinishini tayyorlash va u sahifani HTML hamda CSS kodlari keltuirilishi, web

sahifa ko`rinishini xam joylash talab qilingan marhamat quyida ular ketma

ketliklar asosida joylashtirilgan..

Sahifamning HTML kodi:



html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="UTF-8"

>

<

title

>FARRUXJON

title

>

<

link

rel

="stylesheet"

href

="4-LAB CSS Farrux.css"

>



head

>

<

body

class

="Bod"

>

<

div

class

="korpus"

>

<

div

id

="korpus1"

>

<

div

id

="korpus10"

>Start your journey to a better

life with online practical courses

div

>

<

table

id

="korpustible"

>

<

tr

>

<

td

id

="korpistd"

><

img

src

="peoples.jpg"

id

="imgkorpus"

align

="left"

>

Professional Trainers

<

p

id

="ptr"

>Loern ipsum dolar set amet,

consectetur adipiscing edit. snit ipsa voluptatbus.

p

>



td

>



tr

>

<

tr

>

<

td

id

="korpistd"

><

img

src

="setting.png"

id

="imgkorpus"

align

="left"

>

International Certifications <

p

id

="ptr"

>Loern ipsum dolar

set amet, consectetur adipiscing edit. snit ipsa

voluptatbus.

p

>

td

>



tr

>

<

tr

>

<

td

id

="korpistd"

> <

img

src

="diogram3.jpeg"

id

="imgkorpus"

align

="left"

>

Fre for 3 months

<

p

id

="ptr"

>Loern ipsum dolar set amet,

consectetur adipiscing edit. snit ipsa voluptatbus.

p

>



td

>



tr

>



table

>



div

>

<

div

id

="korpus2"

>

<

div

id

="korpus21"

>Signup today

<

ul

id

="korpusul"

>

<

li

id

="korpusli"

>

<

input

id

="input1"

type

="text"

alt

="Full name"

placeholder

="Full name"

>

<

div

id

="linediv"

>

div

>



li

>

<

li

id

="korpusli"

>

<

input

id

="input1"

type

="text"

alt

="email"

placeholder

="Your email address"

>

<

div

id

="linediv"

>

div

>



li

>

<

li

id

="korpusli"

>

<

input

id

="input1"

type

="text"

alt

="Password"

placeholder

="Your password"

>

<

div

id

="linediv"

>

div

>



li

>



ul

>

<

button

id

="buttonkorpus"

>Get

started

button

> 

div

>

div

>



div

>



body

>



html

>

Sahifamning CSS kodlari:

/*header*/

.

Bod

{

font-family

:

Arial

,

Tahoma

}

.

korpus

{

width

:

1100

px

;

height

:

600

px

;

background-color

:

white

;

margin

:

auto

;

}

/*content*/

#korpus1

{

float

:

left

;

background-color

:

white

;

height

:

600

px

;

width

:

600

px

;

padding-left

:

1

cm

;

color

:

#4e4b4b

;

}

#korpus10

{

width

:

400

px

;

height

:

70

px

;

margin-top

:

90

px

;

background-color

:

white

;

font-size

:

22

px

;

font-weight

:

bold

}

#korpustible

{

margin-top

:

1

cm

;

width

:

550

px

;

font-size

:

20

px

;

font-weight

:

bold

;

}

#korpistd

{

height

:

2.5

cm

}

#korpus2

{

float

:

right

;

background-color

:

black

;

height

:

410

px

;

width

:

410

px

;

border-radius

:

50

%;

color

:

white

;

text-align

:

center

;

margin-top

:

2

cm

;

margin-right

:

1

cm

;

}

#korpus21

{

margin-top

:

2

cm

;

font-size

:

24

px

}

#linediv

{

width

:

6

cm

;

height

:

2

px

;

background-color

:

#737373

;

margin

:

auto

}

#korpusul

{

list-style-type

:

none

;

margin-block-start

:

1

cm

;

padding-inline-start

:

0

px

}

#korpusli

{

height

:

1

cm

;

margin

:

0.5

cm

;}

#korpus11

{

background-color

:

white

;

background-color

:

black

;

}

#input1

{

background-color

:

black

;

color

:

white

;

height

:

1

cm

;

width

:

6

cm

;

border

:

0

px

;

border-color

:

black

;

}

#imgkorpus

{

border-radius

:

50

%;

height

:

40

px

;

width

:

40

px

;

margin-left

:

12

px

;

margin-right

:

20

px

;

margin-top

:

20

px

;

}

#ptr

{

font-size

:

13

px

;

color

:

#5d5b5b

;

}

/*footer*/

#buttonkorpus

{

width

:

3

cm

;

height

:

1

cm

;

border-radius

:

20

px

;

color

:

#8f8f8f

;

}

Sahifamning faol holatdagi korinishi.

Xulosa:

Men

bu labaratoriya mash`gulotini mustaqil bajarish davomida web

dasturlashga oid bilimlarimni yanada mustahlamlab oldim. Qo`shimcha

manbalardan foydalanib o`z ko`nikmalarimni rivojlantirdim. Bu labaratoriya

topshirig`ida berilgan ba`zi suratlarni topishning imkoni bo`lmaganligi uchun ular

o`rniga ma`no va mazmun jihatdan mos keuvchi suratlardan foydalandim.