Front end darsliklari moduli html, css, javascript


Download 105.45 Kb.
bet2/12
Sana15.02.2023
Hajmi105.45 Kb.
#1200512
1   2   3   4   5   6   7   8   9   ...   12
Bog'liq
FRONT END full notes (7) (2022 05 08 17 42 47 UTC)

2. HTML — BASIC
comments, file path
The "picture.jpg" file is located in the same folder as the current page
The "picture.jpg" file is located in the images folder in the current folder
The "picture.jpg" file is located in the images folder at the root of the current web
The "picture.jpg" file is located in the folder one level up from the current folder
• div va span
• a tagi => tel, email, #id ...
Visit W3Schools.com!
Target=”_blank” new page

+47 333 78 901
Send Email
download

• HTML da atributlar yozish.


https://www.w3schools.com/tags/ref_attributes.asp

• HTML da rasm, audio va video, iframe;


IMG
IMG
AUDIO



Your browser does not support the audio tag.

VIDEO



Your browser does not support the video tag.

IFRAME




3. HTML – INTERMEDIATE
• HTML da Jadval strukturasi va ular bilan ishlash;
























Month Savings
January $100
February $80
Sum $180













Company Contact Country
Alfreds Futterkiste Maria Anders Germany


Horizontal headers:













Name Email Phone
John Doe john.doe@example.com 123-45-678


Vertical headers:















Name: John Doe
Email: john.doe@example.com
Phone: 123-45-678

• HTML da Listlar bilan ishlash;
• ul – unordered
• ol – ordered
• dl – description list

  • Coffee

  • Tea

  • Milk


square, disc, none
description list, data, title

Coffee

- black hot drink

Milk

- white cold drink



4. HTML – INTERMEDIATE
• HTML da Form elementining strukturasi;
• Form elementlari va attributlari;
• Elementlar: input, textarea, button, select, option…
• Attributlar: action, method, target, autocomplete…
• Form input turlari va attributlari;
• Turlari: button, checkbox, email, password, tel, number…
• Attributlari: for, type, name, value, id, autocomplete…


First name:



Last name:

















































The cat was playing in the garden.

Choose a car:

Volvo
Saab
Fiat
Audi

Use the size attribute to specify the number of visible values:
Use the multiple attribute to allow the user to select more than one value:







Disabled
readonly 
 maxlength="4" size="4"
required
// range
autocomplete="off" // “on”

--------------------------------------------------------------------------------------------
CSS
--------------------------------------------------------------------------------------------

1. CSS – INTRODUCTION
• CSSga kirish style turlari;
Inline style
• Internal style
• External style
• CSS selector turlari (class, id , tag)
• background-color
• Text Fonts
• font family
• font-size = rem, em, %, vw, vh,
While 
em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.
font-style normal, italic
• CSS color ( color picker )
• RGB (Red, Green, Blue) va RGBA (Red, Green, Blue, Alpha)
• HEX (Hexadecimal – 16raqamlik)
• HSL (Hue, Saturation, Lightness) va HSL (Hue, Saturation, Lightness, Alpha)

HEX RED GREEN BLUE #90403a


HUE color
Saturation = ‘0-pale=> 100 bold’
Alpha = ‘shaffoflik’
https://www.w3schools.com/colors/colors_hsl.asp


2. CSS – Background stylellar
• Display hususiyatlari;
• Inline, Block, Inline-block, none
visibility:hidden;
display:none;

  • Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.

  • Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.

• float
https://css-tricks.com/almanac/properties/f/float/



  • none: the element does not float. This is the initial value.

  • left: floats the element to the left of its container.

  • right: floats the element to the right of its container.

  • inherit: the element inherits the float direction of its parent.

• background-position / image / attachment


body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position
body {
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_background

• text-decoration, text-transform, text-indent, letter-spacing, word-spacing, text-shadow, white-space, line-height


h1 {
text-decoration: underline overline dotted red;
}

text-transform: capitalize; uppercase, lowercase


text-shadow: 2px 2px 8px #FF0000; // v, h blur
white-space: nowrap;

• Box-modellar:


• Content, Padding, Margin, Border, Width, Height
• max-width, max-height
Box-sizing
box-sizing: border-box; // on padding


Download 105.45 Kb.

Do'stlaringiz bilan baham:
1   2   3   4   5   6   7   8   9   ...   12




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
ma'muriyatiga murojaat qiling