Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • HTML

    Загружено:

    nejineon
    33 просмотров4 страницы
    htm command list

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    TXT, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    htm command list

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате TXT, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    33 просмотров4 страницы

    HTML

    Загружено:

    nejineon
    htm command list

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате TXT, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 4

    Html <!DOCTYPE html> <p>,<H1-6>,<ol>,<LI>,<UL> <img src="http://bit.ly/SJxLUx.

    "/> , Css: <p style=" font-family:Calibri; font-size:22px;color:red"> <a href: URL> </a> <body style="background-color:brown"> <h3 style="text-align:center/left/right"> (bold)<strong>;<em> (italic)</em> <!-- comment --> Table: <table> <table border="1px">(add border lines) <thead> <tr> <th>Headings in table</th> </tr> </thead> <tbody> (structure body) <tr> <td>table data or content </td> </tr> </tbody> <th colspan="2"> EXPAND HEADING EQUAL TO 2 CELL IN BODY TABLE(<tbody>). </th> </table> <table style="border-collapse:collapse;">remove visible border of table </table > <tr style="border-bottom:1px solid black;"> <th style="padding:5px;">space between cells</th> <th style="border-left:1px solid black;">to make particular border visible</th> <div style="width:50px; height:50px; background-color:Yellow">TO DIVIDE WEBPAGE and FILL BGCOLOR</div> <span style="color:red">UNLIKE <div>TO WRAP SMALLER PART OR ELEMENT OF WEBPAGE </span>!</p> FORM: <form> NAME:<input type="text" name="a" value="1">(TO CREATE INPUT BOX, MENTION TYPE OF , NAME OF IT and VALUE IN IT[if u want any value in box] ) <textarea> (TO CREATE RESIZABLE TEXTBOX) <INPUT Type='radio'> YES (TO CREATE RADIO BUTTON)[its single apostrophe not doub le] <input type='checkbox' checked> YES (checkbox with default checked when page loa ded) <input type='submit' /> (TO ADD BUTTON [CHANGE VALUE IF RENAME]) </FORM>

    Css (cascading style sheet), In stylesheet.css format write as given below: (this will change the items in webpage without affecting code, Just write span i n code at location where you want effect! and it could be used in multiple pages

    ) span { font-family:cursive; color:blue; } <link type="text/css;" rel="stylesheet"; href="URL"> (TO LINK HTM FILE TO CSS, W RITE THIS COMMAND IN HEADING )[NO CLOSING TAG!] p { font-family: Arial; color: blue; font-size: 24px; } (WRITE IN CSS, 'P' is SELECTOR like <p>, <IMG> JUS REMOVE THE TAG. change PROPE RTIES IN CURLY BRACKET AND PUT SEMI-COLON AT END.) /* I 'm a comment in CSS!*/ (write it so it helps in long run to understand flo w, when u forget why like this) color:#8a2be2; (USE COLOR HEX VALUES INSTEAD OF NAMES FOR PERFECT COLOR. NOT CAS E SENSITIVE) <p style="font-size: 1em">One em!</p> (instead of 'px' use 'em' when user have d ifferent screen that developer.e.g. smart phone! so jus say; 1em, 0.5, 2.0em say s use default screen value to user computer) h2{font-family:Verdana,sans-serif;} (BACKUP-VALUES::IF USER COMP DONT HAVE UR FONT THAN IN CSS YOU CAN MENTION OPTS LIKE , USE SANS-SERIF IF VERDANA IS MISSING!) div {background-color:#cc0000; height:100px; width:100px; } (set div to page using css) td{height:50px;border:1px dashed blue;} table{border:1px solid black} Set instant border using border code in CSS border: 4px solid #ff0000; (to set size of border along with color) p{ text-decoration:none/underline} (to remove any kind of text decoration e.g. L ink becomes link or viceversa) (TO GIVE IMG PROPER BORDER AND SIZE IN CSS) img{height:100px; width:300px; border:1px solid #4682b4} (set the rounded look for button or border) div {border-radius:100px} (If particular element nested in html in nested list, than pin point it in css a s follows): div div div h3{color:red} (UNIVERSAL SELECTOR in CSS '*' [astrick sign to apply particular effects to all elements in html!]) * {border: 2px solid black; text-align:center;}

    (TO ADD SPACE BETWEEN TWO DIV'S) <div class="space"></div> (TO MAKE PARTICULAR ELEMENT VISIBLE OR NON-VISI) .XYZ { opacity:0; } Rather than applying same rules e.g. font-cursive to elements in html, better pr epare class of rules, apply where there is class assigned in html <p class="fancy">D</p> (IN HTML) .fancy{color:#0000cd; font-family:cursive;} (IN CSS, MENTION CLASS ID and APPLY RULE! class sign '.' [dot]) <p id="serious">when you have exactly one element, to recieve a certain style ID is used (# sign in css)</p> (in HTML) #serious {font-family:courier;color:#cc0000} (in CSS, give keyword after # [sig n ID] and set rules for it like color,fonts etc) Note: above selector class and Id works in Html tree, but wht abt off tree like link accessed by user or not! so for non html element weuse pseudo-class selecto r: <a href="http://www.codecademy.com/">Codecademy Home</a> [create link in HTML] (in CSS sign is : colon) a:hover { color: #cc0000; font-weight: bold; text-decoration: none; } other than hover, a:link: An unvisited link. a:visited: A visited link (in css write below code after giving random link in html) e.g. a:link {text-decoration:none; color:#008b45;} a:hover{color:#00ff00} a:visited{#ee9a00} To be more specific like change only first child of their parents, in pseudo-sel ector] p:first-child {color:red;} (in css give above code, so it will only change first <p> out of many! ) (to give effects to all others use 'nth' instead of 'first' and provide numbers ) p:first-child {font-family:cursive;} p:nth-child(2) {font-family:tahoma;} p:nth-child(3) {color:#cc0000}

    Css box modelling (above image) To set position in webpage without using div much, can be done by setting displa y: p { display:block} Block: takes full width and don't allow to sit anyone next to it. Inline-block:allow other to sit. Inline:It also allow to sit but without formatting its like block and takes what space require not whole! None: this will make whole elements and contents disappear from page

    margin:auto; (USED TO SET POSITION OF margins IN WEBPAGE[auto will set equal right, left marg in and set object in center]) Manually as follow(RULE: top>right>bottom>left) To set individually all margins: margin-top: /*some value*/ margin-right: /*some value*/ margin-bottom: /*some value*/ margin-left: /*some-value*/ but all together: [[[ div {margin:20px 50px 10px 5px;} (in css) Again same with padding: padding::20px 50px 10px 5px; OR if you want to keep it equal from all side just write: padding: 40px To move margins by using negative values: margins: -20px 15px 10px 5px; (so here box will move shift to top because of neg ative value) To move objects on page other command is Float: div {float:right} p{float:left} (just make sure dont top up object on one another!) To avoid toppling on each other of objects use clear: left/right/bottom/both/top ; it will move object below other elements in given directions! -ABSOLUTE POSITIONING: position:absolute; (IT WILL SET STATIC POSITION OF OBJECT RELATIVE TO PARENT OBJ ECT & IF NO PARENT THEN HTML DOC! it will not loaded in normal flow but set posi tion as mentioned even top of other object) -RELATIVE: position:relative; (it will load elements in normal flow but as per given positi on with slight hinches [read online more due to its confusing concept]) position:fixed; (it will glue element on page, with scrolling other element will pass but this will remain stick to its position!))

    Вам также может понравиться