Front end darsliklari moduli html, css, javascript
Download 105.45 Kb.
|
FRONT END full notes (7) (2022 05 08 17 42 47 UTC)
- Bu sahifa navigatsiya:
- Horizontal headers
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 VIDEO IFRAME 3. HTML – INTERMEDIATE • HTML da Jadval strukturasi va ular bilan ishlash;
Horizontal headers:
Vertical headers:
• HTML da Listlar bilan ishlash; • ul – unordered • ol – ordered • dl – description list
square, disc, none description list, data, title
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… 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
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: |
Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
ma'muriyatiga murojaat qiling
ma'muriyatiga murojaat qiling