教程 | 低噪音

WebDev 05: CSS Color

Hex and RGB Hex value: #8FBC8F RGB value: rgb(143, 188, 143) These two kinds of vuales are interchangeable, but it is wise to use just one value in coding. HSL color: hsl(120, 60%, 70%); shorts for hue-saturation-lightness. Hue: the first number, represents the degree of the hue, between 0 and 360. Saturation: refers to the intensity or purity of the color, value ranges from 0% to 100%, the higher the color becomes richer, or grayer. Lightness: refers to the light or dark of color, value ranges from 0% to 100%, the higher the color becomes lighter, or dimmer. Opacity and Alpha color: hsla(34, 100%, 50%, 0.1); The fourth value a alpha, means opacity. It ranges from 0 to 1, if the alpha is 0, the color will be completely transparent; if the alpha is 1, the color would be opaque. ...

WebDev 04: Beginner CSS

CSS add styles to web page. Each element have several style properties. Basic Propeties font-famiy h1 { font-family: Georgia; } the specific font must be installed use Web safe fonts, or the font you choose may not appear the same between all browsers and operating system. when the name of a typeface consists of more than one word, enclose the name in quotes, like ‘Courier New’. font-size p { font-size: 18px; } px means pixels font-weight ...

WebDev 03: HTML Table

Table Code Structure <table> <thead> <tr> <th scope="col"></th> <td></td> </tr> </thead> <tbody> <tr> </tr> </tbody> <tfoot> <tr> </tr> </tfoot> </table> Table Element <table></table>: contain all the tabular data. <thead></thead>: the heading of a long table. <tbody></tbady>: the body of the long table. <tr></tr>: add table rows. <th></th>: add table heading. <th scope="col">colum heading</th>, <th scope="row>row heading</th>, <th></th> blank heading. <td></td>: add table data. <td colspan="number"> let table data across several columns, <td rowspan="number"> let table data across several rows. <tfoot></tfoot>: the bottom part of a long table.

WebDev 02: HTML Document Standards

Document Type Declaration <!DOCTYPE html>: the declaration specifying the version of HTML for the browser, put it on the first line of code to tell the browser what type of document to expect. HTML Structure <!DOCTYPE html> <html> <head> <title></title> </head> <body> content that displayed to the screen. </body> </html> <html></html>: enclose all the HTML code. <head></head>: metadata, tell the browser about the page itself, not displayed on the webpage. <title></title>: the title of the web page. <body></body>: only content inside the opening and closing body tags can be displayed to the screen. Links absolute links: linking to other website <a href="URL" target="_blank">text</a> href refers to hyperlink reference, target="_blank" means opening the link in a new tab. relative links: linking to internal path in the same folder <a href="internal path(./contact.html">Contact</a>. turn image into link: <a href="link" target="_blank"><img src="image-location" alt="image despriction"/></a> linking to same page: target <div id="name">, then <a href="#name"></a>, click the link then scroll to the section you target. Comments  ...

WebDev 01: Introduction to HTML

What is HTML? HTML stands for HypeText Markup Language, it provides structure to the content appearing on a website. HTML Elements tag: <h1></h1> element: <h1>Colar</h1> basic ones <body></body>: only content inside the opening and closing body tags can be displayed to the screen. <h1></h1> <h6></h6>: six different headings. <div></div>: short for division, a container that divides the page into sections. <p></p>: plain text. <span></span>: separate a piece of content form other content. <p><span>Self-driving cars</span> are anticipated to replace up to 2 million jobs over the next two decades.</p> styling text <em></em>: emphasize text, italic <strong></strong>: highlight text <br>: line break. lists unordered lists <ul> <li>apple</li> <li>pineapple</li> <li>watermelon</li> </ul> ordered lists <ol> <li>one</li> <li>two</li> <li>three</li> </ol> other content image: <img src="image-location" alt="image-description" />, src is short for source, alt is short for alternative text. video: <video src="video-location" width="320" height="240" controls> Video not supported </video> controls instruct the browser to include basic video controls such as pausing and playing. attribute <div id="intro">