Front end darsliklari moduli html, css, javascript

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

[phone]
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	[e-mail]	123-45-678

Vertical headers:

Name:	John Doe
Email:	[e-mail]
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